Не допускай растянутых изображений на своём сайте.

Выглядит ужасно 🏆

А решается одной строкой CSS

@WebDev_Plus

Наткнулся на крутой инструмент для визуализации JSON

jsoncrack.com — открытый проект, который превращает любой JSON в наглядную графовую диаграмму.

Идеально, если нужно быстро понять структуру вложенных данных или показать API-ответ заказчику.

➣ Репозиторий: github.com/AykutSarac/jsoncrack.com

Работает прямо в браузере, поддерживает импорт/экспорт, сохранение схемы и тёмную тему 😎

Подойдёт фронтам, бэкендерам и аналитикам.

@WebDev_Plus

Прокачайся в веб-разработке с курсами от команды Chrome. Бесплатно, по темам, интерактивно

Что внутри: HTML, CSS, JS, доступность, тестирование и ещё куча всего полезного. Можно идти по порядку, а можно сразу нырнуть в то, что интересует больше всего

Забираем здесь 😎

@WebDev_Plus

Эффектная коллекция анимированных компонентов.

Более 100 штук в наличии. Открытый исходный код и бесплатно:

👉 https://github.com/kokonut-labs/kokonutui

@WebDev_Plus

CSS-функции скоро станут доступны, и самое время немного запутать JavaScript-разработчиков (а может, и бэкендеров).

Нет, это не те же функции, что в JS. Как и в случае со свойствами CSS, порядок внутри не имеет значения — всё можно писать в обратном порядке.

Вы можете попробовать это в последней версии Chrome, включив флаг "Experimental Web Platform features": https://codepen.io/t_afif/pen/MYwMaYE 😨

@WebDev_Plus

Хочешь изучить алгоритмы и структуры данных на JavaScript? Этот репозиторий — то, что нужно. С пояснениями и примерами, многие из которых на русском.

https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md 🤔

@WebDev_Plus

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

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

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

@WebDev_Plus

CSS Box Shadow и Drop Shadow

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

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

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

@WebDev_Plus

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

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

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

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

@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