Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• «Новости 512» от CSSSR: NodeJS 15.1.0, TS 4.1 RC, Promises с нуля, нативность Sketch, тарифы Travis-CI, MDN Web DNA 2020
• Подкаст «Сделайте мне красиво», выпуск №49: Постарайтесь не выгорать джунами
• Подкаст «Фронтенд Юность» №162: Сотни новых фронтендеров отнимают наш хлеб
• Подкаст «Веб-стандарты» №255: Подсказки для флексов, File API, выражения от контейнера, ARIA, переменные и темы, масонри
• Готовим console.log() правильно
• Сравнение скорости генераторов статических сайтов
• Есть ли перспективы у монолитных web-приложений?
• Что такое атрибут rel=noopener
• Атаки кликджекинга (clickjacking ) и как их предотвратить
• Создание микро-фронтендов
• История перехода Wix на React Native
• Веб-разработка для начинающих: 12-недельная учебная программа из 24 уроков по основам JavaScript, CSS и HTML от Microsoft
• Релиз Bootstrap 5 Alpha 3
• Таблицы и CSS-свойство float в современной веб-разработке
• Нативный Masonry Layout в CSS Grid Level 3
• Простые круговые диаграммы с фоллбеком
• Быстрый совет: как сделать новую функцию CSS Overview в Chromium Devtools доступной
• Техника ворона: на шаг ближе к Container Queries
• Самый правильный трюк для автоматического увеличения textarea
• Что такое flex-grow, flex-shrink и flex-basis
• Глубокое погружение в CSS Grid minmax()
• Парсинг Markdown для автоматической вставки оглавления на страницу
• Как я писал JavaScript, чтобы избежать JavaScript
• 10 выводов из масштабного внедрения TypeScript
• Веб-воркеры для улучшения производительности UI
• Google закрыла в Chrome ещё две уязвимости нулевого дня. За месяц их было устранено уже пять
• В Chrome намерены удалить поддержку технологии Server Push
• Warp: улучшенная производительность JS в Firefox 83
• Прекращение поддержки IE11 — это прогрессивное улучшение
• Создатель Python Гвидо ван Россум выходит на работу в Microsoft
• Свежий релиз WordPress 5.6 будет нести в себе еще одно крупное изменение jQuery
• Google обязал применять инклюзивную терминологию в своих открытых проектах
• Microsoft призывает пользователей отказаться от многофакторной аутентификации через телефон
• Google просит помощи пользователей, чтобы улучшить алгоритмы Google Photos
• Google Photos перестанет быть безлимитным с 1 июня 2021 года, а файлы неактивных аккаунтов (минимум два года) будут удаляться
• Британскую компанию обязали сменить странное название, потому что оно провоцировало атаки на веб-сайты
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры | Занимательное |
Медиа
• «Новости 512» от CSSSR: NodeJS 15.1.0, TS 4.1 RC, Promises с нуля, нативность Sketch, тарифы Travis-CI, MDN Web DNA 2020
• Подкаст «Сделайте мне красиво», выпуск №49: Постарайтесь не выгорать джунами
• Подкаст «Фронтенд Юность» №162: Сотни новых фронтендеров отнимают наш хлеб
• Подкаст «Веб-стандарты» №255: Подсказки для флексов, File API, выражения от контейнера, ARIA, переменные и темы, масонри
Веб-разработка
• Готовим console.log() правильно
• Сравнение скорости генераторов статических сайтов
• Есть ли перспективы у монолитных web-приложений?
• Что такое атрибут rel=noopener
• Атаки кликджекинга (clickjacking ) и как их предотвратить
• Создание микро-фронтендов
• История перехода Wix на React Native
• Веб-разработка для начинающих: 12-недельная учебная программа из 24 уроков по основам JavaScript, CSS и HTML от Microsoft
• Релиз Bootstrap 5 Alpha 3
- Инструменты
• Chrome DevTools: создавайте собственные сочетания клавиш и повышайте производительность
• Что нового в DevTools (Chrome 88)
- SVG
• SVGBox — онлайн-инструмент для вставки SVG иконки на сайт с возможностю менять их цвет в параметре ссылки
• SVG Path Editor
• Библиотеки для анимации отрисовки SVG
- Производительность
• Как метрики Core Web Vitals влияют на алгоритмы Google
• Изображения WebP и WordPress: зачем и как их использовать (+ плагины)
- Доступность
• Puppetaria: accessibility-first скрипты для Puppeteer
• Не очень короткое замечание об использовании aria-label — Big Table Edition
• Написание кода без помощи рук
- Эффекты
• 20 небольших, но вдохновляющих вызовов веб-разработчику
• Inline Menu Layout with Gallery Panel
• Эффект наведения с WebGL-текстурой с использованием curtainsjs
CSS
• Таблицы и CSS-свойство float в современной веб-разработке
• Нативный Masonry Layout в CSS Grid Level 3
• Простые круговые диаграммы с фоллбеком
• Быстрый совет: как сделать новую функцию CSS Overview в Chromium Devtools доступной
• Техника ворона: на шаг ближе к Container Queries
• Самый правильный трюк для автоматического увеличения textarea
• Что такое flex-grow, flex-shrink и flex-basis
• Глубокое погружение в CSS Grid minmax()
JavaScript
• Парсинг Markdown для автоматической вставки оглавления на страницу
• Как я писал JavaScript, чтобы избежать JavaScript
• 10 выводов из масштабного внедрения TypeScript
• Веб-воркеры для улучшения производительности UI
- Теория
• Все, что вам нужно знать о Proxy в JavaScript
• Начало работы с современным JavaScript — шаблонные литералы
• Декораторы JavaScript с нуля
- React
• Ленивая загрузка изображений с помощью Intersection Observer API и React
• Погружение в использование React и Three.js
• Учебное пособие по React Forms: доступ к входным значениям, проверка и отправка форм
• Используйте CSS переменные вместо React Context
• React Frontload — библиотека для загрузки и управления данными в React компонентах, работающая и на клиенте и на сервере
• Аутентификация приложений React с помощью Auth0
• Create React App: реально быстрая подготовка проектов
- Vue
• Графики в Vuejs
• Использование Vue в качестве генератора статических сайтов на Node.js
• Vue.js в Web Worker
- Angular
• Добро пожаловать в Angular 11
• Декларативный подход в Angular
• Использование Hot Module Replacement в Angular 11
• Angular 11 — На пути к безопасной типизации
• Темизация приложений на Angular и его библиотек
• Визуальное регрессионное тестирование с использованием Cypress и Angular
- Ember
• Серия интервью «The Rock & Roll with Ember band»: Serguei Cambour, Stuart Guthrie
• Использование @action и @tracked Decorators в Ember Classic Classes
- Svelte
• Svelte — «новый» фронтенд фреймворк
• Почему Svelte еще не готов к прайм-тайму (и почему он будет классным в свое время)
Браузеры
• Google закрыла в Chrome ещё две уязвимости нулевого дня. За месяц их было устранено уже пять
• В Chrome намерены удалить поддержку технологии Server Push
• Warp: улучшенная производительность JS в Firefox 83
• Прекращение поддержки IE11 — это прогрессивное улучшение
Занимательное
• Создатель Python Гвидо ван Россум выходит на работу в Microsoft
• Свежий релиз WordPress 5.6 будет нести в себе еще одно крупное изменение jQuery
• Google обязал применять инклюзивную терминологию в своих открытых проектах
• Microsoft призывает пользователей отказаться от многофакторной аутентификации через телефон
• Google просит помощи пользователей, чтобы улучшить алгоритмы Google Photos
• Google Photos перестанет быть безлимитным с 1 июня 2021 года, а файлы неактивных аккаунтов (минимум два года) будут удаляться
• Британскую компанию обязали сменить странное название, потому что оно провоцировало атаки на веб-сайты
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.