Над каким фронтенд-проектом вы сейчас работаете? Какой стек используете? Поделитесь в комментариях👇

#холивар

20 самых захватывающих и впечатляющих возможностей CSS и UI, которые появились недавно или появятся в ближайшем будущем:

— запросы контейнера (container queries);
— запросы стиля (style queries);
— селектор :has();
— микросинтаксис nth-of;
— text-wrap: balance;
— initial-letter;
— динамические единицы измерения области просмотра (viewport);
— цветовые пространства с широкой гаммой;
— color-mix();
— вложенность селекторов (nesting);
— каскадные слои (cascade layers);
— стили с ограниченной областью видимости (scoped styles);
— тригонометрические функции;
— индивидуальные свойства трансформации;
— popover;
— позиционирование якоря (anchor positioning);
— selectmenu;
— дискретные свойства переходов;
— анимации, управляемые прокруткой (scroll-driven animations);
— переходы отображения (view transitions).

Лайк, если узнали себя

#юмор #жиза

Простой способ изменения цветовых форматов CSS с помощью Chrome Dev Tools.

#devtool #tip by Shripal Soni

🕸 Даркнет: вымысел киношников или реальная история?

Попробуем разобраться с понятием «даркнет» и поймем, существует ли темная путина на самом деле.

🔗 Основной сайт
🔗 Зеркало

Команда Тинькоф открыла исходные коды Maskito, а совсем недавно произошел релиз ее первой мажорной версии.

Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.

Подробнее

Mozilla представила аналог онлайн-редактора CodePen для создания интерактивных примеров.

⏩ Попробовать

#news

Важно: правила площадки❗️

1️⃣ За спам, рекламу, ботоводство, скам — бан и удаление всех комментариев

2️⃣ За оскорбления группы/канала/админа/других участников, политические дебаты — первый раз удаление, второй раз — профилактический бан на неделю, третий раз — бан

3️⃣ За ссылки на нелегальные ресурсы — первый раз удаление, второй раз — бан

Напоминаем, что написать нам можно сюда: @proglibrary_feedback_bot

Пожалуйста, соблюдайте правила — мы со своей стороны тоже будем стараться максимально оперативно модерировать комментарии.

В 2020 году Стас Мельников, фронтенд-разработчик и UI/UX дизайнер, поделился довольно популярным списком любимых вопросов о CSS.

Спустя 3 года CSS изменился, и он решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства👇

Читать

💭Вдогонку к предыдущему посту с вопросами о CSS, накидайте в комментарии самые интересные, по вашему мнению, вопросы, которые вы когда-либо встречали на собесах.

Пишите не только про CSS, но и про другие фронтенд-темы👇

#холивар

Недавно команды React и Next.js представили Server Components, новый способ разработки веб-приложений, который со стандартным React-приложением совместим примерно никак.

Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?

Ответить на них постарался автор статьи. Подробности — под катом.

🤖Не Chat GPT единым: собрали для вас топ инструментов на основе ИИ для разработки (один из них — именно для веб) — сохраняйте и тестируйте⬇️

🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать

А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇

#дайджест

Использование видео вместо анимированного gif повышает производительность (посмотреть пример).

#perfomance #tip by Shripal Soni

🔍Нашли удобный справочник с полезными инструментами для веб-разработки с генераторами разметки, тегами, цветовой палитрой с HEX-кодами и многим другим. Можно переключиться на CSS или JavaScript, а еще скачать страницу в виде PDF, чтобы держать перед глазами.

#инструмент

🖼️ Галерея React Graph — живые демонстрации огромного количества различных диаграмм и графиков, созданных с помощью React и D3.js, с пояснениями и кодом.

Особенно яркими выглядят диаграмма Sankey, treemap и коррелограмма, но и в остальных есть чем полюбоваться.

👉Сочетание GSAP ScrollTrigger и Flip с фильтром SVG

Здесь анимирована форма маски, к которой применен фильтр SVG Turbulence — в итоге получается такой эффект появления картинок при прокрутке.

🔍Демонстрация
🔍GitHub

🍇 Микрофронтенд: что это такое и зачем он нужен?

В этой статье сравним разные способы организации микрофронтенда, изучим их преимущества и стратегии реализации.

🔗 Основной сайт
🔗 Зеркало

🚀 Хотите получить быстрое обзорное представление о синтаксисе и фичах популярных JavaScript фреймворков и библиотек?

Component Party вам в помощь. Сам проект, например, написан на Vite и Svelte.

Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.

#devtool #tip by Shripal Soni