March 29, 2017 | Comments Read this e-mail on the WebFrontEnd Focus Issue 283 — March 29, 2017 Practical CSS Grid: Adding Grid to An Existing DesignEric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers. Eric MeyerPreload, Prefetch And Priorities in ChromeAddy Osmani digs deep into Chrome’s networking stack to see how features like link preloading and prefetching work, and how you can use them more effectively. Addy OsmaniCreating a Voice Assistant with the Web Speech APIA demo of how the SpeechRecognition and SpeechSynthesis interfaces of the Web Speech API can be used to create a voice assistant for a website. Suvi VignarajahTry Kendo UI – the most complete JavaScript/HTML UI library with 70+ widgetsKendo UI delivers everything you need to build modern web applications under tight deadlines – from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps. Progress SponsorUsing DevTools to Tweak Designs in the BrowserToggling classes with checkboxes, editing content with designMode, hiding elements, screenshots, color changes, and more. Ahmad ShadeedRecreating 8-Bit Game Music with the Web Audio APIA fun, creative coming together of Canvas, the Web Audio API, the Commodore 64 and the NES. Greg HovanesyanHassle-Free Full Bleed with *:not()Rather than breaking out of container DIVs, you can pad/margin all non image/video elements instead. Dave RupertSafari 10.1 Widely Released with Many New FeaturesThe macOS browser now supports the Fetch API, IndexedDB 2.0, the Gamepad API, Input Events, Custom Elements, CSS Grid, HTML5 form validation, and more. AppleJobs Front End Developer at Snapdocs in San Francisco (YC W14)Pre-Series A company in mortgage space with real revenue and growth, hiring empathetic front end engineers who are comfortable with Rails. Snapdocs Sr. Front-End Engineer — React/Redux (San Francisco)We’re looking for an enthusiastic app developer to join our team. We use React, Flow, GraphQL, Relay, Apollo Client on a daily basis. Quri IncCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefFaster 3D Rendering with WebGL 2.0 newsGoogleCSS Custom Properties in Microsoft Edge news As of EdgeHTML 15, Microsoft Edge supports CSS Custom Properties.Greg WhitworthDiscover How to Write Apps in Angular with Rangle’s Online Sessions Register to join Rangle’s FREE Angular online training course for JavaScript developers on April 4 – 5!Rangle.io SponsorA Complete Guide to CSS Grid Layout tutorialChris HouseAn Introduction to the CSS Grid Layout Module tutorialSitepointHow to Build a Shifting Underline Hover Effect With CSS and JavaScript tutorialGeorge MartsoukosUsing matrix3d() for Frame-Perfect, Jank-Free Custom Scrollbars tutorialGoogle DevelopersYou ‘Kinda’ Can Use Custom Fonts in HTML Emails tutorial Sorry, no Gmail, but Apple and iOS Mail and others have support.Chris CoyierA 17 Minute Overview of Twitter’s Front-End Architecture videoGiuseppe GurgoneIs Using SVG Images Good for Your Site’s Performance? opinionMaria Antonietta PernaCSS Is Broken opinion Sergio thinks CSS is broken: “Anyone who has used CSS in a big project knows it.” Keith J. Grant responds with a follow-up: CSS is Not Broken.Sergio Zamarro8 CSS Gotchas to Start Your Morning Off Right opinion A tongue-in-cheek critique of CSS from someone who’s clearly been burnt by its quirks 🙂 (Haven’t we all?)Isaac LymanThoughts on Negative Margins opinion “TL;DR I don’t trust ‘em.”Dave RupertTrack errors in your apps with Sentry tools Sentry’s open-source error tracking tells you when your code breaks, without the need for bug reports.sentry SponsorPolished: A Lightweight Toolset for Writing Styles in JavaScript toolsMaximilian StoiberPushy Button: CSS Pressable 3D Buttons codeDronca RaulEmerge: Declaratively Coordinate How Elements Appear on Page Load codeIlya BirmanChoices: Configurable Select Box and Text Input (without jQuery) code Similar to Select2 and Selectize but without the jQuery dependency.Joshua JacksonHTMLMinifier: JavaScript-Based HTML Compressor/Minifier code toolsJuriy ZaytsevA Self-Truncating Horizontal List Without Using JavaScript demo I won’t spoil it but figuring out how this works is fun.CodePenA Facebook Live-Style Bouncing Emoji/Reaction Effect demoCodePenCurated 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