This media is not supported in your browser
VIEW IN TELEGRAM
Большое обновление для CSS-разработчиков
Теперь можно проверять совместимость через
Если вдруг не в курсе,
- проверки совместимости прямо из терминала
- работает офлайн, без подключения к интернету
- ускоряет разработку и отладку
Больше никакого переключения вкладок✏️
Установить можно отсюда : https://github.com/bramus/caniuse-cli
@WebDev_Plus
Теперь можно проверять совместимость через
Can I Use прямо в терминале с помощью caniuse-cli. Не нужно открывать браузер, и оно работает офлайн без интернета.Если вдруг не в курсе,
Can I Use это основной инструмент для проверки поддержки CSS, HTML и JavaScript в браузерах.- проверки совместимости прямо из терминала
- работает офлайн, без подключения к интернету
- ускоряет разработку и отладку
Больше никакого переключения вкладок
Установить можно отсюда : https://github.com/bramus/caniuse-cli
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍2
Кажется, я наконец нашёл иконки файлов для VS Code, которые мне нравятся.
https://marketplace.visualstudio.com/items?itemName=thang-nm.flow-icons
@WebDev_Plus
https://marketplace.visualstudio.com/items?itemName=thang-nm.flow-icons
@WebDev_Plus
❤7🔥2
Топ-10 браузерных расширений для разработчиков
@WebDev_Plus
🔴 JSON Formatter
Форматирует JSON в дерево, удобно читать данные API.🔴 Wappalyzer
Позволяет увидеть, какие технологии использует сайт.🔴 Fake Filler
Автоматически заполняет формы фейковыми данными, ускоряя тестирование.🔴 Clear Cache
Быстро очищает кэш браузера для проверки новых версий сайта.🔴 Talend API Tester
Дает возможность визуально работать с API и тестировать их.🔴 Focus To-Do
Повышает продуктивность, отслеживая задачи с таймером Pomodoro.🔴 Lighthouse
Позволяет быстро проверить производительность и доступность сайта.🔴 Cookie Editor
Позволяет быстро создавать, редактировать и удалять куки для тестов и отладки.🔴 Web Developer
Добавляет дополнительные инструменты для инспекции и отладки сайта.🔴 Dark Reader
Переводит сайты в тёмную тему, снижая нагрузку на глаза.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Инструмент, который наглядно показывает, как движок JavaScript выполняет твой код.
Есть пошаговая визуализация и таймлайн выполнения - просто тянешь за угол экрана.
Жаль, что у меня такого не было, когда я начинал учить JS. Это сильно помогает понять, что происходит «под капотом».
Источник: jsviz.klve.nl
@WebDev_Plus
Есть пошаговая визуализация и таймлайн выполнения - просто тянешь за угол экрана.
Жаль, что у меня такого не было, когда я начинал учить JS. Это сильно помогает понять, что происходит «под капотом».
Источник: jsviz.klve.nl
@WebDev_Plus
❤6
La Liga блокирует сайты, которые используют Cloudflare, но их собственная антипиратская страница работает через CDN Cloudflare. 🤡
@WebDev_Plus
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🤡7❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Бесплатный AI-инструмент от Google теперь в NotebookLM умеет делать из любой статьи или ссылки полноценный видео-туториал.
Раньше были только текстовые конспекты и аудио, теперь — видео-объяснения за секунды.
Я протестил на статье про JavaScript-функции с MDN — получилось готовое видео.
Образование станет проще и доступнее :)
@WebDev_Plus
Раньше были только текстовые конспекты и аудио, теперь — видео-объяснения за секунды.
Я протестил на статье про JavaScript-функции с MDN — получилось готовое видео.
Образование станет проще и доступнее :)
@WebDev_Plus
❤4🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Это нереально крутая React-библиотека для создания высокопроизводительных 3D-приложений 🤯
- Лёгкая и быстрая
- Без проблем работает с React
- Идеальна для интерактивных 3D-опытов
- Если ты занимаешься 3D-разработкой для веба — стоит попробовать
Источник: github.com/playcanvas/react
Ставь лайк, пригодится✅
@WebDev_Plus
- Лёгкая и быстрая
- Без проблем работает с React
- Идеальна для интерактивных 3D-опытов
- Если ты занимаешься 3D-разработкой для веба — стоит попробовать
Источник: github.com/playcanvas/react
Ставь лайк, пригодится
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.
Это легко делается с помощью CSS-фильтров.
То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.
@WebDev_Plus
Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.
Это легко делается с помощью CSS-фильтров.
/* Для светлой темы */
.logos-container img {
filter: brightness(0);
opacity: 0.6;
}
/* Для тёмной темы */
.logos-container img {
filter: invert(1) saturate(0) brightness(4);
opacity: 0.6;
}
То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.
@WebDev_Plus
❤8🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить AI-чатботов в проекты на React? 🤖
Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.
Поддерживает кучу кастомизаций, темы и гибкие настройки.
Где пригодится:
- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM
Установка:
react-chatbotify.com
@WebDev_Plus
Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.
Поддерживает кучу кастомизаций, темы и гибкие настройки.
Где пригодится:
- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM
Установка:
npm install react-chatbotifyreact-chatbotify.com
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Вышла новая библиотека для пользователей Tailwind CSS.
В ней собраны готовые анимации, которые можно применять без написания собственного CSS. Достаточно скопировать нужный фрагмент и вставить его в проект.
Библиотека подойдёт для тех, кто хочет быстро добавить анимацию в интерфейс.
Доступна по ссылке: tailwindcss-animations.vercel.app
@WebDev_Plus
В ней собраны готовые анимации, которые можно применять без написания собственного CSS. Достаточно скопировать нужный фрагмент и вставить его в проект.
Библиотека подойдёт для тех, кто хочет быстро добавить анимацию в интерфейс.
Доступна по ссылке: tailwindcss-animations.vercel.app
@WebDev_Plus
❤9
Вышел курс по Three.js — библиотеке для 3D-рендеринга прямо в браузере. На практике через пять проектов показывают, как работать с текстурами, подключать GeoJSON-данные и настраивать динамические партиклы.
@WebDev_Plus
@WebDev_Plus
❤3
Please open Telegram to view this post
VIEW IN TELEGRAM
❤11❤🔥4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
CSSBattle набирает популярность среди разработчиков.
Это онлайн-платформа в стиле Code Golfing, где игроки со всего мира соревнуются в умении воспроизвести заданные «таргеты» минимальным количеством кода на CSS.
Для участников доступен общий рейтинг с топовыми результатами, что добавляет азарт и дух соревнования.
https://cssbattle.dev/
@WebDev_Plus
Это онлайн-платформа в стиле Code Golfing, где игроки со всего мира соревнуются в умении воспроизвести заданные «таргеты» минимальным количеством кода на CSS.
Для участников доступен общий рейтинг с топовыми результатами, что добавляет азарт и дух соревнования.
https://cssbattle.dev/
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Новый инструмент для фронтендеров и дизайнеров
Появился сервис gradient.style , который позволяет в пару кликов собирать CSS-градиенты с тонкой настройкой. Инструмент даёт массу вариантов кастомизации и помогает быстро создавать стильные переходы для сайтов и приложений.
Источник: gradient.style🤩
@WebDev_Plus
Появился сервис gradient.style , который позволяет в пару кликов собирать CSS-градиенты с тонкой настройкой. Инструмент даёт массу вариантов кастомизации и помогает быстро создавать стильные переходы для сайтов и приложений.
Источник: gradient.style
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Появилась библиотека компонентов для веба, которая позволяет собирать интерфейсы с настоящим мобильным ощущением.
Она поддерживает React, Vue, Svelte и другие фреймворки, а в комплекте идёт множество элементов в стиле iOS и Material. Такой подход делает веб-приложения похожими на нативные.
Особенно это актуально для PWA, гибридных приложений на Ionic или Capacitor и мобильных сайтов. Пользователи получают привычный мобильный UX, а конверсия растёт.
Источник: konstaui.com
@WebDev_Plus
Она поддерживает React, Vue, Svelte и другие фреймворки, а в комплекте идёт множество элементов в стиле iOS и Material. Такой подход делает веб-приложения похожими на нативные.
Особенно это актуально для PWA, гибридных приложений на Ionic или Capacitor и мобильных сайтов. Пользователи получают привычный мобильный UX, а конверсия растёт.
Источник: konstaui.com
@WebDev_Plus
❤3🔥3
HTML Tip 🌟
Какие есть применения у thead, tbody и tfooter?
Чтобы применять общие стили к шапке, подвалу или основной части таблицы.
Чтобы при печати таблицы на каждой странице отображались шапка и подвал.
Пример:
thead — секция заголовков (шапка таблицы)
tbody — основное содержимое таблицы
tfoot — подвал таблицы
@WebDev_Plus
Какие есть применения у thead, tbody и tfooter?
Чтобы применять общие стили к шапке, подвалу или основной части таблицы.
Чтобы при печати таблицы на каждой странице отображались шапка и подвал.
Пример:
thead — секция заголовков (шапка таблицы)
tbody — основное содержимое таблицы
tfoot — подвал таблицы
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь аккуратные, пиксельно-точные SVG-флаги стран?
Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект.
Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость.
Источник : nucleoapp.com/svg-flag-icons
Берите на заметку📸
@WebDev_Plus
Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект.
Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость.
Источник : nucleoapp.com/svg-flag-icons
Берите на заметку
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4