Tech Manual

GitHub: https://github.com/packet-guardian/packet-guardian

Version 1.3.0 is a bug and security fix release. It's highly recommended that all instances of Packet Guardian be updated to 1.3.0.

This version contains a database migration to allow user permissions to be manageable from the web interface. This migration will take place automatically when the program starts. As always, make a backup of the database before any upgrade.

Lesson 11 has been the most fun so far. This lesson looked at creating custom HTML5 video controls. Browsers have builtin controls for video and audio elements but they don't offer all the features one may want. Also, they typically don't fit stylistically with the rest of a site. In this case, custom controls can be created using CSS and JavaScript to add functionality and fit the style and flow of a site.

In this lesson I gained a better understanding of how video, and by extension audio,…

So, I'm not gonna lie. This lesson was difficult. The JavaScript itself wasn't difficult, but the logic in the implementation. Honestly this lesson touched on one of the big issues I feel I have with programming which is thinking through a solution in a concise and logical way. I feel like many implementations and solutions I write simply aren't correct. They may work, but I know it's not the right way to do it. My biggest problem is I can tell when my code is bad, but I don't know how to fix…

Lesson 8 so far has been the most fun. It focused around HTML canvases with the goal being to make a simple painting application. I have some experience with canvases before this lesson. A couple years ago I made an implementation of Conway's Game of Life using the canvas element. I have it setup at the bottom of this post if you want to play it. Source code it here.

Canvas elements allow web develops to have very fine control over a section of the page. Graphics can be as complex or simple as…

For this post I decided to lump together lessons 6 and 7 because 7 was another one that dealt with array functions. It went over four functions .some(), .every(), .find(), and .findIndex(). All of them are simple to understand. The some() function returns if any item in an Array satisfies the function you give to some. This could be used to determine if an Array of people has at least one adult (age >= 18). The every() function returns if all items in an Array satisfy the given functions. For…

After the last lesson which was only JavaScript, this lesson dealt mainly with CSS in particular flex box. The JavaScript that was used had already been covered in previous lessons such as .querySelectorAll(), .forEach(), and classList. In this lesson, you make a photo gallery page where each image is shown and clicking on an image will expand it to take up more space to get a better look. With the expanding image, some text also animates in from the top and bottom giving a nice, smooth feel to…