⚡️ Microsoft выпустила TypeScript 7.0 - самый большой апдейт TypeScript за последние годы.
Главное: TypeScript теперь получил нативный порт на Go, который даёт почти порядок прироста скорости. По данным команды, полные сборки обычно ускоряются примерно в 8–12 раз, а на крупных проектах вроде VS Code, Sentry, Bluesky и Playwright разница доходит до 7.7x–11.9x.
Что это меняет на практике:
* быстрее открываются большие проекты
* быстрее работают diagnostics, autocomplete и find references
* tsc и --watch дают короче feedback loop
* редакторы через LSP тоже получают прирост
* крупные монорепы меньше страдают от ожидания type-checking
Отдельно завезли параллелизацию: TypeScript 7 умеет распараллеливать parsing, type-checking и emit. Для тонкой настройки появились флаги --checkers, --builders и --singleThreaded.
--watch тоже переписали: теперь он построен на новом файловом watcher’е, портированном на Go, чтобы лучше работать на больших проектах без дорогого polling.
Но есть важный нюанс: TypeScript 7.0 пока не поставляется с API. Новый API ожидается в 7.1, а для переходного периода Microsoft предлагает запускать TypeScript 7 рядом с TypeScript 6 через совместимость и aliases.
Установка обычная:
npm install -D typescript
По сути, TypeScript 7 - это не косметический релиз, а серьёзная пересборка фундамента: тот же TypeScript-опыт, но с нативной скоростью, многопоточностью и шансом наконец-то перестать ждать type-checking на больших кодовых базах.
https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
Главное: TypeScript теперь получил нативный порт на Go, который даёт почти порядок прироста скорости. По данным команды, полные сборки обычно ускоряются примерно в 8–12 раз, а на крупных проектах вроде VS Code, Sentry, Bluesky и Playwright разница доходит до 7.7x–11.9x.
Что это меняет на практике:
* быстрее открываются большие проекты
* быстрее работают diagnostics, autocomplete и find references
* tsc и --watch дают короче feedback loop
* редакторы через LSP тоже получают прирост
* крупные монорепы меньше страдают от ожидания type-checking
Отдельно завезли параллелизацию: TypeScript 7 умеет распараллеливать parsing, type-checking и emit. Для тонкой настройки появились флаги --checkers, --builders и --singleThreaded.
--watch тоже переписали: теперь он построен на новом файловом watcher’е, портированном на Go, чтобы лучше работать на больших проектах без дорогого polling.
Но есть важный нюанс: TypeScript 7.0 пока не поставляется с API. Новый API ожидается в 7.1, а для переходного периода Microsoft предлагает запускать TypeScript 7 рядом с TypeScript 6 через совместимость и aliases.
Установка обычная:
npm install -D typescript
По сути, TypeScript 7 - это не косметический релиз, а серьёзная пересборка фундамента: тот же TypeScript-опыт, но с нативной скоростью, многопоточностью и шансом наконец-то перестать ждать type-checking на больших кодовых базах.
https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
PhantomLoop - визуализация BCI-декодеров прямо в браузере
Небольшая, но интересная находка для тех, кто работает с нейроданными, EEG/BCI и real-time интерфейсами.
PhantomLoop показывает поток данных от BCI-декодера в браузере: сигналы, предсказания модели, качество декодирования и разные визуализации.
Что умеет:
* подключение к EEG/BCI-источникам через WebSocket
* поддержка OpenBCI, Muse, Emotiv, NeuroSky, PiEEG, LSL и других устройств
* real-time streaming до 40 Hz
* декодеры на TensorFlow.js
* ускорение через WebGPU/WebGL
* встроенный Monaco Editor для кастомных декодеров
* визуализации вроде neural waterfall, spectral analysis и center-out arena
Важный момент: браузер не может напрямую работать с BLE, Serial, TCP и железом, поэтому PhantomLoop использует Python WebSocket bridge.
github.com/yelabb/PhantomLoop
Небольшая, но интересная находка для тех, кто работает с нейроданными, EEG/BCI и real-time интерфейсами.
PhantomLoop показывает поток данных от BCI-декодера в браузере: сигналы, предсказания модели, качество декодирования и разные визуализации.
Что умеет:
* подключение к EEG/BCI-источникам через WebSocket
* поддержка OpenBCI, Muse, Emotiv, NeuroSky, PiEEG, LSL и других устройств
* real-time streaming до 40 Hz
* декодеры на TensorFlow.js
* ускорение через WebGPU/WebGL
* встроенный Monaco Editor для кастомных декодеров
* визуализации вроде neural waterfall, spectral analysis и center-out arena
Важный момент: браузер не может напрямую работать с BLE, Serial, TCP и железом, поэтому PhantomLoop использует Python WebSocket bridge.
github.com/yelabb/PhantomLoop
Держать 16 разных API-ключей только ради тестов разных LLM - то ещё удовольствие.
freellmapi решает это проще: один OpenAI-compatible endpoint для бесплатных tier’ов от Google, Groq, Cerebras, NVIDIA и ещё 14 провайдеров.
Что внутри:
* около 1.7B токенов в месяц суммарно
* роутер выбирает лучшую модель под запрос
* при rate limit автоматически переключается на другого провайдера
* ключи хранятся в зашифрованном виде
* интерфейс совместим с OpenAI API
По сути, это единая точка входа для экспериментов с разными LLM без ручного жонглирования ключами и лимитами.
15.9K звёзд на GitHub, а я почему-то наткнулся только вчера.
https://github.com/tashfeenahmed/freellmapi
⭐ 15.9K
#OpenSource #DevTools
freellmapi решает это проще: один OpenAI-compatible endpoint для бесплатных tier’ов от Google, Groq, Cerebras, NVIDIA и ещё 14 провайдеров.
Что внутри:
* около 1.7B токенов в месяц суммарно
* роутер выбирает лучшую модель под запрос
* при rate limit автоматически переключается на другого провайдера
* ключи хранятся в зашифрованном виде
* интерфейс совместим с OpenAI API
По сути, это единая точка входа для экспериментов с разными LLM без ручного жонглирования ключами и лимитами.
15.9K звёзд на GitHub, а я почему-то наткнулся только вчера.
https://github.com/tashfeenahmed/freellmapi
⭐ 15.9K
#OpenSource #DevTools
Один skill-файл для AI-агента собрал больше 100K звёзд.
ui-ux-pro-max-skill добавляет агенту то, чего обычно не хватает при генерации интерфейсов: дизайнерское суждение.
Не просто “сделай красиво”, а правила, почему один экран выглядит как шаблон из нейросети, а другой похож на нормальный продукт.
Внутри:
* 161 reasoning rules под разные индустрии
* 84 UI styles
* 192 product types
* палитры, typography pairings и UX-гайдлайны
* рекомендации по React, Next.js, Vue, Tailwind, SwiftUI, Flutter и другим стекам
Skill помогает агенту выбирать структуру лендинга, стиль, цвета, шрифты, эффекты и сразу подсвечивать анти-паттерны. Например, где градиент выглядит дешево, где не хватает контраста, почему spacing ломает ощущение премиальности и какие элементы лучше не использовать в конкретной нише.
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
#AI #Design
ui-ux-pro-max-skill добавляет агенту то, чего обычно не хватает при генерации интерфейсов: дизайнерское суждение.
Не просто “сделай красиво”, а правила, почему один экран выглядит как шаблон из нейросети, а другой похож на нормальный продукт.
Внутри:
* 161 reasoning rules под разные индустрии
* 84 UI styles
* 192 product types
* палитры, typography pairings и UX-гайдлайны
* рекомендации по React, Next.js, Vue, Tailwind, SwiftUI, Flutter и другим стекам
Skill помогает агенту выбирать структуру лендинга, стиль, цвета, шрифты, эффекты и сразу подсвечивать анти-паттерны. Например, где градиент выглядит дешево, где не хватает контраста, почему spacing ломает ощущение премиальности и какие элементы лучше не использовать в конкретной нише.
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
#AI #Design
Серый взрыв
Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает:
Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне.
Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе.
Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg.
Определяет функцию doArt, которая делает следующее:
Удаляет все старые линии с SVG-элемента, если они есть.
Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях.
Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML.
Вызывает функцию doArt один раз при загрузке страницы.
Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану.
Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child.
🌐Ссылка на код (https://codepen.io/chriscoyier/pen/OJXNeyP)
Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает:
Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне.
Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе.
Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg.
Определяет функцию doArt, которая делает следующее:
Удаляет все старые линии с SVG-элемента, если они есть.
Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях.
Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML.
Вызывает функцию doArt один раз при загрузке страницы.
Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану.
Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child.
🌐Ссылка на код (https://codepen.io/chriscoyier/pen/OJXNeyP)
codepen.io
Gray Burst
...
👍1
Multi Colored Text with CSS
Раскраска текста диагональными цветными полосами. На чистом CSS.
https://codepen.io/TajShireen/pen/YzZmbep
Раскраска текста диагональными цветными полосами. На чистом CSS.
https://codepen.io/TajShireen/pen/YzZmbep
👍1
Media is too big
VIEW IN TELEGRAM
⚡️ Opus 5 за два часа превратила абзац из «Властелина колец» в интерактивный 3D-мир
Андрей Карпати дал модели первый абзац книги, бюджет в 1 млн токенов - около $10 - и попросил создать сцену на Three.js.
Результат: 5500 строк кода, процедурная генерация объектов, расстановка моделей по координатам и анимация событий.
Местами всё выглядит криво. Но раньше никто не стал бы тратить дни на настолько узкую сцену. Теперь достаточно описать мир - и через пару часов получить рабочий прототип.
Следующий шаг - временные игры по запросу, где пользователь может стать наблюдателем, NPC или героем истории.
Пока слабое место моделей - проверка результата. Они не умеют полноценно смотреть видео и играть в собственные игры, поэтому анализируют скриншоты и пропускают ошибки.
https://x.com/Machinelearrn/status/2083859736387035332
@data_analysis_ml
Андрей Карпати дал модели первый абзац книги, бюджет в 1 млн токенов - около $10 - и попросил создать сцену на Three.js.
Результат: 5500 строк кода, процедурная генерация объектов, расстановка моделей по координатам и анимация событий.
Местами всё выглядит криво. Но раньше никто не стал бы тратить дни на настолько узкую сцену. Теперь достаточно описать мир - и через пару часов получить рабочий прототип.
Следующий шаг - временные игры по запросу, где пользователь может стать наблюдателем, NPC или героем истории.
Пока слабое место моделей - проверка результата. Они не умеют полноценно смотреть видео и играть в собственные игры, поэтому анализируют скриншоты и пропускают ошибки.
https://x.com/Machinelearrn/status/2083859736387035332
@data_analysis_ml
PerfectPixel (https://www.welldonecode.com/perfectpixel/) — плагин для браузеров, позволяющий верстать сайты «пиксель в пиксель»
С его помощью можно проверить, насколько ваша вёрстка вообще близка к изначальному макету. Для этого достаточно установить плагин и запустить его на интересующем сайте.
Интересной особенностью инструмента является возможность работы как с локальными сайтам, так и с теми, что уже размещены в Интернете
С его помощью можно проверить, насколько ваша вёрстка вообще близка к изначальному макету. Для этого достаточно установить плагин и запустить его на интересующем сайте.
Интересной особенностью инструмента является возможность работы как с локальными сайтам, так и с теми, что уже размещены в Интернете
5 платформ, где можно бесплатно задеплоить свой проект
Необязательно сразу арендовать сервер и настраивать инфраструктуру. Для портфолио, MVP и небольших pet-проектов можно начать с бесплатных тарифов.
1. GitHub Pages - для статических сайтов
Подходит для портфолио, документации, лендингов и проектов на HTML, CSS и JavaScript.
Загружаете код в репозиторий — GitHub публикует сайт и выдаёт готовый адрес.
🔗 https://pages.github.com
2. Cloudflare Workers - для API и серверной логики
Позволяет запускать JavaScript и TypeScript на серверах Cloudflare рядом с пользователем.
Бесплатный тариф включает до 100 000 запросов в день. Хороший вариант для API, вебхуков, прокси и небольших backend-сервисов.
🔗 https://workers.cloudflare.com
3. Vercel - для Next.js и современного frontend
Подключаете GitHub, делаете push — Vercel автоматически собирает и публикует проект.
Для каждой ветки создаётся отдельная preview-ссылка. Бесплатный Hobby-тариф предназначен для личных и некоммерческих проектов.
🔗 https://vercel.com
4. Google Cloud Run - для Docker-контейнеров
Загружаете контейнер, а Google самостоятельно запускает и масштабирует приложение.
Когда запросов нет, сервис может уменьшить количество экземпляров до нуля. Есть постоянная бесплатная квота, но для подключения обычно требуется настроить биллинг.
🔗 https://cloud.google.com/run
5. AWS Amplify - для full-stack приложений
Amplify объединяет хостинг, автоматическую сборку, CI/CD и сервисы AWS.
Подходит для React, Next.js, Vue и мобильных приложений. У новых аккаунтов доступ зависит от программы AWS Free Tier и предоставленных кредитов.
🔗 https://aws.amazon.com/amplify/
Важно: «бесплатно» не означает «без ограничений». Проверяйте лимиты, правила коммерческого использования и условия оплаты сверх бесплатной квоты.
Но для запуска первого проекта этих платформ более чем достаточно.
Необязательно сразу арендовать сервер и настраивать инфраструктуру. Для портфолио, MVP и небольших pet-проектов можно начать с бесплатных тарифов.
1. GitHub Pages - для статических сайтов
Подходит для портфолио, документации, лендингов и проектов на HTML, CSS и JavaScript.
Загружаете код в репозиторий — GitHub публикует сайт и выдаёт готовый адрес.
🔗 https://pages.github.com
2. Cloudflare Workers - для API и серверной логики
Позволяет запускать JavaScript и TypeScript на серверах Cloudflare рядом с пользователем.
Бесплатный тариф включает до 100 000 запросов в день. Хороший вариант для API, вебхуков, прокси и небольших backend-сервисов.
🔗 https://workers.cloudflare.com
3. Vercel - для Next.js и современного frontend
Подключаете GitHub, делаете push — Vercel автоматически собирает и публикует проект.
Для каждой ветки создаётся отдельная preview-ссылка. Бесплатный Hobby-тариф предназначен для личных и некоммерческих проектов.
🔗 https://vercel.com
4. Google Cloud Run - для Docker-контейнеров
Загружаете контейнер, а Google самостоятельно запускает и масштабирует приложение.
Когда запросов нет, сервис может уменьшить количество экземпляров до нуля. Есть постоянная бесплатная квота, но для подключения обычно требуется настроить биллинг.
🔗 https://cloud.google.com/run
5. AWS Amplify - для full-stack приложений
Amplify объединяет хостинг, автоматическую сборку, CI/CD и сервисы AWS.
Подходит для React, Next.js, Vue и мобильных приложений. У новых аккаунтов доступ зависит от программы AWS Free Tier и предоставленных кредитов.
🔗 https://aws.amazon.com/amplify/
Важно: «бесплатно» не означает «без ограничений». Проверяйте лимиты, правила коммерческого использования и условия оплаты сверх бесплатной квоты.
Но для запуска первого проекта этих платформ более чем достаточно.
Cloudflare
Cloudflare Workers - Global Serverless Functions Platform
Deploy serverless functions globally in seconds. No cold starts, 330+ cities, infinite concurrency, and pay only for CPU time. Support for JavaScript, TypeScript, Python, and Rust.
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по HTML 💡
Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩
Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩
👍3