Web Development [13]

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 gh-pages branch for deployment using Git worktrees. This method is efficient, clean, and helps keep your Git repository well-organized. Special thanks to Sangsoo Nam for his excellent guide, which inspired this process. Other platforms which use a build...

Create a new Vite project pnpm create vite@latest --template [react-swc|react|svelte] myapp cd myapp Copy over /src/ Delete files from src/* of the new project except for main.jsx and vite-env.d.ts. If the main app is not src/App.jsx, rename the import in src/main.jsx to the correct file. Delete following line from src/main.jsx import './index.css' Rename .js with JSX to .jsx If original files are...

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 rollup-plugin-postcss postcss svelte mkdir src Create src/index.js Create src/MyComponent.svelt...

Some tips on how to get back some more density with your menus and booksmarks. Edit about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true Create directory and file %appdata%\Mozilla\Firefox\Profiles\XXX.default-release\chrome\userChrome.css Some of the usual older methods of changing this no longer works since Firefox 91, including - Setting browser.compactmode.show to t...

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 $donotlog using ngx\http\map\_module. This is placed in the HTTP block. map $remoteaddr $logenable { "192.168.4.1" 0; "192.168.4.2" 0; "192.168.4.3" 0; "192.168.4.4" 0; default 1; } Re...

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 renew SSL certificates as normal. - Use a script like renew-letsencrypt-certificates...

TL;DR Protecting a web site with NGINX by using authentication server via a subrequest. - Use auth_request /auth in NGINX conf. - When user requests protected area, NGINX makes an internal request to /auth. If 200 is returned, protected contents are served. Anything else, NGINX responds with 401. - /auth is reverse proxied to Express app auth-server which handles authentication. Cookies are passed...

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 dep...

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 node_modules is only 4MB and 100 or so files. create-react-app on the other hand will download about 110 MB and 28,000 files! If you're working...

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 assets hosted on your own services. After some time spent trying to solve...

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 /.well-known/acme-challenge/ 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/letsencrypt from now on, and we’ll need to make sure this is set up wi...

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., mysql.yourdomain.com or localhost) - Database name - Username - Passwo...

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 processes an images, it strips the embed...