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
Теперь создание макетов станет ещё семантичнее и удобнее: subgrid улучшает возможности CSS Grid
По умолчанию при использовании «гридов» в создании макета могут участвовать только прямые дочерние элементы сетки. И тут, конечно, можно просто засунуть все нужные блоки для сетки внутрь родителя, но это может плохо сказаться не семантике сайта.
Но теперь, чтобы избежать этого, можно воспользоваться свойством subgrid, которое передаёт дочерним сеткам свойства родительской, расширяя её возможности там, где нам это необходимо. Так мы и семантику не теряем, и используем общую структуру для разных элементов с разной степенью вложенности.
Возможно, на словах это не очень понятно. Поэтому предлагаю вам познакомиться с новым туториалом от Джона Комо, где он на наглядных примерах показал всю прелесть этого способа: https://www.joshwcomeau.com/css/subgrid/
#css #фронтенд
По умолчанию при использовании «гридов» в создании макета могут участвовать только прямые дочерние элементы сетки. И тут, конечно, можно просто засунуть все нужные блоки для сетки внутрь родителя, но это может плохо сказаться не семантике сайта.
Но теперь, чтобы избежать этого, можно воспользоваться свойством subgrid, которое передаёт дочерним сеткам свойства родительской, расширяя её возможности там, где нам это необходимо. Так мы и семантику не теряем, и используем общую структуру для разных элементов с разной степенью вложенности.
Возможно, на словах это не очень понятно. Поэтому предлагаю вам познакомиться с новым туториалом от Джона Комо, где он на наглядных примерах показал всю прелесть этого способа: https://www.joshwcomeau.com/css/subgrid/
#css #фронтенд
❤4
Когда решил посмотреть код в своих старых проектах:
This media is not supported in your browser
VIEW IN TELEGRAM
🤣41🔥6❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Не портфолио, а тайм-киллер какой-то
Тайский разработчик очень креативно подошёл к созданию портфолио и создал целую игру. В ней можно прогуляться по мини-острову, заглянуть к автору домой, почитать его заметки и резюме. А ещё поиграть с уточкой, покидать мячик и многое другое. Большинство элементов на острове интерактивные, так что можно залипнуть.
Построено всё на canvas и three.js. А заценить можно по ссылке: https://worawork.vercel.app/
#интересное
Тайский разработчик очень креативно подошёл к созданию портфолио и создал целую игру. В ней можно прогуляться по мини-острову, заглянуть к автору домой, почитать его заметки и резюме. А ещё поиграть с уточкой, покидать мячик и многое другое. Большинство элементов на острове интерактивные, так что можно залипнуть.
Построено всё на canvas и three.js. А заценить можно по ссылке: https://worawork.vercel.app/
#интересное
🔥20❤3🤔3
Forwarded from GameDev: разработка игр
Particle Life — симуляция, где из примитивных правил взаимодействия частиц возникают структуры, похожие на живые клетки. Теперь её запустили на WebGPU с поддержкой 100 000 частиц прямо в браузере.
Как работает: есть частицы разных цветов, и матрица сил между ними. Красные могут притягиваться к жёлтым, а жёлтые — убегать от красных. Силы асимметричные, в отличие от реальной физики. Из этих простых правил спонтанно появляются «клетки», «организмы», деление, даже что-то похожее на экосистемы.
Что сделал автор: перенёс симуляцию на compute shaders в WebGPU. Главная проблема — расчёт сил между всеми парами частиц это O(N²), что убивает производительность. Решение: spatial hashing — частицы раскидываются по ячейкам, и каждая взаимодействует только с соседями. Реализовано через atomic linked lists и counting sort.
Результат: 20 000 частиц с нормальным радиусом взаимодействия, до 100 000+ если радиус уменьшить. Всё в браузере, никаких установок.
Код на гитхабе, демо на сайте.
Залипательная штука — можно наблюдать как из хаоса рождается порядок.
@make_game
Как работает: есть частицы разных цветов, и матрица сил между ними. Красные могут притягиваться к жёлтым, а жёлтые — убегать от красных. Силы асимметричные, в отличие от реальной физики. Из этих простых правил спонтанно появляются «клетки», «организмы», деление, даже что-то похожее на экосистемы.
Что сделал автор: перенёс симуляцию на compute shaders в WebGPU. Главная проблема — расчёт сил между всеми парами частиц это O(N²), что убивает производительность. Решение: spatial hashing — частицы раскидываются по ячейкам, и каждая взаимодействует только с соседями. Реализовано через atomic linked lists и counting sort.
Результат: 20 000 частиц с нормальным радиусом взаимодействия, до 100 000+ если радиус уменьшить. Всё в браузере, никаких установок.
Код на гитхабе, демо на сайте.
Залипательная штука — можно наблюдать как из хаоса рождается порядок.
@make_game
This media is not supported in your browser
VIEW IN TELEGRAM
❤7🤔1