lysender

// Leetcode problem: https://leetcode.com/problems/sum-of-left-leaves/
// Easy but difficult when Rust's Rc<RefCell<T>> is used for rust beginners

// Definition for a binary tree node.
// #[derive(Debug, PartialEq, Eq)]
// pub struct TreeNode {
//   pub val: i32,
//   pub left: Option<Rc<RefCell<TreeNode>>>,
//   pub right: Option<Rc<RefCell<TreeNode>>>,
// }

lysender

use std::{time::Instant};

fn main() {
    solution_sum_of_square_numbers_bs();
}

// Problem: https://leetcode.com/problems/sum-of-square-numbers/
// Solution: https://leetcode.com/problems/sum-of-square-numbers/solutions/4132153/rust-solution-using-binary-search/
// Sources:
// - https://www.geeksforgeeks.org/check-whether-number-can-represented-sum-two-squares/

lysender

I have a bunch of photos from my old iPad. I have a script that create thumbnail photos from these images.

The goal is to resize the image into 150x125 and crop if necessary to achieve the result.

const options: ResizeOptions = {
  width: 150,
  height: 125,
  fit: 'cover',
}

lysender

Still a newbie to HTMX.

I was writing some form submit interaction and realized that HTMX won't swap/render if the HTTP status code is not 2xx.

For 404, 500 or 503 errors, I think it's fair enough.

For my use case, I'm returning error 400 or 422 for validation errors. I'm returning the form back with some error decorations for example.

According to the docs, I can change that behavior.

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

lysender

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

lysender

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.

lysender

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"

lysender

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">

lysender

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.