08 May 2019
Sliders (or carousels) are a fairly common practical requirement in web projects. Here, Chris Coyier shows us how far we can get in 2019 with HTML and CSS alone.
22 April 2019
Here’s a nice CSS-only hover technique from Trys Mudford incorporating scale transforms, opacity transitions and mouse pointer events.
04 April 2019
Fair play, Jeff – once this interview gets going it’s pretty damn good.
- The technique of "Subtraction";
- the last quarter of records being the best;
- the bar for electronic music being set too low;
- the complexity of the art form; and
- thinking about other things while DJing in front of 2000 people…
Plenty of good bits to chew over!
25 March 2019
With websites taking a median time of 5.8 seconds to show primary content (source: HTTPArchive) and Google warning us that 53% of mobile visits leave pages that take longer than three seconds to load, it’s hard to justify stuffing the front-end unnecessarily.
Bridget’s article also contains this quote which I love:
First, solve the problem. Then, write the code.
Essentially, don’t select the tooling first – a principle I fully endorse.
25 March 2019
Great article by Jake Archibald (developer advocate at Google Chrome) comparing ten F1 team websites in terms of performance. While checking for common issues he provides great insights into the tools and techniques he uses to test web performance.
Some points of note:
- He uses WebPageTest to gather the data on Chrome Canary on a mobile phone (Moto G4, a mid-to-lower end Android device) with a 3g connection;
- He doesn’t score on the amount of bandwidth used but on time to become interactive, i.e. meaningful content displayed in a stable way and reactive to a tap/click;
- “Caching is important”, so he takes the first load and second load score and adds them;
- He checks if any savings can be made via good-enough-for-mobile images resized to max. 1000px wide, for display at no larger than 500px (so it looks good on high density mobile devices);
19 March 2019
A great resource from Dave Rupert, whose work on accessible components I’ve been meaning to write about since I saw his talk “The Four Devine Beasts of Accessibility” at An Event Apart last August.
It came to mind as I prepare to code a navigation menu with dropdown submenus in the most accessible way I can for a client project.
Dave has also written about the ideas behind creating these cards, and provided a few working demos.
18 March 2019Very cool, free, web-based tool which detects a photo’s background and removes it, leaving only the subject on a transparent canvas.
17 March 2019
A Book Apart have a new book – Everyday Information Architecture by Lisa Maria Martin.
I love this promotional website for the book, created by Mat Marquis. It’s a really simple but striking design.
12 March 2019
@beep writes: “WebAIM has published an accessibility analysis of the top one million home pages and the results are abysmal”.
To address the issue he recommends we start small (picking up new accessibility tips regularly) and work together.
I agree. The web is supposed to be universal. We developers – or more accurately developers, designers, managers i.e. all of us – need to up our collective game to get things back on track.
I’ve always been interested in web accessibility and tried to do my best… but I can do better. I’ve just subscribed to David Kennedy’s A11y Weekly newsletter and plan to work through some sections of https://a11yproject.com/ as soon as possible.
12 March 2019
Brooklyn-based designer and music nerd Rob Weychert has created a lovely “live music diary” website, featuring information about nearly every show he has attended. It’s browsable by genre, artist, venue, city, state, and year.
It also features a ton of interesting design, animation and layout features.
He has also recently written about how he used CSS Grid to create a complex, poster-style layout for gig listings.