FRONT-END WEEKLY DIGEST (OCTOBER 22 - OCTOBER 28, 2018)

Splicing HTML’s DNA with CSS attribute selectors, reducing the impact of JavaScript on your page load time, generating shapes with CSS background gradients, creating markers on Google Maps with HTML & CSS, and more. Keep on reading!

Web Development

• Typical website in 2018, codepen edition, website edition
• The State of JavaScript. Rick speaks with Addy Osmani about the state of JavaScript.
• Pragmatic rules of web accessibility that will stick to your mind
• How to reduce the impact of JavaScript on your page load time

• Tools:
  • 10 Console tricks, to debug like a Pro.
  • An Annotated webpack 4 Config for Frontend Web Development
  • Siteaudit: Generate audit benchmark for your site (Pagespeed, Lighthouse, A11y) 

CSS

• Designing with Ratio
• Splicing HTML’s DNA With CSS Attribute Selectors
• From Ordinary to Extraordinary with CSS Animations
• Simplify Styling with Functional CSS
• Shapes generated with CSS background gradients.
• You're using <em> wrong
• 100 Days CSS Challenge
• Using dark mode in CSS with MacOS Mojave
• Incomplete List of Mistakes in the Design of CSS
 

JavaScript

• How to create markers on Google Maps with HTML & CSS, using ES6 classes and closures
• 3 JavaScript Performance Mistakes You Should Stop Doing
• GraphQL: A success story for PayPal Checkout
• Playing Mortal Kombat with TensorFlow.js. Transfer learning and data augmentation
• The Intl.RelativeTimeFormat API
• Simply JavaScript: a straightforward intro to Mocking, Stubbing, and Interfaces
• Understanding Higher-Order Functions in JavaScript

• VueJS:
  • Shards Dashboard Vue
  • Using GraphQL Mutations in Vue.js

• React:
  • What's New in React 16.6
  • React 16.6: React.memo() for Functional Components Rendering Control
  • Getting Started with React Hooks
  • Use the React Profiler for Performance
  • Ruining React's Performance with Redux
  • Pure functional components in React
  • Understanding React Render Props and HOC
  • Functional React. Is it possible? Exploring functional programming techniques in React using Higher Order Components
  • Building Skeleton Components with React

• Angular:
  • Angular v7 is here but 7.1.0 is already breathing down its neck
  • Real world angular reactive form
  • Isoline Routing in an Angular Application using the HERE Routing API

• Libs & Plugins:
  • lazy-brush - smooth drawing with a mouse, finger or any pointing device.
  • percollate: a command-line tool to turn web pages into beautifully formatted PDFs
  • IronDB is a resilient key-value store for the browser

Browsers

• Firefox 63 – Tricks and Treats!
• What’s new in Microsoft Edge in the Windows 10 October 2018 Update