Search
A CSS Tribute to SVG
31.12.2019
This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.
The big idea is that the entire demo is one <rect> element. That's it. It is duplicated with <use> elements when needed,...
One Way to Break Users Out of the Habit of Reloading Too Much
30.12.2019
Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at the dang site and rage-refresh to let it know we’re displeased.
Wouldn’t be nice to know when a user refreshes the page? Not just that,...
Making Room for Variation
30.12.2019
Say you have a design system and you're having a moment where it doesn't have what you need. You need to diverge and create something new. Yesenia Perez-Cruz categorizes these moments from essentially ooops to niiice:
There are three kinds of deviations that come up in...
What it means to be a front-end developer in 2020 (and beyond)
29.12.2019
I wrote a piece for Layout, the blog of my hosting sponsor Flywheel.
Stick around in this field for a while, and you'll see these libraries, languages, build processes, and heck, even entire philosophies on how best to build websites come and go like a slow tide.
You might witness some...
So Many Color Links
27.12.2019
There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.
Curated colors in context
Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That's a nice way to do...
How Many Websites Should We Build?
27.12.2019
Someone emailed me:
What approach to building a site should I take?
Build a single responsive website
Build a site on a single domain, but detect mobile, and render a separate mobile site
Build a separate mobile site on a subdomain
It's funny how quickly huge industry-defining conversations...
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...
Why do we use .html instead of .htm?
26.12.2019
Interesting question from Andy:
Serious question. Why do we use .html instead of .htm? / @adactio @css
— Andy Clarke (@Malarkey) December 12, 2019
The most likely answer from the thread: DOS was a massive operating system for PCs for a long time and it had a three-character limit on file...
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...
How to Modify Nodes in an Abstract Syntax Tree
26.12.2019
One of the more powerful concepts I've stumbled across recently is the idea of abstract syntax trees, or ASTs. If you've ever studied alchemy, you may recall that the whole motivation for alchemists was to discover some way to transform not-gold into gold through scientific or arcane methods.
ASTs...
GoGetSSL
26.12.2019
GoGetSSL is a company that sells SSL certificates. You know, those things that are required to make your site use https://, not http:// which doesn't feel like an optional choice these days with browsers making sites looks scarily insecure without it and search engines telling us is a ranking...
What to Expect from the JAMstack in 2020
24.12.2019
Brian Rinaldi interviewed a variety of folks, asking them the same questions about JAMstack development and the landscape recently:
Raymond Camden: I think we will see better competition from the bigger players.
Gift Egwuenu: I'm also looking forward to more job openings on the JAMstack.
Bryan...
Crypto Confronts Social Justice Warriors
24.12.2019
“Many men are lamenting the “man-hating” rhetoric that they have imagined stemming from SJWs. It just so happens that many of these men are also heavily involved in cryptocurrencies due to the notion that Bitcoin can restore their libertarian ideals.”– Ross Chalmers...
Moving Rainbow Underlines
23.12.2019
I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not scroll-jacking — it's just a minor design feature that uses scroll position to enact a little movement.
To draw the rainbows...
A Whole Bunch of Places to Consider Contrast in a Single Paragraph
23.12.2019
When we're thinking about choosing colors in design, we're always thinking about accessibility. Whenever colors touch, there is contrast and, if we're talking about the color contrast of text, it needs to be high enough to be readable. This benefits people with a variety of visual disabilities,...
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....
Highlights of the HTTP Archive Web Almanac
23.12.2019
I recently looked at the CSS chapter of the Web Alamanc and had some thoughts. Here, Stefan Judis looks at the whole thing and rounds up the most interesting bits to him. Here are most of them:
20% of sites don't compress their JavaScript.
React is on 5% of sites while jQuery is on 85% of sites....
Is Web Design Easier or Harder Than it was 10 Years Ago?
20.12.2019
Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don't have any data for you, but I can shell out some loosey-goosey opinions.
HTML
HTML5 was the only big HTML change in the last decade, and it wasn't particularly dramatic. It's cool it's the looser...
Clips from my DEV AMA
20.12.2019
I recently did an AMA over on DEV. Just taking the opportunity to port over some answers here like a good indiewebber.
If you were starting out as a front end dev in 2020, what would you say is the first thing you would learn and why?
You need to put yourself in a position where it's your job...
How to the Get Current Page URL in Gatsby
20.12.2019
This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in Gatsby is not as straightforward as you may think, but also not so complicated to understand.
Let’s look at a few methods of making it happen....