Projects from Thedro Neely

Micro Blog

Thu, 05 May 2022 09:25:23 +0000

It’s been a while since putting together a personal and this time it’s the ever so popular micro blog. After writing a brief on Hugo, further research indicated that standing up a minimal but decent micro blog is not too hard. It should be obvious, but the design is lifted (inspired) collectively from popular micro blogs on the Internet (Twitter, Facebook, Tumblr, and Mastodon).

The project’s name is canory, and no it’s not a play on the domestic canary. It’s the result of a script smashing the words cannon and armory together to make canory. Armored cannon is its code name, presumably. If you’re going to try out this theme, fair warning that it’s somewhat hacky and incomplete. Read this thread for an installation overview.

Pure Static HTML

HTML is powerful and getting much more so. This micro blog is compiled to pure HTML. The only build steps involve running hugo and copying html files to a place where the almighty index.html is understood. That could be a server, content delivery network (CDN), or whatever floats your boat. If you want to explore the full powers of HTML in all of its glory check out the MDN (Mozilla Developer Network) Web Docs — it’s the source of truth on HTML hands down.

Semantic Pact

The markup consists of semantic tags, custom elements and no classes. Solo maintaining, and handcrafting CSS (Cascading Style Sheets) is much easier this way. Further application of this approach ventures into the realm of web components, but only custom elements are written, without using any of the JavaScript APIs (Application Programming Interface) or splitting similar constructions into components. The semantic pact is my jargon for this approach.

Content Security Policy

Embedding is business. Even though everything is static, there’s no end to the perversity that an embed can do or leak into a webpage. Content Security Policies (CSP) allow restricting what can happen on a web page with a fine degree of accuracy.

Usually my content policies are driven from a server configuration with headers, but since this theme has to be as pure and as batteries included as possible, policies are better written using <meta> tags. Many fine folks already do this with hugo. All inline scripts have been disabled, but disabling inline CSS conclusively will take a bit more cleverness.

Deno and JavaScript

This runs nicely without JavaScript, and you probably won’t even notice the difference, but there are some progressive enhancements using standard JavaScript. Deno is the secret sauce and a very program for strategically avoiding the npm ecosystem and creating a dynamic website. Inside the box, there’s optional TypeScript, bundling, executable compilation, remote imports and more, all for free, and in one executable — deno. Deno for now soft harnesses bundling a few JavaScript progressive enhancements, nothing especially fancy.

Fetching Remote Data

In my previous article, there’s no mention of Hugo’s remote data fetching ability, and that’s because my tendency is to write about things only after trying it out completely. Remote data fetching is a very powerful feature, allowing one to collect dynamic data into the application at compile time and cache that data. Right now, the micro blog can fetch RSS (Really Simple Syndication) feeds (hacky) at build time. Hugo can fetch a wide array of data types including JSON (JavaScript Object Notation), CSV (Comma Separated Values), and XML (Extensible Markup Language).

Current Limitations of Hugo

Hugo is about 80~90% complete by my estimation, at least for my imagined purposes. This theme uses pretty much every feature of hugo and has brushed up against some limitations.

Error Handling Generality: Remote data fetching is a lightning rod for failure. At the moment, many types of data fetching errors cannot be handled, so compilation can fall down in varied situations. Fortunately the upstream developers appear to be solving this limitation.

Page Data Structure: It would be nice to programmatically instantiate a page without Markdown (page resources may already allow this by pre–generating markdown). The page data structure is still sort of a mystery and maybe this is already possible — that’s an investigation for another time. Instantiating a post would allow weaving external data into the page map. My theory is that, you’d need to rebuild the page structure manually first to weave in your own data (for example multiple instances of micro blogs connecting to each other in a cohesive way).

Pagination Generality: In terms of pagination, the separation of taxonomy and term was a nice surprise when making this micro blog — it ultimately means that my main blog can be vastly simplified. What would be great is if hugo could paginate relative to any layout position, but this is probably outside of the scope of hugo's purpose.

Conclusion

There you have it — a quick overview of some technical details of note that arose when crafting this theme. Now the fun of micro blogging begins.

News Aggregator

Wed, 11 Dec 2019 20:52:38 +0000

Mobile view of the front page.

Demo

Here’s a site that’s been in my personal use for while. It’s a local news aggregator that gathers stories from around The Bahamas and creates a tight newspaper esque view. The stories are gathered using old school RSS.

This website is generated using a simple site generator written in Go. I’ve hacked together my own static site generator after taking a peek at both Hugo and Openring’s source code. The frontend does not use any frameworks and is implemented with a nested based approach to obtain a complex

Automatic deployment happens with a simple POSIX compliant shell script. The RSS fetch process is decoupled from the website generation process, allowing for super fast site regeneration.

Internal web pages are generated and passed through monolith to all assets into a single file. This file is served in one That is crazy — but here’s the result of a speed test. In a practical sense, the grade should be closer to F since all data is encoded into an unoptimized document.

Speed Test Results

Note: The source is nothing to write home about but I’ll be adding a link to it once my laziness subsides.

Resume

Tue, 16 Oct 2018 21:37:32 +0000

Mobile view of the front page.

Demo and Source

Searching for “CSS Framework” in DuckDuckGo, Bing, or Google will turn up many results for Bulma CSS. This framework appears to be everyone’s new toy. In my camp, Bulma CSS has been a pleasure to work with so far. This comes from someone who ends up breaking frameworks every so often.

This is less of a project and more of a quick demonstration of modern resume design using Bulma. Something like this could take a bit of time to get right from scratch, but Bulma’s Flexbox based design makes it almost effortless.

It’s a simple web-page but the possibilities are endless. We can add some overlays, sprinkle in a bit of JavaScript or divvy up additional information into active tabs. In addition to Bulma, many good things have been said about Tachyons and Tailwind CSS, which are also excellent lightweight alternatives to Bootstrap.

Personal Portfolio

Fri, 01 Jun 2018 21:37:32 +0000

Demo and Source

This is the website you’re browsing right now. The structure is based on design patterns from the Laravel PHP framework. The comments are handled by Isso — a backend commenting server written in Python. The static parts of this website are compiled by Hugo, while the PHP front controller handles the rest.

The backend traffic dashboard is integrated into the website using GoAccess which is a traffic monitor that reads the access logs of nginx. Nothing much else to it. This website is small, lean, and compact since it was intended to run on a tiny Raspberry Pi.

Content Management System

The content on this site is sometimes edited using an “API driven headless CMS” Cockpit. The Hugo Cockpit addon is to control hugo.

Voiceover Website

Mon, 07 May 2018 21:37:32 +0000

Mobile view of the front page.

Demo and Source

Voice acting is one of my secret hobbies, and this website is but a small gateway. Many web applications consisting of HTML, CSS, & JavaScript are hidden away on my computer but consider this the first that actually does something.

It’s made using a combination of PHP for dynamic content and Hugo for static content – a MySQL database for the backend, and Nginx as the web server. Everything sits behind a front controller and the project structure is based on a very barebones implementation of the Laravel framework.

The content of this site is stored in markdown files and the static components of the website are recompiled by Hugo. The comment section is handled by a PHP commenting system called HashOver.