Displaying Mathematical Notation in a Web Page

Many of my articles include mathematical formulas with specialist characters and formatting, and as they are often well known formulas I can usually “borrow” them from places such as Wikipedia by taking screenshots. If you cannot do this for some reason then in this article I’ll look at alternatives using TeX and MathJax.

TeX: Typesetting for Mathematics

If you see a mathematical formula such as this

Exploring Units in Math.js

The math.js library’s many features include comprehensive support for units, enabling us to carry out calculations and conversions of measurements including length, mass, volume and many more.

The library has its own comprehensive documentation so in this article I will just give a brief introduction the unit functionality before providing a few examples of more obscure or specialized usage.

The project consists of a JavaScript file, an HTML file and a CSS file which you can clone/download the Github repository which also includes the minimized math.js library.

The JavaScript file has nine functions to demonstrate various aspects of math.js units…

SVG Animation with Anime.js

Anime.js is a very powerful and versatile library which lets you animate CSS properties, DOM attributes, SVG and even JavaScript objects. The library’s own documentation is comprehensive and has plenty of interesting examples, but for this article I will write a simple library using anime.js to create SVG elements with zero size and a specified position, and then animate them to their desired size and location. The end result is an SVG image which appears to grow and assemble itself before your eyes. Let’s get to it…

Project Overview

As I mentioned anime.js is well documented at https://animejs.com/documentation/ so I’ll just get…

An Introduction to Drawing Charts with Chart.js

This is the first of a series of articles on the Chart.js JavaScript library which provides us with quick and easy but powerful ways to draw a variety of data-driven charts in a web page.

In this article I will introduce the library and provide some sample code which will get you up and running quickly but also build a firm foundation for expansion and enhancement.

The Chart.js Library

Chart.js is free and open-source under the MIT licence and “lives” on GitHub and is also on NPM. It was first introduced in 2013 and so is mature and stable.

The library is well…

CSS Image Sprite Maker in Python

If you have a number of small images on your website, for example those used for icons or buttons, it is more efficient to combine them into a single image which is usually smaller in size and requires only one HTTP request to download. You can then use CSS to specify an offset to the exact position of the individual image in the combined image.

Creating the combined image and corresponding CSS can be done by hand but this is time-consuming, boring and error-prone so I have written a simple Python module to do the job for you.

This project…

An Introduction to Web Hosting with GitHub Pages

In your travels around The Internet you may have encountered sites with URLs ending in .github.io. These use GitHub’s own minimalist but very useful hosting service called GitHub Pages which is available free to anyone with a Github account.

In this article I’ll show how easy it is to get up and running with the service, as well as exploring what you can and cannot do.

“Minimalist but Very Useful Hosting Service”

What you get with GitHub Pages is hosting for static files. That’s it! You can’t get more minimalist than that. …

The Fundamentals of Bayes’ Theorem in Python

Getting back to the basics of Bayes’ Theorem using Python.

Thomas Bayes and Bayesianism

Thomas Bayes was a rather obscure 18th Century English clergyman and it is not even certain when and where he was born, but it was around 1701 and possibly in Hertfordshire just north of London. His only mark on history is the eponymous Bayes’ Theorem but the name Bayesian is now used in many different areas, sometimes with only tenuous links to the original theorem.

This gives the impression that Bayesianism is a huge and complex field covering not just probability but extending in to philosophy, computer science and beyond…

Trigonometry in Python

Python’s math module provides a range of trigonometric functions and in this article I will use them to provide a crash course in trigonometry.

Core Concepts

If we have the length of two sides of a right-angled triangle*, or the length of one side and one angle, we can calculate the other lengths and angles. This is known as “solving” the triangle, and is used in areas as diverse as surveying to 3D graphics. The functions involved, particularly the sine, can also be used as the basis for formulas representing cyclical or oscillating behaviour, and is even used in JPEG compression.

*…

Trigonometry in JavaScript

The excellent math.js library provides a flexible and extensive range of functionality to complement JavaScript’s own Math object. This includes a wider selection of trigonometric functions than Math and in this post I will use them to provide a crash course in trigonometry.

Core Concepts

If we have the length of two sides of a right-angled triangle*, or the length of one side and one angle, we can calculate the other lengths and angles. This is known as “solving” the triangle, and is used in areas as diverse as surveying to 3D graphics. …

Base 64 Images with Node and JIMP

Creating string representations of images that you can embed in HTML or CSS

JIMP is the JavaScript Image Manipulation Program which is actually an NPM package, and one of its many features is the ability to create a Base 64 string from an image file. This has various uses (some nefarious…) and in this post I will demonstrate embedding a Base 64 encoded graphic as an img src in an HTML document. This is useful for small images such as logos or button graphics to reduce the number of HTTP requests, and although I am using HTML the Base 64 string can also be used in CSS.

As you probably know, base 10…

Chris Webb

I am a content writer based in London, and I specialise in software development and related topics.

Get the Medium app