January 25, 2017 — Read this e-mail on the WebFrontEnd Focus Issue 274 — January 25, 2017 Front-End Developer Handbook 2017Cody Lindley’s popular guide to the practice of front-end engineering, how to learn it, and what tools to use, has been updated for 2017. Cody Lindleyflow-root: The End of the Clearfix Hack?A new value of the ‘display’ property called flow-root has shipped in Chrome Canary and Firefox Nightly — Rachel takes a look at what it can do. Rachel AndrewChrome 56 Will Aggressively Throttle Background TabsAn optimization to throttle background tabs’ timers will be included, but Samuel Reed has some concerns over things this could break. Samuel Reed“Use your nice tools without jumping through unnecessary hoops”: npm on the jobnpm’s the obvious choice for managing JavaScript dependencies, but when Ellie Mae built a web app, they needed to keep some code private. How? “Choose tools that work with the grain of how you want to work, and work with the grain of your tools…” npm, Inc. SponsorSafari 10.1 Released: CSS Grid, Fetch API, and MoreNew WebKit features in 10.1 include CSS Grid support, the ability to specify CSS colors in wider color spaces, IndexedDB 2.0, and support for Fetch, a replacement for XMLHttpRequest. AppleFirefox 51 ReleasedA rundown of the new features in Firefox 51, a relatively substantial release feature-wise with WebGL 2, FLAC support, warning for non-secure logins, and more. MozillaIs Semantic CSS a Sensible CSS Best Practice?A controversial thought-piece on whether ‘non semantic CSS’ is always a bad thing. The author states: “I think “semantic CSS” is pretty much disconnected from today’s authoring workflows and goals.” Thierry KoblentzMaking Responsive HTML Email Coding Easy With MJMLThis step-by-step tutorial covers how to create a responsive email using MJML, a framework that abstracts away a lot of the HTML email cruft. Nicolas GarnierJobs Front-end Developer at Mux (YC’16, San Francisco)Come build video performance monitoring in React with authors of Video.js and the Youtube player. Mux is fast becoming a leader in cloud video technology and analytics. Mux Frontend Developer (React) at X-Team (Remote)We’re looking for a developer with an extensive knowledge of React and Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-TeamCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefGoogle’s Progressive Web Apps Turn Mobile Sites Into Android Apps news Chrome’s new Progressive Web Apps bridge the gap between a typical mobile site and a dedicated app, and they’ve just gone live on Android.Adam IsmailWebGL 2 Lands in Firefox news WebGL 2 is based on OpenGL ES 3.0 and now available by default. Chrome 56, currently in beta, also supports it.Mozilla HacksBest in Class UI Components for Angular Development – Kendo UI for Angular 100% jQuery-free Angular components built from the ground-up which deliver the business app essential building blocks.Progress SponsorHTML5 Page Structure Basics tutorialLouis LazarisA 5 Minute Intro to Styled Components tutorialSacha GreifFun Web Animation Effects with KUTE.js, a JS Animation Engine tutorialAntonietta PernaBalancing Text and Images with Flexbox tutorialDudley StoreyAnimate to Different End States Using One Set of CSS Keyframes tutorialAna TudorCommunicating Between Web Workers via MessageChannel tutorialDr. Axel RauschmayerBuilding a Simple Pie Chart in SVG tutorialDavid Gilbertson3 Ways to Create a Table With Borders Only On The Inside tutorialCSS TricksA Simple Use of CSS Grid tutorial A basic two column layout using Grid with a Flexbox fallback.Tim SmithCode-Splitting Your Way to Better Performance with Webpack video A quick 6 minute conversation.Google Chrome Developers5 Web Trends for 2017 opinion What’s coming with PWAs; the rising tide of functional reactive; looking beyond REST to GraphQL and Falcor; and more.Allyson MacDonaldBest UX Practices for Long Scrolling Pages opinionNick BabichMaking Magic with WebSockets and CSS3 storyHélio DoloresHow to find and fix the slowest code in your .NET application tools Find bottlenecks in your code or database and boost performance with the new ANTS Performance Profiler 9. Try free.Red Gate SponsorGraaf: A Collection of Pure CSS Grid Overlays for Designing toolsSimple Electron App Samples code Electron makes it easy to build cross platform apps with JS, HTML and CSS.ElectronQuark: A Microscopic Atomic CSS Polyfill in 140 Bytes code Classes like color-red fontSize-20 get translated to CSS automatically.Tommy HodginsCurated by Peter Cooper and published by Cooperpress. If you like this, you may also enjoy: JavaScript Weekly, Node Weekly, and React Status.Stop getting FrontEnd Focus : Change email address : Read this issue on the Web© Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK Source link