Frontend Weekly Digest #29 (17–22 October 2017)

Web-development

• Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN
• How I would explain a decade of web development to a time traveler from 2007
• Front-End-Checklist — The perfect Front-End Checklist for modern websites and meticulous developers
• 5 Tips for Starting a Front-End Refactor
• A Painless Introduction to APIs: Usage, Integration, & Benefits
• Migrating towards Yarn and Webpack
• Accessible components: #1 colors and contrast, #2 dynamic ARIA labels

• AMP/PWA:
  • AMP: Two years of user-first webpages
  • The Argument for AMP: Lessons from 10 Case Studies
  • DevTools Tips for Progressive Web Apps
  • How to debug Progressive Web Apps using Browser Developer Tools
• Animations:
  • pure CSS application of the blobs technique
  • A First Look at “GSDevTools” by GreenSock
  • Dynamic Shape Overlays with SVG
  • Seamless loop SVG stroke animations
  • Metaballs, organic looking squishy gooey blobs , replicated effect using CSS & SVG by applying both blur and contrast filters to an element.

CSS

• A Look Back at the History of CSS
• Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)
• So, Can We Use CSS Variables Yet?
• Breaking down CSS Box Shadow vs. Drop Shadow
• My approach to using z-index

• Fonts:
  • Web Typography: Numerals
  • Fontisto — the iconic font and css toolkit
  • A bunch of demos for different web font loading strategies.
• Grid Layout:
  • The Story of CSS Grid, from Its Creators
  • What I discovered about layout via CSS Grid,- Rachel Andrew at CSS Day 2017
  • Naming Things In CSS Grid Layout
  • An Introduction to CSS Grid Layout: Part 1, Part 2

JavaScript

• A Tricky JavaScript Interview Question Asked by Google and Amazon
• Modern JavaScript Explained For Dinosaurs
• The melting pot of JavaScript, by Dan Abramov
• Controlling Element Visibility with the Intersection­Observer API
• Ember.js: The Perfect Framework for Web Applications
• Моки в тестах для кода с душком (Mocking is a Code Smell)

• VueJS:
  • Build A Real-Time Chat App With VueJS, Vuex & Cloud Firestore
  • vue-mc — Models and Collections for Vue.js
  • Vue.js + Brunch: The Webpack Alternative You’ve Been Hungry For

• React:
  • How to structure components in React?
  • How to migrate an application from AngularJS to React and Redux

• Angular:
  • Top 12 Productivity Tips for WebStorm and Angular — Part 1
  • Angular 4 Basics : Data binding
• Libs & Plugins:
  • Say hello to Schnack.js: A new Disqus-like commenting drop-in for static websites
  • Introducing PayPal’s open-source cross-domain javascript suite
  • accessibilityjs — Client side accessibility error scanner

Browsers

• New in Chrome 62
  • Chrome 62: Improved Network Information API, Support for OpenType Variable Fonts and more!
  • PWAs with Firefox Nightly
  • What’s New in Microsoft Edge in the Windows 10 Fall Creators Update: CSS Grid Layout, object-fit/position, WebVR motion controllers, Service Worker preview, DevTools improvements! + faster/better/stronger
  • Release Notes for Safari Technology Preview 42

See more on https://www.zfort.com/blog/