Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.

Совет по Javascript 💡

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

👉 @frontend_1

Совет CSS 💡

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

👉 @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

Разработчик больше не обязан выполнять каждую задачу вручную. Но сможет ли ИИ-агент действительно помочь в работе?

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

На открытом уроке 19 октября в 20:00 МСК в преддверие старта курса «Разработка ИИ-агентов» разберем, как создавать и применять агентов в реальной разработке. Вы узнаете, какие задачи можно делегировать ИИ-агентам, как они работают с кодовой базой и внешними системами, где помогают ускорить процессы, а где требуется участие разработчика.

Урок будет полезен разработчикам, техническим специалистам и тимлидам, которые хотят использовать возможности ИИ не только для генерации кода. Откройте новый подход к разработке. Регистрируйтесь на открытый урок: https://vk.cc/d2OXld

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

Совет по CSS 💡

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

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

👉 @frontend_1

🚀 Быстрое улучшение 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

🚀 Подборка полезных IT каналов в Max


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

https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)

Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак

Английский с нуля 🇬🇧
https://max.ru/UchuEnglish

1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8

Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek

Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика

Программирование React📌
https://max.ru/react_lib React

Программирование Rust📌
https://max.ru/channel_rust_lib

Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика

Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek

GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub

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

Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков

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

Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻

Шутки программистов 📌
https://max.ru/itumor Шутки программистов

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

Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров

Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике

Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait

Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных

Городские📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП
https://max.ru/channel_krasnodar_novosty Краснодар Новости
https://max.ru/channel_novosibirsk_novosti Новосибирск
https://max.ru/channel_samara_novosti Новости Самары
https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга
https://max.ru/channel_kazan_novosti Новости Казани
https://max.ru/channel_omsk_novosti Новости Омска
https://max.ru/channel_moskva_24 Москва 24

Мини-хак: :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

🔥 Трюк с style в React, который упростит работу с динамическими стилями

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

<div
style={{
padding: '16px',
...(isError && { border: '1px solid red' }),
...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
}}
>
Hello!
</div>

📌 Что тут происходит:

* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.

🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).

💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

👉 @frontend_1

💡 HTML Tip: Скачивание файлов одной строкой

Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке:

<a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a>

📌 Что важно знать:

– download — указывает браузеру, что нужно не открыть файл, а скачать его
– Можно задать имя файла прямо в атрибуте
– Работает только с ресурсами того же источника (same-origin)
– Поддерживает blob: и data: ссылки для скачивания сгенерированного контента

🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition.

👉 @frontend_1