В этом гайде создаём кнопку, которая превращается в индикатор загрузки при нажатии, делая интерфейс интерактивным и отзывчивым.
Ключевые моменты:
• HTML: простая структура кнопки с текстом и элементом лоадера.
• CSS: плавные переходы, позиционирование лоадера и анимация вращения.
• JS: добавление/удаление класса loading и блокировка кнопки на время «загрузки».
Подходит для форм, отправки данных, интерактивных интерфейсов и UX-дизайна.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤7🤝7🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Settings Sync — плагин, который автоматически синхронизирует все настройки между разными устройствами. Можно быстро восстановить привычную среду работы или поделиться своим набором настроек с коллегами.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19🔥9👍8
This media is not supported in your browser
VIEW IN TELEGRAM
У
<output> есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Как пишется:
• for — значением может быть один или несколько ID, разделённые пробелом;
• form — указывается ID формы в этом же документе, с которой связывается поле вывода;
• name — имя поля вывода.
Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему
role="status"Please open Telegram to view this post
VIEW IN TELEGRAM
❤16👍13🔥8
Например методы
map(), filter(), find() и другие — это быстрый способ трансформировать, искать и фильтровать данные в массивах.На картинке — 7 ключевых методов массивов.
Сохрани, чтобы не забыть!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥31👍13❤6👎1
В этой шпаргалке собраны приёмы для объявления классов, создания экземпляров, наследования, работы с приватными и статическими свойствами, а также проверки цепочки прототипов. Они применяются при построении иерархий объектов, инкапсуляции и повторного использования кода в проектах любого уровня.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥8🤝5❤3
Например,
<div> используется для группировки блоков и применения стилей к целым секциям, а <span> — для выделения и стилизации отдельных частей текста внутри строки.На картинке — сравнение блокового
<div> со строчным <span>, с примерами кода и наглядным результатом.Сохрани, чтобы не забыть!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🤝9❤8🔥2
Привет! В этом гайде делаем текст, который при клике красиво исчезает и появляется новое слово.
Ключевые моменты:
• HTML: один контейнер для текста.
• CSS: плавные переходы, анимация появления и исчезновения, фон.
• JS: логика переключения слов и автоматическая смена цвета.
Подходит для интерактивных заголовков, лендингов, презентаций и сайтов с акцентом на современную типографику.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18❤7👍7
👍12🔥10🤝6
This media is not supported in your browser
VIEW IN TELEGRAM
Псевдокласс
:focus срабатывает, когда элемент находится в фокусе — например, после клика мышкой или перехода через клавишу Tab.Примеры использования:
• outline — рисуем рамку вокруг поля ввода;
• background — меняем фон кнопки при фокусе;
• box-shadow — добавляем мягкое свечение;
• transform — можно слегка «увеличить» элемент.
Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🤝5❤4🔥2
В этой шпаргалке собраны приёмы работы с числами, строками, датами и JSON: строгая и нестрогая конвертация, целые и дробные числа, проверка на NaN и конечность, преобразование дат в timestamp. Они применяются при обработке внешних данных, валидации и работе с API.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥8❤4🤝2