JavaScript

HTMX is a JavaScript library that can be used to issue AJAX requests, create CSS transisions, and set up web sockets using HTML

The power of HTMX is that it can be used without writing any custom JavaScript code. It works by looking for attributes in HTML tags using that information to set up events, user interaction, and send requests to a back end. The system is backend agnostic and so will essentially work with any system that can accept, interpret, and respond to the requests.

I have been meaning to look at HTMX since hearing about as it seemed like a decent system with a good community. Since then it has been included into Drupal 11.2.0 and there are plans to make it the core system for AJAX requests going forward. As a result it has jumped forward in my list of things to look at.

Single Directory Components (SDC) consist of a directory of files that go together to create a small component on a Drupal website. The component contains all the templates, styles, script, and images needed to display some content in a consistent way.

Different SDC can be nested together, which means that a site can be built up from different components working together to generate the content.

The power of SDC comes from their ability to be self contained. If you have the need to build a complex component that displays data in a widget then building it as a SDC means that you can ensure that it looks and functions in the same way every time you include it.

Allowing users to switch between light and dark colour schemes on websites is a popular feature. You can often see a small sun or moon icon that allows you to change from light mode to dark colour scheme, or visa versa. Some operating systems and user agents also have the ability to activate a dark colour scheme, which websites also pick up and use.

This feature is so popular, in fact, that a number of browser extensions exist to allow users to force websites to be shown in certain colour schemes, the most popular ones making the site dark. Having a dark colour scheme on a website aids in readability, especially for people who have ADHD and similar disorders.

From a person perspective, having a dark colour scheme in a website means that I can view the content in the middle of the night without causing myself eye strain or disturbing anyone else. I often have trouble sleeping so the ability to read articles in the dark has become quite important to me.

I've seen lots of "our team" pages over the years, but one of the ones that stood out to me the most were those that had an interactive element to them. For me, it adds a bit of personality to the page and makes it feel more alive than a bunch of silhouettes of the directors.

I remember seeing a team page a while ago that had a number of little images of the team that looked at the mouse pointer as it moved around the page. Each face in the picture looked in all 8 directions as my mouse pointer went around the screen. This caught my interest so I had a look to see how it worked.

The page used a combination of a fixed image dimension and background positioning to show show parts of a single image. By combining this with a little bit of JavaScript the page created an interactive image without having to load lots of images. The image can also be simple as it just needs to be a square collage of 9 images, one for each direction the mouse lies in, and a central one to look straight ahead.

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.