JavaScript

Shruti Kapoor


Hello everyone! Welcome to this tutorial where we're going to dive into the world of creating fun bubbles in code by using HTML canvas and JavaScript. The best part? We'll achieve all of this using just a touch of HTML and all JavaScript, no CSS.

### Unveiling the Concepts

Today, we're going to master the following concepts:

1. Creating circles using the `arc` method of the canvas context.
2. Utilizing the `requestAnimationFrame` function for smooth circle animations.
3. Harnessing the power of JavaScript classes to create multiple circles without repeating code.
4. Adding stroke styles and fill styles to our circles for a 3D bubble effect.

You can follow along with me, or use [the final codepen](https://codepen.io/shrutikapoor08/pen/wvQXMVO) if you want to take a look at the source code

If you prefer to learn in a video format, follow along this video 


<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/IjPgXP3gDyI?si=1poXtX0Yi0WUB7Or"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

### Getting Started

First things first, we need an HTML5 Canvas element. Canvas is a powerful element for creating shapes, images and graphics. This is what the bubbles will be created on. Let’s set it up -

```html
<canvas id="canvas"></canvas>
```

In order to do anything meaningful with canvas, we need to have access to it’s `context`. [Context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) provides a interface to render objects on the canvas and draw shapes.

Let’s get access to canvas and it's context.

```js
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
```

We will set up our canvas to use the entire window height and width -

```js
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
```

Let's give our canvas a nice soothing light blue background by adding some css. This is the only CSS we are going to use. You can also do this with JavaScript if you wish.

```css
#canvas {
  background: #00b4ff;
}
```

### Time to Create Bubbles!

Let’s get to the fun part. We are going to create bubbles by clicking on the canvas. To achieve this, we'll start by creating a click event handler:

```js
canvas.addEventListener('click', handleDrawCircle);
```

Since we need to know where we clicked on our canvas, we are going to keep track of it in our `handleDrawCircle` function and use the event’s coordinates -

```js

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

  // Draw a bubble!
  drawCircle(x, y);
};
```

### Drawing circles using arc method

To create circles, we are going to utilize the [`arc` method available on canvas’s context.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) `Arc` method accepts `x` and `y` - the center of the circle, a radius and a start angle and end angle which for us will be `0` and `2* Math.PI` since we are creating a full circle.

```js
const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};
```


![Drawing circles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zrbq3gcpff40nbvzbt8.png)


### Moving circles using requestAnimationFrame method

Now that we have circles, let's make them move because....

![A scene from the "I like to move it" song from the movie -Madagascar](https://media.giphy.com/media/ptS6CV6Ty7Dt26k6wq/giphy.gif)

Remember, that when we created circle, we used the `arc` method which accepted `x` and `y` coordinates - the center of the circle. If we move the `x` and `y` coordinate of our circle really fast, it will give an impression that the circles are moving. Let’s try that!

```js
//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;

//Incremenet the center of the circle with this speed
x = x + dx;
y = y - dy;
```

We can move this inside a function -

```js
let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;

  x = x + dx;
  y = y - dy;
};
```

To give our circle a seemless movement, we are going to create an `animate` function and use browser's `requestAnimationFrame` method to create a moving circle.

```js
const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
	drawCircle(x,y);

  requestAnimationFrame(animate);
};

//Don't forget to call animate at the bottom 
animate();
```


![Circle animating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z01uy7e82sqia06svu5t.gif)



### Creating Particles: Introducing the Particle Class

Now that we have created one circle, it’s time to create multiple circles!

But before we create multiple circles, let's prepare our code.
 In order to avoid repeating our code, we are going to use classes and introduce Particle class. Particles are the building blocks of our dynamic artwork and animation. Each bubble is a particle with its own position, size, movement, and color attributes. Let's define a **`Particle`** class to encapsulate these properties:

```js
class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}
```

Let’s move some of the constants we had set up to the Particle class -

```js
class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}
```

The **`draw`** method will be responsible for rendering the particle on the canvas. We have already implemented this functionality in `drawCircle`, so let’s move it in our class and update variables to be class variables

```js
class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();

    context.fillStyle = this.color;
    context.fill();
  }

  move() {}
}
```

Similarly, let’s move the move function within the class-

```js
move() {
	this.x = this.x + this.dx;
	this.y = this.y - this.dy;
}
```

Now, we need to make sure that in our event handler, we are calling the class Particle. 


```js
const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};

canvas.addEventListener('click', handleDrawCircle);
```

Since we need to access this particle in our animate function in order to call the `move` method on it, we will store this particle in an array called `particleArray`. This array will also be helpful when create lots of particles. Here’s the updated code to reflect this -

```js
const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
  particleArray.push(particle);
};

canvas.addEventListener('click', handleDrawCircle);
```

Remember to update the `animate` function too -
```
const animate = () => {
	context.clearRect(0, 0, canvas.width, canvas.height);

	particleArray.forEach((particle) => {
		particle?.move();
		particle?.draw();
	});

	requestAnimationFrame(animate);
};
``` 

At this point, you will see this particle on your screen-

![Multiple circles moving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92rs6a5i1xn4v2gzdv8o.gif)


Awesome! Now, to the fun part! Let's creates lots of circles and style them to make them look like bubbles. 

To create lots of bubbles, we are going to create particles using `for` loop and add them to the `particleArray` we had created here. 

```js
const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};

canvas.addEventListener('click', handleDrawCircle);
```


In the animate function, we'll continuously update the canvas by clearing it and redrawing the particles in their new positions. This will give an illusion of the circle moving.

```js
const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });

  requestAnimationFrame(animate);
};

animate();
```

![Multiple circles animating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya5u8w8qetqkcy2nbowe.gif)




Now that we have bubbles moving, it’s time to add color to them to make them look like bubbles!

We will do this by adding a gradient fill to bubbles. This can be done using the `context.createRadialGradient` method.

```jsx
const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');

context.fillStyle = gradient;
```

![Bubbles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l80yde62l9mw3ceh1f1i.gif)


[Here’s the final codepen](https://codepen.io/shrutikapoor08/pen/wvQXMVO
) if you want to take a look at the source code


### Wrap Up

Congratulations! You've just created something super fun using only HTML Canvas and JavaScript. You've learned how to use the `arc` method, leverage `requestAnimationFrame`, harness the power of JavaScript classes, and style your bubbles using gradients for the 3D bubble effect.

Feel free to experiment with colors, speeds, and sizes to make your animations truly unique.

I hope you had as much fun following this tutorial as I did creating it. Now, it's your turn to experiment. I would love to see if you tried this out and what you created. Share with me your code link and I would love to check it out.

--- 
And now a #DevJoke - 

Question - Who won the debate for the best name for loop variable?

Answer - i won. 

---

If you enjoyed this article, share it with someone who will benefit from it.


Discover how to make enjoyable Canvas animations using just JavaScript, without CSS.

Develop Animated Bubbles with HTML5 Canvas and JavaScript. A Step-by-Step Tutorial


Have you ever felt the desire to step up to the stage and share your expertise at conferences, but something inside you is holding you back? Perhaps it's the fear of speaking in front of a large audience, the worry of forgetting your words, or the challenge of finding the perfect topic to discuss. You're not alone – many aspiring speakers face these same fears.

However, creating an engaging conference talk is a skill that can be perfected with practice. In this blog post, I will share effective tips for crafting compelling conference talks that captivate your audience and leave a lasting impact. I'll also provide examples of inspiring presentations that have influenced me.

If you're looking for a comprehensive guide on speaking at conferences, check out my video where I discuss topics such as finding a conference, preparing slides, delivering engaging talks, and networking.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/8ewaKFulvGc"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

1. **Know Your Audience**
   Understand your audience's interests and needs to tailor your content effectively.

   - **Audience Expertise and Interests:** Before preparing your talk, consider the level of expertise your audience possesses. Are you addressing beginners who are eager to learn the basics, or are you speaking to seasoned professionals seeking advanced insights? Understanding this will help you customize your content accordingly.
   - **Gather Insights:** To gain valuable insights into your audience's preferences, talk to event organizers or conduct surveys. This will give you a better understanding of their expectations and what they hope to take away from your presentation.
   - **Balance Fundamentals and Advanced Insights:** If your audience consists of newcomers to the topic, focus on providing clear explanations of fundamentals, terminologies, and motivations. On the other hand, if you have an audience with intermediate to advanced knowledge, dive into the nitty-gritty, discuss pros and cons, share opinions, and share real-life experiences.
   - **Avoid Jargon Overload:** Ensure that your content is accessible to everyone by avoiding excessive use of jargon. Make complex concepts understandable by using clear language and providing relevant context.
   - **Gauge with Show of Hands:** During your talk, you can engage the audience by doing a show of hands to gauge their familiarity with the topic. Based on their response, you can offer a brief 101-style introduction for those who are new to the subject, or dive directly into the main content if most of the audience is already familiar.

2. **Work on the meat of the talk first**

   When preparing your conference talk, focus on developing the core content and the compelling story you want to share. Design and templates can be addressed later; prioritizing your message is key.

   - **Identify the Key Objective:** Start by answering this question: What is the one thing you want your audience to take away from your talk? This objective will be the central theme around which you build your narrative.
   - **Create a Mind-Map:** I find it helpful to create a mind-map of the topics I'll cover, centered around the main point I want my audience to remember. This approach ensures that your talk flows logically and maintains a clear focus throughout.

   ![An example of mind-map](https://www.freecodecamp.org/news/content/images/2023/08/1681680313393.jpeg)

3. **Tell a story**

   As humans, we like storytelling. Instead of just talking through your content, frame the story around why you are sharing this. By telling a story that follows this format, you engage your audience on an emotional level, make your content more relatable, and leave a lasting impact. Here’s a template I like for storytelling is -

   - **Introduce the Problem:** Begin by describing a relatable problem or challenge you encountered. Paint a vivid picture to evoke empathy and interest from your audience.
   - **Highlight the Impact:** Illustrate the consequences and impact of the problem. Share the challenges and struggles you faced, allowing your audience to connect with your journey.
   - **Present the Solution:** Transition into the solution you discovered or devised. Explain how you tackled the problem and the thought process behind it. Make it clear why this solution was unique and effective.
   - **Celebrate the Improvement:** Describe how the solution improved your life or the lives of others involved. Share specific outcomes and successes resulting from your approach.
   - **Embrace the Journey:** Be honest about the ongoing nature of progress. Acknowledge that the journey may not be perfect, and there might be continuous efforts to maintain the positive changes.
   - **Empower Your Audience:** Provide actionable insights or advice for your audience to avoid or overcome similar challenges. Encourage them to apply your learnings to their own situations.

4. **Structure your talk**

   - **Start with a Captivating Hook:** Begin your talk with an attention-grabbing introduction. This could be an intriguing problem you encountered, a humorous joke, a compelling personal story, or a thought-provoking question. The hook sets the tone for your talk and piques the audience's curiosity.
   - **Keep Your Audience Anchored:** Recognize that maintaining audience attention is crucial. To keep them engaged throughout, provide a clear roadmap at the beginning of your talk. Briefly outline what you'll be discussing, so the audience knows what to expect. Throughout your presentation, periodically remind them of the main points you're covering and where you are in the narrative.

![An outline such as this helps to keep the audience anchored](https://www.freecodecamp.org/news/content/images/2023/08/image-109.png)

- **Deliver Smooth Transitions:** Practice delivering seamless transitions between slides and sections. This ensures that your presentation flows like a cohesive narrative. Familiarize yourself with your content to the extent that you know what slide comes next. Using presenter's view can be beneficial to preview the upcoming slide discreetly.
- **Strategically Reiterate Main Points:** Identify the core messages or key takeaways you want your audience to remember. Make a conscious effort to repeat these points at various stages of your talk, reinforcing their significance.

5. **Use visuals** A picture is a thousand words. We're naturally drawn to visuals over lengthy text.

- **Utilize a Variety of Visuals:** Incorporate images, graphics, GIFs, diagrams, illustrations, and charts to visually convey your ideas and captivate your audience. Visual elements help break the monotony of text-heavy slides and enhance the overall appeal of your presentation. Explore free platforms like Unsplash and Imgur to find high-quality visuals that align with the content of your presentation. High-resolution images and graphics add a professional touch to your slides.
- **Animate to Explain Concepts:** Animations can be a great way to explain complex concepts dynamically. Consider using subtle animations to illustrate processes or step-by-step explanations. As a reference, check out **[this talk](https://youtu.be/cCOL7MC4Pl0?t=318)** with impressive animations explaining the JavaScript event loop.
- **Demonstrate with Demos:** If your presentation includes a demo, start by showcasing the end product first. Then, take your audience through the process of building it step by step. This approach creates anticipation and helps the audience understand the context and value of your demo
- **AI-Generated Images:** For a creative touch, consider using AI-generated images created with tools like DALL-E or Midjourney. These unique visuals can add a distinctive element to your presentation. Check out this unique example of an AI generated image of a “avocado swimming in the ocean” that I created using DALL-E.

![Avocado swimming in the ocean](https://www.freecodecamp.org/news/content/images/2023/08/image-102.png)

6. **Optimize Slide Design for Clarity**
   Creating visually clear and appealing slides is crucial to ensure that your conference talk is effectively delivered to all members of the audience, including those seated at the back of the room. Here are essential tips to optimize your slide design:

- **Use Large Fonts:** Opt for large, easy-to-read fonts that are visible from a distance. This ensures that even audience members at the back can comfortably follow your content without straining their eyes.
  ![An example of a slide that uses large fonts](https://www.freecodecamp.org/news/content/images/2023/08/image-104.png)
- **Concise Text:** Avoid lengthy sentences on your slides. Keep the text concise and to the point. Too much text can distract the audience from your spoken words and diminish their focus on your message.
- **Avoid Information Overload:** Refrain from cluttering your slides with excessive information. Stick to key points and use bullet points to convey your ideas succinctly. This allows the audience to grasp the main concepts without feeling overwhelmed.
- **Format Code Clearly:** When presenting code, use tools like **[carbon.sh](http://carbon.sh/)** to format it in a clean and readable manner. This ensures that even complex code is understandable to your audience.
- **Ensure Visible Contrast:** Check the visibility and color contrast of your content against the background. Do a dry-run on the day of your talk to confirm that the slides are clearly visible on the projector or screen. Monitors can have varying color resolutions, so it's essential to be prepared.
- **Avoid Distracting Design:** While visual elements can enhance your presentation, ensure that your design template doesn't distract from the main content. Keep it clean and professional to maintain focus on your message.

7. **Avoid Over-Reliance on Presenter Notes**

Presenter notes can be valuable tools for staying on track during your conference talk, but it's crucial to avoid relying on them too heavily. Here are key points to consider when using presenter notes effectively:

- **Stay Natural and Engaging:** Reading directly from presenter notes can make your presentation sound robotic and disengaging. Instead, aim to speak naturally and connect with your audience. Familiarize yourself with the content to the point where you can convey it in a conversational manner. Treat presenter notes as aids rather than a script. They should serve as a helpful guide to remind you of key points, transitions, or specific details, but not dictate your entire presentation.
- **Practice Makes Perfect:** Rehearse your talk multiple times until the content becomes ingrained in your memory. By knowing your material inside out, you'll be able to deliver it smoothly without relying solely on presenter notes.

8. **Keep your audience engaged**

Keeping your audience engaged is essential to ensuring the success of your conference talk. By incorporating various interactive elements, you can captivate your listeners and maintain their interest. Here are effective strategies to achieve this:

- **Inject Humor and Memes:** Light-hearted humor and relevant memes can add a touch of fun to your presentation. Well-timed jokes and amusing visuals help create a relaxed atmosphere and make your talk more enjoyable.
  - _Note on Jokes:_ If a joke doesn't land as expected, simply move on without dwelling on it. Avoid explaining the joke or making the audience feel uncomfortable for not getting it.
- **Interact with Your Audience:** Engage your audience by asking them questions or encouraging them to participate in brief activities. Interactive elements make your talk more dynamic and involve the audience in the discussion.
- **Offer Quick Breaks:** If your talk contains substantial content, consider giving the audience a quick break to recharge. This break can be as simple as taking a sip of water or pausing briefly to allow the audience to take screenshots of important slides.
- **Leverage Live Demonstrations:** Live demos are excellent ways to immerse your audience in your topic. Letting the audience interact with your demos, ask questions, and explore the process hands-on keeps them engaged and interested.
- **Share Swag or Resources:** If appropriate, consider offering swag such as stickers, or t-shirts. This can serve as an incentive for active participation and create a positive association with your talk.

![Audience responding to questions by a show of hands](https://www.freecodecamp.org/news/content/images/size/w1600/2023/08/image-52.png)

9. **Share Resources for Ongoing Engagement**

Empowering your audience with valuable resources ensures that the impact of your conference talk extends beyond the event itself. Here are effective ways to share resources and foster continued engagement:

- **QR Codes for Accessibility:** Make it easy for your audience to access your slides and additional resources by displaying QR codes at the beginning of your talk. By scanning the code, attendees can quickly access relevant materials on their devices.
  ![A QR code that links users to codepen link](https://www.freecodecamp.org/news/content/images/2023/08/image-106.png)
- **Tweet Links to Slide Deck:** Increase accessibility by tweeting links to your slide deck a few minutes before your talk. This allows people to access the content during your presentation and refer back to it afterward.
- **Provide GitHub or CodeSandbox URLs:** If you demonstrate a technical project, share the URL to the corresponding GitHub repository or CodeSandbox. This enables your audience to explore the project further and gain hands-on experience with the code.
- **Include Your Contact Information:** Display your name and contact information on every slide, ensuring that attendees can easily reach out to you after the talk. This is particularly helpful if they want to share the slides or contact you for further discussions or inquiries.
  ![An example of including your content information at the bottom of a slide](https://www.freecodecamp.org/news/content/images/2023/08/image-108.png)
- **Give Action Steps:** Leave your audience with a call-to-action or "from here, do this" tasks related to the topic. This encourages individuals interested in learning more to take action and engage further with the subject matter.

10. **Make it Relevant for Your Audience, Not Just You**

Ensuring that your conference talk resonates with your audience is essential for creating a meaningful and impactful presentation. Consider the following points to make your talk relevant and valuable for your listeners:

- **Abstract the Problem and Solution:** If you're sharing a talk about a problem you encountered and the solution you formed, abstract the problem to make it relatable for the audience. Avoid overwhelming them with excessive technical details or specific scenarios that may not directly apply to their situations. Instead, focus on the core principles and broader implications that your audience can relate to and learn from.
- **Avoid Over-Marketing or Over-Selling:** While it's natural to be passionate about your work or product, avoid turning your talk into a promotional pitch. People attend conferences to gain knowledge and insights, not to be sold to. Provide valuable content that genuinely benefits your audience, and let the quality of your work speak for itself. Authenticity and value will naturally attract interest and followers.

  - _Note on Self-Promotion:_ Subtly promote your social media presence at the beginning and end of your talk, but do so in a non-intrusive manner. Mentioning your Twitter handle or other social links during the introduction and conclusion allows interested listeners to follow you for more content without feeling overwhelmed by constant promotion.

11. **BONUS: Where to find templates?**

I'm a fan of simplicity when it comes to design templates. There are various sources to find templates, such as Envato or Canva. Additionally, you can hire a designer from platforms like Fiverr or Upwork to create a custom template for you. Personally, I've refined my design template in Keynote over the years, and it's the one I use most frequently. [This is the](https://elements.envato.com/kitulah-google-slides-template-LQHBG6) template I started off with.

## **Examples of Great Talks**

- **[Zach Holman's Talk with Huge Fonts](https://zachholman.com/talk/how-github-uses-github-to-build-github/)**
- **[Jason's Talk with Great Fonts](https://www.youtube.com/watch?v=MO8hZlgK5zc&list=PL37ZVnwpeshHwJPVBqEnZild7QHWhdufu&ab_channel=JSConf)**
- **[Andre's Funny Talk with Cool Animations](https://www.youtube.com/watch?v=cCOL7MC4Pl0&ab_channel=JSConf)**
- **[Shaundai's Talk with Great Use of Visuals](https://example.com/shaundai-talk-link)**

Speaking at conferences is an enriching experience that allows you to share your passion and expertise with others. Following these tips will help you create powerful conference talks that leave a lasting impact on your audience. Embrace visuals, engage your listeners, and deliver valuable content that inspires and empowers others.

Remember, every great conference talk starts with a few seconds of courage. Take that step and share your knowledge with the world!

---

If you enjoyed this article, share it with someone who will benefit from it.

If you are interested in articles like this and front-end articles on JavaScript, React, GraphQL or Accessibility, [sign up for my newsletter](https://tinyletter.com/shrutikapoor) and get these directly in your inbox.


In this blog post, I will share effective tips for crafting compelling conference talks that captivate your audience and leave a lasting impact.

Tips for Creating Powerful Conference Talks


[Watch Video on YouTube](https://youtu.be/mIzQPNIThhw)

Animations are a great way to create immersive and engaging web experiences that captivate users and keep them coming back for more.. They can be used for anything from games to advertisements, but one particularly fun use case is creating firework animations using HTML Canvas and JavaScript.

In this tutorial, I'll show you how to use JavaScript and the HTML Canvas element to create a firework animation.

First, we'll start by creating a traversing ball on the canvas. [This was covered in part 1 of the tutorial](https://www.youtube.com/watch?v=l2YMRUDRqGA&ab_channel=ShrutiKapoor), but here's a quick recap:

- Create a canvas element in your HTML file
- Get a reference to the canvas element using JavaScript and get access to it’s 2D context using `canvas.getContext(‘2d’)`
- Use the canvas context API to draw a circle at a specific position using `.arc` method.
- Use a `requestAnimationFrame` loop to update the position of the circle to make it look like the circle is moving, thereby traversing the ball. 

Now, let's extend this traversing ball program to build a fireworks animation. Since in a firework, there are multiple particles, we will use what we have so far to create multiple particles using object-oriented programming. We'll create a class called "Particle" that we'll use to draw and update the particles. The class looks like this -

```
class Particle {
constructor() {
// set up particles
}

draw() {
// this method draws circles
}

update() {
// this method moves circles
}

}
```

[Check out the full source code here.](https://codepen.io/shrutikapoor08/pen/vYVOQxj)

We can use a for loop to create a specific number of particles and push each particle to the particle array. Then, we'll use each particle's draw and update method to draw on the canvas and move the particles.

```
  particlesArray.forEach((particle) => {
    particle.draw();
    particle.update();
  });
```

To create various effects, we can play around with the speedX and speedY, the coordinates (x, y) - the centre of the circle X and Y.

```
  this.x += this.speedX;
  this.y += -1 * this.speedY;
```
To add a tail to the firework, we can paint our canvas with a semi-transparent black color. 

```
  context.fillStyle = "rgba(0, 0, 0, 0.25)";
  context.fillRect(0, 0, canvas.width, canvas.height);
```

Once we've got the basic firework animation working, we can easily extend it to create different effects and variations. By experimenting with different values, we can create unique and visually stunning animations.


Creating animations with HTML canvas and vanilla JavaScript is a fun and creative way to add some life to your website or app. By following the steps in this tutorial, you can create a firework animation that will impress your users and make your website or app stand out. 

Give it a try and let your creativity run wild! If you play with this, link your code in the comments section. I would love to see what you came up with.

CodePen: https://codepen.io/shrutikapoor08/pen/vYVOQxj

### Links from the web

1. [ChatGPT Prompt Engineering for Developers](https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/) - a FREE course from Andrew Ng and Isa Fulford to learn how to use a large language model (LLM) to quickly build new and powerful applications.

2. [Copy.ai](https://www.copy.ai/) - AI tool to help  for your copywriting needs. Use it to create blog posts, write newsletters, create twitter posts, brainstorm ideas. Chat GPT but better

3. [Space Elevator](https://neal.fun/space-elevator/) - A fun site with cool scrolling effect that takes you on a ride to the space while teaching different layers of atmosphere.



### A Personal Story

March and April have been a hard month for me professionally. I have made some changes in my work life, and I am being very intentional in taking good care of myself, and finding the right balance between work and my mental and personal health. Here’s to a stronger May.

I have been enjoying the summer days of April this month. I bought a bubble gun and I have been enjoying feeling like a kid again. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4afik3ladotieepq53zq.png)



[Follow me on instagram for more](https://www.instagram.com/itsshrutikapoor/)





In this tutorial, I'll show you how to use JavaScript and the HTML Canvas element to create a firework animation.

Build a beautiful fireworks animation using only HTML5 Canvas Element and JavaScript - JSByte




HTML Canvas is a powerful tool for creating dynamic graphics and animations using JavaScript on web pages. It can be used to create data visualizations, augmented reality experiences, games, simulations, process images, manipulate videos on the fly and create digital art. The possibilities are endless! In this short post, we will look at how a basic HTML shape, and create an animating ball

### Basics of canvas

To get started with canvas, you'll need to create a canvas element 

```html
<canvas id="canvas"> </canvas>
```


and get access to the canvas's context in your HTML code. Context gives us access to APIs that render the graphics on the canvas. 

```js
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
```


## Drawing shapes
Once we have access to context, we can begin drawing shapes. Let's draw a circle. We will be using the [arc method on context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc). Let's create an circle with center at `(0,0)` and a radius of `20`.

```js
context.beginPath();
context.arc(0, 0, 20, 0, 2 * Math.PI, false);
```

Next, let's fill in the circle, and give it a stroke color. 

```js 
context.fillStyle="red";
context.strokeStyle="red";

context.fill();
context.stroke();
```

We can move this to a click handler, so that whenever we click, we create a circle at our `(x,y)` coordinates. 

```js
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const drawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;
  const radius = 20;
  //arc
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI, false);
  
  context.fillStyle="red";
  context.fill();
  
  context.strokeStyle="red";
  context.stroke();
  
  
}

canvas.addEventListener('click', drawCircle);
```

And, that's all we need! Give it a go and see circles appearing on your canvas.

This is just the beginning though. Next time, we will use this to create animating balls on the screen. 


Next part of this will be in a [video on my YouTube channel](https://www.youtube.com/channel/UCbB6Gh3UPI9lUUnPGYMz2ew). Stay tuned.



## In other news - 
Recently, I have been feeling burnt out. As part of sustainably managing everything that is going in my life, I wanted to share with my community that I will be publishing this newsletter once a month going forward. Staring next month, you will also notice a different format that I think would make the most of your time. The format will be - 

1. A short bite sized Front End Development post.
2. A list of 3 noteworthy Front End blog posts / youtube videos / news from the community in the last 30 days. 
3. A small photo from my life, to show you the person behind this newsletter. ❤️

Thank you for being part of my community.  
Let's be kind to each other. We are all doing our best.

HTML Canvas is a powerful tool for creating dynamic graphics and animations using JavaScript on web pages. It can be used to create data visualizations, augmented reality experiences, games, simulations, process images, manipulate videos on the fly and create digital art. The possibilities are endless! In this short post, we will look at how a basic HTML shape, and create an animating ball

Introduction to HTML Canvas and Canvas APIs


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


React Server Components (RSC) is a new application architecture from React team that has been making headlines since it was first introduced in December 2020. In this blog post, we will dive deeper into React Server Components, how they work, and why they matter.

## What are React Server Components?

In short, React Server Components are a new type of React component that runs on the server and is excluded from the JavaScript bundle. This means that RSCs can run during the build process and read from the file system or access data layers without creating an API. RSCs run ahead of time, providing a significant improvement in app performance by reducing the time it takes for the app to load.

## How do React Server Components work?

## React Server Components vs. Server-Side Rendering

While both React Server Components and Server-Side Rendering (SSR) provide server-side rendering capabilities, they work differently. SSR allows you to display an HTML version of the client component, which is then downloaded and parsed when that HTML is loaded. RSCs provide a description of the rendered UI, allowing React to intelligently merge new data with the existing client component and make multiple refetches without losing state.

## What are the benefits of React Server Components?

One of the most significant benefits of React Server Components is their ability to improve app performance by reducing the time it takes for the app to load. By running ahead of time, RSCs can provide a more seamless user experience, reducing network round trips and data transfers, and improving app interactivity.

## Resources

https://www.plasmic.app/blog/how-react-server-components-work


React Server Components (RSC) is a new application architecture from React team that has been making headlines since it was first introduced in December 2020. In this blog post, we will dive deeper into React Server Components, how they work, and why they matter.

React Server Components: A New Way to Improve React Apps Performance

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 web development accessible and fun for everyone.

Latest Blog Posts

Develop Animated Bubbles with HTML5 Canvas and JavaScript. A Step-by-Step Tutorial

Tips for Creating Powerful Conference Talks

Build a beautiful fireworks animation using only HTML5 Canvas Element and JavaScript - JSByte

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