Search
Toward Responsive Elements
12.2.2020
Hot news from Brian Kardell, regarding what we've been referring to as "container queries", the most hotly requested feature in CSS:
There does seem to be some general agreement on at least one part of what I am going to call instead "Responsive Design for Components" and that is that flipping...
Building an Images Gallery using PixiJS and WebGL
12.2.2020
Sometimes, we have to go a little further than HTML, CSS and JavaScript to create the UI we need, and instead use other resources, like SVG, WebGL, canvas and others.
For example, the most amazing effects can be created with WebGL, because...
Neumorphism.io
12.2.2020
I was sort of making fun of neumorphism the other day. I don't actually care that much. I mostly just think it only works on some flat colored backgrounds, mostly really light colors, and somehow that feels weirdly limiting. (nope, sure, sure, nope 🤷‍♂️).
Anyway,...
The Hooks of React Router
12.2.2020
React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering...
How to Fetch and Parse RSS Feeds in JavaScript
11.2.2020
Say you have an RSS feed like this one. The goal is to request that RSS feed, parse it, and do something useful with the data in it. RSS is XML, and XML is arguably not as easy to work with than JSON. While a lot of APIs offer JSON responses, it's less typical for RSS, although it does exist.
Let's...
SFTP & Database Access on WordPress.com
11.2.2020
(This is a sponsored post.)
Wait what?
That's right, direct access to the files and data storage that power your site on WordPress.com, just like you have if you self-host a WordPress site. You can read their announcement here. Note this is for Business and eCommerce plans only.
All you have to...
Design Systems Blogathon
11.2.2020
It was fun watching a bunch of back and forth blogging between a bunch of smart people quoting a bunch of smart people last week. If you missed it, you might wanna start at the end and work backward.
I only have one tidbit to add. I don't do much with design systems as someone who works on pretty...
Building the Web We Want
10.2.2020
On the Microsoft Edge team, we’re committed to an open web and helping to drive innovation forward, which is why we’ve kicked off a new initiative in collaboration with Google, Mozilla, Samsung Internet, Igalia and — most importantly — the web community, called The Web...
The Case of the Stolen Domain Names
10.2.2020
Back in 2011, the domain name for this site, css-tricks.com, was stolen. "Domain Hijacking," they call it. It wasn't just this site, but around 12 others in the design and development space. To this day, none of us really know how it happened and who was behind it, although I believe all...
Helping Browsers Optimize With The CSS Contain Property
10.2.2020
There is a growing number of things that we have to do to help the browser achieve for peak performance.
Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors....
Is Having an RSS Feed Just Giving Content Away for Free?
7.2.2020
I mean, kinda.
I was just asked this question the other day so I'm answering here because blogging is cool.
The point of an RSS feed is for people to read your content elsewhere (hence the last part of the acronym, Syndication, as in, broadcasting elsewhere). Probably an RSS reader. But RSS...
Guillermo’s 2019 in Review
7.2.2020
Of all the tech-focused year-in-review posts I read, Guillermo Rauch's is my favorite. There is a lot in there, jumping from topics like modern architectures, high-fiving specific apps, and philosophical movements.
I'll pick one quote about the rise of "deploy previews":
A salient feature is...
Custom Styling Form Inputs With Modern CSS Features
7.2.2020
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look.
Here’s...
Old CSS, new CSS
7.2.2020
I love this post that walks through the development of CSS and HTML — it shows just how far web design has come and how much easier it is for us all now.
Eevee looks at designing websites with tables, the Space Jam website, and how for centuries there was no way to easily inspect changes made to...
Full-Width Elements By Using Edge-to-Edge Grid
7.2.2020
If you have a limited-width container, say a centered column of text, "breaking out" of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has it's caveats (e.g. requiring hidden...
Getting Fancy with position: sticky;
7.2.2020
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
What...
Getting Acquainted With Svelte, the New Framework on the Block
6.2.2020
For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks, but they might leave a bitter taste for anyone who advocates for an open and unbiased web. Vue is another popular framework that...
Building an accessible autocomplete control
6.2.2020
Here’s a great in-depth post from Adam Silver about his journey to create an autocomplete field that’s as accessible as possible. There are so many edge cases to consider! There are old browsers and their peculiar quirks, there are accessibility best practices for screen readers, and not to mention...
Browser Version Release Spectrum
6.2.2020
Whenever a browser upgrades versions, it's a little marketing event, and rightly so. Looks like for Firefox it's about once a month, Chrome is ~6 weeks, and Safari is once a year.
Chrome 80 just dropped, as they say, and we get a video and blog post. What strikes me about releases like this these...
HTTPS is Easy!
5.2.2020
I've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL certificates from third-party vendors and had trouble installing them. I've had certificates expire and had to scramble to fix them. I've had to poke and prod hosting companies to help me ensure things...