Microsoft Edge gains Service Worker support

#338 — May 2, 2018 Read on the Web Frontend Focus A Guide to the State of Print Stylesheets in 2018 — We’re printing fewer documents than ever, but it pays to make it easy for users to print well-styled versions of documents like invoices, receipts, recipes, instructions, etc. Rachel Andrew What’s New in the Latest Microsoft Edge? A Lot — The foundation for full-featured PWAs is now here with Service Workers and push notifications enabled by default, there’s variable fonts support, Notification API support, improved ARIA support, support for CSS transforms on SVG elements, and more. Kyle Pflug (Microsoft) New Course ✨ Master CSS Grid and Flexbox — Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code. Frontend Masters sponsor Is ServiceWorker Ready? (Yes.) — The Edge news (above) means this page that analyzes cross-browser support for the Service Worker ecosystem has something to celebrate :-) All major browsers now support Service Workers. Jake Archibald HTML5 Boilerplate 6.1.0 Released — The popular, long standing front-end template get some updates to underlying dependencies and switches from JSHint to ESLint. Downloads here. Rob Larsen Pure CSS Francine: An Exquisite Portrait Created in Pure CSS — ‘Demos’ normally go at the end of the issue but this 18th-century oil painting-style portrait hand coded in HTML and CSS (4000 lines of Less, specifically) is magnificent. There’s also this one. Andy Baio noted that the image looks rather different on older browsers. Diana Smith Finger-Friendly Numerical Inputs with 'inputmode' — On mobile in particular, it’s very helpful if input fields that expect numerical values have a numerical UI, but there are a few ways to approach this. Ollie Williams Measuring Sites with Mobile-First Optimization Tools — Not sure how to remove the code debt that bloats and weighs down your site? Here are specific ways mobile performance impacts your site and page speed results. Jon Raasch An Update on CSS Grid Level 2 and Subgrids — A handy post for getting a feel for progress on subgrids with future versions of the CSS Grid spec. Rachel Andrew 💻 Jobs Front-end Developer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote. Helical Levity Frontend Developer (m/f) #VueJS / Berlin — We are looking for an experienced & passionate developer who knows how browsers work below the surface. Join Pepper.com. Pepper.com Open to a New Job? Sign Up for Vettery — Top developers can get 5+ interview requests during their first week on Vettery. Vettery 📘 Tutorials Getting More CSS Grid Flexibility with 'minmax()' — minmax lets you specify a minimum and maximum size for your grid tracks. Michelle Barker How to Get Started with User Timing and Custom Metrics speedcurve sponsor Solved With CSS: Dropdown Menus Una Kravets Looking at the 'line-clamp' CSS Attribute — Truncates text at a specific number of lines. Support is mixed (Chrome and Safari, but not Firefox or Edge). Geoff Graham Radial Gradient Recipes — A lot to enjoy here, complete with embedded CodePen examples. Chris Coyier Native Modals Using HTML 5.2's 'dialog' Element — Note that support is currently limited to Chrome. Alligator Choosing Cameras in JavaScript with the mediaDevices API Phil Nash The Power of 'Flex-Grow' — To get access to Flexbox’s full power, you need to venture past its most basic properties. Ethan Jarrell 'display: contents' Is Not a CSS Reset — And using it as one could negatively affect accessibility. Adrian Roselli Cheat Sheet: Functional Programming with JavaScript Progress Kendo UI sponsor 🔧 Code and Tools Subfont: Generate Optimal, Optimized Web Font Subsets for Pages — It automatically figures out what characters are used from your Web Fonts and generates smaller versions. Peter Brandt Müller cssgr.id: An Interactive CSS Grid Code Tool and Generator Dan Netherton $20 Free On A New Linode Account — Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account. Linode Cloud Hosting sponsor Web Audio API DSP Playground — This is a lot of fun to noodle with. Arthur Carabott Bootstrap 4.1.1 Released — The first patch release of Bootstrap 4. Mark Otto, Jacob Thornton, and Bootstrap contributors CSS Grid 12 Column Layout Erik Monjas CKEditor 5 v10 Released: A Powerful WYSIWYG Editor Framework — The first stable release of CKEditor 5. Now fully GPL 2+ licensed. Piotr Koszuliński

by via Frontend Focus