Posts - Web Development
Converting React or Svelte project from Parcel to Vite
Create a new Vite project 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 Rename with JSX to If original files are , rename to if they contain JSX. Copy and update static files Copy… Read more
Create a Svelte component module
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 Create Create Edit Create Add other useful files as desired Testing Test locally in new Svelte… Read more
NGINX conditional logging and responses
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 the HTTP block. Regexes can also be… Read more
Using Let's Encrypt with internal web servers (without DNS challenge)
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… Read more
Protecting web sites with NGINX subrequest authentication
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 with 401. is reverse proxied to… Read more
Netlify vs Vultr VPS hosting speed from Australia
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… Read more
Start a simple React JS app with Parcel bundler
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 The advantage if you install it globally is that is only 4MB and 100 or so files. on the other hand will download… Read more
Loading icon fonts locally when using Ant Design React framework (instead of AliCDN)
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… Read more
Set up Let’s Encrypt with NGINX web server with certbot webroot plugin
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 from… Read more
Moving a WordPress blog across domains using the shell
Here’s a rundown, or more accurately a set of personal notes I made, for moving a WordPress blog from one domain name to another. This will also work when moving from one web host to another. First you’ll need to know some details of your old database: database host name, e.g or database name… Read more
How to get ICC profiles working with TimThumb
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… Read more