Лучшие графики для твоего веба или приложения

Lightweight Charts реально выделяются:

✓ Поддержка React, Vue и Web Components
✓ Адаптивны и отлично работают на мобилках
✓ Построены на JavaScript и canvas
✓ Оптимизированы для больших объёмов данных

Идеально, если нужно что-то лёгкое, но мощное.

→ https://tradingview.com/lightweight-charts

@WebDev_Plus

Это, пожалуй, одно из самых безумных расширений для редактора, что я видел за последнее время.

GitLantis превращает структуру проекта в 3D-модель подводного мира.
Да-да, вы «ныряете» сквозь директории среди буйков и маяков

Не спрашивайте зачем. Просто попробуйте.

@WebDev_Plus

Это must-have инструмент для каждого веб-разработчика

Он позволяет конвертировать любой URL в разные форматы Markdown, PDF, текст, изображения и другие — всего в пару кликов.

https://www.urltoany.com/

@WebDev_Plus

С помощью CSS можно использовать новую функцию sibling-index(), чтобы определить позицию элемента среди его соседей. Также доступна функция sibling-count(), которая возвращает общее количество соседних элементов.

Результаты этих функций можно использовать и в псевдоэлементах.

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

.container div { 
  border: calc(sibling-index() * 2px) solid;
  opacity: calc(sibling-index() / sibling-count());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index(); /* работают с текущим div */
}

Функции довольно громоздкие, поэтому можно определить кастомные функции и сократить код.

@function --N() {
  result: sibling-count();
}
@function --i() {
  result: calc(sibling-index() - 1); /* начинаем с нуля, а не с единицы */
}

.container div { 
  border: calc(--i() * 2px) solid;
  opacity: calc(--i() / --N());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N --N() i --i();
}

@WebDev_Plus

Вот это круто

Рассмотри нестандартный способ управления 3D-сценой одновременно в нескольких окнах браузера.

Всё реализовано с помощью библиотеки Three.js и localStorage.

Он использует localStorage, чтобы определить новое окно и сохраняет счётчик. Это даёт каждому новому окну (при одинаковом origin) уникальный ID.

Дальше взаимодействие между сферами, основанное на определении их позиций внутри окна.

Для этого используется window.screenLeft чтобы узнать расстояние от левого края экрана до начала окна,
и window.innerWidth чтобы получить ширину окна. Эти значения позволяют рассчитать позиции всех окон.

Затем сцена рендерится с помощью Three.js.

@WebDev_Plus

Интерактивные упражнения для изучения SQL

✓ Бесплатно, от простого до экспертного уровня
✓ Более 50 задач, которые нужно решить

→ sql-practice․com

@WebDev_Plus

Одно из самых недооценённых расширений для VS Code

Позволяет визуализировать любой JSON-файл в виде красивого интерактивного графа — значительно упрощает разбор сложных структур данных.

@WebDev_Plus

Опенсорсный интернет-магазин на Next.js:

✓ 100 баллов Web Performance «из коробки»
✓ SEO и мета-данные уже оптимизированы
✓ Современный минималистичный UI
✓ Интеграция с Shopify

→ http://github.com/vercel/commerce

@WebDev_Plus

Вот самый простой способ прокачать JavaScript

Просто вставляешь свой JS-код — и приложение наглядно показывает, как движок JavaScript исполняет его шаг за шагом.

Идеальный инструмент, чтобы разобраться в работе JS под капотом.

https://www.jsv9000.app/

@WebDev_Plus

Новая синтаксис для адаптивной вёрстки

Более понятный и с полной поддержкой во всех браузерах:

/* Новый способ с использованием синтаксиса диапазонов */
@media (width >= 300px) {}
@media (width < 1000px) {}
@media (640px <= width < 768px) {}

/* Классический способ */
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
@media (min-width: 640px) and (max-width: 768px) {}

@WebDev_Plus

CSS-подсказка:

С помощью современных фич вроде sibling-index() и if() вы можете воспроизвести поведение селектора :nth-child(An + B).

Зачем это нужно?

Чтобы легко менять A и B, ведь теперь это переменные

Да-да, для тех, кто вечно гуглит: «как обновить nth-child в чистом CSS?!» — вот решение.

@WebDev_Plus

Самые типовые лейауты для веба и приложений на CSS — с готовым кодом на Flex и Grid, который можно сразу копировать

→ http://layout.bradwoods.io

@WebDev_Plus

Инструмент для анализа производительности веб-сайта

Сканирует всю страницу и выставляет оценку каждому разделу.

Это как Lighthouse, но с глобальным обзором всего сайта.

Запусти команду:

npx unlighthouse --site <твой-сайт>

@WebDev_Plus

Идеальная коллекция React-компонентов.

С открытым исходным кодом, поддержкой Tailwind 4.1 и доступностью

Называются UntitledUI. Просто копируй, вставляй и собирай интерфейс:

npx untitledui init

@WebDev_Plus

Знал ли ты, что в Chrome DevTools есть функция watch?

Можно ввести любое JS-выражение — и оно будет обновляться в реальном времени.
Отлично подходит для отслеживания активных элементов или атрибутов aria.

@WebDev_Plus

Знал об этом? В любом репозитории на GitHub замени «github» на «deepwiki» в URL.

Ты попадёшь на документацию, сгенерированную ИИ.
Можно задавать вопросы как в чате.

Настоящая находка, чтобы разбираться в коде без лишней траты времени

@WebDev_Plus