Journal
Saying bye-bye to autoprefixer
For a while now I’ve been using gulp-autoprefixer as part of my front-end build system. However, I’ve just removed it from my boilerplate. Here’s why.
The npm module gulp-autoprefixer takes your standard CSS then automatically parses the rules and generates any necessary vendor-prefixed versions, such as ::-webkit-input-placeholder to patch support for ::placeholder in older Webkit browsers.
I’ve often felt it excessive—like using a hammer to crack a nut. And I’ve wondered if it might be doing more harm than good, by leading me to believe I have a magical sticking plaster for non-supporting browsers when actually (especially in the case of IE) the specific way in which a browser lacks support might be more nuanced. Furthermore I’ve never liked the noise generated by all those extra rules in my CSS output, especially when using the inspector to debug what would otherwise be just a few lines of CSS.
But I always felt it was a necessary evil.
However, I’ve just removed gulp-autoprefixer from my boilerplate. Why? Because:
- Browsers are no longer shipping any new CSS with prefixes, and as at 2019, they haven’t been for years;
- With the browsers that do require prefixed CSS now old and in the minority, it feels like progressive enhancement rather than “kitchen sink” autoprefixing should take care of them. (Those browsers might not get the enhanced experience but what they’ll get will be fine.)
Jen Simmons’ tweet on this topic was the push I needed.
So I’ve removed one layer of complexity from my set-up, and so far nothing has exploded. Let’s see how it goes.
Cookie Consent by Osano
The most popular drop-in solution to the EU Cookie Law requirements.
Over the last year I’ve been successfully using Cookie Consent by Osano on a number of commercial websites. Essentially this is a banner which appears at the bottom (or top) of your website and asks the visitor to explicitly give (or decline to give) consent for the cookies your website uses. It’s a great free resource which handles the requisite GDPR requirements (and more) and offers a number of customisation options.
it’s very simple to include and use – you just step through their WYSIWYG generator, include the generated JavaScript-based settings in your site, and point to their CSS and JavaScript libraries. I like self-hosting my own static assets so I integrate the libraries into my code rather than linking to their externally hosted files, but that’s just my personal preference.
Why do we need this?
It’s because In 2018, the European Union’s General Data Protection Regulation (GDPR) went into effect, establishing a number of principles governing the collection of personal information. Any company or individual that processes personal information of European Union citizens must comply with the GDPR, regardless of where data is stored or processed.
Cookies often collect information about their users that is not specifically identified with one individual, but if that information, combined with other data, can be used to identify an individual, it becomes “personal information” for the purposes of the GDPR and must be treated as such.
The clearest and most effective way to notify a user in advance of the collection of information using cookies is to provide a web banner or “pop-up” cookie notice that appears automatically when the home page is accessed for the first time, and requires some affirmative action.
Real Favicon Generator
Knowing how best to serve, size and format favicons and other icons for the many different device types and operating systems can be a minefield. My current best practice approach is to create a 260px × 260px (or larger) source icon then upload it to Real Favicon Generator.
This is the tool recommended by CSS-Tricks and it takes care of most of the pain by not only generating all the formats and sizes you need but also providing some code to put in your <head> and manifest.webmanifest file.
Everybody in the place
Enjoyed this acid house history lesson from Jeremy Deller – especially some of the footage from the early Manchester scene which I hadn’t seen before.
Bookshelf - daverupert.com
Just saw this – https://daverupert.com/bookshelf/ – and now I really need to up my book-logging game!
(via @davatron5000)
A Visit from the Goon Squad, by Jennifer Egan
I really enjoyed this book, recommended to me by Gillian and Tom.
It’s set primarily in New York and tells the stories of a cast of interconnected characters (and their children) linked by the music industry, taking in themes of youth and ageing, loss and regret, insecurity, celebrity and image.
There are some great moments including Rob’s story which called to mind The Talented Mr Ripley; Jules’s unpublished and unhinged newspaper article on the celebrity interview which sent him to jail; and the dystopian final chapter which suggests where the internet and the world of influencers might be headed if we don’t watch out.
I loved author Jennifer Egan’s storytelling, dark humour and also the way she switched her writing style dependent on the era or character.
Recommended!
Intrinsically Responsive CSS Grid with minmax and min
Evan Minto notes that flexible grids created with CSS Grid’s repeat, auto-fill, and minmax are only intrinsically responsive (responsive to their container rather than the viewport) up to a point, because when the container width is narrower than the minimum width specified in minmax the grid children overflow.
Applying media queries to the grid is not a satisfactory solution because they relate to the the viewport (hence why Every Layout often prefer Flexbox to CSS Grid because it allows them to achieve intrinsic responsiveness).
However we’ll soon be able to suggest grid item width as a percentage of the parent container, avoiding the overflow problem. The new “CSS Math functions” to help us achieve this are min(), max() and clamp(). At the time of writing, these are only supported in Safari however Chrome support is in the pipeline.
GOV.UK Design System
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.