Веб-страница
24K subscribers
1.76K photos
535 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Supercookie: Никто не уйдёт незамеченным

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

Использовать такой метод в своих проектах кажется довольно сомнительным занятием. Но точно стоит знать о нём, чтобы иметь возможность предотвратить такое отслеживание. Поэтому рекомендую подробнее познакомиться с библиотекой в образовательных целях.

Ссылка на репозиторий: github.com/jonasstrehle/supercookie/

Кстати, в репозитории также лежат две статьи, которыми вдохновлялся автор проекта. Их тоже стоит почитать.

#безопасность #cookie
🔥32👍1
sqlmap — удобная защита от инъекций

Этот инструмент для тестирования на проникновение автоматизирует процесс обнаружения SQL-инъекций и захвата серверов баз данных.

Он поставляется с множеством нишевых функций. В том числе снятием отпечатков с БД, выполнением команд через внеполосные соединения и так далее.

Утилита бесплатная. Опробовать можно по ссылке.

#библиотека
👍4🔥4
Для микрофронтендов появился свой аналог OpenAPI

OpenMicrofrontends — это новая open source-библиотека, которая упрощает создание и работу с микрофронтендами. По сути, она просто предоставляет вам удобную спецификацию, отделяя процесс разработки от интеграции элемента в приложение. Она работает с любым фреймворком и даже позволяет использовать один микрофронтенд в нескольких проектах с разной архитектурой.

Спецификация включает в себя:

— основные метаданные: название, заголовок, описание;
— ресурсы (js, css) и способы их загрузки;
— схему объекта config, которую можно указать при запуске микрофронтенда;
— схему отправки и получения сообщений микрофронтендом;
— прокси-серверы API, если они необходимы;
— советы по безопасности.

Почитать подробнее можно на странице проекта: https://open-microfrontends.org/

#opensource
5
Теперь мы знаем кому будет принадлежать самый горячий и неудобный котёл
🤣50🤯8
Второе пришествие Shai Hulud: 132 млн загрузок в месяц, украденные токены и стёртые домашние папки

Атака продолжается!

24 ноября хакеры заразили 492 npm-пакета червём Shai Hulud, которые скачивают 132+ млн раз в месяц. Под ударом — Postman, PostHog, AsyncAPI, Zapier и ENS.

Как работает:
Устанавливаете пакет → вредонос запускается до завершения установки → получает доступ к вашей среде разработки → крадёт GitHub/npm-ключи, токены облаков, пароли и API-ключи → складывает всё в случайный GitHub-репозиторий → заражает до 100 других пакетов.

Самое опасное: если не удаётся авторизоваться в GitHub или npm, червь стирает ВСЕ файлы в вашей домашней директории.

Читайте полную новость: список всех заражённых пакетов, технические детали червя и полный чек-лист защиты.

@your_tech
🤯6🔥4
XSS-уязвимость в Esbuild пережила 5 миллиардов загрузок и обошла HTML-очистку

Уязвимость появилась в 2022 году вместе с функцией escapeForHTML, которая должна была экранировать HTML-код. И она экранировала... Но не всё. Эта функция не обрабатывала двойные кавычки ("). Вместо неё необходимо было использовать escapeForAttribute. Но в код закралась ошибка, поэтому всё перепуталось.

В теории это позволяло злоумышленнику создать папку с особым именем, содержащим вредоносный HTML-код. Но не всё так ужасно. Ведь если у злоумышленника уже появилась возможность вносить изменения в файловую систему, то проблема с созданной папкой у вас будет далеко не на первом месте.

Но ошибка, конечно, нелепая. Поэтому рекомендую почитать о ней подробнее.
🤔4
This is JavaScript: методы объектов и контекст «this»

Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.

#javascript #основы
5🫡2
This media is not supported in your browser
VIEW IN TELEGRAM
Это заслуживает, как минимум, раннего ухода домой
21🤣14
Производительность или качество?

Попалось обсуждение на Reddit, которое показалось интересным. Суть в том, что у автора на работе менеджеры хотят увеличить производительность в три раза с помощью ИИ, но фронтенд в таком случае превращается в спаггети-код. С одной стороны время разработки сокращается, что важно, если сроки сжатые. С другой стороны, общая кодовая база, структура кода и его качество становятся хуже и менее однородными

Что думаете по этому поводу? Как у вас в команде относятся к ИИ? А главное, как вы находите баланс между скоростью и качеством кодовой базы?
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Полезная функция в Chrome Dev Tools

Не все знают, но в инструментах разработчика есть раздел CSS Overview. Он позволяет вам в одном месте и в удобном виде посмотреть какие стили используются на сайте. Есть отдельный раздел со шрифтами, цветами, медиазапросами. Отдельного внимания стоит раздел, в котором показаны не используемые CSS-правила.

Инструкция по входу в раздел на видео.

#css #chrome
🔥17👍9
Создание и деплой полнофункционального приложения для обмена сообщениями в чате

В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.

Все подробности в видео: https://youtu.be/MJzbJQLGehs

#фронтенд #бэкенд #видео
🤔2
Нашёл для вас легковесный экстрактор схем страниц

schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.

Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.

#инструменты #библиотека
👍4🔥3
Локальный DNS-сервер для обеспечения конфиденциальности

DNSnitch — это локальный DNS-сервер, ориентированный на конфиденциальность, который позволяет вам полностью контролировать свой сетевой трафик. В отличие от пассивных чёрных списков, DNSnitch работает по принципу «запрета по умолчанию»: каждый неизвестный домен блокируется по умолчанию, пока вы не авторизуете его с помощью панели управления в реальном времени.

Инструмент имеет 4 уровня разрешений, которые позволяют точно контролировать кому, когда и как можно получить доступ.

Подробнее почитать можно здесь.

#библиотека #dns
6🔥3
Разбираемся, как работает цикл событий в JS

Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.

Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.

Пробуем тут.

#javascript
8🔥2🤩2
Если бы финтех нужно было описать одной табличкой
😁18👎3👍2🤣2🗿2
Как писать на Angular грамотно и не совершать банальных ошибок

Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.

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

#angular
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Полезные материалы по веб-разработке

Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.

#подборка
4
Forwarded from Типичный программист
🗓 Адвент-календари для айтишников 2025

Собрали для вас подборку новогодних адвент-календарей, которые помогут интересно скрасить декабрь. Здесь задачи, статьи, видео и немного HTML-ужасов.

➡️ Фронтенд

AdventJS. Классический адвент с задачами по JavaScript и TypeScript, живёт с 2015 года. В декабре вас ждут 24 задачи — по одной каждый день.

PerfPlanet Performance Calendar. Ежегодный адвент про web performance. Внутри свежие статьи, практики оптимизации и кейсы от инженеров крупных компаний.

HTMHell Advent Calendar. Адвент-календарь из HTML-антипаттернов. Каждый день вас ждёт забавный, но поучительный пример того, как верстать не нужно (и чем это заменить).

CSS Advent Calendar. Короткие ежедневные сниппеты про современный CSS. Хороший способ подтянуть свежие фичи и приёмы без длинных статей.

Accessibility Advent. Адвент, посвящённый доступности интерфейсов. Практики, паттерны и методы, которые помогают сделать продукты удобнее для разных пользователей.

➡️ Языки программирования

CS Advent (C#). Каждый день публикуют по два материала про разработку на C#. Формат — статьи от практиков, фокус на реальных задачах и инструментах.

Java Advent. Адвент для всех, кто шарит за Java.

Raku Advent Calendar. Raku — это тот самый бывший Perl 6. В календаре статьи про приложения, полезные модули, техники программирования, контейнеры и даже гайды по миграции с Perl.

➡️ DevOps

Knowit Julekalender. Адвент от норвежской компании Knowit для всех, кто любит программировать. За каждой «дверцей» спрятана задачка, на которую нужно ответить текстом или числом; уровень сложности плавает.

Advent of Sysadmin. 12-дневный адвент с задачами по Linux и DevOps разной сложности (с 1 по 12 декабря).

➡️ Для всех

Advent of Agents (Google). Бесплатный адвент от Google для тех, кто хочет «подружиться» с ИИ-агентами. 25 дней коротких уроков, материалы под рукой и копируемый код — от быстрого старта до оркестрации мультиагентных систем.

Advent of Code 2025. Культовый адвент для тех, кто любит программные головоломки. Каждый день — новая задачка, где важны и алгоритмы, и аккуратное чтение условия.

Bekk Christmas. Контентный адвент от команды Bekk. Каждый день до 25 декабря выходят новые статьи, подкасты, туториалы, чек-листы и видео от разработчиков, дизайнеров, менеджеров и консалтеров.

Festive Tech Calendar. Месячный комьюнити-адвент с ежедневными видео, вебинарами и воркшопами по техтемам (Azure, .NET, AI, security).

А если знаете ещё какие-то крутые календари, то присылайте в комментарии. Добавим их в подборку!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15
Самое нужное для фронтендера в 2025: честный взгляд изнутри индустрии

2025 год стал переломным — требования к специалистам растут, стек технологий стремительно обновляется, появляются десятки новых инструментов, а часть задач на себя забрал ИИ. Что сегодня действительно важно для фронтендера, а какие навыки можно отложить?

В статье вы узнаете, какие технологии и фреймворки стали обязательными для фронтенд-разработки, как нейронки меняют рабочий процесс разработчика и почему понимание архитектурных принципов (SSR, SSG, ISR, edge-функции) стало необходимым. Материал будет полезен как действующим фронтенд-специалистам, так и тем, кто только планирует войти в эту сферу.

#фронтенд
👍3🗿31
«Реддиторы, говорящие на нескольких языках, на каком вы говорите во снах?

— JavaScript
— Он сказал во снах, а не в кошмарах»
🤣35
Срочно обновляем React до версий 19.0.1, 19.1.2 или 19.2.1

29 ноября исследователь Лахлан Дэвидсон обнаружил RCE‑уязвимость в React Server Components (RSC), зарегистрированную как CVE‑2025‑55182 и неформально названную React2Shell.

Уязвимость позволяет удалённо и без аутентификации выполнить произвольный код на сервере через специально сформированный HTTP‑запрос к endpoint’ам Server Actions / React Server Functions.

Проблема затрагивает приложения на React 19, использующие React Server Components и связанные пакеты протокола Flight (например, react‑server‑dom‑webpack и аналоги). Под удар попадают популярные фреймворки и тулчейны, использующие RSC: Next.js (App Router), React Router, Waku, Parcel RSC, Vite RSC‑плагины, RedwoodJS и прочие интеграции.

#новости #react
🤣53🤔3