A rather geeky/technical weblog, est. 2001, by Bramus
The past week I took a closer look at the several options on how to run a PHP app with Docker. In the past I’ve ran a few pre-built containers, but now I wanted to truly get to the bottom of it all as I don’t always need a full blown container with all extensions, …
Continue reading “Run a PHP app in a Docker Container (Notes)”
In this post I’ll cover how to add Dark Mode to a JavaScript App. All major frameworks (React, Angular, Vue, etc.) are covered!
Intl.RelativeTimeFormat
A proposal to the ECMAScript Internationalization API Specification (ECMA-402) that just moved to Stage-4, is Intl.RelativeTimeFormat. It’s a way to format time in a relative manner – e.g. “10 minutes ago” or “in 3 quarters” – while also taking a language into account. const rtf_en = new Intl.RelativeTimeFormat('en'); console.log(rtf_en.format(-1, 'day')); // ~> 1 day ago …
Continue reading “ESNext: Relatively format time with Intl.RelativeTimeFormat“
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 [email protected]:user/repo.git#branchname or npm install git+ssh://[email protected]:user/repo.git#branchname Using Yarn: yarn add ssh://[email protected]:user/repo.git#branchname …
Continue reading “Use a Github repository branch or commit as a dependency in package.json“
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, …
Continue reading “Turn a Twitter thread into an ad-free, single page with @threader_app”
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 …
Continue reading “Change the marker of a list to any character with list-style-type: <string>“
Right now I’m packing my bag, as I’m leaving for vacation tomorrow. I’ll be going on a 10 day diving-trip to Tulum (Mexico) with my diving club Bubbledivers. It’s the first time I’m going to Mexico, and the first time I’ll be diving the Cenotes. Cenote diving in Tulum (All Mexico 365) It’s a welcome …
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: …
Continue reading “Programmatically add scripts to package.json with npm-add-script“
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 …
Continue reading “ESNext: Proposals to look forward to (Full Stack Europe)”
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. Her code however, only worked with containers that scroll vertically. Based …
Continue reading “Pure CSS Scroll Shadows (Vertical + Horizontal)”