I’ve previously demonstrated an analog clock made with SVG and JavaScript, which I thought used a particularly elegant technique. While it’s possible to create the clock movement with , CSS transforms and , it’s not possible to set such a clock to the correct time for the user. To do that, we need … and if we’re starting with that, it made sense to experiment with the Web Animation API, showing that it too can use steps() animation for the second hand. (Due to the newness of the Web Animation API, this demo will currently only work in Chrome).

A collection of typeset blocks and typesetting tools

In addition to creating new tags and content, JavaScript is frequently used to modify the attributes of elements that already exist on the page: for example, to change the src attributes inside a <video> element to create a simple video playlist. This is also true of elements that are in the process of being created, i.e. adding attributes to elements so they are complete before they are added to the page.

Once you have identified the element(s) to work on, the methods to add, remove and modify attributes are fairly straightforward:

A very large chocolate chip cookie on a white plate

For the longest time - most of the web’s teenage years - information from a website could only be stored on the client side using a cookie. Like the nutrition of most teenagers, cookies were an incomplete answer to the problems of client-side storage, while also being tricky to wrangle in .

In the last five years, the web has grown up significantly. Part of that has included client-side storage of data, in the form of the Web Storage API, which eliminates most of the previous limitations of cookies.