Blog
Here is the blog, mostly technical, randomly selected topics.
Blog posts 👇 or back to the Home!
- Setting up Better Auth with Cloudflare Workers + D1 + Kysely
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
- OpenAI API Credits Expire After 1 Year Without Proper Notification
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
- Authentication Providers - Notes
A brief list of authentication providers.
- Authentication Providers
- Notes
- CSS Frameworks - Notes
A brief list and notes on CSS component libraries.
- CSS Frameworks
- Notes
- Markdown - Notes
Notes on Markdown WYSIWYG-style editors, online tools, ...
- Markdown
- Notes
- JavaScript Frameworks - Notes
Notes on JavaScript frameworks.
- JavaScript Frameworks
- Notes
- Setting Up Git Repositories in `/srv/` Directory on Ubuntu Server 24.04.2 LTS
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
- A CSS Animations Demo with React & Framer Motion
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/Unmount Animations with React
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
- Preparing for the Gatsby & Netlify CMS Production Build⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Adding an "SEO" Component in Gatsby⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Adding "Settings", "Contact" and "404" Pages in Gatsby⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Styling Gatsby Site with Tailwind CSS and PostCSS Processor⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Working with Image Paths in the Markdown Content in Gatsby⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Building Up the Gatsby Project with Markdown Content⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Setting up a Gatsby & Netlify CMS Project⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Going Local and Free with Gatsby & Netlify CMS⚠️ React v17 + Gatsby v4 + Netlify CMS
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
- Intercepting Network Requests by a Browser Extension⚠️ Manifest V3 might outdate this post.
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
- Enabling WiFi Connection on Ubuntu Server 20.04.1 LTS⚠️ This post might be outdated!
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
- Memory Usage of Extra DOM Nodes
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's Demarcation Methods
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
- Can We Uncomment HTML Comments with JavaScript?
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
- DOM Nodes are Expensive - A Prelude
This post is an opening for a 3-parts article series about DOM interfaces.
- DOM
- HTML Comments
- React Demarcation
- Multipart
- Intro
- GPT's Event Lifecycle⚠️ This post might be outdated!
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
- Theme Styleguide
Site theme styleguide preview page with basic HTML elements, styles and etc..
- Theme Styleguide
- A Late Welcome
A bit late welcome message for the blog.
- Welcome ✋