June 17, 2017  |    Comments


Frontend Focus

Issue 292 — May 31, 2017
A run through some of the ‘good bits’ of the CSS Flexible Box Layout specification.
David Gilbertson
Scrolling opens a lot of doors to designers but isn’t without its drawbacks. Some tips on how to approach ‘long scroll’ experiences.
Nick Babich
Google will remove support for PNaCl early next year from “everywhere except inside Chrome Apps and Extensions” shifting their focus over to WebAssembly instead.
Brad Nelson

Get a full history in your source control system. See who made changes, what they did & why. See how.
Red Gate
  Sponsor
In this session from Google I/O, Addy Osmani covers PWA best practices, patterns for efficiently loading websites and the latest tools for getting fast and staying fast.
Google Chrome Developers
TJ VanToll explains why, despite the ridicule CSS sometimes gets from the developer community, he still loves it for its flexibility, simplicity and power.
Telerik Developer Network
Slides and a thorough write up of a talk on accessibility within the context of responsive web design.
Scott Jehl
Browserlist provides information to tools like Autoprefixer and postcss-normalize (and more) to let you specify which browsers you want to target.
Chris Coyier
A look at why “writing your styles in JavaScript isn’t such a terrible idea after all”.
Mark Dalgleish
Simon Codrington illustrates some UI design ideas using CSS animation and gradients.
SitePoint

Jobs

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

In Brief

Page Scroll Animations Made Easy with the AOS Library tutorial
Gajendar Singh

On-Scroll Morphing Background Shapes tutorial
A decorative website background effect where SVG shapes are morphing and transforming on scroll. Powered by anime.js and scrollMonitor.js.
Mary Lou

Full Page Background Video Styles tutorial
Tips and approaches for using videos as backgrounds.
The Media Temple Blog

Making Custom Properties (CSS Variables) More Dynamic tutorial
Dan Wilson

Accurately Checking for CSS Grid Support in Microsoft Edge tutorial
Greg Whitworth

The CSS Fractional Unit (fr) In Approachable, Plain Language tutorial
Ohans Emmanuel

How to Create Perfectly Centered Text With Flexbox tutorial
Craig Campbell

?? [Free until June 26] Squash Common JavaScript Bugs Course 
Join Todd Gardner’s course on Debugging and Fixing Common JavaScript Errors. You’ll be armed to squash bugs for good.
Frontend Masters  Sponsor

Chrome Won opinion
”..it’s safe to say that Chrome is eating the browser market, and everyone else except Safari is getting obliterated.”
Andreas Gal

What is the Future of Front End Web Development? opinion
Chris Coyier

HTML5: Where The Core Web Technology Is Headed Now opinion
Paul Krill

Muuri: Create Responsive, Sortable, Filterable and Draggable Grid Layouts tools
A JavaScript powered layout tool. Demo here.
Haltu

Flexbox Cheatsheet: Click to Copy Flexbox Properties to Your Clipboard tools
Valery Liubimov

Firefox Screenshots: A New In-Beta Web Screenshot Tool tools
Mozilla

$20 Free Credit on a new account. 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
linode  Sponsor

VideoContext: Experimental HTML5+WebGL Video Composition and Rendering API code
BBC

Elongated/Extruded CSS Text Shadows code
Mixfont

Progress Nav: An Example of Page Navigation That Shows Progress demo
CodePen

HN PWA: Hacker News Clients as Progressive Web Apps demo
Along the lines of TodoMVC, these are example PWAs built with different frameworks.
HNPWA





Source link