DEV Community: wenrei

Web development - Vercel AI

wenrei — Sat, 28 Dec 2024 09:59:26 +0000

Recently, I discovered Vercel V0, an AI assistant for coding launched by Vercel. It features a well-designed split interface, allowing users to perform prompt engineering on one side while viewing the generated code on the other.

Since Vercel V0 is built on top of Next.js, the generated code uses the Next.js framework. Although there is a daily limit on the number of free prompts, it is sufficient for tasks like generating a static website.

It took me just 30 minutes to build a V1 UUID Generator by iteratively refining the prompts I provided. These are the advantages that I discovered.

Advantages:

Preview Capability: Easily preview the website during development.
Instant Deployment: Supports rapid deployment of your project.
Organized Codebase: Automatically organizes code into multiple files.
Auto-Generated Comments: Includes comments to simplify debugging.
IDE-Like Interface: Provides an intuitive interface that highlights code additions and deletions.

Some snippets:

To access the link:
https://v0.dev/chat/jw5IiJ2NyTR?b=b_mJvccQdUgSY

Happy coding!

Null/Undefined Check

wenrei — Mon, 19 Sep 2022 16:10:58 +0000

In react, if we declare and do not initialise a variable, it would be undefined

var a; //undefined

If we would want to assign a variable and initialise a variable later, we could first assign it as null. (Not recommended)

var a = null;

As undefined and null is different, we should perform validation whenever we think that the code would break if the variable is null or undefined.

typeof null          // "object" (not "null" for legacy reasons)
typeof undefined     // "undefined"

To make the code reusable, we could define a utility function to perform the validation. The function could be as simple as a function that takes in any type of input, or a function that utilise Generics.

function nonNullish(value: unknown): boolean {
    return value !== (null || undefined) ? true : false;  
}


function assertNonNullish<TValue>(value: TValue): boolean {
    return value !== (null || undefined) ? true : false;  
}

ES6: Date - Increment Days

wenrei — Sat, 17 Sep 2022 22:29:12 +0000

Q: Given that normal working days are Monday to Friday. Implement a function to increment a date by X working days.

A: Date.getDay() returns a Map of <number, Day>. Use Date.getDay() to check the current day and set the new Date with Date.setDate().

0: Sunday
1: Monday
2: Tuesday
...
...
6: Saturday


function isWeekend(date: Date) : boolean {
  return date.getDate() % 6 ===0;
}


export function incrementAndReturnNextBuisnessDay (date: Date, days: number): Date{

  date.setDate(date.getDate() +days);
  while(isWeekend(date)){
    date.setDate(date.getDate() + 1);
  }
  return date;