The recent issue of our weekly front-end digest includes themed sites with Css Variables, 3 superpowers of the Flex-Box model, Angular 5 vs. React vs. Vue,  infinite scroll techniques in React,  Chrome 65 Beta, and more.  Keep on reading!

Web Development

• Front-end Frameworks: Custom vs Ready-to-use Solutions
• Another reason to use noopener – A deep dive into renderer process allocation

• Performance:
  • Web Perf Optimization with webpack: Reduce front-end code size and Monitor it to stay fast. Brand new guides from @iamakulov & @addyosmani
  • How SEOs Can Benefit From Google Lighthouse – Website Performance Metrics
  • Taking A Look At The State Of Progressive Images And User Perception
  • Website Performance and the Crawl Budget
  • How we made our page-load optimizations even faster
  • Optimize your MP4 video for better performance

• AMP/PWA:
  • PWA on desktop
  • Service workers: the little heroes behind Progressive Web Apps
  • Google AMP & WordPress: Everything You Need to Know
  • Welcoming Progressive Web Apps to Microsoft Edge and Windows 10

• Tools:
  • hreftools – Online web tools to get your work done faster.
  • Launching SEO Audit category in Lighthouse Chrome extension
  • Webpack to Parcel: a create-react-app migration 
  • Learn, Teach, Work and Play in the Web Assembly Studio

• Accessibility:
  • aria-label is a xenophobe
  • My Accessibility Journey: What I’ve Learned So Far
  • Accessibility Interview Questions
  • Simplifying the New WCAG 2.1 Guidelines

• Animations:
  • CSS-Only Cube Pack, based on an animation by Joseph Ryba
  • Only CSS: Infinite Steps
  • Slice Revealer. A reveal effect where animated slices cover and uncover an image.
  • Direction Aware Hover Effects
  • Winamp2-js

CSS

• CSS Code Can Be Abused to Collect Sensitive User Data
• Using Media Queries For Responsive Design In 2018
• Modern CSS Explained For Dinosaurs
• Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input
• Building Themed Sites with CSS Variables
• Counting With CSS Counters and CSS Grid
• modern-normalize – modern-normalize – normalize browsers’ default style
• 3 Superpowers of the Flex-Box Model — How flex-basis, flex-shrink and flex-grow work.
• Internet Explorer exists. Use CSS Grid?

JavaScript

• Learn to spot red flags in your React/JavaScript code
• An Overview of JavaScript Testing in 2018
• Five Common Problems in GraphQL Apps (And How to Fix Them)
• JavaScript Frameworks by the Numbers — Winter 2018
• Angular 5 vs. React vs. Vue
• Using Default Parameters in ES6
• Private Variables in JavaScript

• VueJS:
  • Building a Simple Face Recognition App with Vue.js and Kairos
  • Vue on 2018 — Interview with Evan You, author of the Vue.js framework

• React:
  • What’s new in React 16.3(.0-alpha)
  • Infinite scroll techniques in React
  • Evolving Patterns in React
  • Introducing React Scope – Visualize Your React Components as You Interact With Your App
  • React’s new Context API

• Angular:
  • Run Angular CLI repos directly in your browser
  • Getting started with Angular SDK

Browsers

• Here’s how Google Chrome’s new ad blocker works
• Opera 51 comes with improved browsing speed
• Chrome 65 Beta: CSS Paint API and the ServerTiming API