JavaScript

Shruti Kapoor


The tech industry has long been dominated by men, but there are many talented and successful women who have made significant contributions in technology. These women have not only made their mark in the industry but also inspired generations of women  in technology. Here are 8 inspirational women in technology:

**Ada Lovelace:** An English mathematician and writer, Lovelace is a pioneer in the field of computer programming. She was born in London in 1815. She worked with Charles Babbage on his Analytical Engine, an early precursor to modern computer.  She was the first to publish an algorithm, thereby often being recognized as the first computer programmer.

**Marie Curie:** A physicist and chemist, Marie Curie is best known for her pioneering work in the field of radioactivity. She was the first woman to win a Nobel Prize and the first person to win two Nobel Prizes in different fields - Physics and Chemistry. She was born in 1867 and was known for discovering two elements - polonium and radium. Her work led to the development of X-Ray machines. Despite facing discrimination as a woman in the male-dominated field of science, she strived through and perserved, and inspired generations of women scientists. 

**Ursula Burns:** Ursual Burns is former CEO and Chairman of Xerox Corporation, and the first African American woman to head a Fortune 500 company. Ursula is a trailblazer in the tech industry and a role model for women and people of color. She is also a board member of several companies, including Uber and Nestle. Ursula's leadership and success have broken barriers and opened doors for others to follow in her footsteps.

**Grace Hopper:** Grace Hopper was a pioneering computer scientist and naval officer who is widely regarded as one of the most important figures in the early history of computing. Hopper was born in New York City in 1906, and went to Yale University before joining the US Navy during World War II. There, she worked on some of the earliest computers, including the Mark I, and helped to develop programming languages such as COBOL. Hopper continued to work for the Navy and for private industry throughout her long career, and was known for her advocacy of standards and for her efforts to make computers more accessible to non-technical users. Her legacy as a pioneer of computing and as an advocate for women in science and technology continues to inspire people today.

**Katherine Johnson:** Katherine Johnson was an American mathematician whose work was crucial to the success of the early US space program. Katherine Johnson, born in 1953 in West Virginia, joined NASA's predecessor agency, the National Advisory Committee for Aeronautics. There, she became known for her precise calculations, which were essential for the success of the first manned spaceflights. She was especially renowned for her work on the trajectory for the 1961 flight of Alan Shepard, the first American in space. Johnson was awarded the Presidential Medal of Freedom for her contributions to the space program. Her life and work were featured in the book and film, "Hidden Figures". 

**Reshma Saujani** is an accomplished lawyer, activist, and politician, best known for founding the nonprofit organization, Girls Who Code. In 2012, Saujani launched Girls Who Code, an organization dedicated to closing the gender gap in technology by teaching girls to code. Since then, the organization has reached tens of thousands of girls across the United States and around the world. Saujani is also a frequent speaker and writer on issues related to women in technology, and she has been recognized for her advocacy work by numerous organizations and publications.

**Margaret Hamilton** is a computer scientist and software engineer who played a key role in the development of the software for the Apollo space program. Born in Indiana in 1936, Hamilton was hired by the Massachusetts Institute of Technology (MIT) to work on the software for the Apollo program, and she led the team that developed the flight software for the Apollo 11 mission, which successfully landed humans on the moon for the first time in 1969. Hamilton's work on the Apollo software was pioneering in its use of error-checking and recovery protocols, which helped to ensure the safety and success of the mission. She went on to found her own software company and became an advocate for software engineering standards and for the role of women in computing. Hamilton has received numerous awards and honors including the Presidential Medal of Freedom in 2016.

**Susan Wojcicki:** Susan was the CEO of YouTube until 2023 and previously served as senior vice president at Google. Susan has been instrumental in the growth and success of YouTube. She has also been named one of Time Magazine's 100 most influential people and Forbes' list of the world's 100 most powerful women. As a successful woman in the tech industry, Susan is a role model for young girls who aspire to be leaders in technology.

There are many talented and successful women who have made significant contributions in technology. Here are 8 women who have inspired generations of women in technology

8 Women in Tech who have shaped the tech world


As we start the new year, it is a good time to reflect on how the past 12 months went, and gear up for the next 12 months. I like to spend a few hours at the beginning of the year doing a reflection on the past year and brainstorming goals for the new year. Here’s a [reflection on my 2022 year.](https://shrutikapoor.dev/posts/2022-Recap)

Setting your goals can be a daunting task. Whether you have already set your goals for the year or have yet to do so, this guide will provide you with the tools and resources you need to set goals that truly matter to you and help you to achieve them. It doesn’t matter whether you are starting to set your goals in January, or the middle of the year. The best time to set your goals is now.

### Why is setting goals important?

Goal setting is important because it provides a clear direction, a plan to follow, and a means to measure progress. It allows individuals to focus their energy and efforts on what is truly important to them, rather than getting bogged down by the many distractions in life.

Goals are an essential part of personal and professional development as they provide direction and purpose to our lives. Having a written goal provides a clear destination to work toward and a roadmap to follow.

## **Framework for setting goals**

Here are some steps you can follow to set up actionable goals that you feel motivated to follow -

### Step 1: Start with your vision

> There is one quality that one must possess to win, and that is a definiteness of purpose, the knowledge of what one wants, and a burning desire to possess it.- Napoleon Hill

Here are some prompts to help you set your goals -

1. **Envision your legacy**: What impact do you want to make and how do you want to be remembered?
2. **Create a 5-year vision**: Imagine where you want to be in five years and what you want to have accomplished.
3. **Start with your dream:** Think about what you would love to achieve, even if it seems unrealistic.
4. **Reflect on your past:** Think about what you've been wanting to achieve over the last few years.
5. **Consider what you admire in others**: What are the qualities or accomplishments that you admire in other people that you would like to adopt?
6. **Determine what you want to do less of**: Are there any activities or habits that you want to reduce or eliminate?

Write down everything that comes to your mind even if it seems crazy. Your wildest dreams may be unrealistic, but this process will help you steer yourself toward achieving them.

For instance, for me, my dream is to write a book that is important to developers in my community.

### Step 2: Break down the vision into achievable goals

> Your desire to achieve this goal must be so intense that the idea of accomplishing your goal brings you happiness and excitement - Brian Tracy, Goals!

Once you have written down what you want to achieve, it is now time to create goals that will help you get there. Here are some strategies for creating achievable goals -

1. **Create goals from your vision:** Working backward from your vision, think about what goals will help you get there. For example, if your dream is to run a marathon, what goals can help you get there? An example of a goal that would help you achieve this vision would be to run 5 miles every day. For me, that goal would be to write a few words every day. Write down all your goals on a piece of paper or a digital notepad.
2. **Prioritize your goals:** If you have a lot of goals at this stage, it helps to pick your topmost goals. When prioritizing, I like to think about the “fire level” I have for each goal. I define “Fire level” as the feeling you get when you think about how badly do you want to achieve your goal. I use 🔥 to denote “HELL YEAH” and 💕 for “would be nice”. In the book Goal!, author Brian Tracy recommends thinking about your “why” behind the goal and writing it down next to the goal. Since we have finite time and it is possible you won’t be able to achieve all your goals in one year, knowing your “Why” will help you determine how much fire you have in you to achieve this goal. Knowing how strongly you want your goal will also help you evaluate if this goal is worth pursuing when it is time to re-evaluate goals.
3. **Bring goals under your control:** You have better chances of achieving your goal if you have control over the outcome. For example - if I set a goal of becoming a best-selling author, I am setting a goal that is not under my control. I can try to write the best book I can, which is under my control, but how the audience receives it, is not under my control. So to bring this goal under my control, I can reframe my goal to be “write a well-researched book on topics that my audience is interested in”. Now, this is under my control, and it makes it achievable for me since I can research to ensure I am writing a well-informed book.
4. **Identify the areas that require improvement:** For each of your goals, evaluate why you have not achieved your goal yet. In the book Goals!, author Brian Tracy recommends identifying any obstacles or barriers that are preventing you from reaching your goal. Be specific and thorough in considering all possible factors that may be hindering your progress. What are you missing right now to achieve your goal? Where are you good? Where do you need to improve? These are the gaps you need to work on to achieve your goal. Write these down as tasks.
5. **Define success:** One of the key questions to ask yourself when measuring progress is- "How do I know I achieved this goal?" Having a clear understanding of what success looks like will help you know when you've reached your goal. In the book Atomic Habits, author James Clear suggests thinking of your goals in terms of quantifiable metrics, such as numbers, and percentages. This makes it easy to track progress toward your goals. For example for me, I will know I am making progress toward achieving my goal if I start writing chapters and have completed a certain number of chapters in a year. So a measure of progress for me is the number of chapters I finish by the end of the year.

### Step 3: Prepare for failures

As we all know, not everyone who starts a new year’s resolution sticks to it by the end of the year. How long do you think it takes most people to drop their new year’s resolutions? 23% of people quit by the end of the first week, 64% after the first month (according to a study with Australian and UK citizens), and 81% before the end of the second year. Why do you think that happens? It’s because people lose motivation when things get tough.

![A graph showing how many people drop their new year's resolutions](https://res.cloudinary.com/practicaldev/image/fetch/s--kZEpLVDp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdfqeo2a4sdw5cn5nrd8.png)

When we haven’t prepared ourselves for adverse situations, it becomes hard to stay on track and be motivated to overcome hardships when progressing towards our goals. Instead, when we prepare for failures, we prepared ourselves ahead of time to tackle the situation.

Hence, to ensure the success of your goal, it is important to prepare yourself by thinking about adverse situations. Some questions that can help you prepare yourself -

1. What will **stop you from starting** this goal?
2. What are some things that **can go wrong** when you are making progress?
3. What can **you do** when you encounter failure?
4. How can you prevent yourself from **burning out**?
5. How can you get back on track to **keep your momentum going**?

Write these down next to your goals, so that when you see you are not making progress, you can use these to get back in the momentum.

For example, it will be my imposter syndrome and the habit of procrastination that will stop me from even starting. When I do start, I may feel bored, unmotivated or tired at the end of the day to write anything. I may run out of ideas while writing or feel burnt out. If I prepare myself for these things in advance, I can get a better handle on things when they go south.

### Step 4: Make it a habit

Once you know your goals, it's time to put them into action. Do something every day that brings you closer to achieving them, even if it is for a few minutes. To make it easier to be consistent towards your goals, it helps to establish a system that helps you achieve these habits every day. In Atomic Habits, author James Clear discusses the importance of setting a habit system and some tips from Atomic Habits that can help you establish your habit system -

1. **Find your “clutter”**: Clutter is any time that is not directly progressing you towards your goal, adding to the joy of your life, or helping you relax. Take an inventory of the time you are spending every day on each clutter activity. By removing your clutter, you can bring intention into your schedule and clear up time to put your goals on your calendar in the form of daily habits.
2. **Block time in your calendar for a habit:** It becomes a lot easier to achieve your goal when the habit that will help you achieve that goal is scheduled in your calendar. It is a lot easier to forget about a goal if it is not accounted for in your day-to-day life. Use your calendar or however you schedule your time to appoint a time to achieve goals.
3. **Remove friction**: Instead of relying on motivation, create a system that makes it easy to follow through on your good habits and hard to slip back into bad habits. Think about how you can help your future self be in the right mindset to achieve the goal. Remove all distractions. For example, if you are going to workout, make it easy for your future self to get to the gym by keeping your workout clothes next to your bed so you can put them on first thing in the morning, and load up your pump-up playlist on your phone so you can play as you go.
4. **Figure out baby steps**: Often, a goal feels overwhelming to achieve because it feels like a giant elephant we need to eat. But, how do you eat an elephant? One bite at a time. Similarly, to build lasting habits, small, incremental changes are incredibly important. Think about what is the smallest thing you can do to make a baby step toward your goal today. If you are thinking of getting in shape and are struggling to go to the gym, put on your favorite workout clothes and go for a walk. Bring out your yoga mat and do an easy yoga practice. The practice of finishing a small task [towards your goal can release dopamine](https://blog.trello.com/the-psychology-of-checklists-why-setting-small-goals-motivates-us-to-accomplish-bigger-things), which makes us feel motivated, joyful and successful. Our mind wants to achieve that feeling again, and hence getting into the habit of achieving smaller tasks toward our goals becomes easier.

   For me, this baby step is getting a few words on the page. I will be a lot closer to finishing my book if I put in 200 words every day. This will help me make incremental progress toward my goal by the end of the year.

5. **Be consistent:** Consistency is key to building lasting habits. By sticking to your habits even when you don't feel like it, you'll be able to make it a part of your identity and make it stick.

### Step 5: Find people who support you - your hype squad.

Having a group of people who you can reach out to when you are feeling low, unmotivated, doubtful or lost is really important and often overlooked. We undervalue how much we are affected by our surroundings, family and co-workers. Think about some people who affect your day-to-day - your friends, family, co-workers, social circle, and folks who you don’t interact with day-to-day but aspire to be like. I like to think of this group of folks as my hype squad - these are the folks I reach out to when I am in doubt, need advice, want to feel motivated, want them to hype me up or just generally looking to get good vibes when I share my accomplishments. Here are some roles that you should look to fill -

1. Who is someone who can help you reach your goals? Perhaps this is someone who has already achieved this goal. This person can be your **mentor**.
2. Who is someone who can be your **cheerleader** when you feel down? This person can help lift your spirits when you are feeling doubtful of your skills.
3. Who can be my **accountability buddy**? This person can help you stay motivated and on track by checking in with you regularly and helping you stay accountable. If you want an accountability buddy, [here is a community I started](https://bit.ly/shruti-discord) that can help you find your buddy.
4. Who should you surround yourself with so you can stay **inspired and motivated**? These can be experts in the industry or someone who is excelling in this field. This person will inspire you, motivate you and keep you focused on your goal.
5. Who in your **family** can help you achieve your goal? We often overlook the importance of family and housemates. Think of how your family can support you in achieving your goal.

For example - for my book, my hype squad could include people who have written a book before, and can therefore offer me advice.

Staying accountable and tracking your goals becomes easier when you are part of a supportive and motivated community. For this reason, I created [this Discord community](https://bit.ly/shruti-discord). We help each other stay on track by keeping each other accountable, checking in regularly, and hyping each other up. I strongly suggest you become a member of this community.

### Step 6: Measure progress and re-evaluate goals.

Forming habits is a continuous process that requires constant reflection and adjustments to improve. Tracking progress, staying motivated and making necessary changes will aid in this process.

1. **Reflect and adjust:** Measuring progress towards your goals is an important step in achieving them. Reflect on your progress regularly and be honest with yourself. If you are not making enough progress, try to understand the reasons behind it. Is it that the “Why” of your goal is not strong enough and you are not motivated to achieve this goal? Is it possible that your schedule is too busy and you don’t have time for this goal?
2. **Reward yourself**: To make the journey toward achieving your goal more exciting, reward yourself for reaching milestones, this can help keep you motivated and give you a sense of accomplishment. Celebrating your progress by setting up rewards for yourself can be a great way to stay motivated throughout the process.
3. **Have a check-in day:** To make sure your goals are working for you, set up a check-in day. During this time, you can reflect on your progress, evaluate if the goal still makes sense for you, check if your priorities are the same and see if any obstacles are preventing you from achieving the goal. This could mean changing some things around your goal, stopping or pivoting if you're not making progress, or even breaking your long-term goals into smaller, more manageable chunks. This is also a good time to check in with your hype squad. This check-in day could be quarterly or monthly.

### Bonus: My tools

Here are the personal tools that I use to set goals -

1. **Discord**: This is [my accountability community to help you](https://bit.ly/shruti-discord) stay on your goals. This is a goals cohort, and we check in with each other monthly. I am excited to invite the community to join my Discord channel, where we will come together and support each other as we work towards our goals. Together, we will be a powerful force of accountability and motivation, pushing each other to be our best selves. Whether you're working on personal development, or career goals, or just looking for a supportive community, my Discord channel is the perfect place to connect with others who are on a similar journey. By joining forces, we will be able to achieve more than we ever thought possible.

1. **Bullet Journal goals spread** - In this article, I mentioned writing down your goals on a piece of paper. I use my bullet journal to write my goals for the year. This is the spread from my 2023 bullet journal

   ![Bullet Journal goals spread](https://res.cloudinary.com/practicaldev/image/fetch/s--npk5lRTM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khrnladlnxnag9t8k6kh.jpg)

1. **Notion template**: I use the framework I described in this blog to break down my goal into smaller tasks, habits, my “why”, the fire level, potential failures and my hype squad. I put this in a digital format that I can keep on me at all times. [This is the notion template I use.](https://www.notion.so/Goal-Setting-Template-56a6f9bd3a0b472982683f5beccc4ab6) This is inspired by [Ali Abdaal.](https://www.youtube.com/watch?v=FJwp5RBLQcs&ab_channel=AliAbdaal)

Let's make our dreams a reality in 2023!

This is OUR YEAR. 💪🏼

---

If you enjoyed this article, share it with someone you know and spread the love.

- For more frequent tips, [stay in touch on Twitter](http://twitter.com/shrutikapoor08)
- [Get articles like this directly in your inbox](https://bit.ly/shrutinewsletter)


Setting your goals can be a daunting task. Whether you have already set your goals for the year or have yet to do so, this guide will provide you with the tools and resources you need to set goals that truly matter to you and help you to achieve them.

6 Steps to Setting Smart Goals that you will actually achieve.


As we say goodbye to 2022, it is a good time to reflect on the past 12 months. For me personally, this has been a year of great professional growth, exploring new ventures, taking a break from my side hustle and spending beautiful moments with friends and family. In this blog post, let's take a look at the highlights of 2022 and use them as a springboard for creating meaningful goals and resolutions for the coming year.

## 2022 goals

In the beginning of the year 2022, I set the following goals for myself -

### Learn

1. Continue deepening my knowledge and skills in either JavaScript, React, or GraphQL.
2. Plan to learn a new technology.
3. Take up a new hobby.

### Read

1. Read at least one classic novel.
2. Read one book per month, including both nonfiction and fiction
3. Continue expanding my reading list to include a variety of genres.

### Create

1. Consistently create and share my work.
2. Create my own website - my digital home.
3. Give back to my community by sharing my knowledge and expertise.

### Physical wellbeing

1. Maintain a healthy and balanced diet.
2. Take good care of my skin, body, and hair.
3. Work out regularly to stay fit and active.

### Emotional wellbeing

1. Practice mindfulness and being calm.
2. Learn how to control my anger in difficult situations.
3. Make my family happy and create positive relationships with those around me.

### Social wellbeing

1. Try new activities.
2. Meet new people and expand my social circle.
3. Stay connected with my friends and maintain strong relationships.

## Here are my top 2022 achievements

### Career

I accomplished the following professional milestones -

1. I was promoted to the position of Staff Software Engineer at PayPal.
2. I began searching for a new job earlier this year and received three job offers. I ultimately accepted a position at Slack as Lead Member of Technical Staff. I am thrilled with this decision as I feel challenged and excited in my new role.
3. I have been working on developing my skills and expertise in creating accessible web content. I find it very rewarding to make the web more inclusive for all users.
4. I have begun using TypeScript in my work.
5. I assisted in the launch of Huddles 2.0 and made significant contributions to the product at Slack.

### Community

I am grateful to have been able to give back to my community through the following efforts -

1. Building and launching my personal website [shrutikapoor.dev](https://shrutikapoor.dev/) where I can share blog posts like this.
1. Being mentioned in the [official blog post](https://reactjs.org/blog/2022/03/29/react-v18.html) announcing the launch of React 18.
1. Giving a presentation at Hasura Con on [Building a Unified GraphQL API with Hasura](https://hasura.io/events/hasura-con-2022/building-a-unified-api-using-graphql-joins/).
1. Giving talks at React Advanced in London and Reactathon in Berkeley.
1. Serving as a guest lecturer at the University of British Columbia on the topic of interviewing and learning React.
1. Giving a technical presentation on accessibility at Slack's offsite event.
1. Creating 4 blog posts on motivation, React learnings from Reactathon and accessibility.
1. Reading 20 books.
1. Speaking at [State of A11Y](https://www.youtube.com/watch?v=6hY-5KJRHwo&ab_channel=ThisDotMedia) hosted by This Dot Labs and Hasura User meetup in San Francisco.

### Personal

I had the opportunity to travel and make new memories this year, including:

1. Taking a trip to New York with one of my closest friends.
1. Going to Las Vegas with two of my best friends.
1. Spending a weekend on Vancouver Island with one of my closest friends.
1. Going on a honeymoon in Turks and Caicos.
1. Visiting Scotland and London.
1. Learning how to swim.
1. Hosting parties.
1. Starting the new year with my entire family, including spending a month with my sister-in-law.
1. Taking up oil painting as a new hobby.
1. Undergoing LASIK surgery.
1. Making special memories with my husband and family.

## Overview of goals achieved

This year, I focused on learning new skills and developing expertise in TypeScript and accessibility. I also made an effort to read a diverse range of books, including both fiction and non-fiction, covering topics such as classics, self-help, productivity, business, and sci-fi. In addition to these endeavors, I spoke at four conferences and created ten oil paintings.

While I am still working on maintaining a regular workout routine and being in a calorie deficit for my physical wellbeing, I have made progress in managing my temper and finding a therapist for my emotional wellbeing. I also had the opportunity to meet new people and host friends over.

Overall, it has been a fulfilling year.

## Goals for 2023

I am currently in the process of brainstorming new goals for 2023 and transferring any ongoing goals from this year to next year's list. I am using a combination of a bullet journal and Notion to brainstorm and track my progress.

I will be sharing my goal-setting template in an upcoming blog post. If you're interested in receiving updates and staying informed, you can [sign up for my newsletter](https://tinyletter.com/shrutikapoor). I hope this resource will be helpful in your own goal-setting efforts for the new year.

Happy New Year!

---

If you enjoyed this article, share it with someone you know and spread the knowledge.

- For more frequent tips, [stay in touch on Twitter](http://twitter.com/shrutikapoor08)
- [Get articles like this directly in your inbox] (https://bit.ly/shrutinewsletter)


As we say goodbye to 2022, let's take this as an opportunity to reflect on the past 12 months. For me personally, this has been a year of great professional growth, exploring new ventures, taking a break from my side-hustle and spending beautiful moments with friends and family.

2022 - The Year in Review


## 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 used to make interactive elements keyboard navigable. When `tabindex` is added to an element, a user is able to navigate to it using only keyboard and/or assitive technologies.

1. A tabindex of `0` is used to set focus to an element in the default tabbing order,
2. A tabindex of `-1` is used to programmatically focus an element using JavaScript.
3. 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 practie to add `tabindex` to elements such as `div`. Instead of adding tabindex, use a semantic element, such as `button` 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.

Aria attributes are a set of HTML attributes that are used to provide additional information about the purpose and state of elements on a web page. These attributes are especially beneficial to assistive technologies to provide more context and better navigation for users.

Some common aria-attributes include:

1. aria-label: used to provide a label or name for an element.
1. aria-hidden: used to indicate that an element should be hidden from assistive technologies. This can be useful for elements that are used for layout purposes but are not relevant to the content of the page.
1. aria-describedby: used to associate an element with a description, which helps to provide context of an element.
1. aria-live: used to indicate that an element's content may change dynamically, and that assistive technologies should pay attention to changes in the element's content.

These attributes can be used in combination with each other and with standard HTML attributes to create more accessible and user-friendly web content.

### Role

`aria-role` attribute is used to define the purpose of an HTML element and provide its semantic meaning. For example, if you are building a grid component with the help of CSS and divs, you can use `role="grid"` to let assistive technologies know about the semantic of the component.

Some common `aria-role` include -

1. `button`: used to indicate that an element should be treated as a button.
2. `alert` : used to indicate that an element is an alertbox.
3. `presentation`: used to indicate that an element is only presentational.

It is important to exercise caution with `aria-role`. Remember to not overdo it.

### Keyboard navigation and screen readers

Many users with motor disability rely on keyboard and assitive technologies to navigate the web. Therefore it is critical that every component must be navigable using keyboard and screen reader. Keyboard accessibility can be tested by navigating a site using only keyboard. Here are some common keys -

1. `tab` key to navigate to different sections of the site.
2. `spacebar` to select elements such as checkbox.
3. `enter` to press buttons.

While testing keyboard navigation, ensure the following -

1. Focus remains visible: Ensure that you can clearly see which element is being focussed in the page. Focus should always remain visible.
2. Tab order: When tabbing through sections, the order of tabbing should follow the natural flow and logical structure of the website. It should not jump back and forth between sections.
3. Keyboard traps: Ensure that when navigating with the keyboard, the focus doesn't get trapped on an element. For example, this could happen when a modal is opened, or the focus is navigated to a widget, such as calendar or emoji picker. Ensure that when you select an element in the widget, you are able to navigate back to the site.

Overall, testing for accessibility during development is an important part of the process that can help to create more usable and accessible software for all users. Testing for accessibility early helps to provide a great user experience for everyone.

In the next article, I will talk about the various accessibility tools and how to debug an accessibility issue.

Until then, enjoy your holidays!

Feliz Navidad.


Accessibility is often overlooked during the development process. This can lead to the need for quick, hacky fixes just before a feature is shipped. In this post, we'll discuss 5 things to consider while building your app to avoid these last-minute accessibility issues.

5 things to remember when building an app to make it accessible.


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`


Setting up a new computer for development can be a time-consuming process. Here's a list of everything you need to get your dev environment up and running

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.

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

State Management in GraphQL using React Hooks & Apollo

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.

Everything you need to know about React 18

React 18 for app developers

What is new in React 18

In this series, we got some of your favorite developers to record their answers to our most pressing questions. How did they get started? What insights do they have to share with the community?

DEVS ANSWER: Shruti Kapoor

This talks walks through how to use React Hooks in maintaining state while using GraphQL.

Making Coding Accessible and Fun for Everyone.

Latest Blog Posts

8 Women in Tech who have shaped the tech world

6 Steps to Setting Smart Goals that you will actually achieve.

2022 - The Year in Review

Talks and Podcasts

React Advanced Interview - State Management in GraphQL using React Hooks & Apollo

Reactathon - Everything you need to know about React 18

React Conference - React 18 for app developers

RenderATL - What is new in React 18

Honeypot Documentary - DEVS ANSWER: Shruti Kapoor

Honeypot Documentary - State Management in GraphQL using React Hooks & Apollo