A rather geeky/technical weblog, est. 2001, by Bramus
George Cave takes a look at the UX of the LEGO Interface Panels These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces. The UX of LEGO Interface …
Small and lightweight, I like: import tinykeys from "tinykeys" tinykeys(window, { "Shift+D": () => { alert("The 'Shift' and 'd' keys were pressed at the same time") }, "y e e t": () => { alert("The keys 'y', 'e', 'e', and 't' were pressed in order") }, "$mod+KeyD": () => { alert("Either 'Control+d' or 'Meta+d' were …
Continue reading “tinykeys – A tiny and modern library for keybindings”
An ECMAScript Language Feature that I’m looking forward to is Declarations in Conditionals. It adds the capability to declare variables inside conditional statements. Let’s take a look … ~ Setting the Scene Say you want to iterate over an array which might be tucked away inside an object. To do so, you’d most likely first …
Continue reading “ESNext: Declarations in Conditionals (Stage-1)”
loading-attribute-eagle-polyfill
Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading: Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager. According to @HTTPArchive, 34 websites are setting it to loading="eagle" 🤔 There's a Lord …
Continue reading “Native Image Lazy-Loading: loading-attribute-eagle-polyfill“
display: grid; and object-fit: cover;
On the Full Stack Belgium Slack channel, user @Brammm recently asked how to create a simple image gallery. Anyone have a favorite way of making an image grid with CSS? I’d like one of those “fancy” ones where no matter the aspect ratio of the image, they all have the same gap between them. While …
Continue reading “Simple Image Gallery with display: grid; and object-fit: cover;“
type conflict: int != float
In a Flux query I was writing I wanted to negate the fetched values using a map function to multiply each value by -1: map(fn: (r) => ({ _value: r._value * -1 })) To my surprise this yielded an error: type conflict: int != float Took me a few Google Search Coupons to realize the …
Continue reading “InfluxDB Flux: type conflict: int != float“
Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it. Heh. Can’t quite think of a reason when exactly to use this, but it’s fun nonetheless 😅 Checkboxland …
Continue reading “Checkboxland – Render anything as HTML checkboxes”
Already making rounds on Twitter last week, but now the video’s been released too: In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement …
Happening right now is ESNEXT Conf a fully remote conference exploring the future of JavaScript and the web. When I saw the CFP float by, it sounded like a perfect match for my talk “ESNext: Proposals to look forward to”. Thankfully the organisers – Fred and Drew from Pika – also felt that ways and …
Continue reading “ESNext: Proposals to look forward to (ESNEXT Conf)”
Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through: Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from …