Blog

Setting up Better Auth in a Cloudflare environment comes with unique challenges. This repository and demo show how to configure an example setup.

• Better Auth
• Cloudflare Workers
• D1
• Kysely

I recently lost my prepaid OpenAI API credits and found it pretty frustrating. Since the expiration policy isn't clearly communicated, I wanted to offer a straightforward warning.

• AI

A brief list of authentication providers.

• Authentication Providers
• Notes

A brief list and notes on CSS component libraries.

• CSS Frameworks
• Notes

Notes on Markdown WYSIWYG-style editors, online tools, ...

• Markdown
• Notes

Notes on JavaScript frameworks.

• JavaScript Frameworks
• Notes

So, you decided to setup a home server on an old laptop. (Or on your VPS). Here is how to setup a Git repositories directory without sharing it with anyone but yourself. But why?

• Ubuntu Server 24.04.2 LTS
• Git

In this post, I'll try to adapt Framer Motion animation library to a layout without animations by converting standard HTML elements to their "motion.*" counterparts.

• CSS Animations
• React
• Framer Motion

Exit animations are not a React-specific problem. React only makes the problem worse, much like it does with everything else. Here, I'll simply point out the problem and provide the bare minimum solution for a plain React installation. Then, I'll try to implement similar solutions in a couple of different motion libraries.

• Exit Animations
• Unmount Animations
• React
• Framer Motion
• React Transition Group
• GSAP

Once upon a time, developing a static website was the job for most of us. Nowadays, some of our's job is to maintain the pipeline that exports this static website. In the previous chapters, we developed such a pipeline. (Actually, Gatsby and Netlify CMS did!) In this chapter, we'll prepare the static export and publish it with GitHub Pages.

• Netlify CMS
• Gatsby
• gatsby build
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 7
• Part 19
• Multipart
• 7/7

Dynamic websites and search engine optimization is an evergreen topic. I have no idea why we haven't resolved it already, but I believe it'll still be with us for some time. In this chapter, we'll add a React component to control page metadata with the well-known "React Helmet" component.

• Netlify CMS
• Gatsby
• React Helmet
• Seo
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 6
• Part 18
• Multipart
• 6/7

Every site needs a common place to store shared data across pages/components. To achieve this, we'll add a settings page to Netlify CMS but do not represent this page on the client-side. With that, we'll add a simple contact page and replace the Gatsby default 404 page with a custom one.

• Netlify CMS
• Gatsby
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 5
• Part 15, 16, 17
• Multipart
• 5/7

Selecting a CSS Framework, integrating it into the project pipeline, and using it properly with a team of developers, ... These are all challenging problems when it comes to styling. Tailwind CSS offers a competitive solution for all and easy set-up with Gatsby. In this chapter, we'll add Tailwind CSS and PostCSS to the project and style it with its rich range of utilities.

• Netlify CMS
• Gatsby
• Tailwind CSS
• PostCSS
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 4
• Part 13, 14
• Multipart
• 4/7

Managing responsive images in a project is both fun and pain. Thankfully, Gatsby has the "Gatsby Image Plugin" on top of the great "Sharp Node.js Image Processing Library". In this chapter, we'll add optimized and responsive images to the frontmatter data as well as the markdown body.

• Netlify CMS
• Gatsby
• Sharp
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 3
• Part 10, 11, 12
• Multipart
• 3/7

Gatsby framework offers multiple ways to create routes/pages. In this chapter, we'll use "Gatsby Node APIs" to create pages from markdown content that we'll have generated by Netlify CMS. We'll also add a "page template selecting logic" to auto-select custom templates for the pages created. Lastly, we'll split the UI by adding React components for the common parts.

• Netlify CMS
• Gatsby
• Gatsby Node APIs
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 2
• Part 4, 5, 6, 7, 8, 9
• Multipart
• 2/7

The CLI tools of the modern frameworks do an excellent job for the project initialization. However, they usually do a little bit more than what you need. In this chapter, I'll initialize a project with Gatsby and Netlify CMS manually.

• Netlify CMS
• Gatsby
• Going Local and Free with Gatsby and Netlify CMS
• Chapter 1
• Part 1, 2, 3
• Multipart
• 1/7

This post is an introduction to a 7-chapter blog series about building a statically-served website with an all-local admin panel with Netlify CMS and Gatsby.

• Netlify CMS
• Gatsby
• Jamstack
• Going Local and Free with Gatsby and Netlify CMS
• Intro
• GitHub Pages
• Multipart
• Intro

There are multiple ways to intercept network requests on different layers, and one way is to use native browser extension APIs. This post will focus on this method and a sample extension build by using that method.

• Request Interceptor
• Web Extension APIs

Servers are supposed to connect to the network with the plain-old copper cables. No doubt about that, but what if your home router stands on an unreachable position at your hallway and you have only 2 meters of network cable?

• ubuntu-server-20-04-1-lts
• Wi-Fi
• netplan
• network-manager

In this last part of the series, we'll compare the memory snapshots for a page that has the same content but different sizes of comment nodes.

• DOM
• Memory Usage
• Performance
• DOM Nodes are Expensive - Part 3
• Multipart
• 3/3

React needs some start and end markers on the updated textual content to render changed parts partially. This process is called demarcation and to do so, it uses basic DOM features. This post will show how different versions of React carry out this process.

• Virtual DOM
• React
• Demarcation
• DOM Nodes are Expensive - Part 2
• Multipart
• 2/3

In short, yes we can play with comments like any other HTML element. Both comments and empty spaces between HTML tags are DOM interfaces that inherit from traversable DOM interfaces.

• DOM
• HTML Comments
• DOM Nodes are Expensive - Part 1
• Multipart
• 1/3

This post is an opening for a 3-parts article series about DOM interfaces.

• DOM
• HTML Comments
• React Demarcation
• Multipart
• Intro

From requesting ads to counting them as impressions, Google Publisher Tag (GPT) Library triggers a set of events to inform page about current display ad slot statuses. This page is a preliminary reading for the demo page I built for this event lifecycle.

• GPT
• GPT's Event Lifecycle
• Display Ads

Site theme styleguide preview page with basic HTML elements, styles and etc..

• Theme Styleguide

A bit late welcome message for the blog.

• Welcome ✋