Дайджест свежих материалов из мира фронтенда за последнюю неделю №287 (30 октября — 5 ноября 2017)

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

k3us4l585daja_szaeezynmgvyq.png


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

1e465593b1b347eea23b1ab81b6e0a04.pngМедиа


podcast Подкаст «Frontend Weekend» #26 — Владислав Козуля про идеальное собеседование и как избавиться от образа шутника в твиттере
podcast Подкаст «devschacht»: Ночной фронтенд #9 — Может быть не React?
podcast Подкаст «Drinkcast», Выпуск #15 — «Юные Бобби»
podcastvideo Подкаст «Пятиминутка Angular» #5 — Angular 5, CLI 1.4, meetups (NYC, MIX, Moscow), Acronis on Angular
podcastvideo Подкаст «Фронтенд Юность (18+)» : Первый стрим
videoО девушках в программировании и честности. Frontend Юность в гостях у loftblog
videoЗапись трансляции WSD, прошедшей в эту субботу в Киеве
video «ALL YOUR HTML» #21: «SVG кривые и анимация лого css-live.ru на snap.svg»
envideo Шоу «Totally Tooling Tips»: Тестирование доступности

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


habrКроссбраузерная вёрстка. Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект
habrПробел в знаниях основ веб-разработки
habrКак рассказать о современной веб-разработке путешественнику во времени из 2007 года
• Новости Node.js: Выпуск серверной JavaScript-платформы Node.js 9.0, Node.js 8 переходит на долгосрочную поддержку, а ветка Node.js 9 становится текущей. Итого, Что же нового в Node.js 9?
enБудущее производительности — бандлинг

  • AMP/PWA:
    enpwaservice workers в Safari и другие хорошие новости для PWA
    enpwaДерзкие планы Microsoft по поводу PWA в Windows 10
    enpwa Новый Angular Service Worker — автоматическое создание  PWA: Часть 1: теория, Часть 2: практика. Полное практическое руководство по Angular Service Worker: caching, push, updates
    enpwaShadow DOMs: Инкапсуляция в PWA
    enAMPThe meaning of AMP. Критическая статья Jeremy Keith о предназначении AMP


  • Инструменты:
    habrСписок лучших инструментов для web-анимации
    • Chrome Headless. Запускаем на удаленном сервере с режимом отладки
    enСостоялся релиз SVGO 1.0.0, одного из лучших оптимизаторов SVG
    enКак дебажить фронтенд: Console
    enНовый уровень Webpack Dashboard
    enДорожная карта разработки VS Code в 2018
    enicongram — сервис для использования популярных иконок на лету
    enBootstrap 4 Buffet — интерактивный визуальный выбор компонентов Bootstrap 4 для быстрого использования
    engifski — конвертер видео в высококачественные GIF, базирующийся на pngquant


  • Анимация:
    • Еженедельная подборка красивых эффектов на CSS/SVG/JS #60
    • Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2
    en Анимация обрезанных фигур
    en3D Movie Booking App UI на CSS/HTML
    enЭмуляция плавной CSS анимации средствами JavaScript
    enПрелоадер страницы на CSS в виде Kylo Ren


3a13046f2d4a46c4a60db0906e962adb.pngCSS


habrКак прятать. Когда display: none, а когда visibility: hidden
• Понимание вьюпорта WebView в iOS 11
enКрис Койер о преимуществе кастомных свойств CSS перед data-атрибутами в разметке
enFlexbox и Grid, ваши лучшие лейаутные друзья
enПодробно о создании отзывчивых доступных таблиц
enПродвинутая стилизация форм средствами CSS
enО трудностях преодоления проблем глобального CSS
enКак Sass может сохранить вам кучу времени
enСвященная CSS война, или как выйти за рамки догмы
enКак лучше струкрутировать CSS по компонентам
enКак написать TODO приложение на HTML и CSS без использования JavaScript

  • Типографика:
    habrТипографика и современный CSS
    • MyFonts представила мобильное приложение для распознавания шрифтов
    enCSS font-display: будущее рендера шрифтов в вебе
    enУправление загрузкой шрифтов больше не является проблемой. Zach Leatherman о postcss-foft-classes
    enВеб-типографика: создаем таблицы для того, чтобы их читать, а не рассматривать
    enТесты размеров вариативных шрифтов

1999aed8349b484fb1caa64d98ceb5e3.pngJavaScript


• JS: Настройка окружения. Новый бесплатный курс на Hexlet
• Плавильный котел JavaScript. Перевод статьи Дэна Абрамова «The melting pot of JavaScript»
habrЧем хорош (и чем плох) Typescript: опыт UI-разработчиков
habrJavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг
• 3+ года Ember, 6 месяцев React
enЛямбда-исчисление с помощью JavaScript. Введение в корни функционального программирования

  • ES2015+:
    habrВведение в часто используемые особенности ES6. Часть 2
    enРефакторинг старой и сломанной библиотеки с использованием async/await c TDD


  • AngularAngular:
    • Выпущено обновление JS-фреймворка Angular 5.0.0
    enAngular v5 вышел, ознакомьтесь с новыми функциями, изменениями и улучшениями
    en18 советов от keycdn по улучшению производительности Angular
    enЭти 5 статей помогут вам стать экспертом Angular Change Detection


  • VueVueJS:
    enДемистификация методов жизненного цикла Vue
    enVueJs: введение в Vuex
    enИнтеграция React и Vue компонентов в одном приложении
    enСоздание Vue приложения с Nuxt.js и Server-Side рендерингом
    enСоздание игры 2048 на Vue.js


  • ReactReact:
    • Правила жизни с Редаксом
    enИстория React: как покупка Инстаграмма Фейсбуком привела к опенсорсингу React.js
    enNetflix ускорился в два раза, отказавшись от client-side React
    enКак работает JavaScript: глубокое погружение в WebSockets и HTTP/2 с SSE + как выбрать правильный путь
    enШаблоны компонентов React
    ensvgr — трансформация SVG в компоненты React


  • Libs & Plugins:
    enGithubFrappé Charts — простые и современные графики, вдохновленные GitHub, без зависимостей
    enGithubВведение в тепловые карты на Mapbox GL JS
    enGithubhandorgel — доступный аккордион, соответствующий стандартам W3C и написанный на ES6
    enGithubFocusingly — JavaScript библиотека для улучшения стилизации фокуса на элементах

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


FirefoxВ Firefox 58 появится защита от скрытой идентификации пользователей при помощи Canvas
IEСотрудник Microsoft прямо посреди презентации возможностей Azure установил Chrome, поскольку Edge постоянно зависал
ChromeGoogle выпустила бета-версию браузера Chrome 63
FirefoxFirefox получит инструмент анонимности из Tor Browser
IEenПреставляем новые оптимизации JavaScript, WebAssembly, SharedArrayBuffer, и Atomics в EdgeHTML 16
enТехнические подробности Safari Technology Preview 43
• Статистика операционных систем и браузеров за октябрь 2017 года

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


• Комитет IETF одобрил код 103 ответа HTTP
• GitHub запустил форумы сообщества для объединения разработчиков
• Доступно о машинном обучении: распознавание речи
• Студентам MIT удалось обмануть ИИ Google, заставив думать, что черепаха — это винтовка
• Результаты поиска Google больше не зависят от домена верхнего уровня
• AliExpress наняла инженеров из «Яндекса» для обучения сервисов русскому языку
enПолное руководство по SEO в 2018


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

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

© Habrahabr.ru