teleren/devto huggingface dataset:
The fastest HTTP client for node.js by node.js
Tags: http, javascript, module
Published: 2020-09-14 02:36:12

---
title: The fastest HTTP client for node.js by node.js
published: true
description: The node.js team published a new HTTP client for us
tags: 
  - HTTP
  - javascript
  - module
canonical_url: http://tnickel.de/2020/09/15/2020-09-The-fastest-HTTP-client-for-node-js-by-node-js/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pyfo1oox4iw0sth1xefm.jpg
series: node_modules
---
The node.js team has an alternative HTTP client, it can run HTTP requests about 2-3 times faster than the built-in HTTP module. With node.js version 15, the advantage is up to 4 times. This is important because almost every other HTTP client such as `node-fetch`, `request`, or `axios` use the original build-in HTTP client of node.js under the hood. And after the `request` lib is marked deprecated, here might be a good alternative.

The new HTTP client is called [undici](https://npmjs.com/package/undici) and can be found on npm and on GitHub under the node.js organization. 

# What is the difference?
  1. It requires to create a `client` object for every destination server you want to access. Still, the API is clean and you will be quickly able to adopt it. In the constructor, you have some options for concurrency.
  2. The client uses the build-in `net` module instead of the `http` module.
  3. As the HTTP lib, it uses `keepAlive` to use multiple queries over the same TCP connection, but it does not wait for responses to send out more requests. In the documentation they name it pipelining. 

# Afterthoughts
Do you think fastify also became faster than the native http module by using the `net` module? I have to read that code.

Earlier this year I build an experimental web server using the `net` module. you can read my [article](http://tnickel.de/2020/03/29/2020-03-nodejs-http-server-using-the-net-module/).

What are your thoughts on `undici`? Please leave a nice comment.
A New Async Key Value (Local)Storage for Web
Tags: webdev, javascript, html, keyvalue
Published: 2020-09-14 02:33:45

We all know that **WebStorage (LocalStorage / SessionStorage)** API is one of the simple and easy ways to store and retrieve data from the user's browser using JavaScript.

Unfortunately, there is a major drawback in the WebStorage API. As it will store and retrieve data synchronously (**Blocking**).

There is an alternative available to store/retrieve data Asynchronously (**Non-blocking**) using JavaScript. That is **IndexedDB**.

**IndexedDB** is asynchronous, efficient and we can store a lot more than what we can do using LocalStorage API *but its API and syntax are not so simple to use. You have to deal with dozens of callbacks and events.*

But there is a new, easy and efficient to use Async Key-Value Storage(**KV storage**) API proposed by Web Incubator Community Group (WICG) which uses **IndexedDB** as its storage backend. You can find more details about this spec [here](https://github.com/WICG/kv-storage)

The new KV Storage implements a simple LocalSorage like API as shown in below code snippet 

```javascript
(async () => {
  await kvStorage.set("mycat", "Tom");
  console.assert(await kvStorage.get("mycat") === "Tom");

  for await (const [key, value] of kvStorage.entries()) {
    console.log(key, value);
  }
  // Logs "mycat", "Tom"

  await kvStorage.delete("mycat");
  console.assert(await kvStorage.get("mycat") === undefined);
})();
```

As of writing this article work on this specification is suspended, as no browser teams (including the Chromium project, which originated the proposal) are currently indicating interest in implementing it.

However, there is a super-simple-small promise-based [keyval store](https://www.npmjs.com/package/idb-keyval) (Js library) implemented with IndexedDB by [Mozilla](https://github.com/mozilla) which accounts less than 600 bytes. Also, it's tree-shaking friendly.

```javascript
import { set, get } from 'idb-keyval';
 
set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch(err => console.log('It failed!', err));

get('hello').then(val => console.log(val));
```

if you want broader support to cover old implementations of IndexedDB and other edge cases you can use [localForage](https://github.com/localForage/localForage) which accounts for less than 10KB to your total bundle size.


You can use localForage in your next angular project through this npm [@ngx-pwa/local-storage](https://github.com/cyrilletuzi/angular-async-local-storage)

You can also try this new shiny KV Storage using [kv-storage-polyfill](https://github.com/GoogleChromeLabs/kv-storage-polyfill) by [GoogleChromeLabs](https://github.com/GoogleChromeLabs)
The Privacy vs. Safety Battle
Published: 2020-09-14 02:14:32

The debate between whether privacy or safety is more important has been ongoing for decades within our technological revolution. Very recently TechCrunch reported that Albion, a college in Michigan, was using an app to contact trace and track their students. Not only does the app track a student's location 24/7, but Albion made the app mandatory for their students to download. Making this major privacy concern even worse is the fact that the app was not even safe in itself. The app had two major security vulnerabilities, one being that one can access the app's backend servers and the other being that you can infer another student's COVID status. 

I would say that this app is unnecessarily intrusive. While I understand that measures like these are essential to keeping people safe, there becomes a line that you can cross very quickly. Making an app that tracks 24/7 mandatory to download is stepping over that line tenfold. The decision making behind this app just feels sloppy and lazy. What makes Albion think that it is ok to say to a student if I can not use an app to track you 24/7 I will suspend you? If they were to make this app optional and had different options for students who preferred their privacy then this would be a better situation for everyone. 

An app like this would never work at Penn State. A massive privacy breach such as this would get torched by the media at a larger and more known college like PSU. 

The balance between safety and privacy is a very delicate matter. When data security is done right, I believe that safety usually triumphs. Whenever I have to choose between which is more important I think back to a tragedy like 9/11 where if we had less privacy then there would be a chance that the attack would have been prevented. When our data privacy is left in the right hands and is properly secured then it is worth it to save lives. This case with Albion is an outlier, however, as they had multiple security breaches with the app and making it mandatory that your movements are tracked 24/7 is a step too far. 

There are many ethical alternatives that Albion could have done. For instance, they could have implemented randomized tests every day on a small percentage of their student population. If a student is positive then they can just ask the student who they have been in contact with as a very simple solution. 

**Updates to my COVID diagram**
Conceptual:![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i4l9o3x8f1jrzq6kvy0j.png)

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

Video: https://drive.google.com/file/d/1KETdBeLwFl0C7uBgFBdwKauY-Gz2DcjE/view
(screencastify cut off on me at the end of the video so I had to rush the tuple explanation)
Create a simple password strength indicator with JavaScript
Tags: javascript, tutorial, webdev
Published: 2020-09-14 02:07:39

You’ve probably seen many examples of password strength indicators around the web. They let users know the password they’re using is weak and indicate how the strength changes when it’s modified. In this tutorial we’ll be building a password strength indicator like the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4cykbpom8777shj32k6q.gif)

Let’s start with the HTML creating a password input field and a password strength `<div>` that we can style later on to give a visual representation of password strength:

```html
<div id="password">
  <label for="password-input">Password</label>
  <input
    id="password-input"
    name="password-input"
    type="password"          
    required
  />
  <div id="password-strength"><span></span></div> 
</div>
```

To determine the password strength we’ll be using the [zxcvbn](https://github.com/dropbox/zxcvbn) JavaScript library which i’ve included via CDN. It’s also available as a standalone download and NPM package:

```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
```
Now for the JavaScript, first let’s define variables for the password input and password strength:

```javascript
const pwd = document.getElementById("password-input");
const pwdStrength = document.getElementById("password-strength");
```

We’ll then use an event listener to check the password strength each time a character is added or removed from the password input field:

```javascript
pwd.addEventListener("input", function () {
  const pwdVal = pwd.value;
  let result = zxcvbn(pwdVal);  
  pwdStrength.className += "strength-" + result.score;  
});
```

The score returned from `zxcvbn()` is on a scale between 0 and 4. We then add this score as a class on the password strength `<div>` so we can apply different CSS styles based on the score that’s returned.

That’s completes the JavaScript, now for the CSS starting with the password label and input field:

```css
#password {
  width: 250px;
}
#password label {
  display: block;
}
#password-input {
  width: 230px;
  padding: 10px;
  margin: 10px 0 5px 0;
}
```

Now for the strength indicator, it’ll appear as a light grey strip until a user starts entering a password:

```css
#password-strength {
  height: 5px;
  width: 100%;
  display: block;
  background-color: #ccc;
}
#password-strength span {
  display: block;
  height: 5px;
  border-radius: 2px;
  transition: all 500ms ease;
}
```

All that’s left to do is set the color and width based on the strength score:

```css
.strength-0 span {
  background-color: red;
  width: 5%;
}
.strength-1 span {
  background-color: orangered;
  width: 25%;
}
.strength-2 span {
  background-color: orange;
  width: 50%;
}
.strength-3 span {
  background-color: yellowgreen;
  width: 75%;
}
.strength-4 span {
  background-color: green;
  width: 100%;
}
```
COVID-19 App Controls College Campus?
Tags: database, beginners, covid19
Published: 2020-09-14 02:03:26

Out of fear of coronavirus, a small liberal arts school in Michigan (Albion College) has implemented a contact-tracing app called Aura with the purpose of helping the university in handling any potential coronavirus outbreaks on campus. While the hope of the app is to limit the spread of the virus, many vulnerabilities within the app have raised questions about how secure students’ private information like real time location tracking data and test results is.

Albion College has made the use of Aura completely mandatory on their campus as students are expected to use the app or face suspension from the school. Given the difficulties and danger that the virus has caused for many other schools and universities including Penn State, I believe that Albion College has good intentions at heart with the implementation of this app. With that being said, the amount of location data and personal medical data that Aura is storing is extremely risky, and the potential repercussions of data leaks would be disastrous. Overall, I would say this app crosses the line from necessary into intrusive because of the quantity of personal data that it collects.
I do not think the implementation of an app like Aura would go well at a school like Penn State, primarily because of the number of students at the university. While Albion College has only 1,500 students, Penn State Main Campus has nearly 40,000 students. Additionally, the lack of internal testing that was done on the app would make me feel very concerned if Penn State were to force us to use it.

I do not believe that privacy of data is more valuable than the safety of the general public when it comes to the virus, but I don’t think that the way Aura was built or implemented at Albion College will make that strong of a difference in the spread of the virus. There are other methods for contact tracing, such as using Bluetooth signals, that are much less intrusive and more privacy friendly. Additionally, the lack of testing that went into Aura means that the app was not ready to be used when it comes to private health information like virus test results.

The implementation of Aura at Albion College will likely serve as a lesson for future apps that also aim to help with contact-tracing and preventing the spread of the virus, showing that much more testing and oversight is needed to effectively build an app of this kind.

On the topic of apps related to COVID-19, I have embedded my video here where I discuss more in depth the data model for modeling an individual patient's risk level for COVID-19 that I started last week, building a Physical Diagram along with the Conceptual Diagram. This data model could be potentially applied to building an algorithm to calculate an individual's risk level for COVID-19 given all of the attributes discussed in the video. I hope you enjoy!

{% youtube b8-ZU-YrksM %}

Conceptual Diagram:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dreg4kpt4ilagdek8uvj.jpg)

Physical Diagram:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j5i7qhegc7w0m96olu5r.jpg)
Setting Dynamic Variables/Properties in Javascript
Tags: javascript, immutability, vanillajs, todayisearched
Published: 2020-09-14 01:51:52

I became overwhelmed while trying to learn redux, because not only was I learning Redux-- I was also learning higher level concepts of JavaScript intertwined with the Redux module.

Topics included:

how to verbalize a definition for what state really even meant without using the word 'state'
how state differed from props, the concept of immutability
why you would want to maintain immutability when working with state
how to maintain immutability when working with state
how to use switch-cases or to use the spread operator of ESNext
why you would want to 'rewind state'
Lets not forget the topic of today's blog: how to select object properties dynamically such as when setting action payloads to the values of a state slice in Redux Reducers.

This technique saved me a lot of time when creating reusable forms with functions for storing and updating state including handler functions such as a change-handlers or submit-handlers. I found the dynamic bracket notation useful many times when I was using a spread operator to duplicate or make a copy of an object or array
This is a shorthand and I didn't understand how simple it was for the longest time.

I found the following snippet on a Google Search. It cleared things up for me in the flash of another light-bulb moment.
You can also set dynamic properties with the bracket syntax:

var property="test";
var obj={
 [property]=1;
};

console.log(obj.test);//1
It does the same as:

var property="test";
var obj={};
obj[property]=1;
Naming conventions and variable name choices are essential for developers to understand and efficiently work with your codebase. I am torn between assessing the var name choices here as muddy and obscure or expertly declarative.

First we have a string assigned to the var 'property' followed by a JavaScript object {} assigned to the var 'obj'. Our JS object 'obj' contains a single key:value pair or object \n named 'property'.

where the objects sole property is actually assigned to be called by the variable " property ".

What we are creating here is actually the ability to create numerous key value pairs on the object "obj".

by reassigning the value of our var "property", we are able to create a new key:value pair on "obj".

var property="propertyNumber2"
print(obj)
yields {"test":1,"propertyNumber2":1}

example retrieved and reshared from https://riptutorial.com/javascript/example/2321/dynamic---variable-property-names#
How to Edit Styles with Chrome Inspector..And take them with you when you're done 🥃 🎈🧨✨🎉🎊
Tags: webdev, todayilearned, css, html
Published: 2020-09-14 01:44:08

Today I learned how to Use Chrome Editor Like webpack or the hot-reloading feature and to export new styles from chrome inspector.

 - open the inspector with right click >inspect or 
   [ctrl] + [shift] + [i]

 - select elements tab 
(its in the top row of the inspector menu next to console

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dwn91q6zl8nlsi2uj7gf.png)
-click the left square with arrow in it in top left corner of inspector panel
or
[ctrl]+[shift]+[c]

hover over the elements of your html tree structure or hover over the actual page itself

see things highlighting blue or brown and green ?
the brown and green are padding and margin 
the blue is the html element your are now interacting with

 - click the element you need to style

 ### in the styles pane

if there is a current selector imported from your projects stylesheet for this element, it will appear here with the current styles

if there is not a selector present in your imported stylesheet for this element

a new selector for elements of that type will appear for you to add styles

you may use that one or create your own
to create your own click the plus sign in the top right

or doubleclick into the selector name to input the selector specificity you would like to use for your new style rules

now

you're editing an element in the inspector tool.

sweet.

how do you get your new styles out when you are finished.

if you hit refresh or close the window they are gone.

you could copy paste the new styles into a text.file like notepad as you go.
just dont get carried away and forget one.

It'll be really hard to differentiate:

😵 what was there already 😵 ? 
🆕 what you added new 
❌what you removed  
🔨 and what you just tweaked or changed a little bit
  Or will it...

see that plus you clicked to create your own new specific selector..?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkgf98wp8o76pzjodz0s.png)

hover it until the helper text pops up saying
--'new style rule'

when that pops up
hold down the left click on the plus sign

--a dropdown option appears wit hat least two options
--inspector-stylesheet

&
-- a reference to your projects css file

which ever one you select will create a new selector and empty style rule for you to edit in that sheet

pretty cool

now down in that new selector you created with the plus button

notice on the right edge there is a filename:number

clicking that will pull up the stylesheet this selector and ruleset is being added to allowing you to directly edit delete or copy any or all of it.

now you can take your new inspector styleswith you all at once at the end

SO go ahead and get carried away again
it okay now!

the fun is back in development!!
Learning Python Road Map
Tags: career
Published: 2020-09-14 01:36:41

Python is a high-level, interpreted, interactive and object-oriented scripting language, easy to learn yet powerful and versatile scripting language, which makes it attractive for Application Development.

Python's syntax and dynamic typing with its interpreted nature make it an ideal language for scripting and rapid application development.

Python supports multiple programming pattern, including object-oriented, imperative, and functional or procedural programming styles.
Python is a multipurpose language having a wide range of application in fields such as:
1. Web Development
2. Data Science and Data Visualization
3. Artificial Intelligence and Machine Learning
4. Game Development
e.t.c
There are many ways to learn python programming language which depends on how best and fast you learn(also your application of the language).

WEBSITES:
https://www.w3schools.com/python/default.asp
https://www.javatpoint.com/python-tutorial

VIDEOS
https://www.edureka.co/python-programming-certification-training (Paid)
https://udemy.com/course/python-the-complete-python-developer-course/(Paid)

BOOKS
Automate the boring stuff
 
After finishing your prefer python tutorial you are expected to choose your prefer of application. All these can take up to 6 months or less depending on your learning speed.
Leetcode - Longest Palindromic Substring (with JavaScript)
Published: 2020-09-14 01:26:27

Today I am going to show how to solve the Longest Palindromic Substring.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ga26twmlf0ztux8ag4vt.png)

In my last blog I talked about how to determine whether or not a string is a palindrome. A palindrome is a string that's written the same forward as backward.

But this problem is a bit different in that not only do we have to find out if a string is a palindrome, we also have to find the longest palindromic substring.

Before diving into the solution, I’d like to note that a single character is considered a palindrome. For instance, the letter 'a' alone is considered to be a palindrome because it's written the same forward as backward.

We know that every palindrome has a center. If it's of odd length, then the center of the palindrome is a letter. But if it's of even length, then the center of the palindrome is just in between two letters.

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

We can iterate through our input string and treat each given point as if it could be the center of a palindrome. The center could be at the given letter, or between the given letter and the previous letter. When we are in the middle of a palindrome, we can then expand and look at the two next letters to the side of it and see if they're equal to each other. And then update our current longest palindrome accordingly.

We never actually have to store the palindromes; we can just store the index of  the starting letter of the palindrome and the index of the last letter. 

We essentially continue to  check the center of a potential palindrome and expand from it. And that's going to end up running in O(n^2). 

```javascript
var longestPalindrome = function(s) {
    let currentLongest = [0, 1];
    
    for (let i=1; i< s.length; i++){
        const odd = expandAroundCenter(s, i-1, i+1); // treating the given letter as a center and checking its surrounding letters 
        const even = expandAroundCenter(s, i-1, i); // checking if the  center is between the given letter and the previous letter
        const longest = odd[1] - odd[0] > even[1] - even[0] ? odd : even; // choosing the longest palindrome between odd and even
        currentLongest = currentLongest[1] - currentLongest[0] > longest [1] - longest[0] ?  currentLongest : longest // comparing the longest to the current longest palindrome and updating current longest accordingly
    } 
    return s.slice(currentLongest[0], currentLongest[1]);
};

function expandAroundCenter(s, leftIdx, rightIdx){
    while (leftIdx >= 0 && rightIdx < s.length){
        if(s[leftIdx] !== s[rightIdx]) break;
        leftIdx--;
        rightIdx++;
    }
    return[leftIdx + 1, rightIdx] 
}

```