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

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

59d14251b25f0624505035.png


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

1e465593b1b347eea23b1ab81b6e0a04.pngМедиа


podcast Подкаст «Frontend Weekend» #21 — Зар Захаров о «закрытии» Альфа-Лаборатории и уходе из LoftBlog
podcast Подкаст «Пятиминутка React» #37 — Prettier
podcast Подкаст «Фронтенд Юность (18+)» #20: Старт курса лекций по WebAssembly
podcast Подкаст «Drinkcast», Выпуск #10: «Похмельный, про сообщество и подкаст»
video «ALL YOUR HTML» #16: «Анимации по скроллу с сайта iPhoneX»
video HTML Шорты: Сахарный JavaScript, habrтекстовая версия
videoЯ.Субботник 2017

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


habrЗачем нужны заголовки
habrПора убить веб
• Дискуссия по выбору WordPress JS-фреймворка продолжается с привлечением лидеров open source сообщества
• 8 подкастов о Frontend
enВеб — это мой API
enПринципы работы с отзывчивыми изображениями
enВопросы для собеседования на позицию фронт-енд разработчика, а также ответы на них

  • AMP/PWA:
    AMPПроект Google AMP и его влияние на SEO
    AMPGoogle увеличил долю AMP-контента в мобильной выдаче
    enpwaПрогрессивные веб-приложения? Нет, мы делаем веб-приложения для чужих


  • Производительность:
    habrКак быстрее DOM построить: парсинг, async, defer и preload
    enО том, как HTTP/2 помогает решить проблемы производительности HTTP/1.1
    enEssential Image Optimization: новая бесплатная электронная книга о лучших техниках оптимизации изображений от Addy Osmani


  • Accessibility:
    habrIt’s a (focus) Trap. О фокусе в модальных окнах с точки зрения доступности
    • Пишем CSS, не забывая о доступности
    enДоступность в trivago
    enVoiceOver и list-style-type: none
    enРазработка доступных сайтов в контексте веб-ресурсов Вашингтонского университета
    envideoКак создать доступную кнопку-включатель — свежий выпуск шоу A11ycasts #25


  • Анимация:
    • Еженедельная подборка красивых эффектов на CSS/SVG/JS #55
    enSVGИспользование SVG clip-path для изменения цвета логотипа при скролле страницы
    enИзучение методов анимации и взаимодействия с WebGL (в примерах)
    enКреативные эффекты перехода между слайдами с помощью CSS Masks
    enFuzzy Plus — клевое демо с анимацией структуры волос


3a13046f2d4a46c4a60db0906e962adb.pngCSS


en5 вещей, о которых хотели бы знать CSS разработчики, когда начинали
enИнтерактивное введение в CSS Grid Layout от Mozilla
enПодводные камни и некоторые хитрости CSS Grid от Rachel Andrew
enИмплементация раскрывающихся блоков на чистом CSS

  • Шрифты:
    enCSS font-display: будущее рендера шрифтов в вебе
    enСтратегия загрузки шрифтов на eBay«s — localStorage, FontFaceSet APIs и Font Face Observer
    en«Что вы должны знать о вариативных шрифтах». Интервью с Tim Brown и Bram Stein из Adobe Typekit
    enПятиминутное руководство для улучшения знаний о типографике

1999aed8349b484fb1caa64d98ceb5e3.pngJavaScript


habrV8 под капотом
enКраткая история модульности в JS
enФреймворки тестирования Javascript: лучшее для тестирования JS кода
enПравда веба: JavaScript’у нельзя верить
enРассвет и закат Ext JS
enСравнительное исследование прогрессивных JS фреймворков: Angular.js & Vue.js
en8 советов по улучшению производительности для JavaScript

  • ES2015+:
    habrРазвертывание кода ES2015+ в продакшн сегодня
    enES6 для новичков
    enИзучи промисы создавая промис с нуля
    enES6 промисы: паттерны и анти-паттерны


  • VueVueJS:
    • Пять плагинов Vuex, Которые вы можете добавить в свой следующий проект
    • Используем axios вместе с Vue.js
    enУсловное применеие CSS классов в Vue.js
    envue-a11y-calendar — доступный переводимый календарь для VueJS


  • ReactReact:
    habrВышел React v16.0
    • Что вам нужно знать о React 16
    enReact Router v4: полное руководство
    enНачинаем работать с Redux
    enИспользование Preact как альтернативу React


  • Libs & Plugins:
    enLozad.js — производительная ленивая загрузка для изображений
    enSQIP — плейсхолдеры для изображений, основанные на SVG
    endraggable — современная библиотека для Drag & Drop с интерактивными примерами и эффективным оформлением
    enMicromodal.js — легковесная и настраиваемая библиотека для доступных модальных окон с на чистом JavaScript
    enstrudel.js — легковесный компонентный фреймворк

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


FirefoxРелиз Firefox 56, некоторые детали для разработчиков от Марата Таналина
FirefoxБета-выпуск Firefox 57 с многопоточным CSS-движком и новым оформлением
FirefoxenОбновление Developer Edition Devtools: теперь с Photon UI
FirefoxenScreenshots, Send Tabs и другие продвинутые функции в новом Firefox
• Снимки экрана и конвертер валют: выпущена Opera 48
• Opera 49 станет первым браузером с поддержкой шлемов виртуальной реальности

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


• Stack Overflow и Microsoft разработали бота-помощника для Visual Studio Code
• Twitter впервые вдвое увеличивает лимит на длину сообщений — до 280 символов
• Facebook и Microsoft запустили в эксплуатацию мощнейший трансатлантический интернет-кабель Marea
• Компания Microsoft вошла в число ключевых спонсоров OSI (Open Source Initiative)
• Nvidia: закон Мура потерял актуальность, а GPU станут заменой CPU
• Почему людям больше не нравится Кремниевая долина
• Как Apple, Facebook и Google создают новое телевидение
• Как блокчейн технология изменит WordPress
• Невероятная история происхождения Google Analytics


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

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

© Habrahabr.ru