Code Monkey home page Code Monkey logo

core-web-vitals's Introduction

CrUX API tool

The main objective of the tool is to request the data from the API and display it, allowing the user to do multiple calls and view the web vital metrics.

Getting Started

Search for an origin and the tool will fetch from the API and then build a card with the web vitals for its origin with all available form factors. If the are no metrics for a form factor (ex: "phone" ) then the tab will return "no data". If the origin has no metrics found in the API then no card will be created.

www.example.com

NOTE: some origins "www" will return no data, therefor you can add the origin as follow:

example.com

Deployment

The deployment of this tool is using vercel.

  • Vercel - Used to host the tool

Built With

Authors

  • Alejandro Loaiza

See also the list of contributors who participated in this project.

Acknowledgments

  • The tool was built from a code sample, if you would like to learn more about the example please read this article: Crux API

core-web-vitals's People

Contributors

zer0kool avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

core-web-vitals's Issues

Error in graph with NaN

Hi! First of all thanks a lot for this tool!

I found an error than some metrics are empty: value sets to NaN and graph does not draw properly.
At screenshot good green part should take all the line, but it takes only 1/3
Screenshot 2020-12-24 at 10 43 35

CSS (Firefox).

In Firefox (Windows 10) it looks like this:

imagen

I think this rule is missing in CSS (init.css, line 70): width: -moz-available;

.flex {
width: -webkit-fill-available;
width: -moz-available;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

And with that change it looks good:

imagen

Domains starting with digits throw a DOMException

When fetching data for the domain 12gobiking.nl, it throws the following DOMException

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#12gobiking' is not a valid selector.
at HTMLFormElement.

Requests Blocked

Requests blocked

Apparently happened after change in URL name from 'now' to 'vercel'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.