JavaScript

After creating tic tac toe in JavaScript in my previous article I decided to add a second player in the form of a computer opponent. One player would still place their tokens in the same way, but the other player would use an algorithm to determine the best play against you.

There are a few ways in which we can create the algorithm for computer player. The game of tic tac toe is known as a "solved" game, which means that the best play to make for any given move has already been worked out. We could, therefore, build an algorithm that matches the game current game board with the known state of play and then just place the computer piece in the most optimal place.

The downside of that approach, however, is that we need to enter in all of the different conditions of the board before hand. This means that if we want to change the rules or alter the size of the board we would need to enter in a completely different set of game conditions.

Tic Tac Toe (or noughts and crosses) is a good game to create when learning game development as it has simple rules and a known win state. I have created a version of tic tac toe using PHP before, but I wanted to see if I could re-create the game in JavaScript using the canvas element. This is certainly possible to do as everything we need is built into JavaScript itself, which means we don't need to import any packages to get this working.

In this article I will go through the necessary components needed to create a version of tic tac toe using JavaScript and a canvas element.

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

I recently came across a technique that allows you to create a pie chart using just CSS, which means you can create simple charts without including massive charting libraries into your page loads. This makes use of just a few lines of CSS, using conic-gradient() CSS function.

The conic-gradient() CSS function is part of the background style attribute and is part of a family of functions like radial-gradient() and linear-gradient(). It is used to create a gradient rotated around a central point and is opposite the radial-gradient() function that draws the gradients radiating away from the centre.

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Installing Nightwatch.js

To install Nightwatch.js you should have a npm project. This can be an existing project, but Nightwatch.js can be easily installed as a standalone application; which is useful if you just want to get familiar with the system.

Creating a new, empty, npm project can be done with the following command.

npm init -y

You can now include Nightwatch.js as a development dependency into your project.

npm install nightwatch --save-dev

The Marp suite of tools is great for creating presentations from simple Markdown rules.

I've previously written about how to get up and running with Marp, but as I have been using it for a while I have come up with a few things that might be useful to know about if you are getting to grips with it.

Here's a list of what I'll be talking about.

1. Using HTML In Slides
2. Adding Speaker Notes
3. Using Spot Directives
4. Using Images
5. Generate A Presentation From A Document
6. Jump To A Slide
7. Creating Custom Themes

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

This tools stood out to me as it has syntax highlighting built in and allows the creation of presentations using markdown. The presentation can also be altered using standard CSS styles.

I've spent many hours fiddling with presentations in Keynote and Google Slides, so I wanted something that would be simple to use and generate the presentation files I needed.

Adding a progress bar to the top of the page is a simple way of showing the user how far down the page they have read. There is a scroll bar on the right hand side of the page on my current device, but that isn't always present on all devices. It is possible to hide the scroll bar on Macs and mobile devices so that they are only shown as the page is being scrolled.

Putting this piece of information at the top of the page can be a useful indicator that augments already existing technologies.

I was working on a user dashboard recently and decided to add some more signposting to values being updated.  Users were able to select different parameters in order to produce different values, but I thought that the values being updated weren't clear enough.

I had the idea to add some animation to the number as it was updated. This would show the user what items changed as they updated the dashboard. As the dashboard project had jQuery installed this gave me a nice animation system to use.

The HTML of the dashboard was quite simple and contained a number of div elements that contained numbers. Each of the different numbers had a id so that it could be updated independently.

When I first heard the term "Shadow DOM" I had to laugh at the name. I had visions of a cloak and dagger HTML element that would only be seen on the dark web. Or some sort of nefarious shadow site that was the after effect of a hack. In reality, this is quite a useful bit of technology that has a number of applications, although it does need a fairly modern browser to be able to use it. Shadow DOM is part of the web components strategy, which includes custom elements and HTML templates. These give developers the power to create custom tools and experiences that are encapsulated away from other parts of the code.  In this article I will go though what the shadow DOM is, how to use it, and in what situations it comes in handy.

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

To display this bar chart you don't need a large JavaScript library or an backend charting system, you just need a few lines of markup and some styles. Here is all of the markup needed to generate the bar chart. This consists of a wrapper element and four inner elements that make up the data of the bar chart. Note that the width of each element is pre-calculated to be 25%. I'll address the maths involved in this later in the post.