Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• Подкаст «Веб-стандарты» №218: Опять гриды, градиенты всё лучше, блокирующий CSS, веб-компоненты, всё про кнопки и disabled
• Подкаст «Фронтенд Юность (18+)» #127: Мало половин. Часть первая
• Подкаст «Сделайте мне красиво», Выпуск №35 — Зарплаты, деплои по пятницам и гордыня функциональщиков
• Я <3 Фронтенд 2020 — Запись трансляции
• Интернационализация: как сделать веб доступным для всех
• Влияют ли теги H1 на ранжирование в Google– эксперимент Moz
• Rome, новый JavaScript инструментарий от создателя Yarn и Babel из Facebook
• Один день из жизни: как фронтенд-разработчик исправляет «простой» баг
• Хватит использовать слово ‘Drop-down’
• Стилизация старого доброго элемента button
• Старый и новый CSS. История веб-дизайна
• В W3C появилась общественная группа по CSS4
• Адаптивный макет сетки журнала всего в 20 строках CSS
• Эффект линии, переплетенной между букв на CSS
• Умная анимация с пользовательскими свойствами
• Негативные margin в CSS
• Buttono — Гибкий Sass-миксин для создания кнопок в стиле БЭМ
• Почему CSS расстраивает?
• CSS Motion Path: Конец GSAP?
• JavaScript и кое-что ещё: 4 креативных подхода к измерению времени в браузерах
• Может, нам слегка успокоиться с JavaScript?
• JavaScript tree shaking, like a pro
• Интернационализация JavaScript в 2020 году
• 4 рекомендации по написанию качественных модулей в JavaScript
• Как использовать JavaScript Internationalization API
• Динамическая и асинхронная функциональность в JAMstack
• 5 лучших JavaScript-фреймворков: визуализация многолетних опросов разработчиков
• В Firefox 75 будут убраны https:// и www из выпадающего блока адресной строки
• 0-day уязвимость в Chrome, выявленная через анализ изменений в движке V8
• Mozilla начинает внедрение технологии изоляции библиотек RLBox
• Google выпустил для Firefox систему аудита web-страниц Lighthouse
• В браузер Brave интегрировано обращение к archive.org для просмотра удалённых страниц
• У Chrome есть динозаврик, а у Microsoft Edge будет сёрфинг
• Защита Firefox с помощью WebAssembly
• «Могу ли я… в новом Edge?»
• Как цифровая реклама будет жить без cookie-файлов
• Поисковый сервис Google Images будет выводить больше сведений об изображениях — маркировать товары, рецепты и видео
• Патентные войны и спорщик на миллион: история изобретения колючей проволоки и её самого успешного продавца в 19 веке Материал редакции
• Горе обновленным. Почему апдейты могут лишить вас не только смартфона, но и автомобиля
• Google переведет все сайты на mobile-first индексацию в течение 6-12 месяцев
• Google о предстоящих изменениях в обработке nofollow
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры | Занимательное
Медиа
• Подкаст «Веб-стандарты» №218: Опять гриды, градиенты всё лучше, блокирующий CSS, веб-компоненты, всё про кнопки и disabled
• Подкаст «Фронтенд Юность (18+)» #127: Мало половин. Часть первая
• Подкаст «Сделайте мне красиво», Выпуск №35 — Зарплаты, деплои по пятницам и гордыня функциональщиков
• Я <3 Фронтенд 2020 — Запись трансляции
Веб-разработка
• Интернационализация: как сделать веб доступным для всех
• Влияют ли теги H1 на ранжирование в Google– эксперимент Moz
• Rome, новый JavaScript инструментарий от создателя Yarn и Babel из Facebook
• Один день из жизни: как фронтенд-разработчик исправляет «простой» баг
• Хватит использовать слово ‘Drop-down’
- Производительность
• «Render-Blocking JavaScript and CSS on WordPress». Как это исправить?
• Ускоряем фронтенд. Когда много запросов к серверу — это хорошо
• Стоит ли хранить Google Fonts на своём сервере?
• Улучшение воспринимаемой производительности с помощью свойства CSS `font-display`
• Браузерная производительность, ограниченная разными Feature Policy
• Почему 543 KB не дают мне спать по ночам
- Доступность
• CSS против коронавируса: доступное представление иерархических табличных данных
• 5 распространенных проблем с доступностью веб-приложений и способы их устранения
• HTML: недоступные части
- Эффекты
• Создание карандашного эффекта в SVG
• Анимация SVG-текста в Path
• Аудио эффекты искажения изображения с WebGL
CSS
• Стилизация старого доброго элемента button
• Старый и новый CSS. История веб-дизайна
• В W3C появилась общественная группа по CSS4
• Адаптивный макет сетки журнала всего в 20 строках CSS
• Эффект линии, переплетенной между букв на CSS
• Умная анимация с пользовательскими свойствами
• Негативные margin в CSS
• Buttono — Гибкий Sass-миксин для создания кнопок в стиле БЭМ
• Почему CSS расстраивает?
• CSS Motion Path: Конец GSAP?
JavaScript
• JavaScript и кое-что ещё: 4 креативных подхода к измерению времени в браузерах
• Может, нам слегка успокоиться с JavaScript?
• JavaScript tree shaking, like a pro
• Интернационализация JavaScript в 2020 году
• 4 рекомендации по написанию качественных модулей в JavaScript
• Как использовать JavaScript Internationalization API
• Динамическая и асинхронная функциональность в JAMstack
• 5 лучших JavaScript-фреймворков: визуализация многолетних опросов разработчиков
- Практика
• Работа с GeoJSON в среде Node.js: практическое знакомство
• Пишем babel плагин, пошаговое руководство
• Задачи по JavaScript от Microsoft
• Создание аркадной игры на ванильном JavaScript
• Кэширование ответов GraphQL
• Создание PWA на Vanilla JavaScript. Часть 2. Push API
- Теория
• Понимание спецификации ECMAScript, часть 1
• Об изменчивых методах объекта Math в JavaScript
• 2 способа преобразования значений в Boolean в JavaScript
• Как начать думать функционально в JavaScript
• Все, что вы хотите знать о Service Worker
- React
• Используем Axios в React
• 10 фишек из JavaScript, которые помогут писать более качественный код на React
• React + Canvas = Love
• React Query — Хуки для выборки, кэширования и обновления асинхронных данных в React
• Почему вы должны с умом использовать refs на продакшене
• React.useRef и React.createRef: разница
• Вам нравится Redux? Тогда вам понравятся react-connect-context-hooks!
• Ошибки, которые допускают джуниор разработчики на React
• Настройка Tailwind CSS в проекте на React
- Vue
• Создаем прогрессивный PWA интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 1
• Vue.js: The Documentary
• Создание приложения с помощью Vue и TypeScript. Лучшие практики, мысли и рекомендации.
• Как создать музыкальный менеджер с Nuxt.js и Express.js
• Начало работы с тестированием Vue.js: ваше руководство по ресурсам
• (Примерное) Воссоздание Vue 3 Reactivity API
• Использование конечных автоматов в Vue.js с XState
- Angular
• Как создать эпическое приложение на Angular менее чем за 10 минут! ️
• Вот почему вы должны использовать Angular 9 сегодня
• Everything GitHub: Continuous Integration, Deployment и хостинг для вашего Angular приложения
• Дорожная карта для Angular-разработчиков на 2020
• Реактивные приключения в Angular: знакомство с Angular Effects
- Svelte
• Создание приложения TODO в Svelte
• Тестирование асинхронных изменений состояния в Svelte
• Управление государством в Svelte
- Ember
• The Ember Times — Выпуск 136
• Как работает Autotracking
• Разделение и миграция вашего Ember проекта в монорепозиторий
- Libs & Plugins
• serialize-javascript — Сериализация JavaScript для расширенного набора JSON, который включает в себя регулярные выражения и функции.
• DarkModeJS — помогает вам автоматически определять время пользователя и переключать тему на темную сторону
Браузеры
• В Firefox 75 будут убраны https:// и www из выпадающего блока адресной строки
• 0-day уязвимость в Chrome, выявленная через анализ изменений в движке V8
• Mozilla начинает внедрение технологии изоляции библиотек RLBox
• Google выпустил для Firefox систему аудита web-страниц Lighthouse
• В браузер Brave интегрировано обращение к archive.org для просмотра удалённых страниц
• У Chrome есть динозаврик, а у Microsoft Edge будет сёрфинг
• Защита Firefox с помощью WebAssembly
• «Могу ли я… в новом Edge?»
Занимательное
• Как цифровая реклама будет жить без cookie-файлов
• Поисковый сервис Google Images будет выводить больше сведений об изображениях — маркировать товары, рецепты и видео
• Патентные войны и спорщик на миллион: история изобретения колючей проволоки и её самого успешного продавца в 19 веке Материал редакции
• Горе обновленным. Почему апдейты могут лишить вас не только смартфона, но и автомобиля
• Google переведет все сайты на mobile-first индексацию в течение 6-12 месяцев
• Google о предстоящих изменениях в обработке nofollow
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.