FRONT-END WEEKLY DIGEST ( JULY 2 - JULY 8, 2018)

Web development tutorials for beginners, a tool to simplify your animations development workflow, CSS tricks to revolutionize your web layouts, 15 HTML element methods you've potentially never heard of, best Vue.JS admin template 2018, and more. Enjoy reading!

Web Development

• Meet Publii, a new Static CMS with GUI to build an extremely safe, fast and stylish website.
• What the heck is serverless?
• Interneting Is Hard (But it doesn't have to be).

• Performance:
  • Google's New Speed Update Works On Gradual Scale; Small Improvements Matter 
  • Reduce JavaScript Payloads with Tree Shaking
  • Performance Auditing: A Firefox Developer Tools Deep Dive
  • Improving Performance Perception: On-demand Image Resizing 
  • Optimize Website Speed With Chrome DevTools
  • Connection-Aware Components. Did you know you can use the Network Information API to make a website adapt to different connection speeds? 2G/3G: img, 4G: video.

• Accessibility:
  • stylelint-a11y - Plugin for stylelint with a11y rules.
  • Accessible carrousel using ARIA
  • The power and the danger of WAI-ARIA: speech recognition edition

• Animations:
  • Generative WorldCup. Is an experiment with word cup statistics API and canvas to generate abstract patterns for each game. After the match, you can check a new poster in the gallery below.
  • Ghost Mouse (move your mouse / finger)
  • The div that looks different in every browser
  • Introducing GsapTools by Ueno: A simple tool to make your animations development workflow easier.

CSS

• The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
• CSS tricks to revolutionize your web layouts
• Fitting Text to a Container
• Clearfix: A Lesson in Web Development Evolution
• How CSS works: Creating layers with z-index

• CSS Grid:
  • CSS Grid Level 2: Here Comes Subgrid
  • CSS Grid in IE: Debunking Common IE Grid Misconceptions
  • CSS Grid in IE: CSS Grid and the New Autoprefixer
  • CSS Grid in IE: Faking an Auto-Placement Grid with Gaps

JavaScript

• 15 HTML element methods you've potentially never heard of
• Why GraphQL: Advantages, Disadvantages & Alternatives
• JavaScript's var, let, and const variables explained with a story

• VueJS:
  • How to use routing in Vue.js to create a better user experience
  • Building Mobile Apps With Capacitor And Vue.js
  • The Vue Handbook: a thorough introduction to Vue.js
  • Vue Authentication And Route Handling Using Vue-router
  

• React:
  • React is just JavaScript
  • React's Most Basics No NPM. No Webpack. No Redux. Learn the fundamentals. of React by creating an animated fractal. Build your first React app in only 2 minutes. And all without leaving your browser!
  • 5 common practices that you can stop doing in React
  • What Is Redux: A Designer's Guide
  • react-scrollbar-custom - The best React custom scrollbars component.

• Angular:
  • Angular Developer Roadmap This project aims to collect the most common/important concepts one should learn to become an Angular developer.
  • Web Components in Angular and AngularJS
  • How Angular Resolves Dynamic Components

• Libs & Plugins:
  • shepherd - Guide your users through a tour of your app.
  • Rete.js — JavaScript framework for visual programming.
  • itty.bitty - A tool to create links that contain small sites.