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

Это, пожалуй, одно из самых безумных расширений для редактора, что я видел за последнее время. 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-расширение для веб-разработчиков Находит ошибки на странице, определяет битые ссылки и подсказывает, что можно улучшить. → http://metaexplorer.co @WebDev_Plus

Если тебе нужен шанс наконец-то допилить тот игровой сервис, который лежит в черновиках — вот он 👇 VK Dev Grants — конкурс с грантами до 1 млн рублей и полной поддержкой от VK. Заявку можно подать хоть одному, хоть командой. Дают не просто деньги, а вебинары, менторство и продвижение твоего проекта на 45 млн пользователей платформы. 📅 Регистрация на первый этап — до 31 июля. 🎁 За идею можно сразу получить 50 000. Всё честно, поэтапно и с умом. Регистрируйся тут.

"Разворачивай" промисы внутри React-компонентов с помощью React.use() @WebDev_Plus

Вот еще один прикольный сайт для вдохновения https://www.hardikbhansali.com/ @WebDev_Plus

Можешь больше не использовать document.cookie Теперь можно читать и записывать куки через CookieStore API. 🔸Основана на Promise 🔸Современный синтаксис 🔸Уже была в Chrome 🔸Только что появилась в Safari и Firefox @WebDev_Plus

Хочешь изучить алгоритмы и структуры данных на JavaScript? Этот репозиторий — то, что нужно. С пояснениями и примерами, многие из которых на русском. https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md 🤔 @WebDev_Plus

CSS-функции скоро станут доступны, и самое время немного запутать JavaScript-разработчиков (а может, и бэкендеров). Нет, это не те же функции, что в JS. Как и в случае со свойствами CSS, порядок внутри не имеет значения — всё можно писать в обратном порядке. Вы можете попробовать это в последней версии Chrome, включив флаг "Experimental Web Platform features": https://codepen.io/t_afif/pen/MYwMaYE 😨 @WebDev_Plus

На твоём сайте может быть эта проблема: Если плохой контраст — никто ничего не читает. Используй этот трюк в DevTools и срочно поправь цвета @WebDev_Plus

Создавай впечатляющие изображения своего веб-сайта или приложения Просто перетащи скриншот и наблюдай за магией: → shots․so @WebDev_Plus

Эффектная коллекция анимированных компонентов. Более 100 штук в наличии. Открытый исходный код и бесплатно: 👉 https://github.com/kokonut-labs/kokonutui @WebDev_Plus

Прокачайся в веб-разработке с курсами от команды Chrome. Бесплатно, по темам, интерактивно Что внутри: HTML, CSS, JS, доступность, тестирование и ещё куча всего полезного. Можно идти по порядку, а можно сразу нырнуть в то, что интересует больше всего Забираем здесь 😎 @WebDev_Plus

В JavaScript можно превратить HTML-элемент в скриншот Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки modern-screenshot domToPng(HTML_ELEMENT) — превращает DOM-элемент в PNG-картинку в формате data URL. Создаётся <a>-элемент со ссылкой на изображение. Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание @WebDev_Plus

Полезный совет по DevTools для доступности Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе DevTools → Rendering → Emulate vision deficiencies @WebDev_Plus