Aspect Ratios in CSS are a Hack

UPDATE 2020.11.30: Aspect Ratios in CSS are no longer a hack, thanks to the new aspect-ratio CSS property! Right now I’m in Amsterdam attending CSS Day (my fourth time already!). Earlier this morning Bert Bos and Håkon Wium Lie – yes, the inventors of CSS – were on stage reflecting on the first days of …

Nicer CSS underlines with text-decoration-skip-ink: auto; (previously text-decoration-skip: ink;)

When applying text-decoration: underline; on an element, the line drawn will cross descenders. Using text-decoration-skip one can control the behavior of the underline The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also …

runes – Unicode-aware JS string splitting with full Emoji support

At Small Town Heroes I’m currently working on a newsreader app built using React Native. On Android (even 7.1.1) we noticed this weird issue where some emojis would render incorrectly when we were applying styling on it using index-based ranges: the range seemed to be off by one, splitting the emoji into its separate bytes. …

Using react-devtools with React Native

The “React Developer Tools” is a very handy browser extension which lets inspect and manipulate the React component hierarchy along with their props and state. There’s also a standalone version, to be used with React Native. To use it, install it as a project dependency: npm install –save-dev react-devtools And then adjust the scripts section …

Fix for the Android Emulator (Android Simulator) crashing during launch

UPDATE 2017.08.03: This should be fixed with the release of HAXM 6.1.1. Make sure you’re running the latest version of Android Studio On a recent project I was working on, I wasn’t able to start the Android Emulator/Simulator anymore from within Android Studio. Every time I launched it from Android Studio it would start, but …

Launching the Android Emulator from the Command Line

I’m not sure which update exactly broke it, but recently I got this when trying to launch the Android Emulator from the CLI: $ emulator -list-avds Nexus_5X_API_25 $ emulator -avd Nexus_5X_API_25 [140735953220544]:ERROR:./android/qt/qt_setup.cpp:28:Qt library not found at ../emulator/lib64/qt/lib Could not launch ‘../emulator/qemu/darwin-x86_64/qemu-system-i386′: No such file or directory Apparently there’s some relative path linking happening, which of …

Using Subsurface with a Suunto Vyper on macOS (OS X)

Profile of one of the dives I did in the Maldives, displayed using Subsurface Download the Virtual COM Port Drivers and reboot your iDevice. After that Subsurface should recognise your Suunto Vyper. As a diver one logs all his/her dives into a paper logbook. In the paper logbook one generally notes things like the gear …

Driving Navdy, a (short) Review

Back in August 2014 I pre-ordered a Navdy. Last week, 2 years later than expected, my unit finally arrived. Was this long wait worth the while? YES! Navdy? The Navdy is an aftermarket “Head-Up Display” for your car. Where your Bluetooth-enabled car radio acts as an audio extension to your smartphone, the Navdy acts as …

ES6 ES2015: Easily remove duplicates from an Array

Say you have a JavaScript Array containing duplicate values. By creating a Set – which only stores unique values (primitive values or object references) – and then spreading that Set into a new Array you can easily dedupe the given Array: // Array with duplicates const arr = [7, 3, 1, 3, 3, 7]; // …

Why does Chrome show a T-Rex when it’s offline?

With touching the topic “offline” in the previous post, I was reminded of the T-Rex that Chrome shows when it’s offline. Most of us think it’s just a fun little pixel dinosaur which acts as facade for a game you can play whilst there’s no active internet connection, but there’s more to it. The T-Rex …