Search
Some Innocent Fun With HTML Video and Progress
30.4.2020
The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing.
But here we are.
The video UI was actually lovely, but it was the progress bar that really caught my attention – or rather...
Real-World Effectiveness of Brotli
30.4.2020
Harry Roberts:
The numbers so far show that the difference between no compression and Gzip are vast, whereas the difference between Gzip and Brotli are far more modest. This suggests that while the nothing to Gzip gains will be noticeable, the upgrade from Gzip to Brotli might perhaps...
A Book Apart Turning 10
30.4.2020
Early congratulations, A Book Apart! That’s a hell of a milestone. I’m quite sure I’ve read more A Book Apart books than any other tech book publisher.
Katel LeDu runs the ship over there, and she’s given me very special pack of discount codes that will get you my book...
Click Once, Select All; Click Again, Select Normally
29.4.2020
A bonafide CSS trick from Will Boyd!
Force all the content of an element to be selected when clicked with user-select: all;
If you click a second time, let the user select just parts of the text as normal.
Second click? Well, it’s a trick. You’re really using a time-delayed...
[David Baron’s] Thoughts on an implementable path forward for Container Queries
29.4.2020
That’s the title of a public post from David Baron, a Principal Engineer at Firefox, with thoughts toward container queries. I know a lot of people have been holding their breath waiting for David’s ideas, as he’s one of few uniquely qualified to understand the ins and outs...
Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS
29.4.2020
We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page...
How to Redirect a Search Form to a Site-Scoped Google Search
29.4.2020
This is just a tiny little trick that might be helpful on a site where you don’t have the time or desire to build out a really good on-site search solution. Google.com itself can perform searches scoped to one particular site. The trick is getting people there using that special syntax...
Using Formik to Handle Forms in React
28.4.2020
There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from legends and fieldsets to native validation and states — but they only get us so far when we start to consider the peculiarities of using...
Static or Not?
27.4.2020
A quick opinion piece by Kev Quirk: Why I Don’t Use A Static Site Generator. Kev uses WordPress:
Want to blog on my iPad? I can. Want to do it on my phone? No problem. On a machine I don’t normally use? Not an issue, as long as it has a browser.
First, it’s worth understanding...
Advice for Writing a Technical Resume
27.4.2020
Marco Rogers asked a very good question on Twitter:
I talk to a lot of people new to tech from non-traditional backgrounds, e.g. bootcamps or self-taught. I'm looking for good information for those people on how to build out a strong resume when they don't have work experience yet. Advice...
The Cost of Javascript Frameworks
26.4.2020
I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than...
@property
25.4.2020
The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!
There is a draft spec and an “intent to ship” document. The code from that document shows:
@property --my-property {
syntax: "<color";
initial-value: green;
...
How to Make a CSS-Only Carousel
24.4.2020
We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one.
So, here’s what we’re making today:
There’s no JavaScript here, whatsoever! No jQuery plugins....
“The title ‘Front-End Developer’ is obsolete.”
24.4.2020
That title is from the opening tweet of a thread from Benjamin De Cock. I wouldn’t go that far, myself. What I like about the term is that ‘Front-End’ literally means the browser, and while the job has been changing quite a lot — and is perhaps fracturing before our eyes — the fact that...
Chrome + System Fonts Snafu
24.4.2020
There was just a bug late last year where system fonts (at least on Mac, I don’t know what the story was on other platforms) in Chrome appeared too thin and tracked-in at small sizes and too thick and tracked-out at larger sizes. That one was fixed, thankfully. But while it was a problem,...
SVG, Favicons, and All the Fun Things We Can Do With Them
24.4.2020
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks.
One very new trick is the ability...
Different Approaches to Responsive CSS Motion Path
24.4.2020
As a follow-up to Jhey’s recent post on responsive motion paths, Michelle Barker notes that another approach could be to just transform: scale() the whole dang element.
The trade-off there is that you’re scaling both the path and the element on the path at the same time; Jhey’s...
Dark mode and variable fonts
23.4.2020
Not so long ago, we wrote about dark mode in CSS and I’ve been thinking about how white text on a black background is pretty much always harder to read than black text on a white background. After thinking about this for a while, I realized that we can fix that problem by making the text thinner...
Collective #603
23.4.2020
Gallery * Responsive CSS Motion Path * Spacing in CSS * pattern.css * The Cost of JavaScript Frameworks
Collective #603 was written by Pedro Botelho and published on Codrops
Accessible Font Sizing, Explained
23.4.2020
The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web.
But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So,...