Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Юбилейный выпуск №100: зачем события, промокод на YGLF Kyiv, что изменилось за 2 года, сервис-воркеры везде, замороженный UA, фронтенд в 2017 году, новые форматы новостей, кому молодых фронтендеров?
•
Подкаст «Frontend Weekend» #33 – Виталий Фридман о создании и редизайне Smashing Magazine
•
Подкаст «devschacht»: Ночной фронтенд #16 — PiterJS 20: Dart, Kotlin, Closure и Wallaby.js
•
Подкаст «Фронтенд Юность (18+)» #30 Код Абрамова или мироточащий монорепозиторий
•
Подкаст «Drinkcast» #22 — «Как стать независимым разработчиком»
•
DevShow шоу от loftblog: Rambler, Андрей Смирнов: Как построить карьеру в топовой IT-компании?
•
ALL YOUR HTML #28: Шейдеры, триангуляция, освещение, физика.
•
Подкаст на egghead.io, в гостях Dan Abramov
•
Шоу «Totally Tooling Tips», специальный рождественский выпуск: обзор 2017 года
•
Коротко об HTML 5.2
•
Фронтенд в 2017: самые важные моменты года
•
16 докладов этого года, которые должен посмотреть каждый дизайнер и разработчик
•
Googlebot может читать JavaScript — как на это должны реагировать СЕОшники?
•
Mobile-first индексация на подходе — готовьте к этому ваш сайт
•
Что на самом деле не так с node_modules и почему вы виноваты в этом
•
Автоматизированная корректировка отступов в верстке на основании типографических стилей и текстовых метрик
•
Улучшаем UX c помощью правильной загрузки шрифтов
•
::part и ::theme, ::explainer — Monica Dinculescu рассказывает, что нового в стилизации Shadow DOM
•
Изучаем LESS: использование функций
•
Нативная валидация форм 1: UI и CSS
•
Подробный разбор CSS переходов
•
Я просто спросил 23,000 разработчиков, что они думают о JavaScript. И вот что я узнал
•
Сравнение фронтенд фреймворков в реальном мире с помощью бенчмарков
•
Как отслеживать JavaScript и Ajax события с помощью Google Analytics
•
Будущее jQuery UI и jQuery Mobile
•
«Async + Await» — Wes Bos на dotJS 2017
•
«JavaScript Of The Future (ES8 & Beyond)» — Brian Terlson на JS Kongress 2017
• В Firefox реализовано отложенное выполнение стороннего кода отслеживания перемещений
• Активация встроенного в Google Chrome блокировщика рекламы намечена на 15 февраля
• Браузер Opera получит встроенную защиту от криптоджекинга
•
Safari Technology Preview 46 привнесла Service Workers в браузер Apple
• Прототипирование VR и AR в браузере
• Google представила нейросеть NIMA, ранжирующую фото по эстетической ценности
• Эрик Шмидт покидает пост председателя совета директоров Alphabet, но продолжит принимать участие в развитии компании
• Белорусские власти разрешили майнинг и операции с криптовалютой
• «Толкин не мог не сочинять языки» Лингвист Александр Пиперски о клингонском, эльфийском и других искусственных языках
• ВОЗ решила признать зависимость от видеоигр психическим заболеванием
• Машинное обучение, искусственный интеллект и прочая автоматизация умственного труда: тренды 2017 года от Андрея Себранта
• Apple призналась, что замедляла старые iPhone ради обеспечения «наилучшего опыта». То же самое компания планирует делать с другими устройствами
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Производительность:
•Вы можете себе это позволить? Бюджет веб-производительности в реальном мире
•Производительность как восприятие: управление терпением
•Почему веб-разработчикам стоит беспокоиться об интерактивности
•Еще одна статья о том, как оптимизировать изображения для лучшей производительности в вебе
•3 совета для более быстрой загрузки шрифтов
•Какой из JavaScript фреймворков самый быстрый?
•Производительность в контексте стриминга видео
- AMP/PWA:
•ВКонтакте начинает поддержку AMP
•Google: PWA не имеют никаких преимуществ в поиске
•Addy Osmani о повышении производительности Tinder в контексте PWA
•Все, что вам нужно знать о Прогрессивных Веб Приложениях
•PWA Feature Detector — простое веб-приложение для определения возможностей PWA
- Инструменты:
• parcel — Молниеносно-быстрый упаковщик для веб-приложений без настроек. Официальный перевод документации
•Разделение кода с помощью Parcel
•Docusaurus — проект для легкого создания и поддержки документации опенсорс проектов
- Accessibility:
•О множестве нюансов использования атрибута Title
•Чему из доступности может научить нас работа над навигацией GOV.UK
•Accessibility Code Linter для React
•Инструменты тестирования доступности для десктопов и мобильных устройств
•Министерство юстиции США отменило все наработки по новому закону о доступости (ADA), над которыми работали последние 7 лет
•Детальные итоги опроса реальных пользователей скрин-ридеров
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #67
•Использование SVG для создания двухцветного эффекта для изображений
•Глитч-эффект на CSS
•Лучшее на CodePen за 2017-й
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- CSS Grid:
•Изучайте CSS Grid с помощью воссоздания знакомых лейаутов: Airbnb, Youtube и других
•Хотите изучить CSS Grid? Воспользуйтесь новым бесплатным курсом
•Как мы должны обрабатывать процентные значения margin и padding для элементов grid и flex?
JavaScript
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
- Теория:
•Как использовать Local Storage с JavaScript
•Введение в Javascript Proxy Objects
•Будущее управления состоянием
•Скрытые сокровища объектной композиции
React:
•Топ-10 библиотек для React на GitHub
•Решение проблемы конфликтов имен CSS классов в приложении на React с помощью webpack лоадера
• Укрощаем изоморфный и универсальный шаблон: серверный рендеринг на React-Redux
•Уродливая сторона Redux
•Последние конференции по React и React Native в 99-ти видео — дайджест докладов по React за Q3 2017
VueJS:
•WP Vue — простой блог на Vue, который показывает посты через WordPress REST API
•Почему 43% фронтенд разработчиков хотят учить Vue.js
Angular:
•Angular — Ярлык для импорта файлов стилей в компонентах
•Тестирование Angular 2 и CI с Jest
- Libs & Plugins:
•markdown-to-jsx — интерпретатор текста на markdown в эквивалент React JSX
•«Moon Sugar» — библиотека для добавления снежинок на сайт
•unchanged — небольшой быстрый обработчик с «неизменяемыми» объектами и массивами
•imaskjs — маскирование полей ввода на чистом JS
•cherow — быстрый, совместимый со стандартами, самостоятельный синтаксический анализатор ECMAScript с фокусом на производительность и стабильность
Браузеры
• В Firefox реализовано отложенное выполнение стороннего кода отслеживания перемещений
• Активация встроенного в Google Chrome блокировщика рекламы намечена на 15 февраля
• Браузер Opera получит встроенную защиту от криптоджекинга
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
• Прототипирование VR и AR в браузере
• Google представила нейросеть NIMA, ранжирующую фото по эстетической ценности
• Эрик Шмидт покидает пост председателя совета директоров Alphabet, но продолжит принимать участие в развитии компании
• Белорусские власти разрешили майнинг и операции с криптовалютой
• «Толкин не мог не сочинять языки» Лингвист Александр Пиперски о клингонском, эльфийском и других искусственных языках
• ВОЗ решила признать зависимость от видеоигр психическим заболеванием
• Машинное обучение, искусственный интеллект и прочая автоматизация умственного труда: тренды 2017 года от Андрея Себранта
• Apple призналась, что замедляла старые iPhone ради обеспечения «наилучшего опыта». То же самое компания планирует делать с другими устройствами
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.