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
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
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:
throw new Error("bad foo");
Read more at github.com
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 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.
var collections = require('npm:lodash-node/modern/collections');
var $ = require('github:components/jquery');
Read more at jspm.io
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