Search
Stream-Crossing Confusion
23.12.2019
Should I use WordPress or React hooks?
Should I use D3 or CSS?
Should I use Markdown or JSON?
Can I use flexbox in Gatsby?
Can I use custom properties in Jekyll?
Should I use HTML or the cloud?
How do I add dark mode to my Vue site?
These are tongue-in-cheek, but there is a point to be made here....
Dip Your Toes Into Hardware With WebMIDI
12.12.2019
Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that predates the web? Let me introduce you to MIDI and the WebMIDI API and show you how it presents a unique opportunity for front-end developers...
Making a Better Custom Select Element
11.12.2019
We just covered The Current State of Styling Selects in 2019, but we didn't get nearly as far and fancy as Julie Grundy gets here. There is a decent chunk of JavaScript that powers it, so I'm still very much eyeballing browsers' recent interest in giving us more powerful selects in (presumably)...
WDRL — Edition 278: Cname Cloaking, Dark mode favicons, a guide to mastery, and better custom select fields
5.12.2019
Hey,
It’s interesting to reflect on our own behaviour: We can often enough catch ourselves complaining or ranting about other people — some of them we know personally, some we don’t. I’m currently reading a (German) book that’s written mostly for farmers but I can’t stop thinking...
Having a Little Fun With Custom Focus Styles
2.12.2019
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.
So you do a little research and find...
The Power (and Fun) of Scope with CSS Custom Properties
27.11.2019
You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like --size: 1em and use them as values like font-size: var(--size);, they differ from preprocessor variables...
Making a Chart? Try Using Mobx State Tree to Power the Data
5.11.2019
Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options.
But we don’t necessary need a chart library to create charts. Take Mobx-state-tree (MST)...
Patterns for Practical CSS Custom Properties Use
9.10.2019
I've been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so useful...
Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox
26.9.2019
In this week's roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox.
Let's get into the news!
Identifying the causes of layout shifts during page load
You can now use WebPageTest to capture any layout shifts that occur on your website...
Using Custom Properties to Wrangle Variations in Keyframe Animations
12.9.2019
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS.
Well, I found a way to account for variations within...
Logical Operations with CSS Variables
11.9.2019
Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these...
A Configurator for Creating Custom WebGL Distortion Effects
4.9.2019
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
A Configurator for Creating Custom WebGL Distortion Effects was written by Daniel Velasquez and published on Codrops
Contextual Utility Classes for Color with Custom Properties
14.8.2019
In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away.
With that said, I am sure I am not alone when I say I'd like to style some links based on...
Using Your Domain with a Netlify-Hosted Site
6.8.2019
Netlify has their own docs for Custom Domains, so if you're looking for horse's mouth technical docs on this stuff, that should be treated as the source of truth. But I'd like to take a crack at it from a slightly different angle, where we look at where you are and what you wanna do, and the point...
Bringing CSS Grid to WordPress Layouts
31.7.2019
December 6th, 2018 was a special date for WordPress: it marked the release of version 5.0 of the software that, to this day, powers more than one-third of the web. In the past, people working on the platform pointed out that there has never been any special meaning to version numbers used...
Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates
26.7.2019
In this week's roundup, WebKit's method for truncating multi-line text gets some love, a note on calculations using custom properties, and a new OpenType feature that prevents typographic logjams.
The post Weekly news: Truncating muti-line text, calc() in custom property values, Contextual...
Zoom, CORS, and the Web
23.7.2019
It's sorta sad by funny that that big Zoom vulnerability thing was ultimately related to web technology and not really the app itself.
There is this idea of custom protocols or "URL schemes." So, like gittower:// or dropbox:// or whatever. A native app can register them, then URLs that hit them...
Managing Multiple Backgrounds with Custom Properties
15.7.2019
One cool thing about CSS custom properties is that they can be a part of a value. Let's say you're using multiple backgrounds to pull off a a design. Each background will have its own color, image, repeat, position, etc. It can be verbose!
You have four images:
body {
background-position:
...
CSS Gradient Text
15.7.2019
Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy. That got me thinking about fonts and CSS gradients, since...
Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults Query
11.7.2019
In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties aren't computing hogs, variables defined at the top-level in JavaScript are global to other page scripts, and Babel env now supports the defaults...