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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
⚙️ i18n и l10n: Почему разработчикам стоит об этом знать — и как может помочь ИИ

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Какой хинт устанавливает раннее соединение (DNS/TCP/TLS) без запроса ресурса?
Anonymous Quiz
25%
preload
26%
prefetch
34%
preconnect
15%
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
Статический CSS отдается с Cache-Control: public, max-age=31536000, immutable. Через неделю вышло изменение. Какой подход — best practice — чтобы пользователи получили новую версию без очистки кеша у себя?
Anonymous Quiz
13%
Поменять только заголовки на сервере, URL не трогать
39%
Добавить к ссылке ?v=2, имя файла оставить прежним
15%
На время релиза отключить кеширование, затем вернуть
33%
Включить 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
Вы на странице A. С высокой вероятностью через пару секунд пользователь перейдёт на страницу товара B. Нужно ускорить первую отрисовку B, не мешая текущему рендеру A и не ломая кеши. Что лучше сделать?
Anonymous Quiz
21%
На A поставить preload всех ресурсов B
19%
На A сразу prefetch всех ресурсов B высокой важности
43%
На A — preconnect; при намерении — точечный prefetch критичных ресурсов B с корректным
17%
Ничего не делать, HTTP/2 сам разрулит при клике
⚙️ Поиск на RxJS и Taiga UI

Разбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скелетоны и обработку ошибок, подключать новые источники без правок UI. Операторы, профит


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
В PWA нужен быстрый онлайновый старт, фоновое обновление и оффлайн-фоллбэк. Какую стратегию выбрать для HTML и статических ассетов (rev-hash в именах)?
Anonymous Quiz
39%
HTML: network-first (+fallback); ассеты: cache-first
16%
HTML: cache-only; ассеты: network-only
23%
HTML: stale-while-revalidate; ассеты: network-first
23%
HTML: cache-first; ассеты: cache-first
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Fluid Simulation — Сцена с интересной симуляцией жидкости с текстом.

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


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

Свойство dataset позволяет получать и изменять пользовательские атрибуты data-* у HTML-элементов. Это удобный способ хранить дополнительную информацию прямо в разметке, не перегружая код.

Пример:

<button id="btn" data-user-id="42" data-role="admin">Click me</button>
<script>
const btn = document.getElementById("btn");
console.log(btn.dataset.userId); // "42"
console.log(btn.dataset.role); // "admin"
</script>


📌В этом примере dataset даёт доступ к атрибутам data-user-id и data-role.

dataset удобно использовать для передачи параметров в JS без жёсткой привязки к классам или id: идентификаторы пользователей, статусы элементов, флаги состояния. Это делает код более гибким, читаемым и декларативным.
Please open Telegram to view this post
VIEW IN TELEGRAM
Настраиваете CSP. Нужно запретить любой инлайн-JS, но оставить один критичный инлайн-скрипт, который меняется на каждом ответе. Скрипты грузятся с вашего домена и CDN. Что выбрать?
Anonymous Quiz
23%
script-src 'self' cdn.example.com 'sha256-...' (фикс. хэш)
41%
script-src 'self' cdn.example.com 'nonce-<per-request>'
13%
script-src * 'strict-dynamic'
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Text Illumination — Сцена с анимированным появлением текста.

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


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
В React-списке с контролируемыми <input> можно удалять элементы из середины. Сейчас key — индекс массива. Пользователи жалуются, что текст «переезжает» в соседние строки после удаления. Что делать?
Anonymous Quiz
12%
Обернуть список во фрагмент <>...</>
79%
Давать стабильные key по id сущности и не переиспользовать ключи
0%
Сделать инпуты неконтролируемыми
9%
Добавить React.memo к элементу списка