Древовидные представления в css

Древовидное представление (сворачиваемый список) можно создать, используя только html и css , без необходимости использования JavaScript.
https://iamkate.com/code/tree-views/

Карточки с Hover Effect , чистым CSS и HTML

https://github.com/atherosai/ui/blob/main/pages/cards-hover-effect.tsx

Display - CSS

легче выучить, когда это анимировано.

Анонс TypeScript 5.1

Сегодня мы рады объявить о выпуске TypeScript 5.1!

Если вы еще не знакомы с TypeScript, это язык, основанный на JavaScript путем добавления конструкций, называемых типами. Эти типы могут описывать некоторые детали нашей программы и могут быть проверены TypeScript до того, как они будут скомпилированы, чтобы выявить возможные опечатки, логические ошибки и многое другое. https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/

Создайте этот гладкий эффект наведения галереи карточек с помощью свойства CSS Flex Grow

Как создать видеоплеер на Vanilla Javascript и HTML5

Вы узнаете, как создать свой собственный видеоплеер на JavaScript, используя простые методы, и получите действительно крутые результаты!
https://hashnode.knulst.de/how-to-build-a-video-player-in-vanilla-javascript-and-html5

Градиент — CSS

Идеи JavaScript, которые должен понимать каждый веб-разработчик

Расширенные концепции JavaScript относятся к более сложным и запутанным аспектам языка программирования JavaScript. https://coinsbench.com/javascript-ideas-every-web-developer-should-understand-34e633a35d7d

Совет по CSS! 🔮

Микровзаимодействия, управляемой прокруткой. 😎


.avatar{
animation:shrink;
animation-timeline:scroll(root);
animation-range:calc(var(--head)*0.9) ...;
}

https://codepen.io/jh3y/pen/JjmgMwa

ts-reset vs types-spring

Тайпскрипт не идеален. Его ругают, но любят. Кто-то даже не может представить свою жизнь без него так же, как не может представить жизнь без комфортного автомобиля. Тем не менее, у этого "автомобиля" в базовой комплектации есть существенные недостатки, которые каждый "автолюбитель" "чинит" по своему.

Один мой знакомый сравнил тайпскрипт с css браузеров, которому необходим свой собственный аналог css reset. И оказалось, что такой действительно есть. Речь идет о пакете, название которого говорит само за себя - ts-reset. За полгода своего существования на github ts-reset набрал 6 тысяч звезд, и мне показалось странным, что на хабре я не нашел ни одной статьи, посвященной этому пакету. И если интересно, добро пожаловать под кат...

Читать далее... https://habr.com/ru/articles/740474/

Анимация переходов Tailwind при загрузке страницы

Классы переходов Tailwind дают вам возможность анимировать элементы с минимальными усилиями. Единственная проблема заключается в том, что вы не можете реализовать анимацию, используя только классы перехода.

В этом уроке вы узнаете, как мы можем решить эту проблему с помощью простого javascript.

https://devdojo.com/tnylea/animating-tailwind-transitions-on-page-load

👋 Попрощайтесь с оператором распространения: используйте Composer по умолчанию

" default-composer " - это легкая (~ 300 байт) библиотека JavaScript, которая позволяет вам устанавливать значения по умолчанию для вложенных объектов. https://aralroca.com/blog/default-composer

Современный способ подачи изображений

HTTPArchive обнаружил, что по крайней мере 70% всех веб-сайтов имеют изображение в качестве наиболее заметного элемента, однакотолько 34%Интернет использует <img srcset>для создания адаптивных и эффективных изображений (и еще меньше используют <picture>). Чтобы изменить это, следующая статья расскажет вам о методах создания адаптивных изображений и представит новый метод, который направлен на то, чтобы <img>теги работали (почти) как <picture>теги, упрощая миграцию в существующие кодовые базы. Мы надеемся, что с меньшими инженерными усилиями это поможет вам улучшить изображения на вашем веб-сайте в 2023 году. https://kurtextrem.de/posts/modern-way-of-img

Современный CSS для динамической компонентной архитектуры

Сегодня мы рассмотрим современную архитектуру проекта, уделяя особое внимание тематике, адаптивным макетам и дизайну компонентов. Мы узнаем о функциях для улучшения организации кода и углубимся в методы компоновки, такие как запросы сетки и контейнера. Наконец, мы рассмотрим реальные примеры контекстно-зависимых компонентов, в которых используются передовые технологии CSS. https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/

Изучите CSS Flexbox (flex-wrap, flex-shrink и flex-grow). Анимированный материал упрощает обучение.

CSS получает margin-trim! Удалите поля из дочерних элементов, которые касаются сторон родителя. Больше не нужно выбирать :last-child

Визуальное руководство по макетам в Next.js 13

https://www.builder.io/blog/layouts-in-nextjs-13-visual

11 малоизвестных тегов HTML, которые могут улучшить ваши навыки веб-разработки

Вот несколько необычных и уникальных тегов HTML, с которыми вы, возможно, не знакомы. Эти теги малоизвестны, но в определенных обстоятельствах они могут быть невероятно полезны.

https://blog.ossph.org/lesser-known-html-tags/