🎮 Учимся Flexbox с Flexbox Froggy
Flexbox Froggy — это увлекательная игра для освоения CSS Flexbox. Игроки помогают лягушонку добраться до лилий, используя правильные свойства flexbox. Идеально подходит для новичков и разработчиков, желающих улучшить свои навыки в верстке.
🚀Основные моменты:
- Интерактивный подход к обучению CSS Flexbox
- Более 20 уровней с нарастающей сложностью
- Поддержка нескольких языков
- Открытый исходный код и возможность внесения вкладов
📌 GitHub: https://github.com/thomaspark/flexboxfroggy
#javascript
Flexbox Froggy — это увлекательная игра для освоения CSS Flexbox. Игроки помогают лягушонку добраться до лилий, используя правильные свойства flexbox. Идеально подходит для новичков и разработчиков, желающих улучшить свои навыки в верстке.
🚀Основные моменты:
- Интерактивный подход к обучению CSS Flexbox
- Более 20 уровней с нарастающей сложностью
- Поддержка нескольких языков
- Открытый исходный код и возможность внесения вкладов
📌 GitHub: https://github.com/thomaspark/flexboxfroggy
#javascript
❤17👍5👎1😱1
This media is not supported in your browser
VIEW IN TELEGRAM
Иногда смотришь на чужой сайт и думаешь: “вот бы забрать этот блок/кнопку/анимацию себе” 😄
Нашёл удобный инструмент - MiroMiro.
Он позволяет в пару кликов *скопировать любой элемент со страницы* и сразу получить всё, что нужно для повторения дизайна:
- CSS стили
- картинки
- SVG
- Lottie-анимации
- палитру цветов
Полезно, когда делаешь лендинги, UI или просто собираешь референсы без ручного ковыряния DevTools.
miromiro.app
Нашёл удобный инструмент - MiroMiro.
Он позволяет в пару кликов *скопировать любой элемент со страницы* и сразу получить всё, что нужно для повторения дизайна:
- CSS стили
- картинки
- SVG
- Lottie-анимации
- палитру цветов
Полезно, когда делаешь лендинги, UI или просто собираешь референсы без ручного ковыряния DevTools.
miromiro.app
❤20👍6🔥5
Ты научишься делать те, которые живут в проде.
Это не про BeautifulSoup ради галочки.
Это про системы сбора данных, которые:
• не падают от мелких правок на сайте
• собирают данные в разы быстрее
• обновляют всё сами по расписанию
• обходят ограничения и баны
• выглядят как сервис, а не хаос из файлов
Ты начнёшь видеть сайты не как страницы, а как источники данных, к которым можно подключиться.
В итоге ты сможешь:
• забирать данные для своих проектов
• автоматизировать чужую рутину
• делать инструменты для аналитики
• брать коммерческие заказы на сбор данных
Это навык, который напрямую превращается в деньги.
Не “знаю Python”, а умею добывать данные из интернета профессионально.
🎁 48 часов скидка 50% на Stepik: https://stepik.org/a/269942/
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Если React кажется сложным и абстрактным - проблема чаще всего не в вас, а в подаче. Когда не видно, что происходит под капотом, всё превращается в магию из хуков и стейтов.
Этот сайт решает именно это. Он показывает React визуально:
как рендерится интерфейс, как обновляется состояние, что происходит при изменениях и почему компонент ведёт себя именно так.
Не просто теория, а понимание механики.
Заходите и разберитесь в React по-настоящему:
https://react.gg/visualized
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤8👍5😁1🤯1🤬1
This media is not supported in your browser
VIEW IN TELEGRAM
Советы по HTML 💡
Знаете ли вы, что с помощью элемента HTML <dialog> можно легко создать модал?
Знаете ли вы, что с помощью элемента HTML <dialog> можно легко создать модал?
🔥21👍8❤2
🎨 Создавайте красивые диаграммы с beautiful-mermaid!
Этот инструмент позволяет быстро генерировать диаграммы Mermaid в формате SVG или ASCII, с возможностью кастомизации тем и без зависимостей от DOM. Идеально подходит для визуализации данных в терминале или интерфейсах.
🚀Основные моменты:
- Поддержка 5 типов диаграмм: потоки, состояния, последовательности и др.
- Двойной вывод: SVG для UI и ASCII для терминалов.
- 15 встроенных тем и простота добавления собственных.
- Мгновенное переключение тем без перерисовки.
- Высокая скорость рендеринга — более 100 диаграмм за 500 мс.
📌 GitHub: https://github.com/lukilabs/beautiful-mermaid
#typescript
Этот инструмент позволяет быстро генерировать диаграммы Mermaid в формате SVG или ASCII, с возможностью кастомизации тем и без зависимостей от DOM. Идеально подходит для визуализации данных в терминале или интерфейсах.
🚀Основные моменты:
- Поддержка 5 типов диаграмм: потоки, состояния, последовательности и др.
- Двойной вывод: SVG для UI и ASCII для терминалов.
- 15 встроенных тем и простота добавления собственных.
- Мгновенное переключение тем без перерисовки.
- Высокая скорость рендеринга — более 100 диаграмм за 500 мс.
📌 GitHub: https://github.com/lukilabs/beautiful-mermaid
#typescript
👍5❤3
Microsoft выпустили TypeScript 6.0 Beta. В релизе — улучшения производительности, более точная типизация и изменения, которые упрощают работу с большими проектами.
Вот основные изменения.
Быстрее работа компилятора
- Улучшена производительность проверки типов
- Быстрее сборка крупных проектов
- Оптимизации для больших monorepo
TypeScript продолжает фокусироваться на скорости, особенно для больших кодовых баз.
Улучшения типизации
- Более точный вывод типов в сложных сценариях
- Улучшения для generics
- Лучшая работа с union и conditional types
Меньше ситуаций, где приходится явно указывать типы вручную.
ECMAScript и совместимость
- Поддержка новых возможностей JavaScript
- Улучшенная совместимость с современными runtime и bundler’ами
- Обновления для работы с Node.js и современными инструментами сборки
Инструменты и DX
- Более понятные сообщения об ошибках
- Улучшения в Language Service (автодополнение, навигация)
- Улучшенная работа редакторов (VS Code и др.)
Почему это важно
Релиз не про новые «синтаксические фичи», а про:
- скорость
- стабильность
- удобство разработки
- масштабируемость для больших проектов
Если у вас большой TypeScript-проект, обновление может дать заметный прирост производительности.
💥 Источник: https://devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤4🔥2🥰1
📚🚀 Prismer.AI — Альтернатива OpenAI Prism для научных исследований
Prismer.AI — это открытая платформа для управления академическим процессом, от чтения статей до публикации. Она включает в себя AI-ридер PDF, облачное управление контекстом и редактор LaTeX, что делает её уникальной в сравнении с традиционными инструментами.
🚀Основные моменты:
- AI-ридер с графами цитирования
- Облачное управление знаниями с SDK
- Поддержка анализа данных в Jupyter
- Проверка цитат на соответствие базам данных
- Многоагентная система для исследований
📌 GitHub: https://github.com/Prismer-AI/Prismer
#typescript
Prismer.AI — это открытая платформа для управления академическим процессом, от чтения статей до публикации. Она включает в себя AI-ридер PDF, облачное управление контекстом и редактор LaTeX, что делает её уникальной в сравнении с традиционными инструментами.
🚀Основные моменты:
- AI-ридер с графами цитирования
- Облачное управление знаниями с SDK
- Поддержка анализа данных в Jupyter
- Проверка цитат на соответствие базам данных
- Многоагентная система для исследований
📌 GitHub: https://github.com/Prismer-AI/Prismer
#typescript
GitHub
GitHub - Prismer-AI/Prismer: Open Source OpenAI Prism Alternative
Open Source OpenAI Prism Alternative. Contribute to Prismer-AI/Prismer development by creating an account on GitHub.
🔥4❤2👍2👎1
Weekend Offer Multitrack: быстрый найм для опытных специалистов
Приглашаем бэкенд-разработчиков с опытом от 5 лет на C++, Python, Go или Java/Kotlin получить офер за 2 дня и поработать в трёх командах Яндекса на выбор.
Приходите, если вам важно видеть результат своей работы в живых системах и метриках, а не только в merged PR.
Как всё проходит:
🟢 До 6 марта — регистрация на сайте.
🟢 14 марта — технические секции.
🟢 15 марта — финальная секция и офер.
После получения офера у вас будет возможность выбрать три команды и в течение нескольких недель поочерёдно поработать в каждой. Такой формат позволит не только познакомиться с коллегами и технологическим стеком, но и оценить задачи и рабочие процессы в каждой команде.
Подробности и форма регистрации — по ссылке.
Приглашаем бэкенд-разработчиков с опытом от 5 лет на C++, Python, Go или Java/Kotlin получить офер за 2 дня и поработать в трёх командах Яндекса на выбор.
Приходите, если вам важно видеть результат своей работы в живых системах и метриках, а не только в merged PR.
Как всё проходит:
После получения офера у вас будет возможность выбрать три команды и в течение нескольких недель поочерёдно поработать в каждой. Такой формат позволит не только познакомиться с коллегами и технологическим стеком, но и оценить задачи и рабочие процессы в каждой команде.
Подробности и форма регистрации — по ссылке.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👍3
⚡️ Google: AI-агенты могут радикально изменить доступность технологий.
Идея простая, но мощная, вместо того чтобы адаптировать интерфейсы под людей, агенты сами адаптируют технологии под каждого пользователя.
Что меняется:
- Интерфейс больше не фиксированный
AI-агент может стать «прослойкой» между человеком и приложением:
упрощать сложные формы, объяснять действия, автоматизировать шаги и переводить интерфейс в удобный формат.
- Персонализация в реальном времени
Агент учитывает:
- особенности зрения, слуха, моторики
- когнитивную нагрузку
- уровень цифровых навыков
- язык и контекст
И подстраивает взаимодействие под конкретного человека.
- Естественное взаимодействие
Вместо кнопок и меню:
- голос
- текст
- разговорный интерфейс
Пользователь может просто сказать:
«Заполни заявку», «Найди счёт», «Отправь письмо».
- Автоматизация сложных задач
AI может:
- заполнять формы
- навигировать по сайтам
- выполнять многошаговые процессы
- работать с несколькими системами одновременно
- Universal Design нового уровня
Классическая доступность — это отдельные режимы (screen reader, увеличенный текст и т.д.).
С агентами доступность становится динамической и индивидуальной, а не одинаковой для всех.
Почему это важно:
Многие цифровые сервисы недоступны не из-за отсутствия функций, а из-за сложности интерфейсов.
AI-агенты могут убрать этот барьер, превращая сложные системы в простой разговор.
Главный вывод:
Следующий этап доступности — это не новые кнопки и настройки.
Это персональный AI-помощник, который адаптирует весь цифровой мир под человека.
https://research.google/blog/how-ai-agents-can-redefine-universal-design-to-increase-accessibility/
Идея простая, но мощная, вместо того чтобы адаптировать интерфейсы под людей, агенты сами адаптируют технологии под каждого пользователя.
Что меняется:
- Интерфейс больше не фиксированный
AI-агент может стать «прослойкой» между человеком и приложением:
упрощать сложные формы, объяснять действия, автоматизировать шаги и переводить интерфейс в удобный формат.
- Персонализация в реальном времени
Агент учитывает:
- особенности зрения, слуха, моторики
- когнитивную нагрузку
- уровень цифровых навыков
- язык и контекст
И подстраивает взаимодействие под конкретного человека.
- Естественное взаимодействие
Вместо кнопок и меню:
- голос
- текст
- разговорный интерфейс
Пользователь может просто сказать:
«Заполни заявку», «Найди счёт», «Отправь письмо».
- Автоматизация сложных задач
AI может:
- заполнять формы
- навигировать по сайтам
- выполнять многошаговые процессы
- работать с несколькими системами одновременно
- Universal Design нового уровня
Классическая доступность — это отдельные режимы (screen reader, увеличенный текст и т.д.).
С агентами доступность становится динамической и индивидуальной, а не одинаковой для всех.
Почему это важно:
Многие цифровые сервисы недоступны не из-за отсутствия функций, а из-за сложности интерфейсов.
AI-агенты могут убрать этот барьер, превращая сложные системы в простой разговор.
Главный вывод:
Следующий этап доступности — это не новые кнопки и настройки.
Это персональный AI-помощник, который адаптирует весь цифровой мир под человека.
https://research.google/blog/how-ai-agents-can-redefine-universal-design-to-increase-accessibility/
👍10🤔4❤2👎2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
• TypeHero – платформа для практики TypeScript. Готовые задачи разного уровня и возможность создавать свои — отличный способ набить руку на типах
• TSdiagram – open-source инструмент: вставляете TS-файл и мгновенно получаете наглядную диаграмму интерфейсов, типов, классов и их связей. Очень удобно для разбора чужого кода или архитектуры
• Visual Types – интерактивный мини-курс в формате playground’а, который помогает разобраться в сложных типах через эксперименты прямо в браузере
Добавляйте в закладки — пригодится каждому, кто работает с TypeScript 👍
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14👍3🔥2
🚀 CodePilot: GUI для Claude Code
CodePilot — это настольное приложение с графическим интерфейсом для взаимодействия с Claude Code. Оно позволяет удобно общаться, писать код и управлять проектами без использования терминала. Приложение поддерживает управление сессиями, визуализацию файлов и настройку разрешений.
🚀 Основные моменты:
- 💬 Реальное взаимодействие с Claude с поддержкой Markdown и подсветки синтаксиса.
- 📂 Удобное управление сессиями и сохранение разговоров в SQLite.
- 🎯 Контекст проекта с живым деревом файлов.
- 🔒 Настройка разрешений для действий.
- ⚙️ Поддержка нескольких режимов взаимодействия.
📌 GitHub: https://github.com/op7418/CodePilot
#javascript
CodePilot — это настольное приложение с графическим интерфейсом для взаимодействия с Claude Code. Оно позволяет удобно общаться, писать код и управлять проектами без использования терминала. Приложение поддерживает управление сессиями, визуализацию файлов и настройку разрешений.
🚀 Основные моменты:
- 💬 Реальное взаимодействие с Claude с поддержкой Markdown и подсветки синтаксиса.
- 📂 Удобное управление сессиями и сохранение разговоров в SQLite.
- 🎯 Контекст проекта с живым деревом файлов.
- 🔒 Настройка разрешений для действий.
- ⚙️ Поддержка нескольких режимов взаимодействия.
📌 GitHub: https://github.com/op7418/CodePilot
#javascript
GitHub
GitHub - op7418/CodePilot: A desktop GUI for Claude Code — chat, code, and manage projects visually. Built with Electron + Next.js.
A desktop GUI for Claude Code — chat, code, and manage projects visually. Built with Electron + Next.js. - op7418/CodePilot
❤5👍2🔥1
🎨 Превратите диаграммы Mermaid в красивые SVG и ASCII
Pretty-Mermaid Skills — это инструмент для рендеринга диаграмм Mermaid, поддерживающий SVG и ASCII. Он предлагает множество тем и высокую производительность, идеально подходит для интеграции с AI-инструментами.
🚀 Основные моменты:
- Поддержка нескольких форматов: SVG и ASCII
- 15 встроенных тем для разных сценариев
- Полная поддержка диаграмм: потоки, последовательности и др.
- Высокая производительность с параллельным рендерингом
- Готовые шаблоны и подробная документация
📌 GitHub: https://github.com/imxv/Pretty-mermaid-skills
#javascript
Pretty-Mermaid Skills — это инструмент для рендеринга диаграмм Mermaid, поддерживающий SVG и ASCII. Он предлагает множество тем и высокую производительность, идеально подходит для интеграции с AI-инструментами.
🚀 Основные моменты:
- Поддержка нескольких форматов: SVG и ASCII
- 15 встроенных тем для разных сценариев
- Полная поддержка диаграмм: потоки, последовательности и др.
- Высокая производительность с параллельным рендерингом
- Готовые шаблоны и подробная документация
📌 GitHub: https://github.com/imxv/Pretty-mermaid-skills
#javascript
👍4❤2
⚡️ Cloudflare переписали альтернативу Next.js… за неделю.
Компания представила vinext - фреймворк, примерно на 94% совместимый с Next.js, но построенный на Vite и работающий напрямую в Cloudflare Workers.
Самое интересное - скорость разработки.
Проект был создан всего за одну неделю и разрабатывался вместе с AI.
Что это значит:
- крупные фреймворки теперь можно пересобирать заново очень быстро
- стоимость разработки таких проектов резко падает
- инфраструктурные и платформенные эксперименты становятся дешевыми
https://x.com/Cloudflare/status/2026415441149571095
Компания представила vinext - фреймворк, примерно на 94% совместимый с Next.js, но построенный на Vite и работающий напрямую в Cloudflare Workers.
Самое интересное - скорость разработки.
Проект был создан всего за одну неделю и разрабатывался вместе с AI.
Что это значит:
- крупные фреймворки теперь можно пересобирать заново очень быстро
- стоимость разработки таких проектов резко падает
- инфраструктурные и платформенные эксперименты становятся дешевыми
https://x.com/Cloudflare/status/2026415441149571095
👎18❤12😁3👍2
🤖 Запустите Moltbot в Cloudflare Sandbox
Moltworker позволяет запускать персонального AI-ассистента Moltbot в среде Cloudflare, обеспечивая управляемую и всегда доступную среду без необходимости самостоятельного хостинга. Проект демонстрирует возможность работы Moltbot в облачной песочнице, включая поддержку нескольких платформ для общения.
🚀 Основные моменты:
- Персональный AI-ассистент с поддержкой Telegram, Discord и Slack
- Веб-интерфейс для управления чатами
- Безопасная аутентификация и управление устройствами
- Хранение истории чатов для постоянного доступа
- Опциональное использование R2 для хранения данных
📌 GitHub: https://github.com/cloudflare/moltworker
Moltworker позволяет запускать персонального AI-ассистента Moltbot в среде Cloudflare, обеспечивая управляемую и всегда доступную среду без необходимости самостоятельного хостинга. Проект демонстрирует возможность работы Moltbot в облачной песочнице, включая поддержку нескольких платформ для общения.
🚀 Основные моменты:
- Персональный AI-ассистент с поддержкой Telegram, Discord и Slack
- Веб-интерфейс для управления чатами
- Безопасная аутентификация и управление устройствами
- Хранение истории чатов для постоянного доступа
- Опциональное использование R2 для хранения данных
📌 GitHub: https://github.com/cloudflare/moltworker
❤2👍1
🚀 X/Twitter Research Agent for AI
Эффективный CLI-инструмент для работы с X API. Позволяет искать, фильтровать и мониторить твиты, получая исследовательские данные без лишних усилий. Идеален для взаимодействия с AI-агентами и анализа контента.
🚀Основные моменты:
- Поиск твитов с сортировкой и фильтрацией
- Мониторинг аккаунтов через списки наблюдения
- Быстрый режим для экономии ресурсов
- Кэширование запросов для снижения затрат
- Прозрачность расходов на каждую операцию
📌 GitHub: https://github.com/rohunvora/x-research-skill
#typescript
Эффективный CLI-инструмент для работы с X API. Позволяет искать, фильтровать и мониторить твиты, получая исследовательские данные без лишних усилий. Идеален для взаимодействия с AI-агентами и анализа контента.
🚀Основные моменты:
- Поиск твитов с сортировкой и фильтрацией
- Мониторинг аккаунтов через списки наблюдения
- Быстрый режим для экономии ресурсов
- Кэширование запросов для снижения затрат
- Прозрачность расходов на каждую операцию
📌 GitHub: https://github.com/rohunvora/x-research-skill
#typescript
🔥8😁2
Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.
Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat.
Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.
UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.
Когда я пишу код фронтенда, я хочу иметь логи. Но с некоторыми требованиями:
— логи должны быть полностью типизированными (чтобы использовать в Typescript)
— они должны быть небольшими
— у логов должны быть цветные ярлыки
— мне нужны разные уровни логов
— должна быть возможность скрывать некоторые логи в зависимости от условий (мб, в продакшен-сборке)
— должна быть возможность отправлять эти логи куда-то еще (мб, в Sentry).
После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям.
Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?
Библиотека действительно проста в использовании. Практически plug-and-play.
Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку.
Please open Telegram to view this post
VIEW IN TELEGRAM
👎6👍3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Я смотрю, как AI-скептики вручную верстают лендинг, потому что «LLM - это всего лишь предсказание следующего токена».
😁27👎7👍5🥰1
Уложить карту, графики, фильтры и таблицы на один экран, дать пользователю гибкость, при этом не сломать UX и не перегрузить браузер — звучит мощно.
Так мы переделали интерфейс 2ГИС Про (это наш сервис геоаналитики для бизнеса) от визуальной модели до архитектуры. Ниже — лишь часть наших обновлений.
🔰 Сетка и адаптивность
🔰 Карта теперь виджет
🔰 Без потери событий
🔰 Кастомные ручки изменения размера карточки
🔰 Виртуализация и производительность
🔰 Плавные анимации и скрытие виджетов
Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты.
Полный разбор с кодом и архитектурными решениями в нашей статье на Хабр
Другие инженерные инсайты от 2ГИС → в Telegram-канале RnD
Так мы переделали интерфейс 2ГИС Про (это наш сервис геоаналитики для бизнеса) от визуальной модели до архитектуры. Ниже — лишь часть наших обновлений.
🔰 Сетка и адаптивность
🔰 Карта теперь виджет
🔰 Без потери событий
🔰 Кастомные ручки изменения размера карточки
🔰 Виртуализация и производительность
🔰 Плавные анимации и скрытие виджетов
Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты.
Полный разбор с кодом и архитектурными решениями в нашей статье на Хабр
Другие инженерные инсайты от 2ГИС → в Telegram-канале RnD
❤1