A rather geeky/technical weblog, est. 2001, by Bramus
24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element: Sometimes, I can’t recommend the select input. We want a way for someone to choose an item from a list of options, but …
I like this nuanced post by David Barral in which he goes over all the options on how to configure a Confirm component: what exactly do you pass in as props. In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by …
JSON.stringify() replacer parameter
As previously detailed (2013 😱), you can use JSON.stringify()‘s second replacer parameter to pluck specific fields from it, by passing in an array: var person = {"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"}; JSON.stringify(person, ["name", "company"], 4); // ~> "{ // "name": "Jim Cowart", // "company": "appendTo" // }" As Pawel explains the parameter can also be a function, to …
Continue reading “The Power of the JSON.stringify() replacer parameter”
Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like. import create from 'zustand' const [useStore] = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), dec: () => set(state …
Here’s the source of a Google Cloud function that, using Puppeteer, takes a screenshot of a given website and store the resulting screenshot in a bucket on Google Cloud Storage: const puppeteer = require('puppeteer'); const { Storage } = require('@google-cloud/storage'); const GOOGLE_CLOUD_PROJECT_ID = "screenshotapi"; const BUCKET_NAME = "screenshot-api-net"; exports.run = async (req, res) => { …
Continue reading “Building a Website Screenshot API with Puppeteer and Google Cloud Functions”
Rector is a reconstructor tool – it does instant upgrades and instant refactoring of your code. Why refactor manually if Rector can handle 80% for you? Installation per Composer: composer require rector/rector –dev For example, to upgrade the contents of the ./src folder: vendor/bin/rector process src –set php74 The cool thing is that Rector uses …
Continue reading “Automatically upgrade your PHP code from 5.3 to PHP 7.4 with Rector”
Nice work by Alyssa X: Flowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project. Flowy Source →Flowy Demo →
Rob from Tech Craft has been wild about using a Raspberry Pi 4 along with his iPad Pro. Never thought of this use case, but I was nodding in agreement whilst I was watching this. 😴 The video only gets interesting halfway through; feel free to skip the first part
Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark” from the menu You can also access the option via the Rendering panel. (Via @ChromeDevTools)
Photo by Jasper Garrat on Unsplash In his post “Inversion of Control” Kent C. Dodds starts off with a simple filter function and how it can quickly become a mess as features creep in. Using IoC it’s possible to keep the implementation, diverting some responsibilities away from it: We changed the responsibility of deciding which …