The digest of fresh materials from the world of the frontend for the last week No. 300 (January 29 - February 4, 2018)

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

Media | Web Development | CSS | Javascript | Entertaining

---

Media

• Podcast «Frontend Weekend» # 38 - Vladimir Grinenko about BEM and work in Simferopol
• Podcast “Web Standards”, Issue # 106: Return from America, frontend and pain, cyclicity in CSS, history of flexs, PWA in Safari, as happened by Edge.
• Devschacht Podcast: Night Front-End # 20 - Some news and control inversion
• Podcast "Frontend Youth (18+)" # 36 Pathetic Webpack attempt to catch Parcel
• Podcast "Drinkcast", # 24 - "Know Your Javascript"
• "ALL YOUR HTML" # 34: "GPU animation of 400k particles"
• Results of January PiterJS №21 : slides, videos, comments

Web development

• Front End Developer Checklist
• How we launched the offline version of the site RG.RU
• Frontend - it does not hurt! . A guide for developers and sympathizers
• “On good vacancies of layout designers” - an article by Igor Adamenko, as well as an answer to her: “Thoughts on the grounds of good vacancies of layout designers”
• 8 things the front end developer should learn
• On the increasing complexity of the frontend
• Automatic browser testing using WebDriver API
• Coders API Guide
• Introduction to Progressive Web Applications (PWA)
• Progressive web applications - the next step in developing web applications
• Weekly selection of beautiful effects on CSS / SVG / JS # 68
')

• Security:
  • The story of how not to let me steal credit card numbers and passwords from visitors to your sites
  • Track user actions with CSS
  • Create CSS keylogger
  • Dark patterns using HTML 5.2 <dialog> in Chrome for fun and reward
  

• Performance:
  • How we made loading our pages even faster
  • Deep immersion in GTmetrix Speed ​​Test Tool
  • How to use webpagetest.org to test page loading speed
  

• Instruments:
  • For your attention - Webpack 4
  • webpack-demos - a collection of simple webpack demos
  • Localer - a tool to automatically detect missing I18n translations
  

• Accessibility:
  • Telephone numbers and availability
  • WCAG 2.1 changed status to Candidate Recommendation
  • Accessibility updates: what's new in WCAG 2.1
  

CSS

• Making multicolored icons using SVG symbols and CSS variables
• Grid 2 level just around the corner!
• New CSS Selector Specifications
• PostCSS - after Autoprefixer
• One site, many options: using variable fonts on the web
• How to recreate a Medium article using CSS Grid
• How to create a fully responsive navigation bar using Flexbox
• Bulma: CSS framework you should look at in 2018
• How to use variable fonts in the real world
• CSS Scroll Snap: what is it and why do we need it?
• Cheap parallax, just ~ 6 lines of code
• Boilerform is a small HTML / CSS boilerplate that relieves pain when working with forms.

Javascript

• I hated javascript. And now I like him
• React Native - from zero to the App Store
• JS WTF using math
• GraphQL Tutorial: Why We Need a New Type of API (Part 1) , Evolution API Design (Part 2)
• Introduction to GraphQL
• JavaScript: What's new in ECMAScript 2018 (ES2018)?
• How JavaScript works: creating Web Workers blocks + 5 examples how to use them
• Debug JavaScript with a debugger that you didn’t know you already have
• Why don't you use typeScript?
• 25 days with ReasonML
• EasyTimer.js is an easy-to-use timer / chronometer / counter library compatible with AMD and NodeJS

• VueJS:
  • Why 43% of front-end developers want to learn Vue.js
  • Introducing Webpack Without Jargon for VueJS Users
  • Efficient code analysis and formatting (for Vue.js) using ESLint and Prettier
  • 10 things I love about Vue
  

• React:
  • We delve into the mechanisms of Redux, making our own storage (Store)
  • React Beginner's Guide
  • React.js Reinforcement Concrete: Introduction for Newbies
  • Nested routes with React Router v4
  • Create image slider using React, Superagent and Instagram API
  • Conditional rendering in React using ternars and logical AND
  • Creating a library of SVG icons for React applications
  • Redux Quick Guide for Newbies
  • ReasonReact: functional programming for JavaScript developers
  

• Angular:
  • Angular 5 - creating a new component
  • Angular providers: how to build a third-party library?
  

Entertaining

• Skills, tools, requirements - HackerRank's large-scale developer market research 2018
• Google Speed ​​Update will not affect indexing.
• Facebook banned advertising cryptocurrency and ICO
• Remote work for the programmer: research results from Stack Overflow
• Intel conceded Samsung the title of the largest manufacturer of microchips
• Chronology: how did biometrics evolve
• Junior, Middle, Senior, Lead - what's the difference and where to go next?
• Windows 10 Redstone 4 will bring a whole bunch of innovations
• Opinion: why we need Web 3.0 and how it will be
Go

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 .