DEV Community: Osama

How To Choose The Right Framework For Your Next Node.js App.

Osama — Fri, 23 Sep 2022 15:02:34 +0000

How To Choose The Right Framework For Your Next Node.js App.

Choosing the proper framework that suits your needs is one of the most important things you need to do before doing anything, Express is a great choice but there are a few alternatives that can do better for you.

What is a web framework:

A web framework or web application framework is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. wiki

You can think of a web framework as a tool that helps you build your app in a good way and make it fully featured, secure and Fast.

There are a lot of web frameworks in the town, especially for Node.Js, So the questions are, What is the best web framework and How to choose the one that suits your need?

in this article, I’ll try to answer these questions, though it’s up to you to decide which is the best and which suites you, all I’m trying to do here is to give you a simple and brief introduction of each popular framework and its Pros & cons, and I added at the end of the article some links that make comparisons between those frameworks so that you can choose the right one for you.

How do you choose the right framework for your App:

what is the purpose of the app? is it an API you want to expose to the public? is it an E-commerce app where reliability and performance matter the most? is it a full stack solution and may need to convert it to a mobile app? is your project a small level, med level or enterprise level?
Always go with the framework that is easy to install and use and has the biggest community support
Do you need your app to be scalable? will you often add more features?
Do you have a lot of time to spend learning the new framework? or do you want something very quickly to start with?
Always go to the one that has better documentation, so that you will face less problems and spend more time developing the app
What Are the Hosting Prerequisites of the Framework?
Use frameworks that agree with the hosting requirements of the app you are developing. Some frameworks work well only with shared hosting plans.
Always try to avoid the complex and hard-to-understand framework, unless you want it for other benefits that you need.
Ease of Creating an Extension and Availability

Enough Talk let’s get to work!

Express:

Express.js, or simply Express, is a back end web application framework for build RESTful APIs with Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js
Express - Node.js web application framework
*Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…*expressjs.com

Pros:

Great community.
huge support for many third-party plugins
unopinionated (this is an advantage and disadvantage too)
simple and powerful rooted API
great and detailed documentation
Great support for middleware patterns

Cons:

lack of standardization, due to its unopinionated structure.
callback hell

Companies that Use Express.js:

uber
twitter
PayPal
IMDB
Netflix

Koa:

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing servers fast and enjoyable. site
Koa - next-generation web framework for node.js
*A Koa Request object is an abstraction on top of the node's vanilla request object, providing additional functionality that…*koajs.com

Pros:

lightweight
Generator support from the ground up
no callback hell
modular structure, for example, rather than having a body parser as a middleware, you have it as a function
greater error-handling with try-catch

Cons:

the community is relatively small
not compatible with the middleware style
Koa uses generators which are not compatible with any other type of Node.js framework middleware.

Companies that Use Koa.js:

brainhub
bulb
gapo
Pier

Hapi:

Hapi.js (derived from Http-API) is an open-source Node.js framework used to build powerful and scalable web applications. Hapi is commonly used to build Application Programming Interface servers, HTTP-proxy applications, and websites. Hapi.js was created by the mobile team at Walmart Labs — led by Eran Hammer to handle their traffic for events like Black Friday, which is by far one of the busiest days for online shopping on the U.S. calendar. Hapi was originally built using the express framework before facing challenges that drove Walmart to make hapi, its own stand-alone framework. source

Pros:

Robust plugins
secure framework
microservices support
integrated authorization
Ease of coding

Cons:

code configuration, Developers have to figure out the code structure without community support
compatibility issues with other frameworks like Express
manual testing due to lack of automation

Companies that Use Hapi.js:

Tech stack
Beam
GraphicWeave
Owlin

Fastify:

Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It is inspired by Hapi and Express and as far as we know, it is one of the fastest web frameworks in town. **source**

Pros:

Highly performant: as far as we know, Fastify is one of the fastest web frameworks in town, depending on the code complexity we can serve up to 30 thousand requests per second.
Extensible: Fastify is fully extensible via its hooks, plugins and decorators.
Schema-based: even if it is not mandatory we recommend using JSON Schema to validate your routes and serialize your outputs, internally Fastify compiles the schema in a highly performant function.
Logging: logs are extremely important but are costly; we chose the best logger to almost remove this cost, Pino!
Developer friendly: the framework is built to be very expressive and to help developers in their daily use, without sacrificing performance and security.
TypeScript ready: we work hard to maintain a TypeScript type declaration file so we can support the growing TypeScript community.

Cons:

Not widely used in the industry yet.
Less documentation exists.
Less community support for debugging.

Companies that Use Fastify.js:

Armut
bee10
payever
sevensenders
R&D

Nest:

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming). Under the hood, Nest makes use of Express, but also, provides compatibility with a wide range of other libraries, like e.g. Fastify, allowing for easy use of the myriad third-party plugins which are available.

Pros:

Based on Typescript
easy to write simple API
CLI tool to generate and integrate boilerplate code.
modular structure
allows you to create extensible software solutions where there is no strong coupling between the components.

Cons:

**Heavily inspired by angular, **if you not good with angular or at least with typescript, it can be hard for you
Too much obfuscation. With ExpressJS (or Fastify) already fairly simple to use and understand, NestJS takes that too far, forcing you to learn more of what NestJS needs and less about what is going on under the hood.
Too much magic. Similar to obfuscation, magic means things just work…until they don’t. There have been several instances of having to fight or work against NestJS to meet a requirement that would normally be straightforward with something like ExpressJS.
Lacking in features compared to frameworks in other languages such as Spring in Java or .NET in C#.

Companies that Use Nest.js:

Mak it
Kevin
PostClick
UniBuddy
ProductBoard

IF YOU DECIDE TO GO WITH METEOR FOR YOUR NEXT PROJECT, PLEASE READE THIS ARTICLES

Our Experience With NestJS
*NestJS is an opinionated framework used to build "scalable server-side applications." It is heavily inspired by Angular…*www.wwt.com
NestJS - Davidson
*The JavaScript Enterprise Edition (JsEE)? In a few minutes, you won't be able to do without NestJs. Launched in 2017…*www.davidson.group

Ember

A framework for ambitious
web developers.
Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. site
Ember.js - A framework for ambitious web developers
*Some of the best development teams in the world have been iterating on their products for years with Ember. With…*emberjs.com

Pros:

Stability
Community
Convention over configuration
Ember CLI
Ember Octane — The future of contemporary Ember, The team behind Ember has planned to release a new Ember edition every single year. Every single release will focus on a specific theme — one of them is Ember Octane, which is related to performance and productivity. According to the official website, Ember Octane is concerned about performing more with less, which implies that it will be simpler to learn Ember, and the framework will be smaller and faster. Ember Octane will be introducing native JavaScript classes, incremental rendering, tree-shaking, rehydration, and so forth.

Cons:

Not easy to learn
**Highly opinionated, **This framework is highly opinionated, given that any sort of deviation from performing things might result in frustrating issues.
Sluggishness in popularity

Companies that Use Ember.js:

Twitch
Linkedin
DigitalOacean
Better
Square

Backbone

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. site
Backbone.js
*Backbone.js gives structure to web applications by providing models with key-value binding and custom events…*backbonejs.org

Pros:

simple and flexible
huge community and ecosystem
powerful inheritance model
MV structure and Abstract Code
Event-driven communication
Conventions for coding style

Cons:

Architecture, As Backbone does not have much of an opinion, architecture is unclear at times, which can make it challenging to get up to speed on some things.
Instead of giving a structure, it provides some elemental tools to create a structure.
Productivity, As Backbone is more like a library, which means it doesn’t try to put much of its opinion on you, this also means it doesn’t help you as much and doesn’t write as much of your code for you.
It is not to say you’re not going to be productive with backbone, but you certainly would have more code to write. A significant reason for that would be the lack of 2-way data binding, which is a primary feature many people liked about Angular development and Ember.
Memory Leaking, The biggest drawback of Backbone is that, instead of providing structure, it provides some essential tools to create architecture. So, somewhere you have to depend on developers to decide how to structure the application.

Companies that Use Backbone.js:

uber
LinkedIn
Reddit
Pinterest
Coursera
MasterCard
Walmart

Meteor:

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node. js and general JavaScript community.

Pros:

Full-Stack javascript framework
Reactivity, changes in the database will be sent to the client immediately, thanks to socket.io, Put simply, in case someone under your article posts a comment; it would be possible for you to see it instantly without any need to reload the page

It means that every change of data in the database is instantly mirrored by a change happening on the user’s screen

One language to develop a whole platform
Convert your Meteor JS app into Android and iOS apps, Thanks to Cordova
Supportive and active community

Cons:

An excessive amount of dependency is placed by the developers on various prebuilt packages, which can conflict.
It might be easier to use Express or any web framework if you are simply making a web app.
Not-so-obvious way of deployment to own server
No native server-side rendering (useful for SEO)

Companies that Use Meteor.js:

Qualcomm
IKEA
Honeywell
Dispatch
Rocket.chat
MixMax

IF YOU DECIDE TO GO WITH METEOR FOR YOUR NEXT PROJECT, PLEASE READE THIS ARTICLE

StackPath
*Edit description*www.netvlies.nl

My personal opinion:

for creating open API or Back-end apps/servers I’ll go with Express because it offers me simplicity, security, Fast, ease of development and most importantly the support for middleware, which I use a lot.

But if I’m working with a Full-stack app that needs to be cross-platform, then definitely Meteor is where to go, you can even create IOS and android app versions from the same app you made using meteor, I used meteor before and it was great though it has some annoying drawbacks, but still a good choice.

Preferences :

The Best Node.js Framework: Koa VS Express VS Hapi [Detailed Comparison]
*Since its launch in 2009, Node.js has become one of the fastest-growing open-source, cross-platform Javascript run-time…*medium.com

Forget Express.js - opt for these alternatives instead - LogRocket Blog
*Node.js offers some powerful primitives when it comes to building HTTP servers. By default, you get a function that…*blog.logrocket.com

https://www.slant.co/options/1277/alternatives/~express-js-alternatives

Top Node.js Frameworks For Web Apps In 2022
*6 Best Node.js Framework For Web Apps in 2022*javascript.plainenglish.io

12 Best Nodejs Frameworks for App Development in 2022
*This post introduces you to the best Node.js Frameworks in 2022 for web and mobile apps. Explore in detail to view…*www.simform.com

Top 10 Best ExpressJS Alternatives In 2022 - The Tech Blog
*Top 10 Best ExpressJS Alternatives In 2022. This post will explain expressjs alternatives. This essay will look at ten…*www.thetechblog.org

Top NodeJS Frameworks for 2022
*Nodejs is a leading software development technology with a wide range of frameworks. These frameworks come with…*www.clickittech.com
The Best Node.js Framework: Koa VS Express VS Hapi [Comparison]
*Since its launch in 2009, Node.js has become one of the fastest-growing open-source, cross-platform Javascript run-time…*savvycomsoftware.com

What is Koa Javascript (Koa Js)? | node js web development | Blog
*Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more…*cubettech.com

Express vs. Hapi: The Battle For Being Best Node.js Framework
*Express and Hapi are both based on Node.Js at the core, and that is why it becomes a challenge to choose one of them…*www.simform.com

Thanks for reading, and feel free to ask any question about javascript or this series, I appreciate any feedbacks to improve My content.

Find me on Twitter, GitHub and my portfolio.

Advanced Node.js Topics: Caching.

Osama — Sun, 31 Jul 2022 07:56:00 +0000

Improve your Server Performance By Caching often Fetched Data using Redis.

Introduction:

Redis is an in-memory database that stores data in key: value format, since it’s in memory, it's ridiculously fast.

Redis provides data structures such as strings, hashes, lists, sets, sorted sets

Redis is an open source (BSD licensed), in-memory data structure store used as a database, cache, message broker, and streaming engine. Redis provides data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes, and streams. Redis has built-in replication, Lua scripting, LRU eviction, transactions, and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redis Cluster. redi.io

case use:

Why you should implement caching layer in your server and how it will improve the performance of the application.

Regular fetched data
caching data that gets fetched too often is a good practice, you won’t let users wait too long to get basic data
Reduce query exec against the database
by using caching you will reduce the number of queries that will be executed against the database, aside from the performance improvement you’ll get, you also save your database from being overwhelmed with duplicate queries that return the same result.
also, you will save your precious bandwidth if you are hosting your app at an expensive hosting provider
Improving the app performance
caching will not only improve your database performance and protect it, but it will also improve the overall server-client performance.
to get the idea let's assume your server has a route called getArticle, every request that comes to this route will take about half a second (~500 ms ) to get the response, with caching the first request will take about half a second or more, but every next request will take about (~20 ms)! Magic right ?!
I’ll prove it using my own app

Cache vs no Cache:

I did a simple benchmark test on my server (on a single API to see how it takes to complete the request without caching, and re-test the same API with caching to see the improvement.)

the above image shows you, that it took my server more than a second to complete the request, of course, every time I make a request it will take approximately the same time!

The below image is when I introduced the Caching mechanism to my server’s APIs, you can see the difference in the time by yourself ( i did not change anything in the request)

the time to complete the same request in the upcoming times has been reduced to almost ~10 ml, which is a significant improvement!

I hope now you're excited about implementing this technique in your own projects.

Installation:

Install Redis on your machine

in Linux, you can install it by typing in the terminal

sudo apt-get -y install redis

in macOS, in terminal issue the following command

brew install redis

in windows, it's a little bit difficult to get Redis on windows since it’s not officially supported in widows.

Redis is not officially supported on Windows. However, you can install Redis on Windows for development by following the instructions below.
To install Redis on Windows, you’ll first need to enable (Windows Subsystem for Linux). WSL2
WSL2 lets you run Linux binaries natively on Windows. For this method to work, you’ll need to be running Windows 10 version 2004 and higher or Windows 11.

https://redis.io/docs/getting-started/installation/install-redis-on-windows/

Install node-Redis to your project:

node-Redis is a modern, high-performance client for Node.js.

npm install redis

Now we installed both Redis and node-redis package, let's do simple work with these great tools and then try it in a real-world example!

Quick start with Redis:

// IMPORTANT : before you can establish connection to redis,

// you must start the redis-server

const redis = require('redis');

// create client to communicate redis DB

var client = redis.createClient();

client.connect()

// connect and error events

client.on('error', function (err) {

console.log('Something went wrong ', err)

});

client.on('connect', function () {

console.log('Redis Connected!')

});

connect to Redis server:

To start the Redis server you need to run in the terminal :

redis-server

example:

Above we created a client and started the connection to Redis server, now we can use all the features.

// used to put data into redis
client.set("key" , "some value")

// used to get data from redis
client.get("key")
// output = "some value"

Real-world example:

the big question now is how can I make use of these simple functions set() and get(), to improve my server performance?

let’s see my own server (express server to fetch quotes from MongoDB atlas and send it back.)

This Benchmarking test is from my own Quote API (which will be released soon in RapidAPI), we’ll see how the difference in the time it takes when we request 1000, 3000 and 5000 documents of data, I’ll repeat the test by fetching the same data but from the cache this time.

to fetch 1000 documents from the DB took almost 2 seconds

But fetching the same amount of data from the cache it only took 25 milliseconds!

to fetch 3000 documents from the DB it took almost 4 seconds!

But fetching the same amount of data from the cache it only took 45 milliseconds!

to fetch 5000 documents from the DB took almost 5 seconds!

But from the cache, it only took 60 milliseconds!

Pretty amazing right??

The caching mechanism:

caching is simply adding another layer to your server, this layer will intercept the queries that will be executed by your database, it will search if this query is cached before or not, if so it will return the cached data as a response and will not going to send the query to the database, if the query has not been cached before, it will send the query to the database to get executed and then store the result in the cache (Redis) for the upcoming requests.

So to clarify what we want to do :

connect the server to Redis using the above code
we want to hijack (intercept, interrupt, call it whatever you want) the process of sending the query to the database so we can decide if this query is cached before or not
if cached, return the cached data and end the response. Don’t send anything to the database
if not cached, send the query to get executed and send the result as the response, then store the result in the cache for the new requests.

First of all, you need to create a new file in your project called cache.js, you can name it whatever you want, in the services directory if you have one, if not just put it anywhere.

this file will contain all the logic needed by our server to cache data and retrieve data from Redis.

In the beginning, we’ll need to connect to Redis and make sure it's working fine

key creation:

to store data in Redis we need to give every query a unique and consistent key, so we can retrieve the right query when a request has arrived.

basically, every query to any database has filters and options to get particular documents or records.

we’ll take advantage of this thing and take these filters and turn it into a string

 JSON.stringfy({ {title : "story"} , {skip : 10} })
    // our key = "{{"title" : "story" }, {"skip" : 10}}"
    // everytime any client will request the data that can be fetched
    // with this query, the server will repsonse with the cached data

Now we have our key for every query need to be executed in the database, what we’ll do next is to search in Redis for this key, if it does exist, return its value instead of executing the query, if not found, execute the query in the database and store the query result with its key in Redis for next requests and then send the result to the user.

// this line will add the data fetched from mongoDB to redis
client.set(key, JSON.stringify(result))
// always remember, Redis only store values as a string or numbers

Wrap up:

first, you need to create a unique and consistent key for every query.

second, search in Redis for this key, if it's found, return its value as a result, if not, execute the query and store the result in Redis and lastly send it to the user.

References:

The best of all courses to learn node.js in depth.

https://www.udemy.com/course/advanced-node-for-developers/?ranMID=39197&ranEAID=SAyYsTvLiGQ&ranSiteID=SAyYsTvLiGQ-EDfB120pgYcJlhkNSEBp4Q&LSNPUBID=SAyYsTvLiGQ&utm_source=aff-campaign&utm_medium=udemyads
How To Implement Caching in Node.js Using Redis | DigitalOcean
Redis + Node.js: Introduction to Caching - RisingStack Engineering
Caching in Node.js using Redis
Fasten your Node JS Application with a Powerful Caching Mechanism using Redis

Redis OM for Node.js

Thanks for reading, and feel free to ask any question about javascript or this series, I appreciate any feedback to improve My content.

find me on Twitter, Github and my portfolio.

Docker: Brief Introduction.

Osama — Sat, 23 Jul 2022 19:38:58 +0000

Docker: Brief Introduction.

Learn about Docker containers, images, installations and everything you need to know about Docker.

About Docker :

Docker is an open source containerization platform. It enables developers to package applications into containers — standardized executable components combining application source code with the operating system (OS) libraries and dependencies required to run that code in any environment. IBM

in simple words :

Docker is an application build and deployment tool. It is based on the idea of that you can package your code with dependencies into a deployable unit called a container. Containers have been around for quite some time. nebula works

in nutshell :

You experience this situation, The code works perfectly in my machine, but it doesn’t in others machines.

the situation of when you shipped the code to production and it didn't work, but it works well in your machine.

Here is where Docker introduce itself as the saver for you and your code,
it simply creates a container for your project files, directories, tools and everything your code needs, and that container can be used and run perfectly in any system or machine (your machine or the cloud host).

Why use Docker:

Solve the headache of “**It works on my machine…!!”
**with the code being in a container, it can be run everywhere
a good solution for microservices architecture projects
turn every service of your product into a simple docker container
Containers aren’t required to implement microservices, but they are perfectly suited to the microservices approach and agile development processes generally.
Docker enables faster software delivery cycles
make the process of CI/CD seamlessly and easy.

Enterprise software must respond quickly to changing conditions. That means both easy scaling to meet demand and easy updating to add new features as the business requires.
Docker containers make it easy to put new versions of software, with new business features, into production quickly — and to quickly roll back to a previous version if you need to. They also make it easier to implement strategies like blue/green deployments.

Main Concepts:

let's dive a little bit into docker and get to know how it works under the hood and what its components.

Containers:

A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

also, A container is a runnable instance of an image. You can create, start, stop, move, or delete a container using the Docker API or CLI.

Image:

A Docker image is a file used to execute code in a Docker container. Docker images act as a set of instructions to build a Docker container, like a template. Docker images also act as the starting point when using Docker. An image is comparable to a snapshot in virtual machine (VM) environments.

DockerFile:

A DockerFile is a text file that contains instructions on how to build a docker image. A Dockerfile specifies the operating system that will underlie the container, along with the languages, environmental variables, file locations, network ports, and other components it needs — and what the container will do once we run it.

The process of containerization your code:

the process of turning your code into a docker container that can run everywhere is called containerization

Containerization is OS-based virtualization that creates multiple virtual units in the userspace, known as Containers. Containers share the same host kernel but are isolated from each other through private namespaces and resource control mechanisms at the OS level. geeksforgeeks
Containerization is an approach to software development in which an application or service, its dependencies, and its configuration (abstracted as deployment manifest files) are packaged together as a container image. The containerized application can be tested as a unit and deployed as a container image instance to the host operating system (OS). microsoft docs

hard to understand? in simple words containerization is just an approach to collecting all files and tools and configurations that your project needs in one place, a container, and then you can run, deploy, test and delete your container the way you want from any machine that supports docker

you'll ship your code and everything it needs in a container, you execute the code inside this container using a docker image, and the Doker file will contain a series of instructions to specify how to build a docker image.

This is not exactly how things work but I hope you get the main idea!

Installation:

to install docker on your machine, read this documentation in docker.com
Get Docker

on Linux:
Install Docker Desktop on Linux

on macOS:
Install Docker Desktop on Mac

on Windows:
Install Docker Desktop on Windows

Resources:

What is Docker? | AWS
Docker Tutorial: Get Going From Scratch
Why Should You Use Docker - 7 Major Reasons! - GeeksforGeeks

Docker vs Kubernetes :
Kubernetes vs. Docker: What's the difference?
Kubernetes vs Docker: What's the difference?
Kubernetes vs Docker | Microsoft Azure
Kubernetes Vs Docker | Sumo Logic

Links :
Home - Docker
What is Docker?
Docker Hub Container Image Library | App Containerization

Thanks for reading, and feel free to ask any question about javascript or this series, I appreciate any feedback to improve My content.

find me on Twitter, Github and my portfolio.

Side project: Life-Advise Web App

Osama — Sat, 04 Jun 2022 10:25:02 +0000

Side Project: Life-Advise Web App

Offline-first PWA for fetching advice and sending notifications to users.

About the app:

offline first, full-featured quotes and advice generator web app to get some wonderful advice about life, success, money …etc.
Life - Advise

The main goal is to read random advice and quotes, you can save the quote you like and add some notes about it.

The app will send you daily notifications if you want, the notifications contain random advice and quotes, you can either save it without the need to or open the app, or if you want to see it in the app you can open it and add notes and save it or just see other ones.

Repos for the app:

GitHub - osama865/life-advice-client
GitHub - osama865/life-advise-server
osama865 - Overview

App pages:

Favourites:

this page contains your favourite advice, you can modify the note you wrote along with the advice or remove it from the saved.

Random:

Fetch random advice from the database and show it to you so you can save it or fetch another one.

All :

If you liked the given advice and want to read a lot of them, this page is for you, you can go through hundreds or even thousands of devices, on the random page you only have one piece of advice per time but here there is no limit so feel free and read as much as you want.

Technologies I used:

Client-Side Technologies:

react:
My main Stack is MERN where I always use react for building interactive UIs,· Components Based apps with the reusability in mind.
React - A JavaScript library for building user interfaces

**react-router:
*A tool that allows you to handle routes in a web app, using dynamic routing*.
To handle routing and navigation through the app’s pages
Declarative routing for React apps at any scale | React Router

service workers:

A service worker is a type of web worker. It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

To make my web app installable and add more features like receiving notifications and taking actions without the need to open up the app.

**PWA:
*Progressive Web Apps (PWAs) are *web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.
Progressive Web Apps

IndexedDB and dexie.js:

The Indexed Database API is a JavaScript application programming interface provided by web browsers for managing a NoSQL database of JSON objects.

I decided to go along with indexedDB for saving user advice over storing users’ favourites on the server for more simplicity and performance and to discover new technologies.
Dexie.js

simply when you want to save advice, it will be stored in indexedDB storage and will be fetched whenever you want even when you go offline.

you can also modify notes, and delete the saved ones without the need for an internet connection (since the indexedDB is browser storage, no data will be transferred over the network).

**Cache:
**The backbone of offline applications is the cache, when the app loads for the first time it stores the needed pages in the cache so the next time your pages will be served from the cache instead of the server.

There are a few cache strategies for your app, here are useful links
5 Service Worker Caching Strategies for Your Next PWA App
Frontend caching strategies
The Power of Caching in JavaScript

Notification Part:

I choose to use Double opt-in a two-step permission request push notification for a good user experience and more. **
**The first pop-up will tell you why the app needs notification permission and when you feel okay with that the real permission request will show to you.

Why you should always use **double opt-in a two-step permission request:
**it's more user friendly by giving the user a brief description of how your app will use the notification, instead of the ugly standard permission request that tells the user nothing but request to allow or block

when you use a single opt-in a one-step permission request your users won't be able to know why you need to push notifications for them! maybe they will think you are scamming them and the worst thing that will happen is they will block your site from pushing notifications.

The opposite goes with double opt-in a two-step permission request when users are aware of why you need notifications and they will be comfier about your app and that increases the chances for your permission request to be allowed

The most important thing about using double opt-in a two-step permission request is that you’ll have another chance to ask your users for notifications permission.
Everything You Need to Know About PWAs — Push Notifications
How To Optimize Progressive Web Apps: Going Beyond The Basics - Smashing Magazine

When you click confirm on the first pop-up, the real one appears and asks for permission.

When allowed, a welcoming sample notification will be sent to you with the unsubscribe option to stop receiving notifications if you're not satisfied with this feature.

Typical notifications will look like this one, the advice or the quoted text with who said it or the author.

Buttons :

Save button will add the advice or the quote to your favourite whiteout opening the app. magic right ?!

The open button will open the app and you will be able to see the clicked advice or quote in the app so you can add notes and save them or see other ones.

i wish i can add more buttons to the notifications so the user can have more actions to take.

Server-side technologies:

Node.js:

Node.js is a free, open-sourced, cross-platform JavaScript run-time environment that lets developers write command-line tools and server-side scripts outside of a browser.

in the back-end, I’m using node js to run my server code.
Node.js

express.js:

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

I use express to create endpoints and handle requests and responses with ease
Express - Node.js web application framework

web push:

Web push requires that push messages triggered from a backend be done via the Web Push Protocol and if you want to send data with your push message, you must also encrypt that data according to the Message Encryption for Web Push spec.

This module makes it easy to send messages and will also handle legacy support for browsers relying on GCM for message sending/delivery.

I make use of the web-push library to send notifications from my server to the users.
web-push
Getting Started with Push Notifications in Node.js using Service Workers

mongodb.js:

The official MongoDB Node.js driver allows Node.js applications to connect to MongoDB and work with data. The driver features an asynchronous API which allows you to interact with MongoDB using Promises or via traditional callbacks.

I used the mongodb.js driver for simplicity and fast development, it's used to connect your server with your database (mongo atlas for example)
*MongoDB official MongoDB driver for Node.js. Upgrading to version 4? Take a look at our upgrade guide here! Think you've…
*
MongoDB and Node.js Tutorial - CRUD Operations
Node JS with MongoDB CRUD Operations: 6 Easy Steps - Learn | Hevo

Deployment:

Netlify:

Netlify is a web development platform that multiplies productivity. By unifying the elements of the modern decoupled web, from local development to advanced edge logic, Netlify enables a 10x faster path to much more performant, secure, and scalable websites and apps.

For me, netlify was always my go-to when it comes to deploying my react or any client-side projects.

I highly recommend using netlify for its unique features and it makes it easy to deploy and maintain your applications with features like continuous deployment
Netlify: Develop & deploy the best web experiences in record time
Guide to Deploying a React App to Netlify

Heruko:

Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. Our platform is elegant, flexible, and easy to use, offering developers the simplest path to getting their apps to market.

When I want to deploy the node js app, the only host I can think of is heruko.
although it has its cons with the free plan and their pricing is a little more expensive than other solutions but I still like it
Getting Started on Heroku with Node.js
Build and Deploy a Node.js App to Heroku

Database:

MongoDB Atlas:
MongoDB Atlas is a fully-managed cloud database that handles all the complexity of deploying, managing, and healing your deployments on the cloud service provider of your choice (AWS, Azure, and GCP). MongoDB Atlas is the best way to deploy, run, and scale MongoDB in the cloud.
MongoDB Atlas Tutorial

Coming Features :

Settings page :

make the app fully customised by the user
user can modify the themes and set the notifications numbers per day
personalise tags for advice to get only advice that matter to you ( relationships, success, money, inspiration …etc)
notifications setting like when you like the app to send notifications and also notification sound and if you want to unsubscribe from this feature
as well as what buttons you want to see with the notifications.

Search advice:

a small icon that allows you to do a simple search about the advice and its author.

Animations:

Make them feel good and work smoothly with animations so the user never gets bored by the strict view.

Copy advice:

a small icon that allows you to copy the advice you see and its author and send it to your friends.

Create APIs for third-party services:

I want to share my database with other devs, so in future, I’ll Expose APIs for the database so anyone can fetch and use the data there.

And much more enhancement and improvement in the app performance and make it more customized and user friendly.

PLEASE if you have any questions or features you want or advice for me to improve my app, or you want to report a bug, feel free to contact me any time.

Twitter, Email, here in medium or visit my portfolio.

Resources That helped me:

Progressive Web Apps Training | Google Developers

Progressive Web Apps
Progressive web apps (PWAs) | MDN
PWAs Power Tips－firt.dev

How To Optimize Progressive Web Apps: Going Beyond The Basics - Smashing Magazine

Everything You Need to Know About PWAs — Push Notifications

Push Notification UX: The Full Guide 2022 (Updated)

How To Optimize Progressive Web Apps: Going Beyond The Basics - Smashing Magazine

Thanks for reading, and feel free to ask any question about javascript or this series, and I appreciate any feedback to improve My content.

Find me on twitter, github and my portfolio.

Javascript 1O1 series: Array’s Methods And Iterators Part(1), Methods.

Osama — Sun, 24 Apr 2022 20:19:25 +0000

You'll learn:

Some useful array methods to make dealing with arrays is an easy thing, I hope you won't find any issues with handling arrays operations from now on.

Insert and Remove:

shift:
shift() is used to remove the first element of the array.
Array.shift()

unshift:
unshift is used to insert an element into the array, unshift will add the element to the start of the array

push:
push is used to append elements to the array, (add to the end)

pop:
pop is used to pop out (remove) the last element of the array

Sub-arrays:

slice:
slice is used to copy elements in a specific range.
e.g.you have an array and you want to get the elements between index 1 and index 3

when the end parameter is not defined, then the slice extends to the end of the array

let slicedArr2 = arr.slice(1) // [2,3,4,5,6,7,8,9]

spliced:
slice is used to REMOVE elements from an array.

Reordering:

reverse:
used to reverse the array's elements.

sort:

By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
Because of this, the sort() method will produce incorrect result when sorting numbers.
You can fix this by providing a compare function.

so without compare function, sort() is not that useful.
more about sort:

Array.prototype.sort() - JavaScript | MDN

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

developer.mozilla.org

Search and Sort:

includes:
used to check if an element does exist or not.

at:
simple, you pass an index and you get the value in that index.

indexOf:
indexOf() is the opposite of at(), you pass a value and get the value's index in the array.

sort:
sort can be used here as well

By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
Because of this, the sort() method will produce incorrect result when sorting numbers.
You can fix this by providing a compare function.

so without compare function, sort() is not that useful.
more about sort:

Array.prototype.sort() - JavaScript | MDN

developer.mozilla.org

Adding and combining arrays :

concat:
used to combine (add together) two or more arrays, non of the combined arrays will be modified, concat() will return a new array instead.

Array to String conversion:

toString:
used to represent an array in string format.

there is also toLocalString(), search about it as an exercise and learn the difference between toString() and toLocalString(), if you know, please share the answer in a comment.

Other methods:

flat:
when you have a nested arrays and want to pull out all these nested arrays to a new array, flat() is used.
flat() doesn't modify the array, it returns a new array instead.

fill:
used to fill the whole or part of the array with a specific value.

References:

javascript.plainenglish.io

JavaScript: The Definitive Guide, 7th Edition [Book]

JavaScript is the programming language of the web and is used by more software developers today than any other programming language. For nearly 25 years this best seller has been … - Selection from JavaScript: The Definitive Guide, 7th Edition [Book]

oreilly.com

javascript.info

Array - JavaScript | MDN

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

developer.mozilla.org

JavaScript Basic Array Methods - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

geeksforgeeks.org

15 Must-Know JavaScript Array Methods

Master JavaScript arrays with these 15 methods and become a more productive JavaScript developer.

livecodestream.dev

Thanks for reading, and feel free to ask any question about javascript or this series, and I appreciate any feedback to improve My content.

Find me on twitter, github and my portfolio.

Javascript 1O1 series: Scopes and Execution Contexts.

Osama — Thu, 21 Apr 2022 21:15:18 +0000

You'll learn:

About the three levels of scope in javascript, block scope, function scope, and global scope and execution contexts and how javascript code is executed.

What scope is in javascript:

The scope is deciding the visibility or the availability of the variables and expressions through the program, a variable defined inside that scope is only accessible within that scope, and inaccessible out of it

The current context of execution. The context in which values and expressions are "visible" or can be referenced. MDN

in simple words, the scope is where your variables and expressions are accessible and where they are not.
And it has three levels which are block scope, function level, and global level, each of which has its own execution context.

Execution Context:

The Execution Context contains the code that's currently running, and everything that aids in its execution. During the Execution Context run-time, the specific code gets parsed by a parser, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed. freeCodeCamp

in simple words, think of the javascript engine as a human, this human has a lot of things to do, the most appropriate way to get things done is by grouping related things together then finish it and move on to the next group. and think of execution contexts as a group of related things that need to be done

javascript engine before starting executing the code, it defines the execution contexts and then executes any context in isolation from other contexts inside the global context.

Global Execution Context (GEC):

Whenever the JavaScript engine receives a script file, it first creates a default Execution Context known as the Global Execution Context (GEC).
The GEC is the base/default Execution Context where all JavaScript code that is not inside of a function gets executed.

Function Execution Context (FEC):

Whenever a function is called, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the GEC to evaluate and execute the code within that function.
Since every function call gets its own FEC, there can be more than one FEC in the run-time of a script.

Block scope (started from ES6):

variables defined with const and let keywords inside of block scope, are only usable inside that block, only variables defined with var can be accessed from outside that block

Function scope:

any variable defined within function scope (defined inside of function body) is only accessible for that function and can not be accessed from outside in any condition.
The variables that you declare inside a function are local to the function

Global scope:

if a variable is not defined within any scope, it makes that variable's scope Global
which means that the variable is accessible from any inner scope
global scope the global scope is the outermost scope level, any variable defined within this scope is accessible from any other inner scopes (Block scope or Function scope).

Block vs Function vs Global:

you'll often be defining variables within the function scope or block scope, Do not define global scope variable unless you need it, Why? variables defined in the global scope are available everywhere in your code, that makes it easy to overwrite and makes the testing task painful.

Some other issues with globals:
They are slower to access in Javascript than locals because they are the last ones found as the interpreter looks for a given variable name in the various scopes that it might exist in. Usually not a noticeable problem, but something to be aware of. Here's a jsperf that shows how much of a difference there can be.
If you have any asynchronous code that modifies globals or timer-driven code that modifies globals and more than one asynchronous operation can be in flight at the same time, the multiple async operations can step on each other through the modification of the same globals.

Globals are often not declared near the point of use so reading code can be more challenging.

Globals are generally not shown automatically in the debugger (the way local variables are) making debugging a little less convenient.

IE automatically defines a bunch of global variables based on some names in the DOM which can conflict with your own global variables without you realizing it.

A simple omission of the keyword "var" on a local variable makes it a global variable and can confuse the heck out of code if that name is already being used as an intended global variable. I've seen this happen on the for (i = 0; i < m.length; i++) construct before. It can be tough to track down what is wrong.

Global variables persist for the life of the script. If one is using a global variable to hold an object reference for something that doesn't need to exist for the life of the script, this can cause the script to use more memory than it otherwise would.

Global variables in a browser exist in the scope of the window object so they can conflict not only with other globals, but also anything else on the window object. Stackoverflow

References and useful links :

JavaScript Execution Context – How JS Works Behind The Scenes

All JavaScript code needs to be hosted and run in some kind of environment. In most cases, that environment would be a web browser. For any piece of JavaScript code to be executed in a web browser, a lot of processes take place behind the scenes. In this article,

freecodecamp.org

Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

The current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

developer.mozilla.org

A Simple Explanation of Scope in JavaScript

The scope is an important concent that manages variables accessibility. I will explain step by step, in-depth, what the scope is in JavaScript.

dmitripavlutin.com

JavaScript Variable Scopes

In this tutorial, you will learn about the JavaScript variable scope that determines the visibility and accessibility of variables.

javascripttutorial.net

Thanks for reading, feel free to ask any question about javascript or about this series, I appreciate any feedback or advises to improve My content.
find me on twitter, github and my portfolio.

Javascript 1O1 series : Functions

Osama — Tue, 19 Apr 2022 06:13:09 +0000

You’ll learn :

How to declare and define functions, Passing arguments and parameters as well as return values at the end of the function, as well as using anonymous functions.

What is function :

A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when “something” invokes it (calls it). w3schools.
Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure — a set of statements that performs a task or calculates a value. MDN

Functions are simply block of code that wrote once, but can be used many times.
Syntax :

function name (parameters) { functions logic here ; }

function keyword, identifier as name for the function, parentheses so it can hold parameters or not, and then curly brackets that will hold the code inside.

Why we need to use functions :
when we write javascript code, any statement or expressions will be executed only once unless it’s inside a loop or under conditionals statements, and if we need to use particular statements, we’ll have to write all again and again whenever we need that statements.

when using function we simply put some code or statements inside of a block and give it unique name, and then we can reuse that code block whenever we want by just calling it’s name.

as you see, it's very hard and painful and not even makes sense if we code like this, so let's see how it turns we use functions.

Parameters and arguments :
every function do specific task, these task may need some data from outside to get things done.
if our function needs some data which is lay out of it, how can we pass the needed data to it ?
i introduce parameters for you

parameters are simply variables to store data coming from outside of the function and make it available to the function to make use of it.

imagine someone want to give you something, what would you do ?, often you’ll open your hands to take it from that person, as well as function has parameter to store the data has been send to it for using it to perform some operations.

Parameter Rules

JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the passed arguments.
JavaScript functions do not check the number of arguments received. w3schools

How to declare Parameters :
the good thing is parameters variables doesn’t need to be declared in explicit way as other variables like var, let or const, you just name the needed parameters and they will be variable that available inside the function body.

What is arguments :
The function’s variables that we declared to receive data for the function we call it parameters, and these passed parameters values are called arguments.
so the function variable that used to hold data from outside is parameter, and the passed value to that function from outside is argument, ok ?
more about parameters and argument :

JavaScript | Function Parameters - GeeksforGeeks

geeksforgeeks.org

w3schools.com

Function Expressions :
A JavaScript function can also be defined using an expression.
A function expression can be stored in a variable:

more about function expression:

Function expression - JavaScript | MDN

The function keyword can be used to define a function inside an expression.

developer.mozilla.org

Anonymous function :

is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name. geeks for geeks

Functions stored in variables do not need function names. They are always invoked (called) using the variable name.
also you can use anonymous function with the new syntax, arrow functions

Arrow functions :

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.

There are differences between arrow functions and traditional functions, as well as some limitations:

Arrow functions don’t have their own bindings to this or super, and should not be used as methods.

Arrow functions don’t have access to the new.target keyword.

Arrow functions aren’t suitable for call, apply and bind methods, which generally rely on establishing a scope.

Arrow functions cannot be used as constructors.

Arrow functions cannot use yield, within its body. MDN

What is return statement ?

Description : When a return statement is used in a function body, the execution of the function is stopped. If specified, a given value is returned to the function caller. MDN

to reuse some code or some logic we wrap it in a function, but what if we also to reuse this function output ? like using its value inside a loop or use it in conditional statements or pass it to another functions or whatever else
then you need to use RETURN

what return do is simply evaluate some value and put it as the function value.

if we returned 5 in a function, we can say the function’s value is 5, it's not exactly this way just assume it's like this to understand how to use return, also return stop executing the function, thus any code that after return will never be executed.

References and useful links :

google.com

JavaScript Functions

This tutorial introduces you to JavaScript functions that structure your code into smaller reusable units.

javascripttutorial.net

programiz.com

Functions - JavaScript | MDN

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

developer.mozilla.org

Thanks for reading, feel free to ask any question about javascript or about this series, I appreciate any feedback or advises to improve My content.
find me on twitter, github and my portfolio.

Javascript 1O1 series : Variables vs Constants, and Let keyword.

Osama — Mon, 18 Apr 2022 10:38:17 +0000

You’ll learn :
about constant and const keyword and variables declared with let keyword and the differences between these types of variables.

constant :
we all know about variable and it is container that hold specific value during program’s execution, and this value can be changed whenever to whatever the programmer want.
constants are the same thing but the only difference is the const value can not be changed during the code execution, the initiated value when we declare the constant will remain the same the whole time.

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment (i.e. by using the assignment operator), and it can't be redeclared (i.e. through a variable declaration). However, if a constant is an object or array its properties or items can be updated or removed. MDN.

The const keyword was introduced in ES6 (2015), Variables defined with const cannot be Redeclared, Variables defined with const cannot be Reassigned. w3Schools.

Syntax :

const identifier = anyValue; const x = 10 ;

const keyword , identifier, assignment operator, any value
variable declared by const keyword, its value can not be changed (object’s properties and array’s elements still can be updated or removed), it can not be redeclared, and last thing its scope will be Blocked-Scope.

you’ll learn about scopes in later tutorial

Let keyword :

The let statement declares a block-scoped local variable, optionally initializing it to a value. MDN
variables declared with let keyword and variables declared with var do the same thing , they are variables and its rules pretty much the same, the key difference is their scope limitation, var is function-scope and let is blocked scope.

if you want to read and understand what scope is.

w3schools.com

Rules for let variables :

The let keyword was introduced in ES6 (2015).

Variables defined with let cannot be Redeclared.

Variables defined with let must be Declared before use.

Variables defined with let have Block Scope. w3schools

Syntax :

let identifier = anyValue; let x ;

let keyword, identifier, assignment operator and a given value.
you can drop the initiated value when declaring let variables and can assign it later, the default value will be undefined when no value assigned to the let variable. expression.

Let vs Var vs Const :

let and var variables can be reassigned, const can’t
var variables can be redeclared, let and const can’t
let and const are blocked-scope, while var is a function-scope
let and var can be declared without initial value, const can’t
let and var default values without initialization values will be undefined

More :

The Difference of “var” vs “let” vs “const” in Javascript | by Megan Lo | The Startup | Medium

Megan Lo ・ Oct 26, 2020 ・
Medium

References and useful links :

Var, Let, and Const – What's the Difference?

A lot of shiny new features came out with ES2015 (ES6). And now, since it's 2020, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features. While this assumption might be partially true, it's still possible that some of these features

freecodecamp.org

Difference between var, let and const keywords in JavaScript - GeeksforGeeks

geeksforgeeks.org

The Difference of “var” vs “let” vs “const” in Javascript | by Megan Lo | The Startup | Medium

Megan Lo ・ Oct 26, 2020 ・
Medium

Thanks for reading, feel free to ask any question about javascript or about this series, I appreciate any feedback or advises to improve My content.
find me on twitter, github and my portfolio.

Javascript 1O1 series : Writing loops with For, While and Do while.

Osama — Sun, 17 Apr 2022 05:00:07 +0000

You’ll learn :
About loops statements and their usage, and how to chose the right loop for your code situation.

what are loops :

its a way to execute a certain code repeatedly based on some condition

Loops offer a quick and easy way to do something repeatedly. MDN

we have 3 types of loops in javascript, each of which has its own syntax, use cases, thought all of them do the same thing :execute certain code over and over.

for : loops through a block of code a number of times
while : loops through a block of code while a specified condition is true
do … while : also loops through a block of code while a specified condition is true

For:
its Syntax :

for (counter ; condition ; update the counter after every code execution) {
the code we’ll execute over and over;
}

condition is to decide when to stop the loop or to repeat it once again, most likely it’ll be a comparison between two values and if this condition is true, the loop will keep working.
for be like, hey repeat this code until the condition is met or happen
e.g.

guess what ? this simple code will print 5 different values! how is that ?

how it works and the steps our code will go through :
first define the counter be 0, and as long as counter value is less than 5, print its value and repeat.
and if the counter value is not less than 5, then stop
lets see the steps it goes to execute this code
1/ initiate a counter
2/ set the condition that allow the code to keep executing
3/ execute the code block
4/ update the counter after each execution

e.g.
Print the summation of numbers between 0 and 10 :

while :
The while statement is a more simple version of the for statement which checks if an expression evaluates to true and runs as long as it says true.
Syntax :

while (condition is true) {
execute this code;
}
its like you say, while this condition is true, keep the loop working.

If the condition becomes false, code within the loop will stop executing.

Do while :
syntax :
do {
our code block we want to execute when the condition is tru
} while (the condition)

Do-while loops are useful when you want your code to output some sort of menu to a screen so that the menu is guaranteed to show once.

simply you say, repeat executing the code while the condition is true.

Differences between while and do…while :
in while statement, the condition will be checked first and if it true the code block will be executed.
but when it comes to do while, it execute the code block first and then check the condition whether it is true or not.
it means if our condition is false, in while statement the code block will not be executed, but in do while it will be executed only one.

References and useful Links :

w3schools.com

Conditional statements and loops Practices in Javascript. | by Osama | Apr, 2022 | Medium

Osama ・ Apr 15, 2022 ・
Medium

Loops and iteration - JavaScript | MDN

Loops offer a quick and easy way to do something repeatedly. This chapter of the JavaScript Guide introduces the different iteration statements available to JavaScript.

developer.mozilla.org

JavaScript Loops Explained: For Loop, While Loop, Do...while Loop, and More

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false. A loop will continue running until the defined condition returns false. for Loop Syntax for (initialization; condition; finalExpression) { // code } The for loop consists of three optional

freecodecamp.org

Thanks for reading, feel free to ask any question about javascript or about this series, I appreciate any feedback or advises to improve My content.
find me on twitter, github and my portfolio.

Great collection of Free resources to learn javascript and web development.

Osama — Fri, 15 Apr 2022 12:15:27 +0000

Why you’re here ?
To learn about javascript and web development ?
but you can’t find where-to-go article to help how to start your journey ?
NO worries i got you here!
in this article i’ll share with you a lot of valuable resources, starting from YouTube channels to interactive websites, to help you learn all things about javascript and web development ;).

YouTube channels :
who doesn’t know YouTube and use it every single day ?
you can find great content and tutorials on youtube about everything in programming with full access to any video any time and most importantly, its ALL FREE FOREVER.
actually most self-tought developer these days started their career from this platform (i started from here myself).
Traversy media :

Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP

youtube.com

this channel is a treasure for every beginner on this field and it covers so much programming languages like html ,CSS , JS, python …etc and famous frameworks like React Node.js Express Angular ..etc so you can start with it.

programming with mosh :

I train professional software engineers that companies love to hire. My courses: http://codewithmosh.com My blog: http://programmingwithmosh.com Connect on social media: http://www.twitter.com/moshhamedani https://www.facebook.com/programmingwithmosh #python #javascript #chsarp

youtube.com

mosh hamedani the founder of this nice channel, he has lot of crash course and short videos with animations that make its channel very special

Net ninja :

Black-belt your web development skills. Over 1000 free programming tutorials about: - Modern JavaScript (beginner to advanced) - Node.js - React - Vue.js - Firebase - MongoDB - HTML & CSS - PHP & MySQL - Laravel - React Native - Flutter ...And many more topics as well :)

youtube.com

for me its on my top 10 resources when i need to learn new skill or library or framework and what i really like about this channel is its simplicity and clear explanation on the topics he covers (you’ll found here almost 1000 free videos about web development )

Dev Ed:

Learn web development, web design, 3d modelling, tools like figma and more without getting bored! The goes of this channel is to get you to become as creative you can be! So if you like to create video games in Unity or develop an application in node.js, stick around and have fun!

youtube.com

my favourite YouTube channel to learn web dev , he covers videos on web development, web design, and 3D modelling
also teaching you to use tools like figma and adobe XD.

freeCodeCamp :

Learn to code for free.

youtube.com

one of the best youtube channel for developer , they way of teaching is publish long and fully featured videos (sometimes one video is more than 10 hours ! really good for me )
they also has thier own site where you can find more than 8,000 tutorials , not only videos but also articles
pretty good right ?
give’em a try, site.

Clever Programmer:

You can find awesome programming lessons here! Also, expect programming tips and tricks that will take your coding skills to the next level.

youtube.com

want to learn web development by using what you’ve learned to build real-world projects ?
here the the perfect channel for you
Qazi and sonny are great , funny and creative youtubers with thier clever programmer where they release video on various topics and also building clones of popular websites like amazone , instagram and more
you deffinatly need to check them

Fireship :

High-intensity ⚡ code tutorials to help you build & ship your app faster. Subscribe for new videos every week covering intermediate to advanced lessons about JavaScript, Flutter, Firebase, and modern app development. The original home of #100SecondsOfCode and #CodeThisNotThat. Created by Jeff Delaney. Building an app? Get project support, advanced full courses, and more at https://fireship.io

youtube.com

a good channel contains hundreds of short videos that aims to teach you how to write code in the best way you can and it has alot of videos named ( 100 seconds on topic X ) the idea is to explain a topic in simple way within the 100 seconds , awesome right ?

The new boston :

Tons of sweet computer related tutorials and some other awesome videos too!

youtube.com

one of the oldest channels ever in web development and it covers wide range on programming languages and frameworks like python ,javascript , react angular Django etc also covers graphic editors like Photoshop, Adobe Illustrator, as well as other topics unrelated to development or design

Books :
9 (FREE) JavaScript Books That Are Well Worth Reading
Books are great, but books on subjects that evolve as fast as JavaScript can be a problem. While shiny and new one…

blog.bitsrc.io

5 Free Books to learn JavaScript for Beginners
The internet is full of good things, and one of them is free eBooks and PDF. Programmers can almost run anything by…

5 Free Books to learn JavaScript for Beginners | by javinpaul | Javarevisited | Medium

javinpaul ・ Oct 31, 2021 ・
Medium

Free JavaScript Books
by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

Free JavaScript Books. by Bradley Nice, Content Manager at… | by Bradley Nice | Level Up! | Medium

Bradley Nice ・ Sep 28, 2018 ・
Medium

28 Ebook And Course Free For Web Development
For me, books or online courses can be considered as extremely useful resources in learning and... Tagged with html…

28 Ebook And Course Free For Web Development

Niemvuilaptrinh ・ Jan 25 '21 ・ 5 min read

#html #css #javascript #beginners

Top Free eBooks for Web Designers & Web Developers
by Bradley Nice, Content Manager at ClickHelp.com — help authoring tool

Top Free eBooks for Web Designers & Web Developers | by Bradley Nice | Web Development Zone | Medium

Bradley Nice ・ Sep 21, 2018 ・
Medium

Sites :

w3schools.com

javascript.info

Learn JavaScript: Tutorials for Beginners, Intermediate and Advanced Programmers Learn JavaScript: Tutorials for Beginners, Intermediate and Advanced Programmers

If you want to learn Javascript to pursue a career in development, then you are in the right place. Here are the best Javascript tutorials.

stackify.com

singlepageappbook.com

for more read here

prefer reading articles and blogs ? no problems

Medium : where you read this articles now.

Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic. according to medium.

Dev.to : is

DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. according to Dev.to

FreeCodeCamp :

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all free. — freecodecamp

Other links may be useful :

13 Online Resources to Learn Javascript for Every Level

Whether you’re a beginner coder or a professional developer, these free resources will help you level-up your JavaScript game.

fullstackacademy.com

google.com

10 Best Websites to Learn JavaScript Coding for FREE — Best of Lot | by javinpaul | Javarevisited | Medium

javinpaul ・ Apr 15, 2022 ・
Medium

Places to Learn JavaScript Online

Want to dip your toes into the world of JavaScript? To learn JavaScript, check out the free and paid options for training and certification online.

thebalancecareers.com

Best Free Resources To Learn JavaScript - Lifehack

If you have no previous programming experience but interested in learning programming, JavaScript is the best option for you. Best free resources to learn JavaScript.

lifehack.org

13 Online Resources to Learn Javascript for Every Level

Whether you’re a beginner coder or a professional developer, these free resources will help you level-up your JavaScript game.

fullstackacademy.com

The ultimate and free JavaScript resources

Rahul ・ Nov 17 '20 ・ 3 min read

#javascript #webdev #github

Thanks for reading, and feel free to ask any question about javascript or about this series and i appreciate any feedback to improve My content.
find me on twitter, github and my portfolio.

Conditional statements and loops Practices in Javascript.

Osama — Thu, 14 Apr 2022 09:17:34 +0000

You’ll learn :
More about conditional statements if, if else and switch and get better with using them the right way, also you’ll learn when and how to chose one loop statement over others.
Conditional statements :

1/ Check a number is even or odd :

2/ Find the largest between two numbers :

3/ simple switch code

3.5/ Switch code

4/ Simple calculator with if else :

5/ Simple calculator with switch :

Loops :
1/ Print the summation of numbers between 0 and 10 :

2/ Write a code to print numbers from 1 to 10 :

3/ print only even numbers between 0 and 20

4/ simple while loop :

all in one example :

References :
https://www.programiz.com/javascript/while-loop , https://www.learn-js.org/en/Loops , https://education.launchcode.org/intro-to-professional-web-dev/chapters/loops/exercises.html , https://www.programiz.com/javascript/for-loop

Thanks for reading, and feel free to ask any question about javascript or about this series and i appreciate any feedback to improve My content.
find me on twitter, github and my portfolio.

Javascript console.time(), What is it?

Osama — Wed, 13 Apr 2022 17:30:23 +0000

The console.time() method starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started. MDN

Syntax :
we first define our timer with console.time and then write the code we need to measure how long it takes to execute and lastly we stop the timer and log the time with console.timeEnd()

you can use console.time() to measure how long any task in your code will take to run, so it’s useful what tasks takes long time and then you split the logic of this task into smaller tasks to improve your code performance, since javascript is single-threaded language, any task that take a lot of time will effect your site or application performance badly or even make it not interactive for seconds which is the worst thing may happen.

Thanks for reading, and feel free to ask any question about javascript or about this series and i appreciate any feedback to improve My content.
find me on twitter, github and my portfolio.

DEV Community: Osama

How To Choose The Right Framework For Your Next Node.js App.

How To Choose The Right Framework For Your Next Node.js App.

Choosing the proper framework that suits your needs is one of the most important things you need to do before doing anything, Express is a great choice but there are a few alternatives that can do better for you.

What is a web framework:

How do you choose the right framework for your App:

Express:

Pros:

Cons:

Companies that Use Express.js:

Koa:

Pros:

Cons:

Companies that Use Koa.js:

Hapi:

Pros:

Cons:

Companies that Use Hapi.js:

Fastify:

Pros:

Cons:

Companies that Use Fastify.js:

Nest:

Pros:

Cons:

Companies that Use Nest.js:

IF YOU DECIDE TO GO WITH METEOR FOR YOUR NEXT PROJECT, PLEASE READE THIS ARTICLES

Ember

Pros:

Cons:

Companies that Use Ember.js:

Backbone

Pros:

Cons:

Companies that Use Backbone.js:

Meteor:

Pros:

Cons:

Companies that Use Meteor.js:

IF YOU DECIDE TO GO WITH METEOR FOR YOUR NEXT PROJECT, PLEASE READE THIS ARTICLE

My personal opinion:

Preferences :

Advanced Node.js Topics: Caching.

Improve your Server Performance By Caching often Fetched Data using Redis.

Introduction:

case use:

Cache vs no Cache:

Installation:

Install Redis on your machine

Install node-Redis to your project:

Quick start with Redis:

connect to Redis server:

Real-world example:

The caching mechanism:

key creation:

Wrap up:

References:

Docker: Brief Introduction.

Docker: Brief Introduction.

Learn about Docker containers, images, installations and everything you need to know about Docker.

About Docker :

Why use Docker:

Main Concepts:

Containers:

Image:

DockerFile:

The process of containerization your code:

Installation:

Resources:

Side project: Life-Advise Web App

Side Project: Life-Advise Web App

Offline-first PWA for fetching advice and sending notifications to users.

About the app:

Repos for the app:

App pages:

Favourites:

Random:

All :

Technologies I used:

Client-Side Technologies:

Megan Lo ・ Oct 26, 2020 ・
Medium

Megan Lo ・ Oct 26, 2020 ・
Medium

Osama ・ Apr 15, 2022 ・
Medium