Developer

Here's what developers should look out for in the latest Chrome release

How to exploit the new features in Chrome 38 designed to let developers craft rich websites and apps more easily.

Google has added a range of features to the latest version of its Chrome browser to help developers make richer web sites and apps.

Chrome 38, released this week, introduces support for new HTML and JavaScript functionality. Here is a rundown of what's new for developers.

<picture> element

Loading images that look good on anything from widescreen monitors to palm-sized phones can be tricky without help from JavaScript and CSS.

The release adds support for the HTML picture element, which allows developers to instruct the browser to adjust the resolution of the image it loads depending on the size of the device, and to do so using HTML.

Here's how it works:

<picture>

<source media="(min-width: 700px)" srcset="high-resolution.jpg">

<source media="(min-width: 450px)" srcset="medium-resolution.jpg">

<source srcset="low-resolution.jpg">

<img src="no-support.jpg">

</picture>

The picture and the source element tell the browser to load one of three different images depending on the size of the browser's viewport. If the viewport is above 700 pixels wide it loads high-resolution.jpg, above 450 pixels wide it loads medium-resolution.jpg and any other size and it loads low-resolution.jpg.

The picture element is a container for the source element, which is what determines which images are loaded by the browser.

The source element has a media attribute, which accepts any valid CSS media query, and a srcset attribute, which is a path to the image file that should be loaded.

Every picture element must also contain an img element to specify an image to load in the event the browser doesn't support the picture element.

The picture element is capable of directing the browser to serve multiple versions of an image based on a variety of characteristics, such as device size, resolution, orientation, and more. For more details see Google's web fundamentals guide.

art-direction.png
Image: Google under Creative Commons Attribution 3.0 License

Maps and Sets

The release introduces simpler, better performing ways of iterating through collections of values, with support for the Set and Map classes in JavaScript.

Unlike arrays or objects, Sets will only accept unique values, with each new value added checked against the Set to prevent duplicates being added. However a Set can contain the integer 5 and string "5", as type conversion isn't carried out when checking equality.

This ability to only store unique values could useful in a number of scenarios, for instance if you wanted to store every word in a piece of text.

To create a new set simply call the Set constructor.

var firstSet = new Set();


The Set() constructor accepts a single argument, an iterable object such as an Array or a Map that can set its values.

// Pass in array containing 1, 2, 3 to create a Set holding those values

var firstSet = new Set([1,2,3]);


There are various methods to interact with Set.

// add() allows new values to be added

firstSet.add(10); // Adds 10

firstSet.add("Hello World"); // Adds Hello World

firstSet.add(10); // Doesn't add value as 10 already in firstSet


// has() checks to see if a value is in a Set

firstSet.has(10) // Returns true

firstSet.has("Fish") // Returns false


// clear() removes all values from a Set

firstSet.clear();

firstSet.has(10) // Returns false


// The number of values in a Set is stored in the size property

firstSet.add(1);

firstSet.add(2);

console.log(firstSet.size) // Prints 2


Maps are collections of key/value pairs. Unlike the key/value pairs found in JavaScript objects, where the key must be a string, Maps accept any value - objects or primitive values - as a key.

JavaScript objects automatically convert keys into strings, meaning non-identical, non-string values used as keys can be converted into identical strings. This can lead to undesirable behaviour, as pointed out in this code example.

// element gets converted to a string

var data = {},

metadata = 'element1',

metadata2 = 'element2',

element = document.getElementById("my-div"),

element2 = document.getElementById("my-div2");

data[element] = metadata;

data[element2] = metadata2;


While the intention above is to use references to different HTML element objects as keys in the data object, each element object will be instead converted into an identical string along the lines of "[Object HTMLDivElement]".

The outcome is creation of a data object holding a single key-value pair {"[Object HTMLDivElement]":"element2"}, rather than the intended {Reference to my-div Object:"element1",Reference to my-div2 Object:"element2"}. This behaviour stems from the two separate object references being converted into an identical string, which causes the object to overwrite the existing metadata value with metadata2, rather than creating a new key-value pair.

The other difficulty when using JavaScript objects as maps is the additional steps needed to ensure you only iterate through that object's properties, and not properties of other objects in its prototype chain.

Like the key, the value in a Map key-value pair can also be of any type.

Maps are created by calling the Map constructor. To set values for the Map pass the constructor an iterable object whose elements are key-value pairs, for example an array of arrays.

var firstMap = new Map( [['product','tomato'], ['type','fruit']] );


There are various methods for interacting with Map.

// set() sets data inside the Map

var firstMap = new Map();

firstMap.set("name","Andy"); // Adds "name":"Andy" key-value pair to Map


// get() retrieves a value from the Map

firstMap.get("name"); // Retrieves Andy


// has() checks if a value exists in the Map

firstMap.has("Andy") ; // Returns true


// The number of elements in a Map is stored in the size property

console.log(firstSet.size); // Prints 1


for ... of loops

Another addition are for ... of loops, which provide a way to iterate over iterable objects, such as Array, Map, Set and the arguments object.

The for ... of loop iterates over arrays and Sets like so:

var arr = [1 ,2 , 3],

firstSet = new Set([4, 5 , 6]);

for (item of arr) {

console.log(item); // Prints 1,2,3

}

for (item of firstSet) {

console.log(item); // Prints 4,5,6

}


It differs from the for ... in loop used to iterate over objects, in that it returns the property values rather than the property names.

for (item in arr) {

console.log(item); // Prints 0, 1, 2 - the zero-based index postion of each element in the array

}


for ... of loops can also use generator methods when iterating through collections to return either just the key, just the value or an array with both the key and the value.

var firstMap = new Map( [['product','tomato'], ['type','fruit']] );


// keys() method

for (key of firstMap.keys()) {

console.log(key); // Prints 'product','type'

}


// values() method

for (value of firstMap.values()) {

console.log(value); // Prints 'tomato','fruit

}


// items() method

for (item of firstMap.items()) {

console.log(item); // Shows an array containing ['product','tomato'], ['type','fruit']

}


Chrome 38 includes a range of other features, including new Maths functions and a programmatic method for constructing File objects. For a full list of features, visit here.

About Nick Heath

Nick Heath is chief reporter for TechRepublic. He writes about the technology that IT decision makers need to know about, and the latest happenings in the European tech scene.

Editor's Picks

Free Newsletters, In your Inbox