The most dangerous person in Silicon Valley

No, not The Drive-By Manager but (those who claim to be) The Senior Software Engineer: There are lots of people with the title but not the skills. They are hard to spot because they’re definitely not junior but they’re not really senior either. They’re mid-level engineers who have been convinced they’re senior by the ecosystem. …

You don’t need JavaScript

CSS is powerful, you can do a lot of things without JavaScript. A quite commonly known example is usage of the Adjacent Sibling Selector (viz. +) to build custom radio buttons/checkboxes or tab interfaces. See the Pen CSS Custom Checkboxes / Radio Buttons by Bramus! (@bramus) on CodePen. With a few more CSS tricks such as …

Improving readability using array_filter

Great trick by Freek Van der Herten: instead of selectively adding fields onto an array after having verified them to not being falsy – resulting in lots of if blocks in the code – it’s actually a lot easier/readable to fill the array first and then successively filter out the empty values using array_filter. When …

Visualising all Olympic 100-meter dash winners since 1896

Great visualisation by The New York Times: How does Bolt compare to the full Olympic field in the 100-meter dash – not just this year, but against every Olympic medalist since 1896? To answer that question, we created a massive (and imaginary) track with 88 lanes – one for every medal awarded in the 100-meter …

React Storybook – Isolate your React UI Component development from the main app

With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components. Oh, it also plays nice with create-react-app. React Storybook →Introducing React Storybook →React Storybooks meets Create React App →

Is Houdini ready yet‽

“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. …

Lost your iPhone? Be extra alert for upcoming identity theft attempts.

Joonas Kiminki got his iPhone stolen. Twelve days later, after immediately having marked it as lost in Find my iPhone, he got a text and email saying his iPhone was found with a link to see the phone’s location. I of course rushed to the address on the link and then started typing my credentials, …

AOS – Animate on Scroll

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on your HTML elements, you can define which animation to use, what timing to use, etc. …

JavaScript Kinetic Scrolling

In a recent project I implemented Kinetic Scrolling (aka Momentum Scrolling, aka Inertia Scrolling). For this I based myself upon the set of demos and articles by Ariya Hidayat. The article series starts at basic drag-and-scrolling, and then continues to momentum scrolling, and so forth. Even though the content is over 3 years old, it …

Transform HTML Content to Apple News / Google AMP / Facebook Instant Articles with Distro

Automatically transform article HTML for third-party platforms such as Facebook Instant Articles, Apple News, Google AMP “Just” make a curl request … curl –data " <h1>Distro.Mic example</h1> <p>Text and media embed</p> <iframe src=\"https://www.youtube.com/embed/M7lc1UVf-VE\"></iframe> " https://distro.mic.com/1.0/format?output=apple-news … and the content is “translated” to the specified format: { "article": [{ "text": "Distro.Mic example", "additions": [], "inlineTextStyles": [], …