teleren/devto huggingface dataset:
Accessibility Tip: Toggling Focus on or off for Keyboard Accessibility
Tags: a11y, webdev, javascript, frontend
Published: 2020-04-10 18:55:31

Hey folks! I wanted to share a quick tip regarding keyboard control accessibility.

It goes without saying that as web developers, our websites and apps should be accessible to everyone! Sometimes, though, it can be an oversight to remove something like focus outlines that seems unattractive to those of us who don't require it. When I first started out, removing focus outlines on buttons was often the first thing I did. Of course, once I realized they were for keyboard accessibility, I left it on - but I recently found out about a solution that allows us to have our cake and eat it too :)

In your root JS file, add the following lines:

```javascript
// Adds keyboard-accessible class to the <body> of the page in CSS
document.addEventListener('keydown', (e) => {
	if (e.key === 'Tab') {
		document.body.classList.add(styles.keyboardAccessible);
	}
});

// Removes class from body in CSS
document.addEventListener('mousedown', () => {
	document.body.classList.remove(styles.keyboardAccessible);
});
```

For some explanation, the former event listener reacts to someone pressing the "Tab" key, which activates the keyboard accessible class. Tab is the key that those who need keyboard accessibility use to navigate the page.

The second one turns it off. It uses "mouse down" as the event because it's an event that, obviously, has no relation to the keyboard - usually people who need keyboard accessibility need it because they are unable to easily use a mouse. And, in the case that someone needed to navigate with the keyboard again after turning it off, pressing Tab will reactivate the class.

Now, head on over to your root CSS File and add these rules:

```css
body.keyboardAccessible *:focus {
    outline: 2px solid red; 
}

body:not(.keyboardAccessible) *:focus {
	outline: 0;
}
```

These are the classes that are activated/de-activated when pressing the Tab key or mouse respectively. The outline doesn't have to red, but it does need to have adequate contrast with the elements it is against (WCAG recommends a contrast ratio of at least 3.1 for graphical user interfaces).

Voila! As another benefit, checking to make sure this works appropriately after you implement it is a good way to see how someone using keyboard controls navigates through your page. It may help when considering an accessible layout for your site or web app.

With <3, happy coding!
Help Needed: Where to Put Ruby Docs?
Tags: ruby, documentation
Published: 2020-04-10 18:51:37

---
title: Help Needed: Where to Put Ruby Docs?
published: true
description: 
tags: ruby, documentation
---
Where, other than in the Ruby project itself, can enhanced Ruby documentation be shared to a broad readership?

(By enhanced, I mean substantially beyond what's in the Ruby doc itself.)

TL;DR

Quite a while back I had the notion to found a GitHub project where I'd write about Ruby.  My goals included:
* Telling examples for everything.
* Hard-nosed precision (e.g., Hash-convertible objects).
* Completeness (e.g., all exceptions raised).

Shortly, though, I realized that some of this would represent enhancements to Ruby's own documentation.  So, I asked myself, shouldn't it actually be put into the Ruby documentation itself, instead of in a separate (and far less prominent) place?  The Ruby doc lives in comments in the Ruby project's code, so that's where the enhancements would go.

Last year I experimented by basically rewriting the documentation for Ruby's ENV object.  Happy to say that all that got merged (in small batches) and then released with version 2.7.  Here are the before and after versions:
* [ENV version 2.6.6](https://ruby-doc.org/core-2.6.6/ENV.html)
* [ENV version 2.7.0](https://ruby-doc.org/core-2.7.0/ENV.html)

All well and good.

This year I've been working on classes Hash and Array.

I have not, though, been able to get anything (again, in small batches) reviewed and merged.  I don't complain about that:  Everyone's busy, just like us.

The problem is, I have a huge backlog of documentation now:
* All 75 methods in [Hash](https://github.com/BurdetteLamar/AboutRuby/blob/array/core/Hash/api/markdown.md#hash-api).
* Two-thirds of the 95 methods in [Array](https://github.com/BurdetteLamar/AboutRuby/blob/array/core/Array/api/markdown.md#array-api).

I've stashed all that in my own project, About Ruby.  But I don't think that very many in the huge Ruby world will find it there.

So my question is this:  Is there someplace else I can put this where people are more likely to find it?
Social Distancing Code Shirts
Published: 2020-04-10 18:48:45

A couple ago, I saw @amdev83 post about social distancing in the form of CSS. He also mentioned desiring it on a t-shirt.

{% twitter 1243572670635130880 %}

I decided I might be able to make that happen. I threw the code into my editor to get the right colored syntax and set off to make the CSS shirt. I set up the shirt and left the price with no profit to me. Then someone asked where the proceeds were going. I upped the price and decided to give the proceeds to [@Help_Hospitals](https://twitter.com/Help_Hospitals).

{% twitter 1244026656664281089 %}

I increased the prices some and added Javascript, Ruby, and Python versions. So far, we've raised a little over $10 to give to [@Help_Hospitals](https://twitter.com/Help_Hospitals).

{% twitter 1245128717875187714 %}

The designs are available on all sorts of shirts in tons of different colors.

![several types of shirts with syntax highlighted css: /* COVIDー19 */ .people { margin: 6ft !important; }](https://dev-to-uploads.s3.amazonaws.com/i/m9t8ngy4ycb0blikaio2.jpeg)


Once I made all of those shirts, I decided to mimic the language-agnostic SauceLabs `test.AllTheThings()` shirts and created `distance.AllThePeople()` shirts. These [distance.AllThePeopple()](https://www.redbubble.com/i/t-shirt/Social-Distancing-Code-Function-Orange-by-VickiLanger/46314879.9V5H1) ones are definitely my favorites. 

![different colored t-shirts that say distance.AllThePeople()](https://dev-to-uploads.s3.amazonaws.com/i/t1kommu16ubs2meaqd0v.png)

I got my shirt last Friday and wore it yesterday!

{% twitter 1248299688844984325 %}

Anyway, you can find all of the designs at this [shop link](https://www.redbubble.com/people/vickilanger/shop?artistUserName=VickiLanger&collections=1332803&iaCode=all-departments&sortOrder=relevant).


_Note: I'm not sure this post is allowed, I'm happy to take it down if it isn't._
Queue: Linkedlist as storage
Tags: javascript, webdev
Published: 2020-04-10 18:48:01

##Queue
Unlike stack, a queue works on First in First Out(FIFO) principle. Two main operations are done on a queue; enqueue and dequeue.

![Queue](https://dev-to-uploads.s3.amazonaws.com/i/4putig39io116g8zcq3p.png)

To enqueue involves adding item to the back of queue while to dequeue involves removing front item in queue.

##Linkedlist as storage
Implementing a queue using linkedlist;
1.The head of list is the head(front) of queue
2.The insertLast method is used to enqueue
3.The removeFirst method is used to dequeue

##Implemetation
1.Create node and queue class
```javascript
class Node {
    constructor(data, next = null) {
        this.data = data;
        this.next = next;
    }
}

class Queue {
    constructor() {
        this.head = null;
        this.tail = null;
    }
//add methods
}
```
Our queue has a head(front) and tail(back) item.

2.Add methods to our queue class to perform enqueue, dequeue and peek

**Enqueue**
```javascript
//add item to queue
    enqueue(data) {
        let node = new Node(data);
        //if empty, set new node as head and tail
        if (this.tail == null) {
            this.head = node;
            this.tail = node;
            return;
        }
        //add node as last item in queue
        this.tail.next = node;
        //set node as tail
        this.tail = node;
    }
```

**Dequeue**
```javascript
//remove item from queue
    dequeue() {
        //if empty, do nothing
        if (this.head == null) {
            return;
        }
        //remove curent head and set head to next item in queue
        this.head = this.head.next;

        // set tail to null if queue is emptied
        if (this.head == null) {
            this.tail = null;
        }
    }
```

**peek**
```javascript
 //return first item in queue
    peek() {
        if (this.head == null) {
            return "Queue is empty";
        }
        return this.head.data;
    }
```
 I'll be implementing a queue with arrays next, stay tuned.
Happy Coding! :dancers:
I made a website that tells you population info about COVID-19
Tags: webdev, showdev, html, javascript
Published: 2020-04-10 17:35:58

I'll start this off by saying I don't have many ideas. Somehow, the other day I came up with this website. I thought it was a cool little project, and feel free to check it out!

Website link: https://hedgy134117.github.io/covid19-reference/

GitHub link: https://github.com/Hedgy134117/covid19-reference
State of Web Dev 2020 Survey
Tags: webdev, discuss, nocode, development
Published: 2020-04-10 17:28:01

Web app development is constantly changing, especially in the current tough situation in the world. Companies have to cut their staff, fundings, projects, etc. No-code and low-code solutions like Webflow, Bubble, Zapier, Airtable, and UI Bakery are gaining popularity since they allow to save human, technology, and time resources.
Are you among those experiencing major shifts? Want to share your own thoughts or see how other companies tackle new challenges and transform a web app development strategy? 
Take the State of Web Dev 2020 Survey to discover market insights. Every participant gets the results. More than a hundred companies have already taken the Survey, so join them if you’re concerned about web app development and its future.
We are.
https://hubs.ly/H0pjy6H0
Write With Fauna - Calling JAMstack Enthusiasts!
Tags: serverless, jamstack, javascript, graphql
Published: 2020-04-10 17:26:24

Author: Dhruv Gupta
Date: April 7, 2020
[Originally posted on the Fauna blog.](https://fauna.com/blog/write-with-fauna-calling-all-jamstack-enthusiasts)

---

JAMstack is fast emerging as the modern approach to building dynamic serverless applications. At Fauna, we have seen the community of developers across the entire JAMstack ecosystem grow rapidly, furiously building the coolest new SaaS platforms and mobile apps.

We need your help creating content/articles that educate the community about this exciting new approach to software. Therefore, we’re introducing the “[Write with Fauna](https://www2.fauna.com/write-with-fauna)” program to build educational content for JAMstack with a focus on FaunaDB. 

If you are working with or exploring common JAMstack elements -- JavaScript frameworks, serverless functions, 3rd party APIs, GraphQL etc., and FaunaDB, the “Write with Fauna” program is a way for you to contribute to the fast growing JAMstack movement by writing technical content, and getting paid for doing so.

We expect to pay between $300-$600 in reward (as well as some cool Fauna swag) for each piece of approved content. Exceptions may apply based on content quality.

##Program details##

This program solicits content focused on technical education around JAMstack and FaunaDB, with working sample code, wherever applicable. Examples include:

* Building serverless apps using popular JAMstack frameworks and libraries (React, Angular, Vue, RedwoodJS, Svelte, Next.js, Gatsby, etc.) with FaunaDB
* FaunaDB step-by-step tutorials, tips and tricks based on your experiences
* Architectural discussions or best practices on building dynamic JAMstack apps
* Stack compare and contrasts, pros and cons of use

To participate in the program, please follow these instructions:

1. Submit your proposal with a topic and an abstract using [this form](https://www2.fauna.com/write-with-fauna).
2. Fauna will review your submission promptly. If selected, we will contact you to discuss the outline, schedule, placement, and reward.
3. The author will build the content and periodically review with our editors until completion.
4. Throughout the process, Fauna resources will help you with your questions, content, and edits.
5. Upon completion, the author will be compensated with the agreed-upon payment, determined by the length and complexity of the content.

We look forward to your participation! Please [get started here](https://www2.fauna.com/write-with-fauna).
Destructuring of Array
Tags: es6, webdev, computerscience
Published: 2020-04-10 17:15:31

**Concept** 
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays.It is an elegant way to extract data from arrays. 

        var array = ["My","Name","IS","Uzair"]
        console.log(array); //result ==>  ["My","Name","IS","Uzair"]

name1 will be assigned by My & name2 will be with Name   
                                         
        var [name1,name2] = ["My","Name","IS","Uzair"]   
        console.log(name1);//result ==> My
        console.log(name2);//result ==> Name
( ,)comma is used skip one element every time

        //name3 will be assigned by Is $ name4 will be with Uzair
        var [,,name3,name4] = ["My","Name","IS","Uzair"]
        console.log(name3);//result ==> IS
        console.log(name4);//result ==> Uzair


( ... ) **spread operator**(three dots)  unpack the string and this will be assinged like a array
 here name5 will be My and newArray will be the new array containing remaining elements
       
        var [name5,...newArray] = ["My","Name","IS","Uzair"]
        console.log(newArray);//result==> ["Name","IS","Uzair"]
        console.log(name5);// result==> My

Hope you find this article useful. Please share your thoughts in the comment section.
How do you decide between security and speed?
Tags: webdev, webperf, security, discuss
Published: 2020-04-10 17:05:21

###This is a question for people who have enabled a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) header on their website.

Using Content Security Policy headers requires you to *remove all inline CSS and Javascript*, which is why I have not done it.

Inline CSS and Javascript is [critical](https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf) for speed. How do you balance this? 

This is a huge dilemma for me, because **reducing HTTP requests by inlining CSS/JS makes the site faster.**

However, I've read so many articles saying that a Content Security Policy is your number one defense against cross site scripting [(XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) attacks. 

What to do?
The value of no-code is clear: build faster and allow a lot more people to build
Tags: nocode, lowcode
Published: 2020-04-14 23:06:26

---
title: The value of no-code is clear: build faster and allow a lot more people to build
published: true
date: 2020-04-10 16:56:10 UTC
tags: No-code, low-code
canonical_url: https://maxkatz.org/2020/04/10/the-value-of-no-code-is-clear-build-faster-and-allow-a-lot-more-people-to-build/
---

I shared earlier how no-code can help [build solutions faster and allow a lot more people to participate in building solutions](https://dev.to/maxkatz/no-code-coronavirus-call-for-code-2020-innovation-4lek). I shared how the community stepped up to help fight COVID-19 by building various applications with no-code. For example, one such application is to allow restaurant owners to build an online menu for delivery or takeout:

{% twitter 1241296396445257728 %}

The value of no-code is easy to understand:

1. Build solutions faster
2. Allow a lot more people to build solutions

A few days after I published my blog post, CNBC published a great article on demonstrating the two points above: [Next frontier in Microsoft, Google, Amazon cloud battle is over a world without code](https://www.cnbc.com/2020/04/01/new-microsoft-google-amazon-cloud-battle-over-world-without-code.html?__source=sharebar%7Ctwitter&par=sharebar). I want to share a few quotes from the article.

> [NYC] created a COVID-19 crisis-management software platform in a matter of days, and without writing one line of computer code. Time is of the essence.
> 
> <cite>CNBC (<a href="https://t.co/Y1MCdQY4dj" rel="nofollow">https://t.co/Y1MCdQY4dj</a>)</cite>

NYC used a no-code solution from [Unqork](http://unqork.com) to build this application in 48 to 72 hours. I think the time it took to build this solution is incredible. For many applications there is no need to focus on frameworks, libraries, integrations and servers. No-code allows to focus on a problem and building a solution.

> Microsoft expects 500 million new apps to be built in the next half decade, which is more than all the apps built in the last 40 years
> 
> <cite>CNBC (<a href="https://t.co/Y1MCdQY4dj" rel="nofollow">https://t.co/Y1MCdQY4dj</a>)</cite>

If this number is true, then this is an unprecedented demand for new software solutions. Today there are about [24-25 million developers](https://evansdata.com/press/viewRelease.php?pressID=278). It’s impossible to meed this demand with this number of developers using traditional coding tools. No-code allows a lot more people to build software solutions. No-code democratizes software development. Imagine if we enabled millions more people to build solutions. These people will come with solutions, ideas, inventions that we were not possible or imaginable before. Imagine what solutions first reponders could build to help fight COVID-19?

The value of no-code is clear: build faster and allow a lot more people to build.
How to become an open data publisher using Dolt
Tags: sql, database, git
Published: 2020-04-10 16:54:03

[Dolt](https://github.com/liquidata-inc/dolt) is a SQL database with Git-style versioning. In Git the unit of versioning is files. In Dolt, the unit of versioning is SQL tables. Dolt will eventually support 100% of the Git command line and 100% of MySQL SQL. Moreover, anything you can do on the Git command line, you will be able to do via SQL. Right now, we're at about 90% coverage of the Git command line and SQL.

[DoltHub](https://www.dolthub.com) is a place to share Dolt repositories. In the Git context, you clone, push, and pull from DoltHub as if it was a remote. Like GitHub, DoltHub is a central place to collaborate on Dolt data projects. You can create or find public data to work on. You can give read and write permissions to your Dolt repositories to other users. You can have them create pull requests to improve your data. In the future we imagine DoltHub issues and releases. We also expect to invent some new data-specific features.

Sound interesting? We think so. 

In an earlier blog post, [we showed you you how to get started as a data consumer](https://www.dolthub.com/blog/2020-02-03-dolt-and-dolthub-getting-started/). 

In this blog post, [we'll show you how to publish data for other people to use](https://www.dolthub.com/blog/2020-04-10-dolt-dolthub-become-publisher/).
Netlify Forms with FaunaDB
Tags: serverless, webdev, fauna, javascript
Published: 2020-04-10 16:40:31

---
title: Netlify Forms with FaunaDB
published: true
description: A post will describe how you can store your form data with fauna DB.
tags: serverless, webdev, faunadb, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d91mhx6z76d1a5mrsrgz.png
---
It's nice to see the form data to be stored in netlify. 
{% link https://dev.to/vish448/jamstack-registration-form-42pa %}
Now, what's next. I am going to store my form data to FaunaDB. 

##Create a db-schema 
- Create a Db-schema folder with registration.gql
{% gist https://gist.github.com/vish448/e955010e6850e3a2bd6930692bd638c4 file=registration.gql %}

## Create DB with FaunaDB
- Login to FaunaDB Console
- Create new DB with FaunaDB
- Import schema (DB Console -> GraphQL -> Import Schema)
- Create a new FUANA_DB_SECRET with security tab in console

## Create Environment Variable
- In netlify console.
 - Go to Deploy Settings -> Environment -> Edit variable
 Add FAUNA_DB_SECRET -> Copy paste your secret here. This is used for authentication purpose.

## Create Nelify Functions
Create netlify functions manually
- create a functions folder at root level
- within functions folder create your netlify functions
i.e for the form submission create submission-created.js under the functions folder.
The functions name also needs to match the specific event name with netlify events. The available event triggers available here on [netlify docs](https://docs.netlify.com/functions/trigger-on-events/#available-triggers)

{% gist https://gist.github.com/vish448/e955010e6850e3a2bd6930692bd638c4 file=submission-created.js %}

Folder structure will look something like this.
![Folder Structure after creating functions](https://dev-to-uploads.s3.amazonaws.com/i/hxvljjrcjbu4exg4s91s.png)

####Create netlify functions with netlify-cli
```$ netlify functions:create submission-created```

####$ To deploy netlify function via netlify-cli
```$ netlify deploy --prod```

Now, in netlify console in functions tab all available netlify functions will be listed. Click on function for debug purposes.

## Netlify Config
Functions to run in netlify we need a **netlify.toml** (configuration) file
{% gist https://gist.github.com/vish448/e955010e6850e3a2bd6930692bd638c4 file=netlify.toml %}

Now the data which is pushed on netlify forms will also be available in FuanaDB for use.
Lockdown Programming Challenges: 3. URL Shortener
Tags: kata, beginners, javascript
Published: 2020-04-10 16:31:09

---
title: Lockdown Programming Challenges: 3. URL Shortener
published: true
description: 
tags: #kata #beginners #javascript
---
This is the third in the series of lockdown programming challenges I've been posting. The aim is to learn something new, try a new language or tech, practice your skills or just help with boredom under lockdown. 

In the [first challenge](https://dev.to/drm317/programming-challenges-6bo) we looked at password complexity. In the [second challenge](https://dev.to/drm317/lockdown-programming-challenges-2-password-generator-3l23) we created simple a password generator. In this third challenge we're going to step it up and create a full application - a URL shortener.

# Challenge 3: URL Shortener

Create a web application that takes a full URL and returns a short version.

* Create a form where the user can enter a long URL
* Generate a shortened URL (eg. /short1234) and save it in a datastore alongside the long URL
* Redirect visitors to the long URL when the relative short URL is added to the URL of your web application (eg. mylockdownchallengeurl.com/short1234)

## Advanced

* Count the number of visitors to the short URL
* Use Redis as your datastore
* Try a new programming language or web framework
* Capture the date and time each visit was made to a URL and generate a graph
* Host your web application on a free cloud service.