useLayoutEffect runs synchronously immediately after React has performed all DOM mutations.

This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating state.

2 - Snytax

It looks exactly like useEffect but different use-cases. Here is the syntax for it;

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);

useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);

3 - useEffect vs useLayoutEffect

useEffect (Component > State Changes > Component Renders > Rendered Component is Printed on Screen > useEffect runs)

useEffect will run after React renders your component and ensures that your effect callback does not block browser painting.

useLayoutEffect (Component > State Changes > Component Renders > useLayoutEffect runs > Rendered Component is Printed on Screen)

useLayoutEffect runs synchronously immediately after React has performed all DOM mutations.

4 - One Possible Example

If your effect is mutating the DOM (via a node ref) and the DOM mutation will change the look of the DOM node between the time that it is rendered and your effect mutates it, then you want to use useLayoutEffect.

Otherwise the user could see a flicker when your DOM mutations take effect. This is pretty much the only time you want to avoid useEffect and use useLayoutEffect instead.

5 - Summary

Try use useEffect most of the time, if you are really need to mutate dom directly go take a look similar examples first before applying useLayoutEffect.

• useLayoutEffect: If you need to mutate the DOM and/or do need to perform measurements
• useEffect: If you don't need to interact with the DOM at all (%99.99 of the time you will use this)

Links

• useEffect vs useLayoutEffect

The first thing you need to do is defining what you want to do to keep you motivated. It can be working full time in a developer job or learning a new language.

2 - Create a Schedule

Then give which time of the day/week you can work on that.

3 - Start Simple

Instead of focusing on your big goal, divide your goal into sub-goals. This will help you to achieve them much more easily and with that way you can track your progress.

4 - Remove any Distractions

During researching or creating projects, try to disable all notifications while working. Just put yourself into work mode in that time. Believe me, this can increase your productivity tremendously.

5 - Progress Your Work

At the end of the day, note what you have done. This will make you be proud of yourself and help you to realize how easily you can improve yourself. Maybe in the first week, you do not care much, but after that, you will see what you have done.

6 - Share What You Have Learned

Try to share what you have learned with others, this will make you more confident about what you have done and it will help you grow your audience in the tech community.

This can also be useful in interviews.

You can also share pizza of course :)

The first thing you need to do is push your git repository to any version control application. You can use any one of these;

• Github
• Gitlab
• Bitbucket

2. Register to Netlify

Once you have a repository inside any given application just signup to Netlify and connect them.

3. Creating New Site

Now, you should be on the team page where you can see your applications which right now you do not have but don't worry we'll add them right now.

In there you can either click "New site from Git" button or you can visit https://app.netlify.com/start

You will see this screen

You should click the button which you are storing your repository right now. In my case it is Github.

4. Connecting Accounts

After that, you should see a connection screen where you will connect your Github account with Netlify.

Or if you are connected you will see a text that says "Authorized" which indicates that you already connect your account with Github**

5. Choose a project

Now select the project(repository) you want and continue

6. Choosing Site Settings

Now you can choose the owner of this application and choose which branch to deploy. Netlify will listen to that branch and if any changes published it will rebuild your application and run the tests for you.

You can also choose the build command that is needed to run to generate the build folder. This folder name can be different from framework to framework. So make sure to run on your local first to see the folder name.

And once everything is ok deploy your site.

7. Congratulations

Congratz! You deployed your first application to Netlify.

Surge is a cloud platform for hosting static websites, which is extremely simple to use but offers customization options for those who need them.

2. Firebase

Firebase Hosting is a fully managed hosting service for static and dynamic content as well as microservices.

The service is backed by SSD storage and a global CDN (content delivery network).

3. Vercel

Vercel is a hosting platform for frontend frameworks. After you create a pr it will automatically create an environment for you so that the team can check it before merging it. So useful!

4. Github Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website

5. Netlify

Netlify is a web hosting and automation platform that accelerates development productivity

I deployed most of my projects to Netlify because it is so easy to use, it is supporting custom domains, and much more.

Links

• 6 Ways to Host Your React JS App For Free

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

• find() method, which returns the value of an array element, instead of its index.
• Returns The index of the first element in the array that passes the test. Otherwise, -1.

// EXAMPLE 1
function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return num > 1;
}

console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)

// EXAMPLE 2
const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];

const index = fruits.findIndex(fruit => fruit === "blueberries");

console.log(index); // 3
console.log(fruits[index]); // blueberries

2- includes

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

• When comparing strings and characters, includes() is case-sensitive.
• Returns: A Boolean which is true if the value searchElement is found within the array (or the part of the array indicated by the index fromIndex, if specified).

3- isArray

The Array.isArray() method determines whether the passed value is an Array.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

• Returns true if the value is an Array; otherwise, false.

4- Some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

• Returns true if the callback function returns a truthy value for at least one element in the array. Otherwise, false.

Links

• MDN Docs | Array

useRef is a built-in React hook that accepts one argument as the initial value and returns a reference (aka ref).

A reference is an object having a special property current

There are two main uses of useRef;

• Accessing the DOM nodes or React elements
• Keeping a mutable variable.

const refContainer = useRef(initialValue);

2. Accessing the DOM Elements

This is performed in 3 steps:

1. Define the reference to access the element
2. Assign the reference to ref attribute of the element
3. After mounting, elementRef.current points to the DOM element.

This is equivalent of

import React, { useRef } from "react";

const CustomTextInput = () => {
  const textInput = useRef();

  focusTextInput = () => textInput.current.focus();

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={focusTextInput}>Focus the text input</button>
    </>
  );
}

3. Keeping a Mutable Variable

We have two ways of keeping data between re-renders:

• In the component state: Every time the state changes, the component will be re-rendered.
• In an instance variable: The variable will persist for the full lifetime of the component. Changes in an instance variable won’t generate a re-render.

In functional components this would be;

• In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.
• In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.

4. Updating Ref

Updating a ref variable is a side effect therefore needs to be done inside useEffect or useLayoutEffect

In React all side effect should be inside Layout Phase.

import React, { useRef } from "react";

const RenderCounter = () => {
  const counter = useRef(0);

  useEffect(() => {
    // Every time the component has been re-rendered,
    // the counter is incremented
    counter.current = counter.current + 1;
  }); 

  return (
    <h1>{`The component has been re-rendered ${counter} times`}</h1>
  );
};

5. Summary

The useRef Hook lets us create mutable variables inside functional components.

There are three main key points that you should keep in mind when using the useRef Hook;

• A ref created with useRef will be created only when the component has been mounted and preserved for the full lifecycle.
• Refs can be used for accessing DOM nodes or React elements, and for storing mutable variables (like with instance variables in class components).
• Updating a ref is a side effect so it should be done only inside a useEffect (or useLayoutEffect) or inside an event handler.

Links

• Hooks API Reference - React

• React useRef Hook

• The Complete Guide to useRef() and Refs in React

Table of Contents

1. Semantic HTML
2. Keyboard Accessible
3. Tab Order
4. Tab Index
5. Using Native Elements
6. Guideline for Custom Elements
7. Screen Readers
8. Labels and Aria Attributes
9. Use Libraries and polyfills

1. Semantic HTML

HTML (Hyper Text Markup Language) is exactly that: a markup language. This means that it is not only plain text, but text marked up with meaning - so called "semantics". For this, HTML offers a lot of tags, each with an inherent, unique semantic meaning. And it is absolutely crucial that those tags are used properly.

1.1. Tags with No Meanings

To understand the importance of proper semantics, let's first look at the exceptions: tags that indeed do not provide semantical information.

There are only two tags in HTML that do not have any semantic meaning: <div> and <span>. Their purpose is to offer containers needed for visual styling. And their only difference is that <div> is a block element, while <span> is an inline element.

1.2. Tags with Meanings

Content elements are used to give meaning to content (like headings, paragraphs, or links). Marking up text using an <h#> tag tells the user agent that this is not just plain text, but - in fact - a heading of a certain level!

Structural elements are used to group elements on a webpage, separating them into different regions (like header, navigation, main, or footer). They have been introduced in HTML 5.

2. Keyboard accessible

All the interactive elements of your page e.g. text boxes, buttons etc should be accessible by keyboard. That means you should be able to bring focus on them by using Tab and Shift+Tab keys.

• Most of the interactive elements are keyboard accessible by default, i.e. browser takes care of making them keyboard ‘focus-able’.
• Non interactive elements like div, span and images are not keyboard accessibly by default. This is fine because users don’t generally need to interact with them.

3. Tab Order

‌The order in which elements get focus is called tab-order. Developers need to take care that the interactive elements have logical tab-order. Tab order should follow the natural reading sequence i.e. top to bottom and right to left (for an RTL type language). If your tab focus is jumping around the page unpredictably then its not going to be great experience for the users.

Tab-order mainly depends on the dom-order, i.e. the way you have written your html. Any element which is ahead in the dom tree automatically goes ahead in the tab-order.

Sometimes people use css to make the element appear in an order which is different form dom-order.

For Example;

<!-- This will mess the tab-order. So no no! -->
<a href="#" style="float:right;">Right aligned link</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>‌

4. Tab Index

Recommended Usage 0 for tab accessible and -1 for tab unaccessible

• To make a non interactive element focusable you can give it tabindex="0" attribute. This not only makes the element tab accessible but also makes it programmatically focusable. That means you can call .focus() on that element.
• tabindex="-1" will take out any interactive element from tab-order. That means you can not access it through keyboard. This is particularly useful when you want to make few links/buttons inaccessible when they are behind an overlay or transitioned out of display (e.g. hamburger menus)
• Positive tabindex value makes the element tab accessible and also puts the element ahead in tab-order based on the value of the attribute. But positive tabindex values are considered anti-pattern becuase it may get very confusing more than one elements have positive tabindex values. So, don’t use positive tabindex.

4.1. Inert Library

INERT is a javascript library which makes part of the application focusable or unfocusable. Under the hood it adds tabindex="0" or tabindex="-1" to the element.

• inert/inert.js at master · WICG/inert

5. Use native elements

• As far as possible please use native elements for any specific purpose. That means, for example, if you need a button then just use button tag rather than making a button using divs or spans.
• Native interactive elements like buttons, select boxes etc have many built in accessibility features which you might miss if you are creating your own.

5.1. Native Form Elements

• Native Form Elements

6. Guideline for custom elements

• If you must create a custom element then make sure that you go through the wai-aria best practices guide: WAI-ARIA Authoring Practices 1.1
• These guidelines tell you how the keyboard interactions should be for any element. It also has links to demo and code examples for our help.

Button Examples

7. Screen readers

Screen readers are applications that will tell what is the current state of application. ...

You should take care of this;

• Many users with visual impairment rely on assistive tools like screen readers to get information on the page and to interact with page
• Always use alt attribute for images. Screen readers would read out the alt text for its users who have difficulty in seeing the image.
• Use proper heading tags, etc for headings, because screen readers allow users to navigate within the content of page using headings.
• Make efficient use of semantic tags like <header>, <footer>, <section>, <nav> etc because screen readers allow users to navigate within the content of page using these tags.
• Screen readers need to identify the interactive elements correctly so it can ask users to interact with them. For example, if you have created a button using <button> tag then screen reader will call it out as button. But if your button is something like <div class="fancy button">Submit</div> then screen reader will call it a “group” because div is grouping element, and user would not understand that they are supposed to interact with that element.

How HTML elements are supported by screen readers

• HTML test file indexthepaciellogroup.github.io

8. Labels and aria attributes

There are indeed situations where standard HTML does not provide functionalities for all the requirements developers may have for implementing modern and interactive websites. For this, the Accessible Rich Internet Applications (ARIA) technical specification was introduced.

• Any code written in html not only has a visual representation but also has a semantical representation called accessibility tree. Accessibility tree is used by assistive tools like screen readers to inform the user about the accessibility properties like type, name, state and value of the element. The values of these accessibility properties are computed by browser based on the information provided in html code.

In above example name is computed by the tag. Make use of label tag wherever applicable.

Use aria-label attribute to ensure that element has a name. Suppose you have a save button which does not have a text content, then browser will not be able to compute its name. We can mention aria-label attribute to help browser compute its name.

• Similarly use different aria attributes like role, aria-labelledby, aria-expanded, aria-checked (etc..) to help browser compute accessibility properties:

• WAI-ARIA Authoring Practices 1.1

9. Use Libraries and polyfills

9.1. Axe

• aXe is an amazing tool to identify the accessibility gaps in your page. It is a chrome extension. Install it and use through chrome dev tools to analyse the accessibility of the page.
• Use aXe to analyse colour contrast in your page. A bad colour contrast ratio will make it difficult for few users to read the text. aXe can point out the regions of your page where the contrast does not match the WCAG guidelines.

9.2. Chrome Accessibility Inspector

• Chrome has an experimental accessibility inspector in dev tools. Go to setting -> experiments in chrome dev tools to enable it. This tool helps by letting you know the computed accessibility properties
• If you want to automate the accessibility audit in your project, you can use axe-core. It is a node module which you can include in your build process.

9.3. Focus Ring

Focus-ring is the outline which gets displayed around the control when it receives focus. At times, especially with buttons, these focus rings are not very aesthetically pleasant so developers tend to disable it in css (outline:none). Mouse users wouldn’t face any issues because of this but keyboard users find it problematic because can’t figure out whether the control has focus or not. Ideally focus ring should be visible to keyboard user even if it is invisible for mouse user.

Here is an awesome library;

• GitHub - WICG/focus-visible: Polyfill for :focus-visible

Screenshots

vscode accessibility extention

Checking Accessibility With AXE

Checking Accessibility With AXE-2

Checking Accessibility With Chrome Lighthouse

Checking Accessibility With Chrome Lighthouse-2 ‌

Resources & Articles

• Introduction to Web Accessibility

• Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

• 9 tips to get bare minimum of web accessibility

• Web Accessibility In Context - Smashing Magazine

• Removing that ugly :focus ring (and keeping it too)

• Making a Better Custom Select Element

He loves working with a good team and loves to improve himself on web development.

He especially likes working on front-end development because seeing what you have built always satisfies him.

His most important experience would be building a complex transaction modal for blockchain. The challenge he experiences was he did not have enough experience in web3 and blockchain in general on the frontend. Because of this first, he thought he needed a plan for this.

So here how he manage to do it;

1 - Define what the problems are

In here, he first right down the issues he had, define which libraries he needs to be taking a look at, and even which state management library that he will gonna use (Redux, Context API, Mobx, etc.)

2 - Create the Modal UI

Then he thought it would be good practice to create the general UI for it

3 - Prepare the Data From Store

Here he will just define what will be the type of data stored in the context.

4 - Test it with Dummy Data

Here he will connect the test data with the UI he created

5 - Connect it with the transaction

Because feature needs to be worked on the transactions. Here he just chooses one transaction to let's say createUser, he will show the modal and show how much gas it costs, etc.

6 - Finally with real data

In the final step, he tested with real Graphql queries and mutations and he saw that everything is working correctly

Like this, he experienced a lot of different problems like this but he managed to fix the issues step by step

Furkan quotes:

Planning a job is like finishing half the job.

Right now he tries to share what he learned with platforms like Twitter, Linkedin, Dev.to, and hashcode.

Reference

• Phil Greenberg on Toptal

🔗 App Description

{% codepen https://codepen.io/tutsplus/pen/gObLaEP %}

2- Pomodoro Clock

🔗 App Description

🔗 Demo

3 - Calculator

🔗 App Description

{% codepen https://codepen.io/mjijackson/pen/xOzyGX %}

4 - Todo List

🔗 App Description 🔗 Demo

5 - Password Generator

🔗 App Description 🔗 Demo

6 - Countdown App

🔗 App Description

{% codepen https://codepen.io/karlo-stekovic/pen/OajKVK %}

Links

• Best JavaScript coding projects for beginners! 👨🏻‍💻

• GitHub - florinpop17/app-ideas: A Collection of application ideas which can be used to improve your coding skills.

In algebra, function composition allows you to apply one function to the output of another function. It looks like this;

We can also apply same thing with javascript.

const compose = (g, f) => x => g(f(x));

2. Example

I can tell, you are a little bit confused. Let me break it down for you;

Let’s say we want to get the name of a user and uppercase it. First of all, we have to write a function that extracts the name of the user;

const user = {name: 'Furkan', lastName: "Cool"}
// Returns -> String
const getUserName = (user) => user.name
getUserName(user)
// 'Furkan'

And then a function that uppercases strings:

// Accepts -> String
// Returns -> String
const upperCase = (string) => string.toUpperCase()
upperCase('Furkan')
// 'FURKAN'

Notice that one function's return value is other function's parameter type.

Compose function will return a function that will executes these two functions.

In our example they are: getUsername & upperCase

const compose = (G, F) => X => G(F(X));

// 'X' in compose
const user = {name: 'Furkan', lastName: "Cool"}

// 'F' in compose
const getUserName = (user) => user.name

// 'G' in compose
const upperCase = (string) => string.toUpperCase()

// Returned function in compose
const getUserNameAndUpperCase = compose(upperCase, getUserName)

// user -> 'X' in compose function
getUserNameAndUpperCase(user); 
//'FURKAN'

3. Scale Problem

The problem with this implementation of compose() is that it takes as parameters just N functions (upperCase & getUserName).

Let’s suppose we want to add another function that returns the full name of the user;

const getUserFullName = (name) => name + " " + user.lastName;
getUserFullName(‘FURKAN’);
// 'FURKAN Cool'

Did you see the problem here?

4. Using compose with reduceRight function

For this case instead of giving N functions and manually changing them, we can use the spread syntax (...) and give an array of functions as an argument to compose function.

// reduceRight calls from right to left instead of left to right
const compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

5. Full Example

const compose = (...fns) => (initialVal) => {
  return fns.reduceRight((val, fn) => fn(val), initialVal)
};
const user = { name: 'Furkan', lastName: "Cool" }
const getUserName = (user) => user.name
const upperCase = (string) => string.toUpperCase()
const getUserFullName= (name) => name + " " + user.lastName
compose(firstFour, upperCase, getUserFullName)(user);
// 'FURKAN Cool'

Conclusion

Composition is really insteresting subject. Instead of unreadable nested functions, you can organize and chain your functions with each other. And it is super cool!

Links

• 🔗 Function Composition in JavaScript

• 🔗 Compose and Pipe in JavaScript

• 🔗 Array.prototype.reduceRight() - JavaScript | MDN

OMDb contains different kinds of movies that you can use in your projects.

• Auth: apiKey

• Website: 🔗 OMDb

2. Pokemon API

You would probably remember these amazing creatures that can do awesome stuff. What happens we can use them in our projects;

• Auth: No

• Website: 🔗 PokéAPI

3. Rick & Morty API

These two characters really taught us something. Let us honor them by using inside projects.

• Auth: No

• Website: 🔗 The Rick and Morty API

4. Nomics Cryptocurrency & Bitcoin API

So you are interested in blockchain and want to build side projects with it. Nomic is the way to go.

• Auth: apiKey

• Website: 🔗 Nomics CryptoCurrent API

5. DiceBear Avatar API

If you want to generate unique, beautiful avatars you can check out diceBear's documentation.

• Auth: No

• Website: 🔗 Getting started | DiceBear Avatars

6. Json Placeholder API

This one is useful for filling some dummy test data to your application. It contains /posts, /comments queries that you can and it is completely free to use. Awesome!

• Auth: No

• Website: 🔗 JSONPlaceholder

7. New York Tİmes

Get the latest news around the world quickly, smoothly.

• Auth: apiKey

• Website: 🔗 NYTimes API

8. Fixer

See the current currency rate of exchange between different currencies.

• Auth: apiKey

• Website: 🔗 Foreign exchange rates and currency conversion API

Links

• 10 Free Public APIs for developers you need to use for your next projects

• GitHub - public-apis/public-apis: A collective list of free APIs

So you have some nested array but need to flattened it so you use it inside your codebase. There are actually a couple of ways to do it.

Here is what we are gonna take a look at;

• Array.prototype.flat()
• Reduce and Concat Solution
• Recursive Solution
• Stack Solution

1. Array.prototype.flat() Solution

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

• Returns: A new array with the sub-array elements concatenated into it.

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

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

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

// We can also give optional depth argument to flat function
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

Flat can also work on nested arrays

console.log(arr2.flat(Infinity))
// expected output: [0, 1, 2, 3, 4]

Or it can remove empty spots in the array

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

2. Reduce and Concat Solution

const flatten = (arr) => {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) 
            ? 
            flatten(toFlatten) 
            : toFlatten);
  }, []);
}

flatten([[1, 2, 3], [4, 5]]); // [1, 2, 3, 4, 5]
flatten([[[1, [1.1]], 2, 3], [4, 5]]); // [1, 1.1, 2, 3, 4, 5]

3. Recursive Solution

We can also apply recursive solution with the help of concat function

const flattenArray = (input) => {
  let result = []

  if (!Array.isArray(input)){
    return input
  }

  for (let data of input) {
    result = result.concat(flattenArray(data))
  }

  return result;
}

let arr = ["a", 0, [1, 2], 3, [[5, 6], [[8, 9]]]]

console.log(flattenArray(arr))
// ["a", 0, 1, 2, 3, 5, 6, 8, 9]

4. Stack Solution

We can also solve this by the help of stack data structure

// non recursive flatten deep using a stack
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
  const stack = [...input];
  const res = [];
  while(stack.length) {
    // pop value from stack
    const next = stack.pop();
    if(Array.isArray(next)) {
      // push back array items, won't modify the original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // reverse to restore input order
  return res.reverse();
}

const arr = [1, 2, [3, 4, [5, 6]]];
flatten(arr);
// [1, 2, 3, 4, 5, 6]

Links

• Array.prototype.flat() - JavaScript | MDN

• Flatten an array using javascript

• Merge/flatten an array of arrays

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

llocalStorage is similar to sessionStorage, except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed. (localStorage data for a document loaded in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.)

2. Data Format

The keys and the values stored with localStorage are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

3. Example

// Setting and item: key: value
localStorage.setItem('myCat', 'Tom');

// Reading an item
const cat = localStorage.getItem('myCat');

// Remove an item
localStorage.removeItem('myCat');

// Clear all items
localStorage.clear();

{% codepen https://codepen.io/moghaazi/pen/BajWgav %}

4. Advaced Examples

For setting objects or dates we need to convert to strings because localStorage only store string format

let userList = [{name: "David"}, {name: "Kevin"}]
let date = new Date()

// Setting
localStorage.setItem("userList", JSON.stringify(userList))
localStorage.setItem("date", date.toString())

// Reading
userList = JSON.parse(localStorage.getItem("userList"))
date = new Date(localStorage.getItem("date"))

Links

• Mozilla Docs

In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily.

{% codesandbox jjxypyk86w %}

If one part re-renders, it re-renders the entire component tree.

2. Memoization

Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

If we have a function compute 1 + 1, it will return 2. But if it uses memoization, the next time we run 1’s through the function, it won’t add them up; it will just remember the answer is 2 without executing the adding function.

3. Syntax

From the official React documentation, syntax is looking like this;

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo takes in a function and an array of dependencies.

useMemo hook will run the expensive operation when one of the dependencies has been changed. If no changes has been made it will return stored value.

4. Example

Here is an example of useMemo in action.

const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])

5. Use right hook

In addition to useMemo, there is also useCallback and useEffect which can be used similar situations

The useCallback hook is similar to useMemo, but it returns a memoized function rather than memoized value.

If your dependencies array is not provided, there is no possibility of memoization, and it will compute a new value on every render. So in this reason you can go ahead with useEffect

// useMemo - returns -> memoized value
const memoizedValue = useMemo(() => expensiveFunction(a,b), [a,b])

// useCallback - returns -> memoized function
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  },
  [a, b]
);

Links

• Hooks API Reference - React
• Understanding the React useMemo Hook | DigitalOcean

Build projects to earn free certificates and get experience by coding for nonprofits.

You can learn pretty much anything related to programming. If you are type of person who tries to follow video tutorials then you can take a look their youtube channel.

Github Youtube

2. Free Programming Books

his repository shares free programming books that you can read. It contains all kinds of topics. Definitely check that out if you are interested. (Don't forget to give it a star 😅)

Github

3. Bootstrap

Undoubtedly the most popular HTML, CSS and JavaScript framework for developing responsive, mobile first projects on the web.

Github

4. Awesome Lists

This repository contains detailed lists around any topics. You can found out what you like or you can contribute that you think others would be interested.

Github

5. You Don't Know JS

A series of books diving deep into the core mechanisms of the JavaScript language. The first edition of the series is now complete. You can buy it in print, or read online for free!

Github

6. Coding Interview University

So you have big interview coming up or you just want to be prepared. Then this project covers you.

It contains links, tutorials, stories that author experienced, advices...

Definitely stop by if you have some time.

Github

7. Developer Roadmap

I keep my favorite one to the last.

This repository will show you what skills or path you need to take in order to fulfill your developer path.

Of course you do not need to complete all of them but it gives good idea what you need to do. So you can create a list and take a look at the process you made.

Github

Helpful Links & Resources

• freeCodeCamp
• Free Programming Books
• Bootstrap
• Awesome
• You-Dont-Know-JS
• Coding Interview University
• Developer roadmap - 2020
• Top 50 Projects on Github - 2020

I can not stress enough how import it is to create time boundaries between your work hours and your personal time.

I made some strict rules about work hours for the company I worked on and stick to that plan to free up my personal time.

I saw the differences very shortly afterwards.

2. Set Small Goals

Set small goals every day/week. Divide that goals into parts where they will not look so big and try to achieve them.

Try to reward yourself once you achieve your goal. This will keep you motivated and happy.

3. Keeping it Consistent

Progress is progress even if it 10 minutes, 30 minutes. So no mather how small your contibution it will still be counted.

So try to understand what is best for you and how much can you spend in that week. Even it is a small amount do not see it as not worth it.

Small but consistent efforts are definitely going to pay out for you. It may take some time, but you will definitely see the results.

4. Don't be a perfectionist

Being a perfectionist will cause you to spend more time, think more time and stress more time on small things. Always remember, you will have enough time to improve it later than making it perfect now!

Believe me I've been there, I've been done that.

It is hard to focus on side projects especially if you have a full time job. But once you start to free up some of your time, you will see the differences.

Links

• 5 Tips to work on your side project while working full-time.

Array is collection of elements which can be identified with array index

Each data element is assigned a positive numerical value called the Index*,* which corresponds to the position of that item in the array. The majority of languages define the starting index of the array as 0.

The following are the two types of arrays:

• One-dimensional arrays
• Multi-dimensional arrays

let arr = [1, 2, 3, 4]

arr[1] // 2

2. Stacks

Stacks are abstract data types that holds an ordered, linear sequence of items.

In contrast to a queue, a stack is a last in, first out (LIFO) structure.

A Real life example of stack could be a pile of books placed in vertical order which in order to take first book in the stack you need to remove all of the top ones.

This is called Last LIFO (Last in First Out)

3. Queues

Similar to Stack, Queue is another linear data structure that stores the element in a sequential manner.

The only significant difference between Stack and Queue is that instead of using the LIFO method, Queue implements the FIFO method.

LIFO -> Last In First Out (Stack) FIFO -> First In First Out (Queue)

4. Linked Lists

A linked list is another important linear data structure which might look similar to arrays at first but differs in memory allocation, internal structure and how basic operations of insertion and deletion are carried out.

Each item in the linked list called nodes that contain a reference to the next node in the list.

const linkedList = {
    // head of the linked list
    head: {
        value: 6
        next: {
            value: 10                                             
            next: {
                value: 12
                next: {
                    value: 3
                    //    Last value points -> null                            
                    next: null    
                  }
                }
            }
        }
    }
};

First let us create the node class of the linked list

class ListNode {
    constructor(data) {
        this.data = data
        this.next = null                
    }
}

Then we can create linkedList which takes a node as an argument.

class LinkedList {
    constructor(head = null) {
        this.head = head
    }
}

let node1 = new ListNode(2)
let node2 = new ListNode(5)
node1.next = node2

let list = new LinkedList(node1)

console.log(list.head.next.data) //returns 5

5. Hash Tables (Objects | Dictionaries)

Hashing is a process used to uniquely identify objects and store each object at some pre-calculated unique index called its "key"

So, the object is stored in the form of a "key-value" pair, and the collection of such items is called a "dictionary."

Each object can be searched using that key. There are different data structures based on hashing, but the most commonly used data structure is the "hash table".

const collection = new Map();

collection.set("Nathan", "555-0182");
collection["size"] = false;

console.log(collection.get("size")); // undefined
console.log(collection.size); // 1

5.1. Filter out duplicate items

let items = ["apple", "pear", "orange", "banana", "apple",
         "orange", "apple", "pear", "banana", "orange",
         "apple", "kiwi", "pear", "apple", "orange"]

let set = new Set(["apple", "pear", "orange", "banana", "apple",
         "orange", "apple", "pear", "banana", "orange",
         "apple", "kiwi", "pear", "apple", "orange"])

console.log(set)
// Set(5) {"apple", "pear", "orange", "banana", "kiwi"}

Helpful Links & Resources

• 4 Common Data Structures
• The top data structures you should know for your next coding interview
• How to Implement a Linked List in JavaScript

For converting numbers and strings with each other, we can use following methods;

// Number > String
let num = 4
let newNum = num.toString();

// String > Number
let num = "4"
let stringNumber = Number(num);

// New Way
let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number

2. Swap using destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

We can also use that to swap values fast, like this:

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 1

3. Remove duplicates from an Array

If we have an array of values and we try to filter unique values we can follow this trick;

const arr = ["1", 2, 3, "abc", "1", 2, 5]
const arrayWithUniqueItems = [...new Set(arr)]
// ["1", 2, 3, "abc", 5]

4. Shorten the array using length

Array has length property which tells how many items inside that list.

If we change the length property the remaining items will be gone forever;

let array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]
array.length // 10
array.length = 4

// Result: [0, 1, 2, 3]

5. Combine objects using ...spread

Let’s say you want to combine multiple objects into one object containing them all. The spread operator ( … ) is a great way to achieve this!

const obj1 = {'a': 1, 'b': 2}
const obj2 = {'c': 3}
const obj3 = {'d': 4}

// Combine them using the spread operator            
const objCombined = {...obj1, ...obj2, ...obj3}

// Result: {'a': 1, 'b': 2, 'c': 3, 'd': 4}

6. window.location object

JavaScript can access the current URL using the window.location object. And it has all kinds of useful property which we can use;

// JavaScript can access the current URL in parts. For this URL:
`https://furkanozbek.com/example/index.html?s=article`

window.location.protocol == `https:`
window.location.host == `furkanozbek.com`
window.location.pathname == `/example/index.html`
window.location.search == `?s=article`

7. Dynamice Object Properties

ES6 brought us computed property names that allow property keys of object literals to use expressions.

By surrounding the key with brackets [], we can use variables as property keys.

const type = "fruit";
const item = {
  [type]: "kiwi"
};

console.log(item); // {fruit: "kiwi"}

item[type];   // "kiwi"
item["fruit"] // "kiwi"

// Or
item.fruit // "kiwi"

8. map() Substitute

We can also use Array.from() method as the same way map function.

let dogs = [
    { name: "Rio", age: 2 },
    { name: "Mac", age: 3 },
    { name: "Bruno", age: 5 },
    { name: "Jucas", age: 10 },
    { name: "Furr", age: 8 },
    { name: "Blu", age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
// returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

Links

• 45 Useful JavaScript Tips, Tricks And Best Practices | Modern Web

• 5 Must-know Javascript Tips & Tricks

• 8 JavaScript Tips & Tricks That No One Teaches 🚀

Basically, what this hook does is that, it takes a parameter with value true or false and toggles that value to opposite. It's useful when we want to take some action into it's opposite action.

For example;

• show and hide modal,
• show more/show less text,
• open/close side menu.

// Hook
// Parameter is the boolean, with default "false" value
const useToggle = (initialState = false) => {
    // Initialize the state
    const [state, setState] = useState(initialState);

    // Define and memorize toggler function in case we pass down the comopnent,
    // This function change the boolean value to it's opposite value
    const toggle = useCallback(() => setState(state => !state), []);

    return [state, toggle]
}

// Usage
function App() {
    // Call the hook which returns, current value and the toggler function
    const [isTextChanged, setIsTextChanged] = useToggle();

    return (
      <button onClick={setIsTextChanged}>
                {isTextChanged ? 'Toggled' : 'Click to Toggle'}
            </button>
    );
}

2. useOnClickOutside

This hook allows you to detect clicks outside of a specified element.

By abstracting this logic out into a hook we can easily use it across all of our components that need this kind of functionality.

For Example;

• dropdown menus,
• tooltips,
• modals
• etc..

// Hook
const useOnClickOutside = (ref, handler) => {
  useEffect(
    () => {
      const listener = (event) => {
        // Do nothing if clicking ref's element or descendent elements
        if (!ref.current || ref.current.contains(event.target)) {
          return;
        }
        handler(event);
      };
      document.addEventListener("mousedown", listener);
      document.addEventListener("touchstart", listener);
      return () => {
        document.removeEventListener("mousedown", listener);
        document.removeEventListener("touchstart", listener);
      };
    },

    [ref, handler]
  );
}

// Usage
function App() {
  // Create a ref that we add to the element for which we want to detect outside clicks
  const ref = useRef();
  // State for our modal
  const [isModalOpen, setModalOpen] = useState(false);
  // Call hook passing in the ref and a function to call on outside click
  useOnClickOutside(ref, () => setModalOpen(false));
  return (
    <div>
      {isModalOpen ? (
        <div ref={ref}>
          👋 Hey, I'm a modal. Click anywhere outside of me to close.
        </div>
      ) : (
        <button onClick={() => setModalOpen(true)}>Open Modal</button>
      )}
    </div>
  );
}

3. useSubmit

Instead of recreating loading and form states we can also move that logic inside a hook called useSubmit

// Hook
const useSubmit = submitFunction => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

    const handleSubmit = async () => {
    try {
      setLoading(true);
      setError(null);
      await submitFunction();
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  return [handleSubmit, loading, error];
};

// Usage
function App() {
    const mySubmitFunction = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
                resolve("Timeout Finished")
        }, 2000);
      });
    };
    const [handleSubmit, loading, error] = useSubmit(mySubmitFunction);

    return (
        <div className="App">
          <button onClick={handleSubmit} disabled={loading}>
            {!loading ? "Click me" : "Loading..."}
          </button>
          {error && <div>{error}</div>}
        </div>
      );
}

4. useMediaQuery

If you want to write css in js or you just want to add some sideEffect to the specific device or breakpoint this hook is for you.

// Hook
const useMediaQuery = (query = "(min-width: 576px)") => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
}

// Usage
const isTablet = useMediaQuery("(max-width: 1200px)");

Links

• useHooks

• useHooks(🔥).ts

• 30 seconds of code

• In reactJS, how to copy text to clipboard?