May 16, 2018 #340 — May 16, 2018Read on the WebFrontend 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 NolanA 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 sponsorIntroducing 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 UblAll 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 CoyierWhat’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 HacksWeb 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 UseBlink 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) SunBlink 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 BeaufortThe O’Reilly Fluent Conference — Keynoting at Fluent: Cory Doctorow and Brendan Eich. Get your pass today and save 20% with code JSW20O’Reilly Media, Inc. sponsor? JobsSr. 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 MuleFrontend Web Engineer (London, UK) — Join us to develop our web app and internal tools that enable us to build cities & run transport services.CitymapperFront-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Create your profile to get started.Vettery? TutorialsResponsive 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 VerouManaging SVG Interaction with the Pointer Events PropertyTiffany B. BrownCheat Sheet Alert – Functional Programming with JavaScript Is Out NowProgress Kendo UI sponsorCSS’s ‘!important’ and What To Use It For — The !important keyword gives the associated CSS property precedence.Adam Laki7 Rules of Using Radio Buttons vs Drop-Down Menus for FormsSaadia MinhasFirst 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 NelsonLinux Cloud Hosting Starting at 1GB of RAM for $5/moLinode Cloud Hosting sponsor? Golden OldiesHow to Use HTML5 Custom Data Attributes (and Why)SitePointThe Power of CSS’s rgba() Color Function — Some tricks you can pull off with the rgba color function.Ahmad ShadeedCombining Fonts with CSS’s ‘unicode-range’ PropertyJake Archibald5 Image Lazy Loading Techniques to Improve PerformanceMaria Antonietta Perna Source link