May 23, 2018 #341 — May 23, 2018Read on the WebFrontend Focus Getting Started with Web Push Notifications — Microsoft Edge now supports web push notifications via the Push API and to celebrate the Edge team has put together a superb introduction to the concepts involved.Microsoft Edge TeamLet’s Explore the Feature Queries Manager DevTools Extension — The Feature Queries Manager makes it easy to toggle @supports feature queries during development to help you develop for older browsers. Here’s a look at what it does, why, and how.Ire Aderinokun Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.Progress Kendo UI sponsorWhy to Never Forget type=’button’ on Generated Buttons — Buttons with no type attribute can be treated as submit buttons by default which isn’t always what you want.Lea Verou Evolving Chrome’s Security Indicators — If your site isn’t being served over HTTPS, Chrome shows a ‘Not Secure’ warning but later this year, HTTPS sites won’t show the ‘Secure’ messaging in the location bar as HTTPS will be assumed the sensible default.GoogleHyphenopoly: A Polyfill for Client-Side Hyphenation — Hyphenates text if the browser doesn’t support CSS hyphenation (intriguingly, this is one case where Chrome is the weaker browser).Mathias NaterBuilding a CSS ‘Dark Theme’ in a Day — A walkthrough of using modern CSS to create a darker ‘night mode’ for an app (a desktop app but the principles could apply to the Web too).Marcin Wichary? PWAs: Building Bridges to Mobile, Desktop, and Native — A 40 minute talk from Google I/O that goes into how browser vendors are enabling developers to use the web to build installable desktop apps and store-distributed mobile apps, as well as how Google is launching its own PWAs at scale.Google I/O ’18The Slow Death of Internet Explorer and the Future of Progressive Enhancement — Oliver Williams argues we can and should develop sites for modern browsers but without breaking backwards compatibility.A List ApartImplement 200+ Tools with the Flip of a Switch – Get Started for FreeSegment sponsor? JobsFrontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.x-teamSr. 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 MuleFront-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Take a few minutes to join our platform.Vettery? TutorialsWorking with Dynamic Bézier Curves and SVG in React — This is a gorgeous (and interactive!) tutorial.Josh ComeauOverriding Default Button Styles — A look at CSS to help eradicate button style headaches, rather than skipping them for a or divs. Plus, a related article that goes more into what new styles to apply.Chris CoyierNew Course: Master Automated Web Testing With Selenium — The course includes 30+ lessons, screencasts, code downloads and Q&A sessions with the author.Selenium.Academy sponsorBootstrap Grid: Mastering the Most Useful Flexbox Properties — Ahmed Bouchefra introduces key Bootstrap CSS classes for building layouts with the Bootstrap grid system, along with a quick introduction to using Flexbox.SitePointCreating Accessible CSS-Only Floating LabelsPablo Eugenio Lujambio MartinezMaking An Animated Navigation ComponentEder Diaz? Overlapping on the Web, Graphic Design Made Easy with CSS GridJen SimmonsExtensions in Firefox 61 — Now in beta, Firefox 61 includes numerous WebExtensions API related changes and improvements.Mike Conca (Mozilla)One-Directional Data Binding Without Frameworks — Uses an ES6 proxy to detect changes to an underlying variable.Jack TarantinoHow To Build a Responsive Blog Design with Bulma CSSZaydek? Code and ToolsKeyframes: A Simple CSS Animation Creator — Has a visual timeline to help create, view, and run animations without having to go back and forth between browser and editor.Mitch SamuelsLinux Cloud Hosting Starting at 1GB of RAM for $5/moLinode Cloud Hosting sponsorScrollHint — A JavaScript library to suggest that elements are scrollable horizontally, with the pointer icon. Demo here.Hori Godai Source link