Holy Grail CSS layout with overflow

This morning – yep, a Sunday morning – I needed to implement an HTML page with the Holy Grail layout. A quick search gave me dozens of implementations, but all of them broke apart when you trew a lot of content into the sections. Being fond of the Flexbox model, I quickly came with an implementation that had all the needed overflow control:

This implementation is also modular: if you don’t need any of the panels, just remove them – the layout will stay working. Also, the satellite panels can have fixed dimensions, see the commented values for width and height.

The funny part is that min-height: 0. It’s there for Firefox; without it, the overflow goes wild. Other interesting thing is the absence of the height: 100% to html and body elements, it’s not needed.

Disabling the useless npm package-lock.json

Recently I’ve updated npm to version 5 while working in one of my projects. Much to my dismay, a “package-lock.json” file started to appear, and I finally understood why I’ve seen this file commited in some projects lately.

But since this feature is basically a horrible idea, I started searching a way to permanently disable it. It looks like I’m not the only one who dislikes this, because I found this excellent post, which points to the solution:

npm set package-lock false

And any more “package-lock.json” files that appear in front of me will be summarily deleted.

Visual Studio Code settings

This morning I was setting up Visual Studio Code at a Lubuntu virtual machine, and after saving the keyboard shortcuts, I opened my current editor to get the settings. Since some of them I consider essential, I decided to publish them here, for further reference.

Simple minimalist JavaScript metronome

These days, when practicing guitar, I needed a metronome. Whey you type “metronome” on Google Search, it actually brings out a functional metronome – however it has no keyboard shortcut keys. So I decided to write a simple metronome, with keyboard keys, from scratch, to suit my needs.

Knowing the imprecision of JavaScript’s setTimeout function, I implemented a timer that adjusts itself each call, thus having a fairly reliable precision.

The code is so simple I decided not to create a GitHub repository, so I’m just sharing the whole source code here:

Git amend updating date and time

When commiting code on Git, very often I realize I forgot some little detail right after I end the commit operation. This is very annoying. Fortunately, we have the amend command. Recently I found a very cool trick to use with amend command: updating the date and time of the commit together with amend.

So, with those in hand, I’m now using a nice alias on my ~/.bashrc file:

alias gitamend='git commit --amend --date="$(date -R)"'

And my own memory faults are now easily addressed.

Trying out Git Subtree

Currently I have 5 projects on my computer which use WinLamb library. So far I’ve been keeping copies of the library directory on each project; these directories are kept in sync with FreeFileSync Portable. Although this approach works, it’s very cumbersome.

Since each project is versioned as a Git repository, and WinLamb itself is a Git repository on GitHub, I started searching for an alternative, and I choose Subtree over Submodule. Following is a summary of the commands I needed to do on my Windows 7 x64, using Git portable v2.13.1:

1. Remote

Add a remote with the path to the repository of the shared project:

git remote add otherproj --no-tags git@github.com:username/otherproj.git

Or if a local project:

git remote add otherproj --no-tags d:/stuff/otherproj

You can view the remotes with:

git remote -v

2. Subtree

Run the Subtree command:

git subtree add --prefix otherproj otherproj master --squash

This will copy the library into the subdirectory and create a commit, with the hash in the message. It’s unnecessary, but you can provide a custom message for the subtree commit:

git subtree add --prefix otherproj otherproj master --squash -m "Subtreeing otherproj."

3. Updating

To update your project with new library code:

git subtree pull --prefix otherproj otherproj master --squash

This leads us to a nice bash function to our ~/.bashrc file:

function gitsubtreepull { git subtree pull --prefix $1 $1 master --squash; }

Which eases our life when updating our Subtree library:

gitsubtreepull otherproj

So far this approach seems to the better than the old-fashioned directory sync, although it still feels a bit “loose”. I’m still avoiding pushing code from the local repository to the shared library; if I change something, I just copy the code to there, then I update the library repository itself.

Note: beware amending a commit on the remote library. The next time you try to update the dependency, it’s likely to get lost, and you’ll have to remove the subtree and add it again.

After 4 years, SRTEd 1.3.0

So finally I released a new version of SRTEd, my own subtitles editor. Honestly, in these four years I didn’t see a better subtitle editor, I still think it’s the most user-friendly editor out there.

The interface didn’t improve much, but there are many bugfixes and minor UI adjusts. It took so long because I entirely rewrote it using my new Win32 library, which I expect to release as open source soon, together with an article explaining what it is and how to take the best out of it.

It can be downloaded from CNET or Softpedia.