🖥️ Web Dev Everyday - 2nd September 2024

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

Before we dive in though…

🚨 Announcement!

30 second sneak peek of the app we are building

https://www.youtube.com/watch?v=AGvfFvPeMzc

Main features:

📝 Web dev quizzes (on the video)

🥊 Coding challenges - builtin editor, console, tests, code review

📦 Components - access design files and recreate real-life projects

Other features: interactive courses, tracking progress, code reviews, certificates… and ton of free value, github repo, notion templates and more.

All of the main features listed will be…. 100% FREE 🙂 Next features will be showcased in emails in the following days and weeks (trust me, they are even more cooler).

Planned launch of first version: end of September 2024.

Okay, let’s dive in!

🎯 Tip of the day

Stop rendering conditions like this…

Imagine component like this:

type UserType = "admin" | "editor" | "user";

type User = { name: string; type: UserType };

const users: User[] = [
  { name: "john", type: "admin" },
  { name: "mike", type: "editor" },
  { name: "abdelrahman", type: "user" },
];

export default function Test() {
  const actions = ["create", "read", "update", "delete"];

  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {user.type === "admin" && actions.map((a) =>    (<div>{a}</div>))}
            {user.type === "editor" && actions.filter((a) => a !== "create").map((a) =>(<div>{a}</div>))}
            {user.type === "user" && actions.filter((a) => a === "read").map((a) => <div>{a}</div>)}
          </div>
        </div>
      ))}
    </div>
  );
}

Why not first declare each user type and use some Typescript magic? 💫

const userActionsStates: Record<UserType, string[]> = {
  admin: ["create", "read", "update", "delete"],
  editor: ["create", "read", "update"],
  user: ["read", "update"],
};

// And then our users.map can look like this

{users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {userActionsStates[user.type].map((a) => (
              <div>{a}</div>
            ))}
          </div>
        </div>
      ))}

You might ask: What about else statements????

Let’s update userActionsStates:

const userActionsStates: Record<UserType, string[]> = {
  admin: ["create", "read", "update", "delete"],
  editor: ["create", "read", "update"],
  user: ["read", "update"],
  default: ["read"],
};

// and finally we are left with:
<div>
{(userActionsStates[user.type] ?? userActionsStates["default"]).map((a) => (
    <div>{a}</div>
  ))}
</div>

// much cleaner than the first version huh? 👇

<div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {user.type === "admin" && actions.map((a) =>               (<div>{a}</div>))}
            {user.type === "editor" && actions.filter((a) => a !== "create").map((a) =>               (<div>{a}</div>))}
            {user.type === "user" && actions.filter((a) => a === "read").map((a) => <div>{a}</div>)}
          </div>
        </div>
      ))}
</div>

Today a little longer tip, let’s move to challenge which will be quick