January 10, 2018 Frontend Focus Issue 322 — January 10, 2018 What’s New in HTML 5.2? HTML 5.2 became an official W3C Recommendation (REC) a month ago, but what did it introduce and change? Ire AderinokunCSS Grid Explained in 7 Minutes (with Diagrams and Code)A quick and easy high level introduction to the main concepts of CSS Grid given by Morten Rand-Hendriksen at Wordcamp Europe 2017. StatuscodeA Front-End Performance Checklist for 2018A front-end performance checklist with everything you need to know to create fast Web experiences this year. Vitaly FriedmanIntroduction to Vue.js with Sarah DrasnerGet up and running in a hurry with the Vue.js JavaScript framework. Learn how to build and maintain complex applications quickly and efficiently in this practical guide to Vue.js by Sarah Drasner. Frontend Masters SponsorNew Flexbox Guides on MDNEight new guides covering the real use cases of Flexbox, looking at where Grid should be used instead, and clarification on how the spec works with Writing Modes, Box Alignment and ordering of items. Mozilla HacksStimulus: A JS Framework for The HTML You Already HaveRather than replace your HTML or rendering mechanisms, Stimulus augments your existing HTML with functionality. From the creators of Ruby on Rails. BasecampBrowser Mitigations Landing for New Class of Timing AttackYou’ve probably heard of Meltdown and Spectre, two timing attacks that can affect modern CPUs which can also be taken advantage of from browsers.. Mozilla Security BlogHow to Recreate Medium’s Article Layout with CSS GridIf you’ve not played with CSS Grid yet this is an accessible example-led study of what it makes easy. Per Harald BorgenCSS Grid Layout Secrets RevealedDig into the CSS Grid Layout specification to uncover some features you might have missed – and some coming soon. Rachel AndrewJobs Visual Analytics Researchers and Software Developers – Vienna, AustriaJoin our team and develop novel Web intelligence solutions for EU and Google Digital News Initiative projects (JavaScript, Java). webLyzard technology Senior Developer – React / Node (Boston or remote)Join our fast-growing startup to help people make better health, wellness and financial decisions. Maxwell Health Front-end Dev Jobs at 4,000+ CompaniesTry Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. VetteryIn BriefWhat Spectre and Meltdown Mean For WebKit news An explainer on how Spectre and Meltdown affect existing WebKit security mechanisms and what short-term and long-term fixes WebKit is deploying to provide protection against this new class of attack.Filip PizloImproving URLs for AMP Pages news AMP pages will now show a page’s original URL, instead of using the google.com/amp URL scheme.Accelerated Mobile Pages ProjectMaking CSS Animations Feel More Natural tutorialBrandon GregoryBetter Web Typography with Font Variants tutorial Learn about a wide variety of font-variant- CSS properties.Jonathan HarrellRobust Client-Side JavaScript: A Developer’s Guide tutorialMat?hia?s S?chäf?erAnimating With Minimal CSS and SVGs tutorialDavid BrennanBe A Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics MongoDB University courses are free and give you everything you need to know about MongoDB.mongodb SponsorPermissions On The Web Suck opinion “there are uses for push notifications, what we really need to fix are the permissions”Phil NashWeb Design Trends 2018: What Could Make an Impact This Year? opinionOliver Lindberg11 Things I Learned Reading the CSS Grid Specification opinionOhans EmmanuelChrome Only? Careful Now opinion Chris Coyier warns developers not to build web experiences that only work in Chrome.CSS TricksIntroducing Heroicons: A Set of 104 SVG UI Icons toolsSteve SchogerReal-Time Error Monitoring, Alerting, and Analytics for JavaScript ? ROLLBAR SponsorUppy: A Powerful, Modular JavaScript File Uploader codeTransloaditheadless-devtools: Perform Chrome DevTools Actions From Code codeJohnny Cowchimpelement-ready: Detect When an Element is Ready in the DOM codeSindre SorhusPopmotion: A Functional JavaScript Motion Library code Mix tweens, physics, and user input actions to create elegant Web-based interactions – all in 11KB.PopmotionSave Time with the Best, Fastest Angular Spreadsheets & UI Components GrapeCity JavaScript Solutions Sponsor Source link