Представляем WebAPI Playground

WebAPIs Playground — это платформа для создания, изучения и обмена информацией о веб-API. Это приложение с открытым исходным кодом для веб-разработчиков от веб-разработчиков.

API (интерфейс прикладного программирования) избавляет разработчиков от многих сложностей. Без API жизнь разработчика будет несчастна без надлежащего доступа к данным и знания ненужных низкоуровневых деталей.

Существует множество веб-API для выполнения сложных задач, таких как взаимодействие с оборудованием, создание графики, управление DOM, взаимодействие между приложениями и многое другое, когда речь идет о веб-разработке.

Вы можете прочитать и узнать об этих веб-API из документации MDN . Все эти API-интерфейсы основаны на JavaScript и постепенно работают в современных браузерах. Если чего-то и не хватает сегодня, так это осознания их. Не многие веб-разработчики знают, как их использовать и как их применять.

🔌 Игровая площадка WebAPI

На этом Hacktoberfest (2021) мы начали работать над идеей решения этой проблемы. Как насчет создания площадки для демонстрации и изучения веб-API? Площадка поможет узнать, как и где применить концепцию веб-API, скопировать фрагменты кода, поиграть с демоверсиями.

Мы создали opensourceпроект под названием webapis-playground, который помогает разработчикам добавлять, использовать и изучать веб-API, как никогда раньше. Позвольте представить вам текущий дизайн (он изменится в ближайшие дни) целевой страницы приложения.

⛲ Особенности игровой площадки

В своем нынешнем состоянии игровая площадка имеет следующие особенности:

Список демонстраций веб-API, включая полноэкранный режим, шрифты CSS, речевой API, API записи экрана, API преобразования изображения в изображение и многое другое.

Этот список будет расти в ближайшие дни. Большое спасибо всем участникам.

Интуитивно понятный способ добавить новую демонстрацию веб-API. Мы создали платформу, позволяющую любому, у кого есть базовые знания JavaScript, добавить новую демонстрацию. Вы можете разветвить репо и выполнить несколько простых шагов, упомянутых в этом документе , чтобы создать новую демонстрацию. Фреймворк генерирует демонстрационные файлы, которые необходимо отредактировать, чтобы создать работающий демо-пример.

Поддерживается TypeScript. Мы настоятельно рекомендуем вам использовать TypeScript для создания демонстраций. Однако есть варианты создания демонстраций с использованием простого JavaScript.

Поиск демо

Просмотр исходного кода конкретной демонстрации

Атрибуция автора демо с изображением профиля и социальными дескрипторами.

🍔 Стек технологий

Проект WebAPIs-Playgroundсоздан по следующим технологиям,

• Next.js : это фреймворк на основе Reactjs, который дает вам сверхвозможности для очень быстрого создания готового к производству приложения.
• TailwindCSS : это ориентированная на утилиты CSS-инфраструктура, гибкая для разработчиков с небольшим опытом работы с CSS. Это идеальный выбор для такого проекта, где мы не всегда можем найти разработчика с большим опытом работы с CSS.
• Plopjs : это крошечный инструмент, который избавляет вас от выполнения многих ручных задач, автоматизируя их. Вы можете писать шаблоны и генерировать контент по вашему выбору. Мы используем plopjsдля создания файлов шаблонов исходного кода демо для новой демо.
• TypeScript : это язык программирования со строгой типизацией, основанный на JavaScript, предоставляющий вам лучшие инструменты в любом масштабе.

Приложение развернуто на

• Vercel : дружественная к next.js бесплатная хостинговая платформа с множеством гибких возможностей.

WebAPIs-Playgroundэто прогрессивное веб-приложение, которое вы можете установить на настольные и мобильные платформы.

💡 Мое обучение в качестве сопровождающего проекта с открытым исходным кодом

Мой Hactoberfest 2021 был отличным участником, но он превосходит все возможные знания, ожидания и выводы в качестве сопровождающего этого проекта с открытым исходным кодом. За это время проект получил хорошую поддержку со стороны opensourceчленов сообщества. С более чем 70 запросами на вытягивание это было действительно напряженное дело для сопровождающего.

На данный момент мои ключевые выводы таковы:

• Эффективные проверки кода.
• Открытость для предложений, идей и мозгового штурма.
• Работа в тесном контакте с участниками для поддержки в заключении.
• Цените, признавайте вклад.

🤝 Все кредиты принадлежат авторам

Эта статья не будет полной, если мы не упомянем вклад каждого из участников. Несомненно, мы будем расти дальше в ближайшие дни. Тем не менее, я хочу сделать здесь небольшую паузу, чтобы поздравить всех участников и поблагодарить их за усилия и поддержку платформы на данный момент.

Спасибо Усману Сабувале , Нитешу Сераму, Самиру Васкару , Омри Аттия, Яш Раджу, Рехану Саттару , Мохаммаду Ахсану Аязу, Кустову, Анчалу , Абхишеку Катри, Авнишу Агарвалу , Куналу Сингху, Рози З, Матеусу Вериссимо, Абиоле, Эмиту, Бхарати Субраманиану за сделать приложение лучше до сих пор.

🦄 Итак, что дальше?

Мы продолжим улучшать приложение, добавляя больше демонстрационных примеров и функций. Несколько функций в процессе разработки:

• Улучшенная категоризация демо.
• Фильтруйте демо по категориям.
• Ссылка на сайт MDN для определенного веб-API, чтобы узнать о нем больше.
• Целевая страница, которая объясняет цель приложения с другими деталями.
• Улучшенный рабочий процесс для нового демо-дополнения.

Вот важные ссылки,

• Приложение: https://webapis-playground.vercel.app/
• GitHub: https://github.com/atapas/webapis-playground

Ссылка: https://blog.greenroots.info/introduction-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api

What is GEEK

Buddha Community

Представляем WebAPI Playground

WebAPIs Playground — это платформа для создания, изучения и обмена информацией о веб-API. Это приложение с открытым исходным кодом для веб-разработчиков от веб-разработчиков.

API (интерфейс прикладного программирования) избавляет разработчиков от многих сложностей. Без API жизнь разработчика будет несчастна без надлежащего доступа к данным и знания ненужных низкоуровневых деталей.

Существует множество веб-API для выполнения сложных задач, таких как взаимодействие с оборудованием, создание графики, управление DOM, взаимодействие между приложениями и многое другое, когда речь идет о веб-разработке.

Вы можете прочитать и узнать об этих веб-API из документации MDN . Все эти API-интерфейсы основаны на JavaScript и постепенно работают в современных браузерах. Если чего-то и не хватает сегодня, так это осознания их. Не многие веб-разработчики знают, как их использовать и как их применять.

🔌 Игровая площадка WebAPI

На этом Hacktoberfest (2021) мы начали работать над идеей решения этой проблемы. Как насчет создания площадки для демонстрации и изучения веб-API? Площадка поможет узнать, как и где применить концепцию веб-API, скопировать фрагменты кода, поиграть с демоверсиями.

Мы создали opensourceпроект под названием webapis-playground, который помогает разработчикам добавлять, использовать и изучать веб-API, как никогда раньше. Позвольте представить вам текущий дизайн (он изменится в ближайшие дни) целевой страницы приложения.

⛲ Особенности игровой площадки

В своем нынешнем состоянии игровая площадка имеет следующие особенности:

Список демонстраций веб-API, включая полноэкранный режим, шрифты CSS, речевой API, API записи экрана, API преобразования изображения в изображение и многое другое.

Этот список будет расти в ближайшие дни. Большое спасибо всем участникам.

Интуитивно понятный способ добавить новую демонстрацию веб-API. Мы создали платформу, позволяющую любому, у кого есть базовые знания JavaScript, добавить новую демонстрацию. Вы можете разветвить репо и выполнить несколько простых шагов, упомянутых в этом документе , чтобы создать новую демонстрацию. Фреймворк генерирует демонстрационные файлы, которые необходимо отредактировать, чтобы создать работающий демо-пример.

Поддерживается TypeScript. Мы настоятельно рекомендуем вам использовать TypeScript для создания демонстраций. Однако есть варианты создания демонстраций с использованием простого JavaScript.

Поиск демо

Просмотр исходного кода конкретной демонстрации

Атрибуция автора демо с изображением профиля и социальными дескрипторами.

🍔 Стек технологий

Проект WebAPIs-Playgroundсоздан по следующим технологиям,

• Next.js : это фреймворк на основе Reactjs, который дает вам сверхвозможности для очень быстрого создания готового к производству приложения.
• TailwindCSS : это ориентированная на утилиты CSS-инфраструктура, гибкая для разработчиков с небольшим опытом работы с CSS. Это идеальный выбор для такого проекта, где мы не всегда можем найти разработчика с большим опытом работы с CSS.
• Plopjs : это крошечный инструмент, который избавляет вас от выполнения многих ручных задач, автоматизируя их. Вы можете писать шаблоны и генерировать контент по вашему выбору. Мы используем plopjsдля создания файлов шаблонов исходного кода демо для новой демо.
• TypeScript : это язык программирования со строгой типизацией, основанный на JavaScript, предоставляющий вам лучшие инструменты в любом масштабе.

Приложение развернуто на

• Vercel : дружественная к next.js бесплатная хостинговая платформа с множеством гибких возможностей.

WebAPIs-Playgroundэто прогрессивное веб-приложение, которое вы можете установить на настольные и мобильные платформы.

💡 Мое обучение в качестве сопровождающего проекта с открытым исходным кодом

Мой Hactoberfest 2021 был отличным участником, но он превосходит все возможные знания, ожидания и выводы в качестве сопровождающего этого проекта с открытым исходным кодом. За это время проект получил хорошую поддержку со стороны opensourceчленов сообщества. С более чем 70 запросами на вытягивание это было действительно напряженное дело для сопровождающего.

На данный момент мои ключевые выводы таковы:

• Эффективные проверки кода.
• Открытость для предложений, идей и мозгового штурма.
• Работа в тесном контакте с участниками для поддержки в заключении.
• Цените, признавайте вклад.

🤝 Все кредиты принадлежат авторам

Эта статья не будет полной, если мы не упомянем вклад каждого из участников. Несомненно, мы будем расти дальше в ближайшие дни. Тем не менее, я хочу сделать здесь небольшую паузу, чтобы поздравить всех участников и поблагодарить их за усилия и поддержку платформы на данный момент.

Спасибо Усману Сабувале , Нитешу Сераму, Самиру Васкару , Омри Аттия, Яш Раджу, Рехану Саттару , Мохаммаду Ахсану Аязу, Кустову, Анчалу , Абхишеку Катри, Авнишу Агарвалу , Куналу Сингху, Рози З, Матеусу Вериссимо, Абиоле, Эмиту, Бхарати Субраманиану за сделать приложение лучше до сих пор.

🦄 Итак, что дальше?

Мы продолжим улучшать приложение, добавляя больше демонстрационных примеров и функций. Несколько функций в процессе разработки:

• Улучшенная категоризация демо.
• Фильтруйте демо по категориям.
• Ссылка на сайт MDN для определенного веб-API, чтобы узнать о нем больше.
• Целевая страница, которая объясняет цель приложения с другими деталями.
• Улучшенный рабочий процесс для нового демо-дополнения.

Вот важные ссылки,

• Приложение: https://webapis-playground.vercel.app/
• GitHub: https://github.com/atapas/webapis-playground

Ссылка: https://blog.greenroots.info/introduction-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api

Présentation De WebAPIs Playground

WebAPIs Playground est une plate-forme pour créer, apprendre et partager sur les API Web. Il s'agit d'une application Opensource pour les développeurs Web par des développeurs Web.

Une API (Application Programming Interface) résume de nombreuses complexités aux développeurs. Sans API, la vie d'un développeur sera misérable sans accès approprié aux données et connaissant des détails de bas niveau inutiles.

Il existe de nombreuses API Web disponibles pour effectuer des tâches complexes telles que l'interaction avec le matériel, la création de graphiques, la manipulation de DOM, la communication entre les applications et bien d'autres en matière de développement Web.

Vous pouvez lire et en savoir plus sur ces API Web à partir de la documentation MDN . Toutes ces API sont basées sur JavaScript et progressent vers un fonctionnement transparent sur les navigateurs modernes. S'il manque quelque chose aujourd'hui, c'est leur prise de conscience. Peu de développeurs Web savent comment les utiliser et les cas d'utilisation pour les appliquer.

🔌 Le terrain de jeu WebAPIs

Ce Hacktoberfest (2021) , nous avons commencé à travailler sur une idée pour résoudre ce problème. Que diriez-vous de créer un terrain de jeu pour démontrer et apprendre les API Web ? Le terrain de jeu sera utile pour savoir comment et où appliquer un concept d'API Web, copier des extraits de code, jouer avec des démos.

Nous avons créé un opensourceprojet appelé webapis-playgroundqui aide les développeurs à ajouter, utiliser et découvrir les API Web comme jamais auparavant. Laissez-moi vous présenter le design actuel (il changera dans les prochains jours) de la landing page de l'application.

⛲ Les fonctionnalités du terrain de jeu

Dans son état actuel, l'aire de jeux présente les caractéristiques suivantes,

Une liste de démos d'API Web allant du plein écran, des polices CSS, de l'API vocale, de l'API d'enregistrement d'écran, de l'API image à image et bien d'autres.

Cette liste va s'allonger dans les prochains jours. Un grand merci à tous les contributeurs.

Une manière intuitive d'ajouter une nouvelle démo d'une API Web. Nous avons créé un cadre pour permettre à toute personne ayant des connaissances de base en JavaScript d'ajouter une nouvelle démo. Vous pouvez bifurquer le référentiel et suivre quelques étapes simples mentionnées dans ce document pour créer une nouvelle démo. Le framework génère les fichiers de démonstration que vous devez modifier pour créer un exemple de démonstration fonctionnel.

TypeScript pris en charge. Nous vous recommandons fortement d'utiliser TypeScript pour créer des démos. Cependant, il existe des options pour créer des démos en utilisant du JavaScript simple.

Recherche d'une démo

Afficher le code source d'une démo spécifique

Attribution à l'auteur de la démo avec photo de profil et identifiants sociaux.

🍔 Pile technologique

Le WebAPIs-Playgroundprojet est créé avec les technologies suivantes,

• Next.js : Il s'agit d'un framework basé sur Reactjs qui vous donne le super pouvoir de créer très rapidement une application prête pour la production.
• TailwindCSS : Il s'agit d'un framework CSS utilitaire flexible pour les développeurs avec peu d'expérience CSS. C'est le choix parfait pour un projet comme celui-ci, où nous n'avons pas toujours un développeur avec une expérience CSS élevée.
• Plopjs : C'est un tout petit outil qui vous évite de faire de nombreuses tâches manuelles en les automatisant. Vous pouvez écrire des modèles et générer le contenu de votre choix. Nous utilisons plopjspour créer les fichiers de modèle de code source de démonstration pour une nouvelle démo.
• TypeScript : C'est un langage de programmation fortement typé qui s'appuie sur JavaScript, vous offrant de meilleurs outils à n'importe quelle échelle.

L'application est déployée sur

• Vercel : Une plate-forme d'hébergement gratuite conviviale pour next.js avec de nombreuses flexibilités.

WebAPIs-Playgroundest une application Web progressive que vous pouvez installer sur les plates-formes de bureau et mobiles.

💡 Mon apprentissage en tant que mainteneur de projet OpenSource

Mon Hactoberfest 2021 a été formidable en tant que contributeur, mais il dépasse tous les apprentissages, attentes et enseignements possibles en tant que mainteneur de ce projet open source. Pendant cette durée, le projet a obtenu une bonne opensourceadhésion des membres de la communauté. Avec plus de 70 demandes d'extraction, c'était en effet une affaire chargée en tant que mainteneur.

Jusqu'à présent, mes apprentissages clés sont,

• Revues de code efficaces.
• Un esprit ouvert aux suggestions, aux idées et au brainstorming.
• Travailler en étroite collaboration avec les contributeurs pour les aider à conclure.
• Appréciez, reconnaissez les contributions.

🤝 Tous les crédits vont aux contributeurs

Cet article ne sera pas complet sans rappeler les contributions de chacun des membres jusqu'à présent. Sans aucun doute, nous allons encore grandir dans les jours à venir. Cependant, je veux faire une petite pause ici pour féliciter tous les contributeurs et les remercier pour les efforts et le soutien de la plateforme jusqu'à présent.

Merci à Usman Sabuwala , Nitesh Seram , Sameer Waskar, Omri Attiya, Yash Raj, Rehan Sattar , Mohammad Ahsan Ayaz, Koustov , Anchal, Abhishek Katri, Avneesh Agarwal , Kunal Singh, Rosie Z, Matheus Verissimo, Abiola, Emit, Bharati Subramanian pour améliorer l'application jusqu'à présent.

🦄 Alors, quelle est la suite ?

Nous continuerons à améliorer l'application avec plus d'exemples de démonstration et de fonctionnalités. Quelques fonctionnalités dans le pipeline sont,

• Une meilleure catégorisation des démos.
• Filtrez les démos à l'aide de catégories.
• Un lien vers le site MDN pour une API Web spécifique pour en savoir plus.
• Une page de destination qui explique le but de l'application avec d'autres détails.
• Un meilleur flux de travail pour un nouvel ajout de démonstration.

Voici les liens importants,

• L'appli : https://webapis-playground.vercel.app/
• GitHub : https://github.com/atapas/webapis-playground

Lien : https://blog.greenroots.info/introducing-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api

介紹 WebAPIs Playground - 一個玩和學習 Web APIs 的應用程序

WebAPIs Playground 是一個構建、學習和分享 Web API 的平台。它是 Web 開發人員為 Web 開發人員提供的開源應用程序。

API（應用程序編程接口）從開發人員那裡抽像出許多複雜性。如果沒有 API，開發人員的生活將是悲慘的，無法正確訪問數據並了解不必要的低級細節。

有許多 Web API 可用於執行複雜的任務，例如與硬件交互、創建圖形、操作 DOM、應用程序之間的通信等等。

您可以從MDN 文檔中閱讀和了解這些 Web API 。所有這些 API 都是基於 JavaScript 的，並且正在朝著在現代瀏覽器上無縫工作的方向發展。如果今天缺少什麼，那就是他們的意識。沒有多少 Web 開發人員知道如何使用它們以及應用它們的用例。

🔌 WebAPIs Playground

這個Hacktoberfest（2021），我們開始研究解決這個問題的想法。為演示和學習 Web API 創建一個遊樂場怎麼樣？該遊樂場將有助於了解如何以及在何處應用 Web API 概念、複製代碼片段、玩演示。

我們創建了一個opensource名為webapis-playground，幫助開發人員以前所未有的方式添加、使用和了解 Web API 的項目。讓我向您介紹應用程序登錄頁面的當前設計（它將在未來幾天內發生變化）。

⛲ 遊樂場特色

在目前的狀態下，遊樂場具有以下特點，

Web API 演示列表，包括全屏、CSS 字體、語音 API、屏幕錄製 API、圖片到圖片 API 等等。

該列表將在未來幾天內增加。非常感謝所有的貢獻者。

一種添加 Web API 新演示的直觀方式。我們創建了一個框架，使任何具有基本 JavaScript 知識的人都可以添加新的演示。您可以分叉存儲庫並按照本文檔中提到的幾個簡單步驟來創建一個新的演示。該框架會生成您需要編輯的演示文件，以創建一個有效的演示示例。

支持打字稿。我們強烈建議您使用 TypeScript 來創建演示。但是，有一些選項可以使用純 JavaScript 創建演示。

搜索演示

查看特定演示的源代碼

帶有個人資料圖片和社交句柄的演示作者的歸屬。

🍔 技術棧

該WebAPIs-Playground項目是使用以下技術創建的，

• Next.js：它是一個基於 Reactjs 的框架，它為您提供了快速構建生產就緒應用程序的超能力。
• TailwindCSS：它是一個實用程序優先的 CSS 框架，適用於沒有太多 CSS 背景的開發人員。對於像這樣的項目來說，這是一個完美的選擇，我們可能並不總能找到具有高 CSS 經驗的開發人員。
• Plopjs：它是一個小工具，可以通過自動化完成許多手動任務。您可以編寫模板並生成您選擇的內容。我們使用plopjs為新的演示創建演示源代碼模板文件。
• TypeScript：它是一種基於 JavaScript 的強類型編程語言，可為您提供任何規模的更好的工具。

應用程序部署在

• Vercel：具有許多靈活性的 next.js 友好的免費託管平台。

WebAPIs-Playground是一個漸進式 Web 應用程序，您可以安裝在桌面和移動平台上。

💡 我作為開源項目維護者的學習

作為貢獻者，我的 Hactoberfest 2021 非常棒，但作為這個開源項目的維護者，它超出了所有可能的學習、期望和收穫。在此期間，該項目得到了opensource社區成員的良好關注。有 70 多個拉取請求，作為維護者，這確實是一件忙碌的事情。

到目前為止，我的主要學習是，

• 有效的代碼審查。
• 對建議、想法和頭腦風暴持開放態度。
• 與貢獻者密切合作以支持結論。
• 欣賞，承認貢獻。

🤝 所有功勞歸貢獻者所有

如果沒有提到迄今為止每個成員的貢獻，本文將是不完整的。毫無疑問，我們將在未來幾天進一步發展。但是，我想在這裡稍作停頓，向所有貢獻者表示祝賀，並感謝他們迄今為止對平台的努力和支持。

感謝Usman Sabuwala、Nitesh Seram、Sameer Waskar、Omri Attiya、Yash Raj、Rehan Sattar、Mohammad Ahsan Ayaz、Koustov、Anchal、Abhishek Katri、Avneesh Agarwal、Kunal Singh、Rosie Z、Matheus Verissimo、Abiola、Emit、Bharati Subramanian到目前為止，使應用程序變得更好。

🦄 那麼，下一步是什麼？

我們將繼續通過更多演示示例和功能使應用程序變得更好。管道中的一些功能是，

• 演示的更好分類。
• 使用類別過濾演示。
• 指向特定 Web API 的 MDN 站點的鏈接，以了解更多信息。
• 一個登陸頁面，它解釋了應用程序的用途以及其他詳細信息。
• 新的演示添加的更好的工作流程。

以下是重要鏈接，

• 該應用程序：https ://webapis-playground.vercel.app/
• GitHub：https ://github.com/atapas/webapis-playground

鏈接：https ://blog.greenroots.info/introducing-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api

Introducing WebAPIs Playground - an App to Play & Learn Web APIs

WebAPIs Playground is a platform to build, learn, and share about Web APIs. It is an Opensource app for web developers by web developers.

An API(Application Programming Interface) abstracts many complexities from developers. Without APIs, a developer's life will be miserable with no proper access to data and knowing unnecessary low-level details.

There are many Web APIs available to carry out complex tasks like interacting with hardware, creating graphics, manipulating DOMs, communicating between apps, and many more when it comes to web development.

You can read and learn about these Web APIs from MDN documentation. All these APIs are JavaScript-based and progressing towards working seamlessly on modern browsers. If something is lacking today, it is the awareness of them. Not many web developers know how to use them and the use-cases to apply them.

🔌 The WebAPIs Playground

This Hacktoberfest(2021), we started working on an idea to solve that problem. How about creating a playground for demonstrating and learning Web APIs? The playground will be helpful to know how and where to apply a Web API concept, copy code snippets, play with demos.

We have created an opensource project called webapis-playground that helps developers add, use, and learn about Web APIs like never before. Let me introduce you to the current design(it will change in the coming days) of the application's landing page.

⛲ The Playground Features

At its current state, the playground has the following features,

A list of Web APIs demo ranging from full-screen, CSS fonts, speech API, screen recording API, picture-to-picture API, and many more.

This list is going to grow in the coming days. Many thanks to all the contributors.

An intuitive way to add a new demo of a Web API. We have created a framework to enable anyone with basic JavaScript knowledge to add a new demo. You can fork the repo and follow a few simple steps mentioned in this doc to create a new demo. The framework generates the demo files you need to edit to create a working demo example.

TypeScript Supported. We highly recommend you use TypeScript to create demos. However, there are options to create demos using plain JavaScript.

Searching a demo

View the Source Code of a specific demo

Attribution to the author of the demo with profile picture and social handles.

🍔 Technology Stack

The WebAPIs-Playground project is created with the following technologies,

• Next.js: It is a Reactjs based framework that gives you the superpower to build a production-ready application very fast.
• TailwindCSS: It is a utility-first CSS framework flexible for developers with not much CSS background. It is the perfect choice for a project like this, where we may not always get a developer with high CSS experience.
• Plopjs: It is a tiny tool that saves you from doing many manual tasks by automating them. You can write templates and generate content of your choice. We use plopjs to create the demo source code template files for a new demo.
• TypeScript: It is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

The application is deployed on

• Vercel: A next.js friendly free hosting platform with many flexibilities.

WebAPIs-Playground is a Progressive Web Application that you can install on the desktop and mobile platforms.

💡 My Learning as an OpenSource Project Maintainer

My Hactoberfest 2021 was great as a contributor, but it exceeds all possible learning, expectations, and takeaways as a maintainer of this open-source project. In this duration, the project got good traction from the opensource community members. With 70+ pull requests, it was indeed a busy affair as a maintainer.

So far, my key learnings are,

• Effective code reviews.
• An open mind to suggestions, ideas, and brainstorming.
• Working closely with contributors to support in concluding.
• Appreciate, acknowledge contributions.

🤝 All Credit goes to Contributors

This article will not be complete without calling out the contributions from each of the members so far. Undoubtedly, we will grow further in the coming days. However, I want to take a slight pause here to congratulate all the contributors and thank them for the effort and support of the platform so far.

Thanks to Usman Sabuwala, Nitesh Seram, Sameer Waskar, Omri Attiya, Yash Raj, Rehan Sattar, Mohammad Ahsan Ayaz, Koustov, Anchal, Abhishek Katri, Avneesh Agarwal, Kunal Singh, Rosie Z, Matheus Verissimo, Abiola, Emit, Bharati Subramanian for making the app better so far.

🦄 So, What's Next?

We will continue to make the app better with more demo examples and features. A few features in the pipeline are,

• A better categorization of the demos.
• Filter demos using categories.
• A link to the MDN site for a specific Web API to know more about it.
• A landing page that explains the purpose of the app with other details.
• A better workflow for a new demo addition.

Here are important links,

• The app: https://webapis-playground.vercel.app/
• GitHub: https://github.com/atapas/webapis-playground

Link: https://blog.greenroots.info/introducing-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api

Giới Thiệu WebAPIs Playground - Ứng Dụng để Chơi & Tìm Hiểu API Web

WebAPIs Playground là một nền tảng để xây dựng, học hỏi và chia sẻ về các API Web. Nó là một ứng dụng Opensource dành cho các nhà phát triển web của các nhà phát triển web.

Một API (Giao diện lập trình ứng dụng) tóm tắt nhiều sự phức tạp từ các nhà phát triển. Nếu không có API, cuộc sống của nhà phát triển sẽ rất khổ sở khi không có quyền truy cập thích hợp vào dữ liệu và biết các chi tiết cấp thấp không cần thiết.

Có rất nhiều API Web có sẵn để thực hiện các tác vụ phức tạp như tương tác với phần cứng, tạo đồ họa, thao tác với DOM, giao tiếp giữa các ứng dụng và nhiều thứ khác khi phát triển web.

Bạn có thể đọc và tìm hiểu về các API Web này từ tài liệu MDN . Tất cả các API này đều dựa trên JavaScript và đang tiến tới hoạt động trơn tru trên các trình duyệt hiện đại. Nếu ngày nay thiếu một thứ gì đó, thì đó chính là nhận thức về họ. Không nhiều nhà phát triển web biết cách sử dụng chúng và các trường hợp sử dụng để áp dụng chúng.

🔌 Sân chơi WebAPIs

Hacktoberfest này (năm 2021) , chúng tôi bắt tay vào thực hiện ý tưởng để giải quyết vấn đề đó. Làm thế nào về việc tạo ra một sân chơi để trình diễn và học hỏi các API Web? Sân chơi sẽ rất hữu ích để biết cách và vị trí áp dụng khái niệm API Web, sao chép đoạn mã, chơi với các bản trình diễn.

Chúng tôi đã tạo một opensourcedự án có tên là webapis-playgroundgiúp các nhà phát triển thêm, sử dụng và tìm hiểu về API Web hơn bao giờ hết. Hãy để tôi giới thiệu với bạn thiết kế hiện tại (nó sẽ thay đổi trong những ngày tới) của trang đích của ứng dụng.

⛲ Các tính năng của sân chơi

Ở trạng thái hiện tại, sân chơi có các tính năng sau,

Danh sách các bản trình diễn API Web, từ toàn màn hình, phông chữ CSS, API giọng nói, API ghi màn hình, API hình ảnh sang hình ảnh và nhiều thứ khác.

Danh sách này sẽ tăng lên trong những ngày tới. Rất cám ơn tất cả những người đã đóng góp.

Một cách trực quan để thêm bản trình diễn mới của API Web. Chúng tôi đã tạo một khuôn khổ để cho phép bất kỳ ai có kiến ​​thức cơ bản về JavaScript có thể thêm một bản trình diễn mới. Bạn có thể fork repo và làm theo một vài bước đơn giản được đề cập trong tài liệu này để tạo một bản demo mới. Khung tạo các tệp demo bạn cần chỉnh sửa để tạo một ví dụ demo hoạt động.

Hỗ trợ TypeScript. Chúng tôi thực sự khuyên bạn nên sử dụng TypeScript để tạo các bản trình diễn. Tuy nhiên, có các tùy chọn để tạo bản trình diễn bằng JavaScript thuần túy.

Tìm kiếm bản trình diễn

Xem Mã nguồn của một bản trình diễn cụ thể

Ghi nhận tác giả của bản trình diễn với ảnh hồ sơ và các tay cầm trên mạng xã hội.

🍔 Ngăn xếp công nghệ

Dự WebAPIs-Playgroundán được tạo ra với các công nghệ sau,

• Next.js : Đây là một khuôn khổ dựa trên Reactjs cung cấp cho bạn sức mạnh siêu việt để xây dựng một ứng dụng sẵn sàng sản xuất rất nhanh.
• TailwindCSS : Đây là một khung CSS ưu tiên tiện ích, linh hoạt cho các nhà phát triển không có nhiều kiến ​​thức về CSS. Đó là sự lựa chọn hoàn hảo cho một dự án như thế này, nơi chúng tôi có thể không phải lúc nào cũng có được một nhà phát triển có kinh nghiệm CSS cao.
• Plopjs : Đây là một công cụ nhỏ giúp bạn không phải thực hiện nhiều tác vụ thủ công bằng cách tự động hóa chúng. Bạn có thể viết các mẫu và tạo nội dung mà bạn chọn. Chúng tôi sử dụng plopjsđể tạo các tệp mẫu mã nguồn demo cho một bản demo mới.
• TypeScript : Đây là một ngôn ngữ lập trình được đánh máy mạnh, xây dựng trên JavaScript, mang đến cho bạn công cụ tốt hơn ở mọi quy mô.

Ứng dụng được triển khai trên

• Vercel : Một nền tảng lưu trữ miễn phí thân thiện với next.js với nhiều tính linh hoạt.

WebAPIs-Playgroundlà một Ứng dụng Web Tiến bộ mà bạn có thể cài đặt trên nền tảng máy tính để bàn và điện thoại di động.

💡 Việc học của tôi với tư cách là người duy trì dự án nguồn mở

Hactoberfest 2021 của tôi rất tuyệt với tư cách là một người đóng góp, nhưng nó vượt quá tất cả những gì có thể học được, mong đợi và những điều cần làm với tư cách là người duy trì dự án mã nguồn mở này. Trong thời gian này, dự án đã nhận được sự quan tâm tốt từ các thành viên trong opensourcecộng đồng. Với hơn 70 yêu cầu kéo, đó thực sự là một công việc bận rộn với tư cách là người bảo trì.

Cho đến nay, kết quả học tập chính của tôi là,

• Đánh giá mã hiệu quả.
• Tâm trí cởi mở với các đề xuất, ý tưởng và động não.
• Làm việc chặt chẽ với những người đóng góp để hỗ trợ trong việc kết luận.
• Đánh giá cao, ghi nhận những đóng góp.

🤝 Tất cả Tín dụng sẽ được chuyển cho Cộng tác viên

Bài viết này sẽ không hoàn chỉnh nếu không kêu gọi sự đóng góp của từng thành viên cho đến nay. Không còn nghi ngờ gì nữa, chúng tôi sẽ còn phát triển hơn nữa trong những ngày tới. Tuy nhiên, tôi muốn tạm dừng một chút ở đây để chúc mừng tất cả những người đóng góp và cảm ơn họ vì những nỗ lực và hỗ trợ của nền tảng cho đến nay.

Cảm ơn Usman Sabuwala , Nitesh Seram , Sameer Waskar, Omri Attiya, Yash Raj, Rehan Sattar , Mohammad Ahsan Ayaz, Koustov , Anchal, Abhishek Katri, Avneesh Agarwal , Kunal Singh, Rosie Z, Matheus Verissimo, Abiola, Emit, Bharati Subramanian làm cho ứng dụng tốt hơn cho đến nay.

🦄 Vậy tiếp theo là gì?

Chúng tôi sẽ tiếp tục cải tiến ứng dụng với nhiều ví dụ và tính năng demo hơn. Một số tính năng trong đường dẫn là,

• Một phân loại tốt hơn của các bản trình diễn.
• Lọc các bản trình diễn bằng cách sử dụng các danh mục.
• Một liên kết đến trang MDN cho một API Web cụ thể để biết thêm về nó.
• Trang đích giải thích mục đích của ứng dụng với các chi tiết khác.
• Quy trình làm việc tốt hơn cho phần bổ sung demo mới.

Đây là các liên kết quan trọng,

• Ứng dụng: https://webapis-playground.vercel.app/
• GitHub: https://github.com/atapas/webapis-playground

Liên kết: https://blog.greenTHER.info/introductioning-webapis-playground-an-app-to-play-and-learn-web-apis

#webapi #api