Leonel lysender

Been doing some HTMX lately using ExpressJS backend.

Unfortunately, my CSS files are not automatically minified and bundled for the browser.

Using lightningcss, a blazingly fast tool written in rust, we can achieve some minifications and combining using some NodeJS scripts.

Install lightningcss in your project

npm i -D lightningcss lightningcss-cli

Been doing some HTMX lately using ExpressJS backend.

Unfortunately, my JS files are not automatically minified and bundled for the browser.

Using swc - Speedy Web Compiler, a blazingly fast tool written in rust, we can achieve some minifications and combining using some NodeJS scripts.

Install swc in your project

npm i -D @swc/cli @swc/core

How to toggle hamburger menu on/off in hyperscript?

I used this JavaScript solution earlier - https://gist.github.com/lysender/bc9800e6350e1ccfab3c6ce6934b1cd2

However, I realized it is way more simple to just use hyperscript.

What it does is toggle the is-active class on two divs related to the navigation menu.

No need to write the complicated JavaScript code but we do need to include the hyperscript JavaScript file in our page.

Problem: I want blazingly fast page load but my content may take some time to load.

The page may actually be fast but the content may include calling a service that may take some time to respond or worst, fail.

Solution: Load the full page (HTML, CSS, JS) without the slow content first. Load the slow content later on page load.

<div
  class="albums-container"
 hx-get="/album-listing"

How to toggle hamburger menu on/off in HTMX?

Why bother using HTMX, just use JavaScript!

Here is my navigation template, written in EJS using Bulma CSS framework. It shows a hamburger menu when viewed in a mobile browser. Without JavaScript, it won't expand or collapse the menu.

<nav class="navbar is-dark" role="navigation" aria-label="main navigation">

Rename all files in current directory and sub-directories in certain pattern

I have several photos compiled in directories. However, these photos were processed by some old application and don't have file name extensions.

I would just assume that they are all JPG files so I want to rename all files to have the .jpg extension.

Will use the find and exec combination.

First, let's test it with a safer echo command. The command simply echos for original filename and the desired filename.

Change permissions of all files in a directory including files inside sub-directories

I wanted to ensure that all files has the 644 permissions but I don't want the directories to have the same permissions.

First, I'll run it with ls -l command to avoid accidental command execution.

find ./ -type f -name "*" -exec ls -l "{}" \;

Sauces:

Solution: make index a string (because strings, in essence, have infinite "arbitrary precision"). Or if you use an int, increment index by 100 instead of 1.

The performance problem is this: there is no "in between" values between two sorted items.

	# Replace get with delete at the end
	kubectl get pods -n jx-staging \| grep -i shutdown \| awk '{print $1}' \| xargs -n1 kubectl get pod -n jx-staging