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

Функция calc() в CSS Она позволяет делать математические вычисления прямо в CSS, чтобы верстка была гибкой и лучше адаптировалась под разные экраны. Поддерживает сложение, вычитание, умножение и деление Можно смешивать разные единицы: %, px, rem, vw Вокруг операторов + и - нужны пробелы Часто используют в адаптивной верстке: динамическая ширина, отступы, “плавающие” размеры шрифта. @WebDev_Plus

Вышла лучшая библиотека React 2026 года Она называется Sileo и представляет собой компонент уведомлений. ✓ Красивый по умолчанию, не требует настройки ✓ Несколько состояний и положений ✓ Анимация с помощью SVG → npm install sileo @WebDev_Plus

🔥 Пожизненная PRO-подписка на easyoffer по цене одного года. Беспрецедентная акция на PRO-тариф сайта для подготовки к собеседованию на программиста, тестировщика, проектного менеджера и другие IT-профессии. ⚙️ Доступные функции сейчас: 1. База вопросов из реальных технических собеседований с вероятностью встречи и примерами ответов. 2. База задач с этапа live-coding. 3. База 1100+ реальных собеседований, в том числе в топовые компании (Сбер, Авито, Яндекс, WB, OZON, МТС и др.) на позиции Junior/Middle/Senior. 4. База 400+ тестовых заданий от компаний. 5. Аналитика ТОП-требований из вакансий для лучшего написания резюме по ключевым словам. 6. Тренажеры для подготовки к собеседованию. В том числе тренажер «Реальное собеседование» со сценарием вопросов под конкретную компанию. ⌛️ Функции, которые появятся в ближайшие полгода: 1. Агрегатор вакансий из Telegram, сайтов компаний и джоббордов. 2. Улучшение и оптимизация резюме, чтобы проходить ATS-системы. 3. Генерация уникального резюме и сопроводительного письма под вакансию. Акция до 20 февраля (включительно) на PRO-тариф. Покупаешь сейчас один раз — пользуешься всю жизнь без лимита, включая все будущие функции. 👉 Смотри подробности тарифа и покупай на easyoffer

Условно обязательные поля в TypeScript через mapped types @WebDev_Plus

В теории графов есть алгоритмы, которые находят кратчайший путь между двумя узлами. Я сделал такой алгоритм на чистом 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