Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• UnderJS Podcast#19 — Cypress, Material UI и просто про OpenSource
• AvitoTech x FrontendConf 2019: видеозаписи с шести конференций Олега Бунина за 2019 год и одной — за 2020
• Видео с Odessa Frontend MeetUps #14 и 15
• Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом
• Работа с изображениями в веб
• Front-End Challenges: подборка сервисов, где можно испытать свои знания
• Создание сайта с документацией с помощью JAMstack
• Экосистема JAMstack [Инфографика]
• Уроки, извлеченные при создании PWA на тему COVID-19
• Интересные CSS-находки в новом дизайне Facebook
• LCH-цвета в CSS
• Вставка псевдо-рендомных иллюстраций с помощью CSS
• Использование CSS для размещения текста внутри круга
• Создать отзывчивый CSS Motion Path? Конечно мы сможем!
• Хронология анимации CSS: создание машины Голдберга
• Ограниченные CSS гриды без max-width.
• Создание морфинг-анимации с помощью CSS clip-path
• CSS скроллбар с индикатором прогресса
• Создание адаптивных макетов без использования медиа-запросов
• Поддержка Touch в JavaScript
• Релиз jQuery 3.5.0
• html5-boilerplate: github-обсуждение, обновлять ли jQuery до 3.5.1 или… удалять?
• Лучшие практики производительности в JavaScript
• Стратегии перехода на TypeScript
• 23+ расширенных вопросов для собеседования по JavaScript (с ответами)
• Frontend Shorts: как создать инструмент просмотра содержимого ссылок с помощью React, Vue и Vanilla JavaScript
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
• UnderJS Podcast#19 — Cypress, Material UI и просто про OpenSource
• AvitoTech x FrontendConf 2019: видеозаписи с шести конференций Олега Бунина за 2019 год и одной — за 2020
• Видео с Odessa Frontend MeetUps #14 и 15
Веб-разработка
• Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом
• Работа с изображениями в веб
• Front-End Challenges: подборка сервисов, где можно испытать свои знания
• Создание сайта с документацией с помощью JAMstack
• Экосистема JAMstack [Инфографика]
• Уроки, извлеченные при создании PWA на тему COVID-19
- Инструменты
• Релиз Puppeteer v3.0.0, теперь с поддержкой Firefox
• Инструменты рабочего процесса веб-разработчика: руководство для начинающих
• Visual Studio Code: продвинутое руководство пользователя
- Производительность
• Сравнение производительности HTTP/3 и HTTP/2
• Пользовательские метрики WebPageTest с помощью Request Data
• Уменьшение размера бандла с помощью хеш-стратегии однобуквенных классов
- Доступность
• Комбинации в ARIA: role=progressbar и aria-live=polite
• Веб-сайты в качестве «публичных мест пребывания» в условиях пандемии. О нюансах американского законодательства касательно вопросов веб-доступности
- Эффекты
• Интерактивные эффекты наведения на WebGL
• Как создать анимацию остающегося следа из частиц в JavaScript
• Подборка креативных веб-демок «Awesome Demos Roundup #15»
• Свежий скринкаст Юрия Артюха «ALL YOUR HTML» #s3e21, Particles animation by Étienne Jacob
CSS
• Интересные CSS-находки в новом дизайне Facebook
• LCH-цвета в CSS
• Вставка псевдо-рендомных иллюстраций с помощью CSS
• Использование CSS для размещения текста внутри круга
• Создать отзывчивый CSS Motion Path? Конечно мы сможем!
• Хронология анимации CSS: создание машины Голдберга
• Ограниченные CSS гриды без max-width.
• Создание морфинг-анимации с помощью CSS clip-path
• CSS скроллбар с индикатором прогресса
• Создание адаптивных макетов без использования медиа-запросов
JavaScript
• Поддержка Touch в JavaScript
• Релиз jQuery 3.5.0
• html5-boilerplate: github-обсуждение, обновлять ли jQuery до 3.5.1 или… удалять?
• Лучшие практики производительности в JavaScript
• Стратегии перехода на TypeScript
• 23+ расширенных вопросов для собеседования по JavaScript (с ответами)
• Frontend Shorts: как создать инструмент просмотра содержимого ссылок с помощью React, Vue и Vanilla JavaScript
- Теория
• 8 наиболее распространенных структур данных на примере JavaScript
• Теоретические структуры данных и их применение в JavaScript. Ч1. Пары
• 7 основных концепций JavaScript, объясненных просто
- React
• Создание шкалы на React — интерактивное руководство
• Быть ленивым не стыдно. Эффективная загрузка изображений с помощью React Hooks
• Переменные CSS для разработчиков React
• Что выбрать в 2020 году: NextJS vs Gatsby
• Как максимизировать возможность повторного использования для ваших компонентов React
• react-tater — Компонент React для добавления аннотаций к любому элементу на странице
- Vue
• Реактивные роуты Vue с помощью Composition API
• Как Vue Composition API заменяет Vue Mixins
• Vue 3 теперь официально Beta
• Как работает реактивность во Vue.js?
• Нетрадиционный Vue — Vue как бекенд фреймворк
- Angular
• Чистим код в Angular. Готовим ESLint, codelyzer, stylelint, husky, lint-staged и Prettier
• Моя конфигурация Nginx для Angular
• Scully Tutorial: Генератор статических сайтов для Angular
• Введение в Angular анимации
• Angular с Ivy — обзор производительности
- Ember
• The Ember Times — Issue No. 144
• Учебное пособие по созданию Todo приложения в Ember Octane для тех, кто знает React
- Svelte
• Создаем возможность просмотра содержимого ссылок с Svelte & Sapper
- Libs & Plugins
• Redaxios — легкая (800 байт) обёртка над fetch с API, аналогичным axios
• Builderz — Zero Configuration JavaScript Bundler
• Начало работы с Alpine.js
• Представляем mdjs — интерактивные демонстрации везде
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.