Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯

Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS.

Пример: показать рамку у карточки, если внутри есть картинка:

.card:has(img) {
  border: 2px solid #4ade80;
}

Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:

.input-wrapper:has(input:focus) label {
  color: #3b82f6;
}

Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI

Документация: MDN про :has()

Пробуйте! Это реально меняет подход к верстке.

👉 @frontend_1

Хотите углубить знания в JavaScript и работать с самыми популярными фреймворками? Прокачайте свои навыки до профессионального уровня с курсом «JavaScript Developer. Professional» от OTUS.

Мы предлагаем практический курс, где вы:
- Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие.
- Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL.
- Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое.

Вы сможете:
• Создавать приложения для реальных проектов.
• Применять паттерны проектирования.
• Работать с асинхронностью, тестированием, оптимизацией.

Пройдите вступительное тестирование и получите скидку на обучение: https://vk.cc/cNWXTl

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🚀 Быстрое улучшение Lighthouse: content-visibility

Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:

.card {
  content-visibility: auto;
}

Что делает:

- Браузер не рендерит невидимые элементы (за пределами вьюпорта);
- Сохраняет размер блока для скролла;
- Экономит ресурсы → First Paint быстрее, Lighthouse выше.

Где применять:

- Списки (товары, посты);
- Длинные страницы;
- Виджеты ниже фолда.

⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров.

Можно добавить contain-intrinsic-size → убрать "скачок" при появлении.

.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

2 строки — и сайт ощущается быстрее ✨

👉 @frontend_1

🚀 Подборка Telegram каналов для программистов

Системное администрирование, DevOps 📌

https://www.tgoop.com/bash_srv Bash Советы
https://www.tgoop.com/win_sysadmin Системный Администратор Windows
https://www.tgoop.com/sysadmin_girl Девочка Сисадмин
https://www.tgoop.com/srv_admin_linux Админские угодья
https://www.tgoop.com/linux_srv Типичный Сисадмин
https://www.tgoop.com/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://www.tgoop.com/linux_odmin Linux: Системный администратор
https://www.tgoop.com/devops_star DevOps Star (Звезда Девопса)
https://www.tgoop.com/i_linux Системный администратор
https://www.tgoop.com/linuxchmod Linux
https://www.tgoop.com/sys_adminos Системный Администратор
https://www.tgoop.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tgoop.com/sysadminof Книги для админов, полезные материалы
https://www.tgoop.com/i_odmin Все для системного администратора
https://www.tgoop.com/i_odmin_book Библиотека Системного Администратора
https://www.tgoop.com/i_odmin_chat Чат системных администраторов
https://www.tgoop.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tgoop.com/sysadminoff Новости Линукс Linux

1C разработка 📌
https://www.tgoop.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://www.tgoop.com/DevLab1C 1С:Предприятие 8
https://www.tgoop.com/razrab_1C 1C Разработчик
https://www.tgoop.com/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://www.tgoop.com/rabota1C_rus Вакансии для программистов 1С

Программирование C++📌
https://www.tgoop.com/cpp_lib Библиотека C/C++ разработчика
https://www.tgoop.com/cpp_knigi Книги для программистов C/C++
https://www.tgoop.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tgoop.com/pythonofff Python академия.
https://www.tgoop.com/BookPython Библиотека Python разработчика
https://www.tgoop.com/python_real Python подборки на русском и английском
https://www.tgoop.com/python_360 Книги по Python

Java разработка 📌
https://www.tgoop.com/BookJava Библиотека Java разработчика
https://www.tgoop.com/java_360 Книги по Java Rus
https://www.tgoop.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tgoop.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tgoop.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tgoop.com/developer_mobila Мобильная разработка
https://www.tgoop.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tgoop.com/frontend_1 Подборки для frontend разработчиков
https://www.tgoop.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tgoop.com/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tgoop.com/game_devv Все о разработке игр

Библиотеки 📌
https://www.tgoop.com/book_for_dev Книги для программистов Rus
https://www.tgoop.com/programmist_of Книги по программированию
https://www.tgoop.com/proglb Библиотека программиста
https://www.tgoop.com/bfbook Книги для программистов

БигДата, машинное обучение 📌
https://www.tgoop.com/bigdata_1 Big Data, Machine Learning

Программирование 📌
https://www.tgoop.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tgoop.com/rust_lib Полезный контент по программированию на Rust
https://www.tgoop.com/golang_lib Библиотека Go (Golang) разработчика
https://www.tgoop.com/itmozg Программисты, дизайнеры, новости из мира IT
https://www.tgoop.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tgoop.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tgoop.com/ruby_lib Библиотека Ruby программиста
https://www.tgoop.com/lifeproger Жизнь программиста. Авторский канал.

QA, тестирование 📌
https://www.tgoop.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tgoop.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tgoop.com/thehaking Канал о кибербезопасности
https://www.tgoop.com/xakep_2 Хакер Free

Книги, статьи для дизайнеров 📌
https://www.tgoop.com/ux_web Статьи, книги для дизайнеров

Математика 📌
https://www.tgoop.com/Pomatematike Канал по математике
https://www.tgoop.com/phis_mat Обучающие видео, книги по Физике и Математике
https://www.tgoop.com/matgeoru Математика | Геометрия | Логика

Excel лайфхак📌
https://www.tgoop.com/Excel_lifehack

https://www.tgoop.com/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://www.tgoop.com/sysadmin_rabota Системный Администратор
https://www.tgoop.com/progjob Вакансии в IT

Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

👉 @frontend_1

🪄 Трюк: «Скелетон» без JS

При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}

📌 Как использовать:

1. Создаёте div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

👉 @frontend_1

Совет CSS 💡

Вы можете не знать об этом псевдоклассе CSS

👉 @frontend_1

Совет по Javascript 💡

Как выбрать последний элемент массива

👉 @frontend_1

🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?

Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.

Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.

⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOmfRV

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Почему стоит использовать Tagged Unions при разработке на TypeScript

Сегодня я хочу поговорить на тему Tagged Unions (размеченных объединений) и объяснить, почему они ваш секретный инструмент для написания надежного TypeScript-кода.

https://habr.com/ru/companies/megafon/articles/933752/

👉 @frontend_1

CSS совет 💡

Возможно, вы не знали, что в CSS можно задавать поворот, используя единицу измерения turn

👉 @frontend_1

Распространённые коды состояния HTTP

👉 @frontend_1

Spellbook of Modern Web Dev

🧙‍♂️ Книга заклинаний современного веб-разработчика — это тщательно подобранный список ресурсов, инструментов и практик, охватывающих весь жизненный цикл современного веб-приложения.

Проект ориентирован на фронтенд, но также затрагивает аспекты бэкенда, DevOps, производительности, безопасности, тестирования, архитектуры и многое другое. Это не просто список ссылок — это настоящая карта знаний по веб-разработке.

📚 Темы включают:
- Среды разработки (IDE, терминал, Git)
- Языки и трансляторы (JS/TS, Babel, WebAssembly)
- UI/UX, CSS-инструменты и фреймворки
- Сборщики и бандлеры (Webpack, Vite, etc.)
- CI/CD, мониторинг, деплоймент
- Архитектурные шаблоны, микросервисы, серверлесс
- Безопасность, производительность, тестирование


https://github.com/dexteryy/spellbook-of-modern-webdev

👉 @frontend_1

👉 @frontend_1

🚀 С 25 по 29 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы Frontend разработчик скидка 500 р по промокоду react_crew_3_iyBLiN

Сократите свой CSS-код с помощью :where()

Используйте псевдокласс-функцию :where(), когда нужно применить одинаковые стили к нескольким элементам, не беспокоясь о том, что порядок селекторов повлияет на специфичность правил. Это простой способ сделать CSS более предсказуемым и удобным для поддержки.

/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
  border: 2px solid red;
  padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
  border: 2px solid red;
  padding: 10px;
}

👉 @frontend_1

3 полезных совета по Tailwind CSS

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


1. Используйте size-{n} для одинаковой ширины и высоты

Вместо того чтобы отдельно задавать ширину и высоту, можно использовать утилиту size-{n}, если элементу нужны одинаковые размеры.

<!-- Вместо этого -->
<div class="w-12 h-12 bg-blue-500 rounded-full"></div>

<!-- Используйте это -->
<div class="size-12 bg-blue-500 rounded-full"></div>

Этот шорткат удобен для квадратов, кругов и любых элементов, где нужна равная ширина и высота.


2. Применяйте divide-{y/x}-{n} для равномерного разделения

Когда нужно добавить границы или разделители между дочерними элементами, вместо ручного добавления бордеров каждому ребёнку используйте утилиту divide-{y/x}-{n} на родительском контейнере. Это гарантирует единообразное разделение и уменьшает количество кода.

<!-- Вместо этого -->
<div>
  <div class="py-4 border-b">Item 1</div>
  <div class="py-4 border-b">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

<!-- Используйте это -->
<div class="divide-y">
  <div class="py-4">Item 1</div>
  <div class="py-4">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

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


3. Используйте произвольные варианты с [&_selector]:

Tailwind CSS позволяет применять стили ко всем совпадающим дочерним элементам через родителя с помощью синтаксиса [&_selector]:. Это делает HTML чище и удобнее в поддержке.

<!-- Вместо этого -->
<ul>
  <li class="mb-2 text-blue-500">Item 1</li>
  <li class="mb-2 text-blue-500">Item 2</li>
  <li class="mb-2 text-blue-500">Item 3</li>
</ul>

<!-- Используйте это -->
<ul class="[&_li]:mb-2 [&_li]:text-blue-500">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

👉 @frontend_1

Как добавлять условные свойства объектов в JavaScript

При создании объектов в JavaScript иногда требуется включать определённые свойства только при выполнении конкретных условий. Этот приём можно реализовать с помощью оператора расширения (…) в сочетании с условной логикой. Давайте разберём, как овладеть этим мощным инструментом для более гибкого и динамичного создания объектов.

Проблема статических свойств объектов

Представьте: вы создаёте объект пользователя и хотите добавить разные свойства в зависимости от его статуса. Возможно, он администратор, или у него есть премиум-подписка, или и то, и другое! Как создать объект, который гибко включает или исключает свойства в зависимости от условий?

Решение: условное распространение (Conditional Spreading) в JavaScript

Вот где начинается магия. Мы можем использовать оператор расширения (…) вместе с логическим оператором И (&&), чтобы условно добавлять свойства в объекты JavaScript. Такой подход позволяет создавать чистый и гибкий код, динамически добавляя свойства на основании различных условий.

Разберём это на примере:

const isAdmin = true;
const hasPremium = false;

const user = {
  username: 'johndoe',
  email: '[email protected]',
  ...(isAdmin && { role: 'admin' }),
  ...(hasPremium && { subscription: 'premium' }),
  ...((isAdmin || hasPremium) && { specialFeatures: 
  ['dashboard', 'reports'] }),
};

console.log(user);
/* 
{
  "username": "johndoe",
  "email": "[email protected]",
  "role": "admin",
  "specialFeatures": [
    "dashboard",
    "reports"
  ]
}
*/

Как работают условные свойства объектов

Выражение && в JavaScript вычисляется слева направо.
Если первая часть выражения ложна (falsy), то происходит короткое замыкание — вся конструкция возвращает это ложное значение, а вторая часть даже не вычисляется.

Вот что происходит в нашем примере:

- `isAdmin && { role: 'admin' }`: так как isAdmin === true, в объект добавляется свойство role: 'admin'.
- `hasPremium && { subscription: 'premium' }`: так как hasPremium === false, это свойство не добавляется.
- `(isAdmin || hasPremium) && { specialFeatures: [...] }`: условие истинно (потому что isAdmin === true`), поэтому в объект добавляется массив `specialFeatures.

Профессиональные советы по работе с условными свойствами объектов в JavaScript 🚀

1- Порядок имеет значение: помните, что порядок операций распространения (spread) может влиять на итоговый объект. Более поздние операции перезапишут более ранние при одинаковом ключе.

2- Вопросы производительности: хотя этот приём выглядит чисто и читаемо, будьте осторожны при использовании с большими объектами или в критичных к производительности местах. Каждая операция spread создаёт новый объект, что может повлиять на производительность при чрезмерном использовании.

3- Отладка условных свойств: при отладке помните, что "ложные" значения (`...false`, ...null, `...undefined`) просто игнорируются, из-за чего некоторые проблемы могут быть неочевидны на первый взгляд.

4- Nullish coalescing: для более продвинутых случаев использования рассмотрите комбинацию этого подхода с оператором объединения с null (??) для задания значений по умолчанию.

const user = {
  ...someCondition && { prop: valueIfTrue ?? defaultValue }
};

Этот приём позволяет создавать объекты чисто и гибко, добавляя свойства динамически на основе различных условий. Он особенно полезен при работе со сложными объектами, которые должны адаптироваться к разным сценариям или типам пользователей.

👉 @frontend_1

10 современных возможностей CSS, которые стоит использовать

Точно так же, как и JavaScript, CSS не пользуется наилучшей репутацией среди (Rails)-разработчиков. И, как и в случае с JavaScript (вспомните Turbo, а также CoffeeScript), у CSS длинная история препроцессоров, постпроцессоров и различных абстракций (например, Tailwind CSS).

И долгое время многие из этих надстроек были действительно необходимы. Трудно представить CSS без вложенных селекторов, не так ли?

Но на дворе 2025 год, и CSS развивается (и будет развиваться!) очень быстрыми темпами. Позади остались времена spacer.gif или создания изображений для каждого угла карточки, чтобы имитировать скруглённые границы.

Если вы какое-то время пренебрегали CSS (например, потому что пользовались Tailwind CSS), ниже я хочу выделить несколько новых возможностей CSS, которые я с удовольствием применяю в некоторых проектах (созданных под эгидой Rails Designer и не только). Хотя я всё ещё люблю использовать Tailwind CSS, понимание и реальное использование самого CSS - крайне важно. Веб строится на (открытых) стандартах, что необходимо для его доступности, поддерживаемости и долгосрочной актуальности.


Min, max and clamp

min()

Соединяя их вместе, так как они перекрываются

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

Думайте о min() как об установке верхнего предела. Оно выберет меньшее из значений. Удобно для того, чтобы элементы не становились слишком большими, при этом оставаясь адаптивными. То есть, пока 90% вычисляется как меньше 300px - используется 90%. Как только результат превышает 300px - используется это значение.

max()

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

https://railsdesigner.com/modern-css-overview/

👉 @frontend_1

CSS-совет 💡

Нет необходимости создавать отдельные версии логотипа в градациях серого для тёмного и светлого режимов.

Это легко делается с помощью CSS-фильтров

👉 @frontend_1