teleren/devto huggingface dataset:
ES6 way of coding Javascript!
Tags: javascript, webdev, beginners, programming
Published: 2021-12-27 09:40:46

JavaScript is an incredibly fast and efficient programming language to use for a variety of purposes. Today Every type of software uses JavaScript, including Web apps, 3D games, robots, IoT devices, etc.  
Back in 2007, Jeff Atwood (founder of StackOverflow), made a case that JavaScript would become a bigger part of web development. Atwood coined the term  `Atwood’s Law`, which states:


> Any application that can be written in JavaScript, will eventually be written in JavaScript.

It’s now ten years later, and Atwood’s statement is truer than ever. JavaScript is continuing to gain more and more adoption. The “next generation” of Javascript is something known as ES6. ES6 is so far the best and biggest update javascript has ever received. It streamlined the javascript development and almost killed jQuery's career. ES6 mainly allows you to write less code and do more.
In this post, I'll go over the six major differences between ES6 and ES5. Let’s take a look.

## Arrow function: write less do more
**ES5 WAY**

```
function add(a,b){ 
	return a+b
}
console.log(add(2,3))
//OUTPUT: 5
``` 
**ES6 WAY**
```
const add = (a,b)=> a+b
console.log(add(2,3))
//OUTPUT: 5
``` 
<hr>
## Use const if you don't want to reassign the 'element variable by mistake. 
**ES5 WAY**

```
var element = document.getElementById('myForm')
``` 

**ES6 WAY**

```
const element= document.getElementById('myForm')
``` 
 <hr>

## De-structuring: write less do more!
**ES5 WAY**

```
var user = {
	name "Ritesh Kumar", 
	username: "@0xRitesh"
}
const name = user.name
const username user.username
``` 

**ES6 WAY**

```
var user = {
	name "Ritesh Kumar".
	username: "@0xRitesh"
}
const {name,username} = user
``` 
 <hr>
## Template Literals
**ES5 WAY**

```
function getUsertMessage(name,country){
	console.log('Hi, my name is '+ name+ ',and I am from '+ country)
}
logUserMessage('Ritesh, 'India')
``` 
 
**ES6 WAY**
```
function logUserMessage(name,country){
	console.log(`Hi, my name is ${name}, and I am from ${country}`)
}
logUserMessage('Ritesh', 'India')
``` 
 <hr>
## improve Object Literals
**ES5 WAY**

```
function getUserObj ( name, age, address){
	return {
		name: name,
		age: age,
		address: address
		}
}
``` 

**ES6 WAY**

```
function getUserObj ( name, age, address){
	return {
		name,
		age,
		address
		}
}
``` 
 <hr>
## Default Parameters

**ES5 WAY**

```
function ES5Fun( username, platform){
	username, = username, || '@wordssaysalot';
	platform = platform || 'Dev';
}
``` 
**ES6 WAY**

```
function ES6Fun( username = '@wordssaysalot' , platform= 'Dev') {
}
``` 
### Conclusion
Thanks for reading the article! I hope you guys found this article useful, and I hope I was able to introduce you to some of the ES6 features. 





****
I finally learnt some Rust
Tags: rust, beginners, programming, career
Published: 2021-12-27 09:27:47

Yay.... I can now make proper functional programs in Rust. 

I found Rust to be a joy to work with... Cargo and the way the language is structured was amazing. Much more challenging and interesting than learning Go for that matter.

## What's your opinion on Rust

I feel it is way more better and productive once you get the hang of it :smiley:

Comment your opinion below too
Higher Order Functions in JS
Tags: javascript, html, css, webdev
Published: 2021-12-27 09:23:46

**Write a snippet of functions to calculate area, circumference and diameter of the circle.**

- **without higher order function (repetitive code):**

```javascript
const radius = [2,3,4,5,6,7];
let output = [];

const area = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
  	output.push(Math.PI*radius[i]*radius[i]); //Area = PI*radius*radius
  }
  return output;
}
const circumference = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
  	output.push(2*Math.PI*radius[i]);
  }
  return output;
}
const diameter = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
  	output.push(2*radius[i]);
  }
  return output;
}
console.log(area(radius));
console.log(circumference(radius));
console.log(diameter(radius));
```
If we saw the above code, area, circumference and diameter functions are almost same except that maths formula. so we make that as a generalized function using higher order functions.

---

- **with higher order function (function that takes another functions as an argument or returns a function)**

```javascript
const radius = [2,3,4,5,6,7];
let output = [];

const area = function(value) {
	return Math.PI*value*value;
}

const circumference = function(value) {
	return 2*Math.PI*value;
}

const diameter = function(value) {
	return 2*value;
}

const calculate = function(radius, logic) {
	output = [];
  for(i=0;i<radius.length;i++){
  	output.push(logic(radius[i]));
  }
  return output;
}

console.log(calculate(radius, area));
console.log(calculate(radius, circumference));
console.log(calculate(radius, diameter));
```
Here we are creating one generalized function , that will accept another function as a input parameter (Higher Order function).

---

- **with ES6 feature Map.**
In the Above section , we created higher order function to perform the operation, and we can achieve the same thing by using the exisiting javascript function called "Map".

```javascript
const radius = [2,3,4,5,6,7];

const area = function(value) {
	return Math.PI*value*value;
}

const circumference = function(value) {
	return 2*Math.PI*value;
}

const diameter = function(value) {
	return 2*value;
}

console.log(radius.map(diameter))
```

---

- **Cloning of Map function using higher order function. (Map Polyfill).**
Like Map, we can also create our own prototypes and operations using higher order functions like below.

```javascript
const radius = [2,3,4,5,6,7];
let output = [];

const area = function(value) {
	return Math.PI*value*value;
}

const circumference = function(value) {
	return 2*Math.PI*value;
}

const diameter = function(value) {
	return 2*value;
}

Array.prototype.calculate = function(logic) {
	output = [];
  for(i=0;i<this.length;i++){
  	output.push(logic(this[i]));
  }
  return output;
}

console.log(radius.map(area))  //default js function
console.log(radius.calculate(area)); //cloned the map function
```
🚀 Angular 13 Starter with ESLint, Material, Transloco, Jest, TestCafe, Docker & Prettier 🚀
Published: 2021-12-27 09:15:25

Angular 13 Starter with Material, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier

**Project**

You can find the project here:

https://github.com/wlucha/angular-starter

## Features

✅ [Angular 13](https://angular.io/)  
✅ [Angular Material](https://material.angular.io/)  
✅ Unit Testing with [Jest](https://jestjs.io/)  
✅ End-to-End Testing with [TestCafé](https://testcafe.io/)  
✅ Internationalization with [Transloco](https://github.com/ngneat/transloco)  
✅ Auto documentation with [Compodoc](https://compodoc.app/)  
✅ Analyse your project with [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)  
✅ [Docker](https://www.docker.com/)  
✅ [ESLint](https://eslint.org/)  
✅ [Prettier](https://prettier.io/)  
✅ [Commit Linting](https://github.com/conventional-changelog/commitlint)

## Demo

[![StackBlitz Demo](https://user-images.githubusercontent.com/7531596/83507657-2424e180-a4c9-11ea-8e4f-b3f8e7d6b4c5.png)](https://stackblitz.com/github/wlucha/angular-starter)

## Install / Development

```bash
# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200
```

## Docker Deployment

```bash
# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter
```

## Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

## Commands

- `npm run start` - start the app
- `npm run lint` - lint the project
- `npm run test` - run unit tests
- `npm run build` - build the project
- `npm run build:prod` - build the project in production mode
- `npm run build:prod:stats` - build the project in product mode with stats
- `npm run analyse` - analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run changelog` - generate changelog
- `npm run prettier` - format the whole project
Advent of Code 2021 - Day 24
Published: 2021-12-27 09:09:02

---
title: Advent of Code 2021 - Day 24
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/pKWM9CtgX2M/maxresdefault.jpg
---

{% youtube pKWM9CtgX2M %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Remove console logs in production build (Angular 2.x)
Tags: angular, javascript, typescript
Published: 2021-12-27 09:01:43

### Problem / Goal

For debugging, most of us often write console.log to enable us to analyze problems. 
But, it is might be dangerous because there is a risk of accidentally outputting confidential information (api key, password, etc).
Therefor, we don't want to output console.log in production.

### Solution Overview

Override console.log method on a function that does nothing.
(There is also another way that use webpack settings.)

### Concrete Steps

Override console.log method on a function that does nothing.

app/main.ts
```
if (environment.production) {
  window.console.log = () => {};
}
```
Creating variables in JavaScript
Tags: javascript, webdev
Published: 2021-12-27 08:36:18

---
title: Creating variables in JavaScript
published: true
description: Knowing when to use var, let and const.
tags: js, JavaScript, webdev
//cover_image: https://direct_url_to_image.jpg
---

Variables: what are variables? A variable can be thought of as a container that stores items. 

There are two types of variables, you have one which you can reassign values to and another which you can't reassign values to.

Let's see the different variables we have with examples and how they function.

*1. var*
✅ how to use: `var name = "Lucas"`
✅ function: it is a "reassignable" variable. Meaning you can do something like this in your code
`var name = 'Lucas'`
`var name = 'Samuel'`
The result is that the variable *name* will hold the last assigned item, meaning it will hold *Samuel*.

*2. let*
✅ how to use: `let name = "Lucas"`
✅ function: it is a "reassignable" variable. Meaning you can do something like this in your code
`let name = 'Lucas'`
`let name = 'Samuel'`
The result is that the variable *name* will hold the last assigned item, meaning it will hold *Samuel*.

*3. const*
✅ how to use: `const name = "Lucas"`
✅ function: it is a "non reassignable" variable. Meaning you *cannot* do something like this in your code
`const name = 'Lucas'`
`const name = 'Samuel'`
An error will occur that you cannot reassign values it items to name.

There's a catch to **var** tho' and that's the fact that it's no longer in use from the previous es6.

Why? I don't know as well 🤷, just kidding. Read it up from here to learn more. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
What is JWT Authentication?
Published: 2021-12-27 08:29:35


What is JWT Authentication?

JWT is a mechanism for checking the owner of some JSON data. This is an encrypted and secure string for the URL that can hold an unlimited amount of data (as opposed to a cookie) and is encrypted.
 When a server receives a JWT,The existing data is trusted because it is signed by the source. JWT.
It is important to note that JWT guarantees data ownership, but not encryption. The JSON data you store in a JWT can be intercepted by anyone who intercepts the token.
See, because it is only serial and not encrypted.For this reason, using HTTPS with JWTs (and HTTPS in general) is highly recommended.
We will not go into details about how JWTs are produced. See "Basic JWT Authentication with Vue.js and Node.js" for an up-to-date view of how JWT authentication works.

Attacks Against JWT?
JWT supports the use of the "none" algorithm for cases where the JWT claim has already been verified by other tools. This algorithm enables the server to use asynchronous JWT. Export

It is worth noting that the "None" algorithm together with the "HMAC SHA-256 (HS256)" are the only two algorithms implemented according to the JWT standard. (1)

Attackers could use this feature to set their token algorithm to "none" and provide an empty signature to trick the server into accepting it as a valid token. However, most modern implementations now have an additional security check that rejects tokens set by the "none" algorithm when a secret key is used to export them.
JS : Guess Output & why ?
Tags: javascript, webdev, beginners, programming
Published: 2021-12-27 08:22:19


![Tricky JavaScript Interview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxk3ax0xq5a77i3cyp8w.jpg)

What is the output of above code & why ?

Check video for detailed explanation:
{%youtube xfH1A4IuZRk%}
5 Tools That Saves Development Time
Tags: webdev, productivity, beginners, programming
Published: 2021-12-27 08:02:03

If you want to be a good developer, you should be aware about time. Developers use many time saving methods or tools. In this article I will share 5 tools that will help you in **saving development time**. 

## MockFlow

**MockFlow** is a cloud based mockup design software. Web designers and software developers use this for product design and layout design. You can also say this is a **alternative of Figma**. 

MockFlow provides you easy user interface to design your product. You don't have to spend time in learning this tool like photoshop. 

## JSON Formatter

**JSON Formatter** is an online JSON validator or formatter tool. You can easily validate your JSON code and also format it. It reduce much time in writing JSON. 

## FingerprintJS

**FingerprintJS** is a very useful Javascript library which is use to implement fingerprint validator in website. You can easily make fingerprint validation in your application with just some line of codes. 

## CSS Color Picker

**CSS Color picker** is a chrome extension. This helps in getting color code of any element in browser just clicking the mouse pointer in the element. Using this tools you can get color code of any design. 

## Flaticon

**Flaticon** provides you free custom icons that you can use in your website. The icons are very attractive. 

These were the **5 time saving development tools**. Hope the tools will also help you in saving time.
4 Simple Steps to Make Your Website Accessible
Tags: javascript, webdev, programming, technology
Published: 2021-12-27 07:57:03

![a11y - Accessiblity](https://miro.medium.com/max/1400/1*nyXM1fezkK-0J8kwH-x_OQ.png)

**Accessibility** (often abbreviated to A11y) in the world wide web means to provide a universally accessible global information system for everyone. Tim Berners-Lee designed it to work for all people, whatever their hardware, software, language, location, or ability.



In this article, I will show you 4 simple steps to improve the accessibility of your website.


{% medium https://medium.com/@mariusbongarts11/4-simple-steps-to-make-your-website-accessible-a29ec305da1e %}
Easy to Undestand Service-Oriented Programming
Published: 2021-12-27 07:53:29

A Service Oriented Architecture (SOA) is not a utility or any software. It is an architecture for developing distributed and interoperable applications.
 
A distributed application has parts of the application running in multiple computer nodes. In other words an application (desktop or web) running in one system in one location and also uses some functionalities or business logic from another system located somewhere in the world.

Benefits
It is mainly for scalability and better performance.

An application wants to use some of the services provided by for other enterprises.
An interoperable application means one application developed in one language, for example Java can communicate with an other application done in another technology such as .Net.
 
Some important characteristics of Service Oriented Architecture
SOA services should be independent of other services.
Altering a service should not affect the client calling the service.

Services should be self-contained.

Services should be able to define themselves (in the Web Service Description Languatge (WSDL))
Services should be able to describe what they do. It should be able to tell the client what all of the operations it does, what are all the data types it uses and what kind of value it will return.

Services should be published into a location (directory) where anyone can search for it.

SOA applications communicate with each other sending and receiving messages.

A client application sends a message to invoke a method of the service.
Standard messages make them platform-independent.
(Here the standard doesn't mean standard across Microsoft, it means across all programming languages and technologies.)

Services should support reliable messaging.
That means there should be a guarantee that a request that reaches the correct destination will get the correct response.
ASP.Net Web services and Windows Communication Foundation (WCF) provide Microsoft's implementation of SOA.
How to download Instagram Reels Online?!
Tags: instagram, beginners, tutorial
Published: 2021-12-27 07:34:39

**So what are Instagram reels?
**
Instagram reels are a content style that allows producers to make short, compelling videos. They were first introduced in August of 2020. The time duration of Instagram reels was initially 15 seconds long but was later changed to 60 seconds to make it easier for content makers.

**How to download Instagram reels online.**

It's free, fast and it's here to make your Instagram reels downloads easier. You can now download all your favorites Instagram reels in HD and that too with no limits, and there's not even the need to register or sign up; just straight-up download and go.

**How to download Instagram Reels**

1. Open Instagram reels and proceed to go to the Instagram reel you wish to download
2. Tap on the three dots on the right end corner and copy the link of the reel you want to download
3. Then go on to the [Instagram reels downloader](https://reelit.io/) website and paste the link and proceed to download it that easy

**Features**

- Option to link your Instagram account in the app to save time in terms of app switching.
- No watermarks on downloaded videos perfect for content creators.
- Free Instagram Reels Video Downloader without the need of signing up.
- Simple Instagram Reels video download that to in HD resolutions.
- Share your favorite reels with friends and family.
Collection of hacking tools for termux. 
Tags: termux, linux, ubuntu
Published: 2021-12-27 07:28:14

**https://github.com/topics/termux-hacking**

![Termux hacking tools Github page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fm7rr6p5m7emn6f06pn.jpg)
A11y tips: how to manage focus inside modals
Tags: a11y, tips, html
Published: 2021-12-27 07:27:27

To handle the focus in a modal in an accessible way, **the same steps must always be followed**, no matter how complex the modal that we are showing is:

1. We **show the modal** when the user activates the button that opens it
2. We immediately **bring the focus** to the button to close the modal, or in case to its first `<input>` if it had them. **Never** to an element other than these two.
3. From there, the user has to be able to **handle the focus in a circular way through the elements of the modal** without leaving them. Once you reach the last element, you have to start over with the first one, the focus cannot go to elements that are behind the modal since the user would lose the reference of where they are.
4. To **exit the modal**, the user can click the close button or the Esc key, which we will make it work by hiding the modal.
5. Once closed, the **focus must return to the place where the user left the navigation** before displaying the modal, that is, to the button that opened it.

On the W3C website there are [examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html) of how to do this, and [Scott O'Hara](https://www.scottohara.me/) has written a very good [article](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/) that explains in detail how to make modals accessible.
How to Change the Order in Grid?
Published: 2021-12-27 07:15:41

We can change the grid order using simple css3 keyword order .check the code snippet below.
```<!DOCTYPE html>
<html>
<head>
<title>Change Grid Order</title>
<style>
.order-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3%;
}
.order-grid .section-one,.order-grid .section-two{
    width:100%;
    font-size:20px;
    font-weight:600;
    text-align:center;
    color:#ffffff;
    padding:50px 0px;
}
.order-grid .section-one{
    background: brown;
    order:2;
}
.order-grid .section-two{
    background: red;
    order:1;
}
</style>
</head>
<body>

<div class="order-grid">
  <div class="section-one">grid one</div>
  <div class="section-two">grid two</div>
</div>

</body>
</html>`