Web Development [12]

Deploying a React project to GitHub Pages can be quite straightforward once you know the steps. In this post, I'll guide you through setting up a branch for deployment using Git worktrees. This method is efficient, clean, and helps keep your Git repository well-organized. Special thanks to [Sangsoo Nam](https://sangsoonam.github.io/2019/02/08/using-git-worktree-to-deploy-github-pages.h...

Create a new Vite project pnpm create vite@latest --template [react-swc|react|svelte] myapp cd myapp Copy over Delete files from of the new project except for and . If the main app is not , rename the import in to the correct file. Delete following line from import './index.css' Rename `....

Using pnpm, Svelte, rollup.js, create a Svelte component module, test it, and publish to npm. This is a quick cheat sheet for developers without the distractions. Modify as needed. Create component mkdir my-svelte-component pnpm init pnpm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte...

Here are some examples on how to configure NGINX to conditionally log requests based on certain conditions like remote IP address, URI etc by using the map module and variables. Conditional logging Create a variable using ngx\http\map\_module. This is placed in...

TL;DR - Use internet facing domain on an internal network, I normally use subdomains for this. - Domain must have a DNS A record pointing to a public facing web server so Let's Encrypt can find it for the HTTP-01 challenge. This can be served as an empty site or just as a 404 response. - Remote VPS uses certbot to re...

TL;DR Protecting a web site with NGINX by using authentication server via a subrequest. - Use in NGINX conf. - When user requests protected area, NGINX makes an internal request to . If 201 is returned, protected contents are served. Anything else, NGINX responds w...

I've been comparing some load speeds from a variety of different web hosting companies. I started out by trying out the free tier of Netlify to compare how the performance is compared with my usual Vultr VPS service. After seeing that the Netlify load times was almost 10x longer than from the VPS from Australia, I decided to investigate further with some testing. I do like the CI and automatic d...

Here's how to get started with a simple hello world React Javascript app using Parcel. We're going to be using a global install of Parcel here. Install Parcel Install parcel globally npm i -g parcel-bundler The advantage if you install it globally is that is only 4MB and 100 or so files. on the other hand will download about...

Don’t use Alibaba’s CDN! By default, when using the Ant Design ReactJS UI framework, icon fonts are loaded from China’s Alibaba Cloud CDN. This may be undesirable behaviour. You might prefer to have a web site that does not call home when you load a page, or leak IP addresses to a third party. You probably just want all your asse...

Introduction This is one (of many) methods to speed up creating free SSL certificates with Let's Encrypt. It configures the NGINX web server to serve for each domain. This path is used by the webroot plugin. We’ll need to make a directory to servie the challenge files from, we’ll call this `/home/www/letsenc...

This article provides a comprehensive guide, or more aptly, a set of personal notes, on how to migrate a WordPress blog from one domain name to another. This process is also applicable when transitioning from one web host to another. Initially, you need to gather some details about your old database: - Database host name (e.g., or ) - Database name - Username -...

I was working on a web site that used TimThumb, and ran into an issue. TimThumb uses the PHP GD library, which does not support color profiles. It is a very common library used in WordPress themes. This can be an issue with web sites which are for photographers, as sometimes, it may be desired to have embedded color profiles in thumbnails. But when timthumb...