teleren/devto huggingface dataset:
Dark Mode and webapps
Tags: discuss, darkmode, a11y, webpapp
Published: 2019-03-11 11:29:15

---
title: Dark Mode and webapps
published: true
description: Is a "dark mode" better for the eyes? How does it work in relation to Accessibility ?
tags: discuss, darkmode, a11y, webpapp 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6uwrqyk4ng8ijtn07xzf.png
---

We are seeing more and more products that offer a "dark mode" feature that turns look of your webpapp `Dark` and text `light`

The question i am wondering is that, Does it work better than normal color contrast ? 


### I see lot of people saying that it's better for the eyes. is it ? is there any scientific study behind this ?


As a developer how do you approach this ? I mean, What things you consider before making this feature available to make sure that it works well with other elements of your app ? (i.e. In a app where users can customize apps entire theme or portion of it. like, dev.to's profile theme)


As form the  Accessibility point of view, how does it affect end users perception of an app, specially for visually impaired users for whom this can be instantly uncomfortable and hard to read.
Breathly – open-source breathing training app built with React-Native
Tags: showdev, githunt, reactnative, typescript
Published: 2019-03-11 10:04:34

---
title: Breathly – open-source breathing training app built with React-Native
published: true
description: 
tags: #showdev #githunt #reactnative #typescript
---

I just published **Breathly**: an open source breathing training app built with React-Native.   

{% github https://github.com/mmazzarolo/breathly-app %}

Any kind of discussion or feedback is warmly welcome!
Error | The filesystem is already 78642683 (4k) blocks long.  Nothing to do!
Tags: ebs, devops
Published: 2019-03-11 09:32:53

---
title: Error | The filesystem is already 78642683 (4k) blocks long.  Nothing to do!

published: true

description: If you are trying to increase the EBS volume size after the modification was completed on Aws console then you need to run this command sudo resize2fs /dev/xvda1 to resize the increased volume. But unfortunately, this command will through an error I solved it by running one more command find the solution below.

tags: #ebs,#aws,#devops


---
Error | The filesystem is already 78642683 (4k) blocks long.  Nothing to do!

If you are getting this error while running resize2fs command in linux for ext4 volume, run growpart command and then run resize2fs command as shown below:


sudo growpart /dev/xvda 1
sudo resize2fs /dev/xvda1
My React components repository
Tags: react, javascript, components
Published: 2019-03-11 09:00:44

---
title: My React components repository
published: true
description: A Github repository in which I'll be uploading some of the React components I use the most.
tags: react, javascript, components
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fcnmt0yn7k0nombc8tf5.jpg
---
Hey there, I just uploaded a Github repository in which I'll be uploading some of the React components I use the most. Most of them are made by me, others from Internet code but with own modifications.

> [Go to the repo!](https://github.com/GuimG/my-react-components)

# The components

Here you have a complete list of all the components. As I upload new components I will update the list.


* [Navbar](https://github.com/GuimG/my-react-components/tree/master/app/components/Navbar): Sticky navbar that hides when scrolling down.

* [Loading Indicator](https://github.com/GuimG/my-react-components/tree/master/app/components/LoadingIndicator): Loading indicator with only CSS.
![Loading Indicator GIF](https://raw.githubusercontent.com/GuimG/my-react-components/master/images/loadingIndicator.gif)

* [Flipping Cards](https://github.com/GuimG/my-react-components/tree/master/app/components/FlippingCards): Cards that flip when click.
![Flipping Cards GIF](https://raw.githubusercontent.com/GuimG/my-react-components/master/images/flippingCards.gif)

# Usage

You can browse this repo online or download it and run it to see a live demo of all of the components. There's a server with one root route which contains all components. Follow these steps:

1. Clone the repo by typing: `git clone https://github.com/GuimG/my-react-components.git`.
2. Go into the folder in your terminal and run the app by typing: `npm run start`.
3. Go to your browser and search for: `http://localhost:3000`.

Now you can see all of the components in your browser. There's a title on each one (except for the navbar which is fixed in all the page). If you like some specific component search it in the `components` folder by its title.

# Last words

Hope this helps you. If you want any component in specific and it's not here, leave a comment and I'll try to do it ASAP.
windows shortcut to expand file name in explorer
Tags: windows, shortcuts, shortcut
Published: 2019-03-11 07:28:05

---
title: windows shortcut to expand file name in explorer
published: true
description: to see full file name in file explorer using windows shortcut
tags: windows, shortcuts, shortcut
---

![Before Image](https://thepracticaldev.s3.amazonaws.com/i/plz30yb6so60vrsxkj1a.png)

Press Ctrl and + button (on the right numberpad) to expand the file name.

![After image](https://thepracticaldev.s3.amazonaws.com/i/pomp8k978hh3fus6uor3.png)
Microsoft Deserves A 👍 For Open Sourcing It's Calculator on Github
Tags: opensource, discuss
Published: 2019-03-11 07:20:58

---
title: Microsoft Deserves A 👍 For Open Sourcing It's Calculator on Github
published: true
description: finally a peek under the hood
tags: opensource, discuss
cover_image: https://images.unsplash.com/photo-1530133532239-eda6f53fcf0f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80
---

Finally get a peek under the hood [here](https://github.com/Microsoft/calculator).

It was a nice move, the PRs and issues are awesome 👍 check it out.

How can we benefit from it?
10 Must-Attend Upcoming DevOps Conferences
Tags: devops, conferences2019, softwaredevelopment
Published: 2019-03-11 07:04:38

---
title: 10 Must-Attend Upcoming DevOps Conferences
published: true
description: DevOps conferences to attend in 2019
tags: devops, conferences 2019, software development 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g2wqub6r3wb4vpoykj6o.png
---

Ten must attend upcoming DevOps conferences/events in 2019. 
YES, Bookmark this post.


1. SwampUP 2019 - http://bit.ly/swampupjfrog

2. DevOps Talks 2019 - https://lnkd.in/eT_gu9A

3. QCon New York 2019 - http://bit.ly/qcon2019

4. Agile + DevOps west - https://lnkd.in/e8fNG9i

5. Agile India 2019 - https://lnkd.in/e4WtmFi

6. JAX DevOps - http://bit.ly/jexdevops

7. Continuous life cycle 2019 - http://bit.ly/clclondon

8. KubeCon + CloudNativeCon - https://lnkd.in/e6Efgft

9. DevSecOps Days 2019 - https://lnkd.in/e5BNam6

10. Machine Learning for DevOps - http://bit.ly/mlfordevops

Share this post with your friends and colleagues who can attend any of these events. When you get to hear from the experts, it is all worth it.
Hating jQuery will not make you cool
Tags: jquery, javascript
Published: 2019-03-11 05:41:41

---
title: Hating jQuery will not make you cool
published: true
description: Hating jQuery will not make you cool
tags: jQuery, JavaScript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aq47jff5ojcgx81x6jr6.jpg
---

Hating jQuery will not make you cool; However, adoring it will also not make you cool.


But In 2019 adoring jQuery will make you dumb.

## So,

Leave the jQuery as it is and continue your life without it.
Opinion on Modernizing Legacy Frontend Applications
Tags: frontend, react, angular, discuss
Published: 2019-03-11 05:34:32

---
title: Opinion on Modernizing Legacy Frontend Applications
published: true
description: 
tags: frontend,react,angular,discuss
---

How often have you needed to modernize a legacy frontend application and re-build them using a more modern technology/framework like React/Angular etc.? 

At my current job, I have to migrate a JQuery dashboard to React. I was wondering what other people's experience has been in this regard.

* What was the most painful part of migrating an existing app to React/Angular?

* What were some of the pitfalls that I should look out for?

* If you had to do it again, what would you do differently?
Nevertheless, Allison Walker Coded
Tags: wecoded
Published: 2019-03-11 02:51:06

---
title: Nevertheless, Allison Walker Coded 
published: true
tags: shecoded
---

## I started/continued to code in 2019 because I'm still trying to master JavaScript. 

## I deserve credit for trying to learn R; not quitting an online program when it got very, very hard (although I kind of did for a while).

## I hope to see my school/work/developer/tech community focus on who people are as people.
Create Deploy Pipeline for AWS Elastic Beanstalk App
Tags: aws
Published: 2019-03-11 04:46:17

---
title: Create Deploy Pipeline for AWS Elastic Beanstalk App
published: true
tags: aws
canonical_url: https://medium.com/@yasunoritanaka/create-deploy-pipeline-for-aws-elastic-beanstalk-app-ad032d48bf99
---

[AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/) app can deploy simply by using [CodePipeline](https://aws.amazon.com/codepipeline/).

Below is a pipeline I created on CodePipeline for deploying apps to Elastic Beanstalk, S3, and Cloud. I just introduce CodePipeline this time.

![](https://cdn-images-1.medium.com/max/1024/1*XGOXegu6fhUPvD6dDZ8WPw.png)<figcaption>A deploy pipeline</figcaption>

This project’s directory structure is like this:

```
my-api
  + .elasticbeanstalk
  | + config.yaml
  + application.py
  + requirements.txt
```

application.py and requrements.txt are simple [Flask](http://flask.pocoo.org/) app. You can also read [a Flask tutorial](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create-deploy-python-flask.html).

Before creating the deploy pipeline, you need to create your pipeline and Beanstalk app. Please refer to [a creating pipeline tutorial](https://docs.aws.amazon.com/codepipeline/latest/userguide/tutorials-simple-s3.html#s3-create-pipeline) and [Beanstalk tutorial](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/GettingStarted.html).

After you create a pipeline and minimal Beanstalk app, you need to set up a source where you get your code from. Below is the example using GitHub:

![](https://cdn-images-1.medium.com/max/1024/1*x7IhG1Lv4iQdc062ATBkdQ.png)<figcaption>Source configuration for getting a source from GitHub master branch</figcaption>

Next, you need to add a build step to do unit testing or build your app into binary code or archive. And also I specify Output artifacts as “api-artifact”. This is an archived file built in this step to use after steps. In this pipeline, a next deploy step will use this file. Below is my setting:

![](https://cdn-images-1.medium.com/max/1024/1*hBUqHQksEjIF6zGMXO8sKg.png)<figcaption>Build configuration for unit testing</figcaption>

You need to create buildspec.yaml to run the build step on CodeBuild.

{% gist https://gist.github.com/yanak/1152fe3b2b6b024a8bbb72e01075c73c %}

The app is written with Python and include unit tests in a build step, and so add python -m unittest discover -s my-api under the build . A deploy step uses app artifact in the my-api directory, and so you need to base-directory: my-api to create an artifact under the my-api directory.

Next, since we want to deploy the app to Elastic Beanstalk. Below is a deploy step configuration:

![](https://cdn-images-1.medium.com/max/1024/1*R-bKRnry6YeqZZ3VgrpQVw.png)<figcaption>Deploy configuration for deploying new code to Elastic Beanstalk</figcaption>

So you add a configuration file for Elastic Beans like below:

{% gist https://gist.github.com/yanak/0492bfe1b38d16d898544705656d5cd5 %}

Then you just push your code to GitHub’s master branch, CodePipeline automatically builds it and deploy to Beanstalk.
Peacock v1 Released
Tags: vscode, webdev, javascript, fun
Published: 2019-03-11 00:47:01

---
title: Peacock v1 Released
published: true
description: Visually identify different VS Code instances with colors that you select
tags: vscode, webdev, javascript, fun
cover_image: https://thepracticaldev.s3.amazonaws.com/i/coa26j3s758fwxqxknwv.png
---

Have you ever found yourself switching between multiple instances of VS Code, while trying to find which one you were looking for? I often have multiple instances open for coding, writing (like this article), and pretty much everything I do with text. Being able to quickly identify each instance is super helpful.

I used to switch the colors of a few key aspects of VS Code manually so I could differentiate them. I was using this technique at conferences where I presented and found it helpful for the audience so they could identify my code too. I finally decided to automate this. That's where [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=devto-blog-jopapa) came from.

{% youtube 0ZXjGBxK_es %}

> One of the key aspects I wanted before releasing v1 was to have a lot of unit tests in place, and to have it hooked into CI. I decided to use [Azure DevOps](https://azure.microsoft.com/en-us/services/devops/?wt.mc_id=devto-blog-jopapa) with their YAML option. I am pretty happy with how it turned out. One cool aspect is I am running the tests under Windows, Linux, and macOS for both Node 8 an 10. I'll write more about how this works on Azure DevOps in future posts.

## v1 has arrived!

I just released [Peacock v1.1.0](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=devto-blog-jopapa) over the weekend!

Since I released and announced the preview of Peacock, a lot of folks seemed to like it and several contributed to the extension in OSS.

## What Can it Do?

Great question! You can check out the full [documentation here](https://github.com/johnpapa/vscode-peacock/blob/master/README.md). But here is a quick glimpse of the main features.

- Change the color of titlebar, statusbar, and/or activitybar
  - Enter your own color (hex, rgb, hsl, etc)
  - be surprised with a random color
  - Choose the primary color for angular, vue, or react
  - Choose a user-defined color from your Favorites
- Save a color in your Favorites
- Adjust the coloring of affected elements by making them slightly darker or lighter to provide a subtle visual contrast between them


You choose which elements should be colored be checking them in your user settings.

![settings](https://thepracticaldev.s3.amazonaws.com/i/8mktbarrrkgtos12fibg.jpg)

## Get Peacock

If you have Peacock and want the update to v1.1.0, VS Code will prompt you soon.

If you are interested in trying out Peacock, you can [find it here in the marketplace](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=devto-blog-jopapa).

## Contribute

Contribute to GitHub repository [here](https://github.com/johnpapa/vscode-peacock?wt.mc_id=devto-blog-jopapa)


Thanks!
How to Use JWT with OAuth
Tags: jwt, oauth, jsonwebtoken
Published: 2020-09-21 07:18:40

---
title: How to Use JWT with OAuth
published: true
date: 2019-03-11 00:00:00 UTC
tags: JWT,OAuth,JSONWebToken
canonical_url: https://www.loginradius.com/engineering/blog/using-jwt-with-oauth2-when-and-why/
---

Learn how to use JWT with OAuth and when & why

   
[Read On](https://www.loginradius.com/engineering/blog/using-jwt-with-oauth2-when-and-why/)
Writing CSS in a Gatsby Project
Tags: gatsby, react, css, sass
Published: 2019-03-11 15:25:22

---
title: Writing CSS in a Gatsby Project
description: In this video, we explore traditional approaches to writing CSS, like inline styles, vanilla CSS, Sass, and PostCSS, and walk through how each one works in a Gatsby project.
canonical_url: https://michaeluloth.com/gatsby-writing-css/
tags: gatsby, react, css, sass
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0r72d143poeiioiukmcg.png
series: Up & Running with Gatsby
published: true
---

This is the seventh video in our [beginner series](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) exploring GatsbyJS and how to use it to easily build performant apps and websites.

In this video, we explore traditional approaches to writing CSS, like inline styles, vanilla CSS, Sass, and PostCSS, and walk through how each one works in a Gatsby project.

Check out the video below or [view the entire playlist](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) on YouTube. 

Enjoy! 🎉📺

{% youtube hAzt8BIwXiE %}
How do you version your software?
Tags: discuss
Published: 2019-03-10 23:23:38

---
title: How do you version your software?
published: true
tags: discuss
---

If you (or the company you work for) maintain a version of the software you release, what kind of versioning policy do you follow?

I would say the most common policy is [semver](https://semver.org/).

If you follow semver, are you strict about it? Do you ever release breaking changes as a "minor" release?

If you don't follow semver, what do you follow and why?
Lambda School’s New Acceptee!
Tags: wecoded, coding, webdev, womenwhocode
Published: 2019-03-10 23:16:24

---
title: Lambda School’s New Acceptee!
published: true
description: 
tags: #shecoded #coding #webdevelopment #womenwhocode 

---

Very excited to announce that I was accepted into Lambda School’s Full Stack Web Development Course. Beyond a dream to be accepted into a top-tier computer science academy. 

I chose the start date of July 8th and I’m very excited about this new journey. Almost a year ago I thought I would be returning to grad school and in someway it kinda is but better.

For anyone who is in Lambda or is an alumni, please, feel free to follow and send encouraging words.
Creating images with Ruby + HTML/CSS API
Tags: ruby, rails, showdev, api
Published: 2019-03-10 21:17:01

---
title: Creating images with Ruby + HTML/CSS API
published: true
description: Guide to generating images from Ruby. Just like Product Hunt and Medium.
tags: ruby, rails, showdev, api
---

Ever wonder how trendy websites like [Product Hunt](https://producthunt.com) or [Medium](https://medium.com) generate those fancy Twitter screenshots?

{% twitter 1104239882879156224 %}

Wonder no more!

Essentially, they render the HTML/CSS in a headless Chrome instance and take a screenshot. Sound complicated? Yes, it is. Especially "at scale."

Good thing there are API's for this.

I will show you how to do this with an API I built specifically for this purpose: [HTML/CSS to Image API](https://htmlcsstoimage.com).

```ruby
require "httparty"


auth = { username: 'user_id', password: 'api_key' }

html = "<div class=\"box\"><h3>Hello, world 😍</h3></div>"

css = ".box {
  border: 4px solid #8FB3E7;
  padding: 20px;
  color: white;
  font-size: 100px;
  width: 800px;
  height: 400px;
  font-family: 'Roboto';
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}"

image = HTTParty.post("https://hcti.io/v1/image",
                      body: { html: html, css: css },
                      basic_auth: auth)

# { url: https://hcti.io/v1/image/bfae7d68-86cc-4934-83ac-af3ba75a0d34 }

```

![Hello, world.](https://hcti.io/v1/image/bfae7d68-86cc-4934-83ac-af3ba75a0d34)

Done. We have an image ✨.

## Rails + Caching
If you're creating these from Rails and already use memcached, here's a nice trick for ensuring you only create them once.

```ruby
cache_key = "image/#{html}/#{css}"

image = Rails.cache.fetch(cache_key) do
  HTTParty.post("https://hcti.io/v1/image",
                      body: { html: html, css: css },
                      basic_auth: auth)
end
```

We use the html/css to generate the cache key. Don't worry about it being too long. Rails/Dalli automatically hashes the key for you, guaranteeing it will be unique and the correct length.

This way, if you send the exact same payload again, Rails will pull the URL from cache rather than regenerating it.

## Another Rails tip
If you're generating these for all of your content, it may be temping to stick the API call into an `after_create`. I advise against that. It's always best to keep I/O to an absolute minimum when "in request". Even though the request may only take 30ms, that can add up if the endpoint is already doing a lot.

The solution, is using a background job.

So instead of making the call directly in an `after_create`. You can instead enqueue the background job using `after_create`. Then the image will be generated in the background. Keeping your Rails response times super quick.

## Build something cool?
If you build something cool this, let me know so I can [tweet it!](https://twitter.com/mscccc)!
C++ Community Challenge
Tags: cpp, beginners, challenge, codecademy
Published: 2019-03-10 20:51:50

---
title: C++ Community Challenge
published: true
description: Build a fun project with other C++ learners and win prizes! (March 2019)
tags: #cpp #beginners #challenge #codecademy
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ea3j0cdqg6i19zo1ax03.png
---

Hello dev.to, my name is Sonny and I am a Curriculum Developer at Codecademy. We recently proposed, designed, and built our [Learn C++](https://www.codecademy.com/learn/learn-c-plus-plus) course that launched in December. Over the last three months, [184,038](https://thepracticaldev.s3.amazonaws.com/i/yic3n8iuwhftrq6jqz0n.png) learners have started the course and it is currently our 5th most popular course on the site. 😱

So to celebrate, my teammate Mariel and I launched a beginner-friendly [C++ Community Challenge](https://www.codecademy.com/articles/c-plus-plus-community-challenge-free) to our Pro learners that will last to the end of the month. We want to give back to the community and also hope to inspire more collaboration & teamwork for the learners. And there are prizes: Codecademy hoodies and Arduino Unos!

### How to Enter: ###

1. Find a code buddy in our Lifelong Learner Slack. 👯
2. Decide on and build a project together. 🌱
3. Submit a link to your GitHub repository by March 31. Voilà! 🙌

![High Five](https://thepracticaldev.s3.amazonaws.com/i/ifbxcof0g1qng5inkf83.gif)

### Challenge Rules: ###

The prize deadline for submission is **Sunday, March 31, 2019 11:59PM EST**. Your project can be whatever your team decides. It will be judged based on:

- Use of [vectors](https://www.codecademy.com/learn/learn-c-plus-plus/modules/learn-cpp-vectors) and [functions](https://www.codecademy.com/learn/learn-c-plus-plus/modules/learn-cpp-functions) in your code.
- Collaboration (coding is more fun when you work together).
- Originality and readability of your code (make it your own and use style conventions and comments to keep things legible).

Winners will be announced the first week of April.
Full Angular 9|8|7 Reactive Forms Validation Tutorial
Tags: angular987, angular, reactiveformsvalidation
Published: 2020-01-30 12:17:56

---
title: Full Angular 9|8|7 Reactive Forms Validation Tutorial
published: true
tags: Angular 9|8|7, Angular, Reactive Forms Validation
canonical_url: https://www.positronx.io/angular-7-reactive-forms-validation-tutorial/
---

The post [Full Angular 7 Reactive Forms Validation Tutorial](https://www.positronx.io/angular-7-reactive-forms-validation-tutorial/) appeared first on [positronX.io](https://www.positronx.io).

![Angular 7 Reactive Forms](https://www.positronx.io/wp-content/uploads/2019/03/angular-reactive-forms-2030-01.jpg)

In this tutorial, I am going to create an advance form using **Angular 7 Reactive Form** with ReactiveFormsModule API from scratch. I will go through the common concepts of Angular 7 Reactive Forms like **FormGroup, FormControl, FormBuilder** , and **FormaArray** to manage user’s input data.


[Click here to read more](https://www.positronx.io/angular-7-reactive-forms-validation-tutorial/)