gram news
Аватар канала Какие-то уроки [Frontend]

Какие-то уроки [Frontend]

@kakietoyroki

Фронтенд новости и полезности. А также гадости про бэкендеров (чтоб блин нахрен не расслаблялись)

2,090подписчиков

Открыть канал

Последние посты

  • Какие-то уроки [Frontend]

    23 мая, 09:38изменён

    🚀 No-Vary-Search - улучшаем кэш браузераЕсть страница товара: /product/123А пользователи из-за маркетологов приходят на неё из разных источников:/product/123?utm_source=google /product/123?utm_source=telegram /product/123?fbclid=abc /product/123?gclid=xyzДля аналитики это полезно. Но для страницы товара это ведь один и тот же HTML.🆕 И тут помогает новый HTTP header: No-Vary-Search (который работает пока что только в хроме 😁)Таким заголовком мы говорим браузеру: "Эти query-параметры не меняют ответ, их можно не учитывать при поиске в кэше."No-Vary-Search: params=("utm_source" "utm_medium" "utm_campaign" "fbclid" "gclid")
  • Какие-то уроки [Frontend]

    22 мая, 08:06

    💅 Начался опрос State of CSS 2026Если скучно, то можете на вопросики поотвечать, а заодно, пока заполняешь анкету, 100% наткнешься на новые для себя свойства и селекторы, о которых даже не слышал. Проведешь время с пользой 🙃Источник: https://survey.devographics.com/en-US/survey/state-of-css/2026#новости
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    21 мая, 22:51

    🤨 Теперь NextJSЧота много последнее время взламывать начали. Новость старая, но мб вы пропустили (как пропустил я 🥲)В NextJS обнаружили серьёзную уязвимость за всю его историюЗатронуты версии: 13.4.13+, 14.x, 15.x и 16.0.0–16.2.4 Злоумышленники могут получить доступ к вашим внутренним сервисам, админкам, api ключам‼️Обновитесь до 15.5.18 или 16.2.6Источник: https://github.com/vercel/next.js/security/advisories/GHSA-c4j6-fc7j-m34r#новости
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    14 мая, 13:18изменён

    Если вдруг используете приложение из 3х букв и надоело его включать/выключать, то горячо рекомендую включить роутинг1 кнопка и проблема решена (выбирайте пункт "Быстрая установка" и не заморачивайтесь)https://github.com/hydraponique/roscomvpn-routing
    GitHubGitHub - hydraponique/roscomvpn-routing: Custom routing rules for Happ, INCY, Mihomo with DeeplinkCustom routing rules for Happ, INCY, Mihomo with Deeplink - hydraponique/roscomvpn-routing
  • Какие-то уроки [Frontend]

    13 мая, 14:01изменён

    🫠 TanStack взломалиВ npm-пакеты @tanstack/ попал вредоносный код нацеленный на кражу учётных данных и секретов из CI/CD-сред Под ударом было 84 версии в 42 пакетах (@tanstack/react-router, @tanstack/router-, итд)Вредоносный код можно было словить при помощи обычного npm iИ скрипт мог попытаться украсть секреты из окружения. Что он искал: • GitHub токены • npm токены • AWS ключи • Vault токены • Kubernetes service account • CI/CD secrets • .env и другие чувствительные данныеЕщё хуже: он мог закрепляться в проекте через: • .claude/settings.json • .claude/router_runtime.js • .vscode/tasks.json
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    17 апр., 13:28

    ‼️ 3G в Chrome ненастоящийChrome плохо эмулирует медленную сеть. Из-за этого значения в DevTools могут быть хуже, чем на реальном девайсе с плохой сетью.Почему? Потому что реальный интернет работает через пакеты, а Chrome - упрощает всё до запросов.В жизни: • данные разбиваются на маленькие куски (пакеты) • сервер может отправлять их с приоритетом (важное -> быстрее) • часть пакетов может теряться и пересылаться заново • есть задержки: DNS, TCP, TLS и т.д.В DevTools: • скорость просто режется и делится между запросами • нет нормальной симуляции потерь пакетов • многие сетевые задержки не учитываются👉 В итоге получается не "медленный интернет", а его грубая имитация
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    2 апр., 11:35

    🙈 Axios взломалиВ npm-пакет Axios попал вредоносный код - киберкотлеты взломали личный профиль одного из мейнтейнеров этого проекта и опубликовали от его имени вредоносные версии этой библиотеки.Заражённые версии: • 1.14.1 • 0.30.4Внутри был не сам код axios, а зависимость plain-crypto-js, которая через postinstall ставила троян.⏱️ Они прожили всего ~3 часа, но этого хватило, чтобы попасть в CI/CD и прод. Если ты сделал npm install в 00:21 - 03:15 по UTC, то:• проверить lockfile на axios@1.14.1 или 0.30.4 • удалить node_modules + lockfile и пересобрать проект • срочно отозвать ВСЕ секреты (npm, GitHub, AWS, env и т.д.) • проверить CI/CD (если там был install в это время) • зафиксировать версии на безопасные (1.14.0 / 0.30.3)Источник: https://www.cnews.ru/news/top/2026-03-31_milliony_programmistov_v
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    24 мар., 17:56

    https://www.web-rewind.com/Очень залипательно
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    21 мар., 14:45

    Отмечаю выпуск курса ))))
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
    2,6604472Открыть в Telegram
  • Какие-то уроки [Frontend]

    21 мар., 12:58

    🎉 Друзья, привет, я тут с анонсомОчень много людей мне пишет про курс по NextJS, поэтому я решил опубликовать его в общий доступЕсли что, то он написан пока что только наполовину, но это уже около 10 часов видео контента и 40 вопросовКурс полностью практический, то есть мы не затрагиваем сухую документацию, а пишем реальное приложение: клон YouTube. На скрине как раз то, как сейчас выглядит проектВсе 10 часов выложил в бесплатный доступ. Последующие темы уже будут платные, но из-за того, что он не дописан, я сделал большую скидку. Можно купить сейчас, чтоб в будущем заплатить меньше :)Чуть позже выложу весь этот курс еще и на ютубСам курс: https://stepik.org/a/252262
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
    2,5204121Открыть в Telegram
  • Какие-то уроки [Frontend]

    17 мар., 14:05изменён

    🥰 Vite 8У Vite вышла новая мажорная версияИз важного: 1. Новый бандлер Rolldown (Rust) - теперь единый пайплайн вместо Rollup + esbuild 2. Сильный буст скорости: до ~x10-30 на прод-сборке 3. Плагин для DevTools: https://devtools.vite.dev/Источник: https://vite.dev/blog/announcing-vite8#новости
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    11 мар., 19:51

    🍭 Popover API или Dialog API?Недавно же поповеры и диалоги вышли. А в чем разница? Какой и когда использовать? Нашел тут статью, где можно об этой почитатьКоротко: • Popover API - упрощает создание всплывающих элементов • Dialog API - лучше подходит для модальных оконP.S. В комментарии скинул сжатый перевод от ГПТ этой статьи на русском (хз насколько вам зайдет нейроперевод, но выглядит хорошо)Источник: https://css-tricks.com/popover-api-or-dialog-api-which-to-choose#html
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    10 мар., 18:29

    Телеграм - это единственная соц. сеть, где каждый новый пост не прибавляет подписчиков, а уменьшает их. ПИЗДЕЦ )))))))
    2,1303695211Открыть в Telegram
  • Какие-то уроки [Frontend]

    10 мар., 18:27

    и сразу минус 2 потпищека..... а вы говорите, что роблокс это круто...................
    2,170311Открыть в Telegram
  • Какие-то уроки [Frontend]

    10 мар., 18:24

    Ухожу из фронтенда!!!!!Теперь буду снимать обзоры на домофоны и поезда Еще буду фури-фанфики озвучивать для анимешников И скорее всего делать прохождение карт в роблоксе....А вы и дальше свои эти кнопки сраные на 3 пикселя влево двигайте
    2,1902987421Открыть в Telegram
  • Какие-то уроки [Frontend]

    10 мар., 08:02

    🆕 HTML Sanitizer API ⛔️Нам тут под шумок новую апишку завезли. Пока что только в Firefox работает, но мне уже нравится, что такое появилось и когда-нибудь будет доступно обычным работягам.Идея очень простая: удалять потенциальный XSS, перед вставкой в DOM.Настраиваем санитайзер, указываем какие тэги или атрибуты доступны:const sanitizer = new Sanitizer({ elements: ["p", "div"], attributes: ["onclick"], });Теперь находим нужный HTML элемент:const el = document.getElementById("target"); const myHTML = '<script>alert(1)</script>'И вставляем myHTML внутрь el, предварительно обработав санитайзером:
  • Какие-то уроки [Frontend]

    4 мар., 15:19

    Коты тоже залипли 😁
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
  • Какие-то уроки [Frontend]

    4 мар., 15:17

    🫨 HapticНашел прикольную и залипательную библиотеку web-hapticsЭто маленькая JS-библиотека, которая имитирует чувство прикосновения через вибрацию и звукТо есть вместо navigator.vibrate([10, 20, 10]); можно использовать haptics.success()У библиотеки уже куча готовых паттернов, а еще очень залипательный сайт Рекомендую зайти и потыкать: https://haptics.lochie.me/Работает с React, Vue, Svelte:import { useWebHaptics } from "web-haptics/react";const { trigger } = useWebHaptics();<button onClick={() => trigger()}>Tap me</button>Источник: https://x.com/lochieaxon/status/2028514678784291175
    2,360видео2031Открыть в Telegram
  • Какие-то уроки [Frontend]

    3 мар., 07:29

    ⚙️ <Img decoding="async" />Важный атрибут у тэга img, который стоит знать - decodingКогда браузер встречает:<img src="photo.jpg" />Происходит 3 этапа: • Загрузка файла (network) • Декодирование (JPEG/PNG -> пиксели в памяти) • Отрисовка на экран⚠️ Важно: декодирование происходит в отдельном потоке и само по себе не блокирует основной поток.Но! Перед тем как браузер нарисует следующий кадр страницы, он может решить: 1. подождать, пока изображение будет готово 2. не ждать и показать всё остальное сразу
    Иллюстрация к посту канала Какие-то уроки [Frontend]Иллюстрация к посту канала Какие-то уроки [Frontend]
    1,7402853Открыть в Telegram
  • Какие-то уроки [Frontend]

    2 мар., 10:30изменён

    🤨 Оператор --> в JSВ JS есть скрытый оператор длинной стрелки, который уже очень давно поддерживается и упрощает работу.Посмотрите на этот пример кода:let len = 3;while (len --> 0) { console.log(len) // 2, 1, 0 }Знаете ли вы как работает оператор -->? На самом деле, это ржака и такого оператора нет)Тут просто комбинация двух операторов:while ( (len--) > 0 )Надеюсь, что вы поверили )))
    1,5005431Открыть в Telegram