Fatih Kalifa

katla

Indonesian version of Wordle

vite-plugin-sloth

Fresh take on static site generation, using HTML-first approach to build website. Powered by ⚡️ Vite

text-fragments

Text Fragments and Selection utilities

Authoring Custom Elements in a Next.js App

The Intersection of Two Different Ecosystem

Since its creation, my blog has only been a React-exclusive app, which means it only renders a React component. How I store the blog post has changed a lot—from static HTML in a hosted database to markdown files in the same git repository—but the rendering engine stays largely the same.

Unlike most React powered blog, I don't use MDX. I write plain markdown files, but internally I call it MDC.

Declarative Dynamic Pattern using CSS Paint API

Learn what Houdini and CSS Paint API is and how to generate dynamic pattern declaratively in CSS

How We Build Traveloka Web Performance Culture

Join talk with Ryan (@Ryan_NIxon_S) about our journey in building performance culture and a quick glance at what kind of optimization we have done to improve web performance

Dark Mode on the Web

UX, DX and Technical Exploration For Inclusive Dark Mode

For some people, dark mode is aesthetically more pleasing. On the other hand, there's a group of people (including me) that likes to read at night under dim lighting, or even in total darkness. Having the option to use dark theme reduces strain in the eyes and makes it more pleasant to read at. I personally doesn't care that much about the aesthetic aspect of the dark mode. I think of it as an accessibility feature.

Enhance TypeScript Code Samples with Compiler Diagnostic

Build-time Type Annotation and Syntax Highlighting using Twoslash and Shiki

The main reason I call my blog project Paper is because I want it to be a pleasant reading platform. I enjoy my kindle but reading from real book and actual paper feels like a better experience for me. When I built my blog platform, I kept thinking how to improve digital reading experience to compensate for lack of paper-like feeling for both hand and eyes.

theme-in-css

Type-safe CSS custom properties (CSS variables) for theming purpose

oge

Page metadata as a service

Building progressively-enhanced iPadOS hover style in web

Using framer-motion for Animation & Transition

Share latest post automatically in Twitter using GitHub Actions

Utilizing GitHub Actions Path Filter and CLI Composition