Фронтенд Гайд
7.26K subscribers
614 photos
307 videos
283 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Кошмар 🫠
💯7👍2
🔥 Зачем нужен атрибут defer в теге <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 уже загружен.
👍6
Какое значение justify-content расположит элементы равномерно с одинаковыми отступами между ними и от краёв контейнера?
Anonymous Quiz
42%
justify-content: space-around;
32%
justify-content: space-between;
22%
justify-content: space-evenly;
4%
justify-content: center;
This media is not supported in your browser
VIEW IN TELEGRAM
🫠 Fluid Simulation

Сцена с интересной симуляцией жидкости с текстом.
30-seconds-of-code

Элегантный пользовательский интерфейс, практичная панель поиска и сниппеты, которые решают некоторые из наиболее часто встречающихся проблем в JavaScript и Python. О чем еще может спросить программист? Все под рукой.
⚙️ Одна React-задача, демонстрирующая ключевые навыки на собеседовании

Разбираем небольшую, но показательную задачу: компонент, загружающий данные по username. Оцениваем работу с хуками, асинхронностью, ошибками и race conditions, выявляя глубину технического мышления.

#Полезное
👍151
reveal.js

reveal.js — это программа для создания HTML-презентаций с открытым исходным кодом. Презентации, созданные с ее помощью, чрезвычайно красивы и элегантны, особенно те, которые включают в себя демонстрацию кода. Самое замечательное, что вы можете делать с презентацией то же самое, что и с вебом — изменять ее, оформлять по своему вкусу и т.д.

#GitHub
⚙️ Переходите на сторону light-dark()

Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.

#Полезное
👍4
Какое значение position в CSS позволяет элементу оставаться зафиксированным на экране при прокрутке страницы?
Anonymous Quiz
10%
position: static;
8%
position: absolute;
81%
position: fixed;
1%
position: relative;
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


⚡️ Всегда используйте ===, чтобы избежать неожиданных преобразований и ошибок!
👍5👾1
This media is not supported in your browser
VIEW IN TELEGRAM
Multiple Glow effects Button

Анимированная кнопка с различными эффектами свечения
👍41
free-programming-books

Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки.

И самое приятное — все это доступно на огромном количестве различных языков.

#GitHub
👍1
⚙️ JavaScript Set и Map: За пределами массивов и объектов

Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности?

#Полезное
👍51
javascript-algorithms

Этот репозиторий содержит JavaScript-примеры многих популярных алгоритмов и структур данных.

#GitHub