📝 Рассказ фронтендера
رفتن به کانال در Telegram
Пишу про frontend (JS/TS/React), задачки с собесов с разбором и теория, советую книжки и многое другое 🤭 Contact: @atrapeznikov
نمایش بیشتر1 838
مشترکین
-124 ساعت
-97 روز
-3130 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '260
در 0 کانال‌ها
سپتامبر '260
در 0 کانال‌ها
Get PRO
اوت '26
+7
در 1 کانال‌ها
Get PRO
ژوئیه '26
+7
در 0 کانال‌ها
Get PRO
ژوئن '26
+12
در 0 کانال‌ها
Get PRO
مه '26
+25
در 1 کانال‌ها
Get PRO
آوریل '26
+29
در 0 کانال‌ها
Get PRO
مارس '26
+14
در 0 کانال‌ها
Get PRO
فوریه '26
+128
در 0 کانال‌ها
Get PRO
ژانویه '26
+16
در 0 کانال‌ها
Get PRO
دسامبر '25
+25
در 0 کانال‌ها
Get PRO
نوامبر '25
+18
در 0 کانال‌ها
Get PRO
اکتبر '25
+39
در 0 کانال‌ها
Get PRO
سپتامبر '25
+52
در 0 کانال‌ها
Get PRO
اوت '25
+39
در 1 کانال‌ها
Get PRO
ژوئیه '25
+34
در 0 کانال‌ها
Get PRO
ژوئن '25
+192
در 0 کانال‌ها
Get PRO
مه '25
+33
در 0 کانال‌ها
Get PRO
آوریل '25
+55
در 0 کانال‌ها
Get PRO
مارس '25
+76
در 0 کانال‌ها
Get PRO
فوریه '25
+126
در 4 کانال‌ها
Get PRO
ژانویه '25
+68
در 0 کانال‌ها
Get PRO
دسامبر '24
+57
در 0 کانال‌ها
Get PRO
نوامبر '24
+65
در 0 کانال‌ها
Get PRO
اکتبر '24
+82
در 0 کانال‌ها
Get PRO
سپتامبر '24
+203
در 0 کانال‌ها
Get PRO
اوت '24
+215
در 2 کانال‌ها
Get PRO
ژوئیه '24
+85
در 0 کانال‌ها
Get PRO
ژوئن '24
+129
در 0 کانال‌ها
Get PRO
مه '24
+627
در 0 کانال‌ها
Get PRO
آوریل '24
+46
در 2 کانال‌ها
Get PRO
مارس '24
+41
در 1 کانال‌ها
Get PRO
فوریه '24
+547
در 1 کانال‌ها
پست‌های کانال
| 2 |  Уууу валит | 810 |
| 3 | ♊️Gemini CLI и Subagents
На примере простого проекта с нуля разберем, как настроить и связать между собой субагентов для решения сложных задач.
Читать тут | 657 |
| 4 | 🌐 Превращаем любой сайт в приложение с помощью Pake.
Из интересного: тут не используются Electron или браузеры, а какие-то нативные библиотеки, и написано это всё на Rust. В итоге объем этого приложения может быть меньше 5 МБ, у electron минимум 100 МБ...
# Install Pake CLI
pnpm install -g pake-cli
# Basic usage - automatically fetches website icon
pake https://github.com --name GitHub
# Advanced usage with custom options
pake https://weekly.tw93.fun --name Weekly --icon https://cdn.tw93.fun/pake/weekly.icns --width 1200 --height 800 --hide-title-bar | 694 |
| 5 |  +1Опять тут вышла самая умная. лучшая модель - Qwen 3.7-Max.
И результаты тестов интересные 😁 | 581 |
| 6 | ![Когда ты null null, а хотел быть [object Object] 🥲](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAZACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDS+xW3/PBPyo+xW3/PBPyqC3imWdWfO0Zzz7VbAAxy360AR/Yrb/ngn5Un2O34/wBHT8qsUUAVks7cqCYEB+lFJMkjSErnH1orN1GtLATjrTsjPWmUVoA/cPWjcPWkSnUAMO7PDLj3FFPooA//2Q==){kind=small} Когда ты null null, а хотел быть [object Object] 🥲 | 619 |
| 7 | 💦Жидкое стекло в вебе: canvas, WebGPU и без CSS blur
Интересная либа liquid-dom - считывает HTML-структуру страницы, переносит её в Canvas и использует WebGPU/WebGL для рендеринга физически корректных преломлений, бликов и капель в реальном времени.
🌿Github https://github.com/AndrewPrifer/liquid-dom
🌿Демка https://liquid-dom-showcase.vercel.app/ | 713 |
| 8 |  Не забываем 🗒️ | 681 |
| 9 | 😱 Вчера злоумышленник опубликовал 84 вредоносные версии в 42 пакетах @tanstack/*, которые были доступны около 20 минут, пока они не были обнаружены.
Хорошая новость: атаку выявили быстро, пакеты были помечены как устаревшие.
Плохая новость: если вы запускали npm install вчера и у вас есть в проекте @tanstack/* - у вас возможно есть эти вредоносные пакеты...
🥲 А как так получилось ???
Атака строилась на цепочке из трёх уязвимостей. Вредоносный PR использовал pull_request_target в GitHub Actions, чтобы отравить общий pnpm-кэш кастомным payload.
Когда в следующий раз запускался релиз, он восстановил этот заражённый кэш - и код злоумышленника извлёк OIDC-токен прямо из памяти раннера, чтобы опубликовать пакет в npm, не прикоснувшись ни к одному сохранённому credential. Для npm заражённая версия выглядела на 100% легитимной.
Что делал вредоносный payload:
🙈 Сбор учётных данных - AWS, GCP, Kubernetes, Vault, GitHub-токены, SSH-ключи, ~/.npmrc. Всё, до чего можно дотянуться с заражённого хоста
🙊Самораспространяющийся червь - запрашивал реестр npm в поисках других пакетов, которые поддерживает жертва, и заражал их тоже.
🙉 «Мёртвая рука» — скрипт ~/.local/bin/gh-token-monitor.sh устанавливался как systemd-сервис (Linux) или LaunchAgent (macOS) и каждые 60 секунд проверял api.github.com/user с украденным токеном. Если пользователь отзывал токен - срабатывал rm -rf ~/.
Вот такие новости.
https://github.com/TanStack/router/issues/7383 | 1 921 |
| 10 | 🤖Gemini CLI, как пользоваться, какие есть функции и пр.
https://frontendtales.ru/ru/blog/gemini-cli-part-one | 723 |
| 11 |  Вроде там и код на русском пишут.... | 936 |
| 12 | 🖥 Интересная альтернатива Firebase и Supabase - PocketBase
Есть даже SDK для JS.
Но есть нюанс 🤔
Please keep in mind that PocketBase is still under active development and full backward compatibility is not guaranteed before reaching v1.0.0. PocketBase is NOT recommended for production critical applications yet, unless you are fine with reading the changelog and applying some manual migration steps from time to time.
@frontend_tales | 899 |
| 13 | DOOM в терминале через curl 😐
https://github.com/xsawyerx/curl-doom | 918 |
| 14 | 👩💻 ➕ 👩💻 🟰❤️
https://frontendtales.ru/ru/blog/react-and-typescript | 888 |
| 15 |  Интересненько 🌚 | 971 |
| 16 |  📹Атрибут poster для тега <video>
Атрибут poster в HTML-теге <video> задаёт изображение-заставку, которое показывается до начала воспроизведения видео. Это как обложка у книги - первое, что видит пользователь.
<video src="movie.mp4" poster="preview.jpg" controls>
Ваш браузер не поддерживает видео.
</video>
❗Что важно учитывать
☑️Размер и соотношение сторон. Лучше всего, когда размер постера совпадает с размерами видео - иначе браузер растянет или сожмёт картинку, и может появиться некрасивая рамка. Например, для видео 1920×1080 используйте постер такого же разрешения или пропорций 16:9.
☑️Вес файла. Постер загружается раньше видео, поэтому он должен быть лёгким. Имеет смысл сжать JPG или использовать WebP - пользователь увидит заставку быстрее.
☑️Отсутствие постера. Если poster не указан, браузер покажет либо пустой чёрный прямоугольник, либо первый кадр видео (поведение зависит от браузера и атрибута preload).
Практический пример:
<video
width="800"
height="450"
poster="/images/preview.webp"
controls
preload="metadata">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Здесь preload="metadata" в паре с poster - хорошая комбинация: браузер не качает само видео заранее, но сразу показывает красивую заставку. | 813 |
| 17 | 📝 Форматируем списки
Intl.ListFormat - это встроенный JavaScript API для форматирования списков на естественном языке. Вместо ручной склейки строк через запятые и союзы, он делает это автоматически, учитывая правила конкретного языка.
Основной синтаксис:
new Intl.ListFormat(locale, options)
options принимает два ключевых параметра:
🟠type — тип списка: "conjunction" (и), "disjunction" (или), "unit" (просто перечисление)
🟠style — стиль: "long", "short", "narrow"
Примеры:
const items = ['Яблоко', 'Банан', 'Вишня'];
// Союз «и» (conjunction) — по умолчанию
const conjRu = new Intl.ListFormat('ru', { type: 'conjunction' });
conjRu.format(items);
// → "Яблоко, Банан и Вишня"
// Союз «или» (disjunction)
const disjRu = new Intl.ListFormat('ru', { type: 'disjunction' });
disjRu.format(items);
// → "Яблоко, Банан или Вишня"
// Простое перечисление (unit)
const unitRu = new Intl.ListFormat('ru', { type: 'unit', style: 'narrow' });
unitRu.format(items);
// → "Яблоко Банан Вишня"
// Английский для сравнения
const conjEn = new Intl.ListFormat('en', { type: 'conjunction' });
conjEn.format(['Apple', 'Banana', 'Cherry']);
// → "Apple, Banana, and Cherry"
Метод formatToParts - возвращает массив объектов, если нужен контроль над каждой частью:
const fmt = new Intl.ListFormat('ru', { type: 'conjunction' });
fmt.formatToParts(['Кот', 'Пёс', 'Хомяк']);
// → [
// { type: 'element', value: 'Кот' },
// { type: 'literal', value: ', ' },
// { type: 'element', value: 'Пёс' },
// { type: 'literal', value: ' и ' },
// { type: 'element', value: 'Хомяк' }
// ]
Это удобно, например, когда нужно обернуть каждый элемент в <span> с отдельным стилем.
🔵Практический кейс - вывод имён авторов:
function formatAuthors(authors, locale = 'ru') {
if (authors.length === 0) return 'Автор неизвестен';
return new Intl.ListFormat(locale, {
style: 'long',
type: 'conjunction',
}).format(authors);
}
formatAuthors(['Толстой', 'Достоевский']);
// → "Толстой и Достоевский"
formatAuthors(['Толстой', 'Достоевский', 'Чехов']);
// → "Толстой, Достоевский и Чехов" | 666 |
| 18 | CSS-библиотека, которая превращает интерфейс в 8-битную игру 😈
https://nostalgic-css.github.io/NES.css/ | 645 |
| 19 |  🔠🔠🔠 Новый раздел в Roadmap'е - инструменты сборки.
Всё, что нужно фронтендеру, чтобы разобраться в сборке приложений: от базовых концепций до популярных инструментов.
➡️ Переходим https://frontendtales.ru/ru/roadmap | 1 015 |
| 20 | 🈵🈹 Регулярки в мультиязычных приложениях
Если вам нужно провалидировать имя при помощи регулярки, будьте аккуратны: в имени могут быть специфичные символы. 😁
Например, такая регулярка /^[a-zа-яё]+$/i - вроде норм, но есть нюанс. Пользователи с именем René или Bożena не пройдут. Изменим регулярку /^\w+$/u - тоже ошибка. В некоторых языках это пройдет, но вот в JavaScript нет - \w строго привязан к латинице ASCII ([a-zA-Z0-9_]) даже с флагом u. Эта регулярка не пропустит кириллицу или арабскую вязь, зато пропустит цифры и нижнее подчёркивание. Для React-приложений с формами это не подходит 👎
🟠/^\p{L}+$/u - разрешает только буквы во всех языках. Флаг u включает поддержку Unicode, а \p{L} (Letter) означает любую букву любого алфавита в мире.
Люди часто имеют двойные имена или именные частицы (Anna-Maria, d'Artagnan, Mary Jane). Строгая регулярка выше такие имена не пропустит. Для продакшена лучше использовать расширенный вариант:
/^[\p{L}\s'-]+$/u - пропускает буквы любых языков, а также пробелы, дефисы и апострофы.
🧑💻 Пример функции
export const isValidName = (name) => {
// Используем расширенный вариант для реальной жизни
const nameRegex = /^[\p{L}\s'-]+$/u;
return nameRegex.test(name);
}; | 1 098 |
