FRONT-END WEEKLY DIGEST (AUGUST 27 - SEPTEMBER 2, 2018)

Web graphics experiments, advanced CSS theming with custom properties and JavaScript, CSS shape editors, Props and PropTypes in React, Babel 7 released, TypeScript quick start guide, a full guide to using font awesome icons in Vue.js apps, and more. Enjoy reading!

Web Development

• Refactoring an inherited codebase
• Using the Speech Synthesis Interface of the Web Speech API
• A Native Lazy Load for the Web

• Tools:
  • What's New In DevTools (Chrome 70)
  • (WIP) Universal PWA Builder - Framework agnostic, Pluggable & Extensible, Zero-config, unless needed, Capable of automatic code-splitting.

• Accessibility:
  • Conversational Semantics - A great primer on how to code your markup more #inclusive for all (assistive) technology like search engines, screen readers, smart speakers and chatbots.
  • How Google has stepped up its efforts to makes its own tech more accessible to the disabled
  • How you can use AI, AR, and WebGL shaders to assist the visually impaired

• Animations:
  • Web Graphics Experiments
  • Optical illusion - 18 lines of pure JavaScript

CSS

• Advanced CSS Theming with Custom Properties and JavaScript
• The Complete CSS Demo for OpenType Features
• Super-Powered Grid Components with CSS Custom Properties
• Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid
• How to Create Printer-friendly Pages with CSS
• Greg Whitworth | Solving container queries today | CSS Day 2018
• CSS Shape Editors
• 20 Tips for Optimizing CSS Performance

JavaScript

• Why is a Java guy so excited about Node.js and JavaScript?
• Babel 7 Released
• So What's New in Babel 7?
• New mobile Chrome feature would disable scripts on slow connections
• What's Coming Up in JavaScript 2018: Async Generators, Better Regex
• JS By Example: 8 Distinct Uses Of JavaScript Array Slice
• aiji - A curated collection of inspirational AI-powered JavaScript apps.
• Speedy Introduction to Web Workers

• Typescript:
  • TypeScript and Babel 7
  • TypeScript Quick Start Guide
  • How My Team Accidentally Moved to TypeScript and Loved It

• React:
  • Reach UI Reach UI - seeks to become the accessible foundation of your React-based design system.
  • Good code practices with React and Redux
  • Validating React Component Props with prop-types
  • React Performance – A Definitive Guide to Optimize Major Performance issues in React
  • Props and PropTypes in React
  • The Evolution Of React
  • code-surfer — React component for scrolling, zooming and highlighting code snippets.
  • React Tutorial: Building and Securing Your First App
  • boilerplate.react.spa.full-server — a boilerplate for creating a SPA in React, with a full server

• VueJS:
  • Building Apps with Vue.js
  • Full guide to using Font Awesome icons in Vue.js apps
  • tiptap – a renderless rich-text editor for Vue.js

• Angular:
  • Event Binding Mechanism in Angular
  • Angular 6 CRUD Example Tutorial From Scratch
  • How to Use Material Design in Angular 6

• Libs & Plugins:
  • mafintosh/turbo-json-parse - Turbocharged JSON.parse for type stable JSON data.
  • shimport - Use JavaScript modules in all browsers, including dynamic imports.
  • reworm — the simplest way to manage state!
  • lazyestload.js — load images only when they are in (and remain in) the viewport.