6/29/2020 - 5 year coat of paint

It has been quite awhile since I last touched this website. Looking back I can see using Bootstrap, Knockout, and jQuery as an interesting design choice to solve theming/styles, data modeling, and requests/DOM manipulation without needing to dive to deep into how it works. I wanted to approach this new coat of paint with a minimal look and feel. Choose a few colors (black, white, orange) and supply web-font to ensure uniform look at feel. With time passing I have had a chance to work on professional projects where we need to solve similar problems and have taken two routes for development:

Take some tools

It will always be easy to take the wheel or secret of fire and make something that works reasonably well. Reasonably well also ends up on client projects and some later team will need to evaluate those past decisions. I am not advocating writing my own library to talk to Twilio services because I feel there is some grave mistake in the available library. I am suggesting to think about why we are using these tools and if we need them. Depending on project requirements or time limitations the best option is to look at what is available and have a narrow list of choices. From these choices determine what later problems might need addressing through issue submission or fxes or if there is value in writing your own solution.

Build your own

When the wheel does not exist you are either pushing that object yourself or thinking about how you would make it move. Sometimes our needs fall outside what is outside public knowledge and we must cobble something together. I may need to authentication to Salesforce and request a subset of data from a few resources and do some further processing. I can venture a guess that my requirements might be partially satisfied, but not fully. Building your own solution also means taking on responsibility for keeping it useful over the required lifetime.

Here we are

So taking a little of from both I ended up using:

My web hosting is static content so I cannot serve up an application and generate the content server side. With that in mind I wanted to use newer tools and try to limit some external requests. I settled on taking a stab at Webpack and getting it to generate parts of the website. We are indirectly using it for client projects via templates and boilerplate code generated from tooling we do not own. This made me feel that there was a distance between me using Webpack and understanding what I could do with it. The short answer is it does some fancy file copying and injects a JavaScript and CSS file into the page. I do need to spend some additional time and turn the injects into actual script and link tags containing the dynamic content. The final set of changes would be to create a template page and fill in some dynamic body content as the header and CSS files are uniform across pages.

CSS

The bane of my existence has and will continue to be CSS. It looks good on my laptop and not so on my phone. Can I move this item 1px to the right or get it correctly layed out on the screen. I decided to make use of CSS resets or normalizing layout to start with to try and make things easier on myself. I broke down the remaining CSS into:

The only JavaScript running on the page that I wrote handles clicking the hamburger menu and scrolling. Anything else is generated by Webpack setup. I decided to also approach designing the site to function without JavaScript enabled which means that the hamburger menu would not function when clicked. Without a working menu I figured it would be simple enough to just display the menu links at the top always. Since JavaScript is injecting CSS I would just provide a CSS that would change the display. With the remaining content being static there is no lost functionality to someone who decides to not use JavaScript.

Neat noscript tricks

Closing

I am still not sure I touched the full breadth of Webpack, but at least had a chance to install a few plugins, define a few rules and convince it to spit out a website. Not sure if this coat of paint will stick for another 5 years, but who knows.