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! Headline 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. Sponsorship 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. Articles Creating 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 WebExtensions v3 considered harmful 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 Tutorials Putting the 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 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. <ul class=”carousel”> <!– 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”> </ul> How to Stop Using Browser Dev Tools and Start Using Your Editor’s Debugger I’m such a console.log() javascript developer. Actually I lie, I’m not anywhere near the point that I could refer to myself with “javascript” and “developer” in the same sentence, unless it’s prefixed with “I’m a really terrible “. For those of you that have honed your craft a little better, you might be interested in setting up VS Code with a debugger directly within the code editor. I’m even going to do this myself so I can see the things I’m doing wrong without having to switch windows Table Design 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 best. 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 justice.js A performance metric bar with a streaming FPS graph Input: Fonts for Code Check out Input, a new Font that is perfect for including code snippets on your site Jobs 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. 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. 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.