Category Archives: Original Content

ESNext: Relatively format time with Intl.RelativeTimeFormat

An ECMAScript Language Feature that just moved to Stage-4, and thus will be part of ES2020, is Intl.RelativeTimeFormat. It’s a way to format time in a relative manner – such as “10 minutes ago” or “in 3 quarters” – while also keeping a language into account. Stage-4? 💁‍♂️ The TC39 Committee has a 5 stage […]

Use a Github repository branch or commit as a dependency in package.json

Recently I needed to test a branch of a forked GitHub repository inside a project. Instead of cloning the fork and symlinking the package locally, I installed the remote dependency directly into the project. To achieve I used the following command: Using NPM: npm install user/repo.git#branchname Using Yarn: yarn add ssh://[email protected]:user/repo.git#branchname 💡 If you’re targeting […]

Turn a Twitter thread into an ad-free, single page with @threader_app

Now this is darn handy: ✨ Want to see some magic? 👀 Find a thread💬 Mention @threader_app with the word “compile”🤖 Get a reply from our bot with a link to the thread compiled in an article format — Threader (@threader_app) July 24, 2019 The tweet below for example … Because it keeps coming up, […]

Change the marker of a list to any character with list-style-type: <string>

Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string. Here’s a pen that demonstrates its behavior / usage: Let’s […]

Programmatically add scripts to package.json with npm-add-script

Recently I needed to automate the addition of the addition of a script defined in a package.json‘s scripts section. To do this I used npm-add-script (an older, but still functioning project), along with the aforementioned npx. For example, to add a script labelled start with the contents webpack-dev-server –config ./config/webpack.config.babel.js –env.MODE=development –open –hot, I use: […]

ESNext: Proposals to look forward to (Full Stack Europe)

I’m currently in Antwerp for the first edition of Full Stack Europe, “The conference for the whole team”. Earlier this week I guided a workshop “React from Scratch”. After a small Lightning Talk yesterday on “JavaScript Yellow”, I today did a full talk named “ESNext: Proposals to look forward to” With the yearly ECMAScript releases […]

Pure CSS Scroll Shadows (Vertical + Horizontal)

A long time ago (2012!), Lea Verou shared a way on how to add scrolling shadows to containers that needs scrolling. Using those shadows in a scroll container is a great UX thing, as they visually tell the user that the content is scrollable. 🐛🍏 The technique doesn’t play that nice on iOS though, due […]

Ship legacy JavaScript and CSS files in a Webpack Project with webpack-merge-and-include-globally

One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want […]