Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
23.2K subscribers
2.2K photos
120 videos
38 files
4.61K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Наши каналы: https://yangx.top/proglibrary/9197

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
🤔 Webpack vs esbuild: уже можно использовать в проде?

Фронтенд-архитектор Дмитрий Казаков делится опытом использования esbuild вместо Webpack для коммерческих проектов.

📌 В статье подробно описаны различные аспекты работы с esbuild, включая:

☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и __dirname
☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки
15 Killer Websites for Web Developers.pdf
2.5 MB
🤩 15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика

Визуализация регулярных выражений 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 для JavaScript-разработчиков» от Josh W. Comeau можно изучить бесплатно

🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:

👨‍💻 CSS Variables
👨‍💻 Variable Fragments
👨‍💻 Магия Calc
👁Помогите «Библиотеке программиста» лучше узнать свою аудиторию

Друзья, мы хотим делать для вас самый лучший контент — и для этого нам нужно узнать вас получше.

Пожалуйста, ответьте на несколько вопросов — это не займет у вас много времени, но поможет нам делать более полезные и интересные посты!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Анонсирован Vite 5.0

Vite хоть и начинал свой путь в мире Vue.js, теперь он используется во многих проектах, включая SvelteKit, Remix и Astro.

Хотите погрузиться подробнее? Читайте гайд по миграции с v4 на v5 и смотрите запись с недавней конференции ViteConf, где вас ждет 12 часов обсуждений различных тем, связанных с Vite.

#новости
На заметку фронтенд-разработчику:

👨‍🏫 JavaScript
👨‍🏫 Angular 17
👨‍🏫 Node.js

#матчасть
❗️Мы запускаем серию исследований — и вы можете нам в этом помочь!

«Библиотека программиста» выпустит несколько статей, в которых мы проведем полноценные исследования.

Помогите нам выбрать интересные темы: может быть, вы давно хотели узнать, как изменилась зарплата у тех, кто релоцировался? Или гадаете, сколько лет нужно, чтобы стать миддлом?

Присылайте интересующие вас темы в комментарии — интересные мы возьмем в работу и поделимся с вами результатами 💙
📊 Вот как выглядит рейтинг распределения JavaScript среди одного миллиона популярных сайтов (по ссылке — рейтинг из множества библиотек и фреймворков, но для простоты взяли 10)

🤔 А где еще, кроме как на BuiltWith, посмотреть подобную статистику? Кто там говорил, что jQuery уже не так часто используется? Ну-ну.
🎨 Spectral.js — более «похожая на краску» библиотека смешивания цветов.

Если у вас есть два цвета для перехода между ними, простая анимация значений RGB может привести к довольно некрасивым промежуточным цветам.

Spectral.js использует теорию Кубелки-Мунка, которая более точно соответствует тому, как работают краски, для получения визуально удовлетворительного результата.

👉 GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
🔐 Кстати, в новой версии Firefox завезли несколько новых фич, связанных с приватностью, в том числе операция "Copy Link Without Site Tracking", позволяющая скопировать URL выбранной ссылки в буфер обмена без отслеживания переходов между сайтами.

📌 Разбираемся, что нового в 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