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

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

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

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

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

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

@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

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

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

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

https://www.jsv9000.app/

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

→ sql-practice․com

@WebDev_Plus

Вот это круто

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

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

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

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

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

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

@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

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

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

https://www.urltoany.com/

@WebDev_Plus

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

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

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

@WebDev_Plus

CSS-совет

Сделал фигуру с помощью shape() и хочешь инвертировать её? Легко

Пара строк кода и у тебя есть как основная форма, так и её вырезанная (обратная) версия. Бонусом ты также можешь управлять отступами вокруг инвертированной формы.

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

Наткнулся на крутую коллекцию фоновых паттернов для современных сайтов.

Можно скопировать одним кликом — прям идеально для лендингов, hero-блоков или даже в качестве background у компонентов.

Полезная штука, чтобы быстро прокачать визуал без лишней возни.

→ http://patterncraft.fun

@WebDev_Plus

Наконец-то JavaScript начинает вести себя как взрослый язык.

Вот набор новых методов для Set, которые должны были быть добавлены лет 15 назад, но ладно хотя бы сейчас. Поддержка уже есть в 87% браузеров, так что можно юзать без костылей.

const frontEnd = new Set(['JavaScript', 'HTML', 'CSS'])
const backEnd = new Set(['JavaScript', 'Python', 'Go', 'Java'])

🔹 .intersection(otherSet)
Получить пересечение — то, что есть и в FrontEnd, и в BackEnd.
frontEnd.intersection(backEnd) → ['JavaScript']

🔹.union(otherSet)
Объединение без дубликатов.
frontEnd.union(backEnd) → ['JavaScript', 'HTML', 'CSS', 'Python', 'Go', 'Java']

🔹.difference(otherSet)
Разность: всё, что есть в FrontEnd, но нет в BackEnd.
frontEnd.difference(backEnd) → ['HTML', 'CSS']

🔹.symmetricDifference(otherSet)
Симметричная разность: всё, что есть только в одном из двух.
frontEnd.symmetricDifference(backEnd) → ['HTML', 'CSS', 'Python', 'Go', 'Java']

🔹.isSubsetOf(otherSet)
Проверка: все ли элементы FrontEnd есть в BackEnd?
frontEnd.isSubsetOf(backEnd) → false

🔹 .isSupersetOf(otherSet)
Проверка: содержит ли FrontEnd все элементы BackEnd?
frontEnd.isSupersetOf(backEnd) → false

🔹.isDisjointFrom(otherSet)
Есть ли вообще общие элементы?
frontEnd.isDisjointFrom(backEnd) → false

Array.from(set).filter(...), уже в прошлом. Это не 2008. Эти методы читаются лучше, работают быстрее и наконец-то делают Set тем, чем он должен быть: множество, а не декоративная коллекция для новичков.

Use them.

@WebDev_Plus

Чувак, это просто чума

4000+ 3D-иконок, сгенерированных ИИ — идеально для веба, фронта, UI, презентаций инвесторам, чего угодно.

Каждая иконка выглядит так, будто её рисовал дизайнер из YC

Вот линк, проверь сам: thiings.co 🥺

@WebDev_Plus

CSS Box Shadow и Drop Shadow

🔹box-shadow — добавляет тень к прямоугольной рамке элемента (включая фон и границы).

🔹drop-shadow — работает как фильтр, отбрасывает тень по форме самого элемента (полезно для PNG с прозрачностью).

box-shadow → тень по коробке
drop-shadow → тень по содержимому

@WebDev_Plus

Мощное SEO-расширение для веб-разработчиков

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

https://www.metaexplorer.co/

@WebDev_Plus

Вот еще один прикольный сайт для вдохновения

https://www.hardikbhansali.com/

@WebDev_Plus

Можешь больше не использовать document.cookie

Теперь можно читать и записывать куки через CookieStore API.

🔸Основана на Promise
🔸Современный синтаксис
🔸Уже была в Chrome
🔸Только что появилась в Safari и Firefox

@WebDev_Plus