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", Release №128: React is just JS, nesting in CSS, indentation system, inaccessible captcha, forget about grids in IE, formatter against view.
• Podcast "Frontend Weekend" # 60 - Dmitry Rozhkov on the creation of a Senior Software Vlogger, wintering in Thailand and living in Hamburg
• Devschacht podcast: Night Front End # 40 - GPC, Depression, WSD and Patreon
• Podcast "Frontend Youth (18+)" # 55 Want to be cool React-developer - listen here!
• The 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 responsive layout: which is better from an SEO point of view
• How and why to test the layout
• Publii is a new static CMS with GUI for creating safe, fast and stylish websites.
• The Internet is complex (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
  • Improving perception of performance: resize images on request
  • Optimize the speed of sites using Chrome DevTools . Updated article on Google developer blog
  • Components dependent on the connection . Use the Network Information API to adapt to different speeds: img for 2G / 3G, video for 4G
  • Reducing JavaScript payload with Tree Shaking
  

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

• Spectacular web:
  • Generative WorldCup . Experiment with the World Cup Statistics API to generate abstract templates for each game
  • Introducing Ueno's GaspTools : A Simple Tool To Make It Easy 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 environment , part 2: the hard way to compromise
• Guide to the integration and styling of icon systems - SVG sprites, SVG characters and icon fonts
• CSS tricks to revolutionize your layouts
• Placing text in a container
• Clearfix: A Lesson in Web Development
• How CSS works: creating layers with z-index

• CSS Grid:
  • CSS Grid Level 2: and came Subgrid
  • CSS Grid in IE: exposing the main misconceptions about IE Grid
  • CSS Grid in IE: CSS Grid and New Autoprefixer
  • CSS Grid in IE: Auto-Placement Grid Emulation with Gaps
  

Javascript

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

• React:
  • 16 React tools that are 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 is Redux: Designer's Guide
  • react-scrollbar-custom is the best component of React to create a custom scrollbar.
  

• 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 routing in Vue.js to improve user experience
  • Creating a mobile application with Capacitor and Vue.js
  • The Vue Handbook: a detailed introduction to Vue.js
  • Vue Authentication and Route Handling with Vue-router
  • Best admin templates on Vue.js in 2018
  

• Angular:
  • Angular Developer Roadmap . The project, which aims to collect the most basic / important concepts that everyone 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 - JavaScript framework for visual programming
  • itty.bitty is a tool for creating links containing small sites.
  

Browsers

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

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 was found to send a history of visits.
• The rebirth of virtuality and augmented reality
• July ranking of TIOBE programming languages: 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 by dersmoll and alekskorovin