teleren/devto huggingface dataset:
A11y for everyone: Building inclusive and accessible web applications
Tags: mscreate, frontend, devrel, events
Published: 2020-07-29 01:42:06

--- 
title:  A11y for everyone: Building inclusive and accessible web applications
published: true 
description: A11y for everyone: Building inclusive and accessible web applications
tags: mscreate, frontend, devrel, events
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7wi6jpkhs6g3n70ddqh6.png

--- 
<hr /> 
---

> Want to do more with static web apps?

> _Join us at [CREATE:Frontend](https://aka.ms/createfrontend) on Jul 29 (8:30am PDT / 11:30am EDT) for a 4-hr free virtual event with 8 talks and a [90-minute hands-on workshop](https://dev.to/azure/free-workshop-on-azure-static-web-apps-1341) to jumpstart your static web apps journey_

> Bookmark [our anchor post](https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e) and do check back for updates

---
**Accessibility matters.** Yet, so often, not enough people pay attention to it, or choose to pay attention to its principles. 

But, really, why is this topic is so important? What is accessibility? Broadly stated, it’s intentionally designing the world to include everyone, regardless of disability. It’s working so others have access to more of life. How do we then do this well, how do we do this right? 

## Join our Speakers 

I'm inviting our speakers from _MSCreate:Frontend_ to have conversations with you here on _Dev.to_ on what accessibility means to you, and businesses, and share use cases of accessible web sites. At _MSCreate:Frontend_  we'll also be showing you how you can make websites more accessible. 
{% user lauragift21 %}
{% user jenlooper %}

 
--- 

## MSCreate: Frontend

If you want to learn more about the _MSCreate:Frontend_ event then check out this post with links to all the talks and speakers. And bookmark it to be notified of links to recordings and resources after the end!

{% link https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e %}

Want to learn more about Azure Static Web Apps?
 - [Check out the docs](https://aka.ms/swadocs)
 - [Try out a learning path](https://aka.ms/swalearn)
 - [Watch talks on Channel 9](https://aka.ms/mscreate-ch9)
Rails Beginner's Backend  Setup
Tags: rails, beginners, tutorial, ruby
Published: 2020-07-29 01:28:01

I like to make cheat sheets from time to time to use as a reference while I'm learning the various connections within a framework. Here's one I made while learning the very basics of Ruby on Rails. It helped me through bootcamp and will be enough to get a barebones backend up and running. 

[![rubyrails7-02.jpg](https://i.postimg.cc/gjmpFgdC/rubyrails7-02.jpg)](https://postimg.cc/FdW80gYp)

Edited: Added better quality link
Setup Bitbucket for Mac OS
Tags: git, ssh, bitbucket, macos
Published: 2020-07-29 01:22:19

Once you have created new repository on your bitbucket account and you're trying to clone project on local machine and you end up with error saying,

> Please make sure you have the correct access rights and the repository exists. Permission denied (publickey). fatal: Could not read from remote repository.

**We all hate errors**

##So follow these steps to get started quickly

* Go to terminal
* `cd ~/.ssh/`
* `ssh-keygen -C username@domain.com` and hit **return**
* Enter unique file name for that keypair
* Now you should be able to check if it's successful or not by `ls ~/.ssh/` , try to look for unique keypair name that you entered while creating
* Now we don't want to enter password every time we're trying to access that keypair so add them into ssh agent by `eval <acute-key> ssh-agent <acute-key> `
* `ssh-add --apple-use-keychain ~/.ssh/<private_key_file>`
* Also we want to keep this change every time computer restarts to add it into ssh config file `nano ~/.ssh/config` then add following and exit
```
Host *
  UseKeychain yes
``` 
* Now we have to add public key to our bitbucket account so first copy the public key with
` pbcopy < ~/.ssh/<unique-key>.pub`
So, for Mac OS users you have copied it into your clipboard.
* Now add that into your bitbucket ssh key and hit save

**Done !!**
**Happy Programing :)**
Hover using Reference affect both child in react components
Tags: react, question
Published: 2020-07-29 01:15:33

---
title: Hover using Reference affect both child in react components
published: true
description: Hover not working as per what I expected.
tags: react, Question
---

Hi guys, What I'm trying to do here

When I hover the Child Component, 
The background change (That's a good start).

But both of the Child Component background colours change. Should be just box that I hover over.

Any help would be very much appreciated.
Thank you
This is an URL to refer to my code
https://codesandbox.io/s/material-demo-sck7e?fontsize=14&hidenavigation=1&theme=dark
Host static website in S3 with NameCheap DNS
Tags: 100daysofcode, cloudresumechallenge, cloud
Published: 2020-07-29 00:19:03

In this tutorial I'll host a static website in an S3 bucket (created in previous tutorial) and buying a domain name from `namecheap.com`.

# What You Need
**Amazon S3**
* Have an S3 bucket with the same name as your domain name
* Upload your website's code
* Allow public access
* Add a policy to enable S3 GetObject
* Enable static website hosting

**Domain Name Service provider**
* www.namecheap.com
* In DNS Zone settings, we need to add www to subdomain and the S3 endpoint in hostname for CNAME records.

#  Step 1: Create 2 S3 buckets

Create two S3 buckets to host your files for your website

1. Bucket1: example.com
2. Bucket2: www.example.com

#  Step 2: Configuring buckets

Bucket example.com must have public read access. 
Edit public access with following options checked.
* Block public access to bucket and objects granted through new access control lists (ACLs)
* Block public access to bucket and objects granted through any access control lists (ACLs)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0n0hsym5axo0n1dq92f2.png)

#  Step 3: Configuring buckets: Bucket Policy
In the Permissions section, choose Bucket Policy. and the following policy.

`{
    "Version": "2012-10-17",
    "Id": "Policy1548223592786",
    "Statement": [
        {
            "Sid": "Stmt1548223591553",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*"
        }
    ]
}`

#  Step 4: Static website hosting

* In the Properties, choose Static website hosting.
* Choose Use this bucket to host a website.
* For Index document, type index.html.
* Hit Save.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70770tvhagj05zlawmf4.png)

#  Step 5: Redirect bucket traffic. (www.example.com bucket)
* We will host our content out of the root domain bucket (example.com), and we will redirect requests for www.example.com to the root domain bucket.
* In the Properties, choose Static website hosting.
* Choose Redirect requests.
* For Target bucket or domain, type host bucket name i.e. `example.com`.
* For protocol, type http.
* Hit Save.

Now we can store content in either bucket. 

#  Step 6: Upload and verify.

* We will upload out website files to example.com bucket. 
* In the Properties, choose Static website hosting.
* Click on the link next to Endpoint. 
* you should see your website running in S3.

#  Step 7: Set advanced DNS in namecheap to navigate
In the namecheap advanced DNS configuration, we need to add the following settings:

1. CNAME Record    @    example.com.s3-our-endpoint-in-aws.
2. CNAME Record   www   www.example.com.s3-domain.com.s3-our-endpoint-in-aws.

And you're done! Note that it might take a while for your new settings take effect.

Congratulations! on your new website hosted statically on Amazon S3 bucket.

Thank you for reading! 😊
The flatMap() array method in JavaScript
Tags: javascript
Published: 2020-07-29 00:00:00

---
  title: The flatMap() array method in JavaScript
  published: true
  tags: JavaScript
  date: Wed Jul 29 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/flatmap-array-method-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-9ed05056a5e52220f095d194b64f8329.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/flatmap-array-method-javascript)
  
The `flatMap()` is an array method and is used to do some operation before converting a multidimementional array into a single array.

Suppose we have an array of sentences like this,

```javascript
// an array of sentences
let arr = [
  "Hello, How are you?",
  "Harry is a good man",
  "Hey, John",
  "I'm Fine",
];
```

What if we want to split all the words by spaces?

We can do that using the `map()` and `split()` methods like this.

```javascript
// an array of sentences
let arr = [
  "Hello, How are you?",
  "Harry is a good man",
  "Hey, John",
  "I'm Fine",
];

// loop through every elements using map
// and then split each array element by space
let newArr = arr.map((element) => {
  return element.split(" ");
});

console.log(newArr);
```

Now if we look into the array, we can see something like this,

```
[
    ["Hello,", "How", "are", "you?"],
    ["Harry", "is", "a", "good", "man"],
    ["Hey,", "John"],
    ["I'am", "Fine"]
]
```

Here we have all the words in a nested array. But we never wanted our words to be in a nested array.
The `split()` method inside the `map()` method always returns every element inside a nested array, That's a problem for us.

That's where the `flatMap()` method comes to help us.

The `flatMap()` method first maps through every element in an array and then converts every nested array elements into a single non-dimensional array.

Let's try what we did before with the `flatMap()` array method.

```javascript
// an array of sentences
let arr = [
  "Hello, How are you?",
  "Harry is a good man",
  "Hey, John",
  "I'm Fine",
];

// flatMap() method first maps through every element
// and then converts nested array into single array
let newArr = arr.flatMap((element) => {
  return element.split(" ");
});

console.log(newArr);
```

This is the output,

```
// everything in a single array
[
    "Hello,",
     "How",
     "are",
     "you?",
     "Harry",
     "is",
    "a",
    "good",
    "man",
    "Hey,",
    "John",
    "I'am",
    "Fine"
]
```

The `flatMap()` method accepts a callback function and passes the current element which is getting looped.

This code is more elegant and readable than our previous code.

The `flatMap()` does the job of mapping through the array first and then converts a nested array into a single array.

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

---
Snapshot testing using Nightwatch and mocha
Tags: qa, nightwatch, snapshottesting
Published: 2020-09-03 04:56:09

---
title: Snapshot testing using Nightwatch and mocha
published: true
date: 2020-07-29 00:00:00 UTC
tags: QA,Nightwatch,snapshottesting
canonical_url: https://www.loginradius.com/engineering/blog/snapshot-testing-using-nightwatch-and-mocha/
---

Snapshot testing is one of many different testing tools, which compares the previous and current snapshot. Unlike TDD, snapshot testing relies on the fact that your component renders correctly already.

   
[Read On](https://www.loginradius.com/engineering/blog/snapshot-testing-using-nightwatch-and-mocha/)
Git Bash on Windows: adding a permanent alias
Tags: bash, git
Published: 2020-07-28 23:43:03

If you are using Git Bash on Windows and you're used to Linux bash commands, chances are that you'd like to add aliases that help making your jobs easier.

These two are my favorite aliases:

```bash
$ alias cll='clear; ls -lah'
$ alias countFiles='ls -1 | wc -l'
```

## How to add an alias permanently for the Git Bash

1. To add an alias permanently, you'd need to edit the file
/C/Program Files/Git/etc/profile.d/aliases.sh .

2. Run your text editor as an administrator and open that file.

3. Add your alias and save the file.

4. Open the Git Bash. Execute 'alias', and you're done. Have fun.

```bash
$ alias
alias cll='clear; ls -lah'
alias countFiles='ls -1 | wc -l'
alias ll='ls -lah'
alias ls='ls -F --color=auto --show-control-chars'
```
Which should you learn first? HTML, CSS or JavaScript? None.
Tags: html, css, javascript, webdev
Published: 2020-07-28 23:22:53

By none, I mean...
#...learn them at the same time, not one after another.

##To accomplish this, it helps to have small challenges, like this one:
[Re-create this MacOS calendar app icon](https://rmion.com/bootcamp)

{% codepen https://codepen.io/beginnr/pen/PoPedRv %}

##Steps you could follow
1. How might you mark-up a month and date?
2. How might you style your new page elements, even at a basic level: fonts, colors, size, background colors, and page centering?
3. How might you dynamically generate the month and date?
4. How might you optimize your CSS, refactor your JavaScript, and account for accessibility by using more semantic HTML elements?

###If you feel stuck, use this game I made to learn all three languages each day, increasing your difficulty as you grow your skills:
[Fix a function!](http://freecodegame.com)
La mejor manera de manejar la versión tu código
Published: 2020-07-28 23:22:43

Al desarrollar cualquier cosa que involucre código debes llevar un registro de las versiones que vas lanzando continuamente, esto sirve para dos cosas:

1- Que tus usuarios sepan qué versión tienen y si tienen la más actualizada.

2- Que los desarrolladores puedan encontrar errores más fácilmente al saber en qué versión se presentan.

Hay varias formas de llevar registro de la versión, la que yo uso y recomiendo es MAJOR.MINOR.PATCH, se ve así: 1.6.4, a continuación te explico en qué consiste cada parte:

MAJOR: Mejoras y cambios mayores, esta versión puede empezar en 0 si tu proyecto está en Beta (por ejemplo 0.12.1) y solo se actualiza si sufrió un gran cambio, por ejemplo si cambiaste totalmente la interfaz, si ahora hace algo diferente a lo que hacía antes o incluso si hiciste un proyecto nuevo para reemplazar al anterior. Cambiar MAJOR es muy poco frecuente, si observas muchos productos con años en el mercado apenas van en versiones 2.0 o 3.0. También vale la pena actualizar MAJOR cuando se hacen cambios en la API que ya no serán compatibles con versiones anteriores.

MINOR: Mejoras y cambios menores, lo más común es cuando agregas una nueva característica a tu aplicación, también podría ser cuando mejoras considerablemente una pantalla, lo normal es que este número cambie con cierta frecuencia (Una o dos veces por mes), más al principio del proyecto que vas a toda velocidad, ya después se estabiliza un poco.

PATCH: Corrección de bugs y arreglos menores, por ejemplo cuando arreglas un bug que hace que tu app truene, cuando cambias cosas pequeñas de UI, cuando mejoras cosas no visuales, como algo que solo mejora un poco el rendimiento al descargar datos. Este cambiará cada vez que subas una actualización.

Mi principal razón de preferir 3 números en la versión (2.0.0) en vez de solo dos números (2.0) es porque cuando tenemos dos números no hay forma de diferenciar entre bugs y características nuevas, 4 ya me parecen demasiados.

Como te estarás preguntando, esto de las versiones tiene algo de feeling, podría ser que lo que para algunos es un PATCH para otros sea un MINOR. Para termina te dejo algunos consejos personales sobre esto del versionamiento:

Cuando MAJOR se actualiza, MINOR y PATCH se reinician, cuando MINOR se actualiza, PATCH se reinicia, ejemplos: 1.3.10 -> 2.0.0, 1.80.17 -> 1.81.0

No hay un límite de número, puedes tener 1.9999.1726, aunque lo normal es que el PATCH no suba mucho para cuando ya necesites el siguiente MINOR, pero que el número no te quite el sueño.

No te estreses mucho decidiendo si la siguiente versión es PATCH o MINOR, lo más importante es tener versiones diferentes que se puedan distinguir más que llevar un conteo exacto.

¿Qué te parece esta forma de versionar? ¿Estás o no de acuerdo?
Learning Queues
Tags: beginners, javascript, computerscience, algorithms
Published: 2020-07-19 01:21:03

In this week's post I'll be going over queues. Similar to stacks, which we [discussed last week](https://dev.to/123jackcole/learning-the-stack-6n5), queues are a linear data structure, meaning the data elements are arranged sequentially. However, queues operate on the first in first out principle, or FIFO.

![Queue Diagram from Wikipedia](https://dev-to-uploads.s3.amazonaws.com/i/7bu1rzyameflcbu8hla4.png)

The term queue originates from the British term for a waiting line. Queues require two main methods, enqueue and dequeue. Enqueue adds an element to the end of the queue. And dequeue removes and element from from the beginning of the queue. In Javascript this can easily be done by representing the queue as an array. We can then use the push method to add the the end of the queue, and shift to remove from the beginning of the queue.

![Basic queue](https://dev-to-uploads.s3.amazonaws.com/i/9x0wnhjcimqg1e3oyg4w.PNG)

Next, I'd like to do a little callback to [my post on linked lists ](https://dev.to/123jackcole/learning-linked-lists-6bf) and look at how we can implement a queue using a linked list.

Instead of having basic elements like our first example this queue will have nodes. These nodes will contain the data we want, as well as a pointer to the next node in the queue. 

To implement the queue would first need some constructors. One for our nodes and another for our queue.

![Node and Queue Constructors](https://dev-to-uploads.s3.amazonaws.com/i/buarizm6bnb4870acjvq.PNG)

Next, we will need to implement our enqueue function. The concept is still the same, but we need to tweak it to conform to the linked list structure. We'll begin by creating a node using the data we need. Then we make our node the head if there is no current head, otherwise we'll add a pointer to the node at the end of our queue, then add our new node to the end of the queue.

![Enqueue](https://dev-to-uploads.s3.amazonaws.com/i/fm67m1r54185wv6v82sz.PNG)

For our dequeue method, we save the data we want from the first node in our queue, our head, then we replace that head with the next node in the queue. 

![Dequeue](https://dev-to-uploads.s3.amazonaws.com/i/cgxk2wwwlgaysmvgw69n.PNG)

As always you can check out the code from this post at my [Github](https://github.com/123JackCole/Queues).
Android interview: ANR
Tags: android, interview, theory, questions
Published: 2020-07-28 23:16:50

In the last days, my company gives me the task to do some short and simple interviews to applicants for the Android position.

One of the questions is about ANR. This question is one of the main ways to know if a developer knows about Android and sometimes is one of the questions in the top companies.

# **But, what is an ANR?**
An ANR or Application Not Responding, is a simple error caused by the block of the UI Thread.

If the UI Thread is blocked for 5 seconds or more, we are going to get this issue and a Dialog will be showed asking if we want to wait or close the app.

This happens because maybe we have a long-performance task and Android can't draw in the UI Thread or can't receive any event from the user.

The cause of this could be a lot of things, but if you understand what is an ANR, you will be able to find the issue that is causing it. It could be a long task trying to do download something or maybe a large image trying to get showed.

*If any of my post have mistakes, I am open to any feedback. Sometimes I could do bad explanation, so any comment is welcome. Together we can create a better guide to study and learn.*
Starting smaller to build bigger
Tags: productivity, beginners
Published: 2020-07-28 23:15:03

This is the workflow I used to build my first web app that I had a lot of success with. Originally posted on my blog at: https://nickdorrell.com/starting-smaller 

Whether you're building:

    -An audience
    -A product
    -Or just about anything

...it can be pretty daunting, especially if you're doing something new. So how do you start and complete these objectives?

I like to start by breaking things down - I'm not a fan of overly detailed plans because: a) things change b) it becomes its own form of procrastination.

When I built Tascflow, I had three different lists:

    1. What am I working on today?
    2. What are the steps I need to take on the first task
    3. What are my "must complete" tasks for the entire project

The purpose of one is so I have clear objectives that I can guarantee get done that day.

The purpose of two is to get my ass in gear. Starting with the smallest possible thing helps me start and creates enough momentum that I don't need to repeat this step.

The third list helps me track progress on the overall project and helps prevent the project scope from growing. I will remove tasks from this list as they are completed or not necessary for launch.

This is one of my Tascflow todos in Notepad++:

![alt text](https://i.imgur.com/nSjxzl8.png "Yep, it's real")


The ease of opening a notepad file made it easy to do this on a daily basis. I could add little things as I noticed them, and come back to them later.

What I really like about this concept is that it applies to the micro (daily) and macro (entire development) of a project.

I've been launching regularly since 2017 and this project by far was my most consistent output and came damn close to my 1 month launch goal (33 days)

If you enjoyed this blog, it would make my day if you joined [the newsletter!](https://emailoctopus.com/lists/10885008-b642-11ea-a3d0-06b4694bee2a/forms/subscribe) New posts straight to your inbox every Friday.
Test models for SwiftUI previews
Tags: swift, ios
Published: 2020-07-28 21:49:58

In my spare time, I’m currently building an iOS app for a video on demand platform I operate, [Your Fight Site VOD][1].
I’m using SwiftUI and absolutely _love_ its declarative way of building iOS apps.

Having worked a lot with component-based JavaScript frameworks such as [Vue.js][2] I’m accustomed to small, discreet components that can be reused and composed to make up larger views. In this vein, my app has a `VideoListItem` view. This view represents a single row in a list of videos:

```swift
struct VideoListView: View {
  var video: Video

  var body: some View {
    NavigationLink(destination: VideoDetailsView()) {
      Text(video.name)
        .fontWeight(.bold)
    }
  }
}
```

The above is a simplified version of the actual view, but it shows the video details, and when tapped navigates the user to the view the details of that particular video. The important thing to note is that the view requires a well-formed `Video` struct instance.

SwiftUI also offers the ability to “preview” views directly in Xcode without the need for using the device simulator or running on a physical device. However, if the view you’re previewing requires data, so in turn do the previews.

Instead of retrieving data over the network for the purpose of previews, I’ve taken to defining static `test` methods in my structs:

```swift
struct Video: Identifiable {
  let id: UUID
  let name: String
}

extension Video {
  static func test() -> Video {
    self.init(id: UUID(), name: "Test Video")
  }
}
```

I can then use these `test` methods to populate previews with well-defined instances of my application’s models:

```swift
struct VideoListView_Previews: PreviewProvider {
  static var previews: some View {
    VideoListView(video: .test())
  }
}
```

Swift is pretty clever in that it infers the `video` argument takes a `Video` instance, so therefore I can call methods (such as `test`) using the shorthand notation seen above. Nice!

[1]: https://vod.yourfightsite.com/
[2]: https//vuejs.org/