WebDev+ | Веб-разработка

В теории графов есть алгоритмы, которые находят кратчайший путь между двумя узлами. Я сделал такой алгоритм на чистом CSS (включая отрисовку самого графа). Перетаскивай узлы, и кратчайший путь будет пересчитываться в реальном времени! [https://css-tip.com/graph-theory/] Демо, которое работает на всех современных CSS-фичах 🤩 @WebDev_Plus

JavaScript-совет К элементам массива можно обращаться с "отрицательными" индексами через метод at(). @WebDev_Plus

Этот ресурс просто бомба. Если вы ищете SVG-файл любого логотипа, то здесь он точно есть. Здесь доступно 581 файл. Оптимизированы и готовы к использованию в React, Vue, Angular и SVG: → https://svgl.app @WebDev_Plus

Совет по HTML/JavaScript: Если использовать у кнопки атрибут commandfor, можно прямо указать на интерактивный элемент (например, <dialog> или popover) и задать, что именно с ним сделать. @WebDev_Plus

Идеальный boilerplate, чтобы быстро собирать SaaS-проекты Сделан на Next.js и уже из коробки настроен: аутентификация, подписки Stripe, база данных, авторизация, Tailwind и современные UI-компоненты. Больше не нужно убивать дни на склейку auth и оплат. Просто клонируешь, настраиваешь и начинаешь пилить реальный продукт :) Источник: http://github.com/webdevcody/ppai-next-starter @WebDev_Plus

Видел эти мелкие “мертвые зоны” между плотно стоящими элементами списка? Я тоже стал замечать их чаще. Лечится просто: добавь каждому элементу CSS-псевдоэлемент ::before, чтобы расширить кликабельную область:

.item {
  position: relative;
}

.item::before {
  content: "";
  position: absolute;
  inset: -10px 0; /* расширяем область по вертикали на 10px */
}

Нюанс: чтобы не перекрыть клики, если внутри есть ссылки/кнопки, можно добавить pointer-events: none на ::before, а клики обрабатывать на самом .item (или наоборот, в зависимости от разметки). @WebDev_Plus

BridgeJS подъехал Вышел новый JS <-> Swift bridge, и он безумно быстрее текущего механизма. ⚡️По микробенчмаркам — примерно в 40 раз быстрее ⚡️Можно импортировать прямо из TypeScript type definitions https://github.com/swiftwasm/JavaScriptKit/releases/tag/0.44.0 Если работаешь со Swift + JS — это серьезный апгрейд. @WebDev_Plus

Нашел UI-библиотеку, которая меня прям дико, дико, дико выбесила. Выбесила тем, что почему так не устроено вообще все. Oat: * 6KB CSS + 2.2KB JS * ноль зависимостей * без фреймворка * без сборки * только семантический HTML Пишешь <button> и он выглядит нормально. Пишешь <dialog> и он выглядит нормально. Пишешь <input> и он выглядит нормально. Никакого className="px-4 py-2 rounded-md bg-blue-500". Никаких <Button variant="primary" size="md">. Просто HTML. Доступность на месте. Навигация с клавиатуры есть. Темная тема уже включена. Сделал Kailash Nadh (CTO в Zerodha). https://github.com/knadh/oat @WebDev_Plus

В бета-релизе TypeScript 6.0 появились новые типы для Temporal! Долгожданное предложение Temporal дошло до стадии 3 и, как ожидается, в ближайшем будущем будет добавлено в JavaScript. В TypeScript 6.0 теперь есть встроенные типы для Temporal API, так что ты можешь начать использовать его в своём TypeScript-коде уже сегодня через --target esnext или "lib": ["esnext"] (или более точечно через temporal.esnext).

let yesterday = Temporal.Now.instant().subtract({
  hours: 24,
});

let tomorrow = Temporal.Now.instant().add({
  hours: 24,
});

console.log(`Yesterday: ${yesterday}`);
console.log(`Tomorrow: ${tomorrow}`);

Temporal уже можно использовать в нескольких рантаймах, так что ты сможешь скоро начать с ним экспериментировать. Документация по Temporal API доступна на MDN, хотя она всё ещё может быть неполной. @WebDev_Plus

Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве OKLCH В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB Можно подробнее почитать об этом здесь @WebDev_Plus

Минималистичное опенсорсное приложение для заметок на macOS: http://github.com/erictli/scratch Основано на Markdown, offline-first, и хранит все как обычные .md файлы, которые реально принадлежат тебе. Никакого облака, аккаунтов и вообще интернет не нужен. Что кайфового: ➡️WYSIWYG-редактор, но сохраняет в Markdown ➡️Можно править заметки через Claude Code CLI ➡️Подхватывает внешние изменения (например, если другие AI-агенты поменяли файлы) ➡️Keyboard-first: шорткаты + command palette ➡️Кастомные темы и типографика ➡️Опциональная интеграция с Git для контроля версий ➡️Легкое и быстрое @WebDev_Plus

Самый популярный элемент HTML @WebDev_Plus

Нужно простое OTP (одноразовые пароли) для приложения? Есть легковесная либa, которая позволяет без лишнего веса генерить TOTP/HOTP коды в JavaScript. Норм вариант для 2FA, флоу верификации или безопасного логина, когда не хочется тащить тяжёлые зависимости :) http://github.com/hectorm/otpauth @WebDev_Plus

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сгенерировать сайт через Giga, DeepSeek, ChatGPT - Сверстать страницу на HTML + CSS по Figma макету - Оживить её логикой на JavaScript - Превратить сайт во фронтенд-приложение на Angular - Подключить backend и выложить проект на хостинг Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. Стартуем завтра.

Знакомьтесь: json-render × React Native Еще один шаг к UGI (User-Generated Interfaces), на базе Generative UI. Динамические, персонализированные интерфейсы под каждого пользователя без потери надежности. Заранее заданные компоненты и экшены дают безопасный, предсказуемый результат. @WebDev_Plus

Аннотация типа (type annotation) vs satisfies + as const в TypeScript @WebDev_Plus

Это прям топ, если хочешь реально глубоко врубиться в TypeScript Это красиво сделанный интерактивный ресурс, который объясняет концепты TypeScript визуально, а не только текстом и код-блоками. Можно прямо “пощупать” как работают типы через живые визуализации, из-за чего сложные штуки доходят заметно быстрее. И ещё кайф: есть опциональные клавиатурные хоткеи, так что можно плавно переключаться между примерами и концентрироваться на обучении, а не на бесконечном скролле :) Источник : http://types.kitlangton.com @WebDev_Plus

Современный способ смотреть npm-пакеты, и он реально молниеносный NPMX это новый браузер для npm registry, который делает упор на скорость и удобство для разработчиков. Никакого мусора. Никаких тормозных страниц. Просто мгновенная инфа по пакету, когда она нужна :) Источник : [http://npmx.dev] @WebDev_Plus

Фильтрация свойств объекта по типу в TypeScript @WebDev_Plus

Имба тулза для проверки веб-производительности. Сканирует весь сайт и выставляет оценку каждой странице. По сути, это Lighthouse, но с обзором всего сайта целиком. Запускается так: npx unlighthouse --site <твой-сайт> @WebDev_Plus