Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• «Новости 512» от CSSSR: WebStorm 2020.3, minmax(), Math.random() в JS, fwdays 2020, Advent of Code, Octoverse и State of CSS, плюс текстовая версия
• Подкаст «Сделайте мне красиво» №51 — Вас взломают, но хотя бы не хомячок
• Подкаст FrontoWeek #136: Важнейшие события фронтенда за неделю.
• Подкаст Фронтенд Юность (18+) #165: Сайт, чтобы посрать
• Подкаст «proConf» #80: TSConf 2020
• The Undefined Podcast №29: Vue vs. Svelte с Evan You и Rich Harris
• Монолит vs. Микро-фронтенды
• Как правильно создавать HTML-формы: безопасность
• Как Lyft мигрирует более 100 фронтенд микросервисов на Next.js
• Создание сайтов с prefers-reduced-data
• От Jekyll к 11ty
• PWA и AMP: берем лучшее из обоих миров
• PWAdvent — идеальный адвент-календарь для всех, кто увлечен веб-платформой.
• DRY CSS: Как использовать каждое объявление только один раз
• Подробности об использовании CSS-функции minmax() в Grid-макетах
• Результаты опроса по State Of CSS 2020
• Недостающие браузерные инструменты разработки для Tailwind CSS
• Как сделать так, чтобы sticky-элементы и полноэкранные блоки хорошо работали вместе
• Календарь с помощью трех строк CSS
• Как создать диаграмму с помощью CSS
• Как добавить текст в border с помощью базовых элементов HTML
• Нативные соотношения сторон в CSS с помощью aspect-ratio
• ТайпСкрип: Ох уж эта весёлая система типов
• JavaScript исполняется 25 лет: краткая история языка и скидка 50% на WebStorm
• Старт ежегодного опроса State of JavaScript 2020
• Вот что люди в сфере технологий говорили о JavaScript, когда он дебютировал в 1995 году.
• Устали от глупых шуток? Напишите свою собственную JS библиотеку с арифметикой произвольной точности
• Руководство по интеграции Apple Music JavaScript
• js25.org: сайт с историей JS, посвященный его 25-летию
• Пользуемся офлайн-браузингом, как будто сейчас 1995 год
• Internet Explorer больше не поддерживает Microsoft Teams
• Представлен браузер Beaker 1.0 с P2P-платформой для децентрализованных сайтов
• Chrome 88: цифровые товары, оценка освещения в дополненной реальности и многое другое
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
• «Новости 512» от CSSSR: WebStorm 2020.3, minmax(), Math.random() в JS, fwdays 2020, Advent of Code, Octoverse и State of CSS, плюс текстовая версия
• Подкаст «Сделайте мне красиво» №51 — Вас взломают, но хотя бы не хомячок
• Подкаст FrontoWeek #136: Важнейшие события фронтенда за неделю.
• Подкаст Фронтенд Юность (18+) #165: Сайт, чтобы посрать
• Подкаст «proConf» #80: TSConf 2020
• The Undefined Podcast №29: Vue vs. Svelte с Evan You и Rich Harris
Веб-разработка
• Монолит vs. Микро-фронтенды
• Как правильно создавать HTML-формы: безопасность
• Как Lyft мигрирует более 100 фронтенд микросервисов на Next.js
• Создание сайтов с prefers-reduced-data
• От Jekyll к 11ty
• PWA и AMP: берем лучшее из обоих миров
• PWAdvent — идеальный адвент-календарь для всех, кто увлечен веб-платформой.
- Инструменты
• WebStorm 2020.3: обновленный интерфейс, поддержка Tailwind CSS и другие улучшения
• Представляем WMR: Крошечный универсальный инструмент для разработки современных веб-приложений. Все, что вам нужно для создания быстрого сайта Preact, от разработки до прода. TSX, HMR, CSS Modules, модули npm без установки, никаких зависимостей
• Релиз Snowpack v3.0. Streaming NPM Imports, встроенные аптимизации, роутинг, новый JavaScript API
• Puppeteer vs Selenium vs Playwright — сравнение скорости
- Производительность
• Безжалостное избавление от Layout Shift на netlify.com
• Настройка отображения шрифта для медленных подключений
• Пора попрощаться с Google Fonts
• Мифическая «быстрая» веб-страница
• Как BBC World Service перевела 31 миллион еженедельных читателей на изоморфное react приложение и повысила производительность страницы на 83%
- Эффекты
• Как анимировать SVG с border-image
• Создание слайдера с эффектом параллакса
• Создание статичного веб-сайта на Svelte с плавными креативными переходами между страницами
CSS
• DRY CSS: Как использовать каждое объявление только один раз
• Подробности об использовании CSS-функции minmax() в Grid-макетах
• Результаты опроса по State Of CSS 2020
• Недостающие браузерные инструменты разработки для Tailwind CSS
• Как сделать так, чтобы sticky-элементы и полноэкранные блоки хорошо работали вместе
• Календарь с помощью трех строк CSS
• Как создать диаграмму с помощью CSS
• Как добавить текст в border с помощью базовых элементов HTML
• Нативные соотношения сторон в CSS с помощью aspect-ratio
JavaScript
• ТайпСкрип: Ох уж эта весёлая система типов
• JavaScript исполняется 25 лет: краткая история языка и скидка 50% на WebStorm
• Старт ежегодного опроса State of JavaScript 2020
• Вот что люди в сфере технологий говорили о JavaScript, когда он дебютировал в 1995 году.
• Устали от глупых шуток? Напишите свою собственную JS библиотеку с арифметикой произвольной точности
• Руководство по интеграции Apple Music JavaScript
• js25.org: сайт с историей JS, посвященный его 25-летию
- Теория
• 5 советов по написанию качественных переменных в JavaScript
• Множество способов использования Math.random() в JavaScript
• Освойте навыки современного JavaScript с помощью этого замечательного руководства
• Incremental vs Virtual DOM
- React
• SEO-оптимизация сайта на React или как добиться конверсии от поисковиков если у вас Single Page Application
• Все ли вы знаете о useCallback
• Шпаргалка для интервью по React
• Новый уровень производительности в React
• Анонс React Hooks в ретроспективе: 2 года спустя
• Опасности использования объектов в useState и useEffect ReactJS Hooks
• Создание приложения для голосования в реальном времени с использованием ReactJS и Ably
- Vue
• Ionic & Vue.js — полное руководство (создание полноценного приложения)
• Nuxt.js Single Page Application Boilerplate
• Переведите любое приложение Vue.js всего за 1 час
- Angular
• ngTemplateOutlet: секрет кастомизации
• Интегрируйте Jest в приложение на Angular и библиотеку
• Angular 10 Transclusion: когда и зачем оно вам понадобится
• Преобразование сайта на Ionic/Angular в прогрессивное веб-приложение
- Ember
• The Ember Times — Issue No. 169
• Ember.js 2020 Tech Talk | coloradoSprings.js Meetup
• Рок-н-ролл с бандой Ember — Aad Versteden
- Libs & Plugins
• List.js — Идеальная библиотека для добавления поиска, сортировки и фильтров в таблицы, списки и различные элементы HTML.
• EasyGrid — адаптивная сетка на элементов VanillaJS
• React-Tensorflow — библиотека React хуков, написанная на Typescript для использования моделей Tensorflow в вашем приложении
Браузеры
• Пользуемся офлайн-браузингом, как будто сейчас 1995 год
• Internet Explorer больше не поддерживает Microsoft Teams
• Представлен браузер Beaker 1.0 с P2P-платформой для децентрализованных сайтов
• Chrome 88: цифровые товары, оценка освещения в дополненной реальности и многое другое
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.