Команда Тинькоф открыла исходные коды 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

🤖 AI Getting Started — стартовый набор для «проектов выходного дня» на основе ИИ, который объединяет продуманный набор технологий, включая React, Next.js, Clerk для аутентификации, Langchain.js, Replicate для моделей изображений, Fly для деплоя и многое другое.