Search
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...
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....
Raw GraphQL Querying
20.12.2019
GraphQL has all kinds of awesome tooling built around it. But like everything on the web, it ultimately comes down to data shootin' across the ol' network and responses coming back. If you need to talk to a GraphQL API endpoint, you don't absolutely have to use some kind of framework or library...
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...
Make a smooth shadow, friend.
19.12.2019
One box-shadow is cool and all, but check out Philipp Brumm's tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.
This reminds me very much of the idea for easing linear-gradient. In a gradient, this smoothing effect is handled...
Zenserp
19.12.2019
(This is a sponsored post.)
There are plenty of rank tracking software tools out there that allow you to track the position of your website inside the search results pages (SERP) of search engines for certain key phrases. However, these tools are definitely not enough when you are trying...
Two Lessons I Learned From Making React Components
19.12.2019
Here’s a couple of lessons I’ve learned about how not to build React components. These are things I've come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot...
Print-Inspired Layout on the Web
18.12.2019
I always love seeing people get inspired by print design and trying to port it over to the web. There is a much deeper history of interesting print work to draw from, and still a ton of modern work happening that eclipses most digital design work today. The web is fully capable of bold, interesting...
The Making of a “Special Series” on a WordPress Site
18.12.2019
We just ran a fancy article series here on CSS-Tricks with a bunch of different articles all answering the same question. By fancy, I mean two things:
The articles had a specially-designed template just for them. (Example)
The series has a specially-designed landing page.
One of the reasons...