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

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

---

Медиа

• Подкаст «Frontend Weekend» #52 – Сергей Бережной про 13 лет в Яндексе, ШРИ и проблемы из-за витания в облаках
• Подкаст «Веб-стандарты», выпуск №120: Firefox 60, Google I/O, авторитарный кодстайл, оптимизация JS с Prepack, CSS справа налево и тяжёлый лэндинг как спонсор выпуска
• Подкаст «CSSSR» Новости 512 — Выпуск №5 (07.05 — 13.05)
• Подкаст «Фронтенд Юность (18+)» #48 Я верстаю алюминиевые криптоогурцы
• Подкаст «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.