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
👍10🔥4
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
👍5
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
🔥6👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет по VS Code
Используй сочетание клавиш
Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла
@WebDev_Plus
Используй сочетание клавиш
Ctrl + Shift + F, чтобы быстро выполнить поиск по всем файлам проектаОчень удобно для нахождения нужных фрагментов кода без открытия каждого файла
@WebDev_Plus
❤10👍4
Подсветка синтаксиса с помощью Web Component
Чистый JavaScript и максимально простое использование
Установка: инструкция📝
@WebDev_Plus
Чистый JavaScript и максимально простое использование
Установка: инструкция
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
В VS Code Insiders теперь по умолчанию включён IntelliSense в терминале
Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.
Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.
Всё работает из коробки
@WebDev_Plus
Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.
Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.
Всё работает из коробки
@WebDev_Plus
👍12🔥2
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
👍17❤4🔥2
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
❤10😍3
Избегай использования относительных и запутанных импортов в коде
Они сложны в поддержке и плохо читаются.
Лучше используй алиасы с абсолютными путями.
Это работает как в проектах на JavaScript, так и на TypeScript
@WebDev_Plus
Они сложны в поддержке и плохо читаются.
Лучше используй алиасы с абсолютными путями.
Это работает как в проектах на JavaScript, так и на TypeScript
@WebDev_Plus
❤7🔥1
React Native позволяет разрабатывать приложения для iOS и Android, используя единый код на JavaScript.
А этот курс научит вас использовать его для создания приложений под macOS.
Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.
@WebDev_Plus
А этот курс научит вас использовать его для создания приложений под macOS.
Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.
@WebDev_Plus
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Идеи веб-дизайна в тёмной теме.
Галерея лучших примеров — для вдохновения:
→ http://dark.design
@WebDev_Plus
Галерея лучших примеров — для вдохновения:
→ http://dark.design
@WebDev_Plus
👍3❤1
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
❤7
Наткнулся на крутой инструмент для визуализации 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
❤12👍4
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
❤9🎉2
В JavaScript можно превратить HTML-элемент в скриншот
Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки
Создаётся <a>-элемент со ссылкой на изображение.
Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание
@WebDev_Plus
Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки
modern-screenshotdomToPng(HTML_ELEMENT) — превращает DOM-элемент в PNG-картинку в формате data URL.Создаётся <a>-элемент со ссылкой на изображение.
Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание
@WebDev_Plus
❤5🔥4❤🔥2
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
❤8👍3