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
Этот компонент с реакцией на приближение (proximity reactions) реально завораживает.
Всего 4 строки JavaScript и всё остальное написано на чистом CSS
@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.
@WebDev_Plus
Основан на 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
С открытым исходным кодом и множеством готовых к использованию, эффектных анимированных UI-компонентов — идеально, чтобы выделить ваш сайт или приложение.
@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
Используй сочетание клавиш
Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла
@WebDev_Plus
Используй сочетание клавиш
Ctrl + Shift + F
, чтобы быстро выполнить поиск по всем файлам проектаОчень удобно для нахождения нужных фрагментов кода без открытия каждого файла
@WebDev_Plus
Подсветка синтаксиса с помощью Web Component
Чистый JavaScript и максимально простое использование
Установка: инструкция📝
@WebDev_Plus
Чистый 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
Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.
Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.
Всё работает из коробки
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Оператор присваивания через логическое ИЛИ (
Он присваивает значение справа, только если значение слева — false
Отлично подходит для задания значений по умолчанию в объектах или переменных📖
@WebDev_Plus
||=
) — очень удобная штука в 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
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Избегай использования относительных и запутанных импортов в коде
Они сложны в поддержке и плохо читаются.
Лучше используй алиасы с абсолютными путями.
Это работает как в проектах на JavaScript, так и на TypeScript
@WebDev_Plus
Они сложны в поддержке и плохо читаются.
Лучше используй алиасы с абсолютными путями.
Это работает как в проектах на JavaScript, так и на TypeScript
@WebDev_Plus
React Native позволяет разрабатывать приложения для iOS и Android, используя единый код на JavaScript.
А этот курс научит вас использовать его для создания приложений под macOS.
Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.
@WebDev_Plus
А этот курс научит вас использовать его для создания приложений под macOS.
Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Идеи веб-дизайна в тёмной теме.
Галерея лучших примеров — для вдохновения:
→ http://dark.design
@WebDev_Plus
Галерея лучших примеров — для вдохновения:
→ http://dark.design
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Не допускай растянутых изображений на своём сайте.
Выглядит ужасно🏆
А решается одной строкой CSS
@WebDev_Plus
Выглядит ужасно
А решается одной строкой 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
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
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
@WebDev_Plus
В JavaScript можно превратить HTML-элемент в скриншот
Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки
Создаётся <a>-элемент со ссылкой на изображение.
Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание
@WebDev_Plus
Вот минималистичный пример, как сохранить 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
Что внутри: HTML, CSS, JS, доступность, тестирование и ещё куча всего полезного. Можно идти по порядку, а можно сразу нырнуть в то, что интересует больше всего
Забираем здесь
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM