Categories
frontend javascript web development

Best FREE resources for learning ES6

Hey everyone 👋🏻,

In this article, I will share some of the BEST FREE resources for learning ES6 along with the links to those articles.

ES6

Image description

let –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

Variables and Scoping in ES6 –http://2ality.com/2015/02/es6-scoping.html

Template Literals –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Arrow Function Expressions – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow Functions VS Normal Functions –
http://exploringjs.com/es6/ch_arrow-functions.html#sec_arrow-func-vs-normal-func

for-of loop – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of

default parameters –

named params –

http://exploringjs.com/es6/ch_parameter-handling.html#sec_named-parameters

rest params –

https://medium.freecodecamp.org/es6-tagged-template-literals-48a70ef3ed4d

Tagged Templates –

https://medium.freecodecamp.org/es6-tagged-template-literals-48a70ef3ed4d

De-structuring Assignment 

Shorthand Properties 

ES6 Modules
-> CommonJS
-> AMD

https://auth0.com/blog/javascript-module-systems-showdown/

Promises
-> then –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
-> catch –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
-> finally –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
-> all –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Classes in ES6 –
http://exploringjs.com/es6/ch_classes.html

Object.assign –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Async Await –
http://exploringjs.com/es2016-es2017/ch_async-functions.html

Symbols –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Maps and WeakMaps –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

Sets and WeakSets –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet

Iterator Protocol –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol

Proxy –
https://codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2

Generators –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

Iterators and Generators –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

function*
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

yield
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield

yield*

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
frontend javascript web development

Frontend Developer Roadmap

Hey guys 👋🏻,
In this article, let us understand the roadmap that will help you in becoming a Frontend Developer in 2021.

Image description

Step 1:

First learn HTML, CSS and JavaScript

Image description

Step 2:

Work on your own projects to build skills and then work on LIVE projects. Go grab some internship to get some working experience on various technologies.

Image description

Step 3:

Pick and learn one frontend framework of your choice. Again go back to Step 2. After Step 2, proceed to Step 4.

Image description

Step 4:

Start applying for Frontend Developer jobs or become a Freelancer once you start to feel confident of your skills.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
javascript

Beginner JavaScript – 4 – Host Environment in JavaScript

✨Beginner JavaScript – 4 – Host Environment in JavaScript

Hey everyone 👋🏻,

In this article, let us discuss about the Host Environment in JavaScript. This is the fourth part of my Beginner JavaScript Series on Dev.

Host Environment in JavaScript

Alt Text

What do you mean by a Host Environment ?

This essentially means that Javascript runs on a host environment,
so you can execute your JavaScript code in different environments. The most well known environment is the browser, modern browsers have Javascript engines built in and they’re therefore capable of executing Javascript code but you also can run Javascript in other environments, for example on the server side, so right on a computer without having a browser in between, so not inside of a browser but simply execute code like this on your machine using Node.js

Check this video where I explain Host Environment

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 3 – Dynamic, Interpreted and Weakly Typed Nature of the JS Language

✨Beginner JavaScript – 3 – Dynamic, Interpreted and Weakly Typed Nature of JS Language 

Hey everyone 👋🏻,

In this article, let us discuss about the Dynamic, Interpreted and Weakly Typed Nature of the JS Language. This is the third part of my Beginner JavaScript Series on Dev.

Dynamic, Interpreted and Weakly Typed Nature

Alt Text

Dynamic

Dynamically-typed languages are those (like JavaScript) where the interpreter assigns variables a type at runtime based on the variable’s value at the time. So in essence this means that value’s type is enforced, but the variable simply represents any value of any type.

Alt Text

Weakly Typed

Weakly typed means the compiler, if applicable, doesn’t enforce correct typing. Without implicit compiler interjection, the instruction will error during run-time.

Check this video where I explain Dynamic, Interpreted and Weakly Typed Nature of the JavaScript Language

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 2 – How JS Code is Executed in the browser ?

✨Beginner JavaScript – 2 – How JS Code is Executed in the browser?

Hey everyone 👋🏻,

In this article, let us discuss about how JS Code is Executed in the browser. This is the second part of my Beginner JavaScript Series on Dev.

How JS Code is Executed inside the browser ?

The source code that you and I write is first passed through a program called a compiler, which in turn translates it into something called as the bytecode which the machine can understand and execute.

Contrary to this, JavaScript has no compilation step. Instead, an interpreter in the browser goes over your entire JavaScript code, interprets it line by line, and then runs it.
Some of the more modern browsers use a technology known as Just-In-Time compilation, which compiles JavaScript to executable bytecode just when it is about to run.

Alt Text

Alt Text

Check this video where I explain How JavaScript Code is Executed in Browser

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 1 – The Language and How Web Works ?

✨Beginner JavaScript – 1 – The Language and How Web Works ?

Hey everyone 👋🏻,

In this article, let us discuss about the JavaScript Language and How the Web Works. This is the first part of my Beginner JavaScript Series on Dev.

The Language and How the Web Works

JavaScript is a powerful, event-driven, dynamic and flexible programming language. It can execute on a web browser that allows us to make interactive webpages such as popup menus, animations, form validation.

So the moment you enter the URL address in your browser and hit ENTER, some things happen under the hood. Let us understand them.

Alt Text

  1. The first thing that happens is the resolution of the URL.
  2. An HTTP request is sent to the server of the website.
  3. The response of the server is then parsed.
  4. Finally the page is rendered and then displayed.

Check this video where I explain the Language and How the Web Works:

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
ejs html javascript mongodb nodejs template engines web development

Rendering Dynamic Content and Template Engines

✨Rendering Dynamic Content and Template Engines

Hey everyone 👋🏻,

In this article, let us learn about how we can render dynamic content to the client (which is not static). Let us first touch briefly on what a template engine is because rendering dynamic content is closely related to what a template engine will help us in achieving.

Template Engines – a brief overview

Image description

A template engine is software designed to combine templates with a data model to produce multiple pages that share the same look throughout the site. These are the views in an MVC project.

So this helps us in putting dynamic content on our HTML pages.

We got a HTML like template (technically not HTML) which is typically a file that contains a lot of HTML like content in it but with some placeholders plugged into it and then we have a server (a Node.js Express server or any other server) serving the Node/Express content and then you have a templating engine.
that replaces placeholders with HTML content but that content is generated on the server dynamically on the fly taking that dynamic content into account.

Some of the common template engines :

1. EJS

EJS Uses normal html and plain javascript in your templates.

Image description

EJS provides us clean syntax that easily mixes with HTML and provides the flexibility to write the JavaScript code inside the templates.

Dynamic content to be rendered in the above example is name. The value of the name variable will be rendered as an HTML page’s paragraph with value of name getting rendered on the fly.

2. Pug

PUG uses minimal HTML and custom template language.

Image description

3. Handlebars

Handlebars uses normal HTML and custom template language

Image description

The side effect of Handlebars template compared to Pug is that we cannot run any logic in the Handlebars template we need to pass a variable that has a value true or false(i.e logic is performed outside and passed into hbs template) and then we can render dynamic content.

This keeps our templates lean and all our logic should live while making sure that all our logic lives in our backend code. It works on the philosophy of less logic in the template and more logic in the node express code.
So you have to prepare everything there so that inside the template you don’t have to write any JavaScript expressions.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
css html javascript mongodb nodejs web development

(2021) – Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

✨Web Developer Full Course

Alt Text

I recently started to create a Full Web Developer Course on my YouTube Channel and recently finished with the HTML and the CSS Section of this FREE course. More videos will be up on upload.

HTML Section

CSS Section

JavaScript Section

This section covers the basics of JavaScript along with the modern features that the language offers. We cover concepts like :

  1. JavaScript Basics (variables, loops, conditionals, functions)
  2. JavaScript Types (Strings, Numbers, Objects, Booleans, Functions, Symbols)
  3. Immediately Invoked Function Expressions
  4. Document Object Model (DOM) – Querying, Traversal, Inserting and Removing Elements from the DOM
  5. Arrays and Iterables
  6. Mutator methods – push, pop, shift, unshift, splice
  7. Other array methods like – slice, indexOf, findIndex, find, sort, reverse
  8. Higher Order Methods – filter, reduce, map
  9. Split and Join Methods
  10. The spread operator
  11. Sets and Maps
  12. Understanding the this keyword in JavaScript
  13. Overview of Objects, Constructor Functions, Classes, OOP, Instance and Static Methods, Inheritance
  14. Events – Adding and Removing Event Listeners
  15. Event Capturing – Bubbling Phases, Propagation and Event Delegation
  16. Asynchronous JavaScript – Event Loop (Call Stack, Message Queue)
  17. Asynchronous JavaScript – Understanding Promises and Error Handling
  18. Asynchronous JavaScript – Promise.race, Promise.all, Promise.allSettled
  19. Demystifying Async Await, From Promises to Async Await
  20. Scopes in JavaScript, Closures
  21. Symbols in JavaScript
  22. Iterators and Generators in JavaScript
  23. The Concept of Pure and Impure Functions in JavaScript
  24. Understanding Hoisting in JavaScript

AND MORE….

A lot of exercises and projects were made in this section of the course.

Here are the Projects that we made in this JavaScript Section :

Building COVID-19 Tracker Application using JavaScript and Mapbox

Making a Todo List Application in JavaScript using Custom Events

Implementation of Infinite Scroll in JavaScript

10 JavaScript Projects in 2 Hours 

Node.js Section
COMING SOON

MongoDB Section
COMING SOON

Make sure to subscribe to the channel for more such videos.
A lot of AWESOME videos are coming this month… So make sure to SUBSCRIBE to the channel for more amazing videos.

Follow me on Twitter for more updates: https://twitter.com/The_Nerdy_Dev

Categories
javascript reactjs

What is REST API ?

✨What is REST API ? 

Alt Text

Hey everyone ??,

In this article, let us learn about one of the most important concepts that you as a backend developer must have a solid knowledge of (because anyways working with an API is a big part of your jobs) and that is REST APIs

REST APIs

Cover image for What is a REST API ?

Actual definition:

“”
Representational state transfer (REST) is a software architectural style that was created to guide the design and development of the architecture for the World Wide Web. REST defines a set of constraints for how the architecture of an Internet-scale distributed hypermedia system, such as the Web, should behave. The REST architectural style emphasises the scalability of interactions between components, uniform interfaces, independent deployment of components, and the creation of a layered architecture to facilitate caching components to reduce user-perceived latency, enforce security, and encapsulate legacy systems.
“”

Now you must be wondering : “What the heck does this mean ?”

Alt Text

Anyways, let us make it super simple and understand what a REST API is piece by piece.

Now before we understand why we use a REST API, we first need to understand what problems does it solve ?

REST APIs are there to solve one problem you can say that not every frontend (UI) requires HTML pages. Not every UI wants your server code to generate HTML pages which effectively is the UI.
Think about mobile apps these apps typically do not work with server side rendered HTML code. They do not need a templating language on server side to render the HTML code because you use a rich suite of prebuilt libraries for UI provided by Google or Apple to build your UI in the respective IDEs of these programming languages.

Alt Text

You build these User Interfaces totally decoupled from your server side logic. You don’t want HTML code because you can’t really render it there. Obviously you have browsers in your phone and that will render HTML pages.

But most of the applications do not use HTML to build their user interfaces but the tools that are provided by Google or by Apple and then you only need data to fill these user interfaces to life.

For building these amazing and sleek looking user interfaces on the frontend we have frontend technologies like React, Angular, Vue etc.

Alt Text

So we have a frontend that is decoupled from a certain backend logic like Google Maps (Server) and we only exchange data because we don’t need the HTML code but just the data. We built the User Interface on our own. So we just need a backend server that can typically serve us just the data that we need and then we can easily fabricate our user interfaces as per our requirements.
So, this in essence is the core idea behind the REST APIs.

Alt Text

REST stands for Representational State Transfer which means
that we transfer data (some form of state you could say) instead of user interfaces. We just want our server to send us data and we leave it to our client side app be it a mobile application or be it a single page application to do whatever it wants to do with this data. Thus in traditional web applications we rendered the views on the server side using templating engines and handled both the data and the UI . This is not bad at all it is a common pattern for a lot of web applications

Traditional Web Apps and REST APIs – ONLY THE RESPONSE DATA DIFFERS

Alt Text

Often traditional web applications and the REST APIs are seen as totally two different things. They are not, they only differ in the response and the kind of data that you expect but they don’t differ at the server besides the fact that you do not render
the view there on the server. Here we use all knowledge that we gathered we only fine tune the data handling and finally deliver it to the client in the format in which it is required by the client.

A MAGNIFIED AND CRYSTAL CLEAR PICTURE OF THE REST APIs

Alt Text

So consider this scenario where we have our client (a mobile app, SPA) and then we have our server on which we build our backend REST API.

Now one possible advantage of this can be that we can make one and the same API for handling multiple clients and this is possible because both our mobile apps and web apps rely on the same data source, right. In fact, both the apps are same and consume the same data source. The only difference could be on how they present this data in their user interfaces.

Contrary to this, we can also have kind of a traditional application which just needs our service APIs. And in all such applications it is the data which is exchanged between the client and the server.

WHAT FORMAT DO WE EXCHANGE THE DATA IN

Some of the common formats that we most likely see are :
1.HTML
2.XML
3.JSON etc.

So there are different kinds of data that we can attach to the request and the response objects. So we can send plain text, XML or we could even send JSON.

There are different kinds of data that we can attach to the
request and the response objects. We can send plain text,XML or we could send JSON.

XML

Alt Text

Introduction

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. In this article, let us see some cool projects that you can make to make the process of learning React extremely easy.

It looks a lot like HTML. XML allows us to use any tags. It allows us to send any data and does not make assumptions about the user interface because it is not parsable by browsers. They are user defined elements.
These are machine readable but relatively verbose but you can define clear structures here. Here an XML parser is needed because node traversal in XML node tree is kind of a challenge in itself. So in essence you need an XML parser to efficiently parse the XML data.

JSON

Alt Text

JSON is kind of a defacto standard for data interchange in web applications. Here also we work on just the data and the JSON does not make assumptions about the user interface. It is machine readable and a bit more concise than XML and can easily be converted to Javascript.
This is a huge plus when working with Node.js on the server and JavaScript on the browser. It is the most common format used in any of the APIs that you are communicating with these days.

Routing and HTTP methods

Now we know our web works on request and response cycle. So we have a client that interacts with the server in form of requests and response to get the data that it needs and more. Check my video on Client Server Architecture to know more regarding this :

So this is how we communicate with our server. In the REST World, these communications take place in form of paths which are known as API Endpoints

API ENDPOINT = ANY COMBINATION OF THE HTTP METHOD AND THE RESPECTIVE PATH
These are the endpoints that we define on our REST API and we
also define some logic that should get fired when such a request reaches our end point.

HTTP METHODS

More than just GET AND POST(These are only when we are working with links and forms), we have other HTTP methods as well that the browser natively knows of. So here is a short summary of the HTTP methods that our request client has access to.

GET – Get a resource from the server

POST – Post a resource to the server which is responsible for creating or appending a resource to an already existing array of resources so to say.

PUT – Put a resource onto the server(i.e create or overwrite a resource). Post should never overwrite an existing resource though it can do but it is not recommended

PATCH – Update parts of the existing resource on the server(not overwriting the entire resource but the parts of it)

DELETE – Delete a resource on the server

OPTIONS – Determine whether follow up request is allowed(sent automatically by the browser)
This is automatically sent by the browser to find if the next request it tries to do is allowed or not.
It is the best practice to use these methods in this way though you can do anything you want

This way any one who uses your API clearly knows what to expect for a given method

REST PRINCIPLES

Alt Text

1. Uniform interface, clearly defined API endpoints with clearly defined request and response structures
IOW, your API should be predictable and also it should be well documented if it is open to the public.
So people should know what data your API expects and what data it gives back.

2. Stateless interactions
When building the server and the client, the server and the client are totally decoupled and they don’t share a common history
,every request is handled separately. And therefore no sessions can be used since no connection history is shared among the client
and the server. Every incoming request is treated as if no prior request was sent. Server has a look on every request on its own. It does not store a session about the client.

You can just build an API and open it to the public and just present the documentation of its usage to the client.
You don’t care at all about the clients. You just say here is the endpoints I have ,here is the data you get for each of the well-defined endpoints.
So in essence, we have a strong decoupling between the client and the server even if they were to run on the same server because we are building the API for our application so that they work independently from each other and just exchange data without sharing the connection history.

3.Cacheable

Alt Text

You could send the client some response headers telling the client for how long the response is valid.
Servers may set caching headers to allow the client to cache responses.

4.Client-Server
Client and Server are separated,client is not concerned with persistent data storage.It is the responsibility of the server.

5.Layered System

Alt Text

As a client we send a request to a server, we can’t rely on that server we sent it to to immediately handle the request, the server may handle the request to other server or distribute it to other servers if it is busy.
Ultimately we care about the data that we get back which should follow the structure that was defined by the API.

6.Code on Demand

Alt Text

REST API could also for some end points transfer executable code to the client.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

REST API could also for some end points transfer executable code to the client.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript

10 JavaScript Projects Every Beginner Should Try

⭐10 JavaScript Projects Every Beginner Should Try

Hey everyone,

In this article, let us see 10 JavaScript Projects Every Beginner Should Try.

Introduction

JavaScript is the language that powers the web and a language that you must know if you want to become a web developer. It is also one of the most popular programming languages in the community. In this article, let us see 10 Projects that you can build to get hired and get a place in the industry.

1. Modals

Creating a Modal using Classes in JavaScript. A fun and interesting project to practice DOM, Event Handling and Classes.

What will you learn?

1. Document Object Model
2. Event Handling
3. Classes and Object Oriented Programming

2. Tabs

Implementing a Tabs System in JavaScript.

 What will you learn?

1. Document Object Model
2. Event Handling
3. Classes and Object Oriented Programming

3. Range Slider

Implementing a Range Slider in JavaScript especially an RGB slider to change values for the R, G and B components and to reflect the changes in the background.

What will you learn?

1. Document Object Model
2. Event Handling
3. Classes and Object Oriented Programming
4. Higher Order Methods like forEach

4. Slideshow

Implementing a Slideshow in JavaScript to change slides in the horizontal way.

What will you learn?

1. Document Object Model
2. Event Handling
3. Classes and Object Oriented Programming

5. Salary Calculator

Input a Salary for the user and generate the value for different components/allowances like house rental allowance etc.

What will you learn?

1. Document Object Model
2. MVC pattern
3. Event Handling

6.Scroll Indicator

A basic app to demonstrate the amount of scroll that the user makes.

What will you learn?

1. Document Object Model
2. Event Handling

7. Intersection Observer

Implementing Infinite Scroll Feature using Intersection Observer API.

What will you learn?

1. Document Object Model
2. Event Handling
3. Intersection Observer API

8. Playing with Text

Playing with Text like reversing a text, changing font size, changing the font style into bold, italic, underline etc.

What will you learn?

1. Document Object Model
2. Event Handling

9. Custom Search Filter

A small application that demonstrates adding items to a list, removing items from a list and filtering an item based on some search term.

What will you learn?

1. Document Object Model
2. Event Handling
3. Higher Order Methods like forEach

10. Sticky Navbar

A simply sticky navbar.

What will you learn?

1. Document Object Model
2. Event Handling

So this is it for this article. Thanks for reading.

Here is the video link if you want to create all these projects from scratch :

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.