Welcome to the Viewer repository, where Hacktoberfest 2024 contributors are warmly invited to collaborate, learn, and build together! Whether you’re a beginner or a seasoned developer, there’s something here for you to explore. Let’s make this Hacktoberfest a memorable one! 🎉.
This repository implements a performance metrics tracking module for web applications, utilizing key metrics such as:
- 🌐 Cumulative Layout Shift (CLS)
- 🖼️ First Contentful Paint (FCP)
- ⏱️ First Input Delay (FID)
- 🏞️ Largest Contentful Paint (LCP)
- 🚀 Time to First Byte (TTFB)
The module leverages PerformanceObserver to monitor and report these metrics, enhancing user experience and optimizing application performance. ✨
Viewer is designed to be a user-friendly project aimed at creating a seamless experience for displaying and interacting with visual content. It’s part of a collection of repositories managed by reactjsdevelopment. Contributions here not only enhance the project but also help developers like you showcase skills and creativity!
- Fork this repository.
- Clone your forked version:
git clone https://github.com/your-username/viewer.git cd .\viewer\
- Install dependencies to get started:
npm install
- Run the project locally :
npm start
Here’s a simple example of how to initialize the performance metrics tracking:
import { getCLS, getFCP, getFID, getLCP, getTTFB } from './performanceMetrics';
getCLS((metric) => {
console.log('Cumulative Layout Shift:', metric.value);
});
getFCP((metric) => {
console.log('First Contentful Paint:', metric.value);
});
getFID((metric) => {
console.log('First Input Delay:', metric.value);
});
getLCP((metric) => {
console.log('Largest Contentful Paint:', metric.value);
});
getTTFB((metric) => {
console.log('Time to First Byte:', metric.value);
});
- Node.js (v14 or higher)
- NPM (v6 or higher)
💡 Need help? Check out the Issues or create a new one to ask questions.
This repository is part of our Hacktoberfest celebration! To join:
- Pick an issue from this repository or any of the ones listed below:
Let’s make each pull request count! Once you submit, I’ll review and merge it with the Hacktoberfest-accepted label if it meets the requirements. Let's create a positive impact together!
We welcome contributions from developers of all skill levels! Whether you're fixing a bug, adding new features, or improving documentation, your help is appreciated.
To contribute:
- ⭐ Star the repository to show your support.
- 📝 Create an issue outlining how you'd like to contribute to the project.
- 🍴 Fork the repository to make your own copy:
# Click on the "Fork" button at the top right of the repository page
- 💻 Implement your changes in the forked repository by creating a new branch for your feature or fix:
git checkout -b feature-or-fix-name
- Make your changes and commit them using Conventional Commits:
git commit -m "feat: describe your changes"
- 🔄 Push your branch:
git push origin feature-or-fix-name
- Open a pull request and describe the changes you made, mentioning the issue number you're addressing.
- ⏳ Wait for review and feedback from the maintainers.
- React: Library for building user interfaces
- JavaScript: Programming language for scripting and functionality
- CSS: Styling and layouts
- HTML: Structure and content
🎉 Get Involved! We're excited to see your contributions and ideas! If you want to contribute, but don’t know where to start, check out the existing issues or open one with your suggestions.
Let’s make this Hacktoberfest an unforgettable journey! 🚀