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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
В чем разница между == и === в 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
⚙️ CSS в 2025: какие фишки теперь доступны?

Краткий обзор новых возможностей CSS, которые стали поддерживаться в современных браузерах в 2024 году. Без теории — только список фич, которые стоит изучить и применять уже сейчас.

#Полезное
This media is not supported in your browser
VIEW IN TELEGRAM
Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика.
Как работает 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 делает работу с динамическими данными в разметке проще и чище!
👍2
Как работает transform: scale() в CSS?
Anonymous Quiz
14%
width и height
81%
transform: scale()
3%
position: absolute
2%
display: flex
👀4🗿3😁2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Button with tooltip hover timing feedback

Панель плеера с подсказками при наведении
😁51
This media is not supported in your browser
VIEW IN TELEGRAM
Neuro Noise (GLSL Shader)

Интерактивный фон с эффектом при перемещении курсора
👍21😁41
developer-roadmap

Зашли в тупик или нуждаетесь в совете как начать? Или запутались между фреймворками и инструментами? Тогда этот репозиторий для вас. Владелец проделал отличную работу как для новичков, так и для экспертов. Вы получите общее представление о том, где находитесь и куда вам нужно двигаться.

Цель этих дорожных карт — дать вам представление о перспективе и направить вас, в случае замешательства, куда двигаться дальше, а не призывать вас выбирать то, что модно. Вы должны понять, почему один инструмент лучше подходит для некоторых случаев, чем другой, и помнить, что модный и современный никогда не означает лучший для работы.

#GitHub
1
Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?
2