cdnperf/cdnperf

Deprecated

CDNperf

CDNperf monitors popular CDN sites and graphs this data.

Development

1. npm install
2. cd config
3. cp config.template.js config.js and adjust as needed
4. npm run build to generate the static site

In order to get some test data to show up, please copy http://www.cdnperf.com/data.json to public/.

Hosting

1. Set NODE_ENV to 'production' (important as this enables view caching!)
2. Run the app on top of forever or similar

If you are running on Heroku, remember to set environment variables as documented on config.js. See also their documentation on the topic.

License

MIT. See LICENSE for details.

cdnperf's Issues

Render graphs without animation

Fix nnick/Chart.js#122 and disable animations. They look sluggish.

Style tooltips in a consistent manner

Now there are two styles around. Style qTip to match Chart.js tooltips.

pingdom module may fail

Trace below:

SyntaxError: Unexpected end of input
    at Object.parse (native)
    at Request._callback (/Users/juhovepsalainen/src/github/js/cdnperf/pingdom.js:27:22)
    at Request.self.callback (/Users/juhovepsalainen/src/github/js/cdnperf/node_modules/request/index.js:142:22)
    at Request.EventEmitter.emit (events.js:98:17)
    at Request.<anonymous> (/Users/juhovepsalainen/src/github/js/cdnperf/node_modules/request/index.js:856:14)
    at Request.EventEmitter.emit (events.js:117:20)
    at IncomingMessage.<anonymous> (/Users/juhovepsalainen/src/github/js/cdnperf/node_modules/request/index.js:808:12)
    at IncomingMessage.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:883:14
    at process._tickCallback (node.js:415:13)

Likely their side returned invalid JSON? Still, shouldn't crash in that case.

Store chart state in query parameters

This should allow the users to return back to a page they were looking at.

Graph in realtime

Implement some way to fetch new data on given interval so that the graph will be updated in realtime (or close).

Create about page

We have to create an "About" page with info like:

• What is cdnperf
• Where it gets the data
• Contact information

Article - "Cool, it works, now what?"

At this article we can presume the user knows something about web optimization and wishes to take it to the next level. Go through various tools and means in this article. Justify by using some numbers as data.

Host static content via nginx?

Hi,

We had a nasty crash due to a Node.js bug. Fortunately it has been fixed. Moving on to a newer version should fix it.

Given the primary task of Node.js is to poll Pingdom, perhaps it would make sense to serve the static content some other way. @jimaek What would you think of serving it via Nginx?

I'm not familiar with the configuration required. I can, however, render out the templates as static content quite easily.

Validate uptime data behavior

It looks like this data might need to be fetched in a different way. See Pingdom API.

Implement a help mechanism

Use some overlay thinger (trigger on "How does this work?" and explain).

Toggle graph lines at legend

It should be possible to toggle specific parts of the graph using the legend (ie. click on CDN color).

Dedicated page to each provider

A dedicated page to each provider that will show maximum information.
This will allow them to link to us.

More historic data

For example add 180 days and then add the option to list by month.
Once we have enough data then add option to list by year

Get the app running on OpenShift

There's still some tweaking left to do. Figure out what OpenShift exactly requires.

Load JS from CDN if available, use a local resource otherwise

Probably should set up RequireJS based build for this.

Integrate Bugira

It would be useful to have the widget there so we can get some feedback.

Convert names to links

Until we have dedicated pages for each CDN how about we link the names to the websites of each CDN?

Integrate with Pingdom API

Fetch some actual data from Pingdom.

Add syntax highlighting to code examples

Move header and footer out of column layout

Trigger cronjob twice a day

Now it's just once. Might as well make it configurable while at it (through env so we don't need to restart the server, check out if this works!).

Show multiple providers in a single chart

There should be separate chart based on type (http, https, ...). Show multiple providers in each one of these.

Implement a logo

Sketch out a simple logo (futuristic style, webfonts?) and integrate it to the site.

Hook up xCharts plugin

Hook up xCharts with some dummy data.

Add duration filters

There should be duration filters (30d, 7d, 1d) that allow the user to display different amount of data. Store separate JSON for each and then load it dynamically. Part of the data can be discarded. Maybe 20 datapoints per provider is enough.

In case an article is visited, the logo should route to previous view

It should not use the user settings. We can do this simply by tracking the status at localStorage and then constructing the link by that using some custom JavaScript.

If uptime data is null, map to 1

It looks like the Pingdom data may be null sometimes. Add some check for this.

Add Twitter widget

Show tooltips on legend

The tooltips should show extra information on table items in the way we're doing with the charts.

Go through HN thread and extract issues

Thread. We should implement at least some of those suggestions.

Re-enable tooltips on hover

Add sponsor/collaborator logos to footer

Article - "Now that I care, what can I do about it?"

Write an article about using CDNs effectively. Go through some basic usage patterns.

Version 1.0

This milestone contains tasks we should aim to finish before the official release.

Improve site discoverability

Add basic meta tags at least and consider SEO.

List locations

List locations we use to test the CDNs

RUM data

Real User Monitoring

"Why not let website visitors make your measurements by loading the JavaScript files from the CDNs in the background?"

Basic API

Create basic API. This way anybody could use our data to create infographics, banners, show the uptime on his page...

Show analytics for an entire year

The backend needs to be reworked for this to happen. We will need to split it up in two parts: init and update. init constructs the data based on Pingdom data (max. a year). update is something that is run by a cronjob and that constructs partial days.

The output should look something like this:

• day 1
• day 2
• ...

Where each day contains averages for each categories of each CDN.

This data is then aggregated to a JSON that the frontend then renders as usual.

How to deal with longer ranges and math?

Let's say you want to show 90 days worth of data. Now it picks 30 days out of those. Unfortunately there's a side effect. It skips some data that could be relevant. Perhaps we would be better off by using the contribution of the neighboring days somehow as well?

Any idea on this @jimaek?

Validate calculateDowntimes logic

Make sure calculateDowntimes works correctly.

Use column layout for legend

Something like 8/4 split might do. The current solution looks a bit ugly.

Cache Pingdom data

As it doesn't make sense to fetch data from Pingdom for each request, cache it instead. For now just store it into some JSON file accessible via public. That way it is very easy to refer to the data via JS.

Minify and concat CSS

Minifying and concatenating CSS should help to cut down the amount of requests needed.

Apply contrast check to visibility toggles

In order to make legend headers consistent, modify visibility toggle colors too.

Integrate Google Analytics

Add GA code to "layout" view. It might make sense to inject the GA id through a configuration parameter.

Minify JavaScript

This should help with the performance somewhat. Some content (ie. jQuery and Backbone) could be served from some CDN.

Generate statistics to legend

It should display summaries of the data.

Convert uptime to minutes

When hovering on the percentage on the right show a tooltip of the uptime converted to minutes/hours/days.

Article - "Why should I care?"

Write an article about "why should you care about using CDNs". The idea is to explain the topic to a complete beginner and show some basic benefits.