As someone who has successfully transitioned to a Staff Engineer role, I want to share my insights and experiences to help you on this journey.

In this article, I’ll address key questions you might have, like:

• What is a Staff Engineer and how does the role differ from a Senior Engineer?

• What do you need to become a Staff Engineer?

• How do you know you’re ready?

• Who do you talk to for guidance?

I’ll also share my personal story and a structured six-month plan to help you achieve your goals. Let’s dive in!

If you’d also like to watch this as a video, check this out:

Here’s what we’ll cover:

1. My Path to Becoming a Staff Engineer

2. What is a Staff Engineer?

3. Story Time: Building Font Selection in Slack

4. The Key Differences between Staff Engineers and Senior Engineers

   • Staff Engineer vs Manager Role

5. Why You Might Not Be Promoted Yet

6. How to Become a Staff Engineer

7. Evaluation Criteria

8. How to Build Your Staff Engineer Portfolio

9. The Promotion Process

10. A Six-Month Plan to Get Promoted

11. Wrapping Up

My Path to Becoming a Staff Engineer

Over the last decade, I’ve worked at companies like PayPal and Slack, progressing from a Junior web developer to a Staff Engineer. Here’s a quick timeline:

• Junior Web Developer at Telus Communications in 2013

• Web Developer at Pix System in 2017

• Software Engineer 2 at PayPal in 2018

  • Promoted to Senior Software Engineer in 2019 and later Staff Engineer in 2021.

• Lead Member of Technical Staff at Slack in 2022

  • Worked for three years before transitioning to full-time content creation.

One key lesson I’ve learned: It’s not just about what you do – it’s about who knows what you do.

What is a Staff Engineer?

A Staff Engineer is a technical leader who drives their team’s effectiveness. You’re judged not only by the features you deliver but also by how you enable and grow your team. It’s not just about code anymore. Staff engineering is a blend of technical expertise, leadership, and mentorship.

The Four Pillars of Staff Engineering:

1. Technical excellence: Staff Engineers build scalable systems, evaluate technologies, and make critical technical decisions while managing technical debt.

2. Organizational impact: They solve problems that extend beyond their team, acting as the communication link between various stakeholders.

3. Mentorship and team development: Staff Engineers grow their team by helping others succeed, onboarding new members, and leveling up their colleagues.

4. Project leadership: They ensure projects are delivered on time, breaking down complex problems into manageable pieces while leading cross-functional initiatives.

Story Time: Building Font Selection in Slack

As a Staff Engineer, I’ve had the privilege to work on some truly exciting projects. Not only have these opportunities helped me grow my technical expertise, but they’ve also taught me critical interpersonal skills – like team coordination, estimation, overcoming imposter syndrome, managing burnout, and effective delegation. These are essential qualities for any engineer looking to advance their career.

One standout project was the Font Selection feature in Slack. On the Appearance tab in Slack’s Preferences, users can now select a font – let’s say, Comic Sans – and instantly see the change reflected everywhere in the application.

This project was a classic example of a greenfield initiative: it had never been done before in Slack. That meant navigating technical debt, considering migrations to new systems, and sometimes deprecating outdated components. It also required collaboration with teams across the organization, because the blast radius of a feature like this was huge. The work impacted not just one area, but the entire user experience.

Being a technical leader on such a project was both challenging and rewarding. It stretched my skills and reinforced the importance of cross-functional teamwork and technical vision in delivering high-impact features.

The Key Differences between Staff Engineers and Senior Engineers

Senior Engineers are excellent executors who can take complex requirements and turn them into working software. They solve technical problems efficiently and mentor junior developers on their team.

Staff Engineers are strategic thinkers who identify what problems need to be solved in the first place. They look across the entire organization to find opportunities for impact and then create projects to address them.

Senior Engineers are typically assigned projects by their manager or team lead and work on priorities set by their leadership. They excel at executing defined work and solving complex problems within their domain.

Staff Engineers, however, operate on a bigger scale beyond their team. They proactively look for improvements in the engineering organization and code architecture. Rather than waiting for direction, they chart out a plan to improve the codebase – figuring out performance optimizations, analyzing customer feedback, enhancing developer productivity, reducing technical debt.

When Staff Engineers identify these improvement areas, they don’t just raise tickets or file requests. They take ownership of crafting solutions by defining a project scope, writing a tech spec, outlining deliverables and creating architectural designs. This shift from reactive to proactive work represents one of the key transitions in moving from senior to staff level.

Think of it this way: Senior Engineers are given projects, Staff Engineers make projects.

Staff Engineering isn't about being a better individual contributor. It's about multiplying the effectiveness of everyone around you and growing others.

Staff Engineer vs Manager Role

While Staff Engineers interview new candidates, mentor engineers, provide feedback, and chart out technical direction, their role significantly differs from a Manager-level position in most companies. Although some responsibilities overlap, there are key distinctions between these two career tracks.

Staff Engineers do not:

1. Participate in the hiring and firing decisions.

2. Have input in promotion process beyond providing feedback for the employee

3. Have direct reports

4. Hold formal management authority

The fundamental distinction:

• Staff Engineer: Technical leader who influences through expertise and mentorship

• Manager: Combines HR, technical, and project leadership with formal authority

In most organizations, Staff Engineering and Management represent two distinct career advancement paths, allowing technical professionals to grow in seniority and impact without transitioning into people management roles.

Why You Might Not Be Promoted Yet

Here are five common reasons holding people back:

Waiting to Be Told You’re Ready

Many people fall into the trap of waiting for their manager to tap them on the shoulder and say, "You're ready for promotion." This passive approach can keep you stuck for years. The reality is that nobody will come to you to hand you anything. Promotion committees don't promote people based on potential – they promote based on evidence of current performance at the next level.

Fix: Start performing like a Staff Engineer today. Take ownership of cross-team initiatives, mentor junior developers, and drive technical decisions. Share your accomplishments with the broader team.

When you act like a Staff Engineer consistently for 6-12 months and everyone knows how well you are performing, the promotion becomes a formality rather than a leap of faith.

Action Item: Identify one area where you can begin operating at Staff level this month. Whether it's leading a technical design review or mentoring a junior engineer, start demonstrating the behaviors you want to be recognized for. Share status updates on a regular cadence – daily or weekly depending on the team and project, and share challenges encountered and solutions developed. This will get you not only noticed, but also help to create a balance of self-promotion and knowledge sharing.

Believe in yourself – don’t wait for external validation.

Imposter Syndrome

That voice in your head saying "I'm not smart enough" or "I don't know enough" is imposter syndrome. Everyone feels like an imposter at some point. But successful people take action DESPITE feeling like an imposter.

If you let imposter syndrome dictate your actions or prevent you from taking action, you'll hold yourself back from achieving great things. The people you look up to online have also faced imposter syndrome. Most successful people encounter it weekly, if not daily. The difference is that they learn to set it aside and create a plan to move forward.

The Fix: Reframe your mindset. Instead of thinking "I don't know X," think "I don't know X yet." Focus on your growth trajectory, not your current knowledge gaps. Remember, you were hired for your potential, not because you already knew everything.

Action Item: Keep a "brag document" where you document your accomplishments weekly. When imposter syndrome strikes, review this evidence of your capabilities and impact. Over time, you'll notice that you overcame things that felt hard or impossible in the moment.

You can do hard things!

I made a detailed video highlighting strategies to overcome imposter syndrome. You can check it out here:

Waiting to Become a Deep Technical Expert

Many engineers think they need to know everything about every technology before they can get promoted. This "I must be perfect" thinking will hurt your career. Staff Engineers don't need to know everything. The most important skills you need to know is how to find answers and help others solve hard problems.

The Fix: Learn a little about many things instead of learning everything about one thing. A Staff Engineer who knows some things about databases, systems, and websites will be able to perform and help more effectively than someone who only knows one thing really well. You'll learn more when you work on big projects as a Staff Engineer.

Action Item: Pick 2-3 tech areas that you don't know much about but your company uses, or pick a new tech stack. Spend 30 minutes each week learning about each one. Focus on how they work with the systems you already know.

If you don’t believe in yourself, why should others?

Avoiding Politics

Many engineers think that talking about their accomplishments is "playing politics" and they don't do it. This will ruin their career. Telling people about your wins isn't boastful bragging – it’s necessary. Your boss and the promotion committee can't help you if they don't know what you did.

The Fix: Reframe self-advocacy as data sharing. You're providing factual information about your impact to help leadership make informed decisions. Create a monthly update template that includes: projects completed, problems solved, metrics improved, and people mentored. You are sharing facts, not making up stories.

Action Item: Start a bi-weekly email to your manager highlighting your key contributions. Include specific metrics when possible: "Reduced API response time by 40%, impacting 10,000 daily users" rather than "Improved API performance."

If you don’t toot your own horn, who will?

Struggling with Networking

Internal networking feels awkward to many engineers, but it's crucial for Senior-level and Staff-level promotion. Staff Engineers need to influence across the organization, which requires relationships with people beyond their immediate team.

The Fix: Approach networking as building genuine professional relationships rather than transactional interactions. Start with curiosity about others' work. Ask questions like "What are the biggest technical challenges your team is facing?" or "What would make your team more effective?"

Action Item: Set a goal to have one coffee chat monthly with someone outside your immediate team. Focus on learning about their challenges and how your expertise might help. Share what you are working on and what goals you have in mind. These relationships often lead to collaboration opportunities that demonstrate your Staff-level impact.

How to Become a Staff Engineer

Every company's promotion process is different, but here are some general steps that work at most places:

1. Evaluate Yourself

Create a requirements document using your company's engineering ladder (or a publicly available template like the Block Engineering Career Ladder). Go through each requirement honestly and mark them as either "Achieving" or "Needs Work."

How to do it well:

• Be brutally honest with yourself. It's better to underestimate than overestimate your current level

• If something feels unclear, ask for examples of each requirement from your manager or other Staff Engineers

• Use concrete evidence from your work and links to PRs, not just your feelings about your abilities

• Update this document every 1-2 months to track your progress

Common mistake: Being too generous with your self-assessment. If you're not 100% confident you're "Achieving" something, mark it as "Needs Work."

2. Discuss Gaps with Your Manager

First, schedule a one-on-one meeting with your manager to review your evaluation. Work together to identify specific projects that can help you grow in areas where you need improvement. This meeting can feel painful, but it is extremely helpful in level setting. Request feedback on your assessment to see if they agree or disagree.

After evaluation with manager:

• Have 2-3 specific areas you want to focus on

• Ask about upcoming projects that could help you develop these skills

• Plan out a process for achieving those goals.

What to ask:

• "What projects in the next 6 months could help me develop [specific skill]?"

• "Who are the Staff Engineers I should learn from?"

• "What does success look like for someone at my level trying to get promoted?"

Follow-up: Send a summary email after the meeting with your agreed-upon focus areas and next steps.

3. Build a Support Squad

Promotion committees want to hear from multiple people about your impact. Your manager's opinion alone isn't enough. So it’s a good idea to build a support squad for yourself. These are people other than your manager, such as mentors, mentees, leadership folks or inspiring colleagues, who can vouch for your skills and impact during promotion discussions. These are essentially your “sponsors”.

Who to include:

• A skip-level manager (your manager’s manager) who can speak to your organizational impact

• Engineers who have worked with you on cross-team projects

• Engineers you've mentored who can talk about your leadership and teaching skills

• Staff Engineers from other teams who can validate your technical decisions

How to build these relationships:

• Volunteer for cross-team projects and initiatives

• Offer to help other teams with technical challenges in your area of expertise

• Attend company tech talks and ask thoughtful questions

• Share your knowledge through internal presentations or documentation

These relationships should be genuine, not transactional. Focus on offering value first.

4. Perform Like a Staff Engineer

Promotion committees promote people who are already performing at the next level, not those who might be able to perform at that level. Start acting as a Staff Engineer now. Deliver impactful projects, mentor others, and take ownership of technical decisions.

How to get started:

• Pick one area where you can start demonstrating Staff-level impact this month

• Volunteer for the next cross-team project or technical initiative

• Ask your manager if you can lead the technical design for an upcoming feature

• Start mentoring a junior engineer and document your impact on their growth

• Share knowledge through documentation, presentations, and code reviews

• Identify and address technical debt that impacts multiple teams

• Evaluate new technologies and make recommendations

Evaluation Criteria

To transition to Staff Engineer, you need to demonstrate consistent excellence across multiple dimensions. It helps to understand the evaluation criteria and take on projects that showcase the following -

Deep Technical Expertise

You’re expected to:

• Write detailed technical specs for others to follow.

• Define shared standards (e.g., caching layers, API contracts).

• Improve system-wide architecture across teams (e.g., microservices communication that lowers latency by 40%).

Examples of projects that exhibit these skills:

1. Architecting scalable, fault-tolerant systems (e.g., disaster recovery for payment processing).

2. Redesigning systems like user login to support 50M+ daily users with 99.99% uptime.

Problem Solving & Innovation

You’re expected to:

• Build reusable tools or frameworks widely adopted by others.

• Lead new tech adoption (e.g., Kubernetes, chaos engineering).

• Set engineering-wide standards through your innovations.

Examples of projects that exhibit these skills:

• Fixing infinity mirroring problem in video recording software. (I did this and filed my first patent!)

• Solving memory leaks or production crashes.

• Creating innovative solutions that reduce cost or improve performance

Technology Leadership

You improve the team's quality standards and lead technical decisions, such as by-

1. Making thoughtful buid-vs-buy decisions

2. Reducing technical debt

3. Establishing best practices and ensure team follows them

4. Leading tech migrations while ensuring 0 downtime.

5. Giving helpful, educational code review feedback

6. Setting team-wide coding, testing, and review standards

7. Creating templates, guides, and documentation that improve efficiency.

Mentoring Engineers

You help other engineers grow by:

• Guiding junior/mid-level engineers through complex systems.

• Reviewing designs and code thoughtfully.

• Teaching system design, architecture, and debugging skills.

You might:

• Create learning plans (e.g., 6-month onboarding curriculum).

• Host workshops (e.g., debugging production, distributed systems).

• Help others think like system designers.

• Help other engineers get promoted.

How to Build Your Staff Engineer Portfolio

Think of your portfolio as your promotion story. It should represent your accomplishments over the past 12–18 months, backed by clear proof. You’re not just showing what you’ve built – you’re showing how you think, how you lead, and the impact you’ve made.

What to Include

Your portfolio should be 10-15 pages that tell a compelling story about your technical leadership. Here’s what makes a strong Staff Engineer portfolio:

• Executive summary: One-page overview highlighting your most significant contributions

• Technical leadership projects: 3-4 major initiatives presented as detailed case studies

• Metrics dashboard: Quantified impact across performance, cost savings, and adoption rates

• Peer testimonials: External validation from engineers across different teams

• Growth trajectory: A 12–18 month view of how your scope and influence have grown.

How to Structure Each Case Study

Each case study should follow a structured format that tells a complete story. First, you’ll want to discuss the problem statement: what was broken? Who was affected? Why did it matter?

Then cover the technical approach you took. You can discuss the high-level architecture, key decisions, and trade-offs you considered. After this, you can discuss how you implemented everything – the timeline, how you coordinated your team, and any technical challenges you faced.

Finally, you’ll share your results and discuss the business and technical impact with before-after metrics. It’s also a good idea to share any lessons learned and talk about what you'd do differently and how it contributed to your growth.

The Promotion Process

Most companies use a committee-based approach where your manager advocates for your promotion using a comprehensive packet of evidence. The committee asks one simple question: Do we know this person and do we trust their credibility?

Your manager submits a promotion packet to the committee and you are evaluated against everyone else who is up for promotion. To help your manager put your best foot forward in front of the committee, I recommend that you build a promotion packet with your manager. This packet includes a few key components.

1. Career Plan & Engineering Ladder Evaluation

This is the same document that you have hopefully been working on with your manager for a while. This document maps your current performance against your company's engineering ladder criteria. This isn't just a self-assessment – it's a strategic document with concrete evidence for each competency level.

Key elements to include:

• Line-by-line evaluation against ladder criteria

• Specific examples and proof points for each skill area

• Clear demonstration of "Achieving" performance across all relevant categories

• Identification of any gaps and plans to address them

2. Portfolio & Proof of Accomplishments

Make sure your portfolio explains not just what you accomplished but the impact you made along with proofs. It should include:

1. Code examples and design documents

2. Finished projects and improvements you made

3. Feedback from users and coworkers

4. Comments from code reviews and awards you got

3. Brag Document

We’ve talked about this a bit already, but this detailed log serves as your professional highlight reel, demonstrating both quantitative metrics and qualitative growth over your review period.

Quantitative metrics to track:

• Pull requests created and reviewed

• Features delivered and timeline performance

• Code review discussions

• Bug fix rates and system improvements

• Performance optimizations achieved

Qualitative accomplishments to document:

• Technical leadership moments

• Cross-functional collaboration successes

• Mentoring and knowledge sharing contributions

• Innovation and creative solutions implemented

Growth documentation:

• New technologies learned and applied

• Leadership opportunities taken

• Feedback incorporation and skill development

4. Testimonials

Get recommendations from teammates, other departments, people you helped, and customers. Ask them to give specific examples.

Your packet should be organized, based on facts, and show how you've grown. Make it simple for the committee to see your value and for your manager to speak up for you.

A Six-Month Plan to Get Promoted

Here’s a structured approach to help you navigate your promotion:

Month 1: Evaluate Yourself

Review your company’s engineering ladder and assess your gaps. If they don't have one, use a publicly available career ladder.

Month 2: Create a Plan

Discuss your evaluation with your manager. Identify projects to address your gaps.

Month 3: Work on Impactful Projects

Start networking with your skip-level manager and other stakeholders.

Month 4: Gather Proof

Document your work, seek feedback, and build evidence of your contributions.

Month 5: Review Progress

Update your career doc and review it with your manager.

Month 6+: Keep Going

The process may take longer than six months, but persistence and structure will help you get there. Don’t worry if it does take longer – that doesn’t mean you’re not qualified or won’t make it. Keep working at it.

Wrapping Up

Promotion isn’t always about skills – it’s also about timing and organizational factors. If you’re feeling burnt out or unsure about continuing in tech, it’s okay to pause or reconsider your path.

Take charge of your career. Advocate for yourself and share your accomplishments. And if you need personalized guidance, book a one-on-one session coaching session with me to create a personalized plan for you: https://topmate.io/shrutikapoor08.

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

Connect with Me:

• YouTube: https://www.youtube.com/@shrutikapoor08

• Sign up for articles like this: http://bit.ly/shruti-newsletter

• Discord: bit.ly/shruti-discord

• Twitter: @shrutikapoor08

• Instagram: https://www.instagram.com/itsshrutikapoor/

You'll learn about:

1. The new React 19 feature, Actions
2. The new React 19 hooks, useActionState and useFormStatus
3. How to convert a React 18 form to a React 19 form

I also made a video version of this article if you'd like to learn from that as well.

Feature: React Actions

To understand Actions, let's first take a look at how we manage forms today. In React 18 and earlier, we submit forms using the handleSubmit function in a button. Here's a simple form that has one input field name:

// Form submission in React 18
console.info('React 18 form');

const [name, setName] = useState('');
const [isPending, setIsPending] = useState(false);

const handleChange = (event) => {
  setName(event.target.value);
};

const handleSubmit = (event) => {
  event.preventDefault();
  setIsPending(true);
  setTimeout(() => {
    // call API
    setIsPending(false);
  }, 500);
};

return (
  <form>
    <input type="text" name="name" onChange={handleChange} />
    {isPending ? <p>Loading...</p> : <p>Hello in React 18, {name}</p>}
    <button onClick={handleSubmit} disabled={isPending}>
      Update
    </button>
  </form>
);

In this code, we are doing the following:

1. Adding a loading state: We use a variable isPending to manually keep track of the loading state.
2. Form submission: The form is submitted using the handleSubmit event handler attached to the onClick event of the button.
3. Capturing the submitted value: The handleChange function captures the submitted value and stores it in state variables.

What Are React Actions?

With React 19, handling forms becomes easier with Actions, inspired by frameworks such as Remix. One key feature is the enhanced use of startTransition to manage pending states.

startTransition was introduced in React 18, allowing developers to mark certain updates as less urgent.

In React 19, startTransition can now handle async functions, making it even more powerful for managing asynchronous tasks and improving the user experience during form submissions.

const [isPending, startTransition] = useTransition();

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name);
    if (error) {
      setError(error);
      return;
    }
    redirect('/path');
  });
};

This async function inside startTransition is called an Action. What makes actions cool is that they can be used directly to submit forms like so:

<form action="{actionFn}">...</form>

This format may look familiar if you are experienced with PHP.

How to Create a React Action

To create an async function, we can use a new hook introduced in React 19 called useActionState. We call this hook and pass in an action function and an initial state. This hook returns the updated state and a form action actionFn, which can be used to wire up a form.

const [state, actionFn] = useActionState(submitAction, { name: '' });

Now with this wired up with the form, we have the following:

<form action={actionFn}>
  <input type="text" name="name" />

  <button type="submit" disabled="{pending}">
    Update
  </button>
</form>

To add a loading state, we can use a new hook introduced in React 19 called useFormStatus.

const { pending, data, method, action } = useFormStatus();

This hook provides information on the status of the form. The pending state indicates whether the form is being submitted, and data is a FormData object containing the submitted data. We use this pending state to show a loader.

But there is one caveat: this hook can only be used in a child component, not in the form itself. So, we have to create child components SubmitButton and Loader to retrieve a pending state:

function Loader() {
  const { pending } = useFormStatus();
  return <div>{pending && "Loading..."}</div>;
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      Update
    </button>
  );
}

....

return(
<form action={formAction}>
      <input type="text" name="name" />
      <Loader />
      <SubmitButton />
    </form>
)

We can also capture useful information about the data submitted to the form by retrieving it from the state returned from useActionState.

const [state, formAction] = useActionState(submitAction, { name: '' });

So here's the final form:

function Loader() {
  const { pending } = useFormStatus();
  return <div>{pending && 'Loading...'}</div>;
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      Update
    </button>
  );
}

function Name({ name }) {
  return <p>Hello in 19 {name}</p>;
}

function App() {
  console.info('React 19 form');

  const [state, formAction] = useActionState(submitAction, { name: '' });

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <Loader />
      <SubmitButton />
      <Name name={state?.name} />
    </form>
  );
}

Compare this with the React 18 form at the top of this post to check the difference.

Conclusion

By utilizing actions along with hooks like useActionState and useFormStatus, we can easily manage form states, capture submitted data, and provide responsive feedback to users during form submissions to show pending states.

I am excited for this improved experience of handling forms in React 19, and I look forward to removing unnecessary handleSubmits, useStates, and pending states.

In my next article, I will discuss another exciting new React feature: the React Compiler. This tool automatically memoizes, eliminating the need for useMemo and useCallback. Stay updated and get the article directly in your inbox by joining my newsletter.

What we will learn

In this article, you're going to master the following concepts:

• How to create circles using the arc method of the canvas context.
• How to utilize the requestAnimationFrame function for smooth circle animations.
• How to harness the power of JavaScript classes to create multiple circles without repeating code.
• How to add stroke styles and fill styles to your circles for a 3D bubble effect.

You can follow along with me, or use the final codepen if you want to take a look at the source code.

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

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 we'll use for creating the bubbles.

Let’s set it up:

<canvas id="canvas"></canvas>

In order to do anything meaningful with canvas, we need to have access to it’s context. Context provides an interface to render objects on the canvas and draw shapes.

Here's how to get access to canvas and it's context.

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

We'll also set up our canvas to use the entire window height and width:

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

Next, we'll give it canvas a nice soothing light blue background by adding some css. This is the only CSS we're going to use. You can also do this with JavaScript if you wish.

#canvas {
  background: #00b4ff;
}

How to Create Bubbles with Canvas

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

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:

//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);
};

How to Draw Circles Using the arc Method

To create circles, we're going to utilize the arc method available on canvas’s context. The 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 respectively because we're creating a full circle.

That is:

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

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

circles created using the arc method

How to Move Circles Using the requestAnimationFrame Method

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

Remember that when we created a 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!

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

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 seamless movement, we're going to create an animate function and use the browser's requestAnimationFrame method to create a moving circle:

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();

moving circles created with requestAnimationFrame method

How to Create Particles Using a Particle Class

Now that we have created one circle, it’s time to create multiple circles! But before we do that, let's prepare our code.

In order to avoid repeating our code, we are going to use classes and introduce a 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:

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:

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 the variables to be class variables:

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:

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

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

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'll store this particle in an array called particleArray. This array will also be helpful when creating lots of particles.

Here’s the updated code to reflect this:

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 these particles on your screen:

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 a for loop and add them to the particleArray we had created.

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:

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

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

  requestAnimationFrame(animate);
};

animate();

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

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

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;

Here’s the final codepen 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, how to leverage the requestAnimationFrame method, how to harness the power of JavaScript classes, and how to 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.

If you are interested in articles like this and front-end articles on JavaScript, React, GraphQL or Accessibility and career advice from a Staff Engineer, sign up for my newsletter and get these directly in your inbox.

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.

But creating an engaging conference talk is a skill that you can perfect with practice. In this tutorial, 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.

Embedded content

Know Your Audience

It's important to 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.

People responding to a question by show of hands

Work on the Core Content 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.

For example, if the talk is on "Angular to React migration", your key objective could be - what are the steps developers need to take to migrate their Angular app to React app. From there, your entire talk outline could frame around providing developers the background and context for providing information on migrating from Angular to React such as introduction to angular and react, need for migration, challenges and considerations, migration strategies and codebase analysis.

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.

Check out this example of mind map I saw on LinkedIn for a conference talk on "32 things to help English Learners become successful readers". Mind map is a great way to ensure the talk is aligned on the key concept.

Example of a mind map

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:

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.

Structure Your Talk Thoughtfully

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.

An example of outline that highlights which section is being talked about

Throughout your presentation, periodically remind them of the main points you're covering and where you are in the narrative.

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.

Use Visuals in Your Talk

A picture is a thousand words. We're naturally drawn to visuals rather than 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 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. Just make sure they don't contain too many odd/unexpected features. Check out this AI generated image I created of an avocado swimming in the ocean.

An example of an AI generated image of a halved avocado floating in water

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.

Large fonts from Zach Holman's talk on "How Github uses Github"

Use 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 to format it in a clean and readable manner. This ensures that even complex code is understandable to your audience.

Code formatted with carbon.sh

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.

An example of a slide with sufficient color contrast

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.

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.

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.

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. Check out this slide where I shared a QR code of a code demo.

An example of how to share QR code in your talk for code examples.

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 social handle at the bottom of every slide

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.

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.

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. You can also 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 template I started off with.

Examples of Great Talks

• Zach Holman's Talk with Huge Fonts
• Jason's Talk with Great Fonts
• Andre's Funny Talk with Cool Animations
• Shaundai's Talk with Great Use of Visuals

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 and get these directly in your inbox.

Follow on YouTube for tutorials

Check out my other articles

Join on Discord

#####

I like to spend a few hours in the beginning of the year doing a reflection of the past year, and brainstorming goals for the new year. Here’s a reflection of my 2022 year.

Setting your goals can be a daunting task. Whether you have already set your goals or still need to do so, this guide will give you 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 in 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

In this section, we'll discuss some steps you can follow to setup actionable goals that you feel motivated to follow.

Step 1: Start with your vision

There is one quality which one must possess to win, 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 towards 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 your 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.

Create goals from your vision

Working backwards 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 achieve that?

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 a paper or a digital notepad.

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 “HECK 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.

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 do research to ensure I am writing a well-informed and in-demand book.

Identify the areas that require improvement

For each of your goals, evaluate why you have not achieved your goal yet. In his book Goals!, 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.

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 towards your goals.

For example for me, I will know I am making progress towards 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.

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

So to ensure success of your goal, it is important to prepare yourself by thinking about the issues or challenges that might occur. Some questions that can help your prepare yourself are:

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 too tired at the end of the day to write anything. I may run out of ideas while writing or feel burnt out.

But 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 everyday 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 everyday. In Atomic Habits, author James Clear discusses the importance of setting a habit system. Here are some tips from Atomic Habits that can help you establish your habit system:

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.

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 time to achieve goals.

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.

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, in order 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 towards your goal today.

If you are thinking of getting in shape and are struggling to go to 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, which makes us feel motivated, joyful and successful. Our mind wants to achieve that feeling again, and so getting into the habit of achieving smaller tasks towards 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 towards my goal by the end of the year.

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 whom 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 you 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 am 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 themselves. This person can be your mentor.
2. Who is someone who can be your cheerleader when you feel down? This person can help lift up your spirits when you are feeling doubtful of your skills.
3. Who can be your accountability buddy? This person can help you stay motivated and on track by checking in with you regularly and helping you stay accountable.
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 focussed on your goal.
5. Who in your household 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. We help each other stay on track by keeping each other accountable, checking in regularly, and hype 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 in order to improve. Tracking progress, staying motivated, and making necessary changes will aid in this process.

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?

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.

Have a check-in day

In order to make sure your goals are working for you, setup 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 there are any obstacles that 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.

My Personal Goal-Setting Tools

Here are my personal tools that I use to set goals:

Bullet Journal Goals spread – 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

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. This is inspired by Ali Abdaal.

Discord –This is my accountability community to help you stay on top of 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, career goals, or just looking for a supportive community, this 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.

Let's make our dreams a reality!

This is OUR YEAR.

Thank you for reading!

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

• For more frequent tips, stay in touch on Twitter
• Get articles like this directly in your inbox

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 it requires? Have you considered folks with motor disabilities, visual disabilities, cognitive disabilities, and auditory disabilities?

Accessibility is often 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, 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 together at the end.

5 Things to Remember for Good Accessibility

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

In short, S.T.A.R.K.

If you need help remembering this, think of Tony Stark.

Let's go through each of these to understand how to use them in your web apps.

What is Semantic HTML?

Using semantic HTML is important for accessibility. This is because 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 example, if a screen reader encounters a button, it signals to the user that they should click on it.

Let's consider some use-cases of what can happen when you don't use semantic HTML:

Creating buttons by using div instead of button:

divs 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, the screen reader announces role="group" and the user will completely miss that the div is interactive. So make sure you use the proper semantic element for its purpose. You get accessibility for free.

Using CSS to fake headings instead of using h1-6 tags:

Heading tags such as <h1> and <h2> let an assitive technology know 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 just make sure to use semantic HTML whenever possible.

What is Tabindex?

Adding a tabindex makes interactive elements keyboard-navigable. When you add tabindex to an element, a user is able to navigate to it using only their keyboard and/or assitive technologies.

1. You use a tabindex of 0 to set focus to an element in the default tabbing order,
2. You use a tabindex of -1 to programmatically focus an element using JavaScript.
3. Do not assign a value of > 1 to tabindex.

A word of caution though - you should only add tabindex to interactive elements. It is not a good practie to add tabindex to elements such as div.

Instead of adding tabindex in that case, use a semantic element, such as a button since semantic elements already are tabbable and do not need an additional tabindex value.

What are ARIA attributes?

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

Aria attributes are a set of HTML attributes that you use 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.
2. 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.
3. aria-describedby: used to associate an element with a description, which helps to provide context of an element.
4. 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.

You can use these attributes in combination with each other and with standard HTML attributes to create more accessible and user-friendly web content.

What is the aria-role attribute?

You use the aria-role attribute 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 semantics of the component.

Some common aria-roles 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.

How to handle keyboard navigation and screen readers

Many users with motor disabilities rely on their keyboard and assitive technologies to navigate the web. So it's critical that every component be navigable using a keyboard and screen reader.

You can test keyboard accessibility by navigating a site using only your keyboard. Here are some common keys:

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

While testing keyboard navigation, make sure you think about the following:

1. Focus remains visible: Ensure that you can clearly see which element is being focused on 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.

Wrapping Up

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. You can sign up to get it in your inbox here.

Until then, enjoy your holidays!

Feliz Navidad.

Have you ever had those moments where nothing feels exciting? You lay in bed thinking – 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. 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 how to manage procrastination.

What to do when you don't have motivation to work on anything

We must remember that motivation comes in many shapes and forms. Some days, motivation looks like creating art, whereas other days, it inspires you to create a blog post.

Some days motivation looks like going on a 7-mile hike, whereas other days, it is about taking care of yourself and working your butt off.

Acknowledge and appreciate each type of 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 takes 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 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 do you create it?

A habit system 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. This week: create a feature for a project you are working on.
2. This month: learn TypeScript
3. This quarter: release project
4. This year: be proficient in React and TypeScript, speak at a conference, and 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
Days 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 your mental frame". This is how you get yourself in the mood for getting work done.

My Habit System

I've developed my own habit system that I use to keep myself on track. I'll explain each part so you can adapt it to your own needs.

How to find 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.

So 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 that doesn't work, 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.

How to set a timeline

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.

How to set a mood

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 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 and discord server 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.

How to cut out distractions

This is very important to me because I have the 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 that for the 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. 😄

How to get things 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 into 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 or content repeatedly.

The idea here is to get it going and get the juices flowing. It's all about getting your mind to dump all the ideas out on the page.

Don't forget to take a break

Once the timer is done, 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.

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 to for help.

And so, the cycle repeats.

Wrapping Up

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

React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of.

In this tutorial, I will give a quick guide of the features released in React 18, and explain a few major concepts such as concurrent rendering, automatic batching and transitions.

React 18 Feature Quick Guide

Now let's look at each of these updates in more detail. But first, if you haven't already, let's learn how to update React.

How to upgrade to React 18

Install React 18 and React DOM from npm or yarn, like this:

npm install react react-dom

Then, you'll want to 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.

Here's what it would look like in React 17:

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

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

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

And here's what it looks like in React 18:

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 />);

Concurrency in React 18

To understand concurrency, let’s consider this example 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.

Image showing that in a typical non-concurrent phone conversation, you have to wait for a call to be over before starting a new call.

In a concurrent setting, we could call Alice and, once we were put on hold, we could then call Bob.

This doesn’t mean that we are talking to two people at the same time. It just means that we can have two or more concurrent calls at the same time and decide which call is more important.

Image showing phone conversation between Alice and Bob can be concurrent, by placing a call on hold and answering a more urgent call with Bob first.

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 React 18 Features

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.

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 the 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, only to 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 happen when a state changes, when you call setState. Previously, React batched state updates in event handlers, for example:

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

//re-rendered once at the end.

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

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.

Transitions

Transitions can be used to mark UI updates that do not need urgent resources for updating.

For example, 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 so 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. This makes it easier to optimize rendering and get rid of stale rendering.

You can mark updates as non-urgent by using startTransition. Here is an example of what a typeahead component would like when marked with transitions:

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 are transitions 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.

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 will be waiting for the page to become interactive, or to see meaningful content.

In a client rendering flow, a user has to wait a long time before the page becomes interactive. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

For optimizing the user experience and avoiding the user having 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.

In a server rendering flow, we can display meaningful data to the user much faster by sending HTML from the server. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

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 was often the bottleneck of the app, and would increase the time it took 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 it's 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.

Image showing that suspense on the server can allow a slow component to show a loading state while others are fully rendered.

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, which significantly improves the user experience and user-perceived latency.

Strict mode

Strict mode in React 18 will simulate mounting, unmounting, and re-mounting the component with a 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.

Conclusion

In a summary, React 18 sets the foundation for future releases and focusses on improving the user experience.

Upgrading to React 18 should be straightforward and your existing code should not break after the update. The upgrade process should not take more than an afternoon.

Give it a go and let me know what you think!

Sources:

1. React RFC
2. My previous React 18 post
3. React V18 blog
4. React Conf 2021 - React for App developers
5. React Conf 2021 - Streaming Server Rendering with Suspense

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

• For more frequent tips, stay in touch on Twitter
• Want articles like this directly in your inbox?

You might use some web forms to apply for a new car loan, whereas you'll use others to order pizza for dinner. So it's important that the data collected from those forms is cleaned, formatted correctly, and devoid of any malicious code. This process is called form validation.

We need form validation anytime we are accepting user input. We must ensure that the data entered is in the 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 cause the API to throw errors.

What are the different types of form validations?

Form validation can happen on the client side and the 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.

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 data 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 that the value entered is a valid value such as country, date, and so on.

How to set up client side validation

On the client side, validation can be done in two ways:

1. Using HTML5 functionality
2. Using JavaScript

How to set up validation with 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 patterns using pattern:
  • specifies a regex pattern that the 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:

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

Link to JSFiddle

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, you'll get a message, "Please fill out this field". This is validation using in-built HTML5.

How to set up validation using JavaScript

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

1. What is defined as "valid" data? This helps you answer questions about the format, length, required fields, and type of data.
2. What happens when invalid data is entered? This will help you define the user experience of the validation - whether to show an error message inline or at the 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? And so on.

You can perform JavaScript validation in two ways:

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

Inline validation using JavaScript

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

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;
}

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

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Link to JSFiddle

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

The required and pattern HTML attributes can help perform basic validation. But if you want more complex validation or want to provide detailed error messaging, you can use the 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 and length in conjunction with the Constraint Validation API to provide detailed error messages.

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

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

Don't forget server side validation

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

You can also use server-side validation to perform business logic verifications that should not live on the client side.

Form Validation best practices

1. Always have server side validation, since malicious actors can bypass client side validation.
2. Provide detailed error messages in-context with the field that produced the 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 a previous page to fix the form and lose context.
5. Always mark required fields.

Interested in more tutorials and articles like this? Sign up for my newsletter. or follow me on Twitter

Events are actions that happen when a user interacts with the page - like clicking an element, typing in a field, or loading a page.

The browser notifies the system that something has happened, and that it needs to be handled. It gets handled by registering a function, called an 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 meetup events in your local community.

To do this, you sign-up for a local meetup called "Women Who Code" and subscribe to notifications. This way, 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, thus taking an "action" on the event.

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

Let's look at an example of a 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 any time a user interacts with the page. These events could be a user scrolling through the page, clicking on an item, or 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 propagates through the DOM tree.

Events happen in two phases: the bubbling phase and the capturing phase.

In capture phase, also called the 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 the bubble phase, the event is "bubbled" up to the DOM tree. It is first captured and handled by the innermost handler (the one 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.

Her's a trick to help you remember this:

trickle down, bubble up

Here's an infographic from quirksmode 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 the bubbling phase. Otherwise it's in the 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:

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

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 the following:

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 Click me

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

1. `addEventListener` gives you 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 them. 

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

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

TL;DR

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

    addEventListener can add multiple events, whereas with onclick this cannot be done.
    onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
    addEventListener can take a third argument which can stop the event propagation.

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

To keep up with more short tutorials like this, sign up for my newsletter or follow me on Twitter

Optional chaining, represented by ?. 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 a 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 chains of properties.

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

obj = {
  prop1: {
    prop2: {
      someProp: "value"
    }
  }
};

But you may not know if each of these fields are available ahead of time. Some of them may not have been sent back by the API, or they may have come back with null values.

Here is an example:

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

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, specifically the _.get method:

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

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

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:

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

How to get this newest feature

1. Try it 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. Try it 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 as follows:

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

Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter

So I am hoping this trick will help both me and you in the future:

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

Array.prototype.slice()

Array.prototype.slice() is used to slice an array from the start point to the end point, excluding the end.

As 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!).

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 the array.
3. If start is -ve, the elements are counted from the end.

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 the exisiting array.

In addition to removing elements, splice is also used to add elements. Splice is the real world cake "slice":

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

Rules

1. Operations are performed 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 deleteCountis omitted,the elements until the end of the array are removed.
5. If items to insert such as itemToInsert1 are omitted, elements are only removed.

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

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 the original array should not be modified.

Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter

In this article, I will demystify the difference between encodeURI and encodeURIComponent.

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

URI stands for Uniform Resource Identifier. URL stands for Uniform Resource Locator.

Anything that uniquely identifies a resource is its URI, such as id, name, or ISBN number. A URL specifies a resource and how it can be accessed (the 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.

This means that 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 Identifiers (URIs) 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

Which characters are encoded?

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

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

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

Examples

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 that may have spaces.

    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.

    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. or follow me on Twitter

###

Access to fetch at 'http://somesite.com' from origin 'http://yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin

In this post, we are going to learn why this error happens and how you can fix it.

What is the Access-Control-Allow-Origin header?

Access-Control-Allow-Origin is a CORS header. CORS, or Cross Origin Resource Sharing, 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 protect your security, the 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 Mozilla Developer Network that explains this really well:

With the help of CORS, browsers allow origins to share resources amongst each other.

There are a few 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 scenario: You are browsing a website that is used to view and listen to songs. The website attempts to make a connection to your bank in the background maliciously.

So who has the ultimate ability 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.

Just remember: 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 it in action

Let's look at an example. You can check out this code on my GitHub repo.

We are going to build a server on origin A http://localhost:8000 which will send a string of Hellos to an api endpoint. We are going to call with this endpoint by creating a client on origin B http://localhost:3000 and then use fetch to request the 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 like this:

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.

Now, to fix this, change the headers to this:

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

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

Interested in more tutorials and JSBytes from me? Sign up for my newsletter.

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

const promise = fetch(url, [options])

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

A sample FETCH request -

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

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

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

To send a POST request, here's how the method parameter can be used with async / await syntax.

const params = {
  id: 123
}

const response = await fetch('url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
});

const data = await response.json();

Interested in more JSBytes? Sign up for the newsletter