Избегай использования относительных и запутанных импортов в коде
Они сложны в поддержке и плохо читаются.
Лучше используй алиасы с абсолютными путями.
Это работает как в проектах на 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
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная коллекция анимированных компонентов.
Более 100 штук в наличии. Открытый исходный код и бесплатно:
👉 https://github.com/kokonut-labs/kokonutui
@WebDev_Plus
Более 100 штук в наличии. Открытый исходный код и бесплатно:
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
This media is not supported in your browser
VIEW IN TELEGRAM
Создавай впечатляющие изображения своего веб-сайта или приложения
Просто перетащи скриншот и наблюдай за магией:
→ shots․so
@WebDev_Plus
Просто перетащи скриншот и наблюдай за магией:
→ shots․so
@WebDev_Plus
❤5👍3
This media is not supported in your browser
VIEW IN TELEGRAM
На твоём сайте может быть эта проблема:
Если плохой контраст — никто ничего не читает.
Используй этот трюк в DevTools и срочно поправь цвета
@WebDev_Plus
Если плохой контраст — никто ничего не читает.
Используй этот трюк в DevTools и срочно поправь цвета
@WebDev_Plus
❤11🔥3
CSS-функции скоро станут доступны, и самое время немного запутать JavaScript-разработчиков (а может, и бэкендеров).
Нет, это не те же функции, что в JS. Как и в случае со свойствами CSS, порядок внутри не имеет значения — всё можно писать в обратном порядке.
Вы можете попробовать это в последней версии Chrome, включив флаг "Experimental Web Platform features": https://codepen.io/t_afif/pen/MYwMaYE😨
@WebDev_Plus
Нет, это не те же функции, что в JS. Как и в случае со свойствами CSS, порядок внутри не имеет значения — всё можно писать в обратном порядке.
Вы можете попробовать это в последней версии Chrome, включив флаг "Experimental Web Platform features": https://codepen.io/t_afif/pen/MYwMaYE
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
Хочешь изучить алгоритмы и структуры данных на JavaScript? Этот репозиторий — то, что нужно. С пояснениями и примерами, многие из которых на русском.
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md🤔
@WebDev_Plus
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3
Можешь больше не использовать
Теперь можно читать и записывать куки через CookieStore API.
🔸 Основана на Promise
🔸 Современный синтаксис
🔸 Уже была в Chrome
🔸 Только что появилась в Safari и Firefox
@WebDev_Plus
document.cookieТеперь можно читать и записывать куки через CookieStore API.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Мощное SEO-расширение для веб-разработчиков
Находит ошибки на странице, выявляет битые ссылки и подсказывает, что можно улучшить
https://www.metaexplorer.co/
@WebDev_Plus
Находит ошибки на странице, выявляет битые ссылки и подсказывает, что можно улучшить
https://www.metaexplorer.co/
@WebDev_Plus
👍3
CSS Box Shadow и Drop Shadow
🔹 box-shadow — добавляет тень к прямоугольной рамке элемента (включая фон и границы).
🔹 drop-shadow — работает как фильтр, отбрасывает тень по форме самого элемента (полезно для PNG с прозрачностью).
@WebDev_Plus
box-shadow → тень по коробкеdrop-shadow → тень по содержимому@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19🎉3