March 21, 2018 #332 — March 21, 2018Read on the WebFrontend Focus TUI Chart: Attractive Charts for the Web — Cross-browser (including IE 8) with bar, line, area, bubble, pie, heatmap, bullet, and boxplot charts out of the box as well as combined graphs.NHN Entertainment? Improving Page Performance with Chrome DevTools — 11 minutes of useful lessons including capturing screenshots as a page loads, using local overrides, and tweaking source on the fly then saving it locally.Umar HansaHow BBC Interactive Content Works Across AMP, Apps, and the Web — Publishing content to numerous media can cause a lot of extra development overhead. Here, Chris Ashton explains how one area of the BBC have approached the problem.Smashing Magazine Why Your Site is Slow — Issues like slow queries and redundant JS files are often blamed when a site is slow, although there are numerous factors that can affect performance. This presentation dives into the many answers to this question and looks for the root causes.Pantheon sponsorUnblocking Clipboard Access in Chrome 66+ — The Async Clipboard API supersedes the document.execCommand approach to clipboard interactions from JavaScript and makes the process asynchronous.Jason MillerSensor APIs Are Now W3C Candidate RecommendationsW3CBringing Expressive Typography to Microsoft Edge with Variable Fonts — Leaning on recent innovations of OpenType Variable Fonts.Microsoft Edge Dev Blog Pell 1.0: A Tiny, Simple WYSIWYG Web Text Editor — No dependencies, ES6, and only 1.38KB minned and gzipped. Play with a demo here.Jared ReicheBook: The Modern App Stack (MERN and more) — This free book includes code tutorials you can explore from your eReader or phone.MONGODB sponsorHow We Adopted CSS Grid at Scale — From team buy-in to fallbacks, how one team approached the implementation of CSS Grid.Julian GaviriaSensor APIs are now W3C Candidate RecommendationsW3C? JobsSoftware Engineer at Fat Lama (London) — Technology and engineering is at the heart of what we do at Fat Lama – help us build the rental marketplace for everything.Fat LamaSenior Frontend Engineer (Berlin) — Love working at scale, solving challenging engineering problems, and think like our customer? This is the place for you.ZALANDOFront-End Expert? Sign Up for Vettery — Create your profile and we’ll connect you with top companies looking for talented front-end developers.Vettery? TutorialsThe Security and Performance Benefits of rel=’noopener’ — When a link opens another page in a new tab or window, the new page can still access the previous one with JavaScript. You can prevent this with a single rel attribute.Adam LakiCSS Grid Application Layout in Production — Application layout using CSS Grid while maintaining IE11 support.Philipp SporrerRendering Engines and Tips to Optimize Their PerformanceAlexander ZlatkovTheming with Variables: Globals and Locals — How to use CSS variables to theme a design system without falling into common traps.Andrés GalanteCreating a Vue File Reader Component Using the FileReader APIAlex Jover MoralesGetting Started with the Web MIDI API — Covers the basics of MIDI and the Web MIDI API showing how simple it is to create frontend apps that respond to musical inputs. It’s quite niche but also neat the Web platform can handle this.Peter AngleaEasing Gradients: Why and How — Makes linear CSS gradients look a lot nicer but requires workarounds for now.Andreas LarsenCSS: The Bad Bits (And How to Avoid Them) — The ‘bad bits’ being global scope, overly specific rules, implicit percentage rules, and z-index.Joe Forshaw? Code, Tools & DemosTrianglify.io: Web-Based Low-Poly Triangle Pattern Generator — Ideal for backgrounds. Can output PNG or SVG.Quinn RohlfFix JavaScript Bugs Like a Boss ?ROLLBAR sponsor27 Examples of Styling HTML Tables from CodePen — A wide variety of examples here complete with code to learn from.Freebie SupplyDriver.js: A ‘Tour’-Style Mechanism to Drive a User’s Focus Across Web Page ElementsKamran AhmedOffscreenCanvas Nearly Here; A Demo — Currently behind flags in Chrome and Firefox, OffscreenCanvas provides a canvas that can be rendered off-screen (such as in Web Workers).Eric Bidelman on TwitterTry Ext JS: A JavaScript Framework to Build Responsive Apps QuicklySencha, Inc. sponsorSuper Mario World Made Only with CSS Gradients — Just an animation but pretty cute techniques used here.Alcides Queiroz Source link