teleren/devto huggingface dataset:
5 tools for Designing, Developing, and Testing Accessibility
Tags: a11y, beginners, webdev, design
Published: 2021-07-20 19:58:47

No matter what you are working on, considering accessibility is definitely a best practice.  Below is a list of five tools to help get you started with accessibility in your projects.

## [Stark](https://www.getstark.co/)
  - This tool provides a wide array of color and contrast checking abilities along with simulators to test you design again visual disabilities.  
  - Stark has plugins to go in various design tools, but also in chrome.

![Stark as a Google Chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6jtdfwoy1kym5vrms02.png)
 

## [Deque's Dev tools AXE extension](https://www.deque.com/axe/devtools/)
  - There are extensions/add-ons for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), and [Edge.](https://microsoftedge.microsoft.com/addons/detail/axe-devtools-web-access/kcenlimkmjjkdfcaleembgmldmnnlfkn) 
  - Additionally, [Lighthouse](https://developers.google.com/web/tools/lighthouse/) accessibility checks are powered by AXE Core as well.

![Axe dev tools check results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl7jufa9gkcxz6hnmv9n.png)

![lighthouse results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0hk18pw63uiail9z66p.png)
 
 

## [WAVE](https://wave.webaim.org/)
  - WAVE is powered by [WebAim](https://webaim.org/) and functions similarly to Deque's AXE extensions.
  - An interesting element of WAVE's functionality is that it give an accessibility markup over the entire site. 
![wave accessibility markup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dirlecnq0rbvwn4lgrzb.png)

## [ANDI - Accessibility Testing Tool](https://www.ssa.gov/accessibility/andi/help/install.html)
  - ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool.
    - ANDI allows you to inspect your page on the basis of accessible names which come in handy especially if you're working with interactive elements.

![focusable elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8kpa67wkvct4b0dkc8m.png)
 

## Linting

### [VS Code AXE Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
  - Checks React (`.js`, .`jsx`, `.ts`, `.tsx`), Vue (`.vue`), HTML (`.html`, `.htm`), and Markdown (`.md`, `.markdown`) files so you can avoid common accessibility defects. Angular (`HTML`) is not currently supported.
 
![targeting code that is not accessible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzn1pgcqlpw2rq7fx1wg.png)

### ESlint Accessibility Plugins
  - There several different plugin depending on what framework/ tech stack you're working with.
    - I work a lot in React so my team frequently uses this plugin:
      - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)
Winning Wars (Literally) with Agile & DevOps w/ Adam Furtado of Kessel Run
Tags: devops, agile, culture, metrics
Published: 2021-07-20 18:54:25

The wars of the future will be fought with software and system architecture, as much as any other weapon. That’s why the US armed forces needed to start applying modern software methodologies at scale. 

The beginning of this incredible digital transformation began in 2017 when the US Air Force started a project called Kessel Run. Leading the project then, and now Chief of Platform of over 400 Kessel Run developers, is Adam Furtado.

Translating engineering to executives is a regular challenge for many of us, but I can almost guarantee translating engineering to military officials is way harder. When he’s not explaining why DevOps matters to his higher ups, Adam spends his time scaling Kessel Run operations by building systems of systems. This week’s episode of [Dev Interrupted](https://devinterrupted.com/podcast/winning-wars-literally-with-agile-devops/) chronicles everything Adam has learned during his journey from 5 developers to over 400. 
#**Listen to the full episode**
{% spotify spotify:episode:1yEGsyHYL7BJlNcYG0vQ0b %}

#**Episode Highlights include:**
* Effective tactics for translating engineering to non-technical people
* Why having a mission driven culture is critical to success
* How to continue the momentum of early wins for organization success
* When you need to start thinking about metrics and visibility while scaling

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
Cómo cambiar la contraseña de Linux(Ubuntu 20.04 LTS) en WSL
Tags: linux, wsl, tutorial, windows
Published: 2021-07-20 18:42:53

Seguramente alguna vez te has olvidado la contraseña en Linux y no sabes cómo cambiarla (cosa que a mí me ha pasado algunas veces 😅). La verdad es bastante fácil de hacer. 

___Puedes leer este [artículo](https://itsfoss.com/reset-linux-password-wsl/) para más detalles.___

En este caso voy hablar de cómo restablecer o cambiar la contraseña en Ubuntu 20.04 LTS ya que es la distribución que estoy utilizando en WSL, pero si usas otra distribución échale un vistazo al link que deje arriba!

## Son tres simples pasos

### 1️⃣ Cambiar a root como usuario predeterminado
Aquí debe abrir un terminal de **cmd** de Windows y ejecutar el siguiente comando:

```bash
# cmd
config --default-user root
```
Debe colocar `ubuntu2004` antes del comando.
Obviamente en el lugar de `user` y `username` debe colocar su usuario.

Ejemplo:
```bash
# cmd
C:\Users\user>ubuntu2004 config --default-user root
```
### 2️⃣ Cambia la contraseña
Aquí debe abrir un terminal de **wsl** y ejecutar el siguiente comando:
```bash
# wsl
passwd username
```
Le pedirá que ingresé su nueva contraseña y luego confirmarla

Ejemplo:
```bash
# wsl
root@user:/home/username# passwd username
New password:
Retype new password:
passwd: password updated successfully
```
### 3️⃣ Vuelva a establecer su usuario como predeterminado
```bash
# cmd
config --default-user username
```
Ejemplo:
```bash
# cmd
C:\Users\user>ubuntu2004 config --default-user username
```

Y listo ya sabes cómo cambiar la contraseña o restablecerla! 🎉
Genesis
Tags: welcome, writing, beginners
Published: 2021-07-20 18:42:23

Hi there,
My name is Oluwatobi Oluwatoyin and I am a Software Engineer. I have decided to share the things I learn from daily work to contribute to the tech community. Most of my posts would bother on Flutter, Machine Learning, Start-ups and other random topics that I deem necessary to write on. This would be my first extended trial at writing and I hope you will find my posts insightful and helpful. 

Here's to the many awesome posts that will come after this. 
Thanks!
Laravel 8.0 Form Validation Example

Tags: laravel, programming, webdev, codenewbie
Published: 2021-07-20 18:33:43

Hello Artisan,

Today we will make form validation strategies to make input data validated.

Create a Laravel Project first, run this command
composer create-project –prefer-dist laravel/laravel blog

Make databse Connection , create a database in the Mysql database after that go to the .env file and set the values,

Make Database Connection
and add the code to .env file

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_blog
DB_USERNAME=root
DB_PASSWORD=

```
**Create your custom route,**
**routes/web.php**
```
Route::get('user/create',[UserController::class,'create']);
Route::post('user/store',[UserController::class,'store']);

```
After creating a brand new laravel project you have already the User model and UserController in your project directory. If not then add

**Create Model**
**Models/User.php**

```
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}
```
**Create Controller**
**app/Http/controllers/UserController.php**
```

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{

    public function create(){
        return view('user.create_user');
    }
    public function store(Request $request){

//        dd($request);

        $validatedData = $request->validate([
            'name' => 'required',
            'password' => 'required|min:5',
            'email' => 'required|email|unique:users'
        ], [
            'name.required' => 'User Name is required',
            'password.required' => 'User Password is required'
        ]);

        $validatedData['password'] = bcrypt($validatedData['password']);
        $user = User::create($validatedData);

        return back()->with('success', 'User created successfully.');

    }
}

```

GET FULL CODE: [Laravel Form Validation](htps://codesnipeet.com/laravel-8-0-form-validation-example/)
Laravel 8.0 CRUD Tutorial Using Mysql Database

Tags: laravel, webdev, programming
Published: 2021-07-20 18:28:30

Hello Artisan,

Today we will create a CRUD application in Laravel using Mysql Database. CRUD extends Create, Read, Update, Delete. We performing This operation in our new fresh laravel project. So, let’s start.

**Create a Laravel Project first, run this command**

`composer create-project --prefer-dist laravel/laravel blog`

After completion the creation of laravel project, lets go…

**Make databse Connection  **
create a databse in the mysql database after that go to the .env file

and add the code 
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_crud
DB_USERNAME=root
DB_PASSWORD=
```

Set your Databasae name,username and password.

Now, run this command to migrate

`php artisan migrate`

**Create Product model**

`php artisan make:model Product`

Create migration for products table, run this command

`php artisan make:migration create_products_table --create=products`

let’s add products table column propertise to the migration file.
```
Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('details');
    $table->timestamps();
});
```

Create Controller, run this command

`php artisan make:controller ProductController --resource`

In web.php add our route, 

**web.php**
```
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('index');
});

Route::resource('product',ProductController::class);

```
To see out all route, run this command

`php artisan route:list`

 Output

FULL CRUD GET HERE: [Link](https://codesnipeet.com/laravel-8-crud-tutorial-using-mysql-database/)
Create a new Laravel 8.0 project

Tags: laravel
Published: 2021-07-20 18:21:50

Hello Artisan,

Today we will create a laravel project from scratch. Before that you have to install composer dependency to work with laravael. If you dont have install composer, pleasae read this post and install composer in your local mechine.

There are two ways to create a laravel project.

1.Via laravel Instraller &
2.Via laravel Composer

So, How to create Laravel project.
 We will create both way a laravel project.

Ensure that you have composer installed in your machine. To check if it there or not by running the below commands:

`composer --version`

**Install Laravel Installer by running**
`composer global require laravel/installer`

**Check is Laravel installer installed or not**
`laravel --version`

Done! GO forward!

First Method is to create laravel project laravel new blog

**Second Method is  create Laravel project**
`composer create-project --prefer-dist laravel/laravel blog`
In this section create Laravel project by the composer so, after running the above command it’s look like

After taking some time depending on your internet connection, a fresh Laravel project created successfully.

And the out put looks like

Read More: [Link](https://codesnipeet.com/create-a-new-laravel-8-0-project/)
Loan Calculator Library
Tags: opensource, node
Published: 2021-07-20 18:15:20

As part of Knock’s mission to make home buying and selling easy, we launched the Knock [Home Swap](https://blog.knock.com/knock-home-swap/)™ almost exactly one year ago. Offering competitive financial products to our clients brought with it a host of opportunities, challenges, and new features for Knockstars to develop!

For example, take this Home Swap interest rates card from Knock HomePro ([Android](https://play.google.com/store/apps/details?id=com.knockpoc&hl=en_US&gl=US) / [iOS](https://apps.apple.com/us/app/knock-homepro/id1446291303)), our app for Real Estate agents:

![Screen Shot 2021-07-20 at 9.53.25 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r22g18fdr5khom1obga0.png)
 

We brought mortgage rates into the HomePro app to show agents and their customers that we offer competitive interest rates. We are also legally required to show the Annual Percentage Rate (APR) whenever we provide an interest rate. This gives agents and customers a uniform metric to compare interest rates and fees across lenders.

To our surprise, it was difficult to find a simple [NPM](https://www.npmjs.com/) module to convert an interest rate to APR the way that innumerable online calculators do ([1](https://www.calculator.net/apr-calculator.html), [2](https://www.calculatorsoup.com/calculators/financial/apr-calculator.php), [3](https://www.calculatestuff.com/financial/apr-calculator), the list goes on!). In particular, we could not find a module that would properly account for the various parameters (payment frequency, loaned fees, upfront fees, etc.) which are readily available in many of the online tools.

And so, we created this open source module: [@knockaway/loan-calculator](https://npm.im/@knockaway/loan-calculator). The goal of this project is to make loan calculations as simple as using any one of the free online loan calculators. Just inputs and outputs! The first release includes methods to calculate APR, APY, periodic payments, and to convert compounding frequencies.

Have an idea for a new loan calculator function? Visit our [GitHub](https://github.com/knockaway/loan-calculator) page to make a contribution or feature request. Happy calculating!
What are the differences between HashMap and Hashtable in Java?

Tags: java, programming, webdev
Published: 2021-07-20 18:07:30

Hashtables and HashMaps are both used to store data in key-value pairs. To store unique keys, both use the hashing approach. However, there are numerous distinctions between the HashMap and Hashtable classes, which are listed below.

HashMap
HashMap is a non-synchronized data structure. It is not thread-safe and cannot be shared among several threads without the use of synchronization code.
One null key and numerous null values are allowed in HashMap.
HashMap is a brand-new class in JDK 1.2.
HashMap is a quick and fast algorithm.
This code can be used to make the HashMap synchronized : Map m = Collections.synchronizedMap(HashMap);
Iterator traverses the HashMap.
HashMap’s iterator is fail-safe.
AbstractMap is inherited by HashMap.


Read More: https://codesnipeet.com/what-are-the-differences-between-hashmap-and-hashtable-in-java/
How to cancel all subscriptions and asynchronous tasks in a useEffect cleanup function?

Tags: react, javascript, webdev, programming
Published: 2021-07-20 17:53:16

Even if the component is unmounted, useEffect will try to maintain contact with your data-fetching function. Because this is an anti-pattern that exposes your app to memory leaks, canceling your useEffect subscription optimizes your app.

When you don’t use you useEffect hook effectively and dont perform any cleanup technique then the error looks like in the console:

React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing….

To fix this problem, given below some example code, that might be help:

Example Code 1(Solution):
In the simple implementation example below, you’d use a flag (isSubscribed) to determine when to cancel your subscription. At the end of the effect, you’d make a call to clean up.

useEffect(() => {
  // set a clean up flag
  let isSubscribed = true;

  // Try to communicate with sever API
  fetch(SERVER_URI)
    .then(response => response.json())
    .then(data => isSubscribed ? setState(prevState => ({
      ...prevState, user: data
    })) : null)
    .catch(error => {
      if (isSubscribed) {
        setState(prevState => ({
          ...prevState,
          error
        }));
      }
    })

  // cancel subscription to useEffect
  return () => (isSubscribed = false)
}, []);

Example Code 2(Solution):
Read more: https://codesnipeet.com/how-to-cancel-all-subscriptions-and-asynchronous-tasks-in-a-useeffect-cleanup-function/
Run copied CLI commands with a leading “$” sign safer
Tags: bash, tutorial
Published: 2021-07-20 10:02:00

---
title: Run copied CLI commands with a leading “$” sign safer
published: true
date: 2021-07-20 10:00:00 UTC
tags: bash, tutorial
canonical_url: http://blog.gnclmorais.com/run-copied-cli-commands-with-a-leading-dollar-sign-safer
---

I recently came across [Stefan’s tip](https://www.stefanjudis.com/blog/how-to-run-commands-with-a-leading-usd-sign) on how to run copied commands with a leading dollar sign and I thought it was a great idea! However, this heads-up caught my eye:

> Use at your own risk. 🤓 Before implementing any functionality that makes running copied code easier, be aware that the internet’s a bad place. There’s always a chance that a command has malicious intent or [even includes hidden commands](http://thejh.net/misc/website-terminal-copy-paste).

This made me think: maybe I can build upon his example and add a small layer of protection, to prevent accidental errors when working a bit absentmindedly — we all do that from time to time.

## Ask for confirmation before

Follow his tutorial and, when you get to the part when you’re writing the script, instead of simply executing the commands it gets, ask the user for _explicit_ confirmation before proceeding. Use this as the content of your `$` executable:

```bash
#!/bin/zsh
read -p "Are you sure you? [y/N]: " -n 1 -r
echo # move to a new line
if [[$REPLY =~ ^[Yy]$ ]]
then
    exec "$@"
fi
```

I [used someone’s else suggestion](https://stackoverflow.com/a/1885534/590525) in order to ask for confirmation, but this is a simple way of adding a small confirmation step. Anything that is not `y` or `Y` will skip the execution. This will hopefully help with the [hidden commands issue](http://thejh.net/misc/website-terminal-copy-paste) Stefan made me aware of.
How to send the authorization header using Axios

Tags: react, javascript, programming, webdev
Published: 2021-07-20 17:51:07

Axios is mostly used javascript promise-based HTTP client for end-to-end requesting resources from the serve side application. Generally, in simple application we don’t have to put the header for any get or post request. but most of the cases, security is a big issue sometimes we need to add authorization header to get resources from the server or save resource to the server. That’s why we need to add the headers with request.

So, let’s create a header object according you needs:

const token = "your_token"

let headers = {
        "Content-type": "application/json; charset=UTF-8",
        "Authorization": 'Bearer ' + token
 };

Learn more: https://codesnipeet.com/how-to-send-the-authorization-header-using-axios/
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-07-20 17:40:57

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## A Different Way of Looking at Interviews

Interviews are high-pressure and often make us feel that we're lacking power in the situation. But as @kethmars explains, it's crucial to interview a prospective employer just as they're interviewing you. Find out how to do it in this article. 

{% link https://dev.to/kethmars/how-to-choose-your-future-employer-questions-to-ask-during-your-next-interview-4hof %}

## Commenting on Code v.s. Collaborating on Code

There is a difference! @dangoslen walks us through their thinking about code reviews and how we can approach them in a better way. 

{% link https://dev.to/dangoslen/i-m-changing-how-i-review-code-328g %}


## All About Axios

There are so many advanced Axios features to learn about.  @nilanth is here to help us approach them in a scalable and optimized way. 

{% link https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n %}

## Getting Back in Control of Your Time

@dragosbln tracked every single minute of their time in order to optimize it. A HUGE undertaking and maybe even one that makes some feel defensive of their own productivity tactic. Yet, in the process, they learned a ton that we can take advantage of, just by reading this post!

{% link https://dev.to/dragosbln/i-tracked-every-minute-of-my-time-for-the-last-4-months-here-are-7-totally-unexpected-results-2dna %}

## Being Good at Algorithm Challenges Doesn't Mean You're Good at Building Things

@nicolealdurien is full of incredible takes for both developer-focused hiring managers _and_ developers in this post. Don't sleep on their insights and sound advice!

{% link https://dev.to/nicolealdurien/job-searches-and-career-changes-when-you-re-not-the-default-4c4p %}

## Go Ahead and Follow Along

@aurelievache has kicked off a new series devoted to Go and understanding it with approachable examples. Super helpful!

{% link https://dev.to/aurelievache/learning-go-by-examples-introduction-448n %}

## Diving Into Type System

@kalashin1 is a huge fan of TypeScript. In this article, they go over one of their favorite TS features: Type System.

{% link https://dev.to/kalashin1/a-type-system-3a8j %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_