DEV Community: Kaspars Dambis

CSS Minification for Server-Side Rendered Apps

Kaspars Dambis — Thu, 14 May 2020 08:21:17 +0000

With styles moving into components and critical styles being unique for each layout we no longer get the luxury of preparing and optimizing CSS during the build process (especially for server-side rendered applications). Optimizations needs to happen dynamically and have to be as fast even with a caching layer on top of it.

Most of the HTTP responses these days are compressed using GZIP which takes care of reducing the response body size during the transfer so I’m not completely sure why CSS and JS minification is considered that important in Google PageSpeed, for example.

Minification vs. Compression

I created this experiment to evaluate the impact of CSS minification over the resulting compressed version and the time it takes to do the minification.

For minfication I used the csso library and this “dummify” three rule regular expression string-replace as the fastest way to do some minification:

const dummyMinifyCss = (css) => {
  return css
    .replace(/[\n\r\t]/gi, ' ') // Line breaks to spaces.
    .replace(/\s+/gi, ' ') // Multiple spaces to single spaces.
    .replace(/(\s+?)?([\(\):;}{>])(\s+?)?/ig, '$2') // Remove spaces before and after :;{}()>
}

Note that I haven’t really tested this tiny minifier apart from this site and a few other sites using the Bootstrap CSS library. I’m using a PHP version of the same snippet with the Minit plugin on my blog.

Results

Here are the results for the Bootstrap CSS library:

	Size	Compressed	Minify Time
Original	198KB	26KB
Minified	158KB (-20%)	24KB	109ms
Dummified	166KB (-16%)	24KB	6ms (-94%)

The dummy minifier produced only a 4% larger CSS but 18 times faster than csso with the compressed CSS being the same! Note that different CSS files have different minification potential usually in the range of 5-35%.

Minifying CSS has very little impact over its compressed size so using a fast minifier that removes only the unnecessary whitespace is the quickest solution for server side rendered apps with dynamically generated CSS.

How to Bulk Update the “Tested up to” Version for WordPress Plugins

Kaspars Dambis — Thu, 02 Apr 2020 14:17:54 +0000

Here is a quick demo video of a bash script for updating the “Tested up to” version of multiple WordPress plugins at the same time. This solves the pain of updating the readme.txt file for all your plugins whenever a new version of WordPress is released.

p.s. Background music provided by my kids 🥁🥳🤣

Sensor Pilot: A Progressive Web App (PWA) for Bluetooth Sensors

Kaspars Dambis — Mon, 30 Dec 2019 12:05:35 +0000

Did you know that Chrome-based browsers (including on Android phones) can interact with Bluetooth Low Energy (LE) sensors and devices without any additional software using the Web Bluetooth API? Bundle that with the off-line features enabled by the progressive web apps (PWA) and we get a real application using pure web technologies and standards.

Visit the Sensor Pilot app →

I started playing with the Web Bluetooth API after getting the Xiaomi Mijia clock that also also measures air temperature and relative humidity:

Xiaomi Mijia clock with temperature and humidity sensor and Bluetooth LE interface.

Turns out that reading sensor values and updating the time is relatively simple as long as you can get your head around the Bluetooth LE communication patterns such as GATT services and characteristics.

Screenshots

Google Chrome web browser connected to Aranet4.

Web app view of the progressive web app connected to Aranet4.

PGP Subkeys for Keybase

Kaspars Dambis — Fri, 05 Jul 2019 11:37:31 +0000

The private parts of PGP keys (including subkeys) stored on Yubikey can’t be exported so you must always use the actual Yubikey to encrypt, decrypt, sign and verify messages. Subkeys stored outside the hardware key can simplify the day-to-day encryption and signing operations and can be revoked independently from the master key.

So I created a new subkey with encrypt and sign capabilities using the master key on the Yubikey and left them on the computer instead of saving to the Yubikey:

gpg --expert --edit-key FINGERPRINTOFYOURMASTERKEY

The --expert flag is required to enable subkeys with both encrypt and sign capabilities. Use gpg --edit-card to view the fingerprint of your master key with Yubikey plugged in.

Now create a new subkey:

addkey

Choose (8) RSA (set your own capabilities) and choose (S) Toggle the sign capability and (E) Toggle the encrypt capability, and set the key size to 4096 bits.

Be sure to set the expiration date to something after the expiration date of the encryption subkey already stored on the Yubikey (if there is one) or Keybase will fail to use the new encryption subkey when users encrypt messages using the online encryption form. Most PGP software will pick the subkey by its creation time and then by the expiration time.

Save the changes to your combined public key after creating the subkey by entering save.

Now send the updated public key to your preferred PGP key server:

$ gpg --send-keys FINGERPRINTOFYOURMASTERKEY

and to Keybase using their command-line tool:

$ keybase pgp update

It is impossible to upload the updated public key using their web UI unless you have another private key associated with the account. All of my private keys before creating this new subkey were stored on Yubikey so I had to use their CLI tool.

You can now export the private part of your new subkey. Find the fingerprint of the new subkey:

$ gpg --list-secret-keys --with-subkey-fingerprints
---------------------------------
sec> rsa4096 2015-01-01 [SC] [expires: 2021-01-01]
      A134BA0260D43F8EACC889D994F13532A319EA5D
      Card serial no. = 0001 011111111
uid [ultimate] Kaspars Dambis <hi@kaspars.net>
uid [ultimate] [jpeg image of size 1790]
ssb> rsa4096 2015-01-01 [E] [expires: 2021-01-01]
      D2A5D7D1B4D5A75BB161AC94FD4869EA5538D9E8
      Card serial no. = 0001 011111111
ssb> rsa4096 2015-01-01 [A] [expires: 2021-01-01]
      0A153C055A881B4524C04B3F03142B71D9CDD878
      Card serial no. = 0001 011111111
ssb rsa4096 2019-01-01 [SE] [expires: 2021-01-01]
      A58B88D1220599B82097CBA30C8C9DD50841A889

The master key is listed at the top with all the subkeys below it. Note that all subkeys stored on Yubikey have the > character after their ssb (secret subkey) identifier and the new one doesn’t have that. The fingerprint of the new subkey is A58B88D1220599B82097CBA30C8C9DD50841A889 so I use the following command to export the private key of the new subkey:

gpg --armor --export-secret-subkeys FINGERPRINTOFSUBKEY!

Note the exclamation mark ! at the end of the fingerprint — it is required to export the private key of just the particular subkey.

Pipe the output to pbcopy on macOS to copy it to the clipboard:

gpg --armor --export-secret-subkeys FINGERPRINTOFSUBKEY! | pbcopy

Go to your Keybase profile, click on edit next to your public key fingerprint and choose “Host an encrypted copy of my private key”, paste in the key and enter your Keybase password to encrypt the key for storage.

Now you’re able to encrypt and decrypt messages using the Keybase web UI or the command-line tool without having to use Yubikey.

Homebrew for Web Development

Kaspars Dambis — Tue, 01 Jan 2019 16:45:01 +0000

Homebrew is an awesome command-line software management solution for macOS (similar to MacPorts). It can install pretty much all software required for web development and keep it organised (under/usr/local) and updated with a single command.

Why is it awesome?

Installs packages quickly without having to download and run the installers via a web browser.
Builds everything from source (unless installing from cask) which makes it secure. Compares checksums of the download files against known references.
Places everything under /usr/local and doesn’t use root privileges for added security and limited system access.

Use It

Here is how to install some of the most popular packages. In most cases you just need to run brew install PACKAGENAME or brew cask install PACKAGENAME for packages that are distributed as binaries.

Development Tools

Install Node.js and npm:

brew install node

Install Composer:

brew install composer

Editors

Install Visual Studio Code:

brew cask install visual-studio-code

Install Atom:

brew cask install atom

Virtual Development Environments

Install VirtualBox:

brew cask install virtualbox

Install Vagrant:

brew cask install vagrant

Install Docker and Docker Compose:

brew install docker docker-compose

Useful Commands

Update Homebrew and the package information:

brew update

Update all installed packages:

brew upgrade

Remove old versions of packages:

brew cleanup

List all installed packages:

brew list

Laravel Homestead for WordPress Theme and Plugin Development

Kaspars Dambis — Sun, 09 Dec 2018 12:49:49 +0000

Turns out Laravel Homestead is almost exactly the development environment I was looking for — it can be added as a Composer dependancy to any PHP project and configured using a simple Yaml file. The host machine needs only Vagrant and VirtualBox.

tl;dr: See this pull request for how I added Homestead to the Widget Context plugin.

How it Works

First, we add a very minimal Vagrantfile to the project root which reads the Homestead’s configuration from Homestead.yaml (could be named anything) and triggers the provisioning logic in scripts/homestead.rb using the supplied configuration.

We install WordPress a development dependancy in package.json and configured it from the same Vagrantfile using an inline shell script (and WP-CLI which comes bundled with Homestead):

config.vm.provision "shell",
    inline: "wp config create",
    privileged: false

and use a dedicated wp-cli.yaml which defines the database access parameters and credentials:

path: /home/vagrant/code

config create:
  dbname: homestead
  dbuser: homestead
  dbpass: secret

which are used as defaults during wp config create.

Note that wp-cli.yaml lives within our theme directory so we specify the WP_CLI_CONFIG_PATH environment variable in Homestead.yaml which points to wp-cli.yaml inside the virtual environment.

Notes

Laravel Homestead runs the provision scripts as root inside the virtual machine so the regular non-privileged vagrant user can’t write to disk which prevents us from downloading and setting up WordPress from within the virtual environment. This can probably be adjusted with a few additional lines of configuration in Homestead.yaml.

Composer, Travis and Bash Source

Kaspars Dambis — Wed, 30 May 2018 11:23:31 +0000

Today I learned that Composer uses the Symphony Process component for executing the shell commands defined as Composer scripts. This internally calls proc_open() which “opens a process by creating a bidirectional pipe, forking, and invoking the shell”.

I had this script failing on a Travis build with Ubuntu 14.04.5 LTS and PHP 5.6:

{ 
  "scripts": {
    "test": "source scripts/test.sh"
  }
}

with the following error:

sh: 1: source: not found

Turns out that /bin/sh on Ubuntu Trusty is a symlink to /bin/dash:

$ ls -lah /bin/sh lrwxrwxrwx 1 root root 4 Feb 19 2014 /bin/sh -\> dash

And the source command is a bash built-in which simply isn’t available in dash. The solution is to replace all instances of source something.sh with . something.sh (note the space between the dot and the script filename).

Notes on Webpack Hot Module Replacement

Kaspars Dambis — Tue, 27 Mar 2018 14:57:54 +0000

It took me a few days to read through the relevant parts of the webpack and webpack-dev-server source code and figure out how to enable Webpack Hot Module Replacement for any project that doesn’t use the webpack-dev-server for serving the JS bundle. I wanted to use HMR with Vagrant running Docker for a local WordPress theme development workflow.

How Does It Work?

The main requirement for HMR is for the browser to receive notifications when a new bundle file is built as you edit the source files. Unfortunately, the default notification logic in webpack/dev-server.js relies on the native Node.js events instead of the websocket messages sent by the webpack-dev-server.

Therefore, HMR will never work if the bundle file is not server by the same webpack-dev-server which also watches for the file changes and triggers the builds.

Native Node Events and Websockets

Fortunately, the webpack-dev-server also starts a websocket server at /sockjs-node and sends out a few messages to the listening clients to indicate that it will report changes related to HMR.

So your bundled script needs only two things to work with the data coming from the websocket server:

a websocket client that acts on the incoming messages, and
a hot module replacement logic that can apply the incoming code patches.

The webpack-dev-server comes with a websocket client webpack-dev-server/client which is injected into your bundle automatically if you enable --hot and don’t explicitly set --inline to false. The websocket client parses all incoming messages from the dev server and triggers a native Node.js event:

const hotEmitter = require('webpack/hot/emitter');
hotEmitter.emit('webpackHotUpdate', currentHash);

and also sends out a websocket message:

if (typeof self !== 'undefined' && self.window) {
  // broadcast update to window
  self.postMessage('webpackHotUpdate${currentHash}', '*');
}

However, only the native Node.js event webpackHotUpdate is used by the HMR client side logic in webpack/hot/dev-server to apply the patch. This is why your bundle will never receive notifications about HMR events if it’s not served by the webpack-dev-server because native Node events are not supported outside the Node environment.

How to Fix It?

Clone the HMR client side logic in webpack/hot/dev-server and make it listen for webpackHotUpdate messages on a websocket instead of the native node events.

window.addEventListener('message', (e) => {
  if (typeof e.data === 'string' && e.data.includes('webpackHotUpdate')) {
    var hmrHash = e.data.replace('webpackHotUpdate', '');
    // Run check() from webpack/hot/dev-server.js
  }
});

Poker 3 Mechanical Keyboard for Mac

Kaspars Dambis — Tue, 15 Aug 2017 07:20:07 +0000

Recently I got my first mechanical keyboard Poker 3 with the Cherry MX Brown switches. Here is how I configured the keyboard to match the familiar Mac layout:

Use FN, PN, Ctrl and Shift as arrow keys. You’ll have to learn to use the left Shift for capitalising letters which I’m still getting used to.
Map CapsLock to FN because FN is now the left arrow key.
Map left Alt to Command ⌘.
Map left Win to Option ⌥.

Keyboard Layers

The keyboard has three programmable layouts or layers. I’m using layer 3 (red LED) to store this configuration. Use FN + > to switch to layer 3. Note that the default layer 1 can’t be configured.

Enable the Arrow Keys

Next we want to turn CapsLock into FN because FN will become the left arrow key. Switch the 3rd dip switch on the back of the keyboard to enable this.

Press left Win, Space + right Alt to turn right FN (left), PN (down), Shift (up) and Ctrl (right) into permanent arrow keys. Please note that this setting isn’t preserved between keyboard reboots.

Swap Win/Cmd and Alt

Finally we need to switch the left Win and Alt keys to match the Mac layout where the Win or Command keys are right next to the spacebar. Enter the programming mode by pressing FN + right Ctrl:

Press Alt then Win then PN to set the Command key.
Press Win then Alt then PN to set the Option key.

I used this Pok3r layout guide for reference.