Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №102: Зачем нужны эксперименты с CSS, Хаяку на JS, как развиваются спецификации CSS и что им мешает, стили в компонентном стеке.
• Подкаст «Веб-стандарты», Выпуск №103: Браузеры и разработка интерфейсов, где искать, если потеряли статью, точка с запятой в JS, понятно о выравнивании в CSS, трюки Сары с SVG, управление проектами, фронтендер в Берлине.
• Подкаст «Frontend Weekend» #34 – Олег Бунин про организацию конференций, Павла Дурова и цены на билеты
• Подкаст «Frontend Weekend» #35 – Шокирующая правда о Фронтенд Юности
• Подкаст «devschacht»: Ночной фронтенд #17 — Webstorm, Wallaby для бедных и нативные модули
• Подкаст «Фронтенд Юность (18+)» #31: Стоит ли переписывать ваш проект на Rust?
• Подкаст «Фронтенд Юность (18+)» #33: Механизм спекулятивного выполнения кода
•
«ALL YOUR HTML» #31: «Вёрстка простого макета и общение»
• 6 видео с KharkivFrontend Meetup#_0: Boilerplate, GraphQL, D3, Service Workers, Kiss и Как заработать на accessibility
• 23 доклада с FrontFest 2017: код и творчество, разработка SPA, оптимизация графики, декларативная шаблонизация, алгоритмы и структуры данных, доступность, i18n и другое
• Нейронная сеть, которая верстает сайты по картинке
•
Фронтенд в 2018: больше консенсуса, меньше сложности
• Что нового в HTML 5.2?
• Краткий обзор HTML 5.2 Dialog
• Оптимизация SVG Text & Image Delivery с помощью with Inline SVG. Когда одной техники встраивания SVG недостаточно
• Нужны ли CSS-препроцессоры в 2018 году, или насколько мы близки к ванильному CSS
• Делаем CSS анимацию более натуральной
• Улучшение типографики с помощью Font Variants
• CSS Cheat Sheet — современная шпаргалка по CSS
• Демистификация выравнивания в CSS
• «display: contents» все ближе. Наконец, поддержка «display: contents» включена в Chromium и WebKit, и вот несколько слов по этому поводу
• Последние способы разобраться с каскадом, наследованием и специфичностью
• Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.
• ESLint: не пишите JavaScript без него!
• Полное руководство по развертыванию приложения на JavaScript — часть 1: Database и API Deployment
• Шесть маленьких, но клевых свойств ES7 + ES8
• «Создание робота на JavaScript» — доклад Anna Gerber с CampJS
• В Firefox 59 будет прекращена поддержка GTK+ 2
• David Walsh присоединяется к команде разработчиков Mozilla DevTools
• Что Spectre и Meltdown означают для WebKit
• Intel и Microsoft признали, что патчи для Meltdown и Spectre замедляют работу компьютеров
• Эксплоиты и тесты производительности, связанные с уязвимостями Meltdown и Spectre
• Под угрозой все. Что такое Meltdown и Spectre и как с ними жить?
• Заплатка против Spectre снижает производительность iPhone 6 до 50%
• Самые интересные AI-решения и проекты 2017 года
• CES 2018: Самые интересные гаджеты выставки
• Microsoft объединилась с Open Whisper Systems и представила end-to-end шифрование в Skype
• Как оценить проект и не попасть впросак? часть 1, часть 2
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
Подкаст «Веб-стандарты», Выпуск №102: Зачем нужны эксперименты с CSS, Хаяку на JS, как развиваются спецификации CSS и что им мешает, стили в компонентном стеке.•
Подкаст «Веб-стандарты», Выпуск №103: Браузеры и разработка интерфейсов, где искать, если потеряли статью, точка с запятой в JS, понятно о выравнивании в CSS, трюки Сары с SVG, управление проектами, фронтендер в Берлине.•
Подкаст «Frontend Weekend» #34 – Олег Бунин про организацию конференций, Павла Дурова и цены на билеты•
Подкаст «Frontend Weekend» #35 – Шокирующая правда о Фронтенд Юности•
Подкаст «devschacht»: Ночной фронтенд #17 — Webstorm, Wallaby для бедных и нативные модули•
Подкаст «Фронтенд Юность (18+)» #31: Стоит ли переписывать ваш проект на Rust?•
Подкаст «Фронтенд Юность (18+)» #33: Механизм спекулятивного выполнения кода •
«ALL YOUR HTML» #31: «Вёрстка простого макета и общение»•
6 видео с KharkivFrontend Meetup#_0: Boilerplate, GraphQL, D3, Service Workers, Kiss и Как заработать на accessibility•
23 доклада с FrontFest 2017: код и творчество, разработка SPA, оптимизация графики, декларативная шаблонизация, алгоритмы и структуры данных, доступность, i18n и другое
Веб-разработка
• Нейронная сеть, которая верстает сайты по картинке
•
Фронтенд в 2018: больше консенсуса, меньше сложности•
Что нового в HTML 5.2?•
Краткий обзор HTML 5.2 Dialog•
Оптимизация SVG Text & Image Delivery с помощью with Inline SVG. Когда одной техники встраивания SVG недостаточно - Безопасность:
•
Рассказ о том, как я ворую номера кредиток и пароли у посетителей ваших сайтов
• Рассказ о том, как я майню эфир через meltdown на ваших телефонах при помощи npm
• Сбой антиспам-системы привёл к коллапсу в репозитории NPM
• Третьесторонние скрипты. Мнения экспертов об их влиянии на производительность и безопасность, а также подборка ссылок на соответствующие материалы
• Объяснение HTTPS на примере голубиной почты
• Сломают ли Spectre & Meltdown JavaScript?
- Производительность:
• Google обновил инструмент PageSpeed Insights
• 8 экспертов из области фронтенда высказывают свои мысли о веб-производительности в 2018-м
• Оптимизация странц с помощью заголовка “Save-Data”
• Black Friday/Cyber Monday 2017: Анализ и статистика производительности топовых интернет-магазинов в период распродаж
- AMP/PWA:
•
Google нашёл решение проблемы с отображением URL в AMP-результатах
• Google значительно обновил инструмент для проверки AMP-страниц
• Письмо о Google AMP. Открытое письмо сообщеста против монопольного навязывания Гуглом своих технологий
• 
Прогрессивное веб-приложение для каждого проекта
- Tools:
• Отладка JavaScript с помощью WebStorm 2017.3 в связке с Chrome DevTools
• VS Code Blog: Что нового для отладки под Chrome
• Webpack: В Webpack 4.0 будет использоваться JSON Tree Shaking, По умолчанию Webpack 4 будет работать в режиме configless
- Accessibility:
• Пандус для сайта
• Небольшие улучшения, которые могут оказать огромное влияние на доступность вашего сайта
• Слепая женщина подает в суд на 30 сайтов из-за проблем с доступностью
• Разбираемся с WCAG 2.1 – обзор критериев успеха для когнитивных расстройств
• Маленькие шаги в сторону доступности N26 — крупного европейского онлайн-банка с веб-платформой на React
- Анимация:
• Masked Circle Slider
• ertdfgcvb — интерактивная ascii-анимация
• Pure CSS Burrito Toggle — насколько далеко можно зайти с кастомными чекбоксами
• Фантастические Pen-демки и где их искать: часть #1, часть #2
CSS
• Нужны ли CSS-препроцессоры в 2018 году, или насколько мы близки к ванильному CSS
•
Делаем CSS анимацию более натуральной•
Улучшение типографики с помощью Font Variants•
CSS Cheat Sheet — современная шпаргалка по CSS•
Демистификация выравнивания в CSS•
«display: contents» все ближе. Наконец, поддержка «display: contents» включена в Chromium и WebKit, и вот несколько слов по этому поводу•
Последние способы разобраться с каскадом, наследованием и специфичностью
JavaScript
•
Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.•
ESLint: не пишите JavaScript без него!•
Полное руководство по развертыванию приложения на JavaScript — часть 1: Database и API Deployment•
Шесть маленьких, но клевых свойств ES7 + ES8•
«Создание робота на JavaScript» — доклад Anna Gerber с CampJS- Фреймворки:
• Stack Overflow назвал самые трендовые JS-фреймворки в соответствии с концепцией жизненного цикла
• Топ JavaScript библиотек и технологий, которые стоит изучить в 2018
• npmjs.com: Состояние JavaScript фреймворков, 2017 Часть 1: Front-End фреймворки, Часть 2: Экосистема React, Часть 3: Back-End фреймворки
• Почему React более популярен, чем Angular?
- Теория:
• Возможности JavaScript, о существовании которых я не знал
• Почему мутация может быть пугающей
• Понимание стэка вызова в JavaScript
• Как читать ECMAScript спецификацию
React:
• 5 практических советов, чтобы наконец выучить React в 2018
• Введение в React Router v4 и его философию роутинга
• React, Redux и архитектура JavaScript
• Знакомство с Immer: новый способ простой работы с иммутабельностью
• Как создать чат в реальном времени на React и GraphQL
• react-perf-devtool — расширение Chrome devtools для инспектирования производительности компонентов React
React:
Angular:
• Реактивные формы (reactive forms) Angular 5 (2+) Часть 1
• Анализ и оптимизация бандла Angular 5 приложения
• Ngx-kit — набор инструментов и генератор компонентов для Angular 5
• Стал доступен Angular 5.2
• Динамическая загрузка компонентов с помощью Angular CLI
• 12 вещей, которые помогут большим организациям работать Angular правильно
Angular:
VueJS:
• Vuebnb: A Full-Stack Vue.js and Laravel App
• Интернационализация с помощью vue-i18n (часть 1)
• Пять ловушек, которые необходимо избегать при юнит тестировании Vue.js
VueJS:
Браузеры
• В Firefox 59 будет прекращена поддержка GTK+ 2
•
David Walsh присоединяется к команде разработчиков Mozilla DevTools•
Что Spectre и Meltdown означают для WebKit
Занимательное
• Intel и Microsoft признали, что патчи для Meltdown и Spectre замедляют работу компьютеров
• Эксплоиты и тесты производительности, связанные с уязвимостями Meltdown и Spectre
• Под угрозой все. Что такое Meltdown и Spectre и как с ними жить?
• Заплатка против Spectre снижает производительность iPhone 6 до 50%
• Самые интересные AI-решения и проекты 2017 года
• CES 2018: Самые интересные гаджеты выставки
• Microsoft объединилась с Open Whisper Systems и представила end-to-end шифрование в Skype
• Как оценить проект и не попасть впросак? часть 1, часть 2
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
