February 7, 2018


Frontend Focus

Issue 326 — February 7, 2018
Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future.
Rachel Andrew
Google Chrome will soon begin to block ads on some sites by default. Here’s a closer look at how it will work.
Daniel Aleksandersen
Firefox’s new JS debugger is pretty powerful, and will help you write fast, bug-free code.
Smashing Magazine

Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.
Frontend Masters
  Sponsor
Historical context on how CSS approaches/tooling have evolved to what we have today.
Peter Jang
A meaty first step in a series on creating a game built around the mechanic of React and Redux controlling SVG elements.
Bruno Krebs
We all want images to load fast: “Choosing the right image format, optimizing the quality and using responsive images are important tasks, but what can we do beyond that?”
Smashing Magazine
We linked to the code a few weeks ago but now the CTO of Basecamp and creator of Ruby on Rails shares his vision for an alternative to single-page client-side MVC apps.
David Heinemeier Hansson
The grid- prefix is no longer required for properties such as grid-gap and grid-row-gap, (although Firefox still needs it right now).
Manuel Rego on Twitter

Jobs

In Brief

CSS Grid Layout Module Level 2: First Public Working Draft news
Level 2 expands Grid by adding ‘subgrid’ capabilities and aspect-ratio–controlled gutters.
W3C

How W3C is Fast-Forwarding Media Support on the Web news
François Daoust (W3C)

Welcoming Progressive Web Apps to MS Edge and Windows 10 news
Edge now supports Service Workers and push notifications.
Microsoft

Project Tracking, Teamwork & Client Reporting Like You’ve Never Seen Before 

monday.com  Sponsor

Get a Parallax Effect on the Cheap tutorial
It’s pretty neat just how simple this approach is.
Dave Rupert

Automatic Visual Diffing of Web Pages with Puppeteer tutorial
How to set up Puppeteer to automate both taking screenshots of your project and comparing them.
Monica Dinculescu

Hyperapp + Parcel = A Neat Way to Create Frontend Apps tutorial
Beat that JavaScript fatigue with a tiny Elm-inspired frontend library plus a new, no-config asset bundler?
Adam Boro

Three ‘Superpowers’ of the Flexbox Model tutorial
How flex-basis, flex-shrink and flex-grow work.
Maciej Nowakowski

Using the ‘initial’ Keyword in CSS tutorial
It can act something like a ‘reset’ for CSS properties.
Adam Laki

Counting with CSS Counters and CSS Grid tutorial
Cleverly using CSS Grid to work around a CSS counter limitation.
Preethi Sam

Five Things Episode 4: Five Things About RxJS in Angular, with Ward Bell video
In this episode learn how Angular uses RxJS and how RxJS helps with cloud development with Ward Bell.
Microsoft  Sponsor

CSS Best Practices: Scaling CSS in a Fast-Growing SaaS Startup story
Sqreen

A History of WaSP and Why Web Standards Matter story
Jason Hoffman

Frontend Frameworks: Custom vs Ready-to-Use Solutions opinion
Ivaylo Gerchev

30 Scalable and Customizable SVG Backgrounds for Web Pages tools
These are really neat.
Matthew Lipman

AccessLint Hooks into GitHub, and Comments on Your Pull Requests tools
AccessLint  Sponsor

Font Awesome Free 5 Now Available on GitHub tools
Fort Awesome

LCUI: A C Library for Building Desktop UIs with C, XML and CSS code
Like C? Like Web technologies? Here’s a lightweight way to marry the two if building small desktop apps.
Liu Chao





Source link