The digest of fresh materials from the world of the frontend for the last week №290 (November 19 - 26, 2017)

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 "Frontend Weekend" # 29 - Alexandra Ermolenko about how designers and developers should interact
• Web Standards Podcast, Release 96 - Firefox 58 and Browser Compatibility, JS Modules, React + BEM, Career, For Web, Public, and Smashing Magazine
• Devschacht podcast: Night Front End # 12 - Money Is Not Motivation
• Podcast "Frontend Youth (18+)" : JavaScript - the best language for mindlessly copying other people's bikes
• The podcast "Drinkcast", Issue # 18 - "Guys, let's live together"
• Five Minutes Angular # 6 - Angular Kiev / MSK / Camp, 5.1.0 beta 2, Angular Elements, Animation Movie
• "ALL YOUR HTML" # 24: "Custom scroll and css clip property"
• New DevShow on loftblog: Andrey Sitnik - On Sex, Alcohol and Logux

Web development

• Adaptive layout . What is the difference between rubber, adaptive and responsive layout? How to use them correctly?
• What is lit-html? lit-html - competitor react or just another kind of handlebars
• Progressive Web Apps: a detailed introduction to PWA
• Localization and translation on the web
• Common Security Issues in Web Applications, Part 1
')

• Performance:
  • Using SVG as a Placeholder
  • Optimize the speed of rendering web pages
  • “Yandex” launched in the search for “turbo page” - an analogue of Google AMP and Instant Articles
  • New performance monitor (Performance monitor) in Chrome DevTools . Now you can see a lot of performance metrics in real time.
  • Explanation of the First Contentful Paint (FCP) concept on the GTmetrix blog
  • What is HEIF and will this replace JPEG?
  

• Instruments:
  • The internal structure and optimization of the webpack bundle
  • Jest and Puppeteer: automation of testing web interfaces
  • stacks-cli - visual analysis of the site stack from the terminal
  • Clean-mark - article to markdown text converter
  

• Accessibility:
  • Detailed analysis of the creation of an accessible content slider
  • HTML email templates and accessibility
  • Promoting affordable interface design
  

• Animation:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 63
  • Shredder Redux - Shredder Polygon implementation using instances, on three.js , Maf.js and dat.gui
  • Creative animation of checkboxes in todo list on CSS
  
  

CSS

• Everything you need to know about CSS-in-JS
• Logic Grid in CSS Grid Layout , Eric Meyer article on alistapart
• The art of problem solving with CSS
• CSS for commands
• Update your project with CSS selectors and custom attributes
• About the growing popularity of Atomic CSS
• CSS Optimization: Fine-Tuning Productive Animation with DevTools
• The story of how Zack Litherman spent 23 minutes on a significant improvement in font loading time

Javascript

• How much does javascript cost? Translation of "The Cost Of JavaScript" by Eddie Osmani.
• 77% of 433 thousand sites studied use vulnerable versions of JavaScript-libraries
• Familiarity with the JS-template of the year or how to handle async as a boss
• PlainJS - many utilities and plug-ins on vanilla JS for solving common frontend tasks, with demos and examples
• Introduction to Regular Expressions (Regex) in JavaScript
• How JavaScript works: comparison with WebAssembly + why in some cases it is better to use it instead of JavaScript
• Why we abandoned the use of default exports in Javascript and why you should do the same
• Implementing JavaScript Functor and Monads

• Frameworks:
  • A series of publications from 11 articles with a comparison of Aurelia, Ember, Dojo, Vue, React and Angular, with the conclusions and the pros / cons of each of them
  • JavaScript frameworks in numbers as of fall 2017
  • Modern frontend frameworks should be less about “frame” and more about “work”
  • Angular vs React: a comparison in the context of popularity
  

• Theory:
  • What is the difference between JavaScript and ECMAScript?
  • Basics of throttling events in javascript
  • Types in javascript: why you should take care of them
  • Non-standard explanation of the JavaScript scope of variables on the example of levels in parliament
  • Making life easier by using functional programming in TypeScript
  • Learn how to handle JavaScript errors with Try, Throw, Catch, & Finally.
  

• VueJS:
  • Progressive migration from AngularJS to Vue.js to Unbabel
  • Progressive web application with Vue JS, Webpack & Material Design
  • How I started using Vue
  

• React:
  • Basics of React: everything you need to know to get started
  • Free lectures on advanced React.js
  • How to significantly improve application performance on React
  • bemto-components . Smart components for using BEM methodology with React. Best with styled-components.
  • Performance Costs for React Server Rendering on Node.js
  

• Angular:
  • Using Angular Components with Third-Party Libraries
  • Angular's Vue Look - Familiar Code
  • How to make the component load Angular application using Angular CLI
  • Angular 5 Service Worker
  • “React is better than Angular” and other nonsense
  

• Libs & Plugins:
  • Scrollama - JS library for implementing storytelling using IntersectionObserver in favor of scrolling events.
  • Chartkick - create beautiful graphs with one line on React
  • imaskjs - masking data by specified parameters in the text box, without dependencies
  • raspchat - a chat server that can be run on Raspberry Pi
  • z - native comparison pattern for javascript
  • AWS Amplify - a declarative library for developing applications using Cloud services with JS
  

Browsers

• Improved debugger and WebExtensions API extension: what's new for developers in Firefox 58
• In Firefox, they plan to display a warning when visiting previously hacked sites.
• Want to get news first? How to block annoying push notifications in different browsers
• Your first (Web) extension for Firefox, written in Kotlin
• Comparison of the speed of loading pages in the browser: an introduction to the methodology

Entertaining

• Analysis of the degree of duplication of code on GitHub
• GitHub received team discussion feature
• Quartz: Google collects data on the location of Android users.
• Former head of Google’s Chinese division: Work requiring social skills will come to the fore in the future
• 11 optical illusions in interfaces
• Where to find the last places without internet
• Programmers on the way to the next bubble?
• The Myth of Developer Interchangeability

We apologize for any typos or broken / duplicate links. If you notice a problem - please write in a personal, we are trying to fix them quickly.

Digest from last week .
Material prepared dersmoll and alekskorovin .