Проекты на тенденции доступны в качестве еженедельного бюллетеня, пожалуйста, зарегистрируйтесь на www.iainfreestone.com Чтобы вы никогда не пропустили проблему.
1. Комлинка
Comlink делает WebWorkers приятными. ComLink – крошечная библиотека (1.1KB), которая удаляет психический барьер мышления о постмассаже и скрывает тот факт, что вы работаете с работниками.
GoogleChromelabs/комлинка
Comlink делает WebWorkers приятными.
Comlink делает WebWorkers приятным. ComLink это крошечная библиотека (1.1kb) , что удаляет психический барьер мышления о PostMessage
И скрывает тот факт, что вы работаете с работниками.
На более абстрактном уровне это реализация RPC для PostMessage
и ES6 прокси Отказ
$ npm install --save comlink
Поддержка браузеров и размеров пучка
Браузеры без ES6 прокси Поддержка может использовать Прокси-полифилл Отказ
Размер : ~ 2.5k, ~ 1.2k gzip’d, ~ 1.1k brotli’d
Введение
На мобильных телефонах, и особенно на низких мобильных телефонах, важно сохранить основную нить как можно более простоя, чтобы быстро отреагировать пользователю взаимодействию и предоставлять бесплатный опыт. Тема пользовательского интерфейса должна быть для работы UI Отказ WebWorkers – это веб-API, который позволяет вам запустить код в отдельном потоке. Для общения с другой нитью WebWorkers предлагают PostMessage
API. Вы можете отправить объекты JavaScript …
2. Понятие SDK для JavaScript
Официальное представление JavaScript клиент. Простой и простой в использовании клиент для API понятия
Makenotion/Notion-SDK-JS
Официальное понятие JavaScript клиент
Простой и простой в использовании клиент для АПИ понятия
Установка
npm install @notionhq/client
Применение
Использовать понятие Начало работы Руководство Чтобы установить, чтобы использовать API понятия.
Импортируйте и инициализируйте клиента с помощью Интеграционный токен или ОАУТ Токен доступа Отказ
const { Client } = require("@notionhq/client") // Initializing a client const notion = new Client({ auth: process.env.NOTION_TOKEN, })
Сделайте запрос на любую конечную точку API понятия.
Смотрите полный список конечных точек в API Ссылка Отказ
;(async () => { const listUsersResponse = await notion.users.list() })()
Каждый метод возвращает Обещание
который решает ответ.
console.log(listUsersResponse)
{ results: [ { object: 'user' id: 'd40e767c-d7af-4b18-a86d-55c61f1e39a4', type: 'person', person: { email: 'avo@example.org', }, name:
3. Конденсатор
Построить кроссплатформенную собственную прогрессирующее веб-приложения для iOS, Android и паутина
Ион-команда/конденсатор
Построить кроссплатформенную собственную прогрессирующее веб-приложения для iOS, Android и Web ⚡ ️
Конденсатор – это кроссплатформенный API и слой выполнения кода, который позволяет легко вызвать нативные SDK из веб-кода и писать пользовательские собственные плагины, которые могут потребоваться ваше приложение. Кроме того, конденсатор предоставляет первоклассный прогрессивный веб-приложение, чтобы вы могли написать одно приложение и развернуть его в магазины приложений и мобильная сеть.
Конденсатор поставляется с плагином API для строительства нативных плагинов. Плагины могут быть написаны внутри приложений конденсатора или упакованы в зависимость NPM для использования сообщества. Авторы плагинов рекомендуются использовать SWIFT для разработки плагинов в IOS и Kotlin (или Java) в Android.
Начиная
Конденсатор был разработан для запуска в любое существующее современное веб-приложение. Запустите следующие команды, чтобы инициализировать конденсатор в вашем приложении:
npm install @capacitor/core @capacitor/cli npx cap init
Далее установите любую из желаемых нативных платформ:
npm install @capacitor/android
4. Daisyui
Компоненты CSS Castwind CSS. Добавляет классы компонентов, таких как BTN, карта и многое другое в CSS-Tailwind
Saadeghi/Daisyui
⭐️. ⭐️. ⭐️. ⭐️. ⭐️. Компоненты хвостовой веки
Компоненты CSS Castwind CSS Добавляет классы компонентов, как BTN
, карта
и больше до хвостовой печати CSS
[ Смотреть все компоненты Несомненно
👉 [ Смотреть все компоненты Несомненно📘 Документы: daisyui.com.🎲 Попробуйте онлайн: Игра в хвостовой веде |. Кодепен📦 Источник: Github | NPM |. Unpkg |. Jsdelivr |. CDNJS.
🌼 особенности
- Плагин CSS Castwind CSS Daisyui – плагин CSS Castwind. Установите его, добавьте его на
failwind.config.js
файл. - Классы компонентов Добавляет классы компонентов в Taillwind. Классы, как
BTN
,карта
,… Таким образом, вы в конечном итоге с помощью чистого HTML. - Семантические цвета Добавляет имена цветов, такие как
Первичный
,вторичный
,акцент
…. - Настраиваемый Вы можете настроить дизайн компонентов с классами утилиты хвоста и переменными CSS.
- Тематический Добавьте несколько тем и настройте цвета. Вы можете даже установить тему для определенного раздела вашей страницы.
- RTL поддерживается Включить
RTL.
Конфигурация справа налево …
5. Несомненностей
Очень настраиваемые закусочные уведомления (тосты), которые могут быть сложены друг на друга
Iamhosseindhv/Notistack
Очень настраиваемые закусочные уведомления (тосты), которые могут быть сложены друг на друга
Notistack это библиотека уведомлений, которая делает его чрезвычайно легко отображать уведомления о ваших веб-приложениях. Это очень настраивается и позволяет вам укладывать закусочные/тосты поверх одного другой Посетить Документация сайта для демонстрации Отказ
Оглавление
Начиная
Используйте свой предпочтительный управляющий пакет:
npm install notistack yarn add notistack
Как использовать
1: Оберните свое приложение внутри Скунбарпровидер
Компонент: (см. Документы Для полного списка доступных реквизитов) Примечание: Если вы используете материал-интерфейс Темапровидер
, убедись Скунбарпровидер
это ребенок этого.
import { SnackbarProvider } from 'notistack';
2: Экспортируйте любой компонент, который необходимо отправить уведомление с использованием withsnackbar
Отказ Делая это, у вас будет доступ к …
6. Драгула
Перетащите так просто это вредит
Беваква/Драгула
👌 Перетащите так просто это вредит
Перетащите так просто это вредит
Поддержка браузера включает в себя каждый браузер Sane и IE7 + . (Предоставлено вам многофильмовые функциональные Массив
Методы в ES5)
Рамочная поддержка включает в себя ванильный JavaScript, угловые и реагировать.
- Официальный Угловой мост для
драгула
(Демо) - Официальный Угловой 2 мост для
Драгула
(Демо) - Официальный Реагнийный мост для
Драгула
(Демо)
Попробуй Демо Действительно
Вы когда-нибудь хотели перетаскивать библиотеку, которая просто работает? Это не просто зависит от раздутых рамх, что имеет большую поддержку? Это на самом деле понимает, где разместить элементы, когда они упали? Это не нужно, чтобы вы делали цилльские вещи, чтобы заставить его работать? Ну, так я!
- Супер легко настроить
- Нет раздутых зависимостей
- Цифры OUT Сортировка Порядок самостоятельно
- Тень, где товар будет брошен предложениями Визуальная обратная связь
- Коснитесь событий!
- Бесшовные обрабатывает клики Без какой-либо конфигурации
Ты сможешь…
7. Простой
SimpleBar делает только одну вещь: замените прокрутку Scrollbar по умолчанию браузера на пользовательских CSS-стилизованного, не теряя спектакли.
Grsmto/SimpleBar.
Пользовательские прокрутки Scrollbars Vanilla JavaScript Библиотека с собственным прокруткой, простым, легким, простым в использовании и кросс-браузера.
SimpleBar делает только одну вещь: замените прокрутку Scrollbar по умолчанию браузера с помощью пользовательских CSS-стилей, не теряя спектаклей, в отличие от некоторых популярных плагинов, SimpleBar не вызывает прокрутки с JavaScript, вызывая Janks и странное поведение прокрутки, которое вы сохраняете удивительность родной прокрутки .. С пользовательской прокрутки
SimpleBar не реализует поведение пользовательского прокрутки Отказ Это держит родной Переполнение: Авто
Свиток и Только Замените визуальный внешний вид прокрутки.
Проектируйте это, как вы хотите
SimpleBar использует чистые CSS для стиля прокрутки. Вы можете легко настроить его, как вы хотите! Или даже иметь несколько стилей на той же странице … или просто сохранить стиль по умолчанию («Mac OS» стиль прокрутки).
Легкий и исполнительный
Только 6 КБ министерны. SimpleBar не использует JavaScript для обработки прокрутки. Вы сохраняете выступления/поведение родного свитка.
Поддерживается везде
SimpleBar был протестирован на следующих браузерах: Chrome, Firefox, Safari, Edge, IE11.
Начиная
Самый простой способ использовать SimpleBar …
8. Говук-реагистрация
Реализация системы проектирования Gov.uk в реакции с использованием CSSINJS
Говук-Реакция/Говук-реагирование
Реализация системы проектирования Gov.uk в реакции с использованием CSSINJS
Реализация Gov.uk Дизайн Система в Реагировать Использование CSSINJS Использование объектной записи (с Стильные компоненты ).
Мы стремимся отследить следующие проекты (в приоритетном порядке) относительно того, какие компоненты для реализации и того, как они должны выглядеть/вести себя. Где это возможно, мы используем существующие CSS в качестве руководства. Когда нам нужно изменить, чтобы понять пользовательскую разметку, мы стремимся предоставить комментарий в нашем коде, почему это было сделано.
- Gov.uk Frontend
- Gov.uk Дизайн Система ( Источник )
- GOV.UK Дизайн системы отставание (Где находятся открытые билеты в отставке, что ссылочные модели/компоненты на существующих сайтах Govuk)
- GOV.UK/elements
- Gov.uk Издательство компонентов
- Любой другой созданный узор Говук
Этот проект является или был использован:
- Отдел образования
- Отдел международной торговли 2 3 4.
- Департамент бизнеса, энергетической и промышленной стратегии
- Департамент здравоохранения
- Агентство по продуктам питания 2.
- HM Land Registry
- HM Passport Office
- HM …
9. HTMX.
HTMX позволяет получить доступ к Ajax, CSS-переходам, Websockets и серверу отправленные событиями непосредственно в HTML, используя атрибуты, поэтому вы можете создавать современные пользовательские интерфейсы с простотой и мощностью гипертекста.
Bigskysoftware/htmx.
HTMX – Высокие электроинструменты для HTML
Высокие электроинструменты для HTML
введение
HTMX позволяет вам получить доступ к Ajax. , CSS переходы WebSockets и Сервер отправил события непосредственно в HTML, используя атрибуты так что вы можете построить Современные пользовательские интерфейсы с Простота и сила гипертекста
HTMX маленький ( ~ 10k min.gz’d ) Без зависимости Расширяющийся & IE11 совместимый
мотивация
- Почему следует только
и
<ФОРМА>
Уметь сделать HTTP-запросы? - Почему следует только
Нажмите
&Отправить
События вызывают их? - Почему нужно только получить и пост?
- Почему вы должны быть в состоянии заменить Весь экран?
Сняв эти произвольные ограничения HTMX завершает HTML как гипертекст
быстрый старт
…
10. Вустист Уи
Бесплатная и открытая библиотека пользовательского интерфейса для Vue 3
epicmaxco/vuestic-ui
Библиотека пользовательского интерфейса с открытым исходным кодом для Vue 3 🤘
Vue.js 3.0 UI Библиотека Разработано Epicmax Отказ Разработан Васили Савицки
Вустрактный интерфейс навсегда свободен и открыт для взносов. Смотрите наши проблемы Введение руководства и присоединиться к обсуждениям на нашем Раздор Чтобы помочь нам улучшить опыт Вустика.
ПОЧЕМУ ИСПОЛЬЗУЙТЕ ВУСТИТУСТИ УИ?
- Vue.js 3.0 Совместимо
- MIT лицензия
- Богатые функциями: более 52 настраиваемых компонентов
- Два встроенных предустановки цвета
- Мощные конфигурации
- Локальные – настроить компоненты подробно
- Global – Configure Framework в целом
- Кросс-браузер и отзывчивый
- I18N-Ready
Установка
Во-первых, убедитесь, что у вас установлены все предварительные условия:
После проверки предварительных условий, установите Vuestal UI через NPM/пряжу:
npm install vuestic-ui //or yarn add vuestic-ui
Быстро Начало
Убедитесь, что вы импортировали как стили, так и плагин в свой файл входа:
//main.js import { createApp } from 'vue' import App from './App.vue' import { VuesticPlugin } from 'vuestic-ui'
Звездочка 📈.
Лучшие стояки за последние 7 дней
- Appwrite +1,890 звезды
- Кодирующий интервью университет +1 234 звезды
- Кодовой сервер +1,103 звезды
- Рис +926 звезды
- Бесплатные программирование книги +908 звезды
Лучший рост (%) За последние 7 дней
- USESTATATEMACHINE + 164%
- Рис + 69%
- Appwrite + 27%
- Ренатура +7%
- Шакраты Чакрах️. +7%
Верхние стояки за последние 30 дней
- Общественные API +5,557. звезды
- Кодирующий интервью университет +5 500 звезд
- Бесплатные программирование книги +3,678 звезды
- Winbox.js +3668 звезды
- Разработчик Roadmap +3,609 звезды
Лучший рост (%) За последние 30 дней
- Winbox.js + 653%
- Github-элементы +160%
- Рис + 159%
- Supabase Realtime + 42%
- Supabase +36. %
Проекты на тенденции доступны в качестве еженедельного бюллетеня, пожалуйста, зарегистрируйтесь на www.iainfreestone.com Чтобы вы никогда не пропустили проблему.
Если вам понравилось эту статью, вы можете Следуй за мной В Twitter, где я регулярно публикую советы по размеру кусания, относящиеся к HTML, CSS и JavaScript.
Оригинал: “https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-28th-may-2021-2411”