#340 — May 16, 2018 |
Frontend Focus |
The Front-End Tooling Survey 2018 Results — Over 5,000 frontend developers took part in this survey we linked a few months ago. Here are the results on what tools and techniques devs are using right now. Lots to digest here. Ashley Nolan |
A Strategy Guide To CSS Custom Properties — Michael Riethmuller takes a thorough look at strategies for getting the most out of CSS Custom Properties (a.k.a. ‘CSS variables’) which are now supported in all mainstream browsers. Smashing Magazine |
▶ What's New in Chrome DevTools — At Google I/O 18, Paul Irish and Jason Miller presented a great roundup of what’s new in the Chrome DevTools. 30 minutes here could boost your productivity for the rest of the year. Google Chrome Developers |
HTML. CSS. JavaScript. Learn Free For 10 Days — Learn the right skills in the right order with learning paths for top front-end technologies. Get 10 days free on Pluralsight. Pluralsight sponsor |
Introducing the Microsoft Edge DevTools Protocol — As of the Windows 10 April 2018 update, Microsoft’s Edge browser includes support for diagnosing and debugging Edge tabs remotely. They’re aligning with Chrome’s own DevTools protocol and as a result a working group has been created to help with interoperability. Brendyn Alexander (Microsoft) |
▶ The Web: A Google Flavored State of The Union — A Google I/O talk highlighting recent transformations of the modern web and a sneak peak into new advances coming to the platform in the near future. Ben Galbraith and Malte Ubl |
All The Ways to Deal With Line Breaks with CSS and HTML — Some helpful approaches and suggestions for dealing with troublesome line breaks both with HTML and CSS. Chris Coyier |
What's New in Firefox 61: Developer Edition — The developer tools are now more customizable, work better with Babel and webpack, and include a new Accessibility Inspector. Mozilla Hacks |
Web Authentication API Added to 'Can I Use' — The popular ‘Can I Use’ Web API browser support tool is now tracking which browsers support the new Web Authentication APIs. Currently just Firefox 60, but Chrome and Edge have support coming soon. Can I Use |
Blink Intent to Ship: CSS Scroll Snap — CSS Scroll Snap introduces snap positions as a way to enforce the scroll offsets that a scroll container’s visual viewport may end at after a scrolling operation has completed. Yunjia (Sandra) Sun |
Blink Intent to Experiment: Picture-in-Picture (PiP) Support — Allow sites to create a floating video window on top of other windows so users may continue consuming media. François Beaufort |
The O'Reilly Fluent Conference — Keynoting at Fluent: Cory Doctorow and Brendan Eich. Get your pass today and save 20% with code JSW20 O'Reilly Media, Inc. sponsor |
💻 Jobs |
Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work. Sticker Mule |
Frontend Web Engineer (London, UK) — Join us to develop our web app and internal tools that enable us to build cities & run transport services. Citymapper |
Front-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Create your profile to get started. Vettery |
📘 Tutorials |
Responsive Tables, Revisited — A brief exploration of using CSS to convert table rows to a more list-like layout for thinner viewports without duplicating content. Lea Verou |
Managing SVG Interaction with the Pointer Events Property Tiffany B. Brown |
Cheat Sheet Alert - Functional Programming with JavaScript Is Out Now Progress Kendo UI sponsor |
CSS's '!important' and What To Use It For — The Adam Laki |
7 Rules of Using Radio Buttons vs Drop-Down Menus for Forms Saadia Minhas |
First Input Delay: A New Web Interactivity Metric — First Input Delay (FID) is a new performance metric for measuring page responsiveness for real users in the wild. Philip Walton (Google) |
Bringing Screen Capture to Microsoft Edge with the Media Capture API — Edge is the first browser to support Screen Capture via the Screen Capture API. Angelina Gambo and Bernard Aboba (Microsoft) |
How to Create A Simple, Accessible CSS Loading Spinner — A step-by-step tutorial on how to create an animated, single element CSS loading spinner that’s accessible. Stuart Nelson |
Linux Cloud Hosting Starting at 1GB of RAM for $5/mo Linode Cloud Hosting sponsor |
💫 Golden Oldies |
How to Use HTML5 Custom Data Attributes (and Why) SitePoint |
The Power of CSS's rgba() Color Function — Some tricks you can pull off with the Ahmad Shadeed |
Combining Fonts with CSS's 'unicode-range' Property Jake Archibald |
5 Image Lazy Loading Techniques to Improve Performance Maria Antonietta Perna |