Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Frontend Weekend» #51 – Владимир Новик о работе независимого консультанта, переезде в Израиль и книге про React Native
•
Подкаст «Веб-стандарты», выпуск №119: Dojo 2 и Edge 17, BigInt в JS, Safari почти догнал, CSS-меню и подгриды, HTTPS на GitHub Pages, плохой верстальщик
•
Подкаст «devschacht»: Ночной фронтенд #32: Ограничения, которые мы накладываем на код
•
Подкаст «Фронтенд Юность (18+)» #46 Печальное состояние экосистемы JavaScript 2
•
Подкаст «Фронтенд Юность (18+)» #47 Олег Мохов: от React Finland до React Russia
•
«ALL YOUR HTML» #47: «Vue.js анимации + 100 тысяч частиц на WebGL»
•
CSSSR: «Новости 512 — Выпуск №4 (30.4 — 06.05)»
•
Как мы построили конвейер по подготовке фронтендеров — Александр Першин, HTML Academy
•
Задачи с собеседований
• Что поправить в верстке перед выпуском в продакшн?
• Четыре вопроса про БЭМ
•
Хочешь быть топ-разработчиком? Ты должен создавать вещи. Вот список того, с чего можно начать
•
Создание serverless контактной формы для вашего статического сайта
•
Готова ли к использованию технология ServiceWorkder? Да.
•
Дружественные для мобильных устройств поля для ввода номеров с `inputmode`
•
Основные руководства по прогрессивным веб приложениям на MDN Web Docs
•
Свежие релизы: Bootstrap 4.1.1, HTML5 Boilerplate 6.1.0, Dojo 2.0
• Что умеют и чего не умеют CSS Custom Properties.
• Ещё одна коллекция интересных фактов про CSS-гриды (CSS Grid Layout)
•
Руководство по состоянию стилей для печати в 2018
•
Display: Contents — это не CSS Reset
•
Переменные окружения в CSS
•
Решено с помощью CSS! Dropdown Menus
•
cssgr.id — онлайн-генератор CSS Grid раскладки
•
Создание уникальных веб-впечатлений с помощью кастомных CSS-курсоров
•
Быстрое введение в CSS анимацию
•
CSS Grid: больше гибкости с minmax()
•
Странный, но действенный трюк для отладки CSS
•
Мощь Flex-Grow
•
Отвратительно читаемый отзывчивый текст с viewport единицами
•
Как я писал плагины для React, Vue и Angular
•
9 полезных приёмов для тех, кто программирует на JavaScript
• Вы не знаете JS: Асинхронность и Производительность. Глава 4: Генераторы
• Руководство по регулярным выражениям в JavaScript
• Многоликий this в JS
•
Дорожная карта Ember в 2018
•
Dojo 2: что предлагает новая версия
•
RxJS 6: Что нового и что изменилось?
•
BigInt: целые числа произвольной точности в JavaScript
•
Захват и отчёт JS ошибок с window.onerror
• В Firefox 60 появится реклама на стартовой странице
• Google Chrome научился блокировать автовоспроизведение видеоконтента
• Бета-версия Google Chrome 67 получила новые API для работы с VR
• Мнение: пришло время вновь попробовать Firefox
• Google добавила поддержку своего платёжного сервиса во все браузеры
• Oculus заменила фреймворк React VR на React 360
• Вышла стабильная версия графического формата WebP
• База знаний для программистов Stack Overflow запустила сервис для обсуждения вопросов разработки внутри компаний
• Выявлена попытка включения бэкдора в популярный NPM-пакет mailparser
• Google открыл gVisor, гибрид системы виртуализации и контейнеров
• GitHub и Twitter по ошибке сохраняли открытые пароли в логе
• Instagram и WhatsApp представили групповые видеозвонки
• Новый проект от OpenAI научил ИИ вести дебаты между собой
• Почему будущее без паролей — уже близко (но не совсем)
• Статистика Steam: рост доли CPU и GPU AMD, реванш Windows 10
• Раскрыты планы Intel и AMD по обновлению настольных платформ
?
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Tools:
•Как решить проблемы Webpack. Практический случай
•Работа с DevTools Console и Console API
•Инспекция анимаций в Chrome DevTools
•Обзор Visual Studio Code для разработчиков фронтенда
- Accessibility:
•Написание доступного веб контента
•Подборка блогов, посвященных Accessibility
•18 доступных букмарклетов, которые можно использовать для тестирования A11Y
•Знайте вашу ARIA: 'Hidden' vs 'None'
- Эффектный веб:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #77
• Художница создала картину вручную с помощью LESS
•Морфинг кнопки Play в видеоплеере с помощью GSAP
•curtains.js — легкий WebGL инструмент для анимации изображений
•Отзывчивый текст с маской и видео на фоне
•Идеи обратной связи с помощью прогрессивных эффектов наведения
CSS
• Что умеют и чего не умеют CSS Custom Properties.
• Ещё одна коллекция интересных фактов про CSS-гриды (CSS Grid Layout)
•
![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)
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Вы не знаете JS: Асинхронность и Производительность. Глава 4: Генераторы
• Руководство по регулярным выражениям в JavaScript
• Многоликий this в JS
•
![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)
Angular:
•Angular 6 уже доступен
•Что нового в Angular 6
•Использование Angular NgModules для переиспользуемого кода и прочего
•Определение изменения в Angular: все что вам нужно знать
•Полное руководство по стратегии определения изменений Angular onPush
•My Experience: Learning Angular 5 as a long time react developer
VueJS:
•Введение в рендер динамических списков во Vue.js
•Почему следует использовать Vue.js при работе с Laravel?
•Лучший бекенд для приложений на VueJS
React:
•Как победить Webpack 4 и создать клевое приложение на React
•Создание оптимистических пользовательских интерфейсов в React
•Вот почему нам нужны bind event handlers в Class Components в React
•Полный урок по React с Apollo и GraphQL
•Создание форм на React — все что вам нужно знать
- Libs & Plugins:
•ReLaXed — инструмент, который интерактивно создает PDF с помощью HTML или Pug
•is-google — верификация того, что запрос приходит от краулеров Google
•a11y-dialog — легкий (1.3Kb) гибкий скрипт для создания доступных диалоговых окон
•selection.js — простая и легковесная библиотека для реализации визуального выделения DOM. No jQuery
•ow — валидация аргументов функции, написанная по-человечески
Браузеры
• В Firefox 60 появится реклама на стартовой странице
• Google Chrome научился блокировать автовоспроизведение видеоконтента
• Бета-версия Google Chrome 67 получила новые API для работы с VR
• Мнение: пришло время вновь попробовать Firefox
• Google добавила поддержку своего платёжного сервиса во все браузеры
Занимательное
• Oculus заменила фреймворк React VR на React 360
• Вышла стабильная версия графического формата WebP
• База знаний для программистов Stack Overflow запустила сервис для обсуждения вопросов разработки внутри компаний
• Выявлена попытка включения бэкдора в популярный NPM-пакет mailparser
• Google открыл gVisor, гибрид системы виртуализации и контейнеров
• GitHub и Twitter по ошибке сохраняли открытые пароли в логе
• Instagram и WhatsApp представили групповые видеозвонки
• Новый проект от OpenAI научил ИИ вести дебаты между собой
• Почему будущее без паролей — уже близко (но не совсем)
• Статистика Steam: рост доли CPU и GPU AMD, реванш Windows 10
• Раскрыты планы Intel и AMD по обновлению настольных платформ
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
ht-pro
Спасибо за подборку.