teleren/devto huggingface dataset:
Tabbing for Accessibility
Tags: html, css, webdev, javascript
Published: 2020-03-17 16:42:31

Tabbing is one of the ways someone can navigate through a website simply be using the `tab` button. Tabbing is important as it gives accessible users the ability to easily navigate your website.

Here are two tips to improve your websites tabbing experience.

# 1. Don't mess with Tabindex

`Tabindex` is an html attribute that can manipulate the navigation order of actionable elements. It also allows non-actionable elements like `div` or `p` to be tabbable but it's highly discouraged.

So what's wrong with `tabindex` if it gives you full control on how to order your tabbable items? The problem stems from the fact that changing the navigation order by having a `tabindex` greater than 0.

Let's say you have this sort of HTML structure for your buttons.

```html
<button tabindex="4">I have tab index 4</button>
<button tabindex="1">I have tab index 1</button>
<button tabindex="3">I have tab index 3</button>
<button tabindex="5">I have tab index 5</button>
```

When the user tabs through, it will hit the one whose `tabindex` is 1 followed by 3 then 4 and finally 5. After that, let's say you want to add a couple more buttons.

```html
<button tabindex="4">I have tab index 4</button>
<button>I use the default tab index</button>
<button tabindex="1">I have tab index 1</button>
<button>I use the default tab index</button>
<button tabindex="3">I have tab index 3</button>
<button tabindex="5">I have tab index 5</button>
<button>I use the default tab index</button>
```

Because you committed to using the `tabindex` attribute, any subsequent actionable items you add to your website might need a `tabindex` of its own.

What should we do if we shouldn't use `tabindex`?

Answer: You don't have to use anything. Ordering your elements logically will not only remove `tabindex` headache but will also make your website more accessible.

# 2. Focus, focus, and focus-visible?

Since tabbing triggers a focus event on the actionable element, we can use CSS's `:focus` property to add special styling to the element.

```css
button:focus {
  background: #000000;
  color: #FFFFFF;
}

input:focus {
  background: #000000;
  color: #FFFFFF;
}
```

By default, the focus event also gets triggered `onmousedown`. What if we only want the styling to occur while tabbing. Many websites have solved this problem with the help of Javascript like:

{% codepen https://codepen.io/koralarts/pen/poJKJLj %}

If you don't want to Javascript, there is a proposed pseudo-class called `:focus-visible` where style in this pseudo-class will only be visible through tabbing.

To learn more about it see [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
New VS Code extension to manage Azure VMs
Tags: vscode, productivity, webdev, azure
Published: 2020-03-17 16:35:54

---
title: New VS Code extension to manage Azure VMs
published: true
description: Discover the new VS Code extension to create and connect to Azure VM easily with this 1-minute video!
tags: vscode, productivity, webdev, azure
cover_image: https://raw.githubusercontent.com/sinedied/articles/master/articles/vscode/vm-extension/assets/new-azure-vm-ext.png
canonical_url:
---

Last week [a new extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurevirtualmachines&WT.mc_id=devto-blog-yolasors) has been launched for [VS Code](https://code.visualstudio.com?WT.mc_id=devto-blog-yolasors), allowing you to quickly create, manage and connect to [Azure Virtual Machines](https://azure.microsoft.com/free/virtual-machines/?WT.mc_id=devto-blog-yolasors) (VMs) right from within the editor! 🎉

Here is a short 1-minute video I made to illustrate how easy it is to create and connect to a new VM:

{% youtube KKFnyAPjLRc %}

Obviously this is not made for production work, but for development it can be quite useful. I work on cross-platform OSS packages all the time, and being able to quickly spawn and connect to a remote Linux VM without having to leave my current workflow is a real time-saver for testing and bug fixing 😍.

What do you think about it?

*Note: this extension is currently in preview and some features may be currently missing, like the ability to choose which kind of VM/Size to create.*
Impressive Updates in Chrome 81 !
Tags: webdev, javascript, react, beginners
Published: 2020-03-17 16:29:13

Google Chrome's new update (81) introduced a massive improvement from Augmented Reality, NFC , Nicer default styling for form elements and many more..


####How you can use NFC in Javascript

````Javascript

if ("NDEFReader" in window) {
  const reader = new NDEFReader();
  await reader.scan();
  reader.onreading = ({ message }) => {
    console.log(`Message read from a NFC tag: ${message}`);
  };
}
```

Read more here
[Chrome 81 Updates](https://blog.chromium.org/2020/02/chrome-81-near-field-communications.html?m=1)

[New In Chrome]
(https://blog.chromium.org/2020/02/chrome-81-near-field-communications.html?m=1)
CS Trivia#6: Where did the spaceship operator come from?
Tags: ruby, todayilearned, computerscience, codenewbie
Published: 2020-03-17 16:25:41

Welcome to my little CS trivia series. Every week I post a new trivia piece.

Today's question is...

---

## Where did the spaceship operator come from?

The spaceship operator looks like `<=>` and its official name is the “three-way comparison operator” or "Comparable" (in [Ruby](https://ruby-doc.org/core-2.4.0/Comparable.html)). Before we dive into its naming history, let's see what this operator does in programming languages. Currently, the programming languages that use this operator are: Perl, Ruby, Apache Groovy, PHP, Eclipse Ceylon, and C++. There were proposals to add it to other languages, e.g. [Javascript](https://esdiscuss.org/topic/informative-notes#content), or [Dart](https://github.com/dart-archive/dart_enhancement_proposals/blob/master/Meetings/2015-05-06%20DEP%20Committee%20Meeting.md).

## What does it do, really?

This logical operator checks a statement three fold:
```
  if a < b, return -1
  if a = b, return  0
  if a > b, return  1
  if a and b are not comparable return nil
```

Therefore, instead of writing a few else/if statements, you can keep it short by just using the spaceship operator.

## Where did the name come from?
In the Google Group devoted to Dart Committee Meeting, Perl expert [Randal L. Schwartz](https://en.wikipedia.org/wiki/Randal_L._Schwartz) mentioned that he had coined the name "spaceship operator":
![Randal L. Schwartz's message](https://dev-to-uploads.s3.amazonaws.com/i/26izvvlijv3wrn3teoes.png)


He explains:
>In writing, you can just get away with saying "the <=> operator", but
when teaching, I got really tired of saying "the less-than, equal,
greater-than operator", so I noticed it reminded me of the spaceship in
an old HP BASIC ["star trek" game](https://www.codeproject.com/Articles/28228/Star-Trek-1971-Text-Game), so I started using that, and it caught
on, even finding its way into an error message, and thus becoming
official.

---
A short Explanation of JavaScript Objects
Tags: javascript, womenintech
Published: 2020-03-17 16:25:32

 Objects are the general building block upon which much of JavaScript is built. They are one of the six primary types in JS: string, boolean, number, null, undefined and object.

There are two types of objects. 
  1. literal form - you can add one or more key/value pairs

```javascript
var myExample = {
  key: value;
};
```
  2. constructed form - you must add the properties one by one

```javascript
var myExample = new Object();
myExample.key = value;
```

## Accessing objects

The contents of an object consist of values stored at specifically locations, called properties.

Consider the next example: 

```javascript
var myExample = {
  a:3;
};

myExample.a; //3
myExample["a"]; //3
```

To access the value at the location `a` in `myExample` we use either "." or "[]". The ".a" syntax is referred to as "property access" and "["a"]" syntax is usually referred to as "key access". In reality the both access the same location, so both terms can be used interchangeably.

## Property descriptor

All properties are described as property descriptor, because an object property is much more than just its value. It includes three other characteristics:

  1. writable - the ability to change the value of a property.
  2. configurable - as long as a property is configurable, we can modify its descriptor definition.
  3. enumerable - controls whether a property will show up in certain object-property enumerations, such as `for..in` loop.

## Immutability

Objects can have their mutability controlled to various levels of immutability. All the approaches that are going to be mentioned create a "shallow immutability". This means that they affect only the object and its direct property characteristics.

  1. Object constant - by combining "writable: false" and "configurable: false", you can create a constant as an object property.
  2. Prevent extensions - if you want to prevent an object from having new properties, call `Object.preventExtensions()`
  3. `Object.seal()` - it takes an existing object and calls `Object.preventExtensions()` on it and marks all its existing properties as "configurable: false".
  4. `Object.freeze()` - it takes an object and calls `Object.seal()` on it and marks the existing properties as "writable: false", so that their values can't be changed; this is the highest level of immutability that can be attained.
Working from home
Tags: mentalhealth, discuss, remote
Published: 2020-03-17 16:20:19

---
title: Working from home
published: true
description: How to take care of yourself when working from home
tags: #mentalhealth #discuss #remote
---

Remote work can have a serious impact on your life and (mental) health. Especially when you can’t leave the house for extended periods of time. A lot of people are going to experience this for the first time now. So sharing some tips and learnings from the years I've worked remotely.

In short:
- Stick to your regular routines
- Get outside
- Actively communicate with others
- Proactively manage isolation
- Set up your boundaries
- Stay healthy & fit

The full blog post can be found at:
https://www.wslyvh.com/working-from-home/

What are you doing to stay healthy?
JSON in Python
Tags: python, javascript
Published: 2020-02-01 09:11:39

The JavaScript Object Notation (JSON) is a lightweight data-interchange format that just so happens to be remarkably similar to Python's dict notation.

The two are so similar that you can copy JSON and paste it in the middle of your Python program and it will usually work:

```python
>>> {
...     "my_object": {
...         "my_list": [1, "2", 3.0, 4.0e10]
...     },
...     "my_string": {
...         "escaping": "\"\" 🤔"
...     }
... }
{'my_object': {'my_list': [1, '2', 3.0, 40000000000.0]}, 'my_string': {'escaping': '"" 🤔'}}
```
    
Unfortunately, this breaks down whenever you have those pesky booleans or nulls in your JSON:

```python
>>> {
...     "my_null": null,
...     "my_bool": true,
...     "my_second_bool": false
... }
Traceback (most recent call last):
  File "<stdin>", line 2, in <module>
NameError: name 'null' is not defined
```

At this point, you might be tempted to do a search and replace that turns `null`, `true` & `false` into Python's `None`, `True` & `False`, but that's tedious and gets really annoying if you want to copy paste back and forth. 

You could even be reasonable and use `json.loads` but then your JSON would be a string and your editor would no longer color highlight it correctly:

```python
>>> import json
>>> json.loads("""
... {
...     "my_null": null,
...     "my_bool": true,
...     "my_second_bool": false
... }
... """)
{'my_null': None, 'my_bool': True, 'my_second_bool': False}
```

Because colors are the most important thing in programming, there has to be a better way! And there is. Python allows us to use `null`, `true` and `false` as regular variable names. This means that we can do something like this:

```python
>>> null=None; true=True; false=False
>>> {
...     "my_null": null,
...     "my_bool": true,
...     "my_second_bool": false
... }
{'my_null': None, 'my_bool': True, 'my_second_bool': False}
```

Marvelous, isn't it? You can even put `null=None; true=True; false=False` in a separate python file (let's call PJ.py as a shorthand for PythonJson). Now you can do:

```python
>>> from PJ import *
```
And your python file will be ready to accept JSON!

Do make sure you wear a PJ like the one below when doing this, otherwise, people might think you are being serious 😅

<p style="font-size: 0.9rem;font-style: italic;"><img style="display: block;" src="https://farm2.staticflickr.com/1540/24600872031_e97aa55116_b.jpg" alt="#ViernesDePijamas"><a href="https://www.flickr.com/photos/139114328@N06/24600872031">"#ViernesDePijamas"</a><span> by <a href="https://www.flickr.com/photos/139114328@N06">mrl.itesm2</a></span> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" style="margin-right: 5px;">CC BY-NC-SA 2.0</a><a href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=html" target="_blank" rel="noopener noreferrer" style="display: inline-block;white-space: none;margin-top: 2px;margin-left: 3px;height: 22px !important;"></a></p>
Quickly populating a second AWS Amplify GraphQL environment with data
Tags: amplify, devops, database, testing
Published: 2020-03-17 16:11:31

Sometimes it's more comfortable to test an AWS Amplify app with active data. '[amplify env add](https://aws-amplify.github.io/docs/cli-toolchain/quickstart?sdk=js#environment-related-commands)' creates emptiness. The GraphQL endpoint will return nothingness. Fill it up! Maybe replicate data from production, or maybe bootstrap from files in S3.

### Approaches

**Bootstrap from Files**
Quickly upload data the second environment from data in files. To DynamoDB or RDS. Simply put data files in S3 and replicate with AWS Data Migration Service. An empty environment can be painful. Data with velocity can be painful too. Static files are really simple and can take the pain away:
* AWS Data Migration Service (for DynamoDB or RDS resolved models)

**Replicate from Production**
Quickly populate a second environment with data from the production environment for comfortable testing. How exactly can somebody replicate production data to a second environment? It's easy. There are two services which can replicate the production app environment's data stores:
* AWS Data Pipeline (for DynamoDB resolved models)
* AWS Data Migration Service (for RDS resolved models)


### Bootstrap from Files

AWS Data Migration Service can copy data from S3.  DMS can copy to DynamoDB or RDS. Create a source endpoint in AWS DMS with a single S3 bucket.  See [Using Amazon S3 as a Source for AWS DMS](https://docs.aws.amazon.com/dms/latest/userguide/CHAP_Source.S3.html). Then create a destination endpoint, for example, a single AWS DynamoDB endpoint. See [Using an Amazon DynamoDB Database as a Target for AWS Database Migration Service](https://docs.aws.amazon.com/dms/latest/userguide/CHAP_Target.DynamoDB.html).

### Replicate from Production

Choose a service to replicate a particular type of data store.  AWS Data Pipeline can perfectly copy one DynamoDB table to another.  AWS Data Migration Service can perfectly copy one RDS hosted database instance to another.

Jump in the saddle with AWS Data Pipeline to replicate a DynamoDB single table. Expect a quick hop to S3.  See [Exporting and Importing DynamoDB data with AWS Data Pipeline](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/DynamoDBPipeline.html).

Replicating a single RDS hosted database from one instance to another is simple. Use AWS Data Migration Service to copy the tables over. It won't take months. It will be fast.

### Possibilities

When it's absolutely necessary to have data in an Amplify environment, don't let it be cumbersome. A GraphQL endpoint is more functional with data. Iterative software feature delivery goes faster. Push the data replication into the cloud! Have fun. There might be more than one way.  Leave a comment with other suggestions, please!
Catching bugs in React with PropType Validation
Tags: javascript, react
Published: 2020-03-17 16:01:10

TypeScript, which is a superset of JavaScript that compiles down to plain JavaScript, is immensely popular. Actually it even has more npm package downloads than the React library:

![typescript vs react](https://i.ibb.co/W2z8CWy/react-VStypescript.png)

One of the main benefits of TypeScript is typechecking, which can avoid painful bugs. In this article I want to show you that you do not always need to use TypeScript to typecheck your application because React has some built-in typechecking abilities.
<hr/>
### Setting up the component
First of all, I would like to recommend you to use the Visual Studio code extension for ES7 snippets called: *ES7 React/Redux/React-Native/JS snippets*.

After installing the extension, create a new JS file inside your React application and just type `rafcp` inside the file and press `enter`. This will create the basic component with PropTypes included and also give it the name of the filename you just gave it. Using the extension saves you so much time setting up boilerplate components. 

Next up I would like to advise you to use the *Prettier* extension if you do not have it already so you do not have to worry about spacing and structuring your code.

Now select the name of your component and press `CTRL+D` a couple times and see what this does. It will select the other selected words and create multiple cursors. Another great way to improve your workflow! Let's change all three texts to `UserProfile` and destructure off the props, which is a name object with two properties:

``` javascript
import React from "react";
import PropTypes from "prop-types";

const UserProfile = ({ user: { name, likes } }) => {
  return <div>Hi, {name}!</div>;
};

UserProfile.propTypes = {};

export default UserProfile;

```
<hr/>
### Adding propTypes
With the propTypes we can make sure the data we are receiving is valid. 
In this example, we are receiving an object, a string and a number type.

Go into your propTypes object and type in `name:` and then `ptsr` and press `enter`. This is a shortcut to add a propType for a string which is required. The same you can do for number:  `ptnr`. Easy, right!

``` javascript
import React from "react";
import PropTypes from "prop-types";

const UserProfile = ({ user: { name, likes } }) => {
  return <div>Hi, {name}!</div>;
};

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  likes: PropTypes.number.isRequired
};

export default UserProfile;
```

You can check all the types and read up on this topic more at the [official React documentation](https://reactjs.org/docs/typechecking-with-proptypes.html)
Daily animation: Button Swipe
Tags: transition, css, animation, design
Published: 2020-03-17 13:05:11

---
title: Daily animation: Button Swipe
published: true
description: On hover background animation
tags: transition, css, animation, design
---




Recently, I was on the Half-Life Alyx website and came across an interesting button animation. As you hover over the button the background comes across from the left and fills the button whilst changing the text's colour. The background is also slightly skewed, which is a nice touch.  I've seen this type of button animation before but I've never actually done it myself. So I thought it would be fun to make my own version. 

{% codesandbox swipe-fill-lf2xm %}


Here are the styles.

```css
.Button {
outline: none;
border: 2px solid #2d4059;
font-size: 1.4rem;
padding: .7em 1.2em;
background: transparent;
color: white;
overflow: hidden;
z-index: 1;
font-weight: bold;
box-shadow: 8px 8px #2d4059;
cursor: pointer;
transition: color 150ms linear;

&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 140%;
  height: 105%;
  background: white;
  transform: skew(-33deg, 0) translateX(-110%);
  transition: transform 150ms linear;
  z-index: -1;
  }
  
  &:hover {
    color: #2d4059;
    transition: color 150ms linear;
    &:before {
      transform: skew(-33deg, 0) translateX(-10%);
      transition: transform .25s linear;
      
    }
  }
}
```
# Breakdown

- The z-index is very important here because we don't want the pseudo-element to cover the button text. To solve that problem we set the pseudo-element **::before** to a lower z-index than the button. 

- We're also skewing the background so that it has a sharp edge as it comes into view.

- Next, we set the transition to start when the button has an on:hover event. Here we just translate the **::before** element to -10% (which fills the background) and change the button text to a darker colour (so it can stand out from the white background).

If you're interested in seeing the original button animation, you can check out the [Half-Life Alyx](https://www.half-life.com/en/alyx) website.

And that's it! Hope you enjoyed it!
Matching Numbers in JavaScript Strings using Regular Expressions
Tags: javascript, node, react, codenewbie
Published: 2020-03-17 16:00:42

---
canonical_url: https://bonsaiilabs.com/javascript-regex-match-numbers/
---

Learn how to match number patterns such as phone numbers and credit cards in the unstructured text using JavaScript Strings

This video is a follow-up video for - Search a String by matching against a regex in JavaScript available at https://bonsaiilabs.com/javascript-regex-match-strings/

In this video, we will extract phone numbers and credit card data using regular expression and String.match available in JavaScript
The code sample is available at https://bonsaiilabs.com/javascript-regex-match-numbers/

{% youtube 528hucayQi4 %}

Subscribe for more videos on JavaScript with Visualization: https://www.youtube.com/channel/UC0yZBnRsD9JRqLXBkfGym0Q?sub_confirmation=1
START WITH FLUTTER
Tags: flutter, basics, beginners
Published: 2020-03-17 15:56:10

At first, after hearing the vibes about the newly arrived framework by Google (i.e. Flutter) I ignored; but gradually after seeing the market demand of this dynamic framework I got fascinated to it and here I am with the journey of learning flutter. Just a idea clicked and I thought why not share some experience on Dev.to so as to help the community. Below Given is my way starting the journey.

__Steps At Beginning__

==> Starting with flutter requires a knowledge of DART programming language (as we require java/kotlin for android).
==>Make sure you enroll yourself for any free/paid course for Beginning.
A good start with proper direction encourages you while a starting from any concept  in any direction will leave you Jumbled.
==> Once your done with the above 2 steps, you are ready to dive into cross-platform app development area.

I would like to suggest a that if you are with a 4GB Ram laptop with intel core i3 processor please do not go with android studio(it took me about 45 minutes to run  the emulator on this device). Its my personal advice to install visual studio code and work with the emulator of Android studio although it may still lead to lagging of the system but better than before or else I would suggest you to connect your phone to system with developer mode enabled it would be the best alternate for emulator.
Full-Screen Responsive Bootstrap Carousel
Tags: w3hubs, css, webdev, todayilearned
Published: 2020-03-17 15:54:37

Carousel is one type of slider, there you can show by using image or background-colors. Bootstrap have so many beautiful and responsive elements. So here we used the bootstrap carousel element and little bit modify by using CSS.

In this element, we used SVG images with the help of background colors. Here we used background-position and size properties. To make slider full-screen we used height properties using 100vh CSS value. It has also included the next and previous button icons, Which already given in bootstrap carousel elements.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source Code:](https://w3hubs.com/full-screen-responsive-bootstrap-carousel/)