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

#карточки #hover

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

@javascriptv

16 августа — на ИТ-пикник

Событие месяца — семейный фестиваль для опытных ИТ-специалистов. Что в программе:
— Лекции топов индустрии.
— Интерактивы, квесты, мастер-классы.
— Общение, знакомства.
— Выступления известных музыкантов: «тима ищет свет», Тося Чайкина, «Второй Ка» и секретного артиста.

Фестиваль пройдет в музее-заповеднике «Коломенское»

Время отжигать, пока лето не закончилось. Подробности и билеты — на сайте ИТ-пикника

🐳 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. Открой https://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:: https://github.com/amantus-ai/vibetunnel


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

@javascriptv

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

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

🤖 GitHub

@javascriptv

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

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

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

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

https://roadmap.sh/

@javascriptv

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

@javascriptv

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

🎨 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

@javascriptv

10 репозиториев GitHub, которые помогут вам в обучении:

1. Бесплатные книги по программированию
2.Собеседование по программированию в университете
3.Списки на всевозможные интересные темы
4.Дорожная карта разработчика
5.Алгоритмы Javascript
6.Список лучших практик Node JS
7.Руководство по техническому собеседованию
8. Проектное обучение
9.Короткие фрагменты кода javascript для всех ваших потребностей в разработке
10.Список предложений Saas, Paas и Laas с бесплатными уровнями.

@javascriptv

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

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

https://web.dev/learn

📰 В России запустилась облачная платформа OneEntry — бесплатный backend с SDK для веб и мобильной разработки

OneEntry официально стартовала в России. Это облачная платформа, которая предоставляет готовый backend с административной панелью, SDK и всей необходимой инфраструктурой — без подписок и ограничений. Решение ориентировано на разработчиков, которые хотят сосредоточиться на frontend’е, не тратя время на настройку серверной части и DevOps.

☁️ OneEntry подключается к любому приложению через SDK и не навязывает структуру данных.
Платформа поддерживает JavaScript/TypeScript и все современные фреймворки: React, Next.js, Vue, Nuxt, Angular, React Native. Есть нативные SDK для Swift и Kotlin.

✅ Что важно знать о SDK:
• Полная типизация без лишних зависимостей
• Удобные методы работы с API
• Встроенная документация прямо в коде

📊 Функциональные возможности платформы:
• Создание и управление структурами данных через админку
• Мультиязычный интерфейс
• Роли и личные кабинеты пользователей
• Формы и сбор пользовательских данных
• Редактирование в реальном времени через WebSocket

🛒 Инструменты для e-commerce:
• Автоматическая генерация превью
• Оптимизация изображений
• Удобная работа с вложенными структурами
• Управление товарами, статусами и связями
• Приём оплат, заказы, рассылки, push-уведомления
• Массовая загрузка данных: Excel, XML, CSV, папки
• Интеграции через визуальный LowCode-редактор
• Поддержка собственных модулей на Node.js, Python и PHP


📌 Полезные ссылки:
— Платформа: oneentry.ru
— Документация: doc.oneentry.ru
— SDK: js-sdk.oneentry.ru
— Видеоинструкции: rutube.ru/channel/64747617

🔐 legid — безопасные короткие ID для ссылок, без сервера и базы

Минималистичная TypeScript-библиотека, которая генерирует безопасные, URL-дружественные ID без хранения в БД и без запросов на сервер.

Зачем это нужно?
Обычные ID вроде abc123 легко подменить — например, на admin. legid защищает от этого:

▪ ID содержит хеш-сигнатуру и соль — проверяется на подделку
▪ Работает полностью на клиенте
▪ Проверка на сервере — одной строчкой verifyId(id)
▪ Без внешних зависимостей
▪ Безопасно, быстро, удобно

📦 Пример:

const id = await createId({ approximateLength: 12, salt: 'legid:' })
// → "e3N4BRJW2d"

🧪 Проверка:

const isValid = await verifyId(id) // true / false

Полезно для:
— PWA / SPA с клиентской маршрутизацией
— генерации ссылок без БД
— frontend-only MVP/демо/форм
— предотвращения предсказуемых ID

📌 Установка:

pnpm add legid

Репозиторий: github.com/shuding/legid

💬 Создаем чат на Vue с WebSocket: интерактив в реальном времени 🚀

🔥21 июля в 20:00 мск. приглашаем на открытый вебинар в OTUS, на котором разберем:
- Почему WebSocket — это не просто альтернатива HTTP, а ключевая технология для приложений в реальном времени.
- Как Vue делает интерфейсы реактивными и позволяет обновлять их без перезагрузки.
- Подключение WebSocket к Vue-приложению для отправки и получения сообщений.
- Создание интерфейса чата с автофокусом, прокруткой вниз и другими полезными функциями.
- Погружение в ключевые концепции Vue: ref, watch, v-for, v-model.

Что узнаете:
- Как настроить WebSocket-соединение во Vue.
- Как мгновенно обновлять интерфейс при получении новых данных.
- Как собрать реальный чат за 1 час.

👉 Регистрируйтесь по ссылке: https://otus.pw/i3fb/?erid=2W5zFGDRKxc

Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

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

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

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

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

@javascriptv

📢 Выходцы из Jetbrains запилили годноту для Java/Kotlin-разработчиков.
 
Стартап называется ❇️ Explyt.
Они только что выкатили мощный релиз. 
Вкратце: это плагин в IDE, который сам генерирует тесты с интересными возможностями: 
✔️ Vibe debugging. За счет интеграции с IDE, плагин собирает данные по исполнению программы и генерирует тест по этим данным, что экономит время на тестировании и отлавливает ошибки на 80-90% (!) 
✔️ Агентский режим. Ассистент, который живёт в проекте и следит за покрытием, сам находит незакрытые места и предлагает тесты. Работает в фоне, как часть команды. 

👉 Кому интересно - вот ссылка на релиз и установку плагина

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

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

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

@javascriptv