🤔 Webpack vs esbuild: уже можно использовать в проде?
Фронтенд-архитектор Дмитрий Казаков делится опытом использования
📌 В статье подробно описаны различные аспекты работы с
☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и
☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки
Фронтенд-архитектор Дмитрий Казаков делится опытом использования
esbuild
вместо Webpack
для коммерческих проектов. 📌 В статье подробно описаны различные аспекты работы с
esbuild
, включая:☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и
__dirname
☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки
Хабр
Webpack vs esbuild — уже можно использовать в production?
Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild,...
15 Killer Websites for Web Developers.pdf
2.5 MB
🤩 15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
👉 Читайте подробнее на Medium или в PDF
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
👉 Читайте подробнее на Medium или в PDF
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Несмотря на некоторые ограничения в отдельных браузерах, мы можем очень просто изменить размер любого элемента блока, а не только текстовой области.
➡️ Поиграть можно здесь
#css #tip by Shripal Soni
➡️ Поиграть можно здесь
#css #tip by Shripal Soni
🔥 Несколько уроков в курсе «CSS для JavaScript-разработчиков» от Josh W. Comeau можно изучить бесплатно
🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:
👨💻 CSS Variables
👨💻 Variable Fragments
👨💻 Магия Calc
🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:
👨💻 CSS Variables
👨💻 Variable Fragments
👨💻 Магия Calc
Joshwcomeau
CSS Variables • CSS for JavaScript Developers
Modern web applications respond dynamically, contorting themselves to display well across an incredibly wide range of devices. In this module, we'll learn how to write CSS that responds and adapts to different situations.
Друзья, мы хотим делать для вас самый лучший контент — и для этого нам нужно узнать вас получше.
Пожалуйста, ответьте на несколько вопросов — это не займет у вас много времени, но поможет нам делать более полезные и интересные посты!
Please open Telegram to view this post
VIEW IN TELEGRAM
Ваш возраст:
Anonymous Poll
3%
Менее 18 лет
22%
18-24 года
48%
25-34 года
19%
35-44 года
4%
45-54 года
1%
55-64 года
2%
65 лет и старше
В каком городе вы живете последние 3 месяца?
Anonymous Poll
17%
Москва
9%
Санкт-Петербург
1%
Краснодар
2%
Нижний Новгород
4%
Минск
2%
Екатеринбург
4%
Киев
1%
Львов
2%
Алматы
58%
Другое
В какой стране вы живете последние 3 месяца?
Anonymous Poll
62%
Россия
7%
Украина
5%
Беларусь
3%
Казахстан
2%
Польша
1%
Кыргызстан
2%
Узбекистан
1%
США
3%
Грузия
12%
Другое
Ваш доход в месяц после налогов:
Anonymous Poll
17%
до $500
10%
от $501 до $800
12%
от $801 до $1100
20%
от $1101 до $2000
18%
от $2001 до $3000
10%
от $3001 до $4000
5%
от $4001 до $5001
3%
от $5001 до $6000
6%
от $6001
Какой у вас коммерческий опыт работы в IT?
Anonymous Poll
22%
от 6 лет
27%
от 3 до 6 лет включительно
21%
от 1 до 3 лет включительно
11%
до 1 года
19%
нет опыта
На каком языке программирования вы пишете больше всего?
Anonymous Poll
4%
Python
1%
Go
2%
Java
50%
JavaScript
31%
TypeScript
1%
C/C++
3%
С#
0%
Swift/Kotlin
4%
PHP
4%
Другой
Какая ваша специализация в IT?
Anonymous Poll
7%
Backend
67%
Frontend
17%
Fullstack
1%
Mobile
1%
Desktop
1%
DevOps/Sysadmin
1%
QA
0%
Data Science
1%
Кибербезопасность
4%
Другое
Какой грейд у вас на работе?
Anonymous Poll
8%
Стажер
15%
Джуниор
37%
Миддл
19%
Сеньор
6%
Тимлид
2%
Архитектор
2%
СТО
12%
я не в IT
🔥 Анонсирован Vite 5.0
Vite хоть и начинал свой путь в мире Vue.js, теперь он используется во многих проектах, включая SvelteKit, Remix и Astro.
Хотите погрузиться подробнее? Читайте гайд по миграции с v4 на v5 и смотрите запись с недавней конференции ViteConf, где вас ждет 12 часов обсуждений различных тем, связанных с Vite.
#новости
Vite хоть и начинал свой путь в мире Vue.js, теперь он используется во многих проектах, включая SvelteKit, Remix и Astro.
Хотите погрузиться подробнее? Читайте гайд по миграции с v4 на v5 и смотрите запись с недавней конференции ViteConf, где вас ждет 12 часов обсуждений различных тем, связанных с Vite.
#новости
❗️Мы запускаем серию исследований — и вы можете нам в этом помочь!
«Библиотека программиста» выпустит несколько статей, в которых мы проведем полноценные исследования.
Помогите нам выбрать интересные темы: может быть, вы давно хотели узнать, как изменилась зарплата у тех, кто релоцировался? Или гадаете, сколько лет нужно, чтобы стать миддлом?
Присылайте интересующие вас темы в комментарии — интересные мы возьмем в работу и поделимся с вами результатами 💙
«Библиотека программиста» выпустит несколько статей, в которых мы проведем полноценные исследования.
Помогите нам выбрать интересные темы: может быть, вы давно хотели узнать, как изменилась зарплата у тех, кто релоцировался? Или гадаете, сколько лет нужно, чтобы стать миддлом?
Присылайте интересующие вас темы в комментарии — интересные мы возьмем в работу и поделимся с вами результатами 💙
📊 Вот как выглядит рейтинг распределения JavaScript среди одного миллиона популярных сайтов (по ссылке — рейтинг из множества библиотек и фреймворков, но для простоты взяли 10)
🤔 А где еще, кроме как на BuiltWith, посмотреть подобную статистику? Кто там говорил, что jQuery уже не так часто используется? Ну-ну.
🤔 А где еще, кроме как на BuiltWith, посмотреть подобную статистику? Кто там говорил, что jQuery уже не так часто используется? Ну-ну.
Если у вас есть два цвета для перехода между ними, простая анимация значений RGB может привести к довольно некрасивым промежуточным цветам.
Spectral.js использует теорию Кубелки-Мунка, которая более точно соответствует тому, как работают краски, для получения визуально удовлетворительного результата.
👉 GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
📌 Разбираемся, что нового в Firefox 120 для разработчиков (обзор от OpenNET):
• Добавлен API User Activation, позволяющий определить взаимодействовал ли раньше пользователь со страницей, взаимодействует ли в настоящий момент или ничего не делал на странице.
• Добавлена поддержка нового кода ответа HTTP — 103 Early Hints, который может использоваться для упреждающего вывода заголовков.
• В CSS добавлены новые единицы измерения размера
lh
и rlh
, позволяющие указать размер, соответствующий линейной высоте (CSS-свойство line-height
) элемента или корневого элемента.• В CSS добавлена функция light-dark() для выставления цветов сразу для светлой и тёмной цветовой схемы без применения media-запроса
prefers-color-scheme
.• В JavaScript-функцию Date.parse() добавлена поддержка дополнительных вариантов форматирования даты.
• Обеспечена поддержка атрибута media в элементе
<source>
, вложенном в элементы <picture>
, <audio>
и <video>
.• Включена по умолчанию поддержка расширения WasmGC, упрощающего портирование в WebAssembly программ, написанных на языках со сборщиком мусора.
• В инструменты для веб-разработчиков добавлена возможность симуляции работы вкладок в offline-режиме.
• В панель редактирования стилей добавлена кнопка Pretty Print для форматирования и приведения в наглядную форму минифицированной таблицы стилей (ранее минифицированные стили форматировались автоматически).
• В инструментах для разработчиков значительно (до 70%) ускорена работа отладчика при большом объёме исходного кода. Проведён рефакторинг отладчика, нацеленный на корректное срабатывание точек останова, привязанных к событию
unload
.#новости #tip #devtool
Please open Telegram to view this post
VIEW IN TELEGRAM