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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
😁6🤝4💯2
Зачем используется метод querySelector() в JavaScript и когда его применять?

Метод querySelector() возвращает первый элемент, соответствующий указанному CSS-селектору. Это удобный способ быстро получить доступ к нужному элементу в DOM.

Пример:

const title = document.querySelector(".title");
title.textContent = "Hello, World!";


📌В этом примере querySelector() находит элемент с классом title и меняет его текст.

querySelector() удобно использовать при работе с формами, кнопками, модальными окнами и любыми элементами интерфейса. Он поддерживает все CSS-селекторы (.class, #id, tag[attr=value]) и делает код лаконичным по сравнению с устаревшими методами вроде getElementById().
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Dropdown Menu Effects — Анимированное выпадающее меню с переливающимся эффектом.

Сделано на SCSS и TypeScript


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое инкрементальная гидратация в Angular

Объясняю, как инкрементальная гидратация в Angular решает парадокс SSR: страница рендерится быстро, но клики молчат. Разбираем, как оживить интерфейс без лишней задержки и сделать его реально быстрым


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Gooey SVG Filter Button — Анимированная кнопка с эффектом при наведении.

Сделано на SVG, CSS и JavaScript


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
1
Какой тип задач в Event Loop JavaScript имеет наивысший приоритет выполнения после текущего стека вызовов?
Anonymous Quiz
17%
setTimeout
9%
setInterval
66%
Микрозадачи (например, Promise.then)
8%
requestAnimationFrame
⚙️ i18n и l10n: Почему разработчикам стоит об этом знать — и как может помочь ИИ

Пока строки в шаблоне были на английском — всё шло гладко. А потом пришёл Узбекистан. Рассказываю, как i18n и l10n становятся пожаром, если не думать о них с начала проекта


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Какой хинт устанавливает раннее соединение (DNS/TCP/TLS) без запроса ресурса?
Anonymous Quiz
25%
preload
26%
prefetch
35%
preconnect
14%
dns-prefetch
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Button with tooltip hover timing feedback — Панель плеера с подсказками при наведении.

Сделана на SVG и CSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
Зачем используется метод addEventListener() в JavaScript и когда его применять?

Метод addEventListener() позволяет навесить обработчик события на элемент, не перезаписывая уже существующие. Это гибкий способ реагировать на действия пользователя или изменения в документе.

Пример:

const button = document.querySelector("button");

button.addEventListener("click", () => {
console.log("Кнопка нажата!");
});


📌В этом примере addEventListener() добавляет обработчик клика по кнопке.

addEventListener() удобно использовать для работы с кликами, вводом текста, прокруткой, ресайзом окна и любыми другими событиями. Он поддерживает множественные обработчики, удаление через removeEventListener() и захват событий, что делает его универсальным инструментом для работы с DOM.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Signature animation — Поле для ввода подписи с интересной анимацией.

Сделана на SVG, CSS и JavaScript


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
👏2🔥1
Статический CSS отдается с Cache-Control: public, max-age=31536000, immutable. Через неделю вышло изменение. Какой подход — best practice — чтобы пользователи получили новую версию без очистки кеша у себя?
Anonymous Quiz
14%
Поменять только заголовки на сервере, URL не трогать
39%
Добавить к ссылке ?v=2, имя файла оставить прежним
14%
На время релиза отключить кеширование, затем вернуть
32%
Включить content hashing в имя файла (app.3f2a.css) и ссылаться на новый URL
⚙️ Как гуманитарий создал сайт с нуля при помощи DeepSeek. Примеры рабочих промптов

История о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
😁2
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Idea Form — Анимированная форма для ввода с появлением при нажатии.

Сделана на SCSS и TypeScript


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM