.b:has( + .b:hover),
.b:hover + .b {
flex: calc(0.2 + (sin(30deg) * 1.5));
translate: 0 calc(sin(30deg) * -75%);
}
➡️ Полный пример здесь.
#css #tip by Jhey
Библиотека фронтендера. Страница 2
19371
@frontendproglib
Полезные материалы по всему, что может быть интересно frontend-разработчику.
-
Библиотека фронтендера
Реализация веб-панели в стиле Dock от Apple на чистом CSS: -
Библиотека фронтендера
Думаете за 100 секунд нельзя ничего понятно объяснить? А вот и нет! Ловите подборку👇 🌐 SvelteKit 🌐 Htmx 🌐 SST 🌐 Nuxt 🌐 Redwood 🌐 React для хейтеров 🌐 SolidJS 🌐 TypeScript 🌐 Angular 🌐 Next.js 🌐 CORS 🌐 Svetle 🔗 Плейлисты с другими темами #матчасть 
-
Библиотека фронтендера
The Concise TypeScript Book Перед вами книга, которая содержит исчерпывающий и краткий обзор возможностей TypeScript. Вас ждут четкие объяснения, охватывающие все аспекты последней версии языка, от его мощной системы типов до расширенных функций. Являетесь ли вы новичком или опытным разработчиком, эта книга станет бесценным ресурсом для улучшения вашего понимания и повышения квалификации в TypeScript. 🔗 Онлайн версия -
Реклама
-
Библиотека фронтендера
Наглядно о том, как взаимодействуют фронтенд- и бэкенд-разработчики #юмор #жиза -
Библиотека фронтендера
💭 В комментариях новички часто спрашивают про ресурсы/книги для начинающего фронтенд-разработчика. Давайте саккумулируем в комментариях свой опыт и поделимся источниками, с которых эффективнее всего начать изучение! И вообще, с какого стека лучше начинать? Поделитесь опытом👇 #холивар -
Библиотека фронтендера
Одной из самых интересных грядущих новинок JavaScript и TypeScript является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами. Автор статьи на примерах разбирает эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Кроме того: 🔸Рассматривает синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack 🔸Приводит пример неочевидного бага и несколько других нововведений Node.js, про которые, возможно, ещё знают не все. Читать 
-
Библиотека фронтендера
🕹 Rx Playground — интерактивная площадка, которая позволяет наглядно изучить основные концепции и операции реактивного программирования с использованием возможностей RxJS и three.js. В каждом уроке вы можете менять операторов на досках. Наблюдайте за реакцией системы и попытайтесь понять основные причины ее поведения. По мере прохождения серии заданий вы познакомитесь с увлекательными правилами реактивного программирования. Думайте об этой демонстрационной игровой площадке как о своей собственной фабрике игрушек, где вы можете дать волю своему творчеству. И да, это очень красиво! 
-
Библиотека фронтендера
🔍Все самое полезное для айтишников в одном канале: анализ рынка труда, советы по Git, подкасты про разработку, новости и просто мемы. Подписываемся на «Библиотеку программиста» (если еще не) — источник действительно качественного технического контента. 👉Подписаться👈 
-
Библиотека фронтендера
❓💭 Объясните делегирование событий в JavaScript Делегирование событий — прием, который состоит в добавлении обработчиков событий к родительскому элементу, а не к дочерним. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этой техники очевидны: ➕Экономит объем используемой памяти, ведь для родительского элемента требуется только один обработчик. ➕Не требуется привязывать или убирать обработчики при добавлении и удалении элементов. 📌 А теперь пример 1️⃣ Самый простой пример: у вас есть HTML-страница, на которой расположена таблица с несколькими ячейками; ваша задача — реализовать подсветку ячейки при клике. Вместо того, чтобы назначать обработчик onclick для каждой ячейки — можно повесить один обработчик на элемент. Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. В данном случае нет никакой разницы, сколько ячеек в таблице. 2️⃣ У делегирования есть и другое применение — действия в разметке. Например, вам требуется сделать меню с разными кнопками, а также у вас есть объект с соответствующими методами. Как их состыковать? Вы можете добавить один обработчик для всего меню и атрибуты data-action для каждой кнопки в соответствии с методами, которые они вызывают. 3️⃣ Делегирование событий можно использовать для добавления элементам «поведения», декларативно задавая обработчики установкой специальных HTML-атрибутов и классов. Приём проектирования «поведение» состоит из двух частей: ▫️Элементу ставится пользовательский атрибут, описывающий его поведение. ▫️При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут, производит соответствующее действие. #вопросы_с_собесов #easy -
Библиотека фронтендера
Главное событие лета в Казани — IT Community Day Сбера 💻 Мы ждем вас 29 июля на первой большой ИТ конференции, которая пройдет в новом крутом технохабе Сбера и потрясающей крыше ИТ Парка им Б.Рамеева. В программе: 👉 20 топовых спикеров Сбера на 3 параллельных сценах 👉 8 тематических стримов: от DS до DevOps, от Java до Soft Skills 👉 квиз и незабываемые активности на протяжении всего мероприятия 👉 нетворкинг, общение с крутыми спецами, HR Speed Dating 😎 After Party на крыше ИТ-парка Встречаемся 29 июля в 12:00 по адресу: ул. Спартаковская, 2. Обязательно зарегистрируйтесь по ссылке! 💚 это #партнерский пост 
-
Библиотека фронтендера
🛣 Свежая дорожная карта для React-разработчика от George Moller Напомним, что одни из самых популярных дорожных карт для фронтенд-разработчика находятся здесь: 🔹Frontend 🔹JavaScript 🔹Angular 🔹Vue 🔹Node.js 
-
Библиотека фронтендера
📌 Подборка еженедельных подкастов о веб-разработке и не только: сохраняй в закладки, чтобы не пропустить ничего интересного 🎙 Веб-стандарты: обсуждение последних новостей и самых ярких событий из мира фронтенд-разработки за прошлую неделю, а также других фронтенд-тем. 🎙 Про код: обсуждение самых интересных новостей из мира веб-разработки простым языком. 🎙 Подлодка: аудио-шоу про IT и всё, что с ним связано. 🎙 Frontend Weekend: самые честные интервью с известными людьми из мира веб-разработки. 🎙 Радио-Т: субботний Hi-Tech-подкаст, который стал одним из первых русскоязычных IT-подкастов. 🎙 JS Party: популярный подкаст о JavaScript, CSS и веб-разработке на английском. #podcast 
-
Библиотека фронтендера
Вы спокойны, сдержаны, имеете малый круг друзей, но довольно близких, а также вы не любите шумные компании, предпочитаете проводить время наедине с собой и сконцентрированы на своем внутреннем мире. Поздравляем — вы интроверт 👐 Несмотря на свою необщительность, интроверты могут быть очень приятными и интересными собеседниками, если с ними правильно общаться на интересующие их темы. 📌 Как расширить свой круг знакомств в таком случае? Если вы смотрели нашу подборку, наверняка обратили внимание на доклад интроверта Тимура Гафиулина из Учи.ру. У него там есть несколько рабочих кейсов. 💭 Кчтати, вы интроверт? 💯 — да, и у меня все отлично 🥱 — нет, у меня нет проблем с социализацией 🤔 — фигня все это, пойду кодить дальше #холивар -
Библиотека фронтендера
🏃Репозиторий, в котором сравниваются качество и скорость последних версий популярных минификаторов JavaScript: 🔸babel-minify 🔸bun 🔸esbuild 🔸google-closure-compiler 🔸JShrink 🔸minify-js 🔸swc 🔸tdewolff/minify 🔸terser 🔸uglify-js -
Библиотека фронтендера
⚡Material Web Components (MWC) теперь находятся в стадии бета-тестирования, а версия 1.0 выйдет уже совсем скоро Почему этот анонс был удивительным? Потому что первоначальный публичный релиз MWC состоялся в мае 2018 года. С тех пор мы почти ничего не слышали о MWC, так что вот краткий обзор👇 Как следует из названия, MWC — это реализация веб-компонентов Material, системы дизайна Google с открытым исходным кодом, которая призвана помочь каждому веб-сайту «внедрить лучшие практики UI». Это немного сбивает с толку, потому что самой популярной реализацией Material на сегодняшний день была сторонняя UI-библиотека React под названием Material UI, которая вообще не имеет официальных связей с Google. Но кто знает, может быть, рост MUI помог мотивировать команду Material наконец-то выпустить стабильную версию собственной UI-библиотеки. И ее реализация с помощью веб-компонентов имеет огромный смысл, потому что 1) это Google, и 2) это позволяет использовать компоненты библиотеки с широким спектром фреймворков и проектов. 📌 Что мы можем ожидать от версии 1.0? ✔️Стабильность 22 основных компонентов ✔️Улучшенная доступность ✔️Динамические цвета и Material токены ✔️Поддержка встроенной HTML-формы Кто знает, станет ли когда-либо Material Web массовой библиотекой, но если это произойдет, это станет еще одной движущей силой для более масштабного ренессанса веб-компонентов, который мы наблюдаем последние пару лет. -
Реклама
-
Библиотека фронтендера
Простой способ определения шрифта, используемого для любого текста веб-страницы. #devtool #tip by Shripal Soni -
Библиотека фронтендера
Усовершенствованный стиль управления формой с помощью Selectmenu и Anchoring API Благодаря рабочей группе сообщества Open UI на горизонте появился новый элемент <selectmenu>, который значительно улучшит стилизацию этого типа управления формой. Под катом — разбор ранней реализации этого экспериментального элемента на примере шаблона, который вы никогда бы не подумали сделать с помощью одного только CSS — radial selection menu. -
Библиотека фронтендера
🤖 4 сферы применения ChatGPT, Bing, Bard и Claude 2 В этой статье мы разберём различные способы применения популярных ИИ с учётом инструментов, доступных на лето 2023 года. 🔗 Основной сайт 🔗 Зеркало 