Monthly Archives: July 2014

Intern testing framework: “Let the Intern test it”

You might want to try out this new open-source JavaScript testing framework with promises and integrated with cloud-hosted testing providers such as BrowserStack

 

Intern touts itself as a next-generation code testing stack for JavaScript.

Run tests from straight your browser or Node.js. Write tests using any style you like (TDD, BDD, whatever!). Get full code coverage reporting so you know what’s left to test. Seamlessly run tests on Sauce Labs, BrowserStack, TestingBot, or your own Selenium Grid. Ready for continuous integration? Intern works with Travis CI, Jenkins, and TeamCity out of the box.

Read more from the source: theintern.io

Tyrian demo in pure CSS without Javascript or HTML – Q42

Behold the power of CSS: A mouse-controlled “game” with a one-tag HTML document

 

When you view source, you’ll see a single tag. When parsed, the browser produces a DOM with 4 elements: html, head, link, and body. It turns out that each can be styled as a regular block element. Using the :before and :after pseudo-classes gives us 12 stylable blocks.

All images are coded into the spreadsheet itself using data URIs. You end up with several images moving around the screen using translation transforms with CSS3 transitions and keyframes to produce game-like sprite movement.

The demo shows moving clouds, a space ship that follows the mouse, an enemy boss space ship and a trio of fighter ships all moving around the screen. The demo uses only -webkit-* prefixed CSS3 so it only works in Chrome.

Read more at Q42

The “Is” library from jumpkick-studios: “a better way to write JavaScript conditional statements and still have pretty code”

Use “Is” to flatten out your if-then-else logic flow and handle exceptions

Convert nested and possibly repeated if-then-else statement with this example:


var foo="bar";

Is(foo)
.longerThan(0).
.equalTo("bar")
.not.equalTo("bar2")
.then(()=>{
console.log("success")
})
.catch(()=>{
throw new Error("bad foo");
});

Read more at github.com

Can I use, an indispensable developer tool for looking up browser compatibility for various CSS3 and HTML5 features, got a makeover!

caniuse.com gets a new design and fancy filters that are super useful

 

From their blog post:

After a long time of working on the beta.caniuse.com site, I’m happy to finally push everything to the main site. Everything seems to be working pretty well, but if there are any issues, please let me know.

The search seems faster and the tables look nicer. There is a slider to control which browser versions to show based on percent of usage. Plus you can filter usage numbers by geography or import data from your own Google Analytics account. Boom!

Read more from the source: caniuse.com

jspm.io – jspm is a package manager built on top of the ES6 module loader that loads any module format: ES6, AMD, CommonJS, and… browser global variables

jspm: A strong contender for a JavaScript package manager that is friendly to node and the browser

 

jspm extends package.json and supports loading modules from npm, directly from GitHub or from a browser global variable. Plugins are available that really make it extendable to any module system.

You use the familiar `require()` syntax but with prefixes such as “npm:” and “github:”. In the module itself, you can use various methods of exports, including ES6 `export` syntax. ES6 `import` is also supported via transpiling.

Example:

var collections = require('npm:lodash-node/modern/collections');
var $ = require('github:components/jquery');
$(document.body).html(collections.max([1,2,3,4]));

Read more at jspm.io

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

The new <picture> element is a great solution for many responsive image needs; here is a great reference for usage.

 

Andreas Bovens begins by asking four questions:

1. Do my image sizes change depending on my responsive design rules?

2. Do I want to optimize for high-dpi screens?

3. Do I want to serve images with different mime types to browsers that support them?

4. Do I want to serve different art depending on certain contextual factors?

Then he breaks down every permutation and gives code examples for each.

Read more from the source: opera.com