Using Webpack with React, learning Css Grid Layout with the Swiss, setting up Prettier in an Angular CLI project, building your first Vue.js component, introducing After.js, and more. We hope you enjoy our digests as much as we do!

Web Development

• Bootstrap 4 release, reddit
• How To Create a Living Style Guide

• Performance:
  • Starting in July 2018, page speed will be a ranking factor for mobile searches.
  • Just because your site isn’t for emerging markets, doesn’t excuse you from web performance optimization
  • How to Optimize CSS and JS for Faster Sites 
  • Measuring AMP Performance
  • Make Your Site Faster with Preconnect Hints
  • Speedometer 2.0: A Benchmark for Modern Web App Responsiveness by Addy Osmani.

• Tools:
  • hey meta – Quickly Check & Build Your Meta Tags.
  • Puppeteer 1.0: Chrome 65, JS/CSS code coverage API, PDF customization, XPath support, raw devtools protocol access
  • Keep webpack Fast: A Field Guide for Better Build Performance
  • Improvements to the DevTools Console in the Windows 10 Fall Creators Update
  • What’s New In DevTools (Chrome 65)

• Accessibility:
  • Getting Started with Web Accessibility in Vue. How vue works, using ARIA, dynamically setting the title using vue-router, and managing focus using directives.
  • Lists of lists of accessibility related issues
  • Chrome DevTools provide a great way to identify and fix the color contrast ratio to meet the Accessibility Standards. Color picker is [mostly] everything you need
  • Five Ways in Which Artificial Intelligence Changes the Face of Web Accessibility
  • New federal accessibility requirements take effect (Section 508 Compliance)

• Animation:
  • 18 top CSS animation examples
  • Simplex Flower Generator – Three.js/WebGL
  • Silhouette zoom slideshow
  • A javascript/HTML5 canvas wobbly physics simulation

CSS

• 5 exciting new HTML and CSS features to look forward to in 2018
• How Big Is That Box? Understanding Sizing In CSS Layout
• Learning CSS grid layout with the Swiss
• Layout Land by Jen Simmons – Learn about the new layout possibilities in web design.
• CSS Naming Conventions that Will Save You Hours of Debugging
• Crooked Style Sheets. Proof of concept for website tracking/analytics using only CSS and without JavaScript
• CSS Paint API
• CSS Grid + CSS Multi-Columns = Love.
• cssgrid.io – Learn CSS Grid with Wes Bos in 25 pretty good videos.

JavaScript

• The Ultimate Guide to JavaScript Frameworks
• jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?
• So, you wanna use ES6 modules
• The Complete Guide To Deploying JavaScript Applications – Part 2: Single Page Applications, Logging, SSL

• VueJS:
  • What’s new in Vue Devtools 4.0
  • Authentication Best Practices for Vue
  • How to build your first Vue.js component
  • Creating a Vue.js Serverless Checkout Form: Part 1 – Setup and Testing, Part 2 – Stripe Function and Hosting, Part 3 – Application and Checkout Component, Part 4 – Configure the Checkout Component 

• React:
  • Introducing After.js – A Next.js-like framework for server-rendered React apps built with React Router 4.
  • Code with Design — How we Built a Tool to Export React Prototypes from Sketch
  • How to use Webpack with React: an in-depth tutorial
  • Code Splitting with React and React Router
  • Dragging React performance forward
  • When (and when not) to use Redux
  • React.js Frequently Faced Problems

• Angular:
  • Setting up Prettier in an Angular CLI Project
  • Getting to Know Angular 2’s Module: @NgModule 
  • Angular Classes with NgClass

• Libs & Plugins:
  • json-dry — Allows you to stringify objects containing circular references, dates, regexes, …
  • Bulb: A Reactive Programming Library for JavaScript
  • jarvis — A very intelligent browser based Webpack dashboard.
  • webshot-factory — Web Screenshots at scale based on headless chrome.