Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• Подкаст «Frontend Weekend» #87 – Михаил Трошев о том, как эффективно руководить распределённой командой в Яндексе
• Подкаст «CSSSR»: Новости 512 — Выпуск №34 (14.01 — 20.01)
• «ALL YOUR HTML» #s2e5: «Макаронный монстр из полосок и шейдеров»
• Видео с Odessa Frontend MeetUps #7-9
Веб-разработка
• Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript
• 12 странных вещей, которые могут произойти после установки npm пакета
• Типы инпутов в HTML5: что сейчас с ними?
• Новичок в JAMstack? Все, что нужно знать для начала работы с ним
• Веб-стандарты: что, почему и как
• Лучше один раз увидеть, чем сто раз услышать, лица и штрих-коды — Shape Detection API
• Почему GraphQL выигрывает у традиционных API
• GraphQL: руководство для начинающих
- Производительность:
• Использование функции аудита Chrome DevTools для измерения и оптимизации производительности (часть 1)
• Как использовать Chrome Dev Tools для поиска узких мест в производительности
• Как повышение производительности сайта может помочь спасти планету
• Что такое Client Hints и стоит ли их использовать
• Оптимизация рендеринга в браузере для фронтенд-разработки
- Tools:
• Puppeteer для краулинга страниц сайта и сохранения их в Markdown
• STAR (Design Systems + TypeScript + Apollo GraphQL + React): новое поколение фронтенд-инструментария для разработки
• Как перейти на Gulp.js 4.0
• wpk — продвинутый, но интуитивно понятный неофициальный CLI для webpack
• Визуализатор кода функций с экспортом в SVG
- Accessibility:
• Как разрабатывать макеты сайтов для скринридеров
• Почему внедрение веб-доступности продолжает терпеть неудачу
• Большая судебная победа веб-доступности в деле Domino’s Pizza, чей сайт не отвечал ADA Compliance
- Анимация:
• Продвинутый Three.js: шейдерные материалы и постобработка
• Руководство по созданию множества интерактивных частиц на Three.js
• Как создать глитч-эффект для текста и изображений в CSS
• SVG Filters 101. Руководство от Sara Soueidan, которое поможет вам понять, что SVG фильтры из себя представляют, и покажет, как их использовать для создания собственных визуальных эффектов.
CSS
• Как CSS специфичность работает в браузере
• Создание WEB компонента для управления звуковым каналом | Нестандартный подход к применению CSS Grid
• Анимация CSS Grid Layout, что мы имеем?
• Та же история, только с CSS
• Насколько хорошо вы знаете CSS Layout?
• Использование псевдокласса: lang с селектором атрибута lang для языковых стилей
• 2019 CSS Wishlist от Chris Coyier
• В защиту Utility-First CSS
• Полное руководство по SCSS / SASS.
JavaScript
• Переносим 30 000 строк кода с Flow на TypeScript
• Learn Vanilla JS — подробный план по изучению ванильного JS, наряду с учебными ресурсами и проектными идеями, которые помогут вам начать работу.
• Анимация URL с помощью Javascript и Emojis
• Как удалить неиспользуемый код с помощью DevTools
• Vue vs React: выбор лучшего инструмента для вашего проекта в 2019 году
• Как удалить дубликаты массивов в ES6
• Почему я перестал экспортировать дефолтные значения из моих JavaScript-модулей
• Мутирует ли метод данные
- Теория:
• JavaScript: вопросы и ответы
• Краткая история JavaScript. Часть 3
• Модули JavaScript: от IIFE до CommonJS и ES6
• Практическое руководство по написанию более функционального JavaScript
• Работа с часовыми поясами в JavaScript
- React:
• Переиспользуемые инпуты форм в React. Просто и гибко!
• Введение в React Hooks
• Использование React Portals для отрисовки дочерних элементов вне иерархии DOM
• Как создать прогрессивное веб-приложение на React-е (PWA)
- Angular:
• Добавляем поддержку мультиязычности в Angular
• Как настроить Webpack 4 с Angular 7: полное руководство
• Angular, Autoprefixer, IE11, и CSS Grid заходят в бар...
• Управление состоянием приложений в Angular используя Firebase
• Плюсы и минусы выбора Angular для разработки веб приложений
- VueJS:
• 8 худших вопросов на собеседовании по Vue.js
• Vue RFCs (request for comments) — для существенных изменений / дополнений в ядре Vue
• Проектирование Progressive Web App с использованием Vue CLI 3
- Libs & Plugins:
• Facebook опубликовал Spectrum 1.0.0, библиотеку для работы с изображениями
• shiny — Добавьте блестящие отражения к тексту, фону и границам на устройствах, которые поддерживают событие DeviceMotion.
• jsdiff: нахождение разницы в тексте, реализованное на JavaScript
Браузеры
• Mozilla сворачивает программу Test Pilot и сервис Firefox Screenshots
• Firefox 67 начнёт использовать отдельные профили для разных установок
• В Firefox 69 планируется по умолчанию отключить поддержку Flash
• Ретроспектива Firefox DevTools WebConsole 2018
• Дополненная реальность и браузер — экспериментальное приложение
Занимательное
• Hello world! Или англоязычный Хабр, v1.0
• WordPress.com собрал $2.4 млн от Google и партнеров на создание новостной платформы публикации Newspack
• История больших данных (Big Data) часть 1, Часть 2
• Microsoft: голосовой помощник Cortana больше не будет конкурировать с Alexa и Google Assistant
• Мнение: почему 10 year challenge — идеальный флешмоб для обучения ИИ
• Как выходец из Индии стал CEO Google: история Сундара Пичаи
• Microsoft попрощается с Windows 10 Mobile в конце этого года
• Обнаружен дамп, содержащий 773 млн email-адресов и 21 млн уникальных паролей
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort