Дайджест свежих материалов из мира фронтенда за последнюю неделю №281 (18 — 24 сентября 2017)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

fe0f5cf888e245e8b10cc0ca9787812e.png


    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное

1e465593b1b347eea23b1ab81b6e0a04.pngМедиа


podcast Подкаст «Frontend Weekend» #20 — Павел Ловцевич про организацию конференций, жизнь в Минске и нетворкинг
podcastvideo Подкаст «Пятиминутка Angular» #4: Meetups (Ekb, Msk), Angular 5 beta7, Angular CLI 1.4, Schematics, Forms
podcastvideo Подкаст «Пятиминутка React» #36: Ring UI от JetBrains. Интервью с Евгением Датским, ведущим разработчиком библиотеки
podcast Подкаст «Фронтенд Юность (18+)» #19: Майним биткоины на сайте с помощью пользователей
podcast Подкаст «devschacht»: Ночной фронтенд #4 — FrontTalks 2017
podcast Подкаст «devschacht»: Ночной фронтенд #5 — От атомной бомбы до персонального компьютера
podcast Подкаст «Drinkcast», Выпуск #9: «Сколько нужно программистов, чтобы очистить код»
video «ALL YOUR HTML» #: 15«Плавные переходы между страницами с Barba.js (PJAX)»
envideoMicrosoft Edge Web Summit 2017, 14 видео

888d64fa796b4b6e82e98edc17dc85ae.pngВеб-разработка


habrЗачем нужен БЭМ. Следуете ли вы БЭМу, и насколько он востребован вне Яндекса?
• Как создать маску ввода для мобильных устройств
• В WordPress рассматривают агностичный подход к выбору JS-фреймворка для блоков Gutenberg
• Какие метатеги использовать в вебе в 2017 году
enМега-шпаргалка по HTML5
enСенсоры для веба! Разработчики из Intel в блоге Google делятся своими мыслями о возможностях Generic Sensor API
enАвтомат Руба Голдберга. Введение в постмодернизм веб-разработки. Заметка, вдохновленная посещением CSS-Day Amsterdam 2017

  • Новости:
    • Facebook объявил о перелицензировании React, Jest, Flow и Immutable.js
    • Консорциум W3С утвердил средства DRM для Web в качестве стандарта
    • Релиз CoffeeScript 2: поддержка современного синтаксиса JS, async, модули, JSX и многое другое
    enVue.js 3 и другие главные новости после Q&A события с разработчиками Vue


  • Инструменты:
    • Изучите, как отладить JavaScript с помощью Chrome DevTools
    • Простой, быстрый и удобный инструмент для коммуникации между дизайнером и клиентом/разработчиком
    enГенераторы кода, полезные для разработки шаблонов HTML писем
    enКак я урезал вдвое размер своей Webpack сборки


  • Производительность:
    enМетрики производительности. Чем измерять, на какие значения обращать внимание и как повышать скорость загрузки
    en«Вам говорили, что серверный рендеринг вашего JS фреймворка повысит производительность. Но так ли это?»
    enРазработчик из NerdWallet подробно о том, как они оптимизировали шрифты на сайте
    enHacker News Progressive Web Apps. Addy Osmani о прогрессе работы над проектом HNPWA, цель которого — продемонстрировать, как PWA можно имплементировать на различных JS фреймворках


  • Анимация:
    • Еженедельная подборка красивых эффектов на CSS/SVG/JS #54
    enИдеи для морфинга органических SVG фигур
    enНачинаем работать с Web Animations Api


3a13046f2d4a46c4a60db0906e962adb.pngCSS


habrКастомные свойства. Зачем нужны кастомные свойства и как они работают?
• Явный контроль над специфичностью в CSS?
enИсторический взгляд на FOUT и FOIT от Zach Leatherman
enКак новые шрифтовые технологии (вариативность и параметричность) улучшат веб в будущем
enКак Safari работает с пользовательскими свойсвами CSS
enНаписание CSS с мыслями о доступности
enВыводим линтинг CSS на следующий уровень с помощью Stylelint
enИнтригующий четвертый уровень CSS селекторов
enПравда веба: CSS — это не настоящее программирование
enРазработка сайтов под iPhone X. Почти официальное руководство в блоге webkit
enСобытие для CSS position: sticky. О том, как событие sticky-change поможет связать стили с JS для создания прилипающих элементов наиболее нативным способом

1999aed8349b484fb1caa64d98ceb5e3.pngJavaScript


habrAngular vs. React vs. Vue: Сравнение 2017
habrКак работает JS: управление памятью, четыре вида утечек памяти и борьба с ними
enGithubШпаргалка по современному JavaScript
enJavaScript C++: Современные способы использования C++ в JavaScript проектах

  • ES2015+:
    habrECMAScript 6. Регулярные выражения с поддержкой Unicode
    enНаконец стал доступен Promise.prototype.finally ()
    enТоп 5 функций в JavaScript ES6, которые стоит освоить
    enТоп 10 функций ES6 в примерах
    enJavaScript декораторы


  • VueVueJS:
    • Почему Эван Ю считает, что JS-фреймворк Vue будет хорошим выбором для WordPress
    enAMA-сессия (вопрос-ответ) на hashnode.com, где команда Vue.js отвечала на вопросы пользователей
    enГрядущие изменения TypeScript во Vue 2.5
    enКак создать фильтры на Vue.js, с примерами
    enКак создать корзину на Vue 2 и Vuex
    en6 случайных JS задачек и их решения на VueJS
    enПродвинутая анимация во Vue.js


  • ReactReact:
    • Как рисование на чистом CSS помогло мне понять React-компоненты
    enПроблемы с Redux: могут ли React, MobX и Realm спасти нас?
    enРуководство по тестированию React компонентов
    enОбновление лицензции React — что это означает для React разработчиков?
    enRedux или нет: искусство управлением состоянием в React приложениях


  • AngularAngular:
    enОбработка Route параметов в Angular v2+
    enПрошлое, настоящее и будущее Angular CLI
    enAngular & Redux
    enРелиза Angular 5 немного задерживается


  • Libs & Plugins:
    enGithubvuetify — фреймворк компонентов с Material-дизайном для Vue.js 2
    enGithubngraph.path — нахождение пути в графе
    enGithubnanoevents — простая библиотека для работы с событиями
    enGithubbosket — коллекция компонентов, отображающих древовидные структуры для фреймворков React, Angular, VueJS, RiotJS
    enGithubwinamp2-js — реализация Windamp 2.9 на HTML5 и JS

8a7fed178dce42c099f5da05982aec87.pngБраузеры


ChromeВ Chrome будет принудительно включаться HTTPS для доменов .dev и .foo
enБудущие обновления Audio/Video в Chrome 62
enChrome 62 Beta: API для предсказания качества сети, вариативные OpenType шрифты и захват медиа с элементов DOM
enТехнические детали Safari Technology Preview 40: поддержка WebAssembly, CSS stroke, Resource/Perf/User timing 2, новые экспериментальные фичи
• Майнить криптовалюту можно прямо через браузеры пользователей. Это уже делают Pirate Bay и хакеры
• Google определила самый небезопасный веб-браузер
• Майнинг криптовалюты через браузер. Сколько на этом можно заработать?

d4b289ef0a00e969108c25d0c3d75f58.gifЗанимательное


• Googlebot всё ещё не сканирует HTTP/2
• Капитализация Apple снизилась почти на $50 млрд за 10 дней после презентации новых iPhone
• Хакеры взломали популярнейший «чистильщик» CCleaner и использовали его для распространения вредоносного ПО
• Как Apple обманула пользователей насчет «дифференциальной безопасности»
• Stack Overflow выпустила новую версию зарплатного калькулятора
• GitHub объявила о выходе из беты приложения GitHub Desktop
• Google приобретёт часть мобильного бизнеса HTC за $1,1 млрд
• Создатель смайлика Скотт Фалман: «Это самая «ботанская» штука на свете!»
eniOS 11 достигла более 6% пользователей всего интернета всего за два дня
enДэн Абрамов: что я выучил после работы в Facebook за почти два года?


Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

© Habrahabr.ru