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.

As another step up from the game of snake I created in my last post I decided to try my hand at creating a side scrolling shooter. Just like my other posts, this is an ASCII based game played on the command line.

A side scrolling shooter, if you didn't already know, moves a scene from right to left across the screen with enemies moving with the scene towards the player's ship, which is on the left hand side of the scene. The player can fire bullets towards the enemies so remove them from the scene.

In order to create a side scrolling shooter we need to define a few elements.

Computers are not that great at creating random numbers as the methods they use are deterministic. That is, they start from a number (called a seed) and apply maths to that number to generate pseudorandom numbers. Most random numbers generated by computers programs use a seed provided by the system, which is generally the current time. If you can guess the initial value then you can start to work out what the random sequence of numbers generated is. Most random numbers, are therefore not suitable for encryption.

The git diff command will allow you to view the differences in your workspace. This can be used in a number of ways to look at the differences in a file, in a branch or between two branches.

For example, you can view the differences in your current workspace by just running git diff on its own. By supplying a file you can look at the differences in just that file.

To compare the difference between one branch and another you use '..' to separate the branch names. For example, to look at the differences between the head of the 'main' branch and the head of a feature branch use this syntax.

git diff main..feature_branch

This can often be quite noisy, especially on large projects, so to check just one directory between two branches you can add the directory path to the command.

I was looking for a function that searched an array for another array, and after not finding one I decided to write it. What I was looking for was a function that took a smaller array and searched for that exact sequence of items in a larger array. As it happens, PHP does have a number of array search functions, but they didn't produce the correct result.

The array_search() function does accept an array as the needle to be searched for, but this does a multi-dimensional search instead. I also saw some techniques using array_intersect() or array_diff(), and although these functions were able to find one array inside another I was interested in the sequence.

When creating regular expressions for PHP I tend to use the awesome tool PHP Live Regex.

This tool has really helped me over the last couple of years to create regular expressions for many of the projects I've been working on. Everything from validation functions to formatters that use regular expressions have had their expressions worked out using this tool. I even use it for testing one off expressions where I just need to find/replace in a file.

In December 2015, PHP 7 introduced scalar type declarations and with it the strict_types flag. This flag can be used to enforce the type of value passed to functions. Although I have seen it in action in the past, I have never actually used it before so I decided to look into it a little to see what it was about.

For some background, types are not strictly enforced in PHP. This means that it is not only possible to swap the type of a variable from one type to another, but it is also possible to swap a variable of one type to another depending on the context being used. Programmers getting started in PHP will spot this when attempting to print out a boolean value as this will be cast to an integer before being printed out. This means that when attempting to print 'true' PHP will instead print out '1'. PHP will automatically coerces values to be one type to another when passing values to functions.

Tying together different select elements in a form is done with very little effort thanks to the ajax and states system built into Drupal 9. This means that any Drupal form can have a select element that shows and updates options into another select element within the same form. Using this system you can create a hierarchical system where one select will show and populate another select element with items dependent on the first. This is great for giving the user the ability to drill down into options that are dependent on each other. As the user selects the first select element the second select element will populate with data and be shown on the screen.

The experience of using tables in websites whilst on a mobile can be pretty poor. Things tend to get a bit squashed and displaying the information can be a challenge just to fit the table onto the screen.

I was recently faced with a similar problem where I had a particular design in mind for the mobile version of the table. The solution I found was base based on some responsive table designs from CSS-tricks. I'm certainly no designer, but the what I created worked for the situation I was trying to solve.

The basic idea is that instead of treating the table like a table, change all of the table elements to block elements when displaying on mobile. This meant that when viewing the table in a mobile view it would be rendered in a different way, allowing it to be shown in a mode that was more mobile friendly.

Let's use the following table filled with some data.