Библиотека фронтендера | 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
加入频道
🔥 Анонсирован 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
🏆 Самые популярные языки программирования 2023

Популярность ЯП зависит от нескольких факторов. Мы разобрались с ними, составили сводный рейтинг и обсудили особенности, преимущества, недостатки и причины популярности каждого языка. Заходите и читайте👇

🔗 Читать статью
🔗 Зеркало
🤔 Как веб-компоненты могут устранить привязку к фреймворку?

Автор отмечает, что веб-компоненты могут «резко ослабить связь» фреймворков — и, пытаясь доказать это, создает приложение, в котором каждый компонент написан с использованием разных фреймворков.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🤩 На что способны современные веб-технологии?

😎 Перед вами интерактивный мини-сборник впечатляющих возможностей современных веб-технологий от команды Chrome для разработчиков: от WebAssembly и простого взаимодействия с локальными файлами пользователей до рендеринга «тяжелой» графики в браузере и упрощенной навигации.

Кстати, для создания анимации на сайте используется ThreeJS, но на канале Frontend FYI вы можете увидеть реализацию того же функционала на чистом CSS 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 После выхода достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе.

💡Основное внимание переключилось на экосистему — Vite, Nuxt, VitePress, Pinia и другие. В то же время, отчетливо заметно масштабирование работы не вглубь, а вширь. Интересы команды уже давно явно выходят за пределы фреймворка.

📈 Об этом и идет речь в статье. Автор разбирается с трендами развития Vite, Anthony Fu и VitePress, анализирует тренды/рынок вакансий и рекомендует перевод книги «Vue.js 3 — Шаблоны проектирования и лучшие практики».
👨‍🎨 Искусство промтинга: введение в Midjourney

📝 Сейчас мало просто уметь писать правильные промты, но важно также знать некоторые хитрости каждого ИИ-помощника. Markus Wallén из 14islands подготовил подробное руководство по Midjourney, в котором рассказал, как начать работу и как создать идеальный промт, чтобы максимально использовать возможности нейросети.

🧰 В статье он разобрал структуру промтов и их атрибуты, а также показал примеры сгенерированных картинок. Прочитав статью, вы научитесь контролировать стилизацию или реализм изображения, а также соотношение сторон, разнообразие генерируемых композиций и многое другое.
🤔 Помните рассказывали вам про митап от СберМаркета? Так вот, Александр Водолазских, руководитель направления разработки интерфейсов, написал на основе своего доклада статью о том, как нельзя вести пет-проекты.

🤝 И если перефразировать сказанное в статье из ироничного в дружеское, то получатся отличные советы:

1️⃣ Кодить «после работы» — хорошо, но если только реально хочется
2️⃣ Ограничьте себя по направлению и стеку
3️⃣ Делайте «продукты», а не проекты
4️⃣ Следуйте роадмапу и делайте брейкпоинты
5️⃣ Общайтесь с теми, кто знает больше
6️⃣ Балансируйте между «узнать» и «сделать»
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM