DEV Community: Abdullah Furkan Özbek

How to add Custom Network to Metamask

Abdullah Furkan Özbek — Sat, 12 Mar 2022 19:07:21 +0000

Hello guys, this will be a post where I will show you how to add custom local network to Metamask.

This article assumes that you already installed metamask and you have been created an account before. If you don't installed yet, go to Metamask and download it to your browser.

Interacting with Metamask

Click on the extension and go the settings,

if you scroll down a little bit, you will see network option. Click on that and press add network button. This should open a form in the new tab.

It should be something like this;

Adding Custom Network

In our tutorial, we will add custom local network to metamask. Ganache or Hardhat can be an example for that.

If you want to add other EVM compatible networks, you can also do that!

Network Name: Localhost:7545
New RPC URL: http://localhost:7545
Chain Id: 1337
Currency Symbol: ETH

After you saved that, you can see something like this;

Wait, whaaat! I can't see my ETH in there. Don't freak out :) It is because we do not imported our local accounts that node gives us.

Installing Ganache

For this tutorial you need to install ganache in order follow along. Go to Ganache and download the CLI.

After you installed it you can run the CLI on your machine.

You should see something like this;

Click quickstart and you have everything you need.

Importing Accounts to Metamask

What we need to grab the private key of one of our test accounts and import it to Metamask.

For Ganache, you can grab it inside it Ganache CLI, for hardhat and other nodes, you can copy them right through the console once you start the node in your terminal.

Click the show keys account that is inside accounts tab. It will open a modal and you grab private key from there.

Do not ever use test accounts in real blockchain

Copy that private key and click on the Metamask extention again. Go profile > import account and you will see this screen;

and.. paste that private key to that input and click import.

You should see that your active account is changed and it is labeled as imported. And you can also see that it contains test balances inside of the account.

Great!! Now you can build your dream application and test using local nodes.

(Optional) - Labeling the Account

Metamask also offers labeling the account so that if you use it for development it will be easier to differenciate them from real accounts.

Once you clicked the extension again, click the three dots and go to account details.

This should open a modal which you see the account information

From there just click the pencil icon and change the name whatever you want. And save it.

Now you should see the updated names in myAccounts section

And that is all from my side! Thank you so much for reading this far, and if you want to learn more topics like this feel free to subscribe my youtube channel which I started last week!

That's all and have a wonderful day :)

React Hooks: useLayoutEffect

Abdullah Furkan Özbek — Sun, 19 Sep 2021 08:42:36 +0000

1 - Definition

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)

6 Tips To Achieve Your Goal

Abdullah Furkan Özbek — Fri, 17 Sep 2021 16:55:48 +0000

1 - Define Your Goals

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 :)

How to Deploy Your App to Netlify

Abdullah Furkan Özbek — Thu, 16 Sep 2021 09:41:06 +0000

1. Push Your Code to Any Version Control Applications

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.

5 Ways To Host Your Applications

Abdullah Furkan Özbek — Wed, 15 Sep 2021 07:46:38 +0000

1. Surge

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.

You might be interested in this too

How to Deploy Your App to Netlify

Abdullah Furkan Özbek ・ Sep 16 '21

#react #webdev #netlify #100daysofcode

Array methods that you should know

Abdullah Furkan Özbek — Tue, 14 Sep 2021 08:02:16 +0000

1- findIndex

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.

React Hooks: useRef

Abdullah Furkan Özbek — Mon, 13 Sep 2021 18:46:52 +0000

1. Definition

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:

Define the reference to access the element
Assign the reference to ref attribute of the element
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.

How to Built Accessible Web Apps

Abdullah Furkan Özbek — Sat, 11 Sep 2021 13:25:47 +0000

In this article we will take a look how to built accessible web apps.

Semantic HTML
Keyboard Accessible
Tab Order
Tab Index
Using Native Elements
Guideline for Custom Elements
Screen Readers
Labels and Aria Attributes
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.

Scroll Up 🔼

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.

Scroll Up 🔼

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>‌

Scroll Up 🔼

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

Scroll Up 🔼

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

Scroll Up 🔼

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

Scroll Up 🔼

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

Scroll Up 🔼

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

Scroll Up 🔼

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

Scroll Up 🔼

Screenshots

vscode accessibility extention

Checking Accessibility With AXE

Checking Accessibility With AXE-2

Checking Accessibility With Chrome Lighthouse

Checking Accessibility With Chrome Lighthouse-2

‌

Scroll Up 🔼

Resources & Articles

Scroll Up 🔼

6 Javascript Projects for Beginners

Abdullah Furkan Özbek — Fri, 10 Sep 2021 07:33:54 +0000

1 - Weather App

🔗 App Description

2- Pomodoro Clock

🔗 App Description

🔗 Demo

3 - Calculator

🔗 App Description

4 - Todo List

🔗 App Description
🔗 Demo

5 - Password Generator

🔗 App Description
🔗 Demo

6 - Countdown App

🔗 App Description

What is Function Composition

Abdullah Furkan Özbek — Thu, 09 Sep 2021 10:10:49 +0000

1. What is Compose

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!

8 Free Public APIs That you can use in side projects

Abdullah Furkan Özbek — Wed, 08 Sep 2021 10:08:51 +0000

1. The Open Movie Database (OMDb)

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

How to flatten array using Javascript

Abdullah Furkan Özbek — Tue, 07 Sep 2021 11:38:37 +0000

Problem

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]

DEV Community: Abdullah Furkan Özbek

How to add Custom Network to Metamask

Interacting with Metamask

Adding Custom Network

Installing Ganache

Importing Accounts to Metamask

(Optional) - Labeling the Account

React Hooks: useLayoutEffect

1 - Definition

2 - Snytax

3 - useEffect vs useLayoutEffect

4 - One Possible Example

5 - Summary

Links

6 Tips To Achieve Your Goal

1 - Define Your Goals

2 - Create a Schedule

3 - Start Simple

4 - Remove any Distractions

5 - Progress Your Work

6 - Share What You Have Learned

How to Deploy Your App to Netlify

1. Push Your Code to Any Version Control Applications

2. Register to Netlify

3. Creating New Site

4. Connecting Accounts

5. Choose a project

6. Choosing Site Settings

7. Congratulations

5 Ways To Host Your Applications

1. Surge

2. Firebase

3. Vercel

4. Github Pages

5. Netlify

How to Deploy Your App to Netlify

Abdullah Furkan Özbek ・ Sep 16 '21

Links

Array methods that you should know

1- findIndex

2- includes

3- isArray

4- Some

Links

React Hooks: useRef

1. Definition

2. Accessing the DOM Elements

3. Keeping a Mutable Variable

4. Updating Ref

5. Summary

Links

How to Built Accessible Web Apps

Table of Contents

1. Semantic HTML

1.1. Tags with No Meanings

1.2. Tags with Meanings

2. Keyboard accessible

3. Tab Order

4. Tab Index

4.1. Inert Library

5. Use native elements

5.1. Native Form Elements

6. Guideline for custom elements

7. Screen readers

8. Labels and aria attributes

9. Use Libraries and polyfills

9.1. Axe

9.2. Chrome Accessibility Inspector

9.3. Focus Ring

Screenshots

Resources & Articles

6 Javascript Projects for Beginners

1 - Weather App

2- Pomodoro Clock

3 - Calculator

4 - Todo List

5 - Password Generator

6 - Countdown App

Links

What is Function Composition