The JavaScript Date Type

Dates and times are less than straightforward to deal with, partly because of the varying sizes of the units which don't often fit neatly into the larger units, and partly because of the almost infinite number of ways they can be expressed in natural language.

Programming languages usually provide robust ways of handling dates and in this article I will put together a solution providing a reference to JavaScript's core date handling functionality.

Continue reading

The JavaScript Map Type

The map data type is simple to understand and use but the topic can cause confusion due to the wide variety of names used to refer to the same thing. On top of that JavaScript did not have its own map type until ES6 came along we we had to improvise with an ordinary Object.

In this post I will run through what a map is before using both an Object and an ES6 Map.

Continue reading

Event Delegation in JavaScript

Adding a large number of event handlers to a page has an adverse affect on performance and a common technique for alleviating this problem is known as event delegation where we add a single event handler to a parent element somewhere up the heirarchy. This works due to the flow of events through the DOM, and I put the technique to good use in my Interactive Periodic Table. In this post I will demonstrate event delegation using a simplified version of the Periodic Table.

Continue reading

Using HTML5 Data Attributes with JavaScript

HTML5 gave us the ability to add arbritrary pieces of information to any element to use behind the scenes for any purpose you wish. These are known as data attributes and I put them to good use in my Interactive Periodic Table. There is plenty of information around on the topic but often with simplistic or contrived examples so here I will present a real-world usage with a simplified version of the Periodic Table.

Continue reading

Interactive Periodic Table in JavaScript version 1.0

The periodic table is a chart found pinned to the wall of every school chemistry lab showing various pieces of information on each element, or type of atom. The information is tightly packed and often difficult to read and understand so I decided to develop an interactive web-based version in JavaScript which is easier to use and comprehend than a static paper version.

My original intention was to simply produce a filterable version of the table, and in this post I have done just that. However, while researching the topic I found that it was far more complex than I originally realised and that there is huge scope for expanding the topic to show more infomation and also to show the existing information in different formats. This is therefore an ongoing project which I will enhance in the future. Watch this space...

Continue reading

SVG Library in JavaScript version 1.0

I have already written a couple of small SVG libraries, one in C and one in Python. However, the most useful and widespread use of the SVG format is within web pages so in this post I will begin to develop a JavaScript SVG library.

This first version has quite modest ambitions: just the ability to draw a few simple shapes as well as text. However, SVG is far more capable than most people realise so I will add further functionality in the future with the aim of creating a far more comprehensive library.

Continue reading