Web Dev Everyday - 16th September 2024🖥️

Welcome to Web Dev Everyday – your daily dose of 3 minute web development emails.

Let's dive in!

🎯 Tip of the day

Cool Javascript ES13 Features

1. Top-Level Await

   Simplifies syntax of async code which required additional boilerplate to run async code at the top level.

// Before ES13 (using await inside async functions):

async function fetchData() {
  const data = await fetchDataFromAPI();
  console.log(data);
}

fetchData();

// ES13

const data = await fetchDataFromAPI();
console.log(data);

2. .at() method for better indexing

   Simplifies accessing elements from the array or string. Especially from the end as we’re used to writing array.length - 1 to access last element.

// Before ES13 (accessing array elements with bracket notation):

const arr = ['a', 'b', 'c', 'd'];
console.log(arr[arr.length - 1]); // 'd'
console.log(arr[arr.length - 2]); // 'c'

// ES13

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(-1)); // 'd'
console.log(arr.at(-2)); // 'c'

3. Better error handling with error.cause

   This property allows you to link errors, providing more context about the original error → makes debugging easier and more efficient.

async function processUserRequest() {
  try {
    performApiRequest();
  } catch (originalError) {
    throw new Error('Our error message');
  }
}

// Before ES13

try {
  processUserRequest();
} catch (error) {
  console.log(error); // Our error message
}

// ES13

try {
  processUserRequest();
} catch (error) {
  console.log(error); // Our error message

  const errorCause = err.cause;
  console.log(errorCause) // Original error
}

🥊 Challenge - Working with API

Today’s challenge is more for beginner javascript/react folks! Your challenge is to fetch and display data from the Pokémon API.

You can choose to implement this using vanilla JavaScript or React.

Key Requirements:

1. Fetch Pokémon Data: Use the Pokémon API to retrieve data about different Pokémon (e.g., name, type, abilities, and an image).

2. Display Pokémon Information: Create a clean layout to display the data, showing the Pokémon's name, type(s), abilities, and an image.

3. Interactivity: Allow users to search for specific Pokémon by name or ID. Bonus points for adding a feature that loads random Pokémon when the page is refreshed or when the user clicks a button.

Optional Ideas to Push Further:

• Pagination: Display a list of multiple Pokémon and implement pagination or infinite scrolling.

• Styling: Make the design visually appealing using CSS or a framework like Tailwind (however most important thing is api logic)

• Advanced Features: Display additional Pokémon details such as base stats, evolutions...

Resources:

• Pokémon API documentation: PokéAPI