Welcome back to another edition of RWD Weekly.
This week we take a look at the breakdown of the term ‘front-end developer’ and look at some of the updates that Chrome have made to Dev tools. Google has had its share of questionable news as well as some potential changes to the way web extensions have been tabled that have extension developers up in arms. More below, get into the links and enjoy!
The Great Divide
Chris takes a long stroll down the growing divide that we’re seeing in the industry around what a Front-End Developer really is. This article is very much a head nodder as Chris looks at the many different sides and hears from a number of what I would call leaders in our profession. If you’re a Instapaper kind of reader I recommend also visiting the site to _see_ the article, it’s very well art directed and quite unlike most CSS Tricks posts.
Responsive Design Pocket Notebooks
This set of three pocket notebooks feature the three tenets of responsive design on the cover, and quotes from Brad Frost, John Allsopp, and of course Ethan Marcotte. Made from recycled paper, featuring 300gsm covers and 120gsm inner pages these are perfect for sketching out ideas for your next project.
distraction-free reading experiences
I came across this article this week
and it reminded me just how important it is to make the content on our sites
easy for our users to read. Seems like a simple and obvious thing, but we often
lose track of just how important this is. To my surprise, this article was from
2014 but it rings just as true today as it did back then (and always has done).
Speak at Web Directions events in 2019
Web directions was the first ever web
conference that I attended and it still ranks as one of the best I’ve ever been
to. Throw into the mix that Jonh Allsopp runs the event and you’re onto a
winner. They’re looking for speakers of all experience levels to join their
2019 series of events, you should definitely put your proposal in.
What’s New In
DevTools (Chrome 73)
One of the best features in the new
release of Chrome DevTools, in my opinion, is the Color Ratio contrast for AA
and AAA that appear inline with the color options. It also includes the ability
to add logpoints in your code so you get alerted when certain stages of your
code complete without having to add loads of console.logs() in your code
(exactly what I do)
My Grid Layout
An overview of the approach that Roman Komarov had when redesigning the layout of his blog with Grid Layout. Roman used a combination of both CSS Variables and CSS Grid as they have about the same level of support (see CanIUse.com for broswer support on any feature). I particularly like the side bar layout images he has using position: sticky
With Google making changes to the way in which WebExtensions work a questions mark around their reasons has been raised, along with some serious issues for this avenue for companies that currently produce extensions
Flexbox Albatross to Real Use
Last week we featured a new layout approach developed by Heydon Pickering called the Albatross layout, and now Chris from CSS tricks has used this to position ads on his site. Love it
Priority hints allows you to add importance=” to link and img tags (and fetch events). This provides an indication to the browser what they should be focusing the downloads on first and is a good replacement for using too many rel=’preload’. Here’s an example you might have for a carousel below.
<!– The first image is visible –>
<img src=”img/carousel-1.jpg” importance=”high”>
<!– The other carousel images are not –>
<img src=”img/carousel-2.jpg” importance=”low”>
<img src=”img/carousel-3.jpg” importance=”low”>
<img src=”img/carousel-4.jpg” importance=”low”>
How to Stop
Using Browser Dev Tools and Start Using Your Editor’s Debugger
Patterns On The Web
A good refresher for the different
ways that you can layout a data table on the web (hot tip, don’t use CSS Grid
for this one). I still think that the Filament Group options are the
Tools & Plugins
Sitespeed.io 8.0 and Browsertime 4.0
My favourite FREE performance monitoring tool has had a major release and upgrade. If you haven’t tried out Sitespeed.io yet now is the perfect time
A performance metric bar with a streaming FPS graph
Input: Fonts for
Check out Input, a new Font that is perfect for including code snippets on your site
Senior Front End Developer (Brighton, UK)
Almost every week over the past 344 editions I’ve featured something that Jeremy Keith has either written himself or shared, and now I’m happy to tell you that you have the chance to work with and learn from Jeremy if you fancy taking up the Senior Front End Developer role at Clearleft. I know we’ve talked about the Great Divide and cast questions over what a Front-End Developer is, and this is a great example of detailed job description that lets you know exactly what you’ll be up to.
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.
If you liked the overview that this article provided and would more helpful tips sent to your inbox the same time every week then use the subscription form below. No cost, no gimmicks, and you can unsubscribe at any time.