ilicmarko / devtools-timeline-images Goto Github PK

This is why I made this module and that is to generate a video of a timeline. There should be an option to choose outputs, video or sequence of images.

I never check which file type the stream is. This can go wrong as the images produces from Chrome is different file types based on OS (I think). Therefore when saving in the wrong format all images are going to be corrupt.

Possible fix is check the stream header for file signature (magic numbers).

Not an issue per se, but how about a shorter command name or at least an alias to a shorter command ? Perhaps an acronym of the package name dti? If a user's terminal has autocomplete then it wouldn't really be a problem, but it's just an idea.

.idea folder is included in your npm package. Ideally the package should be as light as possible, and in this case only include the necessary files like index.js, readme, license, and package.json.

Fix is to add a fields key to package.json with the files you want to include in the package. license, readme, and package.json are included by default.

"files": ["index.js"]

Currently I extract only the snapshots from the JSON. If you look inside the JSON it turns out to be a GOAL mine of data (thank you Chrome Dev Team).

The idea is to extract interesting data that can be related to the screenshots and append it to the image with something like JIMP (or something more lightweight).

Timings

Chrome uses Navigation Timing, specifically PerformanceTiming interface to "tag" (name) the events.

{
  "pid":13925,
  "tid":1,
  "ts":44982508648,
  "ph":"R",
  "cat":"blink.user_timing,rail",
  "name":"domInteractive",
  "args":{
    "frame":"1D2BC421FEFCB3E4C52583A0BC6CD5DC"
  },
  "tts":158644413
}

As far as I can see all timing events have the same categories blink.user_timing,rail. From my understanding it means it is user_timing and more importantly it is a rail, meaning it will be displayed on its rail (please not this is all my guess):

All in all, the idea is to append Timing events to the screenshots and shot the event. Furthermore a simple "semaphore" (hold your horses it's not concurrency) like this:

Time (Counter)

This has nothing to do with the previous section Timings.
To put it simple append a simple timer in seconds on each screenshot. Same as the Webpagetest.

Resources

Maybe consult Paul or Kayce.

• https://github.com/paulirish/devtools-timeline-model
• Trace Event Format

I find -i (--input) redundant and maybe even annoying. Input is always a requirement, therefore it shouldn't be an explicit argument. It should be removed, making the call more natural.

Old way:

devtools-timeline-images -i timeline.json -o images

New way:

devtools-timeline-images timeline.json -o images

Unfortunately, minimist is maintained anymore. Furthermore there are some limitations for future updates (features).

Possible replacements:

• https://github.com/tj/commander.js
• https://github.com/yargs/yargs
• https://github.com/yargs/yargs

I am aware that all other packages are much heavier.

Cover the whole project with tests. Initially project was started on a deadline, so I skipped TDD.

Tests should cover all commands and possible input/outputs for them. Also maybe introduce a CLI framework that can help with the structure and test organization.