Michael Adsit Technologies, LLC.

Search terms of three or more characters

Michael Adsit Technologies Site Specifics

Purpose

The purpose of this post is to explain more about this website, adsittech.com, in its current iteration and how it got to where it is.

A bit of history

This website was originally created when I was fairly new to the industry, lived with dial-up at home and a large stack of books to read through. It was first developed on a WAMP Stack on my laptop. Before anything else, I wanted to make a way to develop sites more quickly myself and clients and so ended up creating my very own PHP XML Form Creator.

The specific product I was planning to push was a Visual Inventory because I was sick of walking into stores and not being able to find what I was looking for. However, at that point, I discovered that I was not as big of a fan of marketing as I was of programming.

Fast-forwarding a few years and many clients later, and I was missing having a team to work with. As such, I joined a local company as their resident Android Application developer and quickly started to bounce around teams fixing various problems while doing just minor work for Michael Adsit Technologies, LLC as needed.

In 2020, my wife and I decided to relaunch so we can work on a game together, and so started with rewriting the main site to some of the skills I have learned in the past eight years and give it a more modern Material feeling.

Technologies Used

Each technology listed here is here simply to explain why it is used, not going too in-depth as they may be covered at a later point.

Front End

React

React is used to create the display for what you see on this website. Specifically, we use Material-UI (mui) to give a modern look while unifying and building upon user experience that larger companies have figured out.

Storybook

Storybook is used as it is something that helps to greatly speed up development of components as well as to keep nice separation of concern. Any time that I may need to test a visual component by passing something hard-coded, I know it is time to pull out this wonderful tool.

Markdown

When starting to do the rewrite I decided that since I love writing in Markdown I should be able to generate most of my site using Markdown. With it, I can organize my thoughts well without distractions when I make a document, and it can force a standardized look and feel. However - it needed some extensions added to be able to define extra functionality for me. As such, I utilized code blocks with my own language definitions, really JSON, prefixed with extended-.

extended-form

Utilizing react-jsonschema-form behind the scenes with a few extras, extended-form uses the below for the generation of the site's Contact Us Form.

1    ```extended-form
2    {
3        "submit": {
4            "route": "/api/forms/contact",
5            "fetchOptions": {
6                "method": "POST"
7            },
8            "successMessage": "Message successfully sent.",
9            "failureMessage": "Failed to send message, please try again."
10        },
11        "schema": {
12            "type": "object",
13            "required": [
14                "email",
15                "message"
16            ],
17            "properties": {
18                "email": {
19                    "type": "string",
20                    "title": "Your Email Address",
21                    "pattern": "\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+"
22                },
23                "message": {
24                    "type": "string",
25                    "title": "Message",
26                    "minLength": 8
27                }
28            }
29        },
30        "uiSchema": {
31            "message": {
32                "ui:widget": "textarea"
33            }
34        },
35        "customErrors": {
36            "email": {
37                "pattern": "should be a simple email address"
38            }
39        }
40    }
41    ```
42

There will be more information about extended-form at a later date.

extended-table

This was designed to make it easy to fetch data and populate a table with it. The core component could be extended to allow virtualization and pagination, but at the time of this writing, such things were not needed and so were not changed. Below is the code block used to generate the Tap Happy scoreboard.

1    ```extended-table
2    {
3        "route": "/scoreBoardsWebService.php?request=1&type=JSON",
4        "fetchOptions": {
5            "method": "GET"
6        },
7        "columns": [
8            {
9                "data": "score",
10                "display": "Score"
11            },
12            {
13                "data": "player",
14                "display": "Player Name"
15            }
16        ]
17    }
18    ```
19

Back End

PHP

PHP is used on this website because that is what it was originally written in and, at the time I had started rewriting the front end, I was hoping to avoid too much rework. I had set up some encryption schemes to work fluently between PHP and Android and did not want to rewrite them.

Node

Feathers

Feathers was pulled in to run the server when there were a few issues happening with ordering on the PHP Server on my host, versus locally. As the services that needed updating were simple enough, I simply recreated them rather than spend days debugging a configuration difference. It was a prime example of where Docker Containerization would have been useful.

Feathers has a super simple to use CLI to get started quickly and gets rid of some of the bike-shedding that can occur. However, as the API for two of the services was already created, it required a small number of changes to the paths to work with the same as had originally existed.

On the boot of the server, parts of the content are parsed into an in-memory JSON document storage to help with the searching.

Phusion Passenger

Phusion Passenger is configured and included by my web hosting company and allows running PHP and Node side by side. Once one has figured out how it has been configured, it is a useful tool. Because of this, it is possible to leave most of the site available even if the node server is restarting during a deployment.

MySQL

Provided as part of the site's hosting plan, MySQL is used to store the high scores on this site as part of the legacy system.

Gatsby

Those of you who have made it this far may be wondering, "Why hasn't he mentioned Gatsby or Next.js?" The answer is simply because I am using Gatsby with some plugins that do things for compilation to be served directly from the server, as well as helping with the browser. And yes, I did try Next.js as well, as it fit my purposes reasonably too. However, my server had some issues with it and Gatsby just had a lot more I could do for customization to work well. Gatsby allows blazing fast page loads, and with the layout plugin I don't have to do much to get the best of both the server side rendering and Single Page App world.

Tags: History, About, Technology

©Michael Adsit Technologies, LLC. 2012-2024