Создание и деплой полнофункционального приложения для обмена сообщениями в чате
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео: https://youtu.be/MJzbJQLGehs
#фронтенд #бэкенд #видео
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео: https://youtu.be/MJzbJQLGehs
#фронтенд #бэкенд #видео
YouTube
Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
With Direct and Group Chats, emojis & Reactions, Built-in Gif support, the ability to edit & delete messages, specialized commands, and much more, this fully responsive Medical Pager is the best Chat App that you can currently find on YouTube.
You'll also…
You'll also…
🤔2
Нашёл для вас легковесный экстрактор схем страниц
schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.
Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.
#инструменты #библиотека
schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.
Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.
#инструменты #библиотека
GitHub
GitHub - ShoryaDs7/schema-extractor: Lightweight tool to convert raw HTML into a machine-readable JSON schema: page type, product…
Lightweight tool to convert raw HTML into a machine-readable JSON schema: page type, product cards, buttons, forms, links. - ShoryaDs7/schema-extractor
👍4🔥3
Локальный DNS-сервер для обеспечения конфиденциальности
DNSnitch — это локальный DNS-сервер, ориентированный на конфиденциальность, который позволяет вам полностью контролировать свой сетевой трафик. В отличие от пассивных чёрных списков, DNSnitch работает по принципу «запрета по умолчанию»: каждый неизвестный домен блокируется по умолчанию, пока вы не авторизуете его с помощью панели управления в реальном времени.
Инструмент имеет 4 уровня разрешений, которые позволяют точно контролировать кому, когда и как можно получить доступ.
Подробнее почитать можно здесь.
#библиотека #dns
DNSnitch — это локальный DNS-сервер, ориентированный на конфиденциальность, который позволяет вам полностью контролировать свой сетевой трафик. В отличие от пассивных чёрных списков, DNSnitch работает по принципу «запрета по умолчанию»: каждый неизвестный домен блокируется по умолчанию, пока вы не авторизуете его с помощью панели управления в реальном времени.
Инструмент имеет 4 уровня разрешений, которые позволяют точно контролировать кому, когда и как можно получить доступ.
Подробнее почитать можно здесь.
#библиотека #dns
❤6🔥3
Forwarded from Точка входа в программирование
Разбираемся, как работает цикл событий в JS
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.
Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.
Пробуем тут.
#javascript
❤8🔥2🤩2
Как писать на Angular грамотно и не совершать банальных ошибок
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. Поэтому многие продолжают писать приложения по инерции, используя паттерны, которые выучили на заре второй версии. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками.
В этой статье речь пойдёт не о банальных ошибках синтаксиса, о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые кочуют из проекта в проект.
#angular
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Полезные материалы по веб-разработке
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
❤4
Forwarded from Типичный программист
Собрали для вас подборку новогодних адвент-календарей, которые помогут интересно скрасить декабрь. Здесь задачи, статьи, видео и немного 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.
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-функции) стало необходимым. Материал будет полезен как действующим фронтенд-специалистам, так и тем, кто только планирует войти в эту сферу.
#фронтенд
2025 год стал переломным — требования к специалистам растут, стек технологий стремительно обновляется, появляются десятки новых инструментов, а часть задач на себя забрал ИИ. Что сегодня действительно важно для фронтендера, а какие навыки можно отложить?
В статье вы узнаете, какие технологии и фреймворки стали обязательными для фронтенд-разработки, как нейронки меняют рабочий процесс разработчика и почему понимание архитектурных принципов (SSR, SSG, ISR, edge-функции) стало необходимым. Материал будет полезен как действующим фронтенд-специалистам, так и тем, кто только планирует войти в эту сферу.
#фронтенд
👍3🗿3❤1
Срочно обновляем 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
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
react.dev
Critical Security Vulnerability in React Server Components – React
The library for web and native user interfaces
🤣5❤3🤔3
Какой возможностью JS вы никогда не пользуетесь, но хотели бы?
В JavaScript много различных функций, которые вы по тем или иным причинам избегаете. Например, функции-генераторы, прокси и так далее.
Пишите в комментариях о каких функциях вы знаете, но не понимаете, где применить или не решаетесь внедрять.
#обсуждение
В JavaScript много различных функций, которые вы по тем или иным причинам избегаете. Например, функции-генераторы, прокси и так далее.
Пишите в комментариях о каких функциях вы знаете, но не понимаете, где применить или не решаетесь внедрять.
#обсуждение
🤔2
24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое
На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.
На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ
#css
На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.
На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ
#css
❤9
Forwarded from Типичный программист
Bun войдёт в состав Antropic
Американский ИИ-гигант Anthropic (создатели Claude) купил Bun. Современный аналог Node.js и Deno будет интегрирован в Claude Code. Стоимость сделки пока не раскрывается.
Но не стоит переживать, что теперь эта булочка не для вас. Bun останется бесплатным open-source проектом, а команда продолжит развитие среды.
#antropic #bun #новости
Американский ИИ-гигант Anthropic (создатели Claude) купил Bun. Современный аналог Node.js и Deno будет интегрирован в Claude Code. Стоимость сделки пока не раскрывается.
Но не стоит переживать, что теперь эта булочка не для вас. Bun останется бесплатным open-source проектом, а команда продолжит развитие среды.
#antropic #bun #новости
❤3🔥3👍1
Веб-страница
«Жидкое стекло» в вебе Новый дизайн фирменных ОС от Apple наделал шуму и постепенно начинает проникать в различные элементы дизайна сайтов и приложений. В этой статье показано, как легко повторить этот эффект с помощью возможностей как нативного JS и CSS…
Мы уже говорили о Liquid Glass в вебе. Но оказалось, что примеры в прошлой публикации работали далеко не у всех.
Поэтому нашёл ещё один рабочий вариант с инструкцией по воспроизведению у себя в проекте. Так что можете брать готовый код и повторять.
Все подробности по ссылке: https://habr.com/ru/articles/974058/
#liquidglass #ui #фронтенд
Поэтому нашёл ещё один рабочий вариант с инструкцией по воспроизведению у себя в проекте. Так что можете брать готовый код и повторять.
Все подробности по ссылке: https://habr.com/ru/articles/974058/
#liquidglass #ui #фронтенд
Хабр
Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров
В предыдущем посте я не затронул техническую часть — исправляю это. Как Apple опять поменяла UI/UX Последние годы мы привыкли к безопасному, предсказуемому минимализму в интерфейсах. Плоские панели,...
❤2🔥2💩2
Umami 3.0: Self-hosted аналитика сайтов вместо Google Analytics
Umami 3.0 — это современный open-source инструмент веб-аналитики, который позволяет владельцам сайтов и разработчикам получить полное представление о посетителях без передачи данных третьим лицам, в отличие от Google Analytics. Он легко развёртывается на собственном сервере или в облаке через Docker или Kubernetes и не использует cookies и трекинг на базе fingerprinting, обеспечивая полное соответствие законам о приватности, таким как GDPR и CCPA.
Этот инструмент подойдёт всем, кто ценит конфиденциальность и хочет минимизировать нагрузку на сайт. Сервис отличается лёгким и быстрым скриптом, который не замедляет загрузку страниц и не блокируется ad-blockers, при этом предоставляя точные и полные данные без сэмплинга и сложных настроек Google Analytics, которые часто оказываются излишними.
Подробнее можно почитать на странице проекта.
#инструменты #аналитика
Umami 3.0 — это современный open-source инструмент веб-аналитики, который позволяет владельцам сайтов и разработчикам получить полное представление о посетителях без передачи данных третьим лицам, в отличие от Google Analytics. Он легко развёртывается на собственном сервере или в облаке через Docker или Kubernetes и не использует cookies и трекинг на базе fingerprinting, обеспечивая полное соответствие законам о приватности, таким как GDPR и CCPA.
Этот инструмент подойдёт всем, кто ценит конфиденциальность и хочет минимизировать нагрузку на сайт. Сервис отличается лёгким и быстрым скриптом, который не замедляет загрузку страниц и не блокируется ad-blockers, при этом предоставляя точные и полные данные без сэмплинга и сложных настроек Google Analytics, которые часто оказываются излишними.
Подробнее можно почитать на странице проекта.
#инструменты #аналитика
GitHub
GitHub - umami-software/umami: Umami is a modern, privacy-focused analytics platform. An open-source alternative to Google Analytics…
Umami is a modern, privacy-focused analytics platform. An open-source alternative to Google Analytics, Mixpanel and Amplitude. - umami-software/umami
❤2
Forwarded from Типичный программист
Летим зимовать ✈️
Когда холодает, айтишники пакуют чемоданы, а мы разыгрываем ваучер на 50 000 рублей в Островке.
Поехать к морю или остаться среди снежных пейзажей — выбирайте сами!
Чтобы участвовать, нужно оставить любую реакцию под этим постом и подписаться на каналы ниже:
😎 Типичный программист
🐸 Библиотека программиста
🟢 Ostrovok! Tech
Теперь осталось нажать на кнопку участия под этим постом и вы в игре!
Итоги подведём 12 декабря. Победителя выберем с помощью бота. Подробнее с правилами можно ознакомиться здесь.
Всем удачи!
Участников: 27
Призовых мест: 1
Дата розыгрыша: 19:00, 12.12.2025 MSK (4 дня)
Когда холодает, айтишники пакуют чемоданы, а мы разыгрываем ваучер на 50 000 рублей в Островке.
Поехать к морю или остаться среди снежных пейзажей — выбирайте сами!
Чтобы участвовать, нужно оставить любую реакцию под этим постом и подписаться на каналы ниже:
Теперь осталось нажать на кнопку участия под этим постом и вы в игре!
Итоги подведём 12 декабря. Победителя выберем с помощью бота. Подробнее с правилами можно ознакомиться здесь.
Всем удачи!
Участников: 27
Призовых мест: 1
Дата розыгрыша: 19:00, 12.12.2025 MSK (4 дня)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥2
Большая шпаргалка по бэкенду на русском языке
В этой шпаргалке вы найдёте самую разную информацию, нужную бэкенд-разработчикам: как устроен интернет, Работа с БД, API, советы по тестированию и многое другое. Причём весь материал сопровождается картинками и таблицами для наглядности.
Забрать шпаргалку можно здесь: https://github.com/cheatsnake/backend-cheats
#шпаргалка
В этой шпаргалке вы найдёте самую разную информацию, нужную бэкенд-разработчикам: как устроен интернет, Работа с БД, API, советы по тестированию и многое другое. Причём весь материал сопровождается картинками и таблицами для наглядности.
Забрать шпаргалку можно здесь: https://github.com/cheatsnake/backend-cheats
#шпаргалка
🔥9🗿3❤2👍2👎1