🇺🇦 Math.random(): community of engineers
1.3K subscribers
427 photos
30 videos
1 file
611 links
Інженерний AI-канал Андрія Кучеренка, автора https://jscpd.dev. Вимірюю, що зробив AI-агент. Рахую ціну коду в токенах. Розбираю MCP, Skills, SDD.

@andrey_pk
x.com/a_kucherenko
linkedin.com/in/andrey-kucherenko
youtube.com/@mathrandomjavascriptcommunity
Download Telegram
Twake - open source альтернатива таким продуктам как slack и teams. Может быть полезна небольшим компаниям и стартапам. Фронтенд написан на React. Бекэнд написан на php. Из интересного - используется real-time база данных ScyllaDB.

🔗 https://github.com/TwakeApp/Twake
🔗 https://twake.app/
🔗 https://www.scylladb.com/

#repo #github #react
🐕DogeHouse - открытая альтернатива ClubHouse! DogeHouse написан на TypeScript с React, мобильное приложение - React Native. Есть десктопное приложение на electron.

🔗 https://dogehouse.tv/
🔗https://github.com/benawad/dogehouse

#repo #typescript #reactnative #react #electron
Красивая библиотека для создания презентаций. Слайды описываются на jsx или mdx.

🔗 https://formidable.com/open-source/spectacle/
🔗 https://github.com/FormidableLabs/spectacle

#react #jsx #repo #github
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Чат-боты на React!

Библиотека, которая помогает создать чат-ботов для telegram, slack и facebook.

🔗 https://github.com/urban-bot/urban-bot
🔗 https://bit.ly/3y87hTA - статья с примером создания чат-бота для телеграм
🔗 https://urban-bot.now.sh/

#react #chatbot #repo #github
Boring Avatars - библиотека на React для генерации аватаров. Поддерживает разные стили аватаров, есть возможность настраивать цветовую палитру под ваши нужды.

🔗 https://boringavatars.com/
🔗 https://github.com/boringdesigners/boring-avatars

#github #repo #react #javascript #opensource
🔥 Почти GTA на JavaScript, React и three.js. Не буду писать много - пробуйте и смотрите код!

🔗 https://encouraging-ducks.surge.sh/
🔗 https://github.com/pmndrs/racing-game

#game #3d #javascript #react #threejs
Agora Flat - десктопный клиент для онлайн класса. Приложение сделано на React и Electron.

Для организации аудио/видео конференции используется сервис agora.io. Это тот самый сервис, который используется в недавно шумевшей социальной сети clubhouse.

🔗 https://github.com/netless-io/flat

#github #repo #webrtc #typescript #react #agora
Интересный проект для генерации аватаров в стиле Notion. Генератор аватаров написан на next.js.

🔗 https://notion-avatar.vercel.app/
🔗 https://github.com/Mayandev/notion-avatar

#react #repo #github #nextjs
This media is not supported in your browser
VIEW IN TELEGRAM
Исходный код проекта cleanup.pictures, который удаляет ненужные детали с ваших фото. Проект написан на React в качестве бекенда используются Firebase Functions, о которых мы говорили с Kirjs, для работы с картинкой используется обученная нейронная сеть проекта LaMa.

🔗 https://cleanup.pictures/
🔗 https://github.com/initml/cleanup.pictures
🔗 https://saic-mdal.github.io/lama-project/

#github #repo #ai #images #react #firebase
This media is not supported in your browser
VIEW IN TELEGRAM
Home Theater Calculator - полезное приложение, которое поможет правильно разместить домашний кинотеатр.
Из интересного для разработчика можно увидеть, что приложение написано на PureScript. PureScript - функциональный, типизированный язык, который транспайлится в JavaScript. Для отрисовки используется React.

🔗 GitHub
🔗 Demo & Docs
🔗 PureScript

#purescript #react #github #repo
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Открытая альтернатива Trello, Notion и Asana.
Проект написан на React и Go.

🔗 https://www.focalboard.com/
🔗 https://github.com/mattermost/focalboard

#repo #go #typescript #react #trello #github
👍4
The good article about performance optimization of React application. The article's author shares his story and gives a performance optimization checklist.

🔗 https://orizens.com/blog/500ms-to-1-7ms-in-react-a-journey-and-a%20checklist/

#react #performance #checklist
👍8
Hey friends! 👋

Let me invite you to the next.js online conference!

🔗 https://nextjs.org/conf

#next #react #conference
🔥5👍2
Доброго дня, друзі!

Приємна новина, пару днів тому вийшла нова версія чудового React фреймворку Next.js 14! Розробники кажуть, що він став швидким як постріл 🗯

Більше деталей за посиланням:
🔗 https://nextjs.org/blog/next-14

Offtop: якщо ви чекаєте наступного нашого стріму про цікаві js фреймворки, то ми скоро дамо вам знати про дату на час цього стріму.

#next #react #release
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7👎4🔥2😁2
Доброго дня, друзі! 🚀

Сьогодні ми вирішили розібратися, що краще для розробки - Next.js чи Nuxt.js?

👍 Якщо ви віддаєте перевагу Next.js за його гнучкість та оптимізацію для React, натисніть лайк.

🔥 Якщо ж ваш вибір - Nuxt.js, через його зручність у використанні з Vue.js та потужний функціонал "з коробки", виберіть вогник.

Давайте з'ясуємо, який фреймворк найбільше цінує наша спільнота! Поділіться своїм досвідом та думками в коментарях.

#next #nuxt #nextvsnuxt #javascript #react #vue

🤓 Чекаємо на ваші голоси та коментарі!
👍14🔥14❤‍🔥3😱1
Привіт, Math.random() Community! 🎉

Запрошуємо вас на онлайн-подію "The AI Development Ecosystem for JavaScript" з Андрієм Кучеренком, Chief Software Engineer II!

📅 Дата: 10 жовтня
🔗 https://wearecommunity.io/events/borderless-js-conference

🌟 Андрій поділиться унікальним прикладом застосування LLM (Large Language Models) для заміни React-розробника на проекті. Це чудова можливість дізнатися про новітні технології в розробці та їх реалізацію в реальних проектах.

Не пропустіть шанс дізнатися, як штучний інтелект може змінити нашу роботу та вплинути на майбутнє розробки!

👉 Долучайтеся до нас і задавайте питання! Це буде цікаво!

#AI #javascript #react #lld #community #event
👍9❤4🔥3👏2🕊1
🔴38% зайвих токенів і втрачених грошей на кожному запиті до AI — через ваш фреймворк. Саме стільки коштує вибір «не того».

Я перевірив ті самі компоненти — від hello до таблиці з фільтром — і написав їх на кожному фреймворку. Однакова функціональність, один токенізатор:

🟢 Svelte — 598 токенів
🟡 React — +25%
🔴 Angular — +38%

+38% — це не про стиль коду. Це рядок у вашому рахунку за API. Бо код тепер читають не люди, а агенти — тисячі разів на місяць. На кожному рев'ю, кожному «полагодь оце», кожному прогоні ви платите за зайве знову і знову.

А тепер парадокс, який ламає інтуїцію. У Svelte НАЙГІРШЕ стиснення у всій групі — його синтаксис погано лягає в токенізатор. І він однаково виграє. Чому? Бо коду треба менше: ти пишеш count++ — решту добудовує компілятор. У React ти пишеш ту саму сантехніку руками. І платиш за кожен символ.

Висновок простий: усе, що ви пишете явно — має ціну. Усе, що виводить компілятор — безкоштовне.

#TokenEconomics #LLM #Svelte #React #Angular

Повне дослідження — таблиці в доларах по 10 моделях 👀у статті на Hacker Noon

Це частина 1 з 5. Далі — мови, де анотації типів у TypeScript додають +63% до ціни за ту саму логіку 👀
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3🔥3👀3
This media is not supported in your browser
VIEW IN TELEGRAM
TanStack Start - одинадцятий місяць у Release Candidate. І це чесніше за частину «стабільних» релізів, які ви ставили цього року.

RC оголосили 23.09.2025. У документації досі той самий статус - і формулювання, варте окремої поваги: API вважається feature-complete і стабільним, але це не означає, що продукт без багів. У селекторі версій доків, до речі, все ще стоїть v0.

Порівняйте з фреймворками, які викочують мажор і через тиждень патчать breaking change(

Що це взагалі таке:

Full-stack React-фреймворк на TanStack Router, збірка на Vite або Rsbuild.

Поверх роутера дає full-document SSR, стрімінг, server functions (типізовані RPC між клієнтом і сервером), server routes, middleware і наскрізну типізацію через увесь стек.

Чому це важливо саме зараз:

⏺Агент працює циклом: згенерував зміну - тайпчек - прочитав помилку - виправив.
⏺Наскрізна типізація означає, що помилка в маршруті чи параметрах приходить від компілятора, а не з прода через два дні.
⏺Ви платите за один зайвий прохід тайпчека замість інциденту.

Ще одна деталь: сторінки документації віддаються у plain markdown - додаєте .md до адреси і отримуєте чистий текст. У доках це прямо позначено як формат для AI/LLM. Агент отримує чистий текст замість HTML - без навігації, банерів і токенів на розмітку.

Що варто знати до того, як брати:

⏺ React Server Components - експериментальні. Якщо архітектура зав'язана на RSC, Start поки не варіант
⏺ RC це не привід не фіксувати версії залежностей
⏺ TanStack LLC - 100% bootstrapped, без венчурних грошей. Це і стійкість, і повільніший темп водночас.

У документації є окремі сторінки «Start vs Next.js» і «Migrate from Next.js» - автори не вдають, що конкурента не існує.

Перевірте самі - додайте .md до адреси: документація TanStack Start

Взяли б для нового проекту?

🔥 - вже спробував
👀 - лишаюсь на Next.js

#TanStack #React #TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥6👀2