DEV Community: Islam Sayed

EXPRESS JS MIDDLEWARE

Islam Sayed — Sat, 19 Jun 2021 20:58:00 +0000

What is a Middleware?:

Middleware is a type of computer software that provides services to software applications beyond those available from the operating system. It can be described as "software glue".

In our case, express js middleware is a functionality that runs between a request to the server and the response from the server.

Types of Express Middleware:

Built-in Middleware:

express.static: serves static assets such as HTML files, images, and so on.
express.json: parses incoming requests with JSON payloads.
express.urlencoded: parses incoming requests with URL-encoded payloads.

Third Party Middleware:

Middleware installed via npm

Custom Middleware:

Created by you - the developer - for a project.

How To Apply Middleware?:

Application or Route Level:

const express = require('express');

//Start express app.
const app = expree();

//Apply a single middleware
app.use(middleware);

//Apply multiple middleware
app.use(middleware1, middleware2);

//Or via an array 
const middlewareArr = [middleware1, middleware2];
app.use(middlewareArr);

Endpoint Level:

//Apply a single middleware
app.get('/', middleware, (res, req) => {};

//Apply multiple middleware
app.get('/', middleware1, middleware2, (res, req) => {};

//Or via an array 
const middlewareArr = [middleware1, middleware2];
app.get('/', middlewareArr, (res, req) => {};

Get Object's Keys and Values The Easy Way

Islam Sayed — Tue, 11 Feb 2020 20:20:18 +0000

By using Object methods keys(), values(), and entries(), you can get an array containing object's keys, values, and key values arrays respectively.

Mithilfe der Objektmethoden keys (), values () und entries () können Sie ein Array abrufen, das die Schlüssel, Werte und Schlüsselwert-Arrays des Objekts enthält.

Here is the syntax👇

const obj = {
    name: 'codehood',
    type: 'channel'
};

//Get array of object keys
Object.keys(obj); // ['name', 'type']

//Get array of onject values 
Object.values(obj); // ['codehood', 'channel']

//Get array of key/value arrays
Object.entries(obj); 
// [['name', 'codehood'], ['type', 'channel']]

👉Follow me on Twitter: https://twitter.com/islam_sayed8

How to Turn a String into an Array of Characters: 3 Ways to do so.

Islam Sayed — Tue, 04 Feb 2020 17:19:35 +0000

Here are 3 different ways to convert a string into an array of its characters in javascript.

const str = 'Hello';

//1. Using split() method
const arr1 = str.split('');

//2. Using spread operator
const arr2 = [...str];

//3. Using Array.from() method
const arr3 = Array.from(str);

Follow me on:
👉Instagram: https://www.instagram.com/islamcodehood
👉Twitter: https://twitter.com/islam_sayed8
👉Facebook page: https://www.facebook.com/Codehood-111...
👉Dev: https://dev.to/islam

How To Copy Properties from an Object To Another?

Islam Sayed — Mon, 03 Feb 2020 21:14:21 +0000

Rest operator is awesome. Here is how to copy properties from one object to another using Spread operator.

//copy properties from an object to another one
//using SPREAD OPERATOR.
const obj1 = {
    a: 2,
    b: 5
}
const obj2 = {
    ...obj1,
    c: 6
} //{a: 2, b: 5, c: 6}

[SOLVED] How To Merge Arrays Using Spread Operator?

Islam Sayed — Sun, 02 Feb 2020 13:38:54 +0000

Spread Operator is of a great use in case of dealing with arrays and objects. Here how to merge two arrays using it.

const arr1 = [1, 2];
const arr2 = [3, 4];

const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]

How to Swap Variables' values Using Array Destructuring

Islam Sayed — Tue, 28 Jan 2020 15:18:59 +0000

You can use array destructuring for easy swapping the values of 2 variables together. Here is how 👇

Sie können die Array-Destrukturierung verwenden, um die Werte von 2 Variablen einfach zu vertauschen. Hier ist, wie 👇

let x = 1;
let y = 5;
[x, y] = [y, x];
console.log(x); //5
console.log(y); //1

How to Format Date in Javascript

Islam Sayed — Sun, 26 Jan 2020 18:00:23 +0000

Format date according to language, place and specify its style of writing in javascript.👇

Formatieren Sie das Datum nach Sprache, Ort und Schreibweise in Javascript.👇

const date = new Date();
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
console.log(date.toLocaleDateString("en-US", options));
//Sunday, January 26, 2020
console.log(date.toLocaleDateString("ar-EG", options));
//الأحد، ٢٦ يناير ٢٠٢٠
console.log(date.toLocaleDateString("ar-SA", options));
//الأحد، ١ جمادى الآخرة ١٤٤١ هـ
console.log(date.toLocaleDateString("de-DE", options));
//Sonntag, 26. Januar 2020

Remove Duplicates The Shortest Way

Islam Sayed — Sat, 25 Jan 2020 12:38:54 +0000

function removeDuplicate(arr) {
  return [...new Set(arr)]
}

Remove duplicates from an array in javascript the shortest way.👍Using Set object where it only contains unique values (remove repeated ones). Then with spread operator spreads the values into an array again. 😎

Entfernen Sie Duplikate auf kürzestem Weg aus einem Array in #Javascript. Dann spreizt der Operator mit spread die Werte wieder in ein Array.

Why do I write?

Islam Sayed — Sun, 24 Nov 2019 09:22:20 +0000

A lot of times, I had an idea to write about and then I start thinking should I write about it now? Is it an important thing to write about? Will it get a good reaction from readers, or will any body be interested to read it at all? Is it the good time to post an article, or should I wait to rush hour to get more likes, and comments?
Most of times after this storm of questions the idea is dead before it has been born.

This morning I was wondering "Why I write?". I have also intended to start a Youtube channel soon, and have prepared for it and waiting for some equipment to start filming the first video. But again, "Why do I do so?". Then I remembered how I was thinking before that it would be a great thing if one could leave something that could change somebody's life to the better. And what can do so more than a useful knowledge even if it is a small tiny piece of knowledge. A way to make this world a better place.

I decided to write every piece of information that I learn, talk about it, teach it to others without thinking in any reaction, self-fulfillment through it. I decided to make the benefit of others the main goal and any other thing comes after it.

With Firefox69 Privacy Is the Default

Islam Sayed — Sun, 08 Sep 2019 10:23:41 +0000

Privacy is not an option in Firefox69 browser version. It is default by default. With the new release of the browser, these are the new features it prsents for its users:

Block Third-Party Tracking Cookies (by default).
Block Cryptominers (by default).
Block Fingerprinting (on strict mode - you have to enable it,and I'm going to show you how).
Block autoplay video's audio (by default).

Block Third-Party Tracking Cookies

As mentioned in mozilla blog post, the new feature works behind-the-scenes to keep a company from forming a profile of you based on their tracking of your browsing behavior across websites — often without your knowledge or consent. Those profiles and the information they contain may then be sold and used for purposes you never knew or intended.

Here is how to see the blocked list for a website:

Click on info icon beside address bar.

Click on Cookies.

Block Cryptominers

Cryptominers access your CPU without your knowledge, make excessive computational operations and this leads to slowing down your machine, and drain your batteries. Allof these for creating cryptocurrency not for you but for them. Firefox blocks them by default.

Block Fingerprinting

Fingerprinting scripts have the ability to take a snapshot of your machine's configuration when you visit a website. This snapshot can then be used to track you accross the web. Firefox blocks fingerprinting by enabling strict mode.

To turn on strict mode, you will have to go to options, then chose Privacy & Security, and check Strict.

How to enable strict mode

Block autoplay video's audio

You have three options with videos in Firefox:

Allow audio and video autoplay.
Block audio only(default).
Block audio and video until you press the play button.

You can alter the setting easily by going to Privacy & Security, then at Permissions locate the Autoplay settings.

As you see the new Firefox treats user privacy as a first priority and this is really a win to this browser, and its users.

Images Native Lazy Loading And Its Polyfill

Islam Sayed — Sun, 01 Sep 2019 08:34:34 +0000

What is Lazy loading

Images, and videos consume a huge amount of data, and affects web performances. If your web page contains many images (or videos), it is true that some -if not many- of them are out of viewport. The normal behaviour of any browser is to load all images during the web page loading which may slow loading time.

Lazy loading is used to defer images loading until it is about to enter the viewport, and only load the ones that are displayed once the web page loads. Thus decreases the time the web page needs to firstly load.

Native Lazy Loading

Developers use javascript plugins to make lazy loading. The good news is that Native lazy loading is now supported in Chrome 75. Using it is very simple. You will only have to add the attribute loading="lazy" to the <img> element.

<img src="image.jpg" loading="lazy" alt="..." />

The value of the attribute `loading` can be either:

lazy => tell the browser to load image just before showing onthe screen.
eager => make browser load image as soon as possible. This can be added to the images that will appear inside viewport once theweb page loads.
auto => make browser determine whether or not to lazily load.

Lazy Loading Plugin

There are many javascript plugins to achieve lazy loading. They depend on replacing src attribute by data-src attribute to prevent the browser from loading the image.

<img data-src="image.jpg" alt="..." />

Then use javascript to detect when image is close to the viewport to copy the value of the data-src attribute to the src attribute so the browser can load it.

Examples for such libraries:

Hybrid Lazy Loading

As explained by Andrea Verlicchi in his article on Smashing Magazine:
"Hybrid lazy loading is a technique to use native lazy loading on browsers that support it, otherwise, rely on JavaScript to handle the lazy loading."

<!--Load this hero image as soon as possible-->
<img src="hero.jpg" loading="eager" alt=".."/>

<!--Lazy load these images as user scroll down-->
<img data-src="image1.jpg" loading="lazy" alt=".." class="lazyload"/>

<img data-src="image2.jpg" loading="lazy" alt=".." class="lazyload"/>

<img data-src="image3.jpg" loading="lazy" alt=".." class="lazyload"/>

//Check for browser support.
if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('lazyload')
    //copy the value of the data-src to the src.
    images.forEach(img => img.src = img.dataset.src)
} else {
    //if no support, async load the lazysizes plugin
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
}

Lazy loading in action.

Resources

Now Use Material-UI Icons With Super Ease

Islam Sayed — Wed, 28 Aug 2019 12:27:56 +0000

Instead of searching for icons in Material icons, and then trying to figure out what the required icon component name would look like, now you can directly search for any icon among 1,000+ official Material icons converted to svg icon components.

// Detect dark theme var iframe = document.getElementById('tweet-1164302839033794561-357'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1164302839033794561&theme=dark" }

The search feature is super easy. After you select an icon a pop up opens with the import of such icon.

You can also choose between icon styles (Filled, Outlined, Rounded, Two tone, and Sharp) in the left side bar.

As announced in Material-UI tweet that their synonyms list is not perfect yet. And they will refine it based on the search usage.