teleren/devto huggingface dataset:
Big Text !== Heading
Tags: a11y, html
Published: 2020-06-22 00:35:26

---
title: Big Text !== Heading
published: true
description: It's important to create a logical heading hierarchy on pages so users of assistive tech like screen readers can more easily understand and navigate around (screen readers can jump between headings) the page. Big text doesn't always mean the text should be a heading:
tags: a11y, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/we7fik4tdjjmsef5romc.png
---

It's important to create a logical heading hierarchy on pages so users of assistive tech like screen readers can more easily understand and navigate around (screen readers can jump between headings) the page. Big text doesn't always mean the text should be a heading:

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


Avoid associating the size of text with its status as a heading.

Spin up a screen reader like VoiceOver, Jaws or NVDA and see for yourself if the headings actually make sense. 

In VoiceOver, a screen reader user will be presented with this in the rotor headings menu
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g33lj64lcs5nbfth8kzj.png)

Check out [Screen Reader Basics: VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms) from the A11ycasts series on YouTube. It's great!

"heading level 2 Public Playlists" is announced right after "heading level 1 PROFILE" making it clear that Public Playlists is a subsection on the profile page.

One of the best things you can do imo as developer getting into accessibility is learning how people actually user assistive technologies like screen readers. This helps you answer a lot of your own question around accessibility.

Big text !== heading
Using MVC With Unity
Tags: unity3d, gamedev, csharp, beginners
Published: 2020-06-21 23:56:34

Quick warning- I tend to use framework and design pattern interchangeably.

Back in 2016 I remember seeing a lot of job openings seeking Unity developers with working knowledge of MVC framework. At the time it didn't make too much sense to me considering Unity primarily supports the Component framework. Thus I set out on a mission to create a project using the MVC framework exclusively.

**TL;DR - it didn't end too well.**
Here's what I learned along the way!

###What actually is MVC?
MVC stands for Model-View-Controller.
Each of these are specific functionalities for working with data.
The model stores your data and manipulates it.
The view displays your data, generally you want to keep your view dumb (that is to day, it shouldn't store or manipulate any data).
The controller will fire off commands to your model to do stuff with your data.

###Don't try to use one framework for your entire project
Much like how you'll often hear people telling you to not over use Singletons you shouldn't try to over use MVC. All frameworks have their specific functions and support specific features.

###A good time to use MVC
I found that in instances of storing, manipulating, and displaying data (like keeping track of score, multiple choice answers, instructions, etc.) MVC is super useful.
I was able to decouple the logic behind multiple choice questions, which is super helpful when it's a last minute add from the UX team and nobody knows how it will look, or how the user will input the data, or what any of the questions or answers are.

###A not so good time to use MVC
When you're trying to manipulate game elements like tiles in a match 3, or like 3D objects in a VR application, or storing state in your experience.
However, MVC is really good for manipulating chess or checker pieces on a game board.

###Conclusion
MVC is a tool first and foremost, like all other frameworks and design patterns you should pick and choose which works best with what you are trying to do. If you find that using a specific style of coding is making your application harder to maintain, debug, and update then maybe consider not using it as much (or at all).

Are there any frameworks or design patterns you enjoy using?
Backup and Restore Visual Studio Code Extensions from the Command Line
Tags: productivity, vscode, tools, tutorial
Published: 2020-06-22 04:11:47

---
title: Backup and Restore Visual Studio Code Extensions from the Command Line
published: true
date: 2020-06-22 00:00:00 UTC
tags: productivity, vscode, tools, tutorial
canonical_url: https://elliotdenolf.com/posts/backup-restore-vs-code-extensions
---

> Originally posted on my blog at [elliotdenolf.com](https://elliotdenolf.com/posts/backup-restore-vs-code-extensions)

I maintain my own [dotfiles](https://github.com/denolfe/dotfiles) to be able to have identical setups between my work and personal machines. My Visual Studio Code configuration is one piece of those. While there is an [extension](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) out there that does extension syncing, I didn't find them ideal for my use-case as it also did a settings sync.

## Backup Extensions

Let's output our list of extensions to a file.

```bash
> code --list-extensions > extensions.txt
```

The file content will be similar to the following:

```text
donjayamanne.githistory
eamodio.gitlens
johnpapa.vscode-peacock
ms-azuretools.vscode-docker
yzhang.markdown-all-in-one
```

## Restore Extensions

Once we have our file listing our extensions, we can restore our extensions.

```bash
> cat extensions.txt | xargs -L 1 code --install-extension
```

This line performs the `code --install-extension` command for every line in your file.

## Use with a Script

To make these commands easier to use, we can use a script that wraps the `code` command. The following script will add `code save-ext` and `code install-ext` as commands. Any other standard command will simply be passed through.

```bash
#!/usr/bin/env bash

if command -v code >/dev/null 2>&1; then
  code() {
    case "$1" in
    save-ext)
      echo "Saving code extensions..."
      code --list-extensions > ~/.dotfiles/vscode/extensions.txt
      ;;
    install-ext)
      echo "Installing code extensions..."
      cat ~/.dotfiles/vscode/extensions.txt | xargs -L 1 code --install-extension
      ;;
    *)
      command code "$@"
      ;;
    esac
  }
fi
```

To use this script, modify the `extensions.txt` file path and also add the script to your PATH.

- `code save-ext` will output your extensions to file
- `code install-ext` will install them from file

I'd recommend saving this file to your personal dotfiles to share between your dev environments. [Here are mine](https://github.com/denolfe/dotfiles).

### Links

- [My Dotfiles](https://github.com/denolfe/dotfiles)
- [VS Code override script](https://github.com/denolfe/dotfiles/blob/master/functions/code.override.sh)
- [VS Code Docs: Install Extensions](https://vscode-docs.readthedocs.io/en/stable/extensions/install-extension/)
How to get all property names from an object in JavaScript?
Tags: javascript
Published: 2020-06-22 00:00:00

---
  title: How to get all property names from an object in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Jun 22 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-all-properties-from-object-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-c7b9483c992a494c4888af8562ca14d1.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-all-properties-from-object-javascript)
  
Let's consider an object called `John`.

```javascript
const John = {
  name: "John Doe",
  age: 32,
  bio: "John Doe is a great guy",
};
```

We can get all the properties in this object using the `Object.getOwnPropertyNames()` method.

```javascript
const John = {
  name: "John Doe",
  age: 32,
  bio: "John Doe is a great guy",
};

// get all property names
const arr = Object.getOwnPropertyNames(John);

/*

Result:
-------

["name", "age", "bio"]

*/
```

- The `Object.getOwnPropertyNames()` method accepts the object to get all the property names as the parameter.
- It returns an array containing the property names.

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

---
Introduction of Idx-Auto-Tester
Tags: automation, idxautotester
Published: 2020-09-10 05:45:35

---
title: Introduction of Idx-Auto-Tester
published: true
date: 2020-06-22 00:00:00 UTC
tags: Automation,IdxAutoTester
canonical_url: https://www.loginradius.com/engineering/blog/introduction-of-Idx-Auto-Tester/
---

Idx-Auto-Tester is LoginRadius Identify Experience Automation Framework which refers to IEF Automation, is an open-source automation framework built-in Nightwatch| Node.js tool with delivering all the standard authentication cases of LoginRadius Identity Experience.This…

   
[Read On](https://www.loginradius.com/engineering/blog/introduction-of-Idx-Auto-Tester/)
CI/CD to AWS with GitHub Actions
Tags: aws, github, kotlin, showdev
Published: 2020-06-21 23:18:06

This article is part of the **Twitter bot with Kotlin in AWS series** showing how [I created a Twitter bot for Vue 3 updates](https://dev.to/gautemeekolsen/twitter-bot-vue-3-updates-j5b). But this article works as an independent article on how to automatically deploy to AWS from your GitHub repository.

Now let's wrap it up by setting up continuous build and deploy of our Kotlin Lambda function to AWS. This will make sure the Lambda function is always up to date with the code in the master branch, no need to manually deploy your changes.

## AWS IAM User
First, we need an [IAM user](https://docs.aws.amazon.com/IAM/latest/UserGuide/getting-started_create-admin-group.html). If you already have one, you can use the existing Access key ID and Secret access secret key. Or you can just click the "Create access key" button and generate new tokens.

## GitHub Actions
We need to add two secrets to the GitHub repository. Go to your repository, click the "Settings" tab, and then "Secrets" in the side menu. Add the secrets AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY from the IAM user.

Luckily the GitHub Actions run on machines with a lot of [software pre-installed](https://github.com/actions/virtual-environments/blob/master/images/linux/Ubuntu1804-README.md), which includes the AWS CLI and Gradle.

Now head to "Actions" in the tab menu. Click "Set up this workflow" from any template. Add this yml code, that will setup Gradle, configure the AWS CLI, build the project, and update the function.
```yml
name: CI/CD

on:
  push:
    branches: [ master ]

jobs:
  CI-CD:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Gradle setup
      run: gradle wrapper
    - name: Build & Deploy
      run: |
        aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws configure set default.region eu-west-1
        ./gradlew build
        aws lambda update-function-code --function-name twitter-bot-vue-3 --zip-file fileb://build/libs/twitter-bot-vue-3.jar
```

## Wrap Up
That completes our series on how to create your own Twitter bot running in AWS. Check out the Twitter account [@vue_3](https://twitter.com/vue_3) for the completed product. Also you can find all the code on [GitHub](https://github.com/gautemo/twitter-bot-vue-3).
99/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-06-21 23:08:53

day 99/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn Methode channel , is to akses code from java or kotlin
https://github.com/triyono777/100-days-of-code/blob/master/log.md
What the Fetch - Failed HTTP responses
Tags: javascript, webdev, codenewbie, 100daysofcode
Published: 2020-06-21 22:54:27

So you think you know Fetch? Let's start with a little quiz...
{% twitter 1274682427663933441 %}

Well done to those that guessed `Okay...`. If you didn't, don't feel bad, I too assumed that the code logs `Error...`. I then did some digging around and understood why it doesn't.

##So, why does Fetch do this?
As per the docs on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful){:target="_blank"},
> A `fetch()` promise will reject with a `TypeError` when a network error is encountered or CORS is misconfigured on the server-side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example.

<small>(Or in our case a 500)</small>

So, how do we handle this? The good news is, we can simply check if the `Response.ok()` property has a value of true.

![](https://pbs.twimg.com/media/EbETy6JUEAAH_OX?format=jpg&name=medium){:target="_blank"}

So now the code logs `Error: Internal Server Error`, which is what you probably wanted in the first place.

##Final Thoughts
Many of you, including myself, expected `Error...` to be logged from the very first snippet. This expectation probably comes from regularly using a library like Axios which handles the failed HTTP status code for you as seen in this [CodeSandox](https://codesandbox.io/s/what-the-fetch-failed-http-responses-t5e9q?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark){:target="_blank"}. 

Let me know if you were caught out by this in the discussion section below. Ciao.

P.S. This is my first blog post so I would appreciate any feedback 😁
Make use of your Github Actions minutes for security checking Rails PRs
Tags: rails, security, github
Published: 2020-06-21 22:54:21

If you're using Github to host your Rails projects, you might be interested in a quick and easy way to add security checks to your PRs, via Github Actions.

Github Actions, if you're not familiar with them, are like little CI tasks that can run on certain events that happen to your repos. They run in the cloud and let you do things like test or lint your code.

This post will show you how to integrate the [Brakeman gem](https://github.com/presidentbeef/brakeman) into your Github project as a Github Action that only checks the code changed in a created (or updated) PR. Here is the result:

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

Then, when you create a PR, you can see right away if you are possibly introducing any security vulnerabilities.

The first think you'll need to do is go to the Actions tab on your Github repo. The tab looks like this:

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

On that tab, click the link that says "set up the workflow yourself". That should bring you to a screen where you are now editing a `main.yml` file. 

This file describes what the Github Action should do. If you'd like to understand the syntax (so you can add other tasks if you want), you can head over to [the docs](https://help.github.com/en/actions).

For now, replace the contents of the file with the contents of [this gist](https://gist.github.com/mehagar/011a260e5c4cd34794128f27d59a008e).

Once you've done that, head over to the right side of the page and click the "Start Commit" button. I like to create a pull request to see if it actually worked or not on my branch, but you don't have to.

That's it! Now, whenever you make a PR, you should see a section at the bottom of the page that shows the status of your new Github Action, like this:

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

The yellow circle means it's still in progress. You can click "Details" if you want to know more about what it's doing. 

Thanks for reading. Let me know in the comments how you're using Github Actions.
Best Bus Booking System
Tags: webdev, design, javascript, dotnet
Published: 2020-06-20 09:15:39

A bus booking system is an automated system for purchasing bus tickets online. Take your own brand website, mobile apps (Android and iOS), and allow your clients to book tickets for different routes and destinations. This arrangement records the details of the passengers according to the schedule of each bus. You can also upload seat availability, set routes, and interactive seat maps to help customers choose the seats they want. With the Bus Ticket Booking System, you can save your tickets anytime anywhere with the help of the Internet. You can check the bus availability of your clients' decisions and enable them to book their preferred seats.

Product Highlights

•	Own Branded Mobile responsive online bus booking system website
•	Own Branded User App (Android & iOS)
•	Preferred Payment method integration
•	Email & SMS notifications
•	Agent Ticketing
•	Flexible Admin Panel

Simple Online Bus Ticket Booking System

•	The bus ticket booking takes a few convenient steps - choose trip date, start/destination point, add personal details.
•	They can overview all on hold seats at a look and choose seats easily.
•	Customers are requested to select the desired payment approach (if payments are enabled).
•	As quickly as the booking is completed, customers obtain a digital ticket they can print at home.
Flexible Admin Panel- bus booking system
•	Add a number of fleet types, assign seat layout, view seat template.
•	View seat lists including available/booked/sold seats and detailed departure wise passenger lists.
•	Add a couple of routes with a board, drop point and intermediate give up locations.
•	Review and control daily departure schedules, check the quantity of tickets sold.
•	Add departure wise cost with driver, guide, assistant, fuel, etc.

Easy Manageable Counter/Agent System

•	Secure counter user registration & login.
•	View available buses
•	View and select the seat.
•	Book/Sale the ticket via choosing the route, date of trip and client details
•	Option to print departure wise passengers list

Own Branded User App (Android & IOS)

•	Add a number of fleet types, assign seat layout, view seat template.
•	Add a couple of routes with a board, drop point and intermediate give up locations.
•	Review and control daily departure schedules, check the quantity of tickets sold.
•	View seat lists including available/booked/sold seats and detailed departure wise passenger lists.
•	Add departure wise cost with a driver, guide, assistant, fuel, etc.

Codeware Limited will give you the highest quality bus booking system. If you want to help your passengers make their journey easier by using the bus ticketing system, contact us today for the smart bus ticketing system.
Skewness
Tags: beginners
Published: 2020-06-21 22:37:39

## Skewness Definition

Skewness refers to the abnormality of data in a certain direction. If the tail tapers on the right side, then the distribution is said to have positive skew. If the tail tapers on the left side, then it is said to have a negative skew. 


<img src = "https://dev-to-uploads.s3.amazonaws.com/i/gc9eh5454rhc8v9caenb.png" alt="drawing" width="400"/>

## Skewness Example

If the distribution is positively skewed, then the mean of the data will be larger than the median of it. This is because there are larger values on the max extreme causing the positive skew. One example of this is the US income disparity. This graph below represents the 2015 median and mean household income.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ueg5b59f6nnan0ztshx5.png" alt="drawing" width="500"/>

The mean income is over $20,000 more than the median income due to the extremely high earning millionaires and billionaires. Below is a table of the top percent earning buckets causing the skew. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/83bljs1x10a4xcuneyp9.png" alt="drawing" width="250"/>

## Measuring Skewness

There are two different ways to measure skewness. The two values used to measure it are called Pearson's coefficients. 

<img src= "https://dev-to-uploads.s3.amazonaws.com/i/5zu20ojcmfrw4u6u5uom.png" alt="drawing" width="350"/>

The first one is used if the distribution has a clear mode. If not, the second one is used.

Information and pics gotten from: 
https://www.investopedia.com/personal-finance/how-much-income-puts-you-top-1-5-10/
https://www.investopedia.com/terms/s/skewness.asp
https://fas.org/sgp/crs/misc/R44705.pdf
https://en.wikipedia.org/wiki/Skewness
MTJ Wk 5
Published: 2020-06-21 22:34:11

Happy Father's Day
21/06/20

This week has been hectic but I managed to work on tech related things:

1. Finished the Game Programming Basics course on FutureLearn. It was just introductory but it definitely sparked an interest.
2. Tried out some C programming. 
3. Tried to code a discord bot and saw a bit of how JavaScript works.

Next week I'll be focusing only on my studies so I think it'll be best to leave this blog until I've done more.

~Rae.xoxo
#020 Docker cleaning up
Tags: docker, devops, tutorial
Published: 2020-06-21 22:18:45

# Introduction

this is part 20 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# Cleaning

![ps-a](https://dev-to-uploads.s3.amazonaws.com/i/xgetswxp4mgajnk5axri.png)

Let's see how many stopped containers we have by using
```bash
docker ps -a
```
We have a lot!

what about images?

![images](https://dev-to-uploads.s3.amazonaws.com/i/ws0yvepgsjzzf9ovgb70.png)

```bash
docker image ls
```
we see a lot of <none> basically those none are failed building images and they are not being used by anything , they called dangling images.

to see how much docker using space we run

![system-df](https://dev-to-uploads.s3.amazonaws.com/i/ddtpcfy8dizzgqilzwna.png)

```bash
docker system df
```
we can see it's taking 6.1GB lot of space

let's clean all images that are not used by containers and dangling , we run 

![prune](https://dev-to-uploads.s3.amazonaws.com/i/qyq4votgjt77xyd7znnf.png)

```bash
docker system prune
```
some useful tags here :
-f used to force , so we don't get a prompt to delete (good for automation tools)
-a used to delete every things including used images.

I am going to use 
![prune-f](https://dev-to-uploads.s3.amazonaws.com/i/jfkhfkiidfnzxnlofnk9.png)
```bash
docker system prune -f
```
we see it delete lot of things , cool!

![image-ls](https://dev-to-uploads.s3.amazonaws.com/i/blhjkiwte3sk86v572ah.png)
```bash
docker ps -a
docker image ls
```

as we see we have no containers anymore all stopped
and all our <none> images gone!

if you need only to stop containers .

![docker-stop](https://dev-to-uploads.s3.amazonaws.com/i/4cmykn0kl5ds435r8va1.png)

```bash
docker container stop $(docker container ls -a -q)
```