The digest of fresh materials from the world of the frontend for the last week №322 (July 2 - 8, 2018)

We offer you a selection with links to new materials from the front-end area and around it.

    Media     |    Web Development     |    CSS     |    Javascript     |    Browsers     |    Entertaining

---

Media

• Podcast “Web Standards”, Issue # 128: React is just JS, nesting in CSS, indentation system, inaccessible captcha, forget about grids in IE, formatter against viewport.
• Frontend Weekend podcast # 60 - Dmitry Rozhkov on the creation of a Senior Software Vlogger, wintering in Thailand and life in Hamburg
• devschacht podcast: Night frontend # 40 - GPC, Depression, WSD and Patreon
• Frontend Youth (PED) (18+ ) ” # 55 Want to be a cool React developer - listen here!
• CSSSR Podcast: News 512 - Issue # 13 (July 2 - July 8 )

Web development

• Web caching on the example of buying milk in the store
• Mobile site or adaptive layout: what is better from an SEO point of view
• How and why to test the layout
• Publii - a new static CMS with a GUI for creating safe, fast and stylish sites
• The Internet is complicated (But it should not be like this) . Web development guide for complete newbies

• Performance:
  • Google: the Speed ​​Update search algorithm will be launched in July 2018 , Google Speed ​​Update will take into account even minor download speed improvements
  • Performance audit: deep immersion in Firefox Developer Tools
  • Improve performance perception: resize images on demand
  • Optimize site speed with using Chrome DevTools . Updated article on Google developer blog
  • Connection-dependent components . Use the Network Information API to adapt to different speeds: img for 2G / 3G, video for 4G
  • Reduce JavaScript payload using Tree Shaking
  

• Accessibility:
  • stylelint-a11y - plugin for stylelint with a11y rules
  • Accessible carousel using ARIA
  • WAI-ARIA power and danger: more about voice recognition
  

• Spectacular web:
  • Generative WorldCup . Experimenting with the World Cup Statistics API to generate abstract templates for each game
  • Introducing Ueno's GaspTools : a simple tool that makes it easier to work on animations
  • a div that looks different in all browsers
  • Ghost mouse following the cursor
  
  

CSS

• GitHub turns ... turns GitHub ... into elegant Windows 95
• Effective work on standards - part 1: operational situation , part 2: difficult path to compromise
• Integration and styling guide for icon systems - SVG sprites, SVG characters and icon fonts
• CSS tricks to make a revolution in your layouts
• Placing text in a container
• Clearfix: a lesson in the evolution of web development
• How CSS works: creating layers using z-index

• CSS Grid:
  • CSS Grid Level 2: and Subgrid arrived
  • CSS Grid in IE: exposing the main misconceptions about IE Grid
  • CSS Grid in IE: CSS Grid and the new Autoprefixer
  • CSS Grid in IE: Emulating Auto-Placement Grid using Gaps
  

Javascript

• JavaScript basics for novice developers
• Developing your own framework and professional growth of a JS programmer
• When (and why) you should use ES6 arrow functions
• 15 methods of HTML elements that you may never have heard
• Why GraphQL: advantages, disadvantages and alternatives
• JavaScript variables var, let and const, explained in history

• React:
  • 16 React tools that will be useful to interface developers
  • The most common errors in your React code that you (possibly) commit
  • Simple (at least 99% ES2015) React tutorial.
  • React is just JavaScript
  • The very basics of React Without NPM. Without a webpack. Without Redux. Learn the basics of React by creating an animated fractal right in the browser sandbox
  • 5 popular practices that you can stop using in React
  • What Redux is: designer's guide
  • react-scrollbar-custom is the best component of React to create a custom scroll bar
  

• VueJS:
  • Russian-language channel of. vuetify.js community in discord
  • Vue Test Utils and Jest: how to write simple unit tests for the frontend
  • How to use Vue.js routing to improve user experience
  • Create a mobile application with Capacitor and Vue.js
  • The Vue Handbook: detailed introduction in Vue.js
  • Vue Authentication and Route Handling using Vue-router
  • The best admin templates for Vue.js in 2018
  

• Angular:
  • Angular Developer Roadmap . A project whose goal is to collect the most basic / important concepts that anyone who wants to become an Angular developer should learn
  • Web components in Angular and AngularJS
  • Solutions for dynamic components in Angular
  

• Libs & Plugins:
  • shepherd - a library for creating a visual assistant for site elements
  • Rete.js - a JavaScript framework for visual programming
  • itty.bitty - a tool for creating links that contain small sites
  

Browsers

• Screenshots: updated main menu of Microsoft Edge
• Google and Mozilla removed the add-on for browsers Stylish from the catalogs, which spied on users
• Comparison of the performance of different implementations of WebAssembly
• How to use Microsoft Edge to read e-books
• Specter's browser vulnerability protection was bypassed

Entertaining

• Is Blockchain a buzzword or something serious?
• Why many people want to become a manager and this is not always a good idea
• In the stylish browser add-on, a code has been revealed to send visiting history
• Reincarnation of virtuality and augmented reality
• July TIOBE programming language ranking: TypeScript popularity continues to grow
• Visual introduction to machine learning

PS: next week there will be no digest, vacation and all that.

← Digest last week
Material prepared dersmoll and alekskorovin