Hey, folk! In our recent digest, you can read about the 5 most popular frontend frameworks of 2017 compared, 3 ways to reduce webpack bundle size, the big CSS Media Query mistake, the anatomy of a modern JavaScript application, and more. Enjoy reading!

Web Development

• The Most Interesting Sessions from Google I/O for Web Development
• Introducing Mavo: Create Web Apps Entirely By Writing HTML! Lea Verou introduced Mavo this week, a library that turns your HTML-based markup (which contains some special attributes) into an interactive web application.
• Presentation: Accessibility in a Responsive World, A11Y Days 2017
• Style Guide Guide — A boilerplate for creating superb style guides
• Rearchitecting Airbnb’s Frontend
• Combine Webpack with Gulp 4
• The 5 Most Popular Frontend Frameworks of 2017 Compared
• Google’s AMP now powers 2B+ mobile pages and 900K domains, loads 2x faster
• Scott Gilbertson: ‘kill google amp before it kills the web’
• 3 ways to reduce webpack bundle size
• Updates:
  • Yarn create & Yarn 1.0
  • Git and GitHub Integration comes to Atom
  • Announcing JSON Feed
  • Polymer 2.0 has landed. ES6 class-based syntax, freshest cut of the Polymer CLI, Starter Kit will now generates a 2.0-based PWA template.
• PWA:
  • preact-cli: Start building a Preact Progressive Web App in seconds
  • Progressive Web Apps — Yeh or Meh?
  • Web Components VS Frameworks
• Spectacular Web:
  • Moments of Happiness, A series of WebGL experiments developed to make you smile (and spin your fans) using Three.js and GSAP Library.
  • Creative Splash Transition with CSS and SVG
  • Color Extraction Effect using CSS Filters and Vibrant.js
  • Single Div Accordion (Animated with CSS Variables)
  • Making engaging VR experiences on the web
  • GPU accelerated rigid body physics in #WebGL / #threejs

CSS

• Error messages and recommendations. Time for part 3 of @ppk’s study into native form validation in browsers!
• Simplifying CSS Cubes with Custom Properties
• A Walkthrough of CSS Length Units You Can Use for Font Size
• Fluid Responsive Typography With CSS Poly Fluid Sizing
• Learn CSS Grid by @jonsuh
• Learning CSS Grids
• The Big CSS Media Query Mistake
• Learn about writing-mode & text-orientation in these new CSS reference
• Some Extremely Handy `:nth-child` Recipes as Sass Mixins
• Responsive Design for Motion. WebKit now supports the prefers-reduced-motion media feature, part of CSS Media Queries Level 5, User Preferences.
• Non-linear interpolation in CSS
• Enforcing CSS Syntax Style (and more!)
• I found some really clever CSS on a reddit theme

JavaScript

• V8, Advanced JavaScript, & the Next Performance Frontier (Google I/O ’17)
• JSConf EU 2017 Videos
• Can Google properly crawl and index JavaScript frameworks? JavaScript SEO experiment.
• Writing modern JavaScript code
• Improve the Performance of your JavaScript Web Application
• Why I chose ClojureScript over JavaScript
• Don’t Overcomplicate Javascript #0
• The Anatomy of a Modern JavaScript Application
• Getting Started With The JavaScript Web Animation API
• Modern JavaScript Development Is Hard
• A practical guide to fetch(), reduce() and formatting data from an external API
• You might not need to transpile your JavaScript
• (Not) Everything in JavaScript is an Object
• React:
  • json-api-normalizer: An Easy Way To Integrate The JSON API And Redux
  • Analyzing React’s Source Code for Type Mismatch Operations
  • react + d3 = vx | visualization component
  • Getting started with vx.
  • j0nas/light-form — Lightweight library for lightweight React/Redux forms
  • react-pdf — create PDF files using React
• Angular:
  • React vs Angular: Two Sides of JavaScript
  • How to create library for Angular(2+) and publish to npm from scratch.
• Vue:
  • How To (Safely) Use A jQuery Plugin With Vue.js
  • Why Do Developers Now Compare Vue.js to JavaScript Giants Angular and React?
  • Vue.js Is Good, But Is It Better Than Angular Or React?
  • How To Build A Simple Single Page Application Using Vue 2 (Part 2)
  • WTF is Vuex? A Beginner’s Guide To Vue’s Application Data Store
  • vue-js-modal
• Libs & Plugins:
  • Workbox — JavaScript Libraries for Progressive Web Apps
  • pkamenarsky/leerraum.js — A PDF typesetting library with exact positioning and hyphenated line breaking
  • delaunator — a really fast JavaScript library for Delaunay triangulation of 2D points
  • godzilla — is a ES2015 to Go source code transpiler and runtime