Когда решил посмотреть код в своих старых проектах:
This media is not supported in your browser
VIEW IN TELEGRAM
🤣42🔥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
Критически важный CSS-генератор для ускорения вашего сайта
Удобный сервис, если вы хотите оптимизировать работу вашего сайта. Для этого он анализирует сайт с точки зрения вёрстки и извлекает из него критически важные участки CSS, необходимые для отображения видимой части веб-страницы.
Если извлечь этот CSS и встроить его в HTML, браузер сможет быстрее отображать контент, не дожидаясь загрузки всех таблиц стилей, что повысит производительность и улучшит показатели Core Web Vitals, такие как First Contentful Paint (FCP).
Сохраняйте, изучайте и пользуйтесь. Инструкция и детали по ссылке: https://kigo.studio/tools/critical-css-generator
#css #оптимизиация #инструменты
Удобный сервис, если вы хотите оптимизировать работу вашего сайта. Для этого он анализирует сайт с точки зрения вёрстки и извлекает из него критически важные участки CSS, необходимые для отображения видимой части веб-страницы.
Если извлечь этот CSS и встроить его в HTML, браузер сможет быстрее отображать контент, не дожидаясь загрузки всех таблиц стилей, что повысит производительность и улучшит показатели Core Web Vitals, такие как First Contentful Paint (FCP).
Сохраняйте, изучайте и пользуйтесь. Инструкция и детали по ссылке: https://kigo.studio/tools/critical-css-generator
#css #оптимизиация #инструменты
kigo.studio
Critical CSS Generator - Kigo Studio
Generate critical CSS for your website to improve performance and Core Web Vitals. Extract above-the-fold CSS for faster page loads.
❤3🔥1
Каким будет фронтенд через 10 лет?
Всё чаще можно встретить мнение, что вайбкодинг убьёт фронтенд. И этому сложно не верить, ведь уже сегодня ИИ может создавать вполне рабочие сайты, пусть и не за один промпт. А использование нейронками React вызывает опасения о судьбе остальных библиотек и фреймворков.
Давайте обсудим этот вопрос. Пишите в комментарии, что думаете по этому поводу. Каким вы видите будущее фронтенда? Делитесь самыми скромными и смелыми вариантами.
#обсуждение #фронтенд
Всё чаще можно встретить мнение, что вайбкодинг убьёт фронтенд. И этому сложно не верить, ведь уже сегодня ИИ может создавать вполне рабочие сайты, пусть и не за один промпт. А использование нейронками React вызывает опасения о судьбе остальных библиотек и фреймворков.
Давайте обсудим этот вопрос. Пишите в комментарии, что думаете по этому поводу. Каким вы видите будущее фронтенда? Делитесь самыми скромными и смелыми вариантами.
#обсуждение #фронтенд
😁8
One Million Checkboxes: как обычный пет-проект превратился в площадку для баловства подростков
Когда создатель One Million Checkboxes (OMCB) запустил свой проект — сайт с миллионом глобальных чекбоксов, он и не догадывался, что всё выйдет из-под контроля.
За пару недель более 500 тыс пользователей нажали на чекбоксы 650 млн раз, превратив OMCB в вирусный феномен.
Но неожиданное открытие заставило автора подумать, что его взломали: в базе данных появились странные URL.
Однако вскоре стало ясно, что это не взлом, а результат удивительно креативного использования сайта группой подростков, которые скрывали двоичные сообщения и даже рисовали на сетке чекбоксов.
Полная статья с описанием произошедшего:
https://habr.com/ru/articles/839866/
Когда создатель One Million Checkboxes (OMCB) запустил свой проект — сайт с миллионом глобальных чекбоксов, он и не догадывался, что всё выйдет из-под контроля.
За пару недель более 500 тыс пользователей нажали на чекбоксы 650 млн раз, превратив OMCB в вирусный феномен.
Но неожиданное открытие заставило автора подумать, что его взломали: в базе данных появились странные URL.
Однако вскоре стало ясно, что это не взлом, а результат удивительно креативного использования сайта группой подростков, которые скрывали двоичные сообщения и даже рисовали на сетке чекбоксов.
Полная статья с описанием произошедшего:
https://habr.com/ru/articles/839866/
🔥8❤3
Forwarded from Типичный программист
И ещё один адвент-календарь, который стартовал сегодня
Мы уже публиковали большую подборку календарей по различным айтишным тематикам. Но сегодня стартовал ещё один, посвящённый веб-технологиям.
Тут собраны полезные материалы для фронтенд-разработчиков по HTML, CSS и JavaScript.
#веб
Мы уже публиковали большую подборку календарей по различным айтишным тематикам. Но сегодня стартовал ещё один, посвящённый веб-технологиям.
Тут собраны полезные материалы для фронтенд-разработчиков по HTML, CSS и JavaScript.
#веб
🔥3❤2
Новогодний подгон для поклонников Svelte
Про вас не забыли и сделали персональный адвент-календарь. Он уже в разгаре и завершится 23 декабря. Внутри полезные советы и короткие видео, которые помогут эффективнее работать с фреймворком.
Забираем по ссылке: https://advent.sveltesociety.dev/2025
#svelte
Про вас не забыли и сделали персональный адвент-календарь. Он уже в разгаре и завершится 23 декабря. Внутри полезные советы и короткие видео, которые помогут эффективнее работать с фреймворком.
Забираем по ссылке: https://advent.sveltesociety.dev/2025
#svelte
❤3
Перестаньте использовать JavaScript для решения проблем с CSS
Недостаток знаний подталкивает людей к чрезмерному усложнению, и рано или поздно это сказывается на производительности. Например, content-visibility: auto. Он делает то же, что и React-Window, без использования JavaScript и с минимальным весом пакета. Та же история с современными единицами измерения области просмотра (
Эта статья призвана исправить это и показать, что вам не нужно столько JS-кода, как вы привыкли.
#javascript #css
Недостаток знаний подталкивает людей к чрезмерному усложнению, и рано или поздно это сказывается на производительности. Например, content-visibility: auto. Он делает то же, что и React-Window, без использования JavaScript и с минимальным весом пакета. Та же история с современными единицами измерения области просмотра (
dvh, svh, lvh), которые позволяют избавиться от window.innerHeight в коде. Обе функции получили 90 % глобальной поддержки в 2024 году. Тем не менее мы по-прежнему используем JavaScript в силу привычки.Эта статья призвана исправить это и показать, что вам не нужно столько JS-кода, как вы привыкли.
#javascript #css
👍4❤3😁3🤯2
Google собрала все обновления CSS для Chrome в одном месте
И сделала красивый лендинг, в котором рассказала обо всё, что появилось в Chrome с живыми примерами. Переходите по ссылке и смотрите, получилось интересно:
https://chrome.dev/css-wrapped-2025/
#chrome #css
И сделала красивый лендинг, в котором рассказала обо всё, что появилось в Chrome с живыми примерами. Переходите по ссылке и смотрите, получилось интересно:
https://chrome.dev/css-wrapped-2025/
#chrome #css
🔥16👎2
Как мигрировать на Node.js 22 без рисков: инструкция
Node.js 18 больше не получает обновлений безопасности, а поддержка 20-й версии закончится в апреле 2026 года. Наиболее стабильной LTS-версией стала Node.js 22 — вокруг неё уже сформировалась зрелая экосистема, а крупные команды успели протестировать релиз в продакшене.
В статье автор разобрался, что думают разработчики о платформе, какие подводные камни вас ждут при миграции и как безопасно совершить переход.
#nodejs
Node.js 18 больше не получает обновлений безопасности, а поддержка 20-й версии закончится в апреле 2026 года. Наиболее стабильной LTS-версией стала Node.js 22 — вокруг неё уже сформировалась зрелая экосистема, а крупные команды успели протестировать релиз в продакшене.
В статье автор разобрался, что думают разработчики о платформе, какие подводные камни вас ждут при миграции и как безопасно совершить переход.
#nodejs
👍4❤1
Forwarded from Типичный программист
Браузерные расширения украли переписки с ИИ более чем 8 миллионов пользователей
Под видом VPN и инструментов приватности эти расширения для Google Chrome и Microsoft Edge собирали и передавали злоумышленникам полные диалоги пользователей с ChatGPT, Gemini, Claude, Copilot, Perplexity, Grok и другими ИИ-платформами.
Главный виновник — Urban VPN. У него более 6 млн установок в Chrome, высокий рейтинг (4,7 звезды) и даже статус Google Featured, который создавал ощущение надежности. Также вредоносными оказались 1ClickVPN Proxy, Urban Browser Guard и Urban Ad Blocker. Все они распространялись через официальные магазины браузеров.
Вам рекомендуем удалить эти расширения, если они у вас были. А почитать подробности, как воровались переписки как долго, можно у нас на сайте.
#новости #vpn
Под видом VPN и инструментов приватности эти расширения для Google Chrome и Microsoft Edge собирали и передавали злоумышленникам полные диалоги пользователей с ChatGPT, Gemini, Claude, Copilot, Perplexity, Grok и другими ИИ-платформами.
Главный виновник — Urban VPN. У него более 6 млн установок в Chrome, высокий рейтинг (4,7 звезды) и даже статус Google Featured, который создавал ощущение надежности. Также вредоносными оказались 1ClickVPN Proxy, Urban Browser Guard и Urban Ad Blocker. Все они распространялись через официальные магазины браузеров.
Вам рекомендуем удалить эти расширения, если они у вас были. А почитать подробности, как воровались переписки как долго, можно у нас на сайте.
#новости #vpn
🤔4
This media is not supported in your browser
VIEW IN TELEGRAM
Создаём портфолио в формате 2D-игры на JavaScript
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.
Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom
#javascript
❤10
NestJS ужасен?
Если что, это не мнение редакции. Так считает пользователь Reddit и при этом он приводит довольно резонные аргументы:
🔘 Множество переусложнённых решений — например, собственная система внедрения зависимостей, которая мешает новичкам и AI‑инструментам, хотя стандарт ES уже предлагает необходимые механизмы.
🔘 Кодовая база излишне сложна без необходимости, а ревью PR занимает больше времени, чем их написание, из-за скрытых побочных эффектов.
🔘 Много дублирующих и самодельных решений: например, NestJS использует внутренний шаблонизатор, сильно похожий на EJS, но написанный с нуля.
🔘 Проблемы с безопасностью: команда медленно реагирует на найденные уязвимости, принимая исправления спустя месяцы, несмотря на готовые PR с демонстрацией проблемы и решения.
🔘 Масса ненужных зависимостей — зачем NestJS включает webpack в продакшн-сборку?!
🔘 Плохая совместимость с экосистемой.
А вы как считаете? Согласны с этими тезисами? Пишите в комментарии, что думаете.
#обсуждение #nestjs
Если что, это не мнение редакции. Так считает пользователь Reddit и при этом он приводит довольно резонные аргументы:
А вы как считаете? Согласны с этими тезисами? Пишите в комментарии, что думаете.
#обсуждение #nestjs
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15👎5❤2
Кликджекинг без JavaScript — это возможно
Researcher Lyra Rebane открыла уязвимость, которая ломает классические защиты: атаку можно провести чистым CSS и SVG, обходя Content Security Policy и X-Frame-Options.
В чём суть:
🔘 SVG фильтры (feBlend, feComposite) работают как полноценные логические вентили;
🔘 можно перехватить пиксели со скрытых iframes, не используя JS;
🔘 защита от XSS есть, но от CSS-атак ещё нет.
Proof-of-concept: атака на Google Docs — украдены текст документа через фальшивую кнопку «Generate Document».
Google выплатила $3133.70 за bug report. Уязвимость всё ещё не пофиксена и затрагивает Chrome, Firefox и другие браузеры.
Полный разбор читайте по ссылке:
https://www.theregister.com/2025/12/05/css_svg_clickjacking/
#безопасность
Researcher Lyra Rebane открыла уязвимость, которая ломает классические защиты: атаку можно провести чистым CSS и SVG, обходя Content Security Policy и X-Frame-Options.
В чём суть:
Proof-of-concept: атака на Google Docs — украдены текст документа через фальшивую кнопку «Generate Document».
Google выплатила $3133.70 за bug report. Уязвимость всё ещё не пофиксена и затрагивает Chrome, Firefox и другие браузеры.
Полный разбор читайте по ссылке:
https://www.theregister.com/2025/12/05/css_svg_clickjacking/
#безопасность
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
Forwarded from Точка входа в программирование
Сборник около 160 шпаргалок разработчика на любой вкус
Очередная годнота — Quick Reference. Тут собраны шпаргалки не только по стандартным программерским темам по типу регулярок, JS и Markdown, но и есть выжимки с советами по использованию различных сервисов и инструментов: ChatGPT, Vim, Homebrew, FileZilla и многое-многое другое.
Налетаем
#шпаргалка
Очередная годнота — Quick Reference. Тут собраны шпаргалки не только по стандартным программерским темам по типу регулярок, JS и Markdown, но и есть выжимки с советами по использованию различных сервисов и инструментов: ChatGPT, Vim, Homebrew, FileZilla и многое-многое другое.
Налетаем
#шпаргалка
❤4