Frontend Weekly Digest #42 (15–21 January 2018)

Web-Development

• Bootstrap 4 release, + discussion on 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 optimisation
  • 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 🤹🏻‍♂️ shipped: 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 = ♥
• 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

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