Forem: Max Wiggedal

Need to have VSCode settings for a Next.js project

Max Wiggedal — Thu, 04 Jul 2024 14:03:22 +0000

Do you find it difficult to navigate your NextJS project or do you get lost when you are editing multiple pages/routes/layouts/components at once? Look no further!

Custom Labels

VSCode supports custom labels for the files that are currently being displayed. I have put together some labels that work amazingly with a typical NextJS project setup.



"workbench.editor.customLabels.patterns": {
  "**/app/**/layout.tsx": "${dirname(1)}/${dirname} - Layout",
  "**/app/**/page.tsx": "${dirname(1)}/${dirname} - Page",
  "**/app/**/route.ts": "${dirname(1)}/${dirname} - Route",
  "**/app/**/_components/**/*.tsx": "${filename} - ${dirname(2)}/${dirname(1)} - Component",
  "**/components/**/*.tsx": "${filename} - Component",
  "**/data-layer/**/*.ts": "${filename} - Data Layer",
  "**/entities/**/*.ts": "${filename} - Entity",
  "**/hooks/**/*.ts": "${filename} - Hook",
  "**/lib/**/*.ts": "${filename} - Library",
  "**/utils/**/*.ts": "${filename} - Utility",
  "**/env/**/*.ts": "${filename} - Environment"
}

You can always modify it to match your project needs!

To correctly setup the settings for your project create a directory called .vscode with a settings.json file inside of it. Then simply add your settings in there and it will apply for everyone in the project that uses VSCode.

NextJS TypeScript Version

Do not forget to set your TypeScript version to the one provided by NextJS. You can do so by opening the command palette in VSCode by pressing CTRL + SHIFT + P or F1 and then entering >TypeScript: Select TypeScript Version... after you have done so you want to select Use Workspace Version.

This will also add:



"typescript.tsdk": "node_modules\\typescript\\lib"

to settings.json in the .vscode directory of your project.

Result

You can easily identify what file belongs to what directory and therefore you for example do not have multiple "page.tsx" that you have to guess which one is correct.

Begineer: TypeScript Utility Types

Max Wiggedal — Sun, 26 Nov 2023 07:29:09 +0000

STOP! You better not be individual that I catch using the any type in my projects. This is only acceptable under very specific circumstances, but should ultimately be eliminated by implementing specific types/interfaces.

Whether you choose to use a type or an interface is mostly a personal preference. However by using a type you can easily make use of the utility functions that TypeScript has built-in. You could make use of them while using an interface too but the syntax gets ugly quickly.

Some of the mostly used utility types are Pick, Omit, Partial and Record.

Pick - Select the keys you want included in the new type.
Omit - Select the keys you want excluded in the new type.
Partial - Indicate that all keys of the type are optional.
Record - Constructs a key/value map type.

For example you might have this type:

type Todo = {
  id: string;
  title: string;
  description: string;
}

but you want to update a todo, but you do not want the id field to be updated, by using the Omit utility type you can exclude it.

function updateTodo(id: string, updatedTodo: Omit<Todo, "id">) {
  // Code to update the todo here
}

updateTodo("todo1", { title: "New title", description: "New description" });

Another example using Record could be for example:

type PokemonType = "fire" | "water" | "grass";

type PokemonSkill = {
  name: string;
  damage: number;
}

type PokemonInfo = {
  name: string;
  health: number;
  skills: PokemonSkill[];
}

const pokedex: Record<PokemonType, PokemonInfo[]> = {
  fire: [
    {
      name: "Charmander",
      health: 100,
      skills: [
        {
          name: "Solar Power",
          damage: 10,
        }
      ]
    }
  ],
  water: [],
  grass: [],
}

In this example we have mapped a key being the type of pokemon to an array of pokemon info. This could be useful if we for example want to display categories of pokemons depending on what type they are.

an alternative way of writing this without using Record would be this, however it does not look as good syntax wise:

const pokedex2: { [pokemonType in PokemonType]: PokemonInfo[] } = {
  fire: [],
  water: [],
  grass: [],
}

Want to learn more? Check out the TypeScript documentation!

React state in query

Max Wiggedal — Wed, 27 Sep 2023 11:57:31 +0000

When working with state in React it can quickly turn into several useState being used and something you might not think about is that the user might want to share the page with their friends while persisting the state, implementing that can be quite tricky and require more work than necessary. An easy solution to this is by utilizing query parameters for the state.

Normal State

For example you might have this stateful datatable component:

export default function DataTable() {
    const [page, setPage] = useState(1);
    const [size, setSize] = useState(10);
    const [search, setSearch] = useState("");

    return (
        <div>
            <p>Page: {page}</p>
            <p>Size: {size}</p>
            <p>Search: {search}</p>
        </div>
    );
}

This works just fine, however if the user wants to share the page with a friend and have it display the exact same values (assuming they have been modified from default state) then that would not be possible.

Query Parameters State

Instead we could implement state using query parameters:

export default function DataTable() {
    const [searchParams, setSearchParams] = useSearchParams();
    const page = parseInt(searchParams.get("page")) || 1;
    const size = parseInt(searchParams.get("size")) || 10;
    const search = searchParams.get("search") || "";

    // Example: updateState("page", 3);
    const updateState = (key, value) => {
        setSearchParams((previousSearchParams) => {
            previousSearchParams.set(key, value);
            return previousSearchParams;
        }, { replace: true });
    }

    return (
        <div>
            <p>Page: {page}</p>
            <p>Size: {size}</p>
            <p>Search: {search}</p>
        </div>
    );
}

This way we would be able to share the link to the page to a friend and they would see the exact same results as we do, for example: https://example.com/?page=2&size=1

Begineer: Synchronous vs Asynchronous Programming

Max Wiggedal — Tue, 25 Jul 2023 23:01:53 +0000

Synchronous Programming

Synchronous programming is perfect for when you have tasks that you know are non-time consuming and will simply run one after the other. Each task has to fully finish executing before the next task is started when using synchronous programming. You can look at it as a queue, first task that enters the queue fully executes and then the next task in the queue repeats the same process until the queue is empty.

When utilizing synchronous programming you can easily predict the order in which each task will execute. However this can be very slow for certain tasks such as making multiple network requests or I/O operations such as reading from a file or writing to a file. This is because each task has to finish running before it continues.

Asynchronous Programming

This is where Asynchronous programming comes into the picture. It allows you to offload time-consuming tasks onto another thread which means the code being executed on the main thread will not completely freeze in order to wait for our time-consuming code to execute.

In comparison to synchronous programming, asynchronous programming allows you to execute time-consuming tasks and return the result whenever it is ready without blocking other code from executing.

Example Difference

While JavaScript itself does not use threads, because it uses a model called the "Event Loop" it can still be used to demonstrate the difference between synchronous and asynchronous with the use of promises.

Synchronous

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

console.log("Sync: Hello"); // This will run instantly
await sleep(5000); // This will block the execution of any code until 5 seconds have passed
console.log("Sync: World!"); // This will run after 5 seconds

Asynchronous

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

console.log("Async: Hello"); // This will run instantly
sleep(5000).then(() => console.log("Async: I am late :(")); // This will run after 5 seconds but will not block code execution
console.log("Async: World!"); // This will run instantly