teleren/devto huggingface dataset:
JWT explained as Formulas
Tags: javascript, jamstack, security, webdev
Published: 2021-12-27 18:28:05

Okay, so this is a rather different way of learning about JWTs. But I think, if done right it can teach more effectively than a long blog post filled with thousands of words. So, let's begin.

#What are JWTs?
JWT or JSON Web Token is structured token format of encoding JSON data in a way that can be cryptographically verified.

#JWT Structure
Example JWT:
`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
`

Notice the dots? If you "split" at dots you get 3 strings that make up the JWT.
So, `JWT = headerString.payloadString.signatureString`
(or signature, doesn't matter in this case)

##What are these strings?
`headerString = base64(header)`
`payloadString = base64(payload)`

They are just base64 encodings for header & payload (header is a JSON object with metadata (type of JWT) & payload is another object with user-defined data with some standard keys).

Note: Here base64() implies base64URL(), assume them as functions that encode the object to base64 form, the later encodes it in URL-friendly manner. Similar assumptions ahead.

To keep things less repetitive ahead, let:
`headerPayloadString = headerString.payloadString` 

We can form JWTs in different ways, for educational purpose lets look at a simple one (but not used IRL as much).

The signatureString/signature is discussed in following approach sections (sha256Signature, rsa256Signature).

#The SHA256-HMAC Approach
SHA is a hashing algorithm. As mentioned this approach not used IRL as much given it's drawbacks discussed later.
##Creating the JWT (signing)
`sha256Signature = sha256(headerPayloadString , 'sharedSecret')`
`sha256JWT = headerPayloadString.sha256Signature`

##Verifying the JWT
1. Split `headerPayloadString` & `signatureString` (input signature)
2. Calculate signature as `sha256(headerPayloadString , 'sharedSecret')`
3. If both the input signature and calculated signature match, the JWT is valid.

###Why do we not use this?
Notice how we need to use the same `sharedSecret` or "key" for creating/signing & verifying? That means if we use an authentication server we have to share the same key between the server and the consumer/application. This leads to security concerns.

#The RSA-SHA approach
RSA is public key encryption algorithm, consisting of 2 keys a private and public key (pair).
##Creating the JWT (signing)
`sha256XSignature = sha256(headerPayloadString)`
We don't use a key here (non-HMAC way)
`rsa256Signature = rsa256Encrypt(sha256XSignature, 'privateKey')`
`rsaJWT = headerPayloadString.rsa256Signature`
##Verifying the JWT
1. Take the headerPayloadString, and hash everything with SHA-256
2. Decrypt (rsa256Decrypt) the JWT using the public key, and obtain the rsa256Signature
3. Compare the received JWT signature with the calculated one, if they match, the JWT is valid.

#That Sums it Up
Voila! You now know the basic mechanics of JWTs. I recommended researching a bit more to supplement this post with. Hope, this helped clear some doubts.
Understand to Easy React Component Lifecycle

Tags: react, javascript
Published: 2021-12-27 18:25:42

React component lifecycle going through three ways which are mounting, updating, unmounting.
Mounting:- it represents the rendering of the  component in the DOM node.
Updating:- it represents the re-rendering of the  component in the DOM node.
Unmounting:- it represents the removal of the React component.

React life-cycle Methods
render()
it renders components in the virtual DOM instance. it happens when mounting & updating of the component in the DOM tree. A render() method has to be pure with no side-effects. c
componentDidMount()
It is a good place to call API endpoints and to do network requests. In our clock component, setInterval function can be set here to update the state (current date and time) for every second. it Invoked after the initial mounting of the component in the DOM tree.

componentDidUpdate()
looks like Similar to ComponentDidMount() but invoked during the update phase. Network request can be done during this phase but only when there is difference in component’s current and previous properties.

componentWillUnmount()
it is invoked after the component is unmounted from the DOM. This is the good place to clean up the object. In our clock example, we can stop updating the date and time in this phase.

shouldComponentUpdate()
it is invoked during the update phase. Used to specify whether the component should update or not. If it returns false, then the update will not happen.

getDerivedStateFromProps ()
it is invoked during both initial and update phases and just before the render() method. It returns the new state object. It is rarely used where the changes in properties result in state change. It is mostly used in animation contexts where the various states of the component are needed to do smooth animation.

getSnapshotBeforeUpdate()
it is invoked just before the rendered content is committed to the DOM tree. It is mainly used to get some information about the new content. The data returned by this method will be passed to componentDidUpdate() method. For example, it is used to maintain the user’s scroll position in the newly generated content. It returns the user's scroll position. This scroll position is used by componentDidUpdate() to set the scroll position of the output in the actual DOM.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlfhzpb00luojrgqv8bg.jpg)
All ES6 features
Published: 2021-12-27 18:13:56



ES6 : all features :
The let keyword
The const keyword
Arrow Functions
For/of
Map Objects
Set Objects
Classes
Promises
Symbol
Default Parameters
Function Rest Parameter
String.includes()
String.startsWith()
String.endsWith()
Array.from()
Array keys()
Array find()
Array findIndex()
New Maths Methods
New Number Properties
New Number Methods
New Global Methods
Iterables Object.entries
JavaScript Modules
Arrow Function: 
Arrow function come in es6 version of javascript.Arrow functions were introduced in ES6.Arrow functions allow us to write shorter function syntax:
For Example: 
In pass we were write Function
function (a,b){
const result=a*b;
return result
}
And now it’s become so much easier.we declare it like below.
let myFunction = (a, b) => a * b;
tailwind css | grid | justify-self-{start,center,end,stretch} | self-{start,center,end,stretch}
Tags: tailwindcss, webdev, beginners, tutorial
Published: 2021-12-27 18:03:11

tailwind css | grid | justify-self-{start,center,end,stretch} | self-{start,center,end,stretch}
https://youtu.be/0d8__VaVZxE

If you liked our content help us by subscribing on the channel and leaving a nice comment
New Elixir Book: "100 Elixir Tips"
Tags: elixir, tips, beginners
Published: 2021-12-27 17:59:34

---
title: New Elixir Book: "100 Elixir Tips"
published: true
description: 100 curated Elixir tips
tags: elixir, tips, beginners
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://blog.miguelcoba.com/new-elixir-book-100-elixir-tips
---

For the last three months, I have been publishing a daily Elixir tip on my Twitter account.

As the Twitter search interface isn't good I decided to compile them in an ebook so that you can download it and have it as a reference that is easy to search.

It contains:

- 75 tips already published in my Twitter account
- 25 **new, unpublished** tips

All of them were carefully curated, edited, and selected by me to show the expressive power and elegance of the Elixir programming language.

The best part: it is **FREE**!!!

You can get it in pre-order now and you'll receive it in your email inbox on January 5th, 2022.

## Pre-order it now here 👇🏼

[100 Elixir Tips](https://store.miguelcoba.com/l/100elixirtips)

## About

I'm [Miguel Cobá](https://miguelcoba.com). I write about Elixir, Elm, Software Development, and eBook writing.

- Follow me on [Twitter](https://twitter.com/MiguelCoba_)
- Subscribe to my [newsletter](https://newsletter.miguelcoba.com)
- Read all my articles on my [blog](https://blog.miguelcoba.com)
- Get my books:
    - [100 Elixir Tips](https://store.miguelcoba.com/l/100elixirtips) [FREE]
    - [Deploying Elixir](https://store.miguelcoba.com/l/deployingelixir) [FREE]
    - [Deploying Elixir: Advanced Topics](https://store.miguelcoba.com/l/advancedtopics)
    - [eBook Writing Workflow for Developers](https://store.miguelcoba.com/l/ebookwriting)
SpecFlow - Selenium - ChromeDriver code base
Tags: dotnet, csharp, specflow, testing
Published: 2021-12-27 17:53:00

*Disclaimer: This is a starting point to build on top of the existing code base, implementing BDD E2E automation testing. As stated in the README, the setup contains minimal configuration (not using Context Injection). English is not my first language, so my apologies for any mistakes.*

***Brief***
When it comes to automated testing (BDD, E2E etc) in .NET, the most popular framework at the moment is [SpecFlow](https://specflow.org/), combined with Selenium and among the several webdrivers, ChromeDriver is the one used the most.

In [this](https://github.com/giorgosde/BDDSpecFlowSample) repo I created a code base, adding a few Scenarios, to showcase the above setup, by testing an existing application. I hope this will be useful to anyone starting messing around with BDD on .NET and will save you time from creating the setup from scratch.

If you would like to support this effort to provide tutorials and demo code, [please like us on Facebook](https://www.facebook.com/FullStackCodr) or even <a href="https://www.buymeacoffee.com/fullstackcodr">☕ Buy Me A Coffee
What's your go to Rust resources?
Tags: rust, discuss
Published: 2021-12-27 17:34:30

We're getting close to the new year and I've heard from several folks in my circles that they're looking to learn Rust.

What's your go to Rust resources? They can be beginner resources, advanced etc. If you have a post on DEV or elsewhere that you think folks might find helpful, include that too!

Drop 'em all in the comments!
SSH and GPG Keys With Gitpod
Published: 2021-12-27 17:29:17

## Get Your **.gitconfig**

1. Your Git Config is located at **~/.gitconfig**
2. Encode the File with base64:

```bash
cat .gitconfig | base64 -w 0
```

3. [Create a variable](https://gitpod.io/variables) on gitpod.

  - Enter Name **GITCONFIG**.
  - Enter output of previous command as Value.

4. Add following task to your **.gitpod.yml**:

```yml
tasks:
    - before: >
          [[ ! -z $GITCONFIG  ]] &&
          echo $GITCONFIG | base64 -d > ~/.gitconfig &&
          chmod 644 ~/.gitconfig
```

## Make commits GPG-signed

1. To sign commit using GPG you must first add GPG keys to Github and/or Gitlab.

  - [For Github](https://docs.github.com/en/authentication/managing-commit-signature-verification)
  - [For Gitlab](https://docs.gitlab.com/ee/user/project/repository/gpg_signed_commits/)

2. Your GPG Keys are stored in **~/.gnupg** folder. Encode this folder with base64.

```bash
tar -czf - ~/.gnupg | base64 -w 0
```

3. [Create a variable](https://gitpod.io/variables) on gitpod.
  - Enter Name **GNUPG**.
  - Enter output of previous command in Value.
4. Add following task to your **.gitpod.yml**:

```yml
tasks:
    - before: >
          [[ ! -z $GNUPG  ]] &&
          cd ~ &&
          rm -rf .gnupg &&
          echo $GNUPG | base64 -d | tar --no-same-owner -xzf -
```

## SSH Github and Gitlab from gitpod

1. Add SSH Keys to Github and/or Gitlab
  - [For Github](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)
  - [For Gitlab](https://docs.gitlab.com/ee/ssh/)
2. Get your SSH Public Key from **id_rsa.pub**:
  - [Create a variable](https://gitpod.io/variables) on gitpod.
  - Enter Name **SSH_PUBLIC_KEY**.
  - Paste the contents of file in Value.
3. Get your SSH Public Key from **id_rsa**:
  - [Create a variable](https://gitpod.io/variables) on gitpod.
  - Enter Name **SSH_PRIVATE_KEY**.
  - Encode the File **id_rsa** with base64.

```bash
cat id_rsa | base64 -w 0
```

  - Paste the output of previous command in Value.

4. Add Following tasks to your **.gitpod.yml**:

```yml
tasks:
    - before: >
          mkdir -p ~/.ssh &&
          [[ ! -z $SSH_PUBLIC_KEY  ]] &&
          echo $SSH_PUBLIC_KEY > ~/.ssh/id_rsa.pub &&
          chmod 644 ~/.ssh/id_rsa.pub &&
          [[ ! -z $SSH_PRIVATE_KEY  ]] &&
          echo $SSH_PRIVATE_KEY | base64 -d > ~/.ssh/id_rsa &&
          chmod 600 ~/.ssh/id_rsa
```

## Thank You!
Tyl Programming Language 2.2 released!
Tags: programming, motivation, beginners, productivity
Published: 2021-12-27 17:17:48

Tyl (pronounced TEEL) is a general-purpose programming language that is intended for intermediate and experienced programmers, as well as, for totally beginners.




Some of Tyl features:

* Clean code
* Symbolized keywords
* Modularity
* Dynamic program structure
* One line statements
* System modules & functions
* Multiple variables declaration
* Automatic type inference
* Internal framework


Tyl Software includes the following modules:

* Tyl Scanner
* Tyl Parser
* Tyl Statement Generator
* Tyl Runtime
* Tyl Launcher
* Tyl Runner
* Web Files Generator & Automation


Details can be found at: 

Tyl Official Website: https://tyl-lang.dev
Facebook: https://www.facebook.com/TylLang (Page: @TylLang)
Wiki: https://en.everybodywiki.com/Tyl_(programming_language)


https://tyl-lang.dev/
Dynamic List: lets make it accessible for the screen reader
Tags: webdev, a11y, javascript
Published: 2021-12-27 17:04:27

_Thank you [francoisaudic](https://dev.to/francoisaudic) for the suggestions._

Are you new to web accessibility? Check my old posts and blog  [https://a11ytips.dev/](a11ytips.dev)

This blog is part of a series of making accessible modules/features:

1. [How to fix the broken experience for Screenreader (Search field)](https://dev.to/hellonehha/how-to-fix-the-broken-experience-for-screenreader-search-field-1d39) 



>> For this blog I am using a Mac system/OS, and voiceover as a screenreader


## Problem

When the user select an option from the drop-down then the related description will get populated on the screen. 

We need to make it accessible for the screen readers. Screen readers must be able to identify the value and its associated description of the user's event.

[Watch this video to see how screenreaders current experience is](https://youtu.be/fRk96qL_aIY)

## What you will learn here

- aria-live

- tabindex 

- Screenreaders


## Lets looks at the code
```HTML
<select aria-label="Please select your prefer cuisine">
   <option>Italy</option>
   <option>India</option>
   <option>America</option>
   <option>UK</option>
   <option>UAE</option>
</select>
      
<div id="message" class="description hide"></div>
```

```JAVASCRIPT
const $ = document;
const SELECT = $.querySelector('select');
const MESSAGE_CONTAINER = $.getElementById('message');

const data = {
  'Italy': 'You can order pasta, pizza, or any bread',
  'India': 'You can order different flat-breads, curry, etc.',
  'America' : 'Fancy some burger?',
  'UK': 'What about fish & chips, or tea?'
}

const onChangeHandler = (e) => {
  const selectedvalue = e.target.value;

    if(data?.[`${selectedvalue}`]){
      MESSAGE_CONTAINER.innerText = data[selectedvalue];
      MESSAGE_CONTAINER.classList.remove('hide');
    }
    else{
      MESSAGE_CONTAINER.innerText = 'Sorry we are not serving this cuisine currently';
    }
}

SELECT.addEventListener('change',onChangeHandler);
```

## Solution

You will be amazed to see how easy it is to fix this issue. We just need a pinch of `aria-live`, `role`, `focus`, and `tabindex`.

We will do a total of 4 changes in the `html`. 

1) `role="alert"`: This will help the assistive tools in identifying that the role of the DIV is 'alert'.

2) `aria-roledescription="notification"`: This will help the assistive tools to give more details of the elements.

3) `aria-live="polite"`: This will help the screenreaders to announce whenever there is any change. Here the change would be the inner text is getting updated.

4) `tabindex=0`: Here once the screenreader will inform about the changes the focus of the keyboard will be a move to the region div.


```HTML

<div id="message" role="alert" aria-roledescription="notification" class="description hide" aria-live="polite" tabindex="0"></div>

```

[Watch this video to see how screenreaders experience is](https://youtu.be/ascG-foRbEs)


If you liked this blog then do drop a like. Do you know I do have a newsletter? Subscribe here: http://tinyletter.com/hellonehha

Happy Learning!!
Send automated emails using n8n.io
Tags: beginners, guide, programming, tutorial
Published: 2021-12-27 16:45:09


## You will need
1 Terminal (ex- Git Bash)
2 Email ID

## Step-By-Step Guide

### Step 1: Install n8n using npm or npx
Install n8n locally on our system, use the below command.
`npm install n8n -g`

Alternative, If we just want to use n8n without downloading to a local machine, can use this command
` npx n8n `

In this guide, we will walk you through using npx.

---
### Step 2:  Copy the URL and paste it in the address bar

![SS1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by60s6xc2czb5ju9q9rz.png)
 

After pasting “http://localhost:5678/” in the address bar, we will get the n8n workflow page.


![SS2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idsd7u3f0adaph6fxile.png)

 ---

Now, we are in n8n workflow, where we can use various types of tools to automate the task. So, over here, we will be using the “send email” node for sending the emails using this workflow.

---

### Step 3: Select the “send email” node
Go to the “+” and in the search box type “send email” then select it. After selecting the “send email” node, the below window will pop up.
![SS3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfeqcodo0yct193cv14e.png)

Note: Before putting the mail address in “from email” make sure that you have the correct and that email account on a service with SMTP support.

If we have a simple email account but in this case, we can also register our email account for SMTP service support by using some SMTP service provider's example elastic email.

---

### Step 4: Create SMTP credentials
Go to Elastic-Email website and create SMTP credentials for your email. After creating, make sure to copy your password.

![SS4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50989jjfqzeekb6y1suq.png)

Now, we are ready to put all the required details for executing our “send email” node.

---

### Step 5: Put all the details for sending the mail from the “send email” node

Click on “SMTP credential” and select the pencil icon and put all the details from the Elasic-Email SMTP details.

![SS5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9in516sa5r2z0tzmm76w.png)
 ---

Note: In “from email” put only that email which you have provided for SMTP service.

1 Fill the “from email” address
2 “To email” address
3 BCC and CSS email (Optional)
4 Subject
5 Text or HTML form message

---

![SS6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzlczy02032fg5rtysuj.png)
  

If all goes fine then the response will be like the below image
![SS7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax9uj2h4ejkv8hqao1x7.png)

---

## Result
Note: Check the spam folder also, if you don’t find it in your inbox.

![SS8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjs9e8hdw4dhjyx81z3l.png)

### *Thanks for follow along, hope it helps!*

[![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cawwn08bx5rh2s9bax2x.png)](https://www.buymeacoffee.com/suchitra)

{% user suchitra_13  %}
My First React Blog
Published: 2021-12-27 16:40:55

JSX:  React works with the help of JSX. Its full meaning is Javascript XML. Jsx allows HTML in javascript and places them in the DOM without any createElement()  and/or appendChild() methods and places them in the DOM without any createElement()  and/or appendChild() methods.

React Component : React components are  independent and reusable. There are two types of components.
Function component 
Example:
function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Class component
Example: 
class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

React Props: Passing value from one component to another component react use props.Props are passed to components via HTML attributes

Virtual dom: Virtual dom is  like a virtual representation of a UI that is kept in memory and syncs with the real Dom using react DOM. Virtual dome is a lightweight javascript representation. when the state of an object changes, virtual dom changes only this state in real DOM.

React Hooks: React hooks are a way to share data from different components. allow function components to have access to state and other React features. There are 9 types of hook react
UseState
UseReducer
UseEffect
UseRef
UseLayoutEffect 
UseContext 
UseImperativeHandle
UseMemo
UseCallback
UseState:  track state in a function component you can use react hook. In an application to track state you can use UseState hook.UseState is the most used hook in javascript.
Example:  import { useState } from "react";
function FavoriteColor() {
  const [color, setColor] = useState("");
}

useEffect: Perform side effects in your components you can use useEffect. If a component value is changed useEffect can easily trace it.
Example : useEffect(() => {
  //Runs only on the first render
}, []);

React Context: managen state globally you can use react context. If you want to use the same type of state in many components you can use react context hook.

React Component Lifecycle:
Every react component have a lifecycle there is 3 stapes 
Mounting: Mounting is putting elements into DOM.
Updating: when the state or props are changed that time component is also changed.
Unmounting: when a component is removed from the DOM
Top 5 Visual Studio Code Keyboard Shortcuts

Tags: vscode, tricks, developer, tips
Published: 2021-12-27 16:34:04

keyboard shortcuts are there to make our life much easier, imagine copying and pasting if we don't have cmd + C and cmd + V (control for windows). VS Code also comes with a lot of helpful shortcuts that can make our work very easy.

here are the Top 5 Visual Studio Code Keyboard Shortcuts that we should know about:

### 1. Command Palette Shortcut:
use shift + cmd + P to open the command palette and you can search for any setting in VS Code that you want to do. command palette is like the brain of VS Code. it is Ctrl+Shift+P for windows.

### 2. Search for Item in File
use Cmd + F to instantly search for the keyword you are looking for inside the VS Code file that you are working on. here you can find and replace the words and there is much more. Ctrl+F for windows.

### 3. Toggle Panel
use Cmd + J to hide or reveal the bottom panel, it is much handy when you are going to use the terminal inside VS Code because with this shortcut you can quickly reveal or hide the terminal window. do give this one a try!

### 4. Find a File
as the name suggests it opens up the search for files, where you can quickly search for files that you are looking for. use Cmd + P for that.

### 5. Global Finder
this is similar to the 3rd one but this works globally, which means that you can search keywords in every file instead of doing it in just one file Shift + Cmd + F

here is the cheat sheet for all the commands discussed above.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06bq5so7ac52vcalde3q.png)

if you like reading this blog feel free to follow me on [Twitter](https://twitter.com/ansubcodes), where I try to simplify Web Development for you.