Forem: Tej

JavaScript

Tej — Fri, 01 Nov 2019 23:48:20 +0000

freeCodeCamp

Project Title	Project Link
JavaScript Algorithms and Data Structures Certification	View Demo

Gatsby

Project Title	Project Link
JSXP	View Demo
Blog	View Demo

Vanilla JavaScript

Project Title	Project Link
Accordion	View Demo
Alarm	View Demo
Anti Chat	View Demo
Basic Fetch API	View Demo
Basic Web Crawler	View Demo
BetaKit RSS Compiler	View Demo
Calculator	View Demo
Captcha	View Demo
Cat Me	View Demo
Cat in Space	View Demo
Check Unicode of a String	View Demo
Checkout page	View Demo
Color Picker	View Demo
Corona Virus Cases Tracker	View Demo
Counter	View Demo
Dark Internet	View Demo
Daylight Saving Timezone	View Demo
Dinky	View Demo
Eye Examination	View Demo
Editable Text page	View Demo
Functions	View Demo
Humans	View Demo
Iterators in JavaScript	View Demo
Load Video+Content	View Demo
Local Library page using Object Prototypes	View Demo
MDN Periodic Table	View Demo
Modal	View Demo
NaMo Memes	View Demo
News Fetch API	View Demo
News	View Demo
One Month Weather Tracker	View Demo
PetBar	View Demo
Program Structure	View Demo
Radio Stations	View Demo
Random Text Generator	View Demo
Regular Expressions	View Demo
Shutter Menu	View Demo
Slider	View Demo
Solo Cricket	View Demo
Stars	View Demo
Tabs	View Demo
Toronto	View Demo
YouTube Playlist Duration Calculator	View Demo
Wall Clock	View Demo
Windows XP Screensaver	View Demo

React

Project Title	Project Link
Angular	View Demo
Booster	View Demo
Boredom	View Demo
BB API	View Demo
CDNJS	View Demo
CWC19	View Demo
CWC19 Team Directory	View Demo
Dog Breeds	View Demo
Events in Toronto	View Demo
FEDTimes	View Demo
Festivals in Toronto	View Demo
FreeCodeCamp Full Curriculum	View Demo
Gindeed	View Demo
GitUD	View Demo
Gyaan	View Demo
HackerNews	View Demo
Happy Birthday Playlist Tracker	View Demo
Harvard Art Museum	View Demo
Hukamama	View Demo
Indian Geography	View Demo
IPTV	View Demo
Jackal	View Demo
LearnYou	View Demo
Multiple Images	View Demo
Numbers	View Demo
Radio Stations (Punjabi Edition)	View Demo
Radio Stations (Toronto Edition)	View Demo
Reminder	View Demo
Sikh Gurus	View Demo
Singers	View Demo
Stations in Toronto	View Demo
Surnames	View Demo
TTC	View Demo
TV Channel Employees	View Demo
TV Series	View Demo
TikTok	View Demo
University List	View Demo
WWE Superstars	View Demo
Waste Wizard	View Demo
Watch a Live TV	View Demo
Weather	View Demo
Web Jokes (Norris)	View Demo
Web Jokes (Random)	View Demo
YouTube Channel API	View Demo

Redux

Project Title	Project Link
CRUD Operations using React Context	View Demo
Redux Basics	View Demo
Engineering (Modern React+Redux Workflow)	View Demo

React in Professional World

Project Title	Project Link
Bind Static Data to UI	View Demo
PWA with Styled Components	View Demo
The Star Wars API	View Demo

React

Tej — Tue, 29 Oct 2019 15:30:14 +0000

Symbol	Description
💡	Project developed in order to understand a concept
📕	Project is no longer maintained
👶	Project content is not updated regularly
📝	Project is based on an exercise from a book
🔥	My favorite projects

React

Project Title	Project Link
Boredom 📕	View Demo
CWC19 📕	View Demo
Dog Breeds 📕	View Demo
fccFC 🔥	View Demo
GitUD 📕	View Demo
Gyaan 📕	View Demo
HackerNews 📕	View Demo
Hukamama 🔥	View Demo
Indian Geography 📕	View Demo
Numbers 📕	View Demo
Singers 📕	View Demo
TV Channel Employees 📕	View Demo
Reminder 📕	View Demo
Sikh Gurus 📕	View Demo
Surnames 📕	View Demo
Festivals in Toronto 📕	View Demo
Events in Toronto 📕	View Demo
Stations in Toronto 📕	View Demo
TV Series 📕	View Demo
Weather 📕	View Demo
WWE Superstars 📕	View Demo
Web Jokes (Random) 📕	View Demo
Web Jokes (Norris) 📕	View Demo
Waste Wizard 📕	View Demo
Radio Stations (Punjabi Edition) 🔥📕	View Demo
Radio Stations (Toronto Edition) 🔥📕	View Demo
University List	View Demo
Gindeed	View Demo
Booster	View Demo
CDNJS	View Demo

Redux

Project Title	Project Link
Redux Basics 📝	View Demo

ES6

Tej — Sun, 27 Oct 2019 21:00:25 +0000

Course Credits

FreeCodeCamp
Dylan Israel
Course Link: View.

Template Literals

const fruit = "🍌";
const milk = "🥛";
const bananaShake = (fruit, milk) => `(${fruit}) Banana (${milk}) Milk shake is ready.`;
console.log(`${bananaShake(fruit, milk)}`);

Destructuring

Objects

const purchasedItems = {
  fruit: "🍇",
  vegetable: "🥕",
  bakery: "🍪"
};
const { bakery } = purchasedItems;
console.log(`Hungry? How about try a ${bakery}?`);

Arrays

const cart = ["🍇", "🥕", "🍪", "🥩"];
const [item] = cart;
console.log(`Cashier scanned ${item} first.`);

Object Literal

const boilEgg = (egg, water, salt) => {
  const recipe = {
    egg,
    water,
    salt
  };
  console.log(`Get a saucepan, Add 3 cups ${recipe.water} and a pinch of ${recipe.salt}. Throw ${recipe.egg} and boil for 10 minutes.`);
}
boilEgg("🥚", "🚰", "🧂");

For of loop

let bill = 0;
const receipt = [1.99, 13.67, 14.21, 5.27];
for(const item of receipt) {
  bill += item
};
console.log(`Your total bill is $${bill}.`);

Spread operator

const purchasedItems = {
  fruit: "🍇",
  vegetable: "🥕",
  bakery: "🍪"
};
const juiceRecipe = {
  ...purchasedItems,
  kitchen: "sugar",
  device: "blender"
};
console.log(`Trying a ${juiceRecipe.vegetable} juice.`);

Rest operator

const cart = [];
const addItem = (...items) => console.log(`${items} added in the card. Total items in the cart: ${items.length}.`);
addItem("🍎","🥭","🍍","🍌");

Arrow Functions

const shoppingBag = [
  {id: 1, name: "🥭", type: "fruit"},
  {id: 2, name: "🍎", type: "fruit"},
  {id: 3, name: "🍌", type: "fruit"},
  {id: 4, name: "🥕", type: "vegetable"}
];
const findVegetable = shoppingBag.filter(item => item.type === "vegetable");
findVegetable ? console.log(`${findVegetable.length} vegetable found in the bag.`) : console.log("Forgot to buy vegetables.");

Default Params

const readyToCheckout = (limit = 10) => limit <= 10 ? console.log(`Today, shopping was in budget.`) : console.log(`Today, lot of items were bought.`)
readyToCheckout(23);

Array.includes

const receipt = ["🍎","🥭","🍍","🍌"];
receipt.includes("🍌") ? console.log(`You bought bananas?`) : console.log(`How come there are no bananas?`);

Let & const

let apple;
apple = "🍏";
console.log(`Green Apple: ${apple}`);
apple = "🍎";
console.log(`Red Apple: ${apple}`);
const banana = "🍌";
console.log(`Banana: ${banana}`);
banana = "🌯"; // WRONG

Export & import

Example: View source.

String.padStart(), String.padEnd()

let apple = "🍏";
let banana = "🍌";
const dozenApples = apple.padStart(12, apple);
const dozenBananas = banana.padEnd(12, banana);
console.log(`Buy dozen apples: ${dozenApples}. Total apples: ${dozenApples.length}`);
console.log(`Buy dozen bananas: ${dozenBananas}. Total bananas: ${dozenApples.length}`);

Classes

Example: View source.

Trailing commas

Trailing commas after function arguments, object declaration works, is not recommended.

Async/Await

Example: View source.

Sets

let cart = new Set(["🍇", "🥕", "🍪", "🍪", "🍪", "🍪", "🥩"]);
console.log(`Total unique items in the cart: ${cart.size}`);

MERN

Tej — Fri, 18 Oct 2019 17:46:13 +0000

Symbol	Description
💡	Project developed in order to understand a concept
📕	Project is no longer maintained
👶	Project content is not updated regularly
📝	Project is based on an exercise from a book
🔥	My favorite projects
Source	Repository

Project Title	Project Link
Basics	Express API concepts
Fake Team	Fake Team handles all CRUD operations for REST API. It enables input validation using Joi.
Rest API with Mongoose	ES6 compatible code structure of REST API with CRUD operations
Share Idea	Simple React Application built on basic REST API and MERN stack: Demo
Bakery Store	Web site built using Express
Share Projects	MERN site to add, edit, delete, view Project links: Demo
Muft	An online application to listen to free radio stations : Demo
Google Images Search	An online application to scrape 100 google images based on timing filter : Demo

Current Status: Chapter 3(a) in progress...

Jargon

FSO: Full Stack Open
Client: Local user device
Server: Host machine where site is stored

This post is a living document. It will get updates as I proceed through University of Helsinki's curriculum. It will serve as a complete documentation of my journey/experience/knowledge achieved from the course.

Course: Link.

History

The motivation behind this post is to turn my creative idea into a full-stack web application. From this germination of seed, arisen the need for the tools. Hence, I researched and came across FSO's curriculum which captured my interest.

Motivation

My purpose behind this post is to share my knowledge while I learn core principles and put them in practice. As you follow along with this post, you may have to come up with your motivation factor, that will bind your interest in learning full-stack development principles.

Timeline

No bells and whistles. This post strictly focuses on serious learning. No hard timelines associated. Follow the post at your own pace and I will make updates here whenever I complete a theoretical module and fully understand the topics at hand.

Fundamentals of Web Applications

Requirements

Install Google Chrome and Firefox
Learn how to use Developer tools in each browser (especially Network tab, Console tab, Inspector/Elements tab)

Client/Server Communication

Reference Project: Link.

While you open link above, Keep Network tab open in developer tools. Check Disable cache option. Each time you reload the link above, client will send an explicit request to server for each asset if "Disable Cache" is checked: Link.

Client communicates with Server using HTTP protocol: Link.

Network tab is place where you can see the entire process in action. Reload the page and you will see two HTTP requests were sent to the server, one for the HTML page and other for the Image with response 200.

When you click each request, you can see more options like Request headers, Request response, HTTP header information, Cookies, Params, Type of HTTP request (200/404) etc.

In response header, you can view entire HTML page. This page contains an image tag which initiates another GET request from client to fetch image content from server.

In Firefox, you will see an additional 404 GET request for missing favicon.ico file in meta tags.

HTTP Cycle

From above reference project, we can easily prototype a cycle of HTTP requests as follows:

BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com)
SERVER
HTML code
BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com/kuva.png)
SERVER
Image
BROWSER
Renders the page in the browser.

Traditional web applications

Traditional web applications involved putting business logic on the server which generated HTML pages and added certain dynamic content in those pages which got parsed on the client side like PHP, ASP. In FSO's Referenced Project., Express is running on the server which generates HTML page that gets loaded on the client. Number of notes is a dynamic content in HTML file whose logic resides on the server.

Running application logic on the Browser

In FSO's Reference Project's Notes page, all the business logic for this page is written on the client side. When you load this page in the browser, see the Network tab to understand pattern of HTTP communication. Client makes a request to Notes page on the server, server return HTML page, which further contains a CSS file, JavaScript file. Within the JavaScript file, there is an AJAX method used to further request for JSON file. HTTP requests are triggered to get all these assets. Once JSON file is retrieved, JavaScript file runs the logic that generate DOM elements which get appended to the document.

Event Handlers and Callback Functions

Event handlers and Callback functions are common occurrences in JavaScript. A certain block of code written as a Function, is bound to an event, which gets executed when that particular event happens.

In Notes page, JavaScript file had certain logic where onreadystatechange is an event bound to an event listener function.

Callback function: Link.

Document Object Model

In Chrome's Element tab and Firefox's Inspector tab, you can see tree structure for the entire DOM. In Notes page, we observed JavaScript file had certain logic that create and add HTML Nodes into DOM tree.

DOM: Link.

Manipulating DOM from Console

The top-most node in DOM tree is document. Let's try an example in Console tab to manipulate DOM.

Example Project: Link.

CSS

Notes page has certain styles associated that are present in main.css stylesheet.

Loading a Page containing JavaScript - Revised

HTTP communication pattern for Notes page is as follows:

BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com/notes)
SERVER
HTML code
BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com/main.css)
SERVER
Stylesheet file
BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com/main.js)
SERVER
JavaScript file -> File execution happens on BROWSER
HTTP GET Request (https://fullstack-exampleapp.herokuapp.com/data.json)
SERVER
JSON file
BROWSER
Renders the Notes page in the browser.

Forms and HTTP POST

In Notes page, there is a Form tag in the markup that takes in user input, triggers a POST request upon submission to the server. Server takes the parameters came along with the request, creates an object, adds them in the array and redirects user back to Notes page. See Network tab to investigate the whole process.

AJAX

Notes page uses traditional AJAX approach to get notes data.

AJAX: Link.

Single Page Application

See the revised version of Notes app below, in SPA format. Investigate it using Network tab. The key takeaway is that upon submission, form does not reload the page and HTTP POST is handled in JavaScript file.

Demo: Link.
SPA: Link.

References (Chapter: 0B)

HTML: Link.
CSS: Link.
Forms: Link.
Vanilla JavaScript: Link.
Front/Back Ends: Link.
JS Fatigue: Link.
JS Fatigue (2): Link.

Key Takeaways

Understand Traditional application behaviour vs. Single page application behaviour
Understand function of legacy concepts like AJAX
Understand HTTP communication between Client/Server using Network tab
Understand Event handling, Callback functions, DOM, HTTP Status Codes.

Introduction to React

Create-React-App

Use yarn create react-app test to scaffold a new React project.
Use yarn start to run development environment.

Source: Link.
Arrow Functions: Link.
Components: Link.
ES6: Link.
JSX: Link.
Babel: Link.

Component

Following is an example of a React component. You can run JavaScript logic inside of it. JSX syntax was used to return a block. JSX is compiled into ES2015 syntax using Babel.

Example Project: Link.

Multiple Components

Following is an example of multiple react components.

Example Project: Link.

Props: Passing data to components

Props are used to pass data to components. See example below. We used ES6 destructuring to get specific parameters passed to child component from parent component.

Example Project: Link.

Notes

React component names must be capitalized.
Use console.log() to debug errors.
React component must contain one root element.
Fragments can be used to wrap multiple elements.
Fragments: Link.

Key Takeaways

Get familiar with ES6, JSX, Components, Props, Multiple Components, Components rules, Fragments.

Minor Project

Based on current concepts we covered in FSO, I have built a Create-react-app project which allows user to track/view current Events hosted by Toronto library. The source code for this project is up on Github for your reference. There were some key milestones I achieved during this project. I was able to perform pagination behavior where we you press Load More button at the bottom of App, you merge next set of data into your existing objects. I used Lodash library functions like chunk, sortBy that were helpful to achieve some tasks in this project. Front-end portion of the project is coded using React bootstrap.

Some of the concepts like useState and useEffect were not covered yet. Do not worry about it, focus mainly on separation of concerns like declaring child/parent components, passing props and keeping business logic separate. I will make frequent updates to divide the components into clean nuclear modules with proper naming conventions.

View: Link.
Source: Link.

I would encourage you to build a similar starter app to practice some of the React components we covered so far in FSO curriculum.

JavaScript

Modern JavaScript is updated under ECMAScript standards. Modern JavaScript code is converted into legacy code via Babel. NodeJS allows to run JavaScript out of the scope of browser environment.

Variables

Let allows you to define a variable and change it later. Const does not allow program to change a variable when it is set. Var declaration is deprecated.

Example Project: Link.

Arrays

Arrays allow us to hold any type of data in it.

Example Project: Link.

Array Mutation

To append an item to existing array and clone resulting array in React realm, Use concat.

Example Project: Link.

Destructuring

To store the array item in individual variables, use destructuring operator.

Example Project: Link.

Objects

Object can store key-value pairs where value can be of any data type.

Example Project: Link.

Functions

Example Project: Link.

Concept of Classes / THIS will be discussed in depth during later part of course.

ES: Link.
Babel: Link.
Const: Link.
Let: Link.
JavaScript: Link, Link, Link, Link.
THIS: Link.

Component state, Event handlers

Component helper functions and Destructuring

Component helper functions are logic blocks whose output is rendered by the component. See calculateRun function below.

Example Project: Link.

Page re-rendering, Stateful component and Event handling

Example Project: Link.

A more complex state, debugging React apps

Complex state

Use object to contain multiple state properties. Make use of ES6 spread operator to concatenate original value of state and new state value achieved.

Spread operator: Link.
Example Project: Link.

Handling arrays

Concat: Link.
Push: Link.
Join: Link.
Example Project: Link.

Conditional rendering

Example Project: Link.

Debugging React applications

Use developer console for error debugging.
Use debugger command in your code.

Rules of Hooks

Do not use useEffect and useState inside a loop, conditional expression or inside another component.

Event Handling Revisited

Event handlers must always be a function or a reference to a function.

Example Project: Link.

Passing Event Handlers to Child Components

Example Project: Link.

Do Not Define Components Within Components

Never define components inside of other components.
Make each component into its nuclear entity.

Rendering a collection, modules

Developer Toolkit

Get comfortable using console.log() whenever an issue persists.
VS Code Snippets: Link.
React Snippets: Link.

Higher Order Functions

Rendering Collections

Example Project: Source.
Array indexes as keys: Link.
Import: Link.
Export: Link.

Forms

Example Project: Source.
Controlled Components: Link.
Conditional Operators: Link.

Getting data from server

Example Project: Source.
JSON Server: Link.
Promise: Link.
Asynchronous Loop: Link.
Event Loop: Link.
Axios: Link.
State Hooks: Link.
Effect Hooks: Link.
Effect Procedure: Link.

Altering data in server

Example Project: Source.
JSON Server: Link.
Promise: Link.
Promise Chaining: Link.
Catch: Link.

Adding styles to React app

Example Project: Source.
className: Link.
DOM style: Link.
Inline styles: Link.

Goodies

Yarn

Docs: Link.
Initialize a project: yarn init -y.
Add a dependency: yarn add package_name.
Add a development environment based dependency: yarn add package_name --dev.
Add a global dependency: yarn global add package_name.
Check outdated dependencies: yarn outdated.
Remove a dependency: yarn remove package_name.
yarn-lock.json is an important file and do not ignore it in the repository.
Clean global cache: yarn cache clean.
Run audit: yarn audit.

Workflow

Tej — Thu, 17 Oct 2019 14:05:55 +0000

Gone are the days when Macbooks were seen as a pivot in Front End Development world. At this moment, Front End Development spectrum is blessed where Windows has improved to the point that you no longer need to seek for expensive Mac machines. You could get away with buying a minimal configured machine from Kijiji or eBay, that can run a WSL and continue to build on your next startup idea.

There are only 3 main things you would require on your Windows machine:

Visual Studio Code
WSL (Recommended: Ubuntu)
Hyper (Recommended)
Cascadia Font (Recommended)

Step 1 (Clean up)

Update Windows 10 to the latest patches.
Use dark mode in Windows for toned display. (FLUX App is recommended for developers who have eye sensitivity problems. You can download FLUX using choco install f.lux once you have setup Chocolatey)
Restart the machine and move on to Step 2.

Step 2 (Apps)

Download and install Chocolatey: https://chocolatey.org/install. Think of this as BREW or a package handler for your OS like Yarn.
See list of all available packages here: https://chocolatey.org/packages.
Install and activate WSL. See docs: https://docs.microsoft.com/en-us/windows/wsl/install-win10.
Install VS Code using choco install vscode. Recommended extension: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync, which allows you to download your preferred workstation extensions locally in one go.
Install Hyper terminal using choco install hyper.

Step 3 (Clean up)

Configure VS Code terminal and Hyper to use Bash (WSL).
VS Code will install specific extensions like "Remote WSL for Ubuntu", please complete those processes.
Download and install Cascadia font: https://github.com/microsoft/cascadia-code. Set that as default font in Hyper.
Restart the machine.

Step 4 (WSL Clean up)

Update and clean up the Ubuntu WSL distro using: sudo apt update && sudo apt upgrade && sudo apt dist-upgrade && sudo apt autoclean && sudo apt autoremove && sudo apt purge.

Step 5 (Apps)

Clone the following repository and copy only bash files to your home location in WSL. Command: cd ~ && mkdir Sites && cd Sites && git clone https://github.com/tpkahlon/source-files && cd source-files && cp .bash* ~. Run source ~/.bashrc to restart terminal process to apply changes. In the .bashrc file, you can add aliases specific for your daily development. Only make modifications to .bashrc file as needed in future.
Install git using sudo apt install curl git.
Set up username and email for Git: git config --global user.name "Xyz" and `git config --global user.email "xyz@xyz.com".
Follow the steps to generate and store SSH key in your Github account. Link: https://help.github.com/en/articles/connecting-to-github-with-ssh.
Install NodeJS. Link: https://github.com/nodesource/distributions/blob/master/README.md#debinstall.
Install Yarn. Link: https://yarnpkg.com/lang/en/docs/install/#debian-stable.

Step 6 (Revision)

Let us pause here and see what we have achieved so far. All your project dependencies like Node, Git etc. stay within your WSL machine. Your Windows machine only holds VS Code and Hyper apps. This setup is so clean, has less clutter and easy to maintain. Going forward, initialize all your projects in WSL. Let's see a sample below.

Step 7 (Typical Workflow)

Add a Sites directory in home location using cd ~ && mkdir Sites.
Clone a sample project here: git clone https://github.com/taniarascia/react-hooks && cd react-hooks && yarn && yarn start.
Run code . to open the source files from WSL to VS Code in Windows.
You can see the testing environment running on your Windows machine via WSL.

Step 8 (Maintenance)

Run u in the WSL. It is an alias available in .bashrc file that will update/prune all necessary/outdated packages in WSL.

We have done it! Hopefully, you have got your development environment successfully setup in Windows. It is clean, minimal and tasks are distributed across WSL and Windows. Stay hassle free and have fun coding amazing apps. Set the trend: #MacIsOptionalIn2019.

Goodies

Check out my Settings sync gist to get up and running with all necessary VS Code extensions for React development. Link: https://gist.github.com/tpkahlon/8c22c8f1929c37ecf7d8c7ba1ee4eb2f.

Forem: Tej

JavaScript

freeCodeCamp

Gatsby

Vanilla JavaScript

React

Redux

React in Professional World

React

React

Redux

ES6

Course Credits

TOC

Template Literals

Destructuring

Objects

Arrays

Object Literal

For of loop

Spread operator

Rest operator

Arrow Functions

Default Params

Array.includes

Let & const

Export & import

String.padStart(), String.padEnd()

Classes

Trailing commas

Async/Await

Sets

MERN

Jargon

History

Motivation

Timeline

Fundamentals of Web Applications

Requirements

Client/Server Communication

HTTP Cycle

Traditional web applications

Running application logic on the Browser

Event Handlers and Callback Functions

Document Object Model

Manipulating DOM from Console

CSS

Loading a Page containing JavaScript - Revised

Forms and HTTP POST

AJAX

Single Page Application

References (Chapter: 0B)

Key Takeaways

Introduction to React

Create-React-App

Component

Multiple Components

Props: Passing data to components

Notes

Key Takeaways

Minor Project

JavaScript

Variables

Arrays

Array Mutation

Destructuring

Objects

Functions

Component state, Event handlers

Component helper functions and Destructuring

Page re-rendering, Stateful component and Event handling

A more complex state, debugging React apps

Complex state

Handling arrays

Conditional rendering

Debugging React applications

Rules of Hooks

Event Handling Revisited

Passing Event Handlers to Child Components

Do Not Define Components Within Components