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

Валидатор паролей с использованием HTML, CSS и JavaScript

Код: тык

@WebDev_Plus

Одна из самых крутых штук, которые можно сделать с TypeScript:

обрати внимание, что подсказки автодополнения зависят от входных данных функции-билдера.

@WebDev_Plus

Получить размеры экрана через простой calc()? Да, можно

https://css-tip.com/screen-dimension/

Мы всё ещё ждём, когда Firefox подтянется, и тогда этот кусок кода станет любимчиком у многих разработчиков.

(Пока что есть другой способ с лучшей поддержкой.)

@WebDev_Plus

Не нужно разбирать строки через [...spread] или .split()

Используй Intl.Segmenter API — он доступен во всех JS-рантаймах.

@WebDev_Plus

Разработчик из factory droids сделал Chrome-расширение, которое помогает навести порядок в браузере. Tab Stash позволяет «спрятать» десятки (а то и сотни) вкладок, чтобы вернуться к ним позже и наконец-то добраться до заветного tab zero 😰

Установить: Tab Stash в Chrome Web Store
Исходники: github.com/iannuttall/tab-stash

@WebDev_Plus

Создавай 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