teleren/devto huggingface dataset:
Check out good Web Development Communities
Tags: webdev, devops, showdev
Published: 2019-05-28 03:51:14

---
title: Check out good Web Development Communities 
published: true
description: 
tags: webdev, devops, showdev
cover_image: https://i.imgur.com/3o9oILa.jpg
---

Web Development Communities
-------------------------------------------------------------------------------------------------------------

Every web developer has been there. They have a problem and what do they do? Well, they go to Google to find a quick answer. The web offers so much content right at our fingertips that it makes it easy to diagnose and troubleshoot problems when they arise. Check out a few good web development communities below.

-   [Stack Overflow](http://stackoverflow.com/): Community of 4.7 million programmers, just like you, helping each other.
-   [Dev Community](http://dev.to/): A Place Where Developers Share There Intresting articles here, just like you, helping each other.
-   [Front-end Front](https://frontendfront.com/): A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community.
-   [Hashnode](https://hashnode.com/): Global community for software developers to connect and learn to program from each other.
-   [Refind](https://refind.com/): Community of founders, hackers, and designers who collect and share the best links on the web.
-   [Google+ Web Developers Group](https://plus.google.com/u/0/communities/114175980151299757659): Web developers, web designers, and web coding.
-   [Google+ Web Developers Group](https://plus.google.com/communities/114947356043496560984): Java, PHP, Ruby, JavaScript, and Python Resources
-   [Facebook WordPress Front-end Developers Group](https://www.facebook.com/groups/wpfrontenddevs/): WordPress Front End Developers is a group for devs to ask questions, share their work, discuss emerging trends, and collaborate.
-   [LinkedIn Web Design and Development Professionals Group](https://www.linkedin.com/groups/139851/profile): Networking and information sharing a resource for professional Web Designers, Web Developers, and Web Masters.
-   [LinkedIn Web Site Development Group](https://www.linkedin.com/groups/2192521/profile): Website design & programming.
-   [LinkedIn PHP Developer Group](https://www.linkedin.com/groups/2195403/profile): PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
-   [LinkedIn WordPress Developers Group](https://www.linkedin.com/groups/3722491): WordPress Codex. Using WP as CMS and CMF.
-   [Webdeveloper.com](http://www.webdeveloper.com/forum/): Where web developers and designers learn how to build web sites, a program in HTML, Java, and JavaScript.
-   [Sitepoint Forums](https://www.sitepoint.com/community/): Web development discussion.
-   [/r/perfmatters](https://www.reddit.com/r/perfmatters/): The #1 subreddit about web performance and web development.
-   [/r/webdev](https://www.reddit.com/r/webdev): What's new for web developers.
CSS games are fun!
Tags: showdev, css, games, webdev
Published: 2019-05-28 03:00:31

---
title: CSS games are fun!
published: true
description: Developing CSS games can be fun and a learning experience. Here is a demo of a CSS game I developed over the weekend.
canonical_url: https://alvaromontoro.com/blog/67837/css-games-are-fun
tags: showdev,css,games,webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zs34ddpqxy5k9juwua62.png
---

CSS games (small games developed exclusively with CSS and HTML, without any JavaScript) are often dismissed by developers as a waste of time. And they may have a point if you consider performance and maintainability.

But...

If you look at them from a different point of view, developing games using CSS makes for some cool challenges, and they can be a great learning experience. You need to:

1. Use more complex selectors.
2. Deal with specificity conflicts.
3. Practice combinators and pseudo-classes.

Not to mention that the CSS-only restriction puts the focus on the analysis and design and forces the developer to stop and think before jumping into coding.

With that in mind, and stuck at home with a cold on Saturday, I decided to give it a try and develop a [tic-tac-toe game using only CSS and HTML](https://codepen.io/alvaromontoro/pen/vwjBqz).

There are many examples of CSS tic-tac-toes online [like this one from Žiga Miklič](https://codepen.io/ziga-miklic/pen/Fagmh) or [this other one from Jhey](https://codepen.io/jh3y/pen/BVaGKP/). And they actually look better than mine... So I decided to take mine one step further.

By adding some "artificial intelligence" (using this term quite loosely here), I was able to make it so the machine would actually play with some logic and a "winning mentality."

Here is a [demo](https://codepen.io/alvaromontoro/pen/BexWOw). I know it may be a bit silly, but it is something that I feel proud of.

{% codepen https://codepen.io/alvaromontoro/pen/BexWOw %}

What is your experience with CSS games? Have you developed one before? Please share, I'd love to see them.
Cache Rails gems using docker-compose
Tags: docker, dockercompose
Published: 2019-05-28 01:03:58

---
title: Cache Rails gems using docker-compose
published: true
description: 
tags: docker, docker-compose
---

# Introduction
Let's suppose you have a `docker-compose.yml` like the one below.
You have to run `docker-compose build` every time you add/remove a gem to/from your `Gemfile` and it is very time-consuming.
It would be great if I could just run `bundle install` and get back to developing the application. 
Well... I'll show you exactly that in this post.


```yml
version: "3"
services:
  app:
    build: .
    volumes:
      - .:/app
    depends_on:
      - postgres
  postgres:
    image: postgres
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data

volumes:
  postgres-data:
```

# Set up your docker-compose.yml
Follow the steps below.

- (1) Set up `BUNDLE_PATH` using `environment`. 
- (2) Set up the named volume `bundle_path` and add it to the top level `volumes`.

Here is the modified `docker-compose.yml`.

```yml
version: "3"
services:
  app:
    build: .
    volumes:
      - .:/app
      - bundle_path:/bundle # New
    environment:
      - BUNDLE_PATH=/bundle/vendor #New
    depends_on:
      - postgres
  postgres:
    image: postgres
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data

volumes:
  bundle_path: # New
  postgres-data:
```

# How to use it?
## Create the cache of the gems

Run the command below to create the cache of the gems after you modified your `docker-compose.yml`.

```
$ docker-compose app bundle install
```

## Add or Remove a gem

- (1) Stop the running containers.
 
```
$ docker-compose down
```

- (2) Add a new gem and run the command below.

```
$ docker-compose run app bundle install
```

- (3) Get the containers running again.

```
$ docker-compose up
```
Will you take a paycut for a supportive work environment?
Tags: discuss, career
Published: 2019-05-28 00:18:14

---
title: Will you take a paycut for a supportive work environment?
published: true
description: A discussion on at what cost is supportive work environments worth sacrificing for.
tags: discuss,career
---
It is not uncommon nowadays for jobs in tech to come with full of perks and benefits. But, the main one I don't see enough discussions about (and is sadly seen as a taboo): pay/salary.

To add to the question in the title, a supportive environment can be:
- One where you feel comfortable asking for help;
- One where they invest in you to improve yourself by allowing you to go on training courses and conferences;
- One where you feel comfortable voicing your opinion and it really counts;
- One with flexible working hours and where working over time is not expected/the norm

And as a follow-up to the main question, how much of a paycut (5% from your current pay? 10%?) are you willing to take before it is too much of a sacrifice?

Follow-up 2 to the main question - since it can be hard to determine if a new work place will be supportive, although often there are telling signs during the interview. The bottom line is, they are paying more; will you take the offer even though your current work environment is supportive? In other words, by staying, you are effectively taking the paycut. Or vice versa!

In an attempt to get more points of views, I also shared this on Twitter (where some of you may have found this 😊) and encouraged discussions on there. You can find some of the responses in the following tweet thread:
{% twitter 1135167535404519424 %}
Introduction to PHP for beginners
Tags: php, opensource, script
Published: 2019-05-27 20:22:56

**INTRODUCTION TO PHP**

The most popular explanation of just what PHP stands for is "Hypertext Pre-processor". But that would make it HPP, surely? An alternative explanation is that the initials come from the earliest version of the program, which was called Personal Home Page Tools created by Rasmus Lerdorf in 1994. At least you get the letters "PHP" in the right order!

PHP is probably the most popular scripting language on the web. It is used to enhance web pages. With PHP, you can do things like create username and password login pages, check details from a form, create forums, picture galleries, surveys, and a whole lot more.

**OVERVIEW OF PHP**

It's an open source, server-side, scripting language used for the development of web applications. By scripting language, we mean a program that is script-based (lines of code) written for the automation of tasks.

What does open source mean? Think of a car manufacturer making the secret to its design models and technology innovations available to anyone interested. These design and technology details can be redistributed, modified, and adopted without the fear of any legal repercussions. The world today might have developed an amazing supercar!

By server-sided language, it means PHP doesn't get executed on your computer, but on the computer you requested the page from(The W.W.W). The results are then handed over to you, and displayed in your browser.

Web pages can be designed using HTML. With HTML, code execution is done on the user's browser (client-side). On the other hand, with PHP server-side scripting language, it's executed on the server before it gets to the web browser of the user.

PHP can be embedded in HTML, and it's well suited for web development and the creation of dynamic web pages for web applications, e-commerce applications, and database applications. It's considered a friendly language with abilities to easily connect with MySQL, Oracle, and other databases.

There are other scripting languages such as ASP, Python and Perl. But PHP is preferred for some reasons like;

1. PHP runs on various platforms such as Windows, Linux, Unix, Mac OS X etc.
2. PHP is free. It can be downloaded from the official PHP resource: www.php.net
3. PHP is easy to learn and runs efficiently on the server side.
Introducing textua11y: A Color Contrast Tool
Tags: a11y, color, ideas, webdev
Published: 2019-05-27 23:19:06

---
title: Introducing textua11y: A Color Contrast Tool
published: true
description: Looking for a quick way to test foreground and background colors in text-heavy areas of your web application?
tags: a11y, color, ideas, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ujvl87jd49qvfbsmcudz.png
---

Yesterday, I made a post about ideas and going after them. Every idea is a learning experience. There are no dumb ideas.

{% link ashleemboyer/just-make-that-app-59gl %}

Well, writing that post pushed me to elaborate on a super simple color tool I created for a post about generating Gatsby sites from JSON files. This site shows you whether to use black or white text on a colorful background. All of the colors come from the [Material Design color palette](https://material.io/tools/color/#!/).

{% link ashleemboyer/build-a-multi-page-gatsby-site-from-json-3kp %}

I'd like to introduce you to [textua11y](https://ashleemboyer.github.io/textua11y/). You can choose a text and background color, then use the Chrome developer tools to hover over the text elements and check your color contrast ratio. There's a lot to work with here.

![A demonstration of the app's first version](https://thepracticaldev.s3.amazonaws.com/i/gzt7rxfx2y83qldxosyw.gif)

I have multiple ideas on how to keep going with this, but I also want to hear from you! When you go to the site and click around, what do you feel like is missing? Anything random and cool you'd like to see? I'm excited to keep working on the tool this week.

Current top todos:
1. "Go back" between steps in the color pickers
2. Display text with the contrast score
3. Show the selected color hex values in addition to the names

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).
React Lightbox. Introducing Fullscreen Lightbox Basic!
Tags: react, reactlightbox, lightbox, fullscreenlightbox
Published: 2019-05-27 22:48:59

---
title: React Lightbox. Introducing Fullscreen Lightbox Basic!
published: true
description: Basic version of Fullscreen Lightbox now working in React Environment!
tags: react, react lightbox, lightbox, fullscreen lightbox
---
Basic version of Fullscreen Lightbox now working in React Environment! 
You can easily use powerful lightbox with just one component.

![React Lightbox](https://thepracticaldev.s3.amazonaws.com/i/fzpfawn8zm7jlebbq6l1.png)

You can install lightbox using npm: 
npm install — save-dev fslightbox-react

Or from tarball archive. Download: https://fslightbox.com/react/download

Demo: https://fslightbox.com/react

You can learn how to use lightbox in documentation: 
Documentation: https://fslightbox.com/react/documentation

Project repository: 
https://github.com/piotrzdziarski/fslightbox-react

![Fullscreen Lightbox](https://thepracticaldev.s3.amazonaws.com/i/mbddqm379af4u9v4dhnf.jpg)
Which should be my next post? Topics 👇
Tags: discuss
Published: 2019-05-27 22:48:25

1. How to easily accept stripe payments in node

2. How to setup a graphql server

3. How to connect sockets to your node app

4. How to setup your express app and solve most errors you are to face.

5. How to connect a react app with a node backend.


You can comment the topics you want me to write about. Let's go
Create Waves With Pure CSS
Tags: css, html
Published: 2019-05-27 20:22:01

---
title: Create Waves With Pure CSS
published: true
description: Create Waves like in playstation 4 Interface with pure CSS
tags: css, html
---

<p>Hello everyone!</p>

<p>Today we are going to learn how to create waves with pure CSS like in ps4 interface, Here is the final result:</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/a79p4ddf652wvsi8lv1y.gif">

<h2>Let's get started</h2>
<p><strong>HTML</strong></p>
```html
<div class='box'>
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
      </div>
```

<p>We need a "div" for each wave you want to set up, in this example we are going to use 3 of them with the class "wave" and we are going to wrap them in another div with class "box".</p>


<p><strong>CSS</strong></p>

```css
.box {
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 0;
}

.wave {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}
```

<p>First we need to defined the "box" container as fixed position in this case, to achieve the same effect as the ps4 interface, the next 3 css rules are only for positioning the "box" element wherever you want. You can play around with those values.</p>

<p>After you set up the "box" element it is time to create the waves. If you look at the rules in the "wave" class most of the rules are for the positioning of the waves, but the key rule for this animation is the border-radius, here is the reason why:</p>


<img src="https://thepracticaldev.s3.amazonaws.com/i/knvp3k19j1yu3zldd1nv.gif">

<p>We are creating rectangles with a moderate value of border-radius, if we zoom into a corner of this animation, and we position this waves in the right place we are going to achieve the wave effect.</p>


<p>Now we need to create the animation in order to rotate the waves. Super simple!</p>
```css
@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

```
<p>Once we have our animation in the css, we need to set the animation into our waves with different timing and background colors, you can also play around with the opacity :D</p>

```css
.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}
```

<p>And we are done! now you should be able to see the waves!!! Similar to this codepen I made a while back (works correctly on desktop only)</p>

{% codepen https://codepen.io/Pixmy/pen/qaYQoV %}

<p><strong>This was my first post! Hope you like it :D</strong></p>
How do you "label" yourself as a professional developer?
Tags: discuss, career
Published: 2019-05-27 22:27:01

---
title: How do you "label" yourself as a professional developer?
published: true
description: How do you answer when someone asks, "What kind of developer are you?"
tags: discuss, career
cover_image: https://mir-s3-cdn-cf.behance.net/project_modules/disp/12df867400735.560aad2e4700f.jpg
---
_Cover image: "Homeward" by Kathrin Loges and Jan D. Wunderlich is licensed under CC BY-NC-ND 4.0_


Over the past _(nearly)_ 6 years I've been less than great about keeping my résumé up to date. Over the Memorial Day weekend, I've started working on a personal blog/resume/showcase website. While exploring examples of these types of websites, I've noticed that many include a "self-label" or "self-title"... something along the lines of:
> I'm a _blank_ developer interested in _blank_.

**_I don't know how I would answer this question for myself_**

If forced to answer, I'd probably use a word like "generalist" or "polyglot." I've worked on web apps, REST APIs, cross-platform desktop apps, databases, internal tools, build systems, etc. I definitely don't feel like I have a specialization, and honestly I don't know if specialization is the "right" path for me. All-in-all, I'm at a loss for how I would label/title myself as a developer.

So, dearest Dev.to community, I'd love to get your feedback on how you answer the question of "What kind of developer are you?" and how you came to answer that question for yourself. I'm super excited to engage in the comments! Thanks in advance!
datus - a fluent java data-mapping library
Tags: java, functional, opensource
Published: 2019-05-27 21:54:51

[datus](https://github.com/roookeee/datus) lets you define data conversion with an easy to use fluent builder system for handling additional processing or edge cases. No more boiler-platey factory classes for mutable:

```java
class Person {
    //getters + setters omitted for brevity
    private String firstName;
    private String lastName;
}

class PersonDTO {
    //getters + setters + empty constructor omitted for brevity
    private String firstName;
    private String lastName;
}

//the mutable API defines a mapping process by multiple getter-setter steps
Mapper<Person, PersonDTO> mapper = Datus.forTypes(Person.class, PersonDTO.class)
    .mutable(PersonDTO::new)
    .from(Person::getFirstName).into(PersonDTO.setFirstName)
    .from(Person::getLastName)
        .given(Objects::nonNull, ln -> ln.toUpperCase()).orElse("fallback")
        .into(PersonDTO::setLastName)
    .from(/*...*/).into(/*...*/)
    .build();
```

and immutable types:

```java
class Person {
    //getters + constructor omitted for brevity
    private final String firstName;
    private final String lastName;
   
}

class PersonDTO {
    //getters omitted for brevity
    private final String firstName;
    private final String lastName;
    
    public PersonDTO(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

//define a building process for each constructor parameter, step by step
//the immutable API defines constructor parameters in their declaration order
Mapper<Person, PersonDTO> mapper = Datus.forTypes(Person.class, PersonDTO.class)
    .immutable(PersonDTO::new)
    .from(Person::getFirstName).to(ConstructorParameter::bind)
    .from(Person::getLastName)
        .given(Objects::nonNull, ln -> ln.toUpperCase()).orElse("fallback")
        .to(ConstructorParameter::bind)
    .build();
```

Easy to integrate with Spring etc. - read the [full usage guide](https://github.com/roookeee/datus/blob/master/USAGE.md) in less than 20 minutes.
Read/Write data from/to SQLITE using Python Pandas
Tags: pandas, python
Published: 2019-05-27 20:41:56

#PUSH EXCEL FILE TO SQLITE FILE
```
import pandas as pd
import sqlite3

EXCEL_FILE_NAME = 'source.xlsx'
DB_NAME = 'stage.db'

df= pd.read_excel(open(EXCEL_FILE_NAME , 'rb'),skiprows=3,index=False)

conn = sqlite3.connect(DB_NAME)
df.to_sql('source', conn)

```
#READ FROM SQLITE
```
import pandas as pd
import sqlite3

DB_NAME = 'stage.db'

conn = sqlite3.connect(DB_NAME)
sql_string = 'select * from source_tbl where id>10'
df = pd.read_sql(sql_string, conn)
print(df)
Save Your eyes! How to Install Flux on Ubuntu
Tags: ubuntu, flux, health
Published: 2019-05-27 20:27:03

---
title: Save Your eyes! How to Install Flux on Ubuntu
published: true
description: Staring at your screen for hours on end? Do your eyes a favor - get Flux.
tags: ubuntu, flux, health
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5yza7e92pyunlraz7mip.jpg
---

[Originally Posted on my Blog](https://blog.benjaminspak.com/how-to-flux-on-ubuntu-installation-and-automated-run-time-cjvvy5aw2004we4s1duyehdtn)

---

Trust me, you want [Flux](https://justgetflux.com/). Your eyes & sleep quality will thank you.

If you need to manually start the applet just type 'fluxgui' in terminal.

Resource: [Flux Repo](https://github.com/xflux-gui/fluxgui)

```
sudo add-apt-repository ppa:nathan-renniewaldock/flux
sudo apt-get update
sudo apt-get install fluxgui
```

Resource: [Create a Cron Task in Ubuntu ](https://www.liquidweb.com/kb/create-a-cron-task-in-ubuntu-16-04/)

Check if cron is installed:

```
dpkg -l cron
```

Install cron (if needed)

```
sudo apt-get install cron
```

Verify cron is running.

```
systemctl status cron
```

Create a new cron job.

```
crontab -e
```

Select your terminal editor of choice.

Resource: [Crontab Generator](https://crontab-generator.org/)

Use the Crontab Generator to select when you want fluxgui to run. 
FYI: 'Command To Execute' field on Crontab Generator is 'fluxgui'

Verify cron job was created.

```
crontab -l
```
If you need to manually start the applet just type 'fluxgui' in terminal.

Winning! You're good to go.