The digest of fresh materials from the world of the front-end for the last week No. 232 (October 10 - 16, 2016)

We bring to your attention a selection with links to useful resources and interesting materials from the frontend area.

Web development

CSS

Javascript

News and entertaining

Web development

• How HTML html coder
• Yarn:
  
  • Facebook and Google Launch Yarn, New Package Manager for JavaScript
  • Yarn Review: Everything you need to know about Facebook's new JS package manager (Yarn Roundup: What you need to know about Facebook's new JS Package Manager)
  • NPM vs Yarn Cheat Sheet
  • Npm Blog: Hello, Yarn!
  • Yehuda Katz: Why I'm Working with Yarn (Why I'm Working on Yarn)
  • Yarn Package Manager: improvements over npm (An Improvement over npm)
  • 5 things you can do with Yarn (5 things you can do with Yarn)
  • Testing of yarn, fast npm for JavaScript (Testing yarn, a fast JavaScript for npm)
  
  
• Debunked : 10 Misconceptions about AMP
• Debunking Six SEO Myths (6 SEO Myths Debunked)
• Optimizing Web images in Photoshop (Optimizing the Web in Photoshop Images Related)
• “Offline First” technique using service workers (“Offline First” with Service Worker (Building a PWA, Part 1))
• The current state of HTML5 Input Elements
• You don't need Gulp / Grunt / Webpack (You don't need Gulp / Grunt / Webpack)
• Note to help with ARIA (A (not so) short note on ARIA to the rescue)
• Annoying Double-Tap Link Issue on Mobile Devices
• Reskin for SVG Symbols: how to make them (and why) ('Reskinnable' SVG Symbols: How to Make Them (..and Why))
• Accessibility note on developers.google.com based on the Accessibility course on Udacity
• You will not be comfortable in web development (You Can not Get Comfortable in Web Development)
• Is MVC dead for the frontend? (Is MVC dead for the frontend?)
• Progressive enhancement is not dead, but sniffy (Progressive enhancement is not dead, but it smells funny)
• Visual primitives for the component age. We better use parts from ES6 and CSS to style your React applications (Visual primitives for the component age)
• Morph Dropdown Animation
• Animation of Decorative Lines (Line Maker: Animated Decorative Lines)
• Happy Birthday Foundation: Five first years of the first adaptive framework (Happy Birthday Foundation: Five Years of Firsts)
• excel-bootstrap - generator site on bootstrap from Excel (excel-bootstrap - Generate Bootstrap websites from Microsoft Excel)
• Guide to writing quality README files (Learn the art of writing quality READMEs.)

Media

• Podcast Web Standards, Issue No. 37 : Don’t offend CSS, Flexes, JS in 2016, PWA and React, life isn’t the same without javascript, don’t block the viewport.
• RadioJS Podcast, Issue 41 : Typing 2.0, typing in commands, server code, conferences
• Video reports from the MoscowJS meeting in Badoo
• Video from LvivJS Conference
• Video from KharkivCSS 2016
• Video from PiterCSS No. 6
• Lea Verou - CSS Variables: var (- subtitle);
• Chrome DevTools Masterclass

CSS

• Ways to underscore in the CSS , translation of an article Styling Underlines on the Web
• Visual Regression Testing with PhantomCSS
• Maybe you do not need a JavaScript (You Up Need of might not JavaScript)
• Pragmatic, practical and progressive Theming using native CSS variables (Pragmatic, Practical, and Progressive Theming with Custom Properties)
• Thoughtful CSS Architecture
• Special requests in CSS:
  
  • Quantity Queries: Quantitative Queries and Flexbox (Quantity queries and Flexbox)
  • Media Queries: SVG & media queries
  • Mod Queries: Using Mod Mod Queries with Range Selectors
  • Feature Queries: How to Use Feature Queries (queries properties) (How to use the CSS the Feature Queries)
  • Feature Queries: Add a warning “property X is not supported” for your CSS demos using @supports (Adding “feature X is unsupported” warnings in your CSS Demos with supports)
  
  
• Typography:
  
  • The future of web fonts (The Future of Web Fonts)
  • 32 Gorgeous Web Safe Fonts to Use with CSS
  • Understanding Web Fonts Download (Getting started with CSS Font Loading)
  
  
• Grid Layout Summertime . Summary of changes introduced last summer for the CSS Grid Layout standard
• Amazing Women of the world CSS (The Amazing Women of CSS)
• How to make tabs using only the CSS (How to the make using the tabs only the CSS)
• Content filter to clean the CSS (the Content the Filter the CSS the Pure)
• Creating a scalable and maintainable CSS codebase with ITCSS (Building a Maintainable and Scalable CSS Codebase with ITCSS)
• Minesweeper to clean the CSS (the Pure the CSS minesweeper)

Javascript

• Theory:
  
  • Infographic Explaining Why JS Development Looks So Difficult (This Infographic Explains Why JS Dev Seems So Complicated)
  • Почему я считаю, что Elm — это будущее фронтенд-разработки (Why I think Elm is the Future of Front End Development)
  • Нужны ли Service Worker-ы в твоем веб приложении? (Do you need Service Worker in your web app?)
  • Уместен ли еще jQuery (Is jQuery Still Relevant?)
  • Вам может понадобиться JavaScript (You Might Need JavaScript)
  • Мы нуждаемся в JavaScript, чтобы починить веб (We need JavaScript to fix the web)
  • Усталость от Javascript с точки зрения нуба (Javascript Fatigue. From a noob perspective)
  • Фреймворк vs Библиотека — разница в веб-разработке (Framework vs Library — differences in web development)
  
  
• Практика:
  
  • Объектно-ориентированный JavaScript. Быстрое введение в OOP в JavaScript (Object-Oriented JavaScript)
  • Валидация форм как компонент высокого порядка часть.1 (Form Validation As A Higher Order Component Pt.1)
  • Как быть компилятором — создаем компилятор с помощью JavaScript (How to be a compiler — make a compiler with JavaScript)
  • ResizeObserver: это как document.onresize для элементов (ResizeObserver: It’s Like document.onresize for Elements)
  • Улучшение формы комментариев: от основ до кастомных сообщениях об ошибках с помощью BackgroundSync (Enhancing a comment form: From basic to custom error message to BackgroundSync)
  • Сравнение чистых и «нечистых» функций (Pure versus impure functions)
  • Доступ к буферу обмена с помощью JavaScript (Quick Tip: Accessing The Clipboard With JavaScript)
  
  
• ES6:
  
  • Promises 101. Базовые приемы создания и управления промисами.
  • Использование ES6 генераторов на примере koa.js
  • Рекурсия в JavaScript с ES6, destructuring и rest/spread (Recursion in JavaScript with ES6, destructuring and rest/spread)
  • Глупые трюки с ES6 (Stupid ES6 tricks)
  
  
• Фреймворки:
  
  • Свежие релизы: Angular 2.1.0, Релиз Marionette v3.1.0
  • Лучший способ изучить AngularJS (The best way to learn AngularJS)
  • Шаблоны Angular 2 для приложений Angular 1.x (Angular 2 Patterns for Angular 1.x Apps)
  • Роутер Angular: предзагрузка модулей (Angular Router: Preloading Modules)
  • Angular 2  —  Dynamic View and Components
  • Двусторонний data-биндинг в Angular 2 (Two-way Data Binding in Angular 2)
  • Создание приложения с Material Design с Angular 2 (Build a Material Design app with Angular 2)
  • Начало работы с Angular 2 End To End тестированием (Getting Started with Angular 2 End To End Testing)
  • Разбираемся с данными роутера в Angular 2 (Resolving route data in Angular 2)
  • Как тут у нас в Китае дела с React.js (What we have in China about React.js)
  • react-day-picker — календарь для React
  • desklamp — чистый контейнер для роутинга и state в react (clean routing and state container for react)
  • Официальная интеграция Semantic-UI-React
  • react-router-server — рендеринг на серверной стороне для React Router v4 (react-router-server — Server Side Rendering library for React Router v4.)
  
  
• gDoc.js — используйте Google Spreadsheets для своей CMS (Use gDoc.js for your CMS)
• CerebralJS — контроллер состояний с собственным отладчиком. Подходит для сложных приложений (A state controller with its own debugger )
• Порт движка по распознаванию изображений Tesseract на JavaScript (Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine.)

Новости и занимательное

• Выпуск web-браузера Chrome 54
• Google в 1,5 раза сократит расход памяти браузером Chrome
• Google запустил новый инструмент для проверки AMP
• noto — новый шрифт от Google для всех языков и наречий
• Кто «подложил бомбу» в смартфоны Samsung?
• Samsung разослала огнеупорные коробки для возврата Galaxy Note 7, Что случилось с Samsung Galaxy Note 7 и почему он горит
• Facebook официально запустила корпоративную социальную сеть Workplace
• В Skype добавили поддержку русского языка для синхронного перевода речи во время голосовых и видеовызовов
• Насколько серьезны проблемы Элона Маска
• Каково это — работать в Apple?
• «Просто заткнитесь и дайте разработчикам сконцентрироваться на задачах», — считает сооснователь площадки Stack Overflow Джоэл Спольски
• «Samsung, ты не одна»
• Большая нейронная война: что на самом деле затевает Google
• Что понял Павел Дуров в процессе создания «ВКонтакте»
• Алгоритм чтения книг по программированию
• Разнообразие нейронных сетей. Часть вторая. Продвинутые конфигурации
• How likes and bots will shape future journalism
• New Mind Lords: How Search Engines Affect Elections
• Can sex robots pass the Turing test?
• How does a telephone interview go on Google: a first-hand account from a candidate for the position of CTO
• MIT engineers create Photoshop for 3D Printing
• The amazing story of Emoji (The surprising history of emojis)

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

← Last week’s digest .
Material prepared dersmoll and alekskorovin .