За последние годы появилось много новых функций CSS, но их фактическое использование все еще остается низким. Хотя существует много разных причин медленного внедрения, я думаю, что одним из самых больших препятствий является наш собственный мозг.
https://mxb.dev/blog/old-dogs-new-css-tricks

Знакомство с API позиционирования привязки CSS (11 минут чтения)
Новый API позиционирования привязки CSS позволяет позиционировать элементы относительно заданных вами привязок.

https://developer.chrome.com/blog/anchor-positioning-api

15 сумасшедших новых функций JS о которых вы еще не знали
Ознакомьтесь с новейшими функциями 15 различных фреймворков JavaScript и проблемами, которые они решают для веб-разработчиков.

https://www.youtube.com/watch?v=466U-2D86bc

Вам не нужен CSS Framework

CSS-фреймворки предлагают краткосрочный прирост скорости и согласованности, но со временем их становится все труднее поддерживать.

https://www.infoq.com/articles/no-need-css-framework

Напишите компонент React как профессионал

https://medium.com/@scozdev/write-a-react-component-like-a-pro-4852109ffee5

Учебное пособие по анимации Parallax Smooth Scroll Cards для веб-сайта с использованием Lenis Scroll и Framer Motion в приложении Next.js. Вдохновлен многими веб-сайтами, получившими награды awwwwards. https://blog.olivierlarose.com/tutorials/cards-parallax

Напишите компоненты один раз, запустите везде. Компилируется в React, Vue, Qwik, Solid, Angular, Svelte и другие. https://github.com/BuilderIO/mitosis

Как создать таймер CSS

Бывают случаи , когда мы можем использовать таймер на веб-сайтах. 😉

Возможно, мы хотим назначить время для викторины или оказать давление на опрос. Возможно, мы просто пытаемся запустить обратный отсчет после того, как пользователь совершил что-то важное, например успешно забронировал билет на концерт. https://frontendmasters.com/blog/how-to-make-a-css-timer

Grid Garden — это веб-игра, которая помогает пользователям изучать сетку CSS, решая головоломки и применяя свойства сетки. https://cssgridgarden.com/

Узнайте о проблемах использования полей в CSS, преимуществах использования свойства «пробел» и альтернативах, которые следует учитывать для управления интервалами в ваших макетах.

https://ishadeed.com/article/the-gap

Пользовательский ползунок диапазона c css

https://www.bram.us/2024/06/06/css-only-custom-range-slider-with-motion

Как эффективно использовать функцию CSS rgba()

https://www.lambdatest.com/blog/css-rgba

Посмотрите, как я решил проблему дизайна с помощью CSS Cap Unit.

https://ishadeed.com/article/css-cap-unit

Безопасность JavaScript: простые методы защиты вашего интерфейса

https://dev.to/buildwebcrumbs/javascript-security-simple-practices-to-secure-your-frontend-18ii

Полезные советы и методы CSS

https://www.smashingmagazine.com/2024/06/css-tips-and-techniques

Топ-5 лучших практик React, которые должен знать каждый разработчик
Изучите составное программное обеспечение, управление состоянием, неизменяемость, методы жизненного цикла, перехватчики и оптимизацию.

https://blog.bitsrc.io/react-best-practices-55aca2f38606

Как использовать CSS-макеты для адаптивных веб-сайтов

https://www.lambdatest.com/blog/css-layouts

Живые демонстрации автономных веб-компонентов

https://frontendmasters.com/blog/live-demos-of-stand-alone-web-components/

input, textarea { field-sizing: content; }

Автоматическое изменение размера ввода текста с помощью одной строки CSS

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Как скрыть элемент доступно?»

Я продолжаю отвечать на вопросы по вёрстке из собеседований на должность фронтендера. Если я где-то ошибаюсь, вы поправляете меня в комментариях. Таким способом я учусь у вас, а вы у меня.


Сегодня я отвечу на следующий вопрос: «Как скрыть элемент с помощью CSS доступно?» https://habr.com/ru/companies/ruvds/articles/819233/

Создайте боковое меню, используя только HTML и CSS

https://dev.to/codingnepal/create-a-sidebar-menu-using-html-and-css-only-2e79

Генератор разделителей секций

Demo: https://wweb.dev/resources/css-separator-generator
Code: https://github.com/wwebdev/separator-generator

Создание пользовательского интерфейса в стиле Fallout с использованием современного CSS

https://www.codemotion.com/magazine/frontend/creating-a-fallout-style-ui-using-modern-css

Полный гайд по CSS Flexbox с примерами из практики

https://habr.com/ru/articles/816349/