WebDev+ | Веб-разработка
8.46K subscribers
192 photos
99 videos
9 files
414 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Одна из самых крутых вещей, сделанных с помощью CSS

Этот компонент с реакцией на приближение (proximity reactions) реально завораживает.

Всего 4 строки JavaScript и всё остальное написано на чистом CSS

🔗: codepen.io/amit_sheen/pen/gbbzbeR

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Этот каталог компонентов мощная штука

Основан на shadcn, но не требует React.

Совместим с Angular, Vue, Astro, React.

И, при желании, можно кастомизировать с помощью Tailwind.

npm install basecoat-css


@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека анимированных компонентов просто отличная

С открытым исходным кодом и множеством готовых к использованию, эффектных анимированных UI-компонентов — идеально, чтобы выделить ваш сайт или приложение.

🔗: http://paceui.com

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет по VS Code

Используй сочетание клавиш Ctrl + Shift + F, чтобы быстро выполнить поиск по всем файлам проекта

Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла

@WebDev_Plus
Подсветка синтаксиса с помощью Web Component

Чистый JavaScript и максимально простое использование

Установка: инструкция 📝

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
В VS Code Insiders теперь по умолчанию включён IntelliSense в терминале

Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.

Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.

Всё работает из коробки

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Оператор присваивания через логическое ИЛИ (||=) — очень удобная штука в JavaScript

Он присваивает значение справа, только если значение слева — false

Отлично подходит для задания значений по умолчанию в объектах или переменных 📖

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Веб-дизайнеры и разработчики, это может быть библиотека анимаций нового уровня

😮 Ссылка: тык

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сайт дня — FRA

Портфолио дудл-художника в интерактивном стиле

> https://fradesign.it/

@WebDev_Plus
Избегай использования относительных и запутанных импортов в коде

Они сложны в поддержке и плохо читаются.

Лучше используй алиасы с абсолютными путями.

Это работает как в проектах на JavaScript, так и на TypeScript

@WebDev_Plus
Суперполезная шпаргалка по CSS FlexBox

@WebDev_Plus
React Native позволяет разрабатывать приложения для iOS и Android, используя единый код на JavaScript.

А этот курс научит вас использовать его для создания приложений под macOS.

Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.

@WebDev_Plus
Удобная шпаргалка по Git

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Идеи веб-дизайна в тёмной теме.

Галерея лучших примеров — для вдохновения:

http://dark.design

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Не допускай растянутых изображений на своём сайте.

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Наткнулся на крутой инструмент для визуализации JSON

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

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

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный совет по DevTools для доступности

Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе

DevTools → Rendering → Emulate vision deficiencies

@WebDev_Plus
В JavaScript можно превратить HTML-элемент в скриншот

Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки modern-screenshot

domToPng(HTML_ELEMENT) — превращает DOM-элемент в PNG-картинку в формате data URL.

Создаётся <a>-элемент со ссылкой на изображение.

Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачайся в веб-разработке с курсами от команды Chrome. Бесплатно, по темам, интерактивно

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM