Chrome DevTools’ Command Menu

Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu. By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it. Chrome DevTools: UI: Command Menu → Umar Hansa’s Twitter Account is …

Changing SVG path data with CSS

Another thing I learned at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS. As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. …

Breaking Elements out of Their Containers in CSS

A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width (or “full bleed”), whilst the content remains centered. Your typical Medium …

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 …