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

Создавай SVG-графики для своего сайта без библиотек Импортируй данные из Excel, CSV или вводи вручную. Доступно 8 разных типов, и всё это можно сделать за пару секунд. https://makegraph.app/ @WebDev_Plus

Разбирай HTML-ввод с помощью нового метода parseHTMLUnsafe() → https://goo.gle/4mXOH9d Теперь этот статический метод входит в Baseline. Он создаёт новый экземпляр Document из HTML-строки и при необходимости может выполнять очистку (санитизацию) содержимого. @WebDev_Plus

Ранее Postman лёг, потому что упал AWS. Похоже, пора попробовать что-то полегче — Yaak. ✓ Сделан на React, Rust и Tauri ✓ Поддерживает REST, GraphQL и WebSockets ✓ Без облаков и трекинга ✓ Полностью оффлайн Работает на Windows, macOS и Linux → github.com/mountain-loop/yaak @WebDev_Plus

Бесплатные поддомены для персональных сайтов https://github.com/is-a-dev/register/ @WebDev_Plus

5 инструментов для веб-разработчиков http://penpot.app - Альтернатива Figma с открытым исходным кодом http://sevalla.com - Full-stack хостинг для современных веб-приложений http://excalidraw.com - Диаграмма стилей, нарисованная от руки http://locomotivemtl.github.io/locomotive-scroll/ - Плавная прокрутка с эффектом параллакса http://maxwellito.github.io/vivus/ - Анимация SVG-рисунков в реальном времени @WebDev_Plus

Каждый JavaScript-разработчик хотя бы раз писал ${name} в обычных кавычках, сохранял файл и видел вместо Hello John просто "Hello ${name}". Потом, конечно, стирал и перепечатывал всё с обратными кавычками. Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}. Никаких настроек, команд или меню — всё происходит мгновенно и незаметно. Работает с JS, TS, JSX и TSX Понимает контекст (не трогает комментарии, импорты и другие строки) Маленькое улучшение, которое реально экономит время и бережёт нервы https://github.com/KartikLabhshetwar/quotick @WebDev_Plus

Хватит мучиться с вёрсткой писем. Забудь про таблицы — используй React Email. Каталог готовых компонентов, чтобы письма выглядели идеально в любом почтовом клиенте. → npx create-email @WebDev_Plus

Мигель поделился своими топ расширениями в Visual Studio Code Берем на заметку 💊 @WebDev_Plus

Отличный совет, реально полезная мелочь. Открой Настройки в VS Code (Ctrl + ,). В поиске набери mouse wheel zoom. Включи галочку Editor: Mouse Wheel Zoom. Теперь можно увеличивать или уменьшать масштаб просто прокруткой колеса мыши при зажатом Ctrl — без лишних клавиш и возни. Удобно, особенно если часто переключаешься между разными разрешениями экрана или показываешь код на стриме/презентации. @WebDev_Plus

Вот типичный сайт Geocities @WebDev_Plus

Хочешь сделать плавный drag & drop в React? Библиотека React dnd-kit — отличный выбор для создания перетаскиваемых, сортируемых и полностью кастомизируемых drag-and-drop интерфейсов. Это open source решение с кучей вариантов и настроек под любые задачи. Отличный способ прокачать интерактивность интерфейса в React :) github.com/clauderic/dnd-kit @WebDev_Plus

Да, это реально крутая штука для фронтендеров. Animatiss библиотека готовых CSS-анимаций, где всё разбито по категориям (вход, выход, внимание, текст, и т. д.). Можно просто выбрать нужный эффект, нажать «Copy CSS» и сразу вставить в проект — без лишних зависимостей или JS. Очень удобно для быстрых прототипов, лендингов или UI-деталей, которые хочется оживить. xsgames.co/animatiss @WebDev_Plus

Улучшай производительность рендеринга с помощью content-visibility: auto в CSS Это особенно полезно при отрисовке: длинных списков протяжённых веб-страниц дашбордов с кучей панелей @WebDev_Plus

Красивая визуализация маршрутов миграции китов — показано, где каждый вид пересекает океаны и как их пути совпадают с судоходными маршрутами и охраняемыми территориями. Посмотреть можно тут: bluecorridors.org @WebDev_Plus

Совет по CSS В Anchor Positioning можно использовать position-area, чтобы разместить элемент относительно его якоря — и, внезапно, возможных позиций аж 36 штук 😳 Запомнить всё это нереально, поэтому сделалb интерактивную демку, где можно просто выбрать нужное положение и сразу получить готовый код. https://css-tip.com/position-area/ @WebDev_Plus

Никогда больше не программируйте в одиночку в VSCode Это расширение добавляет домашних животных в ваш редактор @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля до React, TypeScript, Next.js — с поддержкой от наставника Подойдёт и новичкам, и тем, кто уже работает с JS и React На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 18 октября стартует бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новикам в HTML/CSS и JavaScript, а тем, кто с опытом — React, TypeScript, Next.js Всего сделаете три проекта: 💡 сайт-портфолио на HTML/CSS 💡 todo-list на React + TS 💡 фронтенд для магазина Озон на JavaScript + Next.js Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Если опыт есть — будет проще. Сможете набить руку на React, TS, Next 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Что будет кроме уроков: — пошаговый план изучения всего, что нужно современному фронтендеру — способы поиска заказов на фрилансе с помощью ИИ — разыграет годовой доступ к крутому ИИ — расскажет, как взять первый заказ на фрилансе, если на биржах не получается Подписывайтесь, чтобы участвовать, осталось 39 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду ➡️Участвовать бесплатно

Прогрессивные CSS-индикаторы пагинации без JS c anchor positioning

nav::before { position-anchor: --h; }
nav::before { left: anchor(left); }
a:hover { anchor-name: --h; }

Идея такая: наводишься на ссылку, у неё появляется якорное имя --h, а nav::before привязывается к этому якорю через position-anchor и выравнивается по left: anchor(left). Для разметки используй псевдоэлементы самого nav: ::before — для индикатора наведения (intent), ::after — для индикатора текущей страницы (current). @WebDev_Plus

Самый гибкий паттерн, который я нашел для построения составных интерфейсов — это headless store, то есть хранилище состояния без привязки к UI. Сначала ты создаешь экземпляр стора — локальный или глобальный, потом передаешь его в компоненты напрямую или через контекст. Такой подход дает больше контроля, чем render props, HOC, refs или классические compound-компоненты. Store отвечает за три простые вещи: хранит и управляет состоянием как единым источником правды, предоставляет методы для обновления состояния и выполняет сайд-эффекты, когда происходят изменения или переходы. Этого достаточно, чтобы собирать даже довольно сложные интерфейсы @WebDev_Plus

Как Apple делает эти безумные видеопереходы при прокрутке? Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline. Именно так, никаких слушателей событий прокрутки Получить фрагменты кода, подсказки и полное руководство можно здесь @WebDev_Plus