DailyJS

Protractor-perf, lining.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries performance testing angularjs

Protractor-perf, lining.js

Posted by Alex R. Young on .
Featured

libraries performance testing angularjs

Protractor-perf, lining.js

Posted by Alex R. Young on .

Protractor-perf

Protractor-perf (GitHub: axemclion/protractor-perf, License: MIT, npm: protractor-perf) by Parashuram can help you test for performance regressions while running Protractor AngularJS tests.

To use it, you can add performance-based assertions that are ignored by Protractor. These performance statements will only be used when tests are run with the protractor-perf command-line tool.

The available metrics are quite sophisticated -- for a list of metrics take a look at the browser-perf metrics. Some examples are evaluateScript (the time spent evaluating the page's scripts) and meanFrameTime (average time taken to render each frame).

Lining.js

Lining.js (GitHub: zmmbreeze/lining.js, License: MIT) by mzhou is a library for addressing lines within an element. To use it, add the data-lining attribute to an element, then add CSS to style each line. You can even apply styles to ranges with the data-from and data-to attributes.

There's a JavaScript API which is event based. For example:

var poem = document.getElementById('poem');

poem.addEventListener('beforelining', function(e) {  
  // prevent lining if you want
  e.preventDefault();
}, false);

var poemLining = lining(poem, {  
  autoResize: true,
  from: 2,
  to: 3,
  lineClass: 'my-class'
});

The author suggests that it can be used for creative typography, and poems are used in the documentation which is a nice example. It also supports effects, so you can do things like animate sections of text using transitions.