Search for a command to run...
WebAPIs Playground is a platform to build, learn, and share about Web APIs. It is an Opensource app for web developers by web developers.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Nice job !! Congratulations to the team !
Thanks Pradeep Repaka. The community is at its best. Opensource Rock!
Thank You Olubisi Idris Ayinde. I much appreciate it.
This is so cool Tapas Adhikary. It's good to see everything combined in one app.
Thanks a lot, Yogesh Chavan. We will add more and more.
This seems like a great and very helpful project, Tapas! And love reading the journey. happy to see your success during the Hacktoberfest! 😊
Thanks Sumudu Siriwardana. Indeed a great experience learning many things to work together.
Thanks Tapas Adhikary for giving me an opportunity to contribute to an open source project.
Working on this project was full of learning and fun. Thank you so much Tapas Adhikary for the project and appreciation.
You are welcome, Rehan Sattar.
Here is a series to list down articles related to my experience in participating in several Hackathons. You can learn the motivation, process, full journey of those by reading these. Keep Hacking!
HackFest is a yearly event at our organization to try out something new while innovating. A group(max of 5) of people get together to think, develop, and demonstrate an idea by working on it for three days. This year was no different. It was a fun-fi...
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
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.
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.
Here are important links,
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.
The WebAPIs-Playground project is created with the following technologies,
plopjs to create the demo source code template files for a new demo.The application is deployed on
WebAPIs-Playground is a Progressive Web Application that you can install on the desktop and mobile platforms.
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,
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.
We will continue to make the app better with more demo examples and features. A few features in the pipeline are,
Am I missing anything? We are listening. Would you please add your request from here?
If you are looking to make any contribution, you are welcome. Please take a look into the GitHub repository to get started. The good part is, even if you are not very confident of the technology stack used but aspire to learn, it is a perfect project for you to start with. Please reach out to me for any help.
Please give a ⭐ to the project. It motivates all of us.
Let's connect. I share my learnings on JavaScript, Web Development, and Blogging on these platforms as well,