A rather geeky/technical weblog, est. 2001, by Bramus
A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints. @media (min-width: 300px) and (max-width: 750px) { … } In CSS Media Queries Level 4 these type of Media Features can now be written as a …
Continue reading “Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)“
A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free. Basic component definition is really simple: import Tonic from "https://cdn.skypack.dev/@optoolco/tonic" class MyGreeting extends Tonic { render () { return this.html`<div>Hello, ${this.props.name ?? 'Stranger'}.</div>` } } Tonic.add(MyGreeting); Tonic will automatically convert the CamelCased class name to the proper custom element name. <my-greeting></my-greeting> …
Continue reading “Tonic — A thin wrapper around Web Components”
Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this: registerPaint(‘alpha’, class { static get inputProperties() { return [‘–bg-alpha’, ‘–bg-color’] } paint(ctx, size, props) { ctx.globalAlpha = props.get(‘–bg-alpha’); ctx.fillStyle = props.get(‘–bg-color’); ctx.fillRect(0, 0, size.width, size.height); } …
Elijah Manor digs into Date’s toLocaleDateString() and toLocaleTimeString() methods to format Dates and Times in JavaScript, with respect to a passed locale. const date = new Date(); console.log(date.toLocaleDateString(‘en-US’)); // 7/19/2020 const dateOptions = { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’, }; console.log(date.toLocaleDateString(‘en-US’, dateOptions)); // Sunday, July 19, 2020 console.log( date.toLocaleDateString(‘fr-FR’, { month: ‘long’, …
Continue reading “Natively Format JavaScript Dates and Times”
On Twitter, John Allsopp recently shared that Flexbox is the greatest thing that happed to CSS. I quickly chimed in with my personal favourite. To me the single greatest addition to CSS over the past 20 years is Custom Properties. They’ve opened up a ton of possibilities, and make us CSS Authors way more productive. …
Here’s a demo of a rendering engine I’ve been working on that allows for non-euclidean worlds. What kind of sorcery is this?! 🤯 I do wonder what would happen when multiple players are walking around simultaneously, and how objects that pass through the tunnels would behave. NonEuclidean (GitHub) → Related: How were the portals in …
Matthias Ott: In this post, I will share my current take on CSS structure. It does not religiously follow any particular methodology, although people familiar with Harry Roberts’ ITCSS (“Inverted Triangle CSS”) will definitely recognize parts of his methodology. The folder structure indeed looks very familiar: /scss/ ├── 1-settings ├── 2-design-tokens ├── 3-tools ├── 4-generic …
Azim Ahmed comes with a few practical code snippets to alter the React Native Developer Menu from within your code, via the DevSettings Module: Toggle why-did-you-render Perform an action on the current route import {DevSettings} from 'react-native'; import React, {useEffect, useState} from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, {trackAllPureComponents: false}); …
Continue reading “Customise the React Native Developer Menu with Dev Settings API”
Earlier this year Dave Rupert spoke at An Event Apart’s Spring Summit with a talk on Web Components: It’s the year 2021. Lots of us are building our websites and apps with components and design systems, perhaps leveraging a JavaScript framework to help glue all the pieces together. The web has matured in the last …
If you’re goofing around with docker-compose, then be sure to give Lando a try: Lando is a free, open source, cross-platform, local development environment and DevOps tool built on Docker container technology. Designed to work with most major languages, frameworks and services, Lando provides an easy way for developers of all skill levels to specify …
Continue reading “Lando — Instant Dev Environments For Every Project”