JavaScript

Shruti Kapoor

# Is your site accessible?

Being digitally accessible means your site should be able to be used by anyone - those with disabilities and those with abled bodies. Think about the last site you built, or your favorite site. Are you confident that anyone can use your site and perform the critical actions of the site? Have you considered folks with motor disability, visual disability, cognitive disability and auditory disability?

Often accessibility is left as an after-thought. When it is time to ship a feature, we do an accessibility test and find out that our site wasn't accessible and do a hacky fix. Making a site accessible is a huge undertaking but if we keep accessibility in mind from the get-go itself, it makes it much easier to build an accessible web app. In this post, I will go over 5 things you can keep in mind WHILE building your app so you don't have to do a hacky slap at the end.

# 5 things to keep in mind

1. Semantinc HTML
2. Tabindex
3. Aria attributes
4. Role
5. Keyboard navigation and screen reader

In short, S.T.A.R.K. If you need help remembering this, think of Tony Stark ![TonyStark](https://cdn.vox-cdn.com/uploads/chorus_image/image/55400215/ktokatitmir0.0.jpg)

## Semantic HTML

Using semantic HTML is important for accessibility. The reason is that assistive technologies such as screen readers are able to interpret what's on the page by parsing the HTML of the page. They enable users to take actions based on the elements. For eg, if a screen reader encounters `button`, it would signal the user to click on it. Let's consider some use-cases of what happens when semantic HTML is not used -

1. Creating buttons by using `div` instead of `button`: `div` are container elements so when a screen reader encounters a div, it automatically thinks it is a presentational element. When a screen reader user encounters a `div` that has content or children within it, screen reader would announce `role="group"` and the user will completely miss that the `div` is interactive. Therefore, use the proper semantic element for its purpose. You get accessibility for free.

2. Using CSS to fake headings instead of using `h1-6` tags: Heading tags such as `<h1>`, `<h2>` signal an assitive technology that this is important text and the screen reader will announce "Heading". When you use CSS to make a heading instead of using correct semantics, the significance of the text is lost to a screen reader.

So, in conclusion, use semantic HTML whenever possible.

## Tabindex

Adding a `tabindex` is a very widely used method to make interactive elements keyboard navigable. When `tabindex` is added to an element, a user is able to keyboard navigate to it and focus using assitive technologies.

`tabindex` should only have a value of `0` or `-1`. A tabindex of `0` is used to set focus to an element in the default tabbing order, and a tabindex of `-1` is used to programmatically focus an element using JavaScript. Do not assign a value of > 1 to tabindex.
A caution though - `tabindex` should only be added to interactive elements. It is not a good idea to add `tabindex` to elements such as `div`. Instead of adding tabindex, use a semantic element since semantic elements already are tabbable and do not need an additional `tabindex` value.

## Aria attributes

Aria attributes such as `aria-checked`, `aria-label` are used to give additional information to assistive technologies.

## Role

Aria roles such as `alert`, `grid`, `presentation` are assigned to elements to set their semantic values. For example, let's say you built a grid like element with the help of CSS and divs. You would use `role="grid"` to assign to this div element to let assistive technologies know about the type of the element.

## Keyboard navigation and screen readers

Every important element must be able to be navigated by a user using keyboard and screen reader. To do this, try navigating your site through a keyboard only.

Often accessibility is left as an after-thought. When it is time to ship a feature, we do an accessibility test and find out that our site wasn't accessible and do a hacky fix. In this post, I will go over 5 things you can keep in mind while building your app so you don't have to do a hacky slap at the end.

Creating an accessible web app in 5 simple steps


1. Migrate from existing Mac.
2. Install Password Manager.
3. Install browser of choice.
4. Install VSCode / IDE.
5. Install git command line tools.
6. Install Xcode tools.
7. Install [Java](https://www.java.com/en/download/manual.jsp)
8. Install zsh `sudo apt install zsh`
9. Install homebrew `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`
10. Install nvm `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash`
11. Install node `nvm install node`
12. Install yarn `npm install --global yarn`


Damn! Getting a computer setup is so time consuming! If only there was a list to know everything that I need to setup my dev environment. Now here is the list for my future self. Probably should convert this to a bash script.

Stuff to install when setting up a new computer from an existing computer


![Reactathon banner](https://res.cloudinary.com/practicaldev/image/fetch/s--mD54TtAS--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k61njmqwpht5vvsljffd.jpeg)
Last week I had the pleasure of attending and speaking at Reactathon. This blog post is a cumulation of my notes and what I learnt at Reactathon. [Here is the livestream if you want to watch the YouTube stream.](https://www.youtube.com/watch?v=Ck-e3hd3pKw)

**Keynote: Navigating the Iceberg of the Web - Lee Robinson**

Lee talked about why React is so popular and says it’s because React helps us think in terms of components. React succeeded because of its community. Web is drastically evolving too. Lee says that web is the largest app store in the world since anyone can put content in the world in seconds and share with the world.

Lee also talks about the iceberg of the web and says that React has delegated libraries or frameworks to come up with solutions such as performance, SEO, availability, caching and more.

A few web archictecture problems that React will help solve in the future are -

1. Show most relevant content immediately
2. Instantly respond to user input
3. Navigate without blocking user input

We want to show content to the user before anything JS has loaded on the page. With React 18, we can show a the page immediately and wait for a slow component when it comes up. Frameworks can take these concurrent rendering features and solve the problems of data fetching and give a really great DX.

Lee announced that NextJS’s new version will fully support all features of React 18 - nested routes, client and server routing, features like startTransition, suspense and server components.

**Keynote: Kent C Dodds: Shipping to the edge.**

What is the edge?

We have a client and server. Server has some information that client wants, such as HTML documents. Users wherever they are need to talk to the same server. The series of “tubes” that they need to talk to can take exceedingly long and reduce the user experience. Some of the information that user needs is same for everybody. These kind of static files such as image, css, assets can stay in CDN which can be spread everywhere in the world. Developers can dynamically generate HTML for a specific user. This helps to let the user go to the closest location to them and make the request a lot faster and thats edge.

Remix - V7 of React Router supports server rendering, compiling, normalizes the Edge to the web standard, moves code to the Edge, progressively enhances on the edge and streams from the edge.

**Rendering Pattern - Lydia Hallie**

Core web vitals -

1. **TTFB**: Time to first byte - time it takes for a client to receive the first byte of page content.

1. **FCP**: First Contentful Paint: Time it takes the browser to render the first piece of content after navigation

1. **LCP**: Largest Contentful Paint: Time it takes to load and render the page’s main content.

1. **TTI**: time to interactive: Time from when the page start loading to when its reliably responding to user input quikcly.

1. **CLS**: Cumulative Layout shift: Measures visual stability to avoid unexpected layout shift.

1. **FID**: First Input Delay: Time from when the user interacts with the page to the time when the event handlers are able to run

Right rendering patterns can massively help your apps performance.

How do you know which one makes the most sense for your website?

**Static rendering:** is a very performant pattern. The entire HTML gets generated at build time and is easily cacheable by CDN.

**Plain static rendering:** can be used for pages that have no dynamic data at all. It shows the same data for everyone at all. As the server gives back HTML, the edge location closest to the user caches the response.

**Static rendering with client-side fetch:** Great for page with dynamic data. We can server render the HTML page and fetch the data from the api provider. The LCP suffers in this case because we need to make an API call to see the actual data.

**Static with getStaticProps:** This method runs sertver side on build time. Good solution for dynamic data when data is available at build time. We dont need to call API. Generated HTML already has data. Not good for websites with lots of data since it can lead to high build times. we only renew the data at build time.

**Incremental static regeneration(ISR):** We can only pre-render certain pages and render the rest on demand whent the user actually them. Much shorter build time. Automatically invalidate the cache. It is likely that the content doesnt update after the elapsed time of cache invalidation and we are unecessarily updating the page.

**On-demand ISR:** Here instead of automatically generating the page after the elapsed cache time, we can regenerate a page triggered by a certain event. It gives all the performance benefits.

For something that is highly tailored to a user, such as depending on a cookie, use server side rendering instead of static rendering.

**What’s new in React 18 - Shruti Kapoor (Me 🙋🏽‍♀️)**

I wrote a blog post in detail about What’s new in React 18. [Take a look here.](https://shrutikapoor.dev/posts/React-QuickGuideCoreConcepts)

**Serverless for frontend devs - Swizec Teller**

Instead of having to deal with the headache of spinning up a server, setting up auth, scaling it up, you could instead call a function that returns your response. Swizec says that a modern backend is a JavaScript function. All you have to care is the actual logic for writing the function. Interesting to hear that Wordle is purely a front-end app. Serverless gives ease of use to engineers to write business logic and not worry about the dev ops stuff.

**GoodBye useEffect - David Khourshid**

This talk David talks about the complications of using useEffect.

useEffect is used for synchronization. We have two types of events -

1. Synchronized: event handlers, subscriptions.
2. Fire and forget effects.

Action effect goes in event handlers. These effects will happen only once in event handlers.

![David showing that effects sorta happen in event handlers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeemaqwelj5tl9qrh6je.png)
When do effects happen? In state transitions. Something needs to trigger an effect.

A state transition like this can describe what effects should be run on state change -

```
[state, event] ⇒ [nextState, effects]
```

So action effects should actually happen in state transitions but it just happen to be in event handlers in React since state transitions happens in event handlers in React.

**Jenn Creighton, Netflix: Now and .then: Debugging Async JavaScript**

Jenn talks about how to find issues with code that is valid but incorrect.

1. Use `reject` to throw an error in async code.
2. Use `catch` to throw an error after all `then`s
3. Use debugger to find issues in async code.

She also recommends “being the bad dog” - Learn all the ways in code could go wrong, you will learn how to find bugs and issues faster.

**Ryan Florence, Remix: When To Fetch: Remixing React Router**

Ryan talks about some tactics to fetch better and avoid showing spinner for too long in a UI. He recommends reducing the job of a component from initiator + reader + fallback by initiating fetches before you render by decoupling iniating, reading from falling back. Ryan talks about how Remix can help solve this problem using `loader` . Remix helps you unblock the fetches on the server since the server knows the URL And it can initiates the fetches there. This helps in reducing LCP significantly. Remix also takes advantage of streaming. This helps in letting browser download everything in parallel. Remix does it using `deferred`.

I think it is pretty neat.

**Michael Chan, Chromatic: Tame the Component Multiverse**

Michael talks about the UI multiverse and UI Visual Testing and how to produce tests automatically using Storybook. Storybook also helps you do accessibility tests, verifying event handlers. Chromatic integrates with Storybook and helps in visual testing by taking screenshots of every story and comparing the diff. It also does interaction test such as click a button and open a model.

![Michael showing UI testing continuum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc2tim23tpcxhrlwu47a.png)
**Shawn Swyx Wang, Temporal: The third age of JavaScript: Three years in**

Shawn does a really cool tech radar for the third age of JavaScript aka the modern age and the future and talks about the trend of JS. This age is about collapsing layers of tooling. In 2022, ES modules are growing. IE support has been dropped. NextJS and Typescript are winning. If you have been thinking of re-skilling, Shawn recommends web assembly since it is still in its web assembly. Here’s the mental model that Shawn uses to describe the third age -

![Mental model of javascript can be described by a rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sb0j1rhyfr2ur9p1x8k.png)

---

If you enjoyed this article, share it with someone else.

- For more frequent tips, [stay in touch on Twitter](http://twitter.com/shrutikapoor08)
- [Want to say Thank You? Buy me a coffee](https://www.buymeacoffee.com/shrutikapoor)


Last week I had the pleasure of attending and speaking at Reactathon 2022 in Berkeley. Here is a recap of what I learnt at Reactathon 2022.

What I learnt at Reactathon


Do you ever find it challenging to work on your project, side hustle, or even your hobby? Have you ever had those moments where nothing feels exciting? You lay in bed feeling - is it me, or is my work that boring? I have those days too. Some weeks I am charged up and determined to take over the world. The other weeks, I feel low, bored, and stuck, and I feel like I don't have the motivation to write even one line of code.

This article will discuss what to do when you are not motivated and procrastinating working.

## What to do when motivation depletes, and you have no excitement to work on anything?

We must remember that motivation comes in any shape or form. Some days, motivation looks like creating art, whereas other days, it inspires you to create a blog post. Some days it looks like going on a 7-mile hike, whereas other days, it is about taking care of yourself and working your ass off.

Acknowledge and appreciate the motivation and its form. Let it encompass you, take you on a ride, and bring you new experiences, joy, and fulfillment. Let yourself feel motivated - no matter what form it strikes in because motivation in one form bleeds into another.

Some days when I feel low, I pull out my paintbrushes, put on a Bob Ross painting tutorial, play my favorite show in the background, make myself a cup of tea, light a candle, and start painting. It feels good to use this time to de-stress. I don't care too much about the quality; I care about how I feel in the moment. I feel relaxed, inspired, motivated, and feel like I am taking care of myself and feeling creative while I am doing it. Even though I may not feel motivated to write code, I feel motivated to paint - and that's okay!

I then take that feeling to the next day - either to let my creativity work on my art or to help me create something else.

An important thing to remember is that motivation is fleeting. A burst of inspiration usually lasts 1 - 3 weeks. By only relying on motivation to fulfill your dreams and goals, you are not creating a strategy for being consistent. What you need is discipline. You need a system of habits. A habit system keeps you going day after day and becomes part of your daily routine, even when motivation has left you.

## What is a habit system, and how to create it?

It is a carefully thought-out daily routine of habits that take you closer to your goal. It is a system of what you need to do, how long you need to do it, what ambiance you want to create before you do the things you need to do, and how you will put yourself in the right mental frame of mind.

For example, as a developer, think about what goals you have set for yourself? They may look like this -

1. Week: create a feature for a project you are working on.
2. Month: Learn TypeScript
3. Quarter: Release project
4. Year:
   Be proficient in React, TypeScript
   Speak at a conference
   Create one blog every month.

Now, think about how you will break down these goals into tasks, and by what deadline are you hoping to get it done? Work backward from that deadline, and see what tasks you can achieve in the short term to achieve that goal. Here is an example of one of the above goals -

**Goal**: create a feature for a project you are working on

**Deadline**: 1 week from today.

**Steps**:

1. Research what I need- dependencies, stakeholders, assets.
2. What are the steps for creating this feature?
3. What are some open questions?
4. Who can help me?

**Timeline**:

Day 1: Research
Day 2 - 3: Development work + Testing
Day 4: End to end testing + fixing any bugs.
Day 5: Deploy to staging env and get ready for demo.

The next step is to "make" the time to do these steps. You carve out in your calendar to make it happen. Look at your calendar, and block out "focus time". This is the time when you will get these tasks done. Next, create a system of "setting the mental frame". This is how you will put yourself into being in the mood of getting work done.

## My Habit System

Here is the system that I use to keep myself on track -

1. Finding ideas - Often, I don't feel inspired to do anything because nothing is on my plate to do. I may have a lot of items in the backlog that I could work on, but I haven't given much thought to any of those ideas, and because I haven't "brought them on my plate," they don't feel as exciting. I go through my backlog or idealist and see if anything inspires me to overcome that. If not, I will browse blog articles on dev.to, freecodecamp, or Medium to see if any trending articles inspire creativity. If not, I will find exciting conversations on Twitter. If not, I will open Udemy or YouTube and find something to learn. If none of that works, it is a signal that I need to chill out and take time to myself. I give myself a "creative" break - go on a walk, listen to a podcast. When something does inspire creativity during this break, I will write it down.

2. Setting timelines - Once I have a few ideas in mind, I will pick the one that excites me the most. I will put a soft deadline for me - often two weeks. Then I will work backward from the deadline and mark time in my calendar to work on that topic. I usually set 1-hour slots in my calendar if my calendar is busy and longer if I have more time. Some weeks, I may only be able to carve out 2 hours, okay. Once it is on my calendar, I will force myself to sit down and get myself ready for focused work hours.

3. Setting a mood is crucial because having a good ambiance is vital for me and creates a stimulating environment. My stimulants are - sound, smell, and sight.
   **Sound**: I put on a lofi or focus playlist. [This](https://www.youtube.com/watch?utm_campaign=JSByte&utm_medium=email&utm_source=Revue%20newsletter&v=csCp0Wd2-40.) is the one I commonly watch.
   **Smell** - I have candles and diffusers set up in my office to create a "focus vibe". Sometimes, when I need a kick, I will also use roll-on essential oils.
   **Sight** - I feel most motivated when someone else is working with me or when I am outside in nature. This is why my work desk faces a window where I can see trees, wind blowing, leaves rustling, and birds chirping. In the youtube video I linked, the guy is also working, which makes me feel inspired to work. It's like having a working buddy. I created [a Twitch stream](http://twitch.tv/shrutikapoor?utm_campaign=JSByte&utm_medium=blog&utm_source=devto) and [discord server](https://discord.gg/rgqyH75Saf?utm_campaign=JSByte&utm_medium=blog&utm_source=devto) for this reason. When sitting in my home office alone is not enough to motivate me, and I need external motivation, I go to a cafe. Lately, I have also been going to a neighborhood park to write, which has been very helpful in creating articles.

4. Cutting out distractions - This is very important to me because I have an attention span of a goldfish. If given a chance, I will merrily browse away on Twitter, keep clicking notifications, or keep scrolling on Instagram. So during my focus time, I put my phone on silent, quit my email applications, and turn slack to Do not disturb mode. I tell myself - next 45 minutes, I will not look at my phone, answer emails, look at Twitter or open slack. If I need to stop getting distracted, I will log out of these applications. Out of sight, out of mind. 😄

5. Get it going - At this point, I have got my idea picked out, my vibe setup, my drink in my hand, my music playing, and the only thing I need to do is start typing. I begin my Pomodoro timer. I work in 45-minute sessions with 15-minute breaks. I use the video I linked above as my Pomodoro timer. My goal is that I should work through the whole video by the end of the day. Once the bell in the video hits "ding," I am ready. I start typing whatever comes to my head. I don't care much about polishing the content or code in the first go. This is a first go anyway. I will come back and revise the code/ content repeatedly. The idea is to get it going and get the juices flowing. It's all about getting your mind to dump on the page.

6. Take a break - Once the timer is up, it's time to take a break. I force myself to get up, take a walk, go outside, make a new cup of tea, do an errand - anything as long as it is not scrolling away mindlessly on Twitter or Instagram. This is the time for me to give myself a break. Sometimes towards the end of the break, around the 10-minute mark, I will check Slack, emails, or any urgent notifications on my phone. Sometimes, nobody needs me ☹️ so I get back to work for another 45-minute cycle.

7. Wrap it up - I realized during these sessions that to have continuity and be motivated in the next session, I need to know what I have accomplished, where I left off, and what I have to do next. For this, I will make notes at the end of the sessions, usually a revision of the above outline - What I did, what open questions I have, what I need to do in the next session, action items and people I need to reach out for help.

And so, the cycle repeats.

I hope this article helped you get inspired to create a habit system for yourself to keep you on track. If you would like to work together on Twitch or Discord, [DM me on Twitter](http://twitter.com/shrutikapoor08?utm_campaign=JSByte&utm_medium=blog&utm_source=Devto) telling me what is your preferred work schedule -

1. 9 AM - 11 AM PST Weekdays
2. 9 PM - 11 PM PST Weekdays

In the next article, I will talk about what to do when motivation does not strike, no ideas come to mind, and you need to give yourself a jolt. Stay tuned. [You can also receive notifications about the next article directly in your inbox.](https://www.getrevue.co/profile/shrutikapoor08?utm_campaign=JSByte&utm_medium=shrutikapoordev&utm_source=homepage)


Do you ever find it difficult to work on your project, your side hustle, or even your hobby? In this article, I want to discuss what to do when you feel you have no motivation to do anything, or can not collect yourself to focus on your task at hand.  

How to stay motivated as a developer and stop procrastinating.


React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of. This release focuses on performance improvements and updating the rendering engine.

### Quick Guide

| Category               | Feature                                                                          |
| ---------------------- | -------------------------------------------------------------------------------- |
| Concept                | Concurrent React                                                                 |
| Features               | Automatic Batching, Transitions, Suspense on the server                          |
| APIs                   | createRoot, hydrateRoot, renderToPipeableStream, renderToReadableStream          |
| Hooks                  | useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect |
| Updates                | Strict mode                                                                      |
| Deprecated/discouraged | ReactDOM.render, renderToString                                                  |

---

### How to upgrade to React 18

1. Install React 18 and React DOM from npm or yarn

   `npm install react react-dom`

2. Use `createRoot` instead of `render`

In your index.js, update `ReactDOM.render` to `ReactDOM.createRoot` to create a root, and render your app using root -

React 17 -

```jsx
import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);
```

React 18 -

```jsx
import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);
```

### Core Concept: Concurrency

To understand concurrency, let’s consider [this example](https://github.com/reactwg/react-18/discussions/46) by Dan Abramov from React 18 Working group discussions-

Let’s say that we need to call two people - Alice and Bob. In a non-concurrent setting, we can only have one call at a time - we would first call Alice, end the call and then call Bob. This is fine when calls are short but if call with Alice has a long waiting period (such as on-hold), this can be a time sink.

![Non-concurrent call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io6s64j30dt3na6yxzp4.png)

In a concurrent setting, we could call Alice and once we are put on hold, we can call Bob. This doesn’t mean that we are talking to two people at the same time, this means that we can have two or more concurrent calls at the same time and decide which call is more important.

![Concurrent call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4zgvausl6go1ur769cd.png)

Similarly, in React 18 with concurrent rendering, React can interrupt, pause, resume, or abandon a render. This allows React to respond to the user interaction quickly even if it is in the middle of a heavy rendering task. Before React 18, rendering was a single, uninterrupted, synchronous transaction and once rendering started, it couldn’t be interrupted.

Concurrency is a foundational update to React’s rendering mechanism. Concurrency allows React to interrupt rendering. React 18 introduces the foundation of concurrent rendering and new features such as suspense, streaming server rendering and transitions are powered by concurrent rendering.

### New Feature: Automatic batching

React 18 features automatic batching. To understand batching, let’s consider the example of grocery shopping from the [same React Working Group discussion](https://github.com/reactwg/react-18/discussions/46#discussioncomment-846694) . Let’s say that you are making pasta for dinner. If you were to optimize your grocery trip, you would create a list of all the ingredients that you need to buy, make a trip to grocery store, and get all your ingredients in one trip. This is batching. Without batching, you would start cooking, find out you need an ingredient, go to the grocery store and buy the ingredient, come back and continue cooking, find out you need another ingredient, go to the grocery store and drive yourself crazy.

In React, batching helps to reduce the number of re-renders that happens when a state changes, when you call `setState`. Previously, react batched state updates in event handlers, for eg:

```jsx
const handleClick = () => {
  setCounter();
  setActive();
  setValue();
};

//re-rendered once at the end.
```

However, state updates that happened outside of event handlers were not batched. For eg, if you had a promise or making a network call, the state updates would not be batched. For eg -

```jsx
fetch('/network').then(() => {
  setCounter(); //re-rendered 1 times
  setActive(); //re-rendered 2 times
  setValue(); //re-rendered 3 times
});

//Total 3 re-renders
```

As you can tell, this is not performant. React 18 introduces automatic batching which allows all state updates - even within promises, setTimeouts and event callbacks to be batched. This significantly reduces the work that React has to do in the background. React will wait for a micro-task to finish before re-rendering.

Automatic batching is available out of the box in React, but if you want to opt-out you can use `flushSync`.

### New Feature: Transitions

Transitions can be used to mark UI updates that do not need urgent resources for updating. For eg: when typing in a typeahead field, there are two things happening - a blinking cursor that shows visual feedback of your content being typed, and a search functionality in the background that searches for the data that is typed.

Showing a visual feedback to the user is important and therefore urgent. Searching is not so urgent, and hence can be marked as non-urgent. These non-urgent updates are called transitions. By marking non-urgent UI updates as "transitions" , React will know which updates to prioritize making it easier to optimize rendering and get rid of stale rendering.

Updates can be marked as non-urgent by using `startTransition`. Here is an example of what a typeahead component would like when marked with transitions -

```jsx
import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any non-urgent state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});
```

**How is it different from debouncing or setTimeout?**

1. startTransition executes immediately unlike setTimeout.
2. setTimeout has a guaranteed delay, whereas startTransition's delay depends on the speed of the device, and other urgent renders.
3. startTransition updates can be interrupted unlike setTimeout and won't freeze the page.
4. React can track the pending state for you when marked with startTransition.

### New Feature: Suspense on the server

React 18 introduces -

1. Code splitting on the server with suspense
2. Streaming rendering on the server

**Client rendering vs server rendering**

In a client-rendered app, you load the HTML of your page from the server along with all the JavaScript that is needed to run the page, and make it interactive. If, however, your javascript bundle is huge, or you have a slow connection, this process can take a long time and the user would be waiting for the page to become interactive, or see meaningful content.

![Illustration of client rendering flow. Source: React Conf 2021 **Streaming Server Rendering with Suspense** by Shaundai Person [https://www.youtube.com/watch?v=pj5N-Khihgc](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccfllg117u8ycgnl5mv7.png)

Illustration of client rendering flow. Source: React Conf 2021 **Streaming Server Rendering with Suspense** by Shaundai Person [https://www.youtube.com/watch?v=pj5N-Khihgc](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)

For optimizing the user experience and avoiding the user to sit on a blank screen, we can use server rendering. Server rendering is a technique where you render the HTML output of your React components on the server and send HTML from the server. This lets the user view some UI while JS bundles are loading and before the app becomes interactive. For a detailed overview of client vs server rendering, [check out Shaundai Person’s React Conf 2021 talk](https://www.youtube.com/watch?v=pj5N-Khihgc)

![Illustration of server rendering flow. Source: React Conf 2021 **Streaming Server Rendering with Suspense** by Shaundai Person [https://www.youtube.com/watch?v=pj5N-Khihgc](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp69o7h47fpufxsqauzx.png)

Illustration of server rendering flow. Source: React Conf 2021 **Streaming Server Rendering with Suspense** by Shaundai Person [https://www.youtube.com/watch?v=pj5N-Khihgc](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)

Server rendering further enhances the user experience of loading the page and reducing time to interactive.

Now what if, most of your app is fast except for one part? Maybe this part loads data slowly, or maybe it needs to download a lot of JS before it gets interactive.

Before React 18, This part can be the bottleneck of the app, and increase the time it takes to render the component. One slow component can slow down the entire page. This is because server rendering was all or nothing - you couldn’t tell React to defer loading of a slow component and couldn’t tell React to send HTML for other components.

React 18 adds support for Suspense on server. With the help of suspense, you can wrap a slow part of your app within the Suspense component, telling React to delay the loading of the slow component. This can also be used to specify a loading state that can be shown while its loading.

In React 18, one slow component doesn’t have to slow the render of your entire app. With Suspense, you can tell React to send HTML for other components first along with the HTML for the placeholder, like a loading spinner. Then when the slow component is ready and has fetched its data, the server renderer will pop in its HTML in the same stream.

![You can add suspense to a slow server rendered component in React 18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taxrh7y9ylx0l68u2btx.png)

This way the user can see the skeleton of the page as early as possible and see it gradually reveal more content as more pieces of HTML Arrive. All of this happens before any JS or React loads on the page, thereby significantly improving the user experience and user perceived latency.

### Strict mode

Strict mode in React 18 will simulate mounting, unmounting and re-mounting the component with previous state. This sets the ground for reusable state in the future where react can immediately mount a previous screen by remounting trees using the same component state before unmounting. Strict mode will ensure components are resilient to effects being mounted and unmounted multiple times.

Sources -

1. [React RFC](https://github.com/reactjs/rfcs/blob/react-18/text/0000-react-18.md)
2. [My previous React 18 post](https://dev.to/shrutikapoor08/what-s-new-in-react-18-1713)
3. [React V18 blog](https://reactjs.org/blog/2022/03/29/react-v18.html)
4. [React Conf 2021 - React for App developers](https://www.youtube.com/watch?v=ytudH8je5ko)
5. [React Conf 2021 - Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc)

---

If you enjoyed this article, give it a ❤️ so others can find it too.

- For more frequent tips, [stay in touch on Twitter](http://twitter.com/shrutikapoor08)
- [Want articles like this directly in your inbox?](http://tinyletter.com/shrutikapoor)


React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of. This release focuses on performance improvements and updating the rendering engine.

React 18 Quick Guide & Core Concepts Explained


In simple terms, it's like when you go to a pizza place, and order a "Make your own" pizza - you pick the base, the sauce, the cheese, the toppings and when the pizza is done, you get exactly what you asked for. With REST, its like you pick a pizza from the predefined menu items. You may get the toppings you want, but you may also get other toppings (like tomatoes) you didn't ask for and sometimes, we will just have to manually pick the tomatoes out of it.

In technical terms, a GraphQL is a query language - a syntax for querying for data from any data source - be it an API or database. GraphQL is an alternative to REST APIs and provides a new way of asking for data. GraphQL lets you specify what data fields you need, and delivers exactly those fields. GraphQL [specification](https://spec.graphql.org/) defines the set of rules for implementing a GraphQL API.

Important point to note is that GraphQL isn't a query language for your database. Unlike SQL, you don't have a query such as `SELECT * from users` for your database. Instead, GraphQL syntax defines how to ask for data from your API. the syntax of a GraphQL query looks like this -

```graphql
query getUsers {
  users {
    firstname
  }
}
```

So, the `QL` in GraphQL means a query language for your API, not database.

A cool thing to note is that GraphQL can be used with any data source such as REST APIs & database. It can be plugged anywhere, built in any language and can be fit on top of any database and tech stack, which means that you can use GraphQL on top of REST APIs and still get the benefits of GraphQL without having to tear down existing REST based architecture. You can use GraphQL in a Java app, JavaScript app, Python, Django, NextJS

GraphQL fits on both client and server side layers. You build a GraphQL API on the server side and then consume this GraphQL API on the client side by firing GraphQL requests (queries, mutations, etc.). There are tools such as [Apollo](https://www.apollographql.com/docs/tutorial/introduction/) that provide full stack solutions to help build GraphQL API on the server and consume it on the client side.

## GraphQL terminology

1. Query: Query is similar to GET in REST. When we want to fetch information from a GraphQL API, we use Query.
2. Mutation: A mutation is used when we want to mutate the data on the server. A mutation is similar to PUT, POST, DELETE, PATCH in a REST API.
3. Schema: Schema is a complete representation of what operations a GraphQL API supports.

## REST vs GraphQL example: Making an API request

Let's say that we want to fetch a user's name. In a REST API, we have an endpoint that we can use to make a GET request. The endpoint may look like `/users/{id}/`. If we use a curl request to make a call and pass in `id` of a user, it will look like this -

```javascript
curl \
-H "Content-Type: application/json" \
https://www.example.com/api/users/123`
```

Let's look at how GraphQL request will look -

1. The "GET" operation of REST is done by ["Query"](https://graphql.org/learn/queries/) in GraphQL.

2. We don't have a separate endpoint for `users` in GraphQL. Every request is sent to `/graphql` endpoint.

3. In order to describe what data we are interested in, we pass the relevant parameters to "Query" operation and describe which Query we are interested in. A GraphQL API may support something like "getUsers" Query, which is a query we can use to get users.

A curl request to a GraphQL API looks like -

```javascript
curl \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "{ user(id:123 ) { name } } " }' \
https://www.example.com/graphql
```

[Try out sample GraphQL requests here](https://graphqlzero.almansi.me/api)

## REST vs GraphQL: Implementing the API

In REST world, we will have resource implementations for each of our operations, such as `GET /user/{id}` is mapped to `getUser(String id)`. `getUser` defines what data is passed if this endpoint is called. This resource implementation will also call any downstream operation if need be - other APIs or fetch directly from the database.

In GraphQL, when implementing a GraphQL API, we need to first the define the schema of the API. Schema is a complete description of what queries, mutations and parameters are allowed. A "GET" operation is done by "Query" in GraphQL. We can specify what arguments a query accepts in a Schema

```
type Query {
	getUser(id: $String!)
}
```

What we return from this `getUser` query is defined by a function called resolvers. Resolvers define what data should be returned when a field is called. Every query is mapped to a resolver. A resolver function can call any API or data sources. Our resolver can be written like this -

```
getUser(args){
	const { id } = args;
	//fetch from database / API
}
```

when a client fetches `getUser` query, they will get back data like this -

```
{
	"data" : {
		"name": "Sample name"
	}
}
```

## Major differences between REST and GraphQL

| REST                                                                    | GraphQL                                                                               |
| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| REST has multiple endpoints.                                            | GraphQL has one endpoint - /graphql                                                   |
| REST APIs support PUT, GET, POST, DELETE, PATCH                         | GraphQL supports Query, Mutation, Subscription                                        |
| REST endpoints are populated by resource implementations                | GraphQL fields are populated by resolvers                                             |
| 200 , 400 , 500 level status codes                                      | 200 level status codes                                                                |
| Often times, roundtrips need to be done in order to fetch complete data | You can fetch multiple fields therefore fetch all the data you need with one requestt |
| Shape of the data is determined by the server                           | Shape of the data is determined by the client calling the API.                        |

## When to use GraphQL vs REST

**When to use GraphQL**

1. When you have multiple downstream APIs
2. When you have extraneous data coming from downstream APIs
3. When you care about which fields are being used by which clients. With the help of GraphQL, you can have field level instrumentation.
4. When you care about ensuring that all clients have the most up to date version of your API. With GraphQL, since there is one endpoint, all updates are given to everyone.
5. When you want to build a UI-first API.
6. When you care about underfetching and overfetching.

**When to use REST**

1. When you depend heavily on caching.
2. When you don't know a complete set of fields you may get from downstream APIs. With GraphQL, you need to know the schema upfront.
3. When you rely heavily on status codes of downstream APIs. Everything in GraphQL is a 200, so you will need to parse the response object or errors object.

## Prereqs to learn GraphQL

While I don't think there is necessarily any pre-reqs, it helps to know the following -

1. Fundamentals of API development
2. REST APIs
3. HTTP
4. A language of choice for implementing GraphQL API - JavaScript, Go, Java, Python etc.

## Resources to learn GraphQL

1. [GraphQL.org](https://graphql.org/)
2. [howtographql](https://www.howtographql.com/)
3. [GraphQL book by Eve Porcello](https://www.oreilly.com/library/view/learning-graphql/9781492030706/)
4. [Udemy course by Stephen Grider](https://www.udemy.com/course/graphql-with-react-course/)

## TL;DR

In plain words, GraphQL is a syntax for asking for data. The big difference between REST and GraphQL is that there is one endpoint only - `graphql`, and in addition to making the call to the API endpoint and passing desired parameters, we also need to provide exactly what fields we want to access.

In technical terms, GraphQL is a specification and provides a way for querying for data. The specification specifies what should happen when data is requested and mutated. GraphQL specifies a way to ask for data, and delivers exactly the data that was requested. Since it is a specification, GraphQL APIs can be created in language - JavaScript, Java, Go, Python.

---

Other GraphQL resources I have published -

1. [What is GraphQL and why should you use it - Front End Happy Hour Podcast](https://frontendhappyhour.com/episodes/no-rest-with-quintessential-libations-graphql/)
2. [Common GraphQL misconceptions](https://dev.to/shrutikapoor08/what-is-graphql-the-misconceptions-57b9)
3. [Using GraphQL in an enterprise](https://www.youtube.com/watch?v=axQzCQ2Q4Rc)
4. [Moving from Redux to GraphQL](https://www.youtube.com/watch?v=HL7gZnrEy68)
5. [GraphQL & State Management](https://www.youtube.com/watch?v=7raJccyHh0Y)
6. [GraphQL Hub - under construction](https://learninggraphql.com/)

---

[Get articles like this in your inbox](https://tinyletter.com/shrutikapoor)
[Work with me in real time](twitch.tv/shrutikapoor)


In technical terms, a GraphQL is a query language - a syntax for querying for data from any data source - be it an API or database. GraphQL is an alternative to REST APIs and provides a new way of asking for data. GraphQL lets you specify what data fields you need, and delivers exactly those fields. GraphQL specification defines the set of rules for implementing a GraphQL API.

What is GraphQL?


# What's new in React 18?

[React 18 alpha version was just announced](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). The theme of React 18 is to make the UI more performant by removing janky user experiences by introducing out of the box features and improvements powered by "concurrent rendering". React 18 introduces minimal breaking changes.

Let's take a look at the major updates of React 18:

## Root API

React 18 introduces Root API `ReactDOM.createRoot`. Before React 18, we used `ReactDOM.render` to render a component to the page. Going forward with React 18, we will use ReactDOM.createRoot to create a root, and then pass the root to the render function. The good news is that your current code with `ReactDOM.render` will still work, however, it is strongly recommended to start transitioning to `createRoot` as `render` will be marked `deprecated` starting React 18. The current `ReactDOM.render` is only provided to ease the transition to React 18.

React 17:

```jsx
import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);
```

React 18:

```jsx
import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);
```

## Automatic batching ( Out of the box, opt-out available):

Batching is the process of grouping multiple state updates into one to prevent multiple re-renders. Previously, React batched state updates that happened in a single event callback managed by React event system, however state updates that happened outside the event were not batched.

However, with automatic batching, all updates, even within promises, setTimeouts, will be batched. Check this example -

```jsx
function handleClick() {
  console.log('=== click ===');
  setCount((c) => c + 1); // Does not re-render yet
  setFlag((f) => !f); // Does not re-render yet
  // React will only re-render once at the end (that's batching!)

  const timeoutCallback = () => {
    // Previously, batching didn't work inside timeouts, fetch, promises.
    // These two setStates causesd re-render in React 17.
    // With React 18, these are now batched.
    setCount((c) => c + 1);
    setFlag((f) => !f);
  };

  setTimeout(timeoutCallback, 1000);
}
```

[See codesanbox link for full example](https://codesandbox.io/s/romantic-pare-efklq?file=/src/index.js:192-695)

**Opt-out:** You can opt-out of automatic batching by using `flushSync`

## startTransition (opt-in)

`startTransition` can be used to mark UI updates that do not need urgent resources for updating. For eg: when typing in a typeahead field, there are two things happening - a blinking cursor that shows visual feedback of your content being typed, and a search functionality in the background that searches for the data that is typed.

Showing a visual feedback to the user is important and therefore urgent. Searching is not so urgent, and hence can be marked as non-urgent. This is where `startTransition` comes into play.

By marking non-urgent UI updates as "transitions" , React will know which updates to prioritize making it easier to optimize rendering and get rid of stale rendering. Updates marked in non-urgent `startTransition` can be interrupted by urgent updates such as clicks or key presses.

```jsx
import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});
```

**How is it different from debouncing or setTimeout?**

1. startTransition executes immediately unlike setTimeout. setTimeout has a guaranteed delay, whereas startTransition's delay depends on the speed of the device, and other urgent renders.

1. startTransition updates can be interrupted unlike setTimeout and won't freeze the page.

1. React can track the pending state for you when marked with startTransition.

## How to move to React 18?

```javascript
npm install react@alpha react-dom@alpha
```

Change React.render to React.createRoot

```jsx
const rootElement = document.getElementById('root');
ReactDOM.createRoot(<App />, rootElement).render(<App />);
```

---

[Checkout the full list of updates on React Working Group's GitHub](https://github.com/reactwg/react-18/discussions/categories/announcement)


Let's take a look at the major updates of React 18

What's new in React 18?

In this article, I will dive into the resources, a proposed plan of getting started, and a list of resources to help you learn to become a web developer. This plan is going to be focused on getting you a job, and therefore project-heavy.

Becoming a front end web developer in 2021


1. Online resources
   - [JavaScript 30 by Wes Bos](https://javascript30.com/)
   - [JavaScript.info](https://javascript.info/)
   - Youtube channels
     - [LevelUpTuts](https://www.youtube.com/user/LevelUpTuts)
     - [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
     - [Freecodecamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
     - [Programming with Mosh](https://www.youtube.com/watch?v=8JJ101D3knE&ab_channel=ProgrammingwithMosh)
     - [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA)
     - [Ben Awad](https://www.youtube.com/user/99baddawg)
2. Bootcamps

   - [Freecodecamp](https://www.freecodecamp.org/)
   - [Codeacademy](https://www.codecademy.com/)
   - [Udacity](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011)
   - [Coursera](https://www.coursera.org/learn/html-css-javascript-for-web-developers#syllabus)

3. Books
   - [Front-End Developer Handbook](https://frontendmasters.com/books/front-end-handbook/2018/)
   - [MDN](https://developer.mozilla.org/en-US/docs/Learn)
4. Podcasts

   - [Front end happy hour](https://frontendhappyhour.com/)
   - [SyntaxFM](https://syntax.fm/)
   - [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/)
   - [Developer Tea](https://spec.fm/podcasts/developer-tea)
   - [Toolsday](https://spec.fm/podcasts/toolsday)

5. Blog sites with awesome articles

   - [Dev.to](https://dev.to/)
   - [CSS Tricks](https://css-tricks.com/)
   - [Smashing Magazine](https://www.smashingmagazine.com/)
   - [Medium](https://medium.com/)
   - [Hashnode](https://hashnode.com/)
   - [Hackernoon](https://hackernoon.com/)

6. Checklists and roadmaps
   - [Web development Checklist](https://github.com/shrutikapoor08/Learn-Web-Development-Checklist)
   - [Front End Checklist](https://frontendchecklist.io/)
   - [Roadmap to being a Front End developer](https://roadmap.sh/frontend)

**Paid Resources**

1. Online resources

   - [Frontend Masters](https://frontendmasters.com/learn/beginner/)
   - [Udemy](https://www.udemy.com/)
   - [Lynda](https://www.lynda.com/Web-training-tutorials/88-0.html)
   - [EggHead](https://egghead.io/)

2. Books
   - [Eloquent JavaScript, Marijn Haverbeke](https://www.amazon.com/Eloquent-JavaScript-3rd-Introduction-Programming/dp/1593279507)
   - [HTML and CSS: Design and Build Websites](https://www.goodreads.com/book/show/10361330-html-and-css)

---

Shruti Kapoor
[Follow on Twitter](twitter.com/shrutikapoor08)
[Hang out on Twitch](twitch.tv/shrutikapoor)
[Get articles like this in your inbox](bit.ly/shrutinewsletter)

---


There's tons of resources out there to learn from. Here are some of my favourite free resources

Useful free and paid resources for web developers to stay updated in 2021


# What is imposter syndrome?

Imposter syndrome is the feeling that you don't belong here. It is the feeling of being amongst an incredibly smart group of people and feeling you don't deserve a seat at the table, that it was a mistake you ended up here, that your success is a fluke.
If you have been feeling like this, you are not alone. [70% of the population](https://so06.tci-thaijo.org/index.php/IJBS/article/view/521) feels the imposter phenomenon - feeling of anxiety, fear of failure and dissatisfaction with life.

# Dealing with imposter syndrome.

Dealing with imposter syndrome can become manageable with a little patience, self-understanding and self-love. Here are some tips that have helped me manage my imposter syndrome -

1. **You are not alone**: Know that usually overachieving people experience imposter syndrome.

1. **Ask for help:** I have noticed that personally imposter syndrome gets triggered when I am working on something unfamiliar. I have an expectation from myself to figure things out instantaneously, and to "just know" things. Getting guidance from someone made me feel that I was weak and not smart enough. However, I have to come to realize that this behavior is completely unfair to me. We all need help when starting out, and often our peers embrace the idea of us reaching out for help. Next time when you are in an uncharted territory, remind yourself to let go of unrealistic expectations from yourself and let others help you on this journey.

1. **Review your achievements:** Make a list of accomplishments you have had so far in your life, and list things you are really proud of. Now make a list of things that challenged you in the last year, and you were able to overcome. These lists are a proof you are capable of amazing things.

1. **Reach out:** Often, sharing about how you feel with others makes it easier to overcome feeling like an imposter. Some people who can help -
   - a friend in your support group who makes you feel good about yourself.
   - a colleague / manager you have a good relationship with.
   - your mentor
   - a professional psychiatrist.
1. **Disconnect:** Stepping away from the situation helps in disconnecting and feeling better. Here are some ways to disconnect -
   - Take a breather. Relax. Go for a walk.
   - Workout. Do some heavy cardio. Do some light yoga.
   - Do some self-care - take a bath, light a candle, do a spa session.
1. **Do something creative:** Activities that involve creating something - such as music, painting, knitting, reading, writing a blog, novel helps to channel our creative energy. Creativity helps unclog your brain and gives you the confidence in your ability to produce your craft.

1. **Step in their shoes:**
   - If you were hiring someone with these achievements, how proud would you feel to have them on your team?
   - If your friend was in a similar situation and told you about their imposter syndrome, what would you tell them? How would you comfort them? Now tell that to yourself. Be your own best friend.
   - If your co-worker who you admire was having imposter syndrome, what would you tell them? Now tell that to yourself. Be your own secret admirer.
   - What would your future 5 year self tell you at this moment?

# Prepare for impending imposter syndrome.

- Did you recently achieve something? Write it in your list of accomplishments.
- Did you overcome a major hurdle or problem? Write it in your list of accomplishments.
- Did you receive kind words of appreciation from someone? Write it.
- Did you recently find out that someone you admire is having imposter syndrome? Were you surprised hearing that? Did you offer comfort? Write down what you said and how you felt. This will be helpful when you experience imposter syndrome yourself.
- Make a list of things that makes you feel better - taking a walk, lighting candles, watching your favorite TV show (FRIENDS), talking to a friend. This will be helpful to nurture you in the time of need.
- Write down some affirmations that work for you. Some examples are -
  - I am here, therefore I belong.
  - A hard problem means I am levelling up.
  - I am strong and capable.
  - I am worthy of respect and glory.
  - I am proficient in my craft.

# Reach out

Are you feeling any of these emotions at the moment? Reach out. [Send me a message on Twitter.](https://twitter.com/shrutikapoor08) I am here for you.

---

If you are interested in articles like this and JavaScript tidbits, [sign up for my newsletter](https://tinyletter.com/shrutikapoor)


If you have been feeling like this, you are not alone. 70% of the population feels the imposter phenomenon - feeling of anxiety, fear of failure and dissatisfaction with life.

7 tips on how to deal with imposter syndrome and how to prepare for it


# JavaScript Form Validation – How to Check User Input on HTML Forms with JS Example Code

Forms are ubiquitous in web applications. Some apps such as Gmail use forms to collect data to sign up users and provide an email address, whereas some apps such as PayPal use forms to fulfill online transactions to facilitate shopping experience. Some web forms are used to apply for a new car loan whereas some forms are used to order pizza for dinner. It is, therefore, important that the data collected from forms is cleansed, formatted correctly and devoid of any malicious code. This is called form validation.

We need form validation anytime we are accepting a user input. We must ensure that the data entered is in correct format, lies within a valid range of data (such as for date fields) and does not contain malicious code that could lead to SQL injections. Malformed or missing data can also causes erroneous results from API.

## What are the different types of form validations?

Form validation can happen on -

1. Client side and
2. Server side.

Client side validation occurs using HTML5 attributes and client side JavaScript. You may have noticed that in some forms, as soon as you enter an invalid email address, the form gives an error "Please enter a valid email". This immediate type of validation is usually done via client side JavaScript.

![Validation error for incorrect credit card number](./img/form-validation-cc.gif)

In other cases, you may have noticed that when you fill out a form and enter details such as a credit card, it may show a loading screen and then show an error "This credit card is invalid". Here, the form made a call to its server side code, and returned a validation error after performing additional credit card checks. This validation case where a server-side call is made is called server side validation.

## What should be validated?

Form validation is needed anytime you accept data from a user. This may include -

1. Validating the format of fields such as email address, phone number, zip code, name, password.
2. Validating mandatory fields
3. Checking the type of data such as string vs number for fields such as social security number.
4. Ensuring value entered is a valid value such as country, date, etc.

## Client side validation

On client side, validation can be done in two ways -

1. Using HTML5 functionality
2. Using JavaScript

### Using built in HTML5 functionality

HTML5 provides a bunch of attributes to help validate data. Here are some common validation cases:

- Making fields required using `required`
- Constraining the length of data:
  - `minlength`, `maxlength`: for text data
  - `min` and `max` for max value of num type
- Restricting the type of data using `type` :
  - `<input type="email" name="multiple>`
- Specifying data pattern using `pattern`:
  - specifies a regex pattern that entered form data needs to match

When the input value matches the above HTML5 validation, it gets assigned a psuedo-class `:valid` and `:invalid` if it doesn't.

Let's try an example -

```HTML
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>
```

![Client side form validation for required fields using HTML5 attributes](./img/form-validation-required.png)

[Link to JSFiddle](https://jsfiddle.net/58xc2qyj/)

Here we have two required fields - First Name and Last Name. Try this example in JSFidle. If you skip either of these fields and press submit, "Please fill out this field". This is validation using in-built HTML5.

### Using JavaScript

When implementing form validation, there are a few things to consider -

1. What is defined as "valid" data?
   1. This helps you answer questions such as the format, length, required fields and type of data.
2. What happens when invalid data is entered?
   1. This will help you define the user experience of the validation - whether to show an error message inline or top of the form, how detailed should the error message be, should the form be sumitted anyways? Should there be analytics to track invalid format of data?

JavaScript validation can be performed in two ways:

1. Inline validation using JavaScript
1. HTML5 Constraint validation API

#### Inline validation using JavaScript

```html
<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>
```

```javascript
const submit = document.getElementById('submit');

submit.addEventListener('click', validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById('firstname');
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById('nameError');
    nameError.classList.add('visible');
    firstNameField.classList.add('invalid');
    nameError.setAttribute('aria-hidden', false);
    nameError.setAttribute('aria-invalid', true);
  }
  return valid;
}
```

```css
#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}
```

[Link to JSFiddle](https://jsfiddle.net/0tq3e49w/4/)

In this example, we check for required fields using JavaScript. If a required field is not present, we use CSS to show the error message. Aria labels are modified accordingly to signal an error. By using CSS to show / hide an error, we are reducing the number of DOM manipulations we need to make. The error message is provided in-context thereby making the user experience intuitive.

#### HTML5 Constraint validation API

`required` and `pattern` HTML attributes can help perform basic validation, but if you want more complex validation or provide detailed error messaging, you can use Constraint Validation API. Some methods provided by this API are -

1. `checkValidity`
2. `setCustomValidity`
3. `reportValidity`

The following properties are useful -

1.  `validity`
2.  `validationMessage`
3.  `willValidate`

In this example, we will validate using HTML5 inbuilt methods such as `required`, `length` in conjunction with Constraint Validation API to provide detailed error messages.

```HTML
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>
```

```javascript
const nameField = document.querySelector('input');

nameField.addEventListener('input', () => {
  nameField.setCustomValidity('');
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener('invalid', () => {
  nameField.setCustomValidity('Please fill in your First Name.');
});
```

[Link to JSFiddle](https://jsfiddle.net/xz2wjLck/1/)

## Server side:

Client side validation is not the only validation check you should do. You must also validate the data received from your client on server side code to ensure that the data matches what you expect it to be. This can be used to perform business logic verifications that should not live on client side.

## Best practices

1. Always have server side validation since malicious actors can bypass client side validation.
2. Provide detailed error message in-context with the field that produced an error.
3. Provide an example of what the data should look like in case of an error message, such as - "Email did not match format - test@example.com"
4. Avoid using single error pages that involve redirection. This is bad user experience and forces the user to go back to previous page to fix the form and lose context.
5. Always mark required fields.

## Additional Reading

- https://medium.com/@andrew.burton/form-validation-best-practices-8e3bec7d0549
- https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
- https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types
- https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security
- https://www.smashingmagazine.com/2009/07/web-form-validation-best-practices-and-tutorials/
- https://css-tricks.com/form-validation-part-1-constraint-validation-html/


We need form validation anytime we are accepting a user input. We must ensure that the data entered is in correct format, lies within a valid range of data (such as for date fields) and does not contain malicious code that could lead to SQL injections. Malformed or missing data can also causes erroneous results from API.

JavaScript Form Validation – How to Check User Input on HTML Forms with JS Example Code


# JavaScript optional chaining `?.` - how does it work and when to use?

## What is it?

Optional chaining `?.` in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

Current Status: `ECMAScript proposal at stage 4 of the process.` : https://github.com/tc39/proposal-optional-chaining

## Use cases

1. Accessing potentially `null` or `undefined` properties of an object.
2. Getting results from a variable that may not be available yet.
3. Getting default values.
4. Accessing long chain of properties.

Imagine you are expecting an API to return an object of this sort.

```javascript
obj = {
  prop1: {
    prop2: {
      someProp: 'value',
    },
  },
};
```

But, you may not know if each of these fields are available ahead of time, since some of these fields may not have been sent back by the API, or they may come back with null values. Here is an example -

```javascript
//expected
obj = {
  id: 9216,
  children: [
    { id: 123, children: null },
    { id: 124, children: [{ id: 1233, children: null }] },
  ],
};

//actual
obj = {
  id: 9216,
  children: null,
};
```

This happens very often with functions that call APIs. You may have seen code in React that tries to safeguard against these issues like this -

```jsx
render = () => {
  const obj = {
    prop1: {
      prop2: {
        someProp: 'value',
      },
    },
  };

  return (
    <div>
      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.someProp && (
        <div>{obj.prop1.prop2.someProp}</div>
      )}
    </div>
  );
};
```

In order to better prepare for this issue, often times in the past we have used `Lodash.js`, specifically the `_.get` method.

```javascript
_.get(obj, prop1.prop2.someProp);
```

which gives `undefined` if either of those properties are `undefined`. **Optional chaining is exactly that**! Now instead of using an external library, this functionality is in-built!

## How does optional chaining work?

`?.` can be used to chain properties that may be `null` or `undefined`.

```
const propNeeded = obj?.prop1?.prop2?.someProp;

```

If either of those chained properties is `null` or `undefined`, javascript will return `undefined`. What if we want to return something meaningful? Try this -

```javascript
let familyTree = {
  us: {
    children: {},
  },
};

// with _.get
const grandChildren = _.get(
  familyTree,
  'us.children.theirChildren',
  'got no kids'
);

//with optional chaining and null coalescing
const nullCoalescing = familyTree?.us?.children?.theirChildren ?? 'got no kids';
console.log(nullCoalescing); //got no kids
```

It also works for objects that may be null or undefined

```
let user;
console.log(user?.id) // undefined

```

- Can this be used for functions that may return null / undefined?

## How to try out

1. In your browser's console
   This is a recent addition and old browsers may need polyfills. You can try it in chrome or firefox in the browser's console. If it doesn't work, try turning on javascript experimental features by visiting `chrome://flags/` and enabling "Experimental JavaScript".

2. In your node app
   By using babel -

```
{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
```

## Resources

1. https://dmitripavlutin.com/javascript-optional-chaining/
2. Babel's doc: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

## TL;DR

Use optional chaining `?.` for objects or long chain properties that may be `null` or `undefined`. The syntax is -

```javascript
let user = {};
console.log(user?.id?.name);
```

---

Interested in more tutorials and JSBytes from me? [Sign up for my newsletter.](https://tinyletter.com/shrutikapoor) or [follow me on Twitter](https://twitter.com/shrutikapoor08)


Optional chaining in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

JSByte - JavaScript optional chaining `?.` - how does it work and when to use?


# JavaScript: Difference between splice and slice - explained with a cake example.

This could be translated to "how to not get confused between splice and slice" because, I can never remember the difference between the two. So I am hoping this trick will help me and you in the future -

```
S (p) lice = Slice + (p) => Slice + in (p) lace
```

---

## Array.prototype.slice()

It is used to slice an array from the `start` point to `end` point, excluding `end`. Like the name suggests, it is used to slice elements out of an array, but unlike slicing a cake, slicing an array does not cut the actual array, but keeps it unmodified (infinite cake!).

```JS
arr.slice(start, [end])

```

Rules

1. A new array is returned and the original array is unmodified.
2. If `end` is omitted, end becomes the end (last element) of array.
3. If `start` is -ve, the elements are counted from the end.

```JS
const infiniteCake = ['🍰','🍰','🍰','🍰','🍰','🍰']

let myPieceOfCake = infiniteCake.slice(0, 1) // ['🍰']
let yourDoublePieceOfCake = infiniteCake.slice(0,2) // (2) ["🍰", "🍰"]
console.log(infiniteCake) //['🍰','🍰','🍰','🍰','🍰','🍰']

```

As you see, `inifinteCake` is unmodified.

## Array.prototype.splice()

Splice does operations **in place**, which means it modifies exisiting array. In addition to removing elements, splice is also used to add elements. Splice is the real world cake "slice";

```JS
arr.splice(start, [deleteCount, itemToInsert1, itemToInsert2, ...])
```

Rules

1. Operation is in place.
2. An array is returned with the deleted items.
3. If `start` is -ve, the elements are counted from the end.
4. If `deleteCount`is omitted,the elements until the end of array are removed.
5. If items to insert such as `itemToInsert1` are omitted, elements are only removed.

```JS
const cake = ['🍰','🍰','🍰','🍰','🍰','🍰'];
let myPieceOfCake = cake.splice(0, 1) // ["🍰"]
console.log(cake) // (5) ["🍰", "🍰", "🍰", "🍰", "🍰"]

let yourDoublePieceOfCake = cake.splice(0,2) //(2) ["🍰", "🍰"]
console.log(cake) //(3) ["🍰", "🍰", "🍰"]

```

Here, `cake` is modified and reduces in size.

## Code Examples

```JS
const myArray  = [1,2,3,4,5,6,7]

console.log(myArray.slice(0))       // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(0, 1))    // [ 1 ]
console.log(myArray.slice(1))       // [ 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(5))       // [ 6, 7 ]
console.log(myArray.slice(-1))      // [ 7 ]
console.log(myArray)                // [ 1, 2, 3, 4, 5, 6, 7 ]



const secondArray = [10, 20, 30, 40, 50]

console.log(secondArray.splice(0, 1))   // [ 10 ] : deletes 1 element starting at index 0
console.log(secondArray.splice(-2, 1))  // [ 40 ] : deletes 1 element starting at index end-2
console.log(secondArray)                // [ 20, 30, 50 ]
console.log(secondArray.splice(0))      // [ 20, 30, 50 ] : deletes all elements starting at index 0
console.log(secondArray)                // []
console.log(secondArray.splice(2, 0, 60, 70)) // [] : deletes 0 elements starting at index 2 (doesn't exist so defaults to 0) and then inserts 60, 70
console.log(secondArray)                // [60, 70]
```

## TL;DR

Use `splice` if the original array needs to be modified, or elements need to be added.

Use `slice` for removing elements if original array should not be modified.

---

Interested in more tutorials and JSBytes from me? [Sign up for my newsletter.](https://tinyletter.com/shrutikapoor) or [follow me on Twitter](https://twitter.com/shrutikapoor08)


This could be translated to - `how to not get confused between splice and slice` because, I can never remember the difference between the two. So I am hoping this trick will help me and you in the future.

JSByte – JavaScript Array Slice vs Splice - the Difference Explained with Cake


# JavaScript URL Encode Example – How to Use encodeURIcomponent() and encodeURI()

You might think that encodeURI and encodeURIComponent do the same thing, at least from their names. And you might be confused which one to use and when.
In this article, I will demystify the difference between `encodeURI` and `encodeURIComponent`.

### What is a URI and how is it different from URL?

These abbreviations stand for:
**URI**: Uniform Resource Identifier
**URL**: Uniform Resource Locator

Anything that uniquely identifies a resource is its URI, such as id, name, ISBN number. A URL specifies a resource and how it can be accessed(protocol). All URLs are URIs, but not all URIs are URLs.

### Why do we need to encode?

URLs can only have certain characters from the standard 128 character ASCII set. Reserved characters that do not belong to this set must be encoded. Hence, we need to encode these characters when passing into a URL. Special characters such as `&`, `space`, `!` when entered in a url need to be escaped, otherwise they may cause unpredictable situations.

Use cases:

1. User has submitted values in a form that may be in a string format and need to be passed in, such as url fields.
2. Need to accept query string parameters in order to make GET requests.

### What is the difference between encodeURI and encodeURIComponent?

`encodeURI` and `encodeURIComponent` are used to encode Uniform Resource Identifier(URI) by replacing certain characters by one, two, three or four escape sequences representing the UTF-8 encoding of the character.

`encodeURIComponent` should be used to encode a **URI** **Component** - a string that is supposed to be part of a URL

`encodeURI` should be used to encode a **URI** or an existing URL.

[Here's a handy table of the difference in encoding of characters](https://stackoverflow.com/a/23842171)

### Which characters are encoded?

`encodeURI()` will not encode: `~!@#$&*()=:/,;?+'`

`encodeURIComponent()` will not encode: `~!*()'`

The characters `A-Z a-z 0-9 - _ . ! ~ * ' ( )` are not escaped.

### Examples

```JS
const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

```

### When to encode

1. When accepting an input thay may have spaces.
   ```JS
   encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.html
   ```
2. When building a url from query string parameters.

   ```JS
    let param = encodeURIComponent('mango')
    let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99

   ```

3. When accepting query parameters that may have reserved characters.

```JS
   let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple


```

### Summary

If you have a complete URL, use encodeURI. But if you have a part of a URL, use encodeURIComponent.

Interested in more tutorials and JSBytes from me? [Sign up for my newsletter.](https://tinyletter.com/shrutikapoor) or [follow me on Twitter](https://twitter.com/shrutikapoor08)


You might think that encodeURI and encodeURIComponent do the same thing, at least from their names. And you might be confused which one to use and when. In this article, I will demystify the difference between encodeURI and encodeURIComponent.

JavaScript URL Encode Example – How to Use encodeURIcomponent() and encodeURI()


# Access-Control-Allow-Origin header explained: What is it used for and how to use it?

Outline

1. What is it?
2. When should it be used?
3. How to use?

## What is `Access-Control-Allow-Origin` header?

`Access-Control-Allow-Origin` is a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) header. CORS is a mechanism for browsers to let a site running at origin A to request resources from origin B. Origin is not just the hostname, but a combination of port, hostname and scheme. Such as - `http://mysite.example.com:8080/`

Here's an example of where this comes into action -

1. I have an origin A: http://mysite.com and I want to get resources from origin B: http://yoursite.com.
2. To prevent your security, browser will not let me access resources from yoursite.com and will block my request.
3. In order to allow origin A to access your resources, your origin B will need to let the browser know that it is okay for me to get resources from your origin.

Here is an example from [MDN](https://mdn.mozillademos.org/files/14295/CORS_principle.png) that explains this really well

![https://mdn.mozillademos.org/files/14295/CORS_principle.png](https://mdn.mozillademos.org/files/14295/CORS_principle.png)

With the help of Cross Origin Resource Sharing (CORS), browsers allow origins to share resources amongst each other. There are a [few headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers) that allow sharing of resources across origins, but the main one is `Access-Control-Allow-Origin`. This tells the browser what origins are allowed to receive requests from this server.

## Who needs to set `Access-Control-Allow-Origin`?

To understand who needs to set this header, consider this - You are browsing a website that is used to view songs. The website attempts to make a connection to your bank in the background maliciously. Who has the ultimate control to prevent this malicious website from stealing your data from the bank? The bank! So, the bank will need to protect its resources by setting the `Access-Control-Allow-Origin` header as part of the response. Hence, the origin responsible for serving resources will need to set this header.

## How to use and when to pass this header?

Here's an example of values you can set:

1. `Access-Control-Allow-Origin : *` : Allows any origin
2. `Access-Control-Allow-Origin : http://mysite.com` : Allow requests only from mysite.com

## See in action!

Let's look at an example! You can check out this code [on my GitHub repo](https://github.com/shrutikapoor08/blogs/tree/master/code-examples/CORS).

We are going to build a server on origin A `http://localhost:8000` which will send a string of `Hello` on `api` endpoint. We are going to call with this endpoint by creating a client on origin B `http://localhost:3000` and using fetch to request resource. We expect to see the string `Hello` passed by origin A in the browser console of origin B.

Let's say we have an origin up on `http://localhost:8000` that serves up this resource on `/api` endpoint. The server sends a response with the header `Access-Control-Allow-Origin`.

```
const express = require("express");

const app = express();
const port = process.env.SERVER_PORT || 8000;

// Add Access Control Allow Origin headers
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "https://yoursite.com");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.get("/api", (req, res) => {
  res.json("Hello");
});

app.listen(port, () => console.log(`Listening on port ${port}`));

```

On the client side, you can call this endpoint by calling `fetch` -

```
fetch('http://localhost:8000/api')
.then(res => res.json())
.then(res => console.log(res));

```

Now open your browser's console to see the result.
Since the header is currently set to allow access only from `https://yoursite.com`, the browser will block access to the resource and you will see an error in your console.

![CORS error](./img/CORS-access-denied.png)

Now, to fix this, change the headers to -

```
 res.setHeader("Access-Control-Allow-Origin", "*");
```

Check your browser's console and now you will be able to see the string `Hello`

Further reading -

1. [Stackoverflow article](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work)
2. [MDN reference] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)


Access-Control-Allow-Origin is a CORS header. CORS is a mechanism for browsers to let a site running at origin A to request resources from origin B. Origin is not just the hostname, but a combination of port, hostname and scheme.

Access-Control-Allow-Origin header explained- What is it used for and how to use it?


# How to use fetch API to make AJAX calls in JavaScript?

Fetch is an interface for calling a network request in JavaScript. It is implemented widely by modern browsers and provides a fairly straightforward way of calling an API.

```
const promise = fetch(url, [options])

```

Calling fetch returns a promise, with Response object. The promise is rejected if there is a network error, and resolved if there is no problem connecting to the server and the server responded with a status code. This status code could be 200s, 400s or 500s.

A sample FETCH request -

```javascript
fetch(url)
  .then((response) => response.json())
  .catch((err) => console.log(err));
```

The request is sent as a GET by default. To send a POST / PATCH / DELETE / PUT you can use the method property as part of `options` parameter. Some other possible values `options` can take -

- `method`: such as GET, POST, PATCH
- `headers`: Headers object
- `mode`: such as `cors`, `no-cors`, `same-origin`
- `cache`: cache mode for request
- `credentials`
- `body`

[Check out the full list of available options here]('https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch')

Example usage:
This example demonstrates the usage of fetch to call an API and to get a list of git repositories.

```javascript
const url = 'https://api.github.com/users/shrutikapoor08/repos';

fetch(url)
  .then((response) => response.json())
  .then((repos) => {
    const reposList = repos.map((repo) => repo.name);
    console.log(reposList);
  })
  .catch((err) => console.log(err));
```


Fetch is an interface for making an AJAX request in JavaScript. It is implemented widely by modern browsers and is used for calling an API.

JSByte - How to use fetch API to make AJAX requests in JavaScript?


```
console.log( null === undefined )
```

## Rule

An important rule of checking type with `null` or `undefined` is that in the equality equation above, the result will be true **only** if both sides are either `null` or `undefined`.

This is helpful in checking against falsy values such as following -

```
let c;
console.log(c == null);
// true

console.log(c == undefined);
// true

console.log(0 == null);
// false

console.log("" == null);
// false

```

One caveat: `==` should be rarely used. This is a good use case for when `==` can be used. If you are unsure whether to use `==` or `===`, use `===`.

---


An important rule of checking type with null or undefined is that in the equality equation above, the result will be true only if both sides are either null or undefined.

JSByte - How to check falsy values with null or undefined in JavaScript


### Event propagation

**Specificity**:
If a node has children and has an event handler attached to it, it is able to listen to not only its own events, but also events on its children.
However, if two DOM elements have a handler, the more specific one - the closest to the target, fires off first.

**Targeting multiple elements**
A node can have only one `onclick` attribute, so you can register only one handler this way.

A node can have multiple `addEventListener`, so you can attach multiple click handlers using `addEventListener`. It also gives access to `removeEventListener` to unsubscribe from the event.

When you have an event handler that needs to be attached to multiple elements, attach the handler to the parent element instead of targeting each element individually.

```html
<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>
</div>
```

```javascript
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', (event) => {
  console.log(event.target.value);
});
```

### Common events

`onclick`
`dblclick`
`mousedown`
`mouseup`
`mousemove`
`keydown`
`keyup`
`touchmove`
`touchstart`
`touchend`
`onload`
`onfocus`
`onblur`
`onerror`
`onscroll`

---

### Interested in more JSBytes? [Sign up for the newsletter](https://tinyletter.com/shrutikapoor)


JSByte - JavaScript Event handlers


# JavaScript Events Handlers – How to handle events in JavaScript

## What are events?

Events are actions that happen when a user interacts with the page - for eg, clicking an element, typing in a field, loading a page, etc. The browser notifies the system that something has happened, and it needs to be handled. It gets handled by registering a function, called `event handler`, that listens for a particular type of event.

## What does it mean to "handle an event"?

To put it in simple terms, consider this - let's assume you are interested in attending Web Development meetups events in your local community. To do this, you sign-up for a local meetup "Women Who Code" and subscribe to notifications, so that anytime a new meetup is scheduled, you get alerted. That is event handling! The "event" here is a new JS meetup. When a new meetup is posted, the website meetup.com catches this change, thereby "handling" this event. It then notifies you, thereby taking an "action" on the event.

In a browser, events are handled similarly. The browser detects a change, alerts a function (event handler) that is listening to a particular event. These functions then perform actions as desired.

An example of `click` event handler -

```
<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>`
</div>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})

```

## What are the different types of events?

An event can be triggered by any behavior of a user interacting with the page. These events could be a user scrolling the page, clicking an item, loading a page. Here are some common events - `onclick` `dblclick` `mousedown` `mouseup` `mousemove` `keydown` `keyup` `touchmove` `touchstart` `touchend` `onload` `onfocus` `onblur` `onerror ` `onscroll`

## Different phases of events - capture, target, bubble

When an event moves through the DOM - whether bubbling up or trickling down, it is called event propagation. the event is said to propagate through the DOM tree. Events happen in two phases - the bubbling phase and the capturing phase.

In capture phase, also called trickling phase, the event "trickles down" to the element that caused the event. It starts from the root level element and handler, and then propagates down to the element. The capture phase is completed when the event reaches the `target`.

In bubble phase, the event is "bubbled" up to the DOM tree - it is first captured and handled by the innermost handler - the handler that is closest to the element on which the event occurred. It then bubbles up - or propagates up to the higher levels of DOM tree, further up to its parents and then finally to its root.

A trick to help you remember this -

```
trickle down, bubble up
```

Here's an infographic from [quirksmode](https://www.quirksmode.org/js/events_order.html) that explains this very well -

```
               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

```

One thing to note is that, whether you register an event handler in either phase, both phases ALWAYS happen. All events bubble by default. You can register event handlers for either phase, bubbling or capturing, by using the function `addEventListener(type, listener, useCapture)`. If `useCapture` is set to `false`, the event handler is in bubbling phase, or else capture phase. The order of the phases of the event depends on the browser.

To check which browser honors capture first, you can try the following code in JSfiddle -

```html
<div id="child-one">
  <h1>Child One</h1>
</div>
```

```javascript
const childOne = document.getElementById('child-one');

const childOneHandler = () => {
  console.log('Captured on child one');
};

const childOneHandlerCatch = () => {
  console.log('Captured on child one in capture phase');
};

childOne.addEventListener('click', childOneHandler);
childOne.addEventListener('click', childOneHandlerCatch, true);
```

In Firefox, Safari, and Chrome, the output is -
![Events in capture phase are fired first](./img/events_capture_order.png)

## How to listen to an event?

There are two ways to listen to an event -

1.  `addEventListener`
2.  inline events, such as `onclick`

```
//addEventListener
document.getElementByTag('a').addEventListener('click', onClickHandler);

//inline using onclick
<a href="#" onclick="onClickHandler">Click me</a>
```

## Which is better - inline event or `addEventListener`?

1. `addEventListener` gives the ability to register unlimited event handlers.
2. `removeEventListener` can also be used to remove event handlers
3. The `useCapture` flag can be used to indicate whether an event needs to be handled in the capture phase or bundled phase.

## Code examples and live-action

You can try out these events in JSFiddle to play around with these events.

```html
<div id="wrapper-div">
  <div id="child-one">
    <h1>Child One</h1>
  </div>
  <div id="child-two" onclick="childTwoHandler">
    <h1>Child Two</h1>
  </div>
</div>
```

```javascript
const wrapperDiv = document.getElementById('wrapper-div');
const childOne = document.getElementById('child-one');
const childTwo = document.getElementById('child-two');

const childOneHandler = () => {
  console.log('Captured on child one');
};

const childTwoHandler = () => {
  console.log('Captured on child two');
};

const wrapperDivHandler = () => {
  console.log('Captured on wrapper div');
};

const childOneHandlerCatch = () => {
  console.log('Captured on child one in capture phase');
};

const childTwoHandlerCatch = () => {
  console.log('Captured on child two in capture phase');
};

const wrapperDivHandlerCatch = () => {
  console.log('Captured on wrapper div in capture phase');
};

childOne.addEventListener('click', childOneHandler);
childTwo.addEventListener('click', childTwoHandler);
wrapperDiv.addEventListener('click', wrapperDivHandler);

childOne.addEventListener('click', childOneHandlerCatch, true);
childTwo.addEventListener('click', childTwoHandlerCatch, true);
wrapperDiv.addEventListener('click', wrapperDivHandlerCatch, true);
```

## Futher reading

https://www.quirksmode.org/js/events_order.html
https://jsfiddle.net/r2bc6axg/
https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
https://www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

## TL;DR

Event phases are - capture (DOM -> target), bubble (target-> DOM) and target.
Events can be listened by using `addEventListener` or inline methods such as `onclick`.

---

To keep up with more tutorials like this, [Sign up for my newsletter.](https://tinyletter.com/shrutikapoor) or [follow me on Twitter](https://twitter.com/shrutikapoor08)


Events are actions that happen when a user interacts with the page. The browser notifies the system that something has happened, and it needs to be handled. It gets handled by registering a function, called `event handler`, that listens for a particular type of event.

JSByte - How to handle events in JavaScript


`clientWidth`: The width of the element **inside** the element.

`clientHeight`: The height of the element **inside** the element.

`offsetWidth`: The width of the element including the border.

`offsetHeight`: The height of the element including the border.

`pageXOffset`: horizontal scroll position

`pageYOffset`: vertical scroll position

`getBoundingClientRect`: A function to get the most precise position of an element on the screen. It returns an object with properties indicating the pixel positions of the sides of the element relative to the top left of the screen. Word of caution - calling getBoundingClientRect causes reflow. [More details here ] (https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

JSFiddle link: https://jsfiddle.net/af9sdt0h/21/


JsByte - DOM layout - How to get the width and height of DOM elements.


## Type Conversion in JavaScript.

Think about what will output when you log the following -

```
1. console.log( 2 * null)
// 0 . null gets converted to 0.

2. console.log( "4" - 1)
// 3. "4" gets converted to 4.

3. console.log( "4" + 1)
// 41. + operator with a string, so concat

4. console.log( "5" * 2)
// 10. "5" gets converted to 5.

5. console.log( "five" * 2)
// NaN.

6. console.log( false == 0)
// true

```

JS will perform type coercion - convert types to match each other, for these operations. It will try to make sense of the operands, try to convert them to string or number, and when something doesn't seem intuitive to convert to number, such as `"five"`, it gives back `NaN`.


JavaScript will perform type coercion - convert types to match each other, for these operations. It will try to make sense of the operands, try to convert them to string or number, and when something doesn't seem intuitive to convert to number, such as `five`, it gives back `NaN`.

Type conversion in JavaScript


# Getting started with GraphQL

## What is GraphQL?

In its most basic sense, GraphQL is a way of asking for data. Technically, it is a specification and any language has the freedom to implement a GraphQL API. In JavaScript for eg, the module `graphql-js` is used to create GraphQL APIs.

GraphQL is essentially a query language for your API. It is a way of asking for data from API. It offers a flexible way of asking for data, and you can get as much or as little data as you need.

A typical GraphQL implementation involves GraphQL on the server side (GraphQL API) and GraphQL on the client side (to talk to GraphQL APIs). A lot of different tools can be used to build a full-stack GraphQL application - such as Prisma, Apollo, Express, Hasura.
At its core, it is just an API served over HTTP. You can send a curl command to talk to a GraphQL API without having to need any library.
What is cool about GraphQL is that it provides an easy way of developing APIs - extending as well as deprecating over time. With GraphQL, you get one endpoint - `/graphql` and since every client talks to the same endpoint, it becomes very simple to add to an existing API and ensure that all clients are able to leverage newly updated data.

One thing to remember is that GraphQL is just a specification. How you implement GraphQL largely depends on the library (Apollo, Prisma, Express, etc.) you use, and therefore GraphQL is language agnostic. The libraries available in Java, JavaScript, Python, Go enable GraphQL across platforms.

## Why GraphQL?

1. Type safety
2. Backward and forward compatible : no versions
3. Less throwaway data
4. Instrumentation
5. Save multiple round trips
6. Free documentation

## How does it compare with REST?

GraphQL is better than REST because -

1. One endpoint to fetch all resources.
2. Avoid over fetching of data (getting too many fields when only a few fields are needed).
3. Avoid under fetching of data (having to call multiple APIs because one API doesn't give back all the information needed).

REST does certain things better -

1. Caching
2. Microservices based architecture
3. HTTP codes - 200s, 400s, 500s for every request

## How to get started with GraphQL?

1.  Understand concepts: How to graphql https://www.howtographql.com/
2.  Read the official docs - https://graphql.org/learn/
3.  Play around with GraphiQL to try out GraphQL with GitHub's API - https://developer.github.com/v4/explorer
4.  Watch a course in your stack - https://www.udemy.com/topic/graphql/
5.  Build a GraphQL server - https://egghead.io/courses/build-a-graphql-server
6.  Use GraphQL on the client - https://egghead.io/courses/graphql-data-in-react-with-apollo-client
7.  Read a book - https://www.amazon.com/Learning-GraphQL-Declarative-Fetching-Modern/dp/1492030716

- GraphQL -

2. What is GraphQL
3. How to get started
4. What are different tools/frameworks available
5. What are the advantages
6. What are the drawbacks
7. Decisions to consider before going for GraphQL


GraphQL is essentially a query language for your API. It is a way of asking for data from API. It offers a flexible way of asking for data, and you can get as much or as little data as you need. 

Getting started with GraphQL

Things I learnt while making mistakes with Tailwind

The talk is about main concurrent features of React 18 for app developers, how to get started with React 18, how to migrate a React 17 or older app to 18, and demo of some concurrent features.

On a mission to make learning web development easier for everyone.

Latest Blog Posts

Creating an accessible web app in 5 simple steps

Stuff to install when setting up a new computer from an existing computer

What I learnt at Reactathon

Talks and Podcasts

Reactathon - Everything you need to know about React 18

React Conference - React 18 for app developers

RenderATL - What is new in React 18