RWD Weekly #345
Welcome back to another edition of RWD Weekly.
This week we take a look at the redesign of the feature image from Owltastic and celebrate the release of Firefox with support for WebP.
More below, get into the links and enjoy!
Headline
Firefox 65: WebP support, Flexbox Inspector, new tooling & platform updates
What a cracker jack box of amazing that is Firefox 65. This could be a newsletter edition on its own, but for now I’ll list my highlights.
- CSS Flexbox inspector to allow you to see where/why items are sitting on a page, their flex state and the space available, a great edition to the existing Grid inspector and Shape Path editor.
- CSS Changes panel: allows you to see all the changes (both added and removed) to your CSS so that you can play them back into your code editor.
- Color Contrast Ratio which also provides a range across a complex background (think images or gradients).
- Finally (there’s actually loads more) Firefox now supports WebP which is amazing. You can use the <picture> element to provide fallbacks, but it’s now really only safari holding out (although it seems they’re in the process of adding support).
Sponsorship
SmashingConf San Francisco 2019 (Apr 16-17)
Hailed as friendly, inclusive events, SmashingConf has broadened the horizons of what a web design conference is. Instead of showing slides, presenters prefer showing attendees how they work in a practical sense, from live debugging to live redesign. 14 speakers including Brad Frost, Sara Soueidan and Chris Coyier will be exploring practical front-end techniques and design strategies. Tickets are now available!
SmashingConfs are friendly, inclusive events focused on real-world problems and solutions. You can also download the Convince Your Boss PDF (249 KB).
Articles
A reading list for “The World-Wide Work.”
I heard some truly amazing things about the New Adventures conference, and in particular this talk from Ethan. It’s not a video yet, but Ethan has listed all of the resources used for this talk.
A Year of Utility Classes
I’m not a huge fan of atomic CSS where every property/value has it’s own class, i.e. class such as p-1, p-2, pb-1, pt-2, would equate to padding: 1em, padding: 2em, padding-bottom: 1em, padding-top: 2em. This overview covers the good and bad of using it for a year working in a team building client sites.
New Year, New Website
This article from Meagan is an overview of her approach to her latest rendition of her website design (which you can see as our feature site this week). It’s great to see the focus of this article isn’t about pairing typefaces, choosing colour schemes, or how Flexbox/Grid was used, but instead about what the site needed to /say/ to be successful. As beautiful as we can make things look (and this site is certainly that), it’s the copy that people come to read.
How do you figure?
I’ve been using <figure> and <figcaption> on the site for a long time and I’ve always recommended it for websites builds, but in all this time there were a few things that I wasn’t aware of. Thanks Scott for this comprehensive overview.
HTML and Performance: Leave Out Optional Tags and Quotes
Jens looks at whether or not omitting things like optional tags (for example the closing </li> tags could be removed) or removing quotes when note needed (think <div class=”container”> vs <div class=container>. I agree with his sentiment that it’s funny how we compress and obfuscate Javascript and to some extent CSS, but when it comes to HTML we’re reluctant to change it. The real challenge is around if the omission provides any tangible benefits on the front end. My main issue was that I learned HTML by reading the source, so I want it to be easily readable, however these days Dev tools will provide you with the source code neatly reformatted.
What do you think?
Responsive design for mobile and web development
Una has written about the future of responsive design as part of the IBM developer Mobile Development Blog
Tutorials
CSS Position Sticky – How It Really Works!
position sticky is a great way to feature sidebar content for as long as it can until something is there to replace it. This is a great tutorial from Elad about how and why it works
Firefox DevTools for CSS authors
This week I’ve noted a few of the great updates to Firefox and the dev tools so this tutorial on how to take advantage of the tooling as a CSS author is perfect timing
Taotajima.jp WebGL deconstruction
This tutorial breaks down a wonderful looking website with a really interesting homepage transition effect between videos when you scroll. I really love when people take apart the build of a site, it makes me wish that I did more in the examples section
Dropbox Paper as a headless CMS
I’ve been on the lookout for something very similar to this, and while I think I’ll end up going with [https://getkirby.com/]Kirby I think it’s very interesting approach and certainly thinking a bit outside the box
Creating SVGs with Processing
Everywhere we look there is data. There’s a lot of it and it can be incredibly interesting if it it used in the right way to tell a story. Using data as the origin to form design elements across your site and wider campaign can be both beautiful and informative. This tutorial helps combine processing with SVG as an output to produce some interesting visuals
Understanding API-Based Platforms: A Guide For Product Managers
I’ve been working with API’s and websites for a number of years now, yet anytime a client would ask “What’s an API though and what does it do” I’ve never had a go-to explanation. Now, I have the restaurant exampl
Framework & Codepen
Terminal CSS
Modern and minimal CSS framework for terminal lovers. I particularly like the typography used in the headings :
CSS LEGO Minifigure Maker
I love this little code pen from Josh, style your own lego figur
Jobs
Senior Front End Developer (Brighton, UK)
Clear Left are looking for an experienced front-end developer to join our friendly and supportive team in Brighton. £40—£50k salary, flexible, family-friendly working hours, 30 days annual leave as standard, substantial training budget, and truly wonderful colleagues
Finally
That’s all for this week, enjoy your weekend and if you have written about anything you have been doing lately please hit reply and let me know.
Cheers,
Justin.
