Hussien Liban hussienliban

preface: Posting these online since it sounds like these notes are somewhat interesting based on a few folks I've shared with. These are semi-rough notes that I basically wrote for myself in case I ever needed to revisit this fix, so keep that in mind.

I recently bought an LG ULTRAGEAR monitor secondhand off of a coworker. I really love it and it's been great so far, but I ran into some minor issues with it in Linux. It works great on both Mac and Windows, but on Linux it displays just a black panel until I use the second monitor to go in and reduce the refresh rate down to 60 Hz.

This has worked decent so far but there's some issues:

It doesn't work while linux is booting up. The motherboards boot sequence is visible just fine, but as soon as control is handed over to Linux and I'd normally see a splash screen while I'm waiting for my login window, I see nothing.
It doesn't work on the login screen. This would be fine if login consistently worked on my second screen, but I need to manually switch

How to setup a practically free CDN using Backblaze B2 and Cloudflare

⚠️ Note 2023-01-21
Some things have changed since I originally wrote this in 2016. I have updated a few minor details, and the advice is still broadly the same, but there are some new Cloudflare features you can (and should) take advantage of. In particular, pay attention to Trevor Stevens' comment here from 22 January 2022, and Matt Stenson's useful caching advice. In addition, Backblaze, with whom Cloudflare are a Bandwidth Alliance partner, have published their own guide detailing how to use Cloudflare's Web Workers to cache content from B2 private buckets. That is worth reading,

Using Git Commit Message Templates to Write Better Commit Messages

The always enthusiastic and knowledgeable mr. @jasaltvik shared with our team an article on writing (good) Git commit messages: How to Write a Git Commit Message. This excellent article explains why good Git commit messages are important, and explains what constitutes a good commit message. I wholeheartedly agree with what @cbeams writes in his article. (Have you read it yet? If not, go read it now. I'll wait.) It's sensible stuff. So I decided to start following the

FFmpeg cheat sheet

A list of useful commands for the FFmpeg command line tool.

Download FFmpeg: https://www.ffmpeg.org/download.html

Full documentation: https://www.ffmpeg.org/ffmpeg.html

Basic conversion

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

	// assets/js/app.js

	// ...
	import Pickr from "./pickr"

	const hooks = {
	Pickr
	}

	// ...

	// Sobel Edge Detection Filter
	// GLSL Fragment Shader
	// Implementation by Patrick Hebron

	uniform sampler2D texture;
	uniform float width;
	uniform float height;

	void make_kernel(inout vec4 n[9], sampler2D tex, vec2 coord)
	{

	function getGraphicsCardName() {
	var canvas = document.createElement("canvas");
	var gl = canvas.getContext("experimental-webgl") \|\| canvas.getContext("webgl");

	if (!gl) {
	return "Unknow";
	}

	var ext = gl.getExtension("WEBGL_debug_renderer_info");
	if (!ext) {

	// returns an array of localStorage items in key/value pairs based on a query parameter
	// returns all localStorage items if query isn't specified
	// query can be a string or a RegExp object

	function findLocalItems (query) {
	var i, results = [];
	for (i in localStorage) {
	if (localStorage.hasOwnProperty(i)) {
	if (i.match(query) \|\| (!query && typeof i === 'string')) {
	value = JSON.parse(localStorage.getItem(i));