teleren/devto huggingface dataset:
Design graphs for color vision deficiencies and everybody reaps the rewards
Tags: a11y, inclusion, ux
Published: 2021-02-24 00:58:00

One of our energy coaches (Pam) shared some customer feedback about a significant share of our customers who have difficulty interpreting data visualizations because of color vision deficiency, a condition which [affects 1 in 12 men (8%)](https://www.colourblindawareness.org/colour-blindness/). When Pam was instructing her class to observe the “red line” on a graph, a participant raised their hand and said “it’s all the same to me”, and when Pam asked the group who else has trouble distinguishing colors, more members of the class spoke up.

The most common form of color vision deficiency is Deuteranomaly, which makes greens appear more weak. Below is an example of how one of our graphs would appear to someone with this condition:
![Graph with Green-Weak Colorblindness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fryl89etaziri33y1c2o.png)

In order to distinguish the multiple data series, one must compare the color of the line, and of the tooltip text, to the legend below, and by that infer which data series they are looking at, a task that requires more effort and difficulty even if you do not have any color vision deficiencies, but merely are looking at a small screen, or a dimly lit screen, or with vision. impairment more generally. 

This is why it is important to communicate information in multiple ways in addition to colors, such as using icons and text. When this feedback came in, we happened to be in the middle of designing some new graphs. With color vision deficiencies top-of-mind, we made the following interventions:
1. Use a high-visibility color palette, and choose colors that avoid the hazardous red-green distinction. Our data visualization library offers one of these out of the box.
2. Vary scatter series by not only color, but shape as well
3. Include the color, shape and series name text in all tooltips

![Graph Design with Adaptations for Color vision deficiencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w82ga4whalt4ojqm1z13.png)

This is an insight that isn’t limited to software per se - it is also something you can keep in mind if you are responsible for preparing reports that use data visualizations to share with others. You can even run your graph through [this color vision deficiency simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/) to see your report through others’ eyes.

Like with most accessibility work, designing for people living with disabilities often benefits a much broader group of people. It's just simply more mental effort to interpret information through an implicit color code - we have to keep the code in our memory as we evaluate new information. The more you explicitly spell out key information, the easier it will be for people affected by color vision deficiencies, and everybody else, to comprehend your data presentations.
The simplest CSS toggle in 3 steps.
Tags: css
Published: 2021-02-24 00:41:13


Here I will show a simple way to make a **toggle** using only  HTML5 and CSS3 files. It's beginner friendly, so there are a bunch of explanations. Chances are if you just see the code snippets you will understand. Let's go...

# 1. Add the HTML 

```html
<div class="toggle">
   <div class="toggle__cell"></div>
</div> 
```


# 2. Add the toggle event
   
   To do so we are using an inline script right away in the *toggle__cell* element. 




```html
<div class="toggle">
   <div class="toggle__cell" onclick='this.classList.toggle("toggle--active")'></div>
</div> 
```
 
The *this* refers to the *toggle__cell* and whenever occur a click on it, a specific class to differ the non-toggled and toggled is added. Now let's jump into the CSS.


# 3. Windup with the CSS
   
   Actually it is already working, the element now 'know' when it's toggled. Though, there's no visual signal for it, and with CSS we are making it done.

First, the style of toggle is the following

```css
 .toggle {
            width: 50px;
            height: 23px;
            display: flex;
            align-items: center;
            background: #ffffff;
            box-shadow: inset 0 0 10px #e4e4e4;
            border-radius: 20px;
         }
```

We are putting the *toggle__cell* in the center using flex-box and adding a slight effect of shadow.

```css
.toggle__cell {
            width: 15px;
            height: 15px;
            cursor: pointer;
            background: radial-gradient(#2d8ef5 30%, #a889fff1);
            border-radius: 50%;
            transition: transform ease-in-out 0.4s;
            transform: translateX(5px);
         }
```

Here we just make the cell combine with its father, a slight gradient, circle form and an initial placement with translateX to not touch the border-left of the father, but it could be made by tons of others approaches, such as padding or left positioning. Moreover there's the transition to turn the toggle sorta "pleasant", as well as adding the mouse cursor as it was a button.

Finally we make the visual difference between non-toggled and toggled:


```css
.toggle--active {
            transform: translateX(30px);
         }
```
CSS Peasant
Tags: codepen, css, html, showdev
Published: 2021-02-24 00:00:29

---
title: CSS Peasant
description: A drawing of a peasant using HTML and CSS.
published: true
tags: codepen,css,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxzbu6n1yp7ut4y4hjdb.png
---

Today I coded a drawing of a peasant using HTML and CSS. You can [find the code on CodePen](https://codepen.io/alvaromontoro/full/vYyWWbb):

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

The style is inspired by the amazing characters of "[At the Wall](https://codepen.io/scriptex/pen/eLWdKN)" by Atanas Atanasov... although it's not even close (really, that drawing is A-MA-ZING!)

I tried to add a small animation too: the blinking and something that may slightly resemble the chest moving up and down breathing, but nothing fancy.

Here's a video of how it was done:

{% youtube ixB0enLkcuM %}
Complete code coverage
Tags: testing
Published: 2021-02-26 11:26:14

---
title: Complete code coverage
published: true
date: 2021-02-24 00:00:00 UTC
tags: testing
canonical_url: https://jhall.io/archive/2021/02/24/complete-code-coverage/
---

Yesterday I said that code coverage percentages are overrated. But there’s something in the concept of “code coverage” that gets at something valuable.

Often when asked what percentage of code coverage I aim for, I respond with “Complete code coverage.” Which is not the same as 100%. If I were forced to define my concept of complete code coverage, it would probably go something like this:

> Every meaningful input condition is tested, under every meaningful state.

This is a bit of a weasly definition, though, because it uses the term “meaningful” (twice, no less!), which is subjective. But I guess that’s the point.

What might be more illustrative is the process by which I write my tests, which I consider to provide “complete coverage.”

In a word, I do [TDD](https://en.wikipedia.org/wiki/Test-driven_development). That is, I write my tests as I’m writing my code. And I reason about my code as I go along. I also usually write my failure tests before my “happy path” tests, which really helps to ensure that every meaningful input are tested, under every meaningful state.

When I discover a new bug in existing software, I add a new (failing) test, then I fix the bug. Then I spend some more time reasoning about the code. If this failure case got through the existing test scenarios, there’s likely some other meaningful input, or meaningful state, that wasn’t considered. I spend some time reasoning about it. But I don’t go crazy. And I don’t trust some automatic tool to tell me if my tests are meaningful.
How to create environment variables only to be used in the production version of Nextjs?
Tags: nextjs
Published: 2021-02-24 00:00:00

---
  title: How to create environment variables only to be used in the production version of Nextjs?
  published: true
  tags: Nextjs
  date: Wed Feb 24 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-environment-variables-only-for-production-nextjs
  cover_image: https://melvingeorge.me/_next/static/images/main-0320573c4673b6bd4b5359f127d30e1c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-environment-variables-only-for-production-nextjs)
  
To create environment variables that should be used only in the production version or build of your Nextjs project, you can make a file called `.env.production` at the root of the Nextjs project folder.

This file will be used (along with the `.env` if you have it defined) to take environment variables in the production build or when using the `next start` command in the terminal.

For example, let's say you have an environment variable called `SERVER_ID=12345` which you need to use only in the production build of your Next.js project, so we can define this environment variable in the `.env.production` file like this,

**.env.production file**

```js
SERVER_ID = 12345;
```

- Useful in decoupling information from `production` and `development` versions
- Check out [How to create and use environment variables in Nextjs?
  ](https://melvingeorge.me/blog/create-and-use-environment-variables-in-nextjs) to get a detailed explanation on creating and using environment variables in general in Nextjs.

### Feel free to share if you found this useful 😃.

---
Tagged Templates
Tags: litelements, javascript, templateliterals, taggedtemplates
Published: 2021-02-23 23:43:38

Back in the day, Everyone one of us was familiar with long string concatenations. With ES6, We got Template literals, which saved us a lot of time. 

```js
let currentTime = new Date().getHours();
let var1 = `I am template literal`;
let var2 = `I am multi template literal with the embedded expression: 
${currentTime >23 || currentTime >5 ? 'I am night owl':'I am early bird'} `
```
A nice and elegant solution to our problems.

But wait, it is not the end of the story, there is one other cool feature, which is been used by many libraries like lit-elements, re-template-tag, graphql-tag

##Tagged Templates##

> Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.

```js
let you = 'Tony';
 
function html(strings,...values){
  console.log(strings); // ['hi ',' have a great day.']
  console.log(values); // ['Tony']
}

html`hi ${you}, have a great day.`
```

You can see it is a normal function but invoked in a different way.

You might also think that can be written in normal function, but imagine passing string and expressions as args and processing it for your requirements.

```js
function html(concatenatedString, ...values){
  // replace # with values sequentially
  // do other stuff
  // return result
}

html(`hi #, have a great day`,'Tony') // # acts as seperator

```

> _I don't see a need to write something like this when we have a better approach provided out of the box._



## Where can I use it?

#### You can use Tagged templates in many scenarios

1. _Format a template literal into HTML elements_
2. _Reusable templates_
3. _Process paths and in localization_
4. _Decorate the text with some default data._

#Further Reading#

1. [Google docs](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)
2. [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
hapi, Vision, and … who am I?
Tags: hapi, web, programming
Published: 2021-02-23 23:35:18

---
title: hapi, Vision, and … who am I?
published: true
date: 2021-02-23 23:23:12 UTC
tags: hapi,web,programming
canonical_url: https://www.solarwinter.net/hapi-vision-and-who-am-i/
---

 ![hapi, Vision, and … who am I?](https://www.solarwinter.net/content/images/2021/02/markus-spiske-p-l8OjDH9eE-unsplash.jpg)

I seem to be on a [hapi](https://hapi.dev/) theme right now. It’s new to me and seems a bit less well covered than Express in Google results, so I figure I might as well write stuff down and hope it helps someone else.

## The problem

I was trying to do the usual thing for the navbar, only showing the register/login/register buttons when it makes sense. But how to know which to display? I don’t want to add `loggedIn` to the context for every `h.view()` call, that’s just ugly.

## The solution I found

When setting up the server views, [you can supply a context to Vision](https://hapi.dev/module/vision/api/?v=6.0.1#options):

> The global context option can be either an object or a function that takes the request … The contents of the context will be merged with anything else you supply to a page being rendered.

So - building on that:

```typescript
function buildVisionContext(request) {
  return {
    loggedIn: request.auth.isAuthenticated
  };
}

async function registerVision(server) {
  let cached;

  if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
    cached = false;
  } else {
    cached = true;
  }
  server.log(["debug"], `Caching templates: ${cached}`);
  server.views({
    engines: { ejs: require("ejs")},
    relativeTo: __dirname + "/../",
    path: 'templates',
    isCached: cached,
    context: buildVisionContext
  });
}

```

And now, every page rendered with `h.view()` will automatically have that variable available to it.

* * *

Photo by [Markus Spiske](https://unsplash.com/@markusspiske) on [Unsplash](https://unsplash.com/)
Day 315 : In My Head
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-23 23:14:36

_liner notes_:
- Professional : Today, I didn't have any meetings so I got to finish up a demo application. Ran into an issue with the setup script, but I thought about it and found out a workaround. Played with it a few times and it seems to work. Nice.

- Personal : Last night, I went through tracks for this week's radio show and worked on the admin section of my side project. Had to refactor some stuff because it wasn't coming out the way I had it in my head. Next thing I think is actually saving data to the database and pulling it. Also, I sat in on the online meetup for Orlando Devs.

![Beach in Ta‘ū, American Samoa with forest on the left, the ocean on the right and green mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2iim7ty971h9lrwcckw.jpg)

Got the Orlando PHP online meeting tonight. After that, I'm going to work on my side project some more and see if I can save some data to the database and see how I want that to look so I can display it later. Maybe I'll write it out first. We'll see. Also want to go through some tracks and maybe watch some anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube u688ebM3Hew %}
Art and Logic with JavaScript codes
Tags: 100daysofcode, javascript, codenewbie, webdev
Published: 2021-02-23 22:55:35


Whenever you hear JavaScript, what comes to your mind? Uncaught syntax? Hahaha. How about when you think about flying robots, mobile applications, smartwatch applications, games, web servers, server applications, web applications, web development and many others that could be discovered in future.

Does that sound exciting? These things that sparked up in your imaginations can be developed with the magic of JavaScript.

Could it make sense to say JavaScript is an art? Because an art is the expression or application of human creative skill and imagination. An art is something that expresses an idea, an emotion, or a world view.

You possibly could have asked, how does JavaScript correlate to being an art? Now i want to bring you into another picture. Let's make an imagination of paintings or sculptures or any occupation of art you could imagine. They start with nothing or no idea of what they want to do and deliver extraordinary things using their skills and creativity. Just like art, JavaScript can be learnt or written in many diverse ways.

Have you visited websites that have some amazing functionality and got you wowed. JavaScript can be used to create art with codes.

"You might not think that programmers are artists, but programming is an extremely creative profession. It's logic-based creativity" - John Romero.

Now, let's us look at the logical aspect of JavaScript. Logic is a proper or reasonable way of thinking about something. The process of learning JavaScript makes you a logical thinker. In the sense of analyzing a situation and coming up with a sensible solution. This is definitely a process. It takes constant practice and determination to become this.

I wonder if anyone thought "how do i eventually become this code artist and logical thinker"? Well, if you did, this is what i have for you:

Think to solve.
Play games.
Code challenges.
Look at other people's code.
Practice. 6.---- 7.----
Keep practicing.
I leave you with this quote " In some ways, programming is like painting. You start with a blank canvas and certain basic raw materials. You use a combination of science, art, and craft to determine what to do with them" - Andrew Hunt.

#100daysofcode
#javascript
#web-development
#codenewbies
Seriously, how do you find out about new technologies?
Tags: discuss, javascript, devops, dotnet
Published: 2021-02-23 22:47:12


I am curious, and yes, I know it is what killed the cat, but...

I want to know the best ways to communicate APIs, new releases, support, enhancements, and bug fixes? Is documentation the right way to go, or do we need more? Do you need a video, a webinar, a meetup, a dev article, medium content, a posting on Reddit, social media? 

When companies have useful information and want to share it, I am not talking about a sales pitch but sharing new insights, tips, and tricks. What should the approach be?
React + Tailwind
Tags: javascript, react, css
Published: 2021-02-23 22:03:23

# Introduction
Tailwind has proven itself to be quite the handy CSS framework. Similar to Bootstrap, except more flexibility and customization. There are other options out there when it comes to choosing a framework in React, but Tailwind just *makes sense* to me. So today I'd like to share a very easy way to get it set up in React!

# Installing Tailwind

### Step 1: Dependency
The first thing you want to do (assuming you have Node.js), is to `npm install tailwindcss`. This will save it as a dependency to your project. 

### Step 2: tailwind.css
Create a `tailwind.css` file under your `src/` file. Next, include these contents inside:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Step 3: Scripts
Next, we need to enable tailwind to compile the CSS together in a new file when our application runs. To do this, we need to run some prebuild scripts. Head into your `package.json` and update the script with this:

```json
"scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

This will ultimately create a new `tailwind.output.css` file when we run our application.

### Step 4: Making it accessible
Now we just need to make `tailwind.output.css` accessible to our entire application. Head over to `index.js` and place this line anywhere at the top of the file:
```react
import './tailwind.output.css';
```

And it's that easy! You're all set to use Tailwind in your React application. Just fire it up with `npm start`!


# Conclusion
As someone who isn't *quite* an expert designer, I find that Tailwind works well even in more advanced applications/libraries. Design is its own beast, and it is easy to get lost in crafting UI alone before getting into the nitty gritty logic of your app. It's better to streamline the design and make it all **work** before making it *pretty*.

I hope you guys enjoyed this quick setup tutorial!
Happy Tuesday! :tada:
Day 24: Shell Sort
Tags: 100daysofcode, php
Published: 2021-02-23 22:29:13


```php
<?php
function shell_sort(&$a) {
    $count = count($a);

    $columns = 1;
    while ($columns < $count) {
        $columns = $columns * 2 + 1;
    }

    $columns = ($columns - 1) / 2;
    while ($columns > 0) {
        for ($c = 0; $c < $columns; $c++) {
            for ($i = $columns; $i < $count; $i += $columns) {
                $value = $a[$i];
                for ($x = $i - $columns;( ($x >= 0) && ($a[$x] > $value) );
                        $x -= $columns) {
                    $a[$x + $columns] = $a[$x];
                }
                $a[$x + $columns] = $value;
            }
        }
        $columns = ($columns - 1) / 2;
    }
}

$values = array(8, 2, 5, 9, 1);

shell_sort($values);

foreach ($values as $v) { echo "{$v} "; }
?>
```
Hasura 2.0 - A Short Story of v1.3.3 to v2.0 Upgrades
Tags: hasura, graphql, database, devops
Published: 2021-02-23 22:16:06

---
title: Hasura 2.0 - A Short Story of v1.3.3 to v2.0 Upgrades
published: true
description: On February 23rd we released Hasura v2.0! This is a pretty major release with a number of new features that will dramatically increase the capabilities for Hasura. For several of my projects I was able to get the upgrade to Hasura v2.0 done in moments!
tags: #hasura #graphql #database #devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8gjquzluytkyx8jtqes.png
---
Today at [Hasura](https://hasura.io) we released [Hasura v2.0](https://hasura.io/blog/announcing-hasura-graphql-engine-2-0/)! This is a pretty major release with a number of new features that will dramatically increase the capabilities for Hasura.

For several of my projects, specifically the infrastructure as code projects *[terrazura](https://adron.github.io/terrazura/)* ([blog entry w/ video time points of build out](https://compositecode.blog/2021/02/19/terrazura-a-build-out-of-an-azure-based-hasura-graphql-api-on-postgres/)) and *[tenancy-bydata](https://github.com/adron/tenancy-bydata)* I was able to get the upgrade to [Hasura v2.0](https://hasura.io/blog/announcing-hasura-graphql-engine-2-0/) done in moments! Since I don't have to pull backups or anything for these projects, it merely involved the following steps.

1. Upgrade the Hasura CLI. This is super easy, just issue the command `hasura update-cli --version v2.0.0-alpha.1`. This command will then download and update the CLI.
2. Next I updated the Terraform file so the container pulls the latest version `image = "hasura/graphql-engine:v2.0.0-alpha.1"`.

Next run an updated `terraform apply` command, which in my case is this command in the case of the *[terrazura](https://adron.github.io/terrazura/)* project for example.

```
terraform init

terraform apply -auto-approve \
  -var 'server=terrazuraserver' \
  -var 'username='$PUSERNAME'' \
  -var 'password='$PPASSWORD'' \
  -var 'database=terrazuradb' \
  -var 'apiport=8080'

cd migrations

hasura migrate apply
```

Boom! Everything is now updated to v2.0 and we're ready for all the upcoming Twitch streams relating back to these particular projects!

For more, be sure to subscribe to the [HasuraHQ Twitch](https://twitch.tv/hasurahq) Channel and my Twitch Channel [Thrashing Code](https://twitch.tv/thrashingcode) as I'll be covering more of the new features in the coming days!