Read this e-mail on the Web
FrontEnd Focus

Issue 283 — March 29, 2017
Eric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers.
Eric Meyer


Addy 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 Osmani


A 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 Vignarajah


Progress

Kendo 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
  Sponsor


Toggling classes with checkboxes, editing content with designMode, hiding elements, screenshots, color changes, and more.
Ahmad Shadeed


A fun, creative coming together of Canvas, the Web Audio API, the Commodore 64 and the NES.
Greg Hovanesyan


Rather than breaking out of container DIVs, you can pad/margin all non image/video elements instead.
Dave Rupert


The macOS browser now supports the Fetch API, IndexedDB 2.0, the Gamepad API, Input Events, Custom Elements, CSS Grid, HTML5 form validation, and more.
Apple


Jobs Supported by Hired.com

Can’t find the right job? Want companies to apply to you? Try Hired.com.

In Brief

Faster 3D Rendering with WebGL 2.0 news
Google

CSS Custom Properties in Microsoft Edge news
As of EdgeHTML 15, Microsoft Edge supports CSS Custom Properties.
Greg Whitworth

Discover 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  Sponsor

A Complete Guide to CSS Grid Layout tutorial
Chris House

An Introduction to the CSS Grid Layout Module tutorial
Sitepoint

How to Build a Shifting Underline Hover Effect With CSS and JavaScript tutorial
George Martsoukos

Using matrix3d() for Frame-Perfect, Jank-Free Custom Scrollbars tutorial
Google Developers

You ‘Kinda’ Can Use Custom Fonts in HTML Emails tutorial
Sorry, no Gmail, but Apple and iOS Mail and others have support.
Chris Coyier

A 17 Minute Overview of Twitter’s Front-End Architecture video
Giuseppe Gurgone

Is Using SVG Images Good for Your Site’s Performance? opinion
Maria Antonietta Perna

CSS 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 Zamarro

8 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 Lyman

Thoughts on Negative Margins opinion
“TL;DR I don’t trust ‘em.”
Dave Rupert

Track 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  Sponsor

Polished: A Lightweight Toolset for Writing Styles in JavaScript tools
Maximilian Stoiber

Pushy Button: CSS Pressable 3D Buttons code
Dronca Raul

Emerge: Declaratively Coordinate How Elements Appear on Page Load code
Ilya Birman

Choices: Configurable Select Box and Text Input (without jQuery) code
Similar to Select2 and Selectize but without the jQuery dependency.
Joshua Jackson

HTMLMinifier: JavaScript-Based HTML Compressor/Minifier code tools
Juriy Zaytsev

A Self-Truncating Horizontal List Without Using JavaScript demo
I won’t spoil it but figuring out how this works is fun.
CodePen

A Facebook Live-Style Bouncing Emoji/Reaction Effect demo
CodePen

Curated 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