It is currently incompatible with next-mdx-remote since the latter uses unified@10 (dependency of MDX 3) while the former uses unified@11.

The biggest benefit of upgarding rehype-pretty-code to v0.12.0+ is it has migrated to shikiji which no longer needs the shiki workaround when SSR and has better schematics.

Looks promising, but it doesn't support TypeScript v5 and Prettier v3 right now. Kepp monitor

• vercel/style-guide#66
• vercel/style-guide#65

+ Enhanced viu.com's user login system and improved user profile section, amplifying user experience and engagement.
- Enhanced viu.com's user login system and improved user profile, improving user experience and engagement.

• Website
• CV
• LinkedIn

Current

/blog and /blog/:slug are ISRed (revalidate for every hour). This is mostly for the sake of updating the view count periodically since the rest of the content is static.

To be explore

Partially render the two pages while wrapping the view count in Suspense, leaving it SSRed. This can potentially re-introduce like count, which is previously removed due to de-synchronized count between /blog and /blog/:slug.

unstable_noStore() may be helpful in this case since the counts are retrived using fetch internally.

Reference

• vercel/next.js#57287
• vercel/next.js#56930

• Update Geist font
• Refine HA job titles (Only in CV, not website)
  1. Remove the team name from job titles
  2. Merge the two "Programmer"
• Include HKJC job (after "probation")
  • CV
  • Contentful
• Update MScISM completion date
  • CV
  • Contentful

Using cookie as session ID:

// Like.tsx

const cookiesStore = cookies();
const liked = !cookiesStore.has('userId') ||
  await hasUserLikedBlog(blogId, cookiesStore.get('userId')?.value)

In LikeButton, optimistic update the liked status.

In server actions, assign userId if not exist. Should only be required in likeBlog, since people can't unlike it without liking it.

export const likeBlog = () => {
  const cookieStore = cookies();
  if (!cookieStore.has('userId')) {
    const userId = crypto.randomUUID();
    cookieStore.set('userId', userId, {
      httpOnly: true,
      secure: true,
      maxAge: 60 * 60 * 24 * 365,
      sameSite: 'strict',
    });
  }

  // prisma update
};

Add Amazon S3 and Amazon ECR.

• Website
• CV
• LinkedIn

Context

Currently, some of the components are lazy loaded and depend on queries to Neon DB at runtime. When an unhandled/unexpected exception is thrown, e.g. the DB is unreachable, the error.tsx will take over, causing the entire site to be not functional. However, this doesn't have to be the case, since most of the contents are static and can be correctly displayed regardless of such failures

Proposal

1. Implement a custom ErrorBoundary. Ref:
   • https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
   • https://github.com/bvaughn/react-error-boundary (reference the code)
2. Wrap all dynamic contents with ErrorBoundary, affected area
   1. /blog Views - fallback: -- views
   2. /blog/:slug Views - fallback: <eye_icon> -- views
   3. /guestbook SubmissionsList - fallback: null (or may be a nice looking logo like https://ant.design/components/empty)
   4. /guestbook JsonLd - fallback: null
3. Bonus: create a server action, which sends email on error (in ErrorBoundary and error.tsx), with
   1. error
   2. errorInfo
   3. Parsed user agent with https://www.npmjs.com/package/ua-parser-js

Motivation

The current UI isn't suitable where the content length of each category varies a lot.

Missing puzzles

• Icon for each "skill"
  • Brands that don't have a monochrome icon
  • Non-branded skills? e.g. SEO

Show up when

1. Directly accessing the PPR pages --> The error shows up after the delayed content is loading
2. Client-side navigating to PPR pages --> The error shows up on the server side. This seems to cause significant delay on the navigation.

• Remove usage of @vercel/analytics and @vercel/speed-insights
• Follow https://docs.sentry.io/platforms/javascript/guides/nextjs/
• Follow https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
• Install Vercel integration https://docs.sentry.io/product/integrations/deployment/vercel/
• Add Sentry to the tech stack. Logo: https://sentry.io/branding/
• After it's working, watch out for bundle size and ways to reduce it.
• Update Privacy Policy with the help of ChatGPT.

Personal data collected

1. Contact form - Stored in PlanetScale; region: AWS ap-southeast-1 (Singapore)
   1. Name
   2. Email
2. Vercel analytic - https://vercel.com/docs/analytics/privacy-policy
3. Vercel speed insight - https://vercel.com/docs/speed-insights/privacy-policy

Also, need to update my CV and OG Image.

PlanetScale is dropping its free tier.

Candidates:

• Cloudflare D1
• Neon

Also, need to update

• Tech stack
• Privacy Statement

Poor Vercel integration

• No by environment setting
  

• Disable SSL by default

• Doesn't add pgbouncer=true by default to the Prisma connection string

related issue: vercel/next.js#60620

So far

• LinkedIn
• Twitter
• Facebook

The following are fine

• Reddit
• Discord

1. Framer Motion?

2. Will MUI Joy has animation integration similar to Material with React Transition Group?

Potential candidate: https://github.com/t3-oss/t3-env, but it only supports Zod for now. Though there is a discussion on bring my own validator t3-oss/t3-env#6

1. mui/material-ui#37932
   Impact: Timeline is shifted left in Experience

2. mui/material-ui#37934
   Impact: Client bundle size is super large when using named import

Step to reproduce

1. Fill in name, email, and subject
2. Click submit --> expect focused on the message field
3. Click submit again --> all fields are now showing error

e.g.

• https://www.monsieur-cuisine.com/
• https://www.viu.com/
• https://www.ha.org.hk/

Display on top of supporting documents with the same UI. Info needed:

1. Website/project name
2. Website/project link
3. Screenshot/image for thumbnail

Considerations

1. Should I read the above info through open graph data? Or should I store the values in Contentful?

Can I use both to eliminate the need of using React Query?

Potential blocker: checkVisitorLikedBlog must be called on client side.

• What library to use? Clerk? Auth.js?
• Logout UI?
• How to display the user is logged in?

Pros

• Smaller bundle size
• Has React Hook Form support (same as Zod)

Cons

• Much less popular
• Valibot doesn't have a monochrome branding icon yet, and it is hard for me to create one
  • Omit it from the Fun Fact section? Or
  • Make use of colorful branding icons in the Fun Fact section?
    • MUI: https://github.com/mui/material-ui/blob/master/docs/public/static/logo.svg
    • Next.js: https://vercel.com/design/brands#next-js
    • Prisma: https://github.com/prisma/presskit?tab=readme-ov-file
    • React: https://react.dev/ (from the hero section)
    • React Hook Form: https://react-hook-form.com/media
    • TypeScript: https://www.typescriptlang.org/branding/
    • Valibot: https://valibot.dev/ (from the header)
    • Contentful: https://brand.contentful.com/d/ZtLcqmtfPMdH/logos
    • EmailJS: https://www.emailjs.com/ (from the header)
    • ImprovMX: https://improvmx.com/ (from the header)
    • PlanetScale: https://planetscale.com/ (from the header)
    • Vercel: https://vercel.com/design/brands#vercel

High-level Plan

• Make use of PlanetScale to store the contact history

• Make use of Server Actions to submit the form

  • Reuse formSchema for server-side validation.

• Make use of @emailjs/nodejs to send email + auto reply.

Benefits

• Reduced client-side bundle size, since we no longer need to an additional library to handle form submission.
• Able to make use of progressive enhancement
  • https://react-hook-form.com/docs/useform/form
  • https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms
• EmailJS supports custom email template + auto-reply.

This may be helpful in integrating between the two
https://github.com/viktorbonino/radix-themes-tw

• This issue only happens on /blog/:slug page during client-side navigation.
• This issue is not reproducible when fully refreshing (F5 or Ctrl + F5) /blog/:slug, in which the query is only called once as expected.
• This issue is not reproducible in /guestbook, which also makes use of PPR.

Area affected

• Tech stack
• Projects contributed

https://lucide.dev/guide/packages/lucide-react

There are Issues in [email protected] to prevent this. Keep monitor for future releases

• vercel/geist-font#65
• vercel/geist-font#64

After changing the page from SSG to SSR, the TTFB is significantly impacted, I shall find a way to improve/workaround it.

Items to consider:

• Make use of Cache-Control, ref.
• Find the bottlenecks, is that due to API fetching or runtime rendering?
  • Seems to be caused by rendering.

Also use https://react.email/ to construct email

Wait for a new version, it is currently unusable as of v0.1.24.
https://www.npmjs.com/package/geist

mui/material-ui#39466

• Make use of Geist v1.1.0
• Install the variable font locally
  If the TTF file is not available, convert WOFF2 to TTF using an online converter
  https://github.com/vercel/geist-font/tree/main/packages/next/dist/fonts/geist-sans
• Update the CV to use the variable font
• Attempt to export to PDF and see whether the font-weight is rendered correctly