✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.

Сайтодел | #макет #figma

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ [PYTHON:TODAY]

🙂 Думайте... а раньше над ними смеялись все

С добрым утром! ☕️

✈️ Code Ready | Frontend

Если вы уже используете ChatGPT, Claude или Cursor в разработке, но всё равно большую часть работы делаете руками — вы используете ИИ далеко не на максимум.

25 августа Хекслет проведёт бесплатный воркшоп, где покажут, как встроить AI-агента непосредственно в процесс разработки.

За 2 часа на реальном репозитории:
— настроите контекст проекта и AGENTS.md;
— дадите агенту задачу от issue до готового кода;
— подключите тесты и CI;
— автоматизируете code review;
— подключите RAG и MCP для работы с документацией, тикетами и API.

В результате — не набор промптов, а готовый процесс работы с AI-агентом.

25 августа, 19:00
Бесплатно.

👉 Записаться на вебинар

#реклама
О рекламодателе

✈️ Code Ready | Frontend

👩‍💻 Нативный раскрывающийся блок с контентом без JavaScript!

Теги <details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML.

Каждый из тегов выполняет свою роль:

• <details> — содержит скрываемый и раскрываемый контент;
• <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока.

По умолчанию содержимое <details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране.

При этом базовое раскрытие и сворачивание работает без единой строки JS.

📣 Code Ready | #атрибут

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ Code Ready | Frontend

Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!

Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.

HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:
<dialog id="confirmDialog">
<p>Удалить запись?</p>

<button value="cancel">
Отмена
</button>

<button value="confirm">
Удалить
</button>
</dialog>

После получения ссылки на элемент становится доступен полный API HTMLDialogElement:
const dialog = document.querySelector(
'#confirmDialog'
);

У элемента есть два принципиально разных режима открытия.show() переводит <dialog> в состояние отображения без модального поведения:
dialog.show();

Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.

showModal() создаёт настоящий modal dialog:
dialog.showModal();

В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.

Это отличается от обычного display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:
dialog.close();

При необходимости можно передать результат завершения операции:
dialog.close('confirmed');

console.log(
dialog.returnValue
);

returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.

Для форм внутри <dialog> существует специальный механизм method="dialog":
<form method="dialog">
<button value="cancel">
Отмена
</button>

<button value="confirm">
Подтвердить
</button>
</form>

При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в returnValue. Состояние элемента доступно через стандартное свойство:
console.log(
dialog.open
);

Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);

Попытка закрытия через Escape вызывает событие cancel:
dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);

Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.

Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}

Главное преимущество <dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.

🔥 Для стандартных модальных сценариев HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.

📣 Code Ready | #практика

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

💾 World Places – трехмерная галерея для карточек с текстами и изображениями. В активном состоянии элемент "всплывает" и показывается пользователю.

Сайтодел | #сниппет #css

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

💾 Infinite Scroll Animation – бесконечная прокрутка элементов, которая сделает сайт динамичнее и поможет уместить много заголовков в ограниченное пространство.

Сайтодел | #сниппет #css

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

💾 Click/Tap Rhythm Password – эффект для кнопки с анимацией фона и изменением цвета. Можно настроить его не только на кейс с ошибкой, но и на успешное действие.

Сайтодел | #сниппет #css

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ [PYTHON:TODAY]

🔍Тестовое собеседование на Middle Python с разработчиком из Яндекса завтра вечером

Уже завтра вечером в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Python-разработчика.

Как это будет:
📂 Хачатур, старший разработчик в Яндексе, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Хачатур будет комментировать каждый ответ респондента, чтобы дать понять чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Хачатуру

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Python-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_py_bot

Реклама.
О рекламодателе.

✈️ [PYTHON:TODAY]

⭐ Двагада

С добрым утром! 😎

✈️ Code Ready | Frontend

👩‍💻 Выделяем элементы в фокусе и их родителей!

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

Примеры использования:

• подсветить контейнер с <input> при вводе;
• изменить рамку всей формы;
• выделить пункт меню при фокусе на вложенной ссылке;
• показать дополнительные элементы управления.

В отличие от :focus, который реагирует только на фокус самого элемента, :focus-within учитывает фокус и на всех элементах внутри него.

📣 Code Ready | #свойство

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack

💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.

Сайтодел | #сниппет #css