HTML Video Sources Should Be Responsive
Scott Jehl doesn’t mince words here:
Removing media support from HTML video was a mistake. It means that for every video we embed in HTML, we’re stuck with the choice of serving source files that are potentially too large or small for many users’ devices (resulting in poor performance, wasteful dat..
:focus-visible Support Comes to Firefox
Look at that! The :focus-visible pseudo-selector is now supported in Firefox, as of version 85 which shipped yesterday. I had to rush over to the MDN Docs just to confirm, and yep, the :focus-visible page has been updated to reflect the news.
What’s so cool about :focus-visible? It’s all about the ..
How to Favicon in 2021
I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements. Andrey Sitnik has done that here with favicons.
The final suggestion:
<link rel=..
The Differences in Web Hosting (Go with the Happy Path)
One of our readers checked out “Helping a Beginner Understand Getting a Website Live” and had some follow up questions specifically about hosting providers. Here’s what they asked:
What’s the difference between hosting providers? For example, what is the difference between GoDaddy and Hostgator, wh..
A table with both a sticky header and a sticky first column
We’ve covered that individual cells,
| and | can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this demo).
But stickiness isn’t just for the top of the screen, you can stick things in a..
Nested Media Queries
Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well.
I spent a few months experimenting with a dozen different approach..
 Recreating Game Elements for the Web: The Among Us Card Swipe
As a web developer, I pay close attention to the design of video games. From the HUD in Overwatch to the catch screen in Pokemon Go to hunting in Oregon Trail, games often have interesting mechanics and satisfying interactions, many of which inspire my own coding games at Codepip.
Beyond that, impl..
SVG within CSS
Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like grayscale(100%) and stuff like that.
But it can also point to a filter defined by SVG. So you could do filter:..
Animating a CSS Gradient Border
This little trick for gradient borders is super useful:
.border-gradient {
border: 5px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea with more ..
(Jay Freestone’s) Front-end predictions for 2021
React framework maturity, early container queries, WASM adoption, and monoliths. I’ll take all four, please. Not feeling like a particularly front-end-y? Jay says:
Interestingly, the biggest developments in the front-end are unlikely to be traditionally front-end concerns. Back in our 2019 forecast..
|
|---|
