🔥 Зачем нужен атрибут defer в теге
Атрибут
✅ Как это работает?
🔹 Скрипт загружается параллельно с HTML
🔹 Выполняется в порядке объявления
🔹 Не блокирует отрисовку страницы
⚠️ Если скрипт зависит от DOM, defer — лучший вариант, так как он гарантирует, что HTML уже загружен.
<script>?Атрибут
defer позволяет загружать скрипты в фоновом режиме, но выполнять их только после полной загрузки HTML. Это ускоряет рендеринг страницы и предотвращает блокировку контента.✅ Как это работает?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defer Example</title>
<script src="script.js" defer></script> <!-- Скрипт выполнится после загрузки HTML -->
</head>
<body>
<h1>⚡️ Быстрая страница!</h1>
</body>
</html>
🔹 Скрипт загружается параллельно с HTML
🔹 Выполняется в порядке объявления
🔹 Не блокирует отрисовку страницы
⚠️ Если скрипт зависит от DOM, defer — лучший вариант, так как он гарантирует, что HTML уже загружен.
⚡2
Какое значение justify-content расположит элементы равномерно с одинаковыми отступами между ними и от краёв контейнера?
Anonymous Quiz
25%
justify-content: space-around;
24%
justify-content: space-between;
48%
justify-content: space-evenly;
3%
justify-content: center;
CSS. Свойство, устанавливающее, как отображать границы вокруг ячеек таблицы, называется...
Anonymous Quiz
41%
border
31%
border-collapse
18%
border-style
7%
border-inherit
3%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
⏱ Neon Clock
Сцена с неоновыми часами.
Сцена с неоновыми часами.
reveal.js
reveal.js — это программа для создания HTML-презентаций с открытым исходным кодом. Презентации, созданные с ее помощью, чрезвычайно красивы и элегантны, особенно те, которые включают в себя демонстрацию кода. Самое замечательное, что вы можете делать с презентацией то же самое, что и с вебом — изменять ее, оформлять по своему вкусу и т.д.
#GitHub
reveal.js — это программа для создания HTML-презентаций с открытым исходным кодом. Презентации, созданные с ее помощью, чрезвычайно красивы и элегантны, особенно те, которые включают в себя демонстрацию кода. Самое замечательное, что вы можете делать с презентацией то же самое, что и с вебом — изменять ее, оформлять по своему вкусу и т.д.
#GitHub
👌1
⚙️ Переходите на сторону light-dark()
Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.
#Полезное
Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.
#Полезное
👍1
Какое значение position в CSS позволяет элементу оставаться зафиксированным на экране при прокрутке страницы?
Anonymous Quiz
10%
position: static;
9%
position: absolute;
79%
position: fixed;
1%
position: relative;
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Dropdown Menu Effects
Анимированное выпадающее меню с переливающимся эффектом.
Анимированное выпадающее меню с переливающимся эффектом.
В чем разница между
🔸
🔸
⚡️ Всегда используйте
== и === в JavaScript?🔸
== (нестрогое сравнение) приводит типы перед сравнением:console.log(5 == "5"); // true (строка преобразуется в число)
🔸
=== (строгое сравнение) сравнивает и тип, и значение:console.log(5 === "5"); // false (разные типы)
console.log(null === undefined); // false
⚡️ Всегда используйте
===, чтобы избежать неожиданных преобразований и ошибок!👍1
Какое действие выполняет event.preventDefault() в обработчике событий?
Anonymous Quiz
18%
Останавливает всплытие события
74%
Предотвращает стандартное поведение элемента
7%
Полностью отменяет выполнение обработчика
1%
Удаляет элемент из DOM
This media is not supported in your browser
VIEW IN TELEGRAM
Multiple Glow effects Button
Анимированная кнопка с различными эффектами свечения
Анимированная кнопка с различными эффектами свечения
free-programming-books
Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки.
И самое приятное — все это доступно на огромном количестве различных языков.
#GitHub
Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки.
И самое приятное — все это доступно на огромном количестве различных языков.
#GitHub
❤3
⚙️ JavaScript Set и Map: За пределами массивов и объектов
Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности?
#Полезное
Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности?
#Полезное
Как z-index влияет на отображение элементов в CSS?
Anonymous Quiz
94%
Позволяет изменять порядок наложения элементов
4%
Управляет прозрачностью элементов
2%
Задаёт ширину элемента
1%
Контролирует скорость анимации
Как работает
Свойство
✅ Пример:
🔹 Зачем нужно?
⚡️
dataset в JavaScript?Свойство
dataset позволяет получать и изменять пользовательские атрибуты data-* в HTML-элементах.✅ Пример:
<button id="btn" data-user-id="42">Click me</button>
<script>
const btn = document.getElementById("btn");
console.log(btn.dataset.userId); // "42"
btn.dataset.userId = "99"; // Изменение значения
</script>
🔹 Зачем нужно?
• Позволяет хранить данные прямо в HTML. • Удобно для передачи информации в JavaScript. • Избавляет от необходимости использовать скрытые инпуты или классы.⚡️
dataset делает работу с динамическими данными в разметке проще и чище!👍1😁1