Карточка с появлением дополнительных функций при наведении на неё.

#карточки #hover

https://codepen.io/itbruno/pen/Exvjga

🐳 VibeTunnel — превращай любой браузер в терминал macOS

VibeTunnel от amantus‑ai позволяет запускать терминал Mac прямо в браузере — без сложных SSH‑конфигураций. Идеально, когда нужно удалённо vibe‑кодить или следить за сборками и AI‑агентами.

🔹 Особенности:
• Поддержка Apple Silicon (M1/M2/M3), macOS Sonoma+ :contentReference[oaicite:1]{index=1}
• Zero‑config: никаких SSH‑ключей или порт‑форвардинга :contentReference[oaicite:2]{index=2}
• Браузер‑доступ: HTTP‑сервер на localhost:4020, адаптивный UI + iOS‑приложение
• Сессии записываются в формате asciinema — можно пересматривать позже
• Безопасность: доступ только по localhost или через Tailscale/ngrok, есть пароль
📥 Установка и старт:
1. Скачай и помести приложение VibeTunnel в папку Applications (только Apple Silicon)
2. Запусти из меню macOS, и приложение поднимет сервер
3. Используй CLI vt, например:

vt --shell
vt npm run dev
vt claude --dangerously-skip-permissions
:contentReference[oaicite:6]{index=6}
4. Открой http://localhost:4020 в браузере или iOS‑приложении

⚙️ Архитектура:
• Меню‑приложение на Swift запускает сервер
• Сервер на TypeScript/Bun рендерит терминальные сессии через xterm.js
• Web UI — лёгкий фронтенд на Lit и Bun :contentReference[oaicite:7]{index=7}

🛠 Новое в `v1.0‑beta.2` (19 июня 2025):
• Новый веб‑фронтенд, ускоренный рендер терминала
• Поддержка открытия новых терминальных окон (AppleScript + Accessibility permissions)


🌍 Linux‑поддержка в пути: pull‑request открывает сервер на Go — скоро можно будет поднимать его и на Linux/macOS с одним бинарником :contentReference[oaicite:9]{index=9}

🙋 Кому подойдёт:
• Разработчики, хотят кодить через браузер с любого устройства
• Специалисты, запускающие долгие сборки или AI‑агентов
• Тимлиды, нуждающиеся в быстрой демонстрации рабочего процесса

🔗 GitHub::


Вывод: VibeTunnel — простой, но мощный инструмент для мобильного терминального доступа. Он объединяет нативный macOS-клиент, лёгкий сервер на Bun и отзывчивый Web UI — идеально для vibe-coding и контроля процессов на ходу.



https://github.com/amantus-ai/vibetunnel

🌐 isomorphic-git — Git на чистом JavaScript для браузера и Node.js. Уникальный проект, который переосмысливает работу с Git — теперь операции с репозиториями возможны прямо в браузере без серверных зависимостей. Библиотека воссоздает поведение классического Git, работая с файловой системой через адаптеры.

Удобно реализованы сложные операции: клонирование, коммиты и даже push/pull работают через Web-интерфейс, правда требуют CORS-прокси для внешних репозиториев. Есть встроенный CLI isogit для тестирования функциональности.

🤖 GitHub (https://github.com/isomorphic-git/isomorphic-git)

Полезный сайт для обучения — roadmap.sh (roadmap.sh)

На нем собраны интерактивные, наглядные дорожные карты для разных IT-направлений, языков и навыков (работа с Git, Docker и проч).

Все карты кликабельны — для каждой собраны полезные статьи и обучалки.

Еще тут есть квизы для самопроверки и AI Tutor — помощник, который накидывает персональный курс на нужную тему, если вы не нашли подходящую на сайте, и план обучения прямо в браузере.

https://roadmap.sh/

Импорт локальных изображений vs использование изображений из папки /public в Next.js

JavaScript Security Engineer (Browser Fingerprinting & Anti-fraud)

Ищем JS-эксперта для R&D в области кибербезопасности. Вам предстоит возглавить разработку SDK для сбора браузерных отпечатков на чистом JavaScript и сражаться с попытками реверс-инжиниринга.

Это не типичная frontend-разработка, а сложная и интересная работа на стыке безопасности и low-level JS.

Что предлагаем:
* ЗП: 300-450 тыс. руб. на руки (или в USDT)
* Формат: Полная удалёнка
* Проект: Уникальная anti-fraud система, работа в небольшой команде экспертов.

Звучит интересно? Все подробности, требования и контакты — в полной версии вакансии:
👉 https://telegra.ph/JavaScript-Security-Engineer-Browser-Fingerprinting--Anti-fraud-07-06 (https://telegra.ph/JavaScript-Security-Engineer-Browser-Fingerprinting--Anti-fraud-07-06)

🥾 Первый шаг в Angular - создаем приложение с нуля

Вводное знакомство с Angular - современным фреймворком для разработки веб-приложений. Мы расскажем о его основных концепциях, структуре и возможностях.

👉 Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое Angular и зачем он нужен
- Основные компоненты Angular:Модули, компоненты, директивы, пайпы, сервисы
- Работа с данными: привязка данных (data binding)
- Основы маршрутизации (routing)
- Простая форма и валидация
- Как запустить и протестировать приложение
- Какие результаты и навыки получат участники после вебинара?
Бесплатный вебинар проходит в рамках курса “Angular Developer“

Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3MzZCx

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

‍👩‍💻 Всем программистам посвящается!

Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Python — t.me/python_ready (https://t.me/+btCMGuDMJnYxMjcy)
🤔 InfoSec & Хакинг — t.me/hacking_ready (https://t.me/+nHxm_2FbGJI2NWNi)
🖥 SQL & Базы Данных — t.me/sql_ready (https://t.me/+HaA0WHfr99MyODNi)
🤖 Нейросети — t.me/neuro_ready (https://t.me/+GNyjnA4tsFc3NGQy)
👩‍💻 C/C++ — https://t.me/cpp_ready (https://t.me/+doooEb0AelhjMDcy)
👩‍💻 C# & Unity — t.me/csharp_ready (https://t.me/+wRM_Ab063QA5MmYy)
👩‍💻 Linux — t.me/linux_ready (https://t.me/+Io6XyiEqiGk1Zjg6)
📖 IT Книги — t.me/books_ready (https://t.me/+tUxf6YJuPP85ZWVi)
👩‍💻 Frontend — t.me/frontend_ready (https://t.me/+AFltotpUPbtmZGUy)
📱 JavaScript — t.me/javascript_ready (https://t.me/+cPL4dea5I6M3NzUy)
👩‍💻 Backend — t.me/backend_ready (https://t.me/+QyY0Ymb9yzExMmNi)
📱 GitHub & Git — t.me/github_ready (https://t.me/+06W1iob7AFRmZjBi)
👩‍💻 Java — t.me/java_ready (https://t.me/+0p7M3ypIMzhjZGJi)
👩‍💻 Весь IT — t.me/it_ready (https://t.me/+1J7chaZYDYc1ODVi)
👩‍💻 Bash & Shell — t.me/bash_ready (https://t.me/+kvs9JJ_btPpmNjAy)
🖼️ DevOps — t.me/devops_ready (https://t.me/+_CIQX2d-ej45NDdi)
🖥 Design — t.me/design_ready (https://t.me/+pkgyUxKhe2AyOWE6)

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

‍🎨 Oh‑My‑Logo — «волшебный» генератор логотипов от shinshin86

Oh‑My‑Logo — утилита с простым интерфейсом для создания уникальных логотипов прямо в терминале. Работает быстро, без лишнего визуального шума.

🛠️ Как это работает:
- Пользователь вводит название бренда (например, “MyStartup”) и краткое описание
- Утилита генерирует цветные ASCII- или Unicode‑логотипы с эффектом паддинга, обводки, рамки или градиента
- Вы можете пробовать разные стили и цвета прямо из командной строки

💡 Зачем это нужно:
- Быстро придумать временное оформление для README, скрипта или учебного проекта
- Стильно оформить вывод утилиты или CI-лог
- Упростить создание ASCII-баннера для скриптов или серверных инструментов

⚙️ Кому понравится:
- Разработчикам и DevOps инженерам, любящим CLI-стайл
- Авторам технической документации и проектных README
- Всем, кто хочет быстро и красиво оформить свои утилиты

✨ Вывод:
Oh‑My‑Logo — лёгкий способ добавить индивидуальности проектам в текстовом интерфейсе. Без GUI, без лишних шагов — просто командный стиль и творческий подход.

https://github.com/shinshin86/oh-my-logo

Красивый интерактивный учебник от команды Google Chrome — он прокачает вас в веб-разработке

Внутри отличные материалы по HTML, CSS, JS, доступности, тестированию и ещё куча всякого полезного.

https://web.dev/learn

🖥 Rio — open-source фреймворк для разработки веб-приложений на чистом Python: не нужен ни HTML, ни CSS, ни JS

— pip install rio-ui

Rio привносит в Python компоненты в стиле React.
Можно выбирать из множества встроенных компонентов и комбинировать их для создания своих собственных компонентов, а потом строить из тех свои приложения

Готовые приложения, созданные с помощью Rio могут работать как локально на вашей машине, так и в Интернете.

🖥 GitHub (https://github.com/rio-labs/rio)
🟡 Доки (https://rio.dev/docs/tutorial-tic-tac-toe/1-rio-setup)
🟡 Примеры готовых веб-приложений (https://rio.dev/examples)

Введение в Angular: основы и практические навыки

В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией.

👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Поймут, как устроен Angular и как с ним работать.
- Сумеют самостоятельно создать простое одностраничное приложение.
- Освоят основы архитектуры приложения: компоненты, модули и маршруты.
- Получат опыт настройки форм и базовой проверки данных.
- Будут готовы к дальнейшему изучению Angular и построению полноценных проектов.

Бесплатный вебинар проходит в рамках курса “Angular Developer“

Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3N4XmD

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Веб-разработчики, ловите полезный инструмент: MetaExplorer — мощное SEO-расширение прямо в браузере.

Показывает всё, что не так с вашей страницей:
– битые ссылки
– дубли заголовков
– кривые или отсутствующие мета‑теги
– проблемы с доступностью
– и другие SEO‑косяки, которые сложно отследить вручную

🚀 Подходит не только для фикса багов, но и для улучшения качества перед релизом.
Больше не нужно зарываться в DevTools или десятки валидаторов — всё видно сразу.

Очень удобная штука: https://www.metaexplorer.co/

Анимация загрузки для любителей чего-то необычного

#прелоадер #ожидание #загрузка

https://codepen.io/jkantner/pen/qBbjEVQ

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js". Запись: https://clck.ru/3NB7qH

Что будет на вебинаре?

- Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы.
- Почему поверхностные знания API тормозят рост и усложняют задачи.
- Что нужно знать о Node.js и серверной части, даже если вы не fullstack.
- Как уверенное понимание архитектуры влияет на производительность и автономность.
- Почему знание бэкенда усиливает вашу позицию на проекте и на рынке.

Что узнают участники?

- Как работает связка клиент–сервер: от запроса до ответа.
- Какие ошибки делают фронтендеры при работе с API — и как их избегать.
- Как знание Node.js помогает даже тем, кто пишет только клиентскую часть.
- Почему современный разработчик не может быть “только фронтом”.
- Как это знание влияет на скорость разработки.

Не забудьте записаться на урок и получить запись пред. вебинара: https://clck.ru/3NB7qH

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

✔️ Response-print-pdf — это UI Kit для создания PDF-файлов с использованием React и TypeScript.

С Response-print-pdf создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов.

Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения.

Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите:

☑️ Простоту в использовании
☑️ Готовые компоненты и шаблоны
☑️ 100% контроль макета
☑️ Интеграция динамических данных в PDF-файл

https://github.com/OnedocLabs/react-print-pdf

🤘 Пройди хардкорный тест по JavaScript+Angular

✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer".

⛔️ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ

⏰ Время прохождения теста ограничено 25 минут

✍️ПРОЙТИ ТЕСТ: https://clck.ru/3NB7jF

💣 Пройдете тест и получите:
✔️ Живое общение с экспертами
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576