Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Frontend Weekend» #52 – Сергей Бережной про 13 лет в Яндексе, ШРИ и проблемы из-за витания в облаках
• 
Подкаст «CSSSR» Новости 512 — Выпуск №5 (07.05 — 13.05)
• 
Подкаст «devschacht»: Ночной фронтенд #33: SOLID — это надёжность
• 
Подкаст «Drinkcast», #27 — «Тимлидерский»
• 
«ALL YOUR HTML» #48: «Анимация с сайта taotajima.jp на шейдерах и скролле»
• 
14 видео с KharkivCSS #3 2018
• 
4 видео с KharkivFrontend Meetup#_3: CSS Grid Layout, функциональное программирование, XSS, тесты
• 
Chrome and Web at Google I/O 2018, 25 видео
Веб-разработка
• Build 2018: Microsoft анонсировала ряд новых возможностей для PWA-приложений
• 
Справа налево. Что такое dir=rtl и как приручить арабский язык
• 
Вещи, которые разработчики должны знать о SEO в 2018
• 
Как можно использовать простую тригонометрию для улучшения анимации лоадеров
• 
Глубокое погружение в компоненты форм Bootstrap-а
- Производительность:
•
Оптимизируем веб с Виталием Фридманом, — компрессия, картинки, шрифты, фичи HTTP/2 и Resource Hints
•
First Input Delay: новая метрика производительности от Google для измерения первого впечатления интерактивности сайта
•
Использование Lighthouse для улучшения производительности загрузки страниц
•
User Timing API – измеряем производительность UX
- Tools:
• Карательные инструменты во фронтенде
• Webpack 4: практические рекомендации по настройке
•
Результаты опроса The Front-End Tooling Survey 2018
•
Анонс Lighthouse 3.0 с описанием нововведений
•
8 клевых новых возможностей в Sublime Text 3.1
•
`npm audit`: обнаружение и исправление опасных зависимостей
- Эффектный веб:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #78
•
brusher — легковесная библиотека для создания интерактивных бекграундов
•
Интерактивная SVG маска с полноэкранным изображением
•
Слайдер с эффектом искажения изображений на WebGL
CSS
• Почему избегать CSS-каскада — это проблема?
• Что за объект CSSStyleDeclaration и откуда он берется
• Поддержка CSS Typed OM появилась в Chrome. Как это облегчит жизнь разработчикам?
• 
Новые свойства CSS, которые меняют веб-дизайн
• 
Оформление строк текста с помощью box-decoration-break
• 
Переопределение стандартных стилей для Button
• 
Стилизация кнопок, правильный способ
• 
Eqio — простая, легковесная альтернатива элемент/контейнер выражениям
• 
Бесплатный курс для повышения уровня владения Bulma CSS
• 
Как стать CSS Grid Ninja
• 
«Что не так с CSS-in-JS?» в заметке Bred Frost, а также ответ «Что так с css-in-js» от Micah Godbolt
JavaScript
• 
Полезные приёмы работы с массивами в JavaScript
• 
Пятничный JS: случайное перемешивание
• 
BigInt — длинная арифметика в JavaScript
• Excel будет поддерживать JavaScript. Исследователи уже запустили таким образом майнер CoinHive
• Google добавил поддержку JavaScript в Mobile-Friendly Test и Rich Results Test
• 
Как я пользовался вебом в течении одного дня при выключенном JavaScript
• 
Полный курс по GraphQL — от новичка до эксперта
• 
Легкое введение Prepack от Дена Абрамова (часть 1)
• 
Простое объяснение понятий JavaScript Symbols, Iterators, Generators, Async/Await и Async Iterators
VueJS:
•
Работа с Vue после трех лет с React
•
Создание приложения по заказу еды с помощью Vue и Africa’s Talking
•
End-To-End тестирование VueJS клона HackerNews
•
Appetite for Components: создание своего первого приложения на Vue для Guns N’ Roses
•
5 lightning talks с VueConf.US, которые вы не можете пропустить
React:
•
Понимание жизненного цикла React-компонента
• Дополнительные вопросы на IT-собеседовании
•
Музей React State
•
5 инструментов для более быстрой разработки на React
•
Условный роутинг с помощью React Router v4
•
End-to-end тестирование приложений на React с помощью Puppeteer и Jest
Angular:
•
Angular — Stop Already!
•
Bazel, an experimental and unofficial feature of Angular 6
•
Angular Elements – A Practical Introduction To Web Components With Angular 6
- Libs & Plugins:
•
Guess.js — коллекция библиотек и инструментов, представленная на Google I/O 2018, которая позволяет использовать техники оптимизации сайта на основе данных и статистики
•
ScrollHint — JavaScript библиотека для добавления подсказки, если элементы блока скролятся горизонтально
•
Определение человеческой позы в реальном времени в браузере с помощью TensorFlow.js
•
ultradom — минимальный слой отображения для создания декларативных веб интерфейсов.
Браузеры
• Релиз Firefox 60, а также обзор технических нюансов релиза в обзоре Марата Таналина
• Улучшение sandbox-изоляции в Firefox
• Обновление Chrome 66: В зоне риска миллионы браузерных игр
• Доступен web-браузер Opera 53
• Вредоносные расширения для Chrome заразили более 100 000 пользователей
• 
Введение в Microsoft Edge DevTools Protocol
Занимательное
• Что показали на Google I/O 2018
• 40 анонсов Build 2018. Часть 1. Hardware & Dev Tools
• Итоги Microsoft Build 2018: Apple нам больше не конкуренты
• Google Photos скоро научится раскрашивать старые фотографии и конвертировать документы в PDF
• Windows 10 April 2018 Update: новые функции
• GitHub опубликовал отчёт о блокировках в 2017 году
• Microsoft ставит на искусственный интеллект
• Наступает эра невидимых гаджетов
• Если приватности нет — о ней не тревожьтесь!
• Google начала регистрировать домены в зоне .app
• Google + Microsoft: как два извечных конкурента вместе пытаются изменить мир
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
