Frontend Weekly Digest #16 (17–23 July 2017)
Jul 23, 2017 · 3 min read

Web Development
- Playing with Shadow DOM
- Measuring web performance; it’s really quite simple
- Musings on HTTP/2 and Bundling
- More Gotchas Getting Inline SVG Into Production — Part II
Practice:
- Create Graphics with HTML Canvas: free course at egghead.io
- From zero to hero, creating WebVR experiences with Babylon.js on all platforms
- Building a 3D Rotating Carousel with CSS and JavaScript
- GreenSock for Beginners (Part 2): GSAP’s Timeline
AMP/PWA:
- How to Use AMP with WordPress
- How Accelerated Mobile Pages (AMP) Can Boost Your SEO
- We now have a community-approved Progressive Web Apps logo!
- A Beginner’s Guide to Progressive Web Apps & the Frontend Web
- Build a Progressive Web App: Offline Git Trending App Part 1 (Concepts and Service Workers)
- Build An Offline Git Trending PWA Part 2: Caching and Offline
Tools:
- bundle-buddy — A tool to identify bundle duplication across splits.
- How to use Polymer with Webpack
Animations:
CSS
- How to do CSS only frosted glass effect?
- Introducing BEM: The popular CSS naming convention
- Using CSS to detect and counting Prime Numbers
- Let’s Get Critical: Minimizing Render-Blocking CSS With Webpack
- Disable scrolling zoom in Google Maps iframe
Fonts:
- What do Variable Fonts mean for Web Developers?
- 4 techniques for responsive font sizing with SCSS
- RFS: the automated approach for responsive font sizes
CSS Grid Layout:
- Enhancing CSS Layout: From Floats To Flexbox To Grid
- Refer to the spec : background and motivation
- Why display: contents is not CSS Grid Layout subgrid
- CSS Grid Layout Slideshow
- A Collection of Interesting Facts about CSS Grid Layout
JavaScript
- The State Of JavaScript
- Ten Things A Serious JavaScript Developer Should Learn
- Hidden messages in JavaScript property names
- When that “simple” JavaScript tutorial is super complicated
- A Modern Day Front-End Development Stack. This article looks at the revolution in JavaScript development over the past few years.
- 6 jQuery-inspired Native DOM Manipulation Methods You Should Know
- Javascript tools for end-to-end testing web applications
- The State of Internationalization in JavaScript
- Angular vs React vs Vue
ES2015+:
VueJS:
- Flue. Another flux library
- How To (Safely) Use A jQuery Plugin With Vue.js
- The Story of our Progressive Migration from Backbone to Vue.js
- Getting Started With Vue.js
- Vue.js API in the Terminal
- Vue.js: The Progressive Javascript Framework
- Learn how to work with Computed Properties in VueJS
- How to Use Vue.js watchers for Async Updates?
React:
- 8 things to learn in React before using Redux
- React Starter Kit — Fiercely quick front-end boilerplate and workflows, React.js, Babel, PostCSS, Webpack
- Intro to Hoodie and React
- How to Create a Reddit Clone Using React and Firebase
- How to Use React, ES6, Yarn and Webpack to Build a WordPress Plugin
- How to Learn React: A Five-Step Plan
Angular:
- Lazy loading: code splitting NgModules with Webpack
- Connect Angular Forms to @ngrx/store
- Angular 4 — Third Party API’s
Libs & Plugins:
- RE:DOM — a tiny DOM library which adds some useful helpers to create DOM elements and keeping them in sync with the data.
- picodom — Picodom is a 1 KB Virtual DOM builder and patch function.
- Popmotion — The JavaScript motion engine
- mesh — Visualise data and edit JavaScript code using a spreadsheet interface.
- wade — blazing fast, 1kb search for Javascript
- GPU.JS — GPU Accelerated JavaScript
- tiza — console styling for browsers
Browsers
- Firefox marketshare revisited. Why building a better browser doesn’t translate to a better marketshare
- The New Firefox and Ridiculous Numbers of Tabs
- Preview Storage API in Firefox Nightly
