🖥️ Web Dev Everyday - 3rd September 2024

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

Another pack of free value (because why not😎):
We have created a github repo with database of trivia questions, UI challenges and coding challenges.

It’s in early stage and still in development, you can check it out and star it (starring it helps other discover valuable free resources ⭐):

https://github.com/Codetive/frontend-coding-challenges

Let's dive in!

🎯 Tip of the day

Forget console.log!

We know that if you’ve been using Javascript for a while you spam console.logs, but do you know there is more?

console.error()

const carBrands = ["Toyota", "Ford", "BMW", "Honda", "Tesla"];

console.error("Error loading car brands:", carBrands);

console.table()

Used to print data in a tabular format, which is great for arrays of objects or arrays of simple data.

const carBrands = ["Toyota", "Ford", "BMW", "Honda", "Tesla"];

console.table(carBrands);

console.dir()

Displays an interactive list of the properties of the specified JavaScript object. This method is particularly useful for inspecting objects or arrays.

const carBrands = ["Toyota", "Ford", "BMW", "Honda", "Tesla"];

console.dir(carBrands);

console.group()

Starts a new inline group in the console. This allows you to group together related log messages

const carBrands = ["Toyota", "Ford", "BMW", "Honda", "Tesla"];

console.group("Car Brands List");
console.log(carBrands[0]);
console.log(carBrands[1]);
console.log(carBrands[2]);
console.log(carBrands[3]);
console.log(carBrands[4]);
console.groupEnd();

console.time()

Starts a timer that you can use to track how long an operation takes

const carBrands = ["Toyota", "Ford", "BMW", "Honda", "Tesla"];

console.time("CarBrandsProcessingTime");

// Simulate a task
carBrands.forEach(brand => {
  console.log("Processing:", brand);
});

console.timeEnd("CarBrandsProcessingTime");

📰 Challenge - Integrations section

Brief: Use the provided UI to rebuild SAAS landing page’s integrations section.

Ideas to push it further:

1. Interactive elements

   1. Clickable Icons: Make each integration icon clickable/hoverable. When hovered/clicked, display additional information about the integration, such as description, setup instructions, or status.

   2. Explore Button: Improve the "Explore Integrations" button to trigger a modal or navigate to a detailed integrations catalog page.

2. Animations: Make it animated, move, lines can have animated gradient, scale, transform etc. here are great landing pages which can inspire your animations https://neon.tech/ or https://www.raycast.com/ 

   (not sponsored links or anything like that, just design/animation inspo)

📰 Tech news

Any hardcore X (Twitter) users?

X (Twitter) now allows users to edit their Direct Messages (DMs).To use it, users can long-press on a sent message and choose the "Edit" option. This feature is being gradually rolled out and aims to improve user communication on the platform.

Wanna invest in OpenAI?

Investors are valuing OpenAI at over $100 billion in secondary market transactions, reflecting high demand and confidence in the company's future prospects. This valuation marks a significant increase, increased by OpenAI's advances in AI technology and its commercial potential.

Note: Last email included tip about React + Typescript and challenge about advanced JS feature. We’ve got some responses that it was too difficult, our newsletter is in early stages, so we want to balance beginner-intermediate-advanced stuff, in the following weeks we will try to split our emails into beginner or intermediate/advanced emails, you will be able to choose if you want to receive one of them or both. But that’s for following weeks….

Thank you for reading and amount of support we’ve been getting, it really motivates us, once again here is free repo you can use to learn (we will be updating it with ton of content in the next days, weeks, months) https://github.com/Codetive/frontend-coding-challenges

Best,
Pawel