Nico's Blog

I stumbled upon something called a [sparse array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays) in the MDN web docs.

There's a new CSS tool called [Open Props](https://open-props.style), an open-source collection of CSS variables.

I just found out about this neat extension for VS Code, [Console Ninja](https://console-ninja.com).

A phenomenon that's endlessly fascinating...

As a web and iOS developer, I often discover valuable features in PostgreSQL that can greatly improve our applications.

When designing databases for applications that handle money transactions, choosing the right data type for currency values is crucial.

React has been around for a while and has been adopted for many kinds of apps, not only web apps but also mobile native apps.

I found a blog post that explains [how to make Next.js routing more type-safe](https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety).

Someone on Twitter asked what the following TypeScript custom generic actually does: ```typescript type Identity = T extends object ?

The `satisfies` operator in TypeScript [has been available since TypeScript 4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator), but I hadn't had the chance to use it in my production websites until a

Do you consider your code's fate when you leave a project?

[Ryan Florence of Remix tweeted](https://twitter.com/ryanflorence/status/1746255053357555930) about how to close a dialog on success or to display some error messages after submitting a form with Remix's [useFetcher](https://remix.run/docs/en/main/hooks/u…

Previously [I mentioned about `waitUntil` function in Next.js](/blog/wait-until-nextjs-vercel) and gave an example of updating inventory views in an e-commerce website.

Have you ever pondered a simple decision, only to realize it's more complex than you thought?

In the fast-paced world of web development, optimizing user experience is key.

!

!

> A complex system that works is invariably found to have evolved from a simple system that worked.

In the modern web, where resources and data are abundant, efficiency is key.

There's this thing I've experienced **so many times**, and maybe you can relate.

In the world of React development, handling HTML content requires a careful approach, particularly when it comes to injecting raw HTML into the DOM.

!

JavaScript is a language full of nuances and subtleties, and one of the most intriguing aspects involves the `eval` function.

!

Recently, a developer's tweet sparked a debate about Next.js's approach to simplifying its API, particularly regarding the [headers](https://nextjs.org/docs/app/api-reference/functions/headers#headers) and [cookies](https://nextjs.org/docs/app/api-referen…

Several months back, I experienced a sudden crash in [my pull request on the Monika project](https://github.com/hyperjumptech/monika/pull/1165), which caught my team off guard during the PR review, as noted in this [issue comment](https://github.com/hyper…

Last week in one of our projects in Hyperjump, we discovered a [React hydration error](https://nextjs.org/docs/messages/react-hydration-error) in one of our pull request changes.

Here's one thing you must always remember when making website with Next.js with [App Router](https://nextjs.org/docs/app).

Recently there's some people on [Twitter](https://twitter.com/2co_p) sharing a free Mac app that can compress video significantly while maintaining quality.

!

!

Few years ago I made this little project to solve my own problem.

!

Welcome to the cutting-edge world of web development, where Next.js continues to push the boundaries!

Today I received a pull request, like the following ```typescript const SomeComponent = () => { const [isStatusPageModalOpen, setIsStatusPageModalOpen] = useState(false) const [isEditProbeModalOpen, setIsEditProbeModalOpen] = useState(false) const [isDele…

A PR was made like the following ```typescript import { useRouter } from 'next/router'; const SomeComponent = () => { const router = useRouter() return ( { router.push(`/link/to/another/page`) }>Go to somewhere ) } ``` Few problems with that code: 1.

Person: - what does 'discriminated union' mean?

A PR was made, something like this: ```typescript // next.js getServerSideProps export const getServerSideProps = async (ctx) => { const { valid, event } = await isValidEvent({ organizationSlug, projectSlug, probeSlug, eventSlug, userID: ctx.user?.

A PR was made, something like this: ```typescript const data = [ { question: 'How are you?'

!

!

!

--- **UPDATE May 11, 2020** As of version 9.4, [NextJS finally has proper environment variables support](https://nextjs.org/blog/next-9-4#new-environment-variables-support).

# Why write tests As a software developer, it is always exciting to see the code I wrote runs on the desktop browser or on the iPhone/android devices.

!

!

At the end of 2018, I summarized the year as [the year of gaming and traveling for me](https://nico.fyi/articles/look-back-2018/).

Few days ago, someone tweeted about this online document from Apple called [Apple Style Guide](https://help.apple.com/applestyleguide/).

# Scenario Say we need to make a React component that has following requirements: - Fetch data from network when it's first mounted and show the fetched data if succeeds - Show loading indicator while fetching - Show error message if fetch fails - Show a…

!