Над каким фронтенд-проектом вы сейчас работаете? Какой стек используете? Поделитесь в комментариях👇
#холивар
#холивар
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).
— запросы контейнера (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 и UI: I/O 2023
Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс). Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в...
👍18❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ изменения цветовых форматов CSS с помощью Chrome Dev Tools.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
🔥9👍6🥱2
Forwarded from Библиотека программиста | программирование, кодинг, разработка
🕸 Даркнет: вымысел киношников или реальная история?
Попробуем разобраться с понятием «даркнет» и поймем, существует ли темная путина на самом деле.
🔗 Основной сайт
🔗 Зеркало
Попробуем разобраться с понятием «даркнет» и поймем, существует ли темная путина на самом деле.
🔗 Основной сайт
🔗 Зеркало
👍8❤1
Команда Тинькоф открыла исходные коды Maskito, а совсем недавно произошел релиз ее первой мажорной версии.
Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.
Подробнее
Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.
Подробнее
Хабр
Maskito – новая коллекция библиотек для маскирования текстовых полей
Рады поделиться: выложили нашу разработку Maskito в открытый доступ, и совсем недавно произошел релиз ее первой мажорной версии. Maskito — коллекция библиотек, упрощающих маскирование текстовых полей,...
👍14🔥1
Mozilla представила аналог онлайн-редактора CodePen для создания интерактивных примеров.
⏩ Попробовать
#news
⏩ Попробовать
#news
MDN Web Docs
Playground | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
👍16❤3
Важно: правила площадки❗️
1️⃣ За спам, рекламу, ботоводство, скам — бан и удаление всех комментариев
2️⃣ За оскорбления группы/канала/админа/других участников, политические дебаты — первый раз удаление, второй раз — профилактический бан на неделю, третий раз — бан
3️⃣ За ссылки на нелегальные ресурсы — первый раз удаление, второй раз — бан
Напоминаем, что написать нам можно сюда: @proglibrary_feedback_bot
Пожалуйста, соблюдайте правила — мы со своей стороны тоже будем стараться максимально оперативно модерировать комментарии.
1️⃣ За спам, рекламу, ботоводство, скам — бан и удаление всех комментариев
2️⃣ За оскорбления группы/канала/админа/других участников, политические дебаты — первый раз удаление, второй раз — профилактический бан на неделю, третий раз — бан
3️⃣ За ссылки на нелегальные ресурсы — первый раз удаление, второй раз — бан
Напоминаем, что написать нам можно сюда: @proglibrary_feedback_bot
Пожалуйста, соблюдайте правила — мы со своей стороны тоже будем стараться максимально оперативно модерировать комментарии.
👍16❤2👾1
В 2020 году Стас Мельников, фронтенд-разработчик и UI/UX дизайнер, поделился довольно популярным списком любимых вопросов о CSS.
Спустя 3 года CSS изменился, и он решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства👇
Читать
Спустя 3 года CSS изменился, и он решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства👇
Читать
Хабр
Мои любимые вопросы о CSS с ответами
Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это...
🔥12👍1🙏1
💭Вдогонку к предыдущему посту с вопросами о CSS, накидайте в комментарии самые интересные, по вашему мнению, вопросы, которые вы когда-либо встречали на собесах.
Пишите не только про CSS, но и про другие фронтенд-темы👇
#холивар
Пишите не только про CSS, но и про другие фронтенд-темы👇
#холивар
👍5
Недавно команды React и Next.js представили Server Components, новый способ разработки веб-приложений, который со стандартным React-приложением совместим примерно никак.
Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?
Ответить на них постарался автор статьи. Подробности — под катом.
Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?
Ответить на них постарался автор статьи. Подробности — под катом.
nextjs.org
React Foundations
Learn the fundamental JavaScript and React concepts that'll help you get started with Next.js.
👍6🥱2
🤖Не Chat GPT единым: собрали для вас топ инструментов на основе ИИ для разработки (один из них — именно для веб) — сохраняйте и тестируйте⬇️
🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать
А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇
#дайджест
🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать
А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇
#дайджест
🔥13❤1👍1
Сколько повышений в должности у вас было за последние три года на последнем/текущем месте работы? (смена работы не считается повышением)
Anonymous Poll
32%
0
17%
1
11%
2
12%
Более 2-х
5%
Я фрилансер, занимаюсь проектной работой
23%
Я не работаю, хочу посмотреть результаты
👍3😁2
Использование видео вместо анимированного gif повышает производительность (посмотреть пример).
#perfomance #tip by Shripal Soni
#perfomance #tip by Shripal Soni
❤9👍3
🔍Нашли удобный справочник с полезными инструментами для веб-разработки с генераторами разметки, тегами, цветовой палитрой с HEX-кодами и многим другим. Можно переключиться на CSS или JavaScript, а еще скачать страницу в виде PDF, чтобы держать перед глазами.
#инструмент
#инструмент
👍6🔥5
🖼️ Галерея React Graph — живые демонстрации огромного количества различных диаграмм и графиков, созданных с помощью React и D3.js, с пояснениями и кодом.
Особенно яркими выглядят диаграмма Sankey, treemap и коррелограмма, но и в остальных есть чем полюбоваться.
Особенно яркими выглядят диаграмма Sankey, treemap и коррелограмма, но и в остальных есть чем полюбоваться.
❤8👍2
This media is not supported in your browser
VIEW IN TELEGRAM
👉Сочетание GSAP ScrollTrigger и Flip с фильтром SVG
Здесь анимирована форма маски, к которой применен фильтр SVG Turbulence — в итоге получается такой эффект появления картинок при прокрутке.
🔍Демонстрация
🔍GitHub
Здесь анимирована форма маски, к которой применен фильтр SVG Turbulence — в итоге получается такой эффект появления картинок при прокрутке.
🔍Демонстрация
🔍GitHub
👍18
🍇 Микрофронтенд: что это такое и зачем он нужен?
В этой статье сравним разные способы организации микрофронтенда, изучим их преимущества и стратегии реализации.
🔗 Основной сайт
🔗 Зеркало
В этой статье сравним разные способы организации микрофронтенда, изучим их преимущества и стратегии реализации.
🔗 Основной сайт
🔗 Зеркало
👍8🥱2
🚀 Хотите получить быстрое обзорное представление о синтаксисе и фичах популярных JavaScript фреймворков и библиотек?
Component Party вам в помощь. Сам проект, например, написан на Vite и Svelte.
Component Party вам в помощь. Сам проект, например, написан на Vite и Svelte.
component-party.dev
Component Party
Web component JS frameworks overview by their syntax and features: Svelte 5, React, Vue 3, Angular Renaissance, Angular, Lit, Ember Octane, Solid.js, Svelte 4, Vue 2, Alpine, Ember Polaris, Mithril, Aurelia 2, Qwik, Marko, Aurelia 1
👍7🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
👍27🤯9🤔6🔥1
377. Firefox 115, эмоджи, контейнеры, DOMContentLoaded, SVG-in…
Веб-стандарты
00:02:02 Firefox 115
00:10:01 Юникод и эмоджи
00:17:17 Контейнеры вместо медиа
00:32:49 DOMContentLoaded
00:42:55 Избавляемся от SVG-in-JS
00:58:16 Бесполезные слэши в тегах
01:21:11 Ответы на вопросы
#podcast
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍3