This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 80s Music Facts – страница с плеером и анимированными карточками. Если навести курсор на фото, оно приблизится с небольшим поворотом вправо.
Сайтодел | #сниппет #css
💾 80s Music Facts – страница с плеером и анимированными карточками. Если навести курсор на фото, оно приблизится с небольшим поворотом вправо.
Сайтодел | #сниппет #css
✈️ [PYTHON:TODAY]
😱 Робот радуется прохождению теста «Докажите, что вы не робот»
Конец близко... С добрым утром ☕️
😱 Робот радуется прохождению теста «Докажите, что вы не робот»
Конец близко... С добрым утром ☕️
✈️ Code Ready | Frontend
Element.toggleAttribute() — нативное переключение DOM-атрибутов!
В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов:
До появления
const button = document.querySelector('button');
if (button.hasAttribute('disabled')) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
button.toggleAttribute('disabled');
Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.
Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.
<button disabled>
Submit
</button>
а также
<button disabled="">
Submit
</button>
имеют одинаковое поведение.
Метод возвращает
const isDisabled = button.toggleAttribute('disabled');
console.log(isDisabled); // true
Дополнительно
button.toggleAttribute('disabled', true); // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут
Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:
input.toggleAttribute('required', isRequired);
const card = document.querySelector('.card');
card.toggleAttribute('data-selected');
После выполнения:
<div class="card" data-selected></div>
На практике метод используется для управления простыми состояниями интерфейса: переключение видимости элементов, изменение доступности контролов, управление режимами компонентов и другие сценарии, где состояние выражается наличием атрибута.
Например, управление видимостью через стандартный атрибут
const block = document.querySelector('.details');
block.toggleAttribute('hidden');
🔥
📣 Code Ready | #практика
Element.toggleAttribute() — нативное переключение DOM-атрибутов!
В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов:
disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.До появления
toggleAttribute() подобные операции обычно реализовывались через отдельную проверку наличия атрибута и последующее добавление либо удаление:const button = document.querySelector('button');
if (button.hasAttribute('disabled')) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
Element.toggleAttribute() объединяет эту логику в один вызов. Метод проверяет текущее состояние атрибута и выполняет противоположное действие.button.toggleAttribute('disabled');
Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.
Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.
<button disabled>
Submit
</button>
а также
<button disabled="">
Submit
</button>
имеют одинаковое поведение.
Метод возвращает
boolean, отражающий состояние атрибута после выполнения операции:const isDisabled = button.toggleAttribute('disabled');
console.log(isDisabled); // true
Дополнительно
toggleAttribute() поддерживает второй аргумент force, который позволяет явно задать требуемое состояние вместо переключения.button.toggleAttribute('disabled', true); // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут
Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:
input.toggleAttribute('required', isRequired);
toggleAttribute() работает с любыми валидными DOM-атрибутами, включая пользовательские флаги состояния компонентов:const card = document.querySelector('.card');
card.toggleAttribute('data-selected');
После выполнения:
<div class="card" data-selected></div>
На практике метод используется для управления простыми состояниями интерфейса: переключение видимости элементов, изменение доступности контролов, управление режимами компонентов и другие сценарии, где состояние выражается наличием атрибута.
Например, управление видимостью через стандартный атрибут
hidden:const block = document.querySelector('.details');
block.toggleAttribute('hidden');
🔥
Element.toggleAttribute() определён в DOM Standard и предоставляет единый API для добавления и удаления атрибутов без необходимости вручную комбинировать hasAttribute(), setAttribute() и removeAttribute(). Полезный метод, который делает работу с DOM-состояниями более лаконичной и предсказуемой. Поддерживается всеми современными браузерами.📣 Code Ready | #практика
✈️ Code Ready | Frontend
Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready
Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться;
• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит;
• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки;
• статус-страница на отдельном хостинге/CDN.
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready
✈️ Code Ready | Frontend
Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
📣 Code Ready | #статья
Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;• Рассказывается, как построить и отладить автоматический конвейер наполнения, который после настройки генерирует около 14 000 страниц в неделю;🔊 Продолжайте читать на Habr!
📣 Code Ready | #статья
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
✈️ Code Ready | Frontend
Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security
Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Code Ready | Frontend
🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
📣 Code Ready | #репозиторий
🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Smoothie Bowl Transition Prototype – прототип для анимации с вращающимися тарелками. Во вкладке "design" есть разные варианты цветового оформления страницы.
Сайтодел | #макет #figma
🖥 Smoothie Bowl Transition Prototype – прототип для анимации с вращающимися тарелками. Во вкладке "design" есть разные варианты цветового оформления страницы.
Сайтодел | #макет #figma
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🎨 Цветовая палитра макета "Gradients WebSite Template":
Сайтодел | #палитра
🎨 Цветовая палитра макета "Gradients WebSite Template":
HEX | RGB #EC6E9B | rgb(236,110,155)#F3A042 | rgb(243,160,66)#27438C | rgb(39,67,140)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css