Search
Select an Element with a Non-Empty Attribute
5.2.2020
Short answer:
[data-foo]:not([data-foo=""] {
Longer answer (same conclusion, just an explanation on why we might need this):
Say you have an element that you style with a special data-attribute:
<div data-highlight="product"</div
You want to target that element and do special things when...
The Three Types of Code
3.2.2020
Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open source project. Whether I’m writing HTML or CSS or building a React component, thinking...
Understanding Immutability in JavaScript
30.1.2020
If you haven’t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment. While it’s possible to reassign variables and values declared using let or var, you'll begin to run into issues when you try that with...
Resizing Values in Steps in CSS
30.1.2020
There actually is a steps() function in CSS, but it's only used for animation. You can't, for example, tell an element it's allowed to grow in height but only in steps of 10px. Maybe someday? I dunno. There would have to be some pretty clear use cases that something like background-repeat: space...
“Browser Functions”
26.1.2020
Serverless functions are fairly straightforward. Put a bit of back-end language code, like Node, in the cloud and communicate with it via URL. But what if that URL didn't run a back-end language, it ran an actual browser? Richard Young:
We can now do full stack development using just Web APIs....
Bundling JavaScript for Performance: Best Practices
24.1.2020
Performance advice from David Calhoun on how many scripts to load on a page for best performance:
[...] some of your vendor dependencies probably change slower than others. react and react-dom probably change the slowest, and their versions are always paired together, so they...
What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?
24.1.2020
Some HTML elements accept width and height as attributes. Some do not. For example:
<!-- valid, works, is a good idea --<img width="500" height="400" src="..." alt="..."<iframe width="600" height="400" src="..."</iframe<svg width="20" height="20"</svg<!-- not valid...
BCH Script Meeting Aims to Enhance the Programming Language in Bitcoin Cash
23.1.2020
Bitcoin Cash developers actively participate in video meetings in order to discuss the ongoing development of the BCH ecosystem. BCH software engineers met for the first time in 2020 last Thursday to examine the May upgrade and specification work. Following the meeting, on January 23,...
Searching the Jamstack
22.1.2020
Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:
<form action="https://www.google.com/search" method="get"<input type="search" name="q"...
JAMstack vs. Jamstack
21.1.2020
It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that.
The "official website" changed their language from JAMstack (evoking the JavaScript, APIs, and Markup acronym) to Jamstack. It's nothing...
The Best Color Functions in CSS?
20.1.2020
I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it.
hsl(120, 100%, 40%)
Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from...
IP Geolocation and Threat Intelligence API: ipdata (Sponsored)
20.1.2020
An IP address is a simple, numeric piece of information that gets passed to a server, but that IP address can provide a wealth of information with ipdata. With ipdata you can learn user location, language, currency, and much more! Quick Hits ipdata is an IP Geolocation and Threat Intelligence API....
A Web Component with Different HTML for Desktop and Mobile
16.1.2020
Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.
One code snippet that caught my eye was a simple way to design a component...
Snowpack
14.1.2020
Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports).
This is how I digest it. When you write a line of code...
Is “is” Useful?
3.1.2020
God I'm funny.
Anytime we have fairly repetitive selectors that have a common parent, it's probably a place we can use the :is() pseudo-selector.
Holger Bartel demonstrates like this:
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article...
New Year, New Job? Let’s Make a Grid-Powered Resume!
1.1.2020
Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during...
A Use Case for a Parent Selector
31.12.2019
Having a "parent selector" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I'd document it here.
A classic...
7 Uses for CSS Custom Properties
27.12.2019
I find all seven of these quite clever and useful.
I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of code.
.some-element {
background-color: hsla(
var(--h, 120),
var(--s, 50),
var(--l...
PHP Templating in Just PHP
26.12.2019
With stuff like template literals in JavaScript and templating languages, like JSX, I've gotten used to wanting to write my HTML templates in one nice chunk and sprinkling in variables wherever I need them.
I had a situation where I needed to do that in "raw" PHP the other day, so I'm just...
Create a Static Site Using Angular & Scully
20.12.2019
The team at HeroDevs has just released the alpha version of Scully, a static site generator for Angular. That's right, Angular didn't have an intuitive way to create JAMstack applications before, but now it's possible!
Scully uses a node CLI application to run Angular schematics so you don’t have...