blueBlog

Plan for Refining of Web Log

What needed improvement and modification?

After using the Web Log and enjoying the activity for a couple of months after finishing my initial creation of a Web Log, several inefficiencies and insufficiencies in the site or “theme” have made themselves known to me, alongside ones relating to my own brain. I have tried to avoid modifying or learning much (I did add some extra styling with regard to headings, subheadings and quotes, as it was immediately necessary for readability of my posts) so that I can accrue some goals for a second wave of incubated work on the Web Blog.

My intention is to modify these simply in within my actual blog repository. It seems working on a “theme” was a good approach before I had no content to test with and around, but now it would make more sense to work within the blog and, if need be, I can simply remove the contents to establish the code itself as a theme. I will list my new goals now.

Post Dichotomy - The short and long post differentiation and navigation buttons have been bugging me a lot. The current set-up is unconventional in that it pulls from two directories in the “_posts” folder, and I want to see if I can achieve this, along with adaptability in navigation, by front matter or other less fundamental means.
HTML5 - I want to try using some of the conventions of HTML5 throughout, where an abundance of “div” usage is replaced with a very useful set of tags like “article” and “section”. On the surface it seemed like an improvement to human readability, but it actually works to greater effect within the great web machine. Including a footer would be nice.
The tagging system. I don’t think there’s a smoother method of implementing a tag system without the python script, if there is I should try to find it. Aside from that, the tag pages need to be laid out in a more pleasing way, and the tags themselves should be easily manageable and consolidated to some extent, I imagine there being a simple semantic framework that can be augmented with much more specific tags. With regards to exporting a theme from the blog, it should be possible to disable the (visibility of) the system.
Image Implementation - The way images are set up right now, I am manually compressing/resizing them with Caesium. I need to implement size styles for images to restrict them to the 360px width, which would allow for uploading of higher resolution images that would still fit. However, there’s still a need to compress and I should make a small script to (perhaps standalone or with caesium) achieve this in batch. I also want to incorporate captions, perhaps pulling from the alternative text, and have them spaced (along with other elements) a little sleeker in the posts. Also, it might be worth looking into the way the images are stored in the asset folder, as It could get crazy in there eventually, but maybe that’s not an issue.
Links - Make external links open in a new tab. While I can argue with myself that this is philosophically wrong, I think it is a necessary move.
Template Generator - Creating post templates with a basic structure along with commented out segments for image alignment and so on will make things a lot easier for a Web Logger. Coupled with an image compression script designed for the blog, and the tag script I stole from someone else, the toolkit of a Think Hour “theme” user will be incredibly powerful. Perhaps I could include in a generated post template an up to date list of tags, so the Logger can choose the tags for each post intelligently and with regards to the greater whole.
Mobile Parity - The site must look good on mobile. This is something I never really considered, and while it looks okay, there’s some odd scaling differences when reading posts. The site isn’t really intended for mobile, and I’m not really interested in making some alternate method for mobile viewing. Parity is important. Perhaps the header buttons could be drawn stacked vertically or something.

The overall look and feel of the website should remain, after these changes. They’re mostly intended to streamline the process of blogging and make the site more readable and usable. That is not to say there won’t be some visual changes and additions, it wouldn’t feel right otherwise. Since I only envisage these will be refinements of the current look, I think it is safe to approach that in an ad-hoc way, tweaking as I go. I want to make bold or emphasized text a similar teal-y colour to the rest of the site, but darker.

Once this is done, I would hope I can draw a line in the sand and try to package as a complete theme. I got ahead of myself thinking that I could package and share my theme very easily last time, and indeed probably in thinking the “theme” warranted it at that point with such fundamental changes needed. I don’t expect it to be a sought after theme, but I do seek to gain the experience in sharing it this way. Maybe this is all a separate task for another day, since I imagine there is lots of laborious work on testing and documentation.

Extra Additions & Jekyll/GH-Pages Possibilities

Aside from these fundamental refinements there are some other more abstract/forward looking thoughts I have to explore and references in kind. I will now do this now.

SVG, Landing Page Animation - I have some ideas for making a simple animation on the landing page. It would be fun to use this to experiment and build on over time as I become a bit more adept at such web things and drawing with code. This is however an application of a pretty default tool-set to create content, so it doesn’t exactly factor into my design, which already has and always will have plenty of empty space in the landing zone to insert a welcome mat.
Canvas/GLSL/OpenFrameworks/Processing - I’m very interested and currently learning about these methods of creative coding, and I anticipate wanting to embed creations or even other peoples work into posts. I believe this would be through a Canvas, and I will have to look into the possibilities of this with regard to GH Pages. I think this will necessitate some JS learning.
Bootstrap - I learned about this big library of cool things I could use on my site. While I’m more interested in building from the ground up to enhance my knowledge, it might be interesting to tinker with. I believe it would work here on GitHub Pages with a Jekyll static website.

Alongside this I’ve got a battery of further Jekyll-powered GitHub-hosted websites/blogs to source from and reference, whether on a meta level or for their specific features. Instead of gathering references from across the board, I am now assured that I will remain Web Logging on GH-Pages with Jekyll, and can focus my pickings as such. Of course the GH/Jekyll centered facets of these sites isn’t my main focus, it could be applications of interesting styles or animation, but I think it’s a good limitation to put on my gathering.

tom.preston-werner.com - The blog of the GitHub founder. I can’t believe I hadn’t seen this before, since it kind of aligns with what I was going for. There’s not really much here to derive new insight or inspiration from, but I have to note it. Apparently he was the guy who made Jekyll too.
habdas - Damn this is ugly. There’s something very 2010 about it, which is interesting…
Mr. Brikman - This man has a pretty interesting navigation system, it’s sort of similar to mine, except there’s a couple more sections. He has posts doled out across separate pages/index for “writing”, “speaking” and more. Looking into the repository for his site it becomes apparent that maybe there’s nothing wrong with my method. Maybe I need to double down on the architecture and forget making it easily scalable, because I have no idea what this man is doing here.

Looking at his navbar links and comparing to includes folder, I’m lead to see that in his repository there’s YAML files for the selections other than the primary “writing” index, and indeed the one that doesn’t follow, the photos link, goes to a flickr page. It’s at this point I realize I have been deceived. These aren’t indexes of separate post directories, they’re just one big long and appended-to YAML sequence being printed out as quasi-posts. This is a sickening hack to my understanding, and it’s my fault for not inspecting more closely.

I was going to look at his readme file too, but it’s several years old and some of the interesting links to the things incorporated into the blog are dead or featuring images of ancient iPhone mock-ups.
Perfection Kills - Now this one has some interesting developments. I enjoy the word count meta-tidbit that’s drawn alongside posts in in the list, but I’m not sure its especially fitting for my desires.

The filtering system on this list simply has to be some sort of utilization of JavaScript, which would make sense given a lot of the blog is dedicated to that very topic. I seriously want to steal this feature, but not quite as much as my want to remain wedded to remaining robustly HTML. I’m looking to apply HTML5 conventions though, so is it really going to do much damage if I were to incorporate JS into the site design? On the surface this looks like a wonderful solution to my tagging issue, including an impetus to consolidate them. Unfortunately I’m not looking to reduce them by this much, but the long posts section does feature a small topic YAML to help differentiate posts in lieu of being date centric, which might work. However again, it would be awfully ugly to use it on only one index page, and alongside the traditional tags. To hell with it.
Wasted Laboratory - Check out this 404 page. I came across this site just by googling OpenFrameworks and Jekyll. While the author writes his posts in Japanese, some auto-translate of his post about the 404 page (rather than the post(s) about OpenFrameworks produced in the google results) and inspecting the 404 page reveals it in fact uses p5.js (a creative coding library, derived from processing) for its fancy screen-spanning canvas-borne generations. This is very nice. I could steal this.

The github repository for the site indeed reveals significant usage of JavaScript, along with the fact this is a very simple site using Jekyll and hosted in the common GitHub Pages way for a user webiste.
aaronson - This isn’t really too useful as a reference, but there’s an interesting set of stuff here. There’s embedded crossword puzzles for one, but I found the portfolio style set-up interesting. Using a “_projects” directory instead of the posts default, and referenced as such in the config yaml, the site indexes these in neat cards which link to sub-page which is in fact aimed at individual repository for that project (simple html page with the JS code), which is very slick.
benjaminhabert - Another site that uses the project directory rather than posts. I guess perhaps this could be some kind of portfolio default in some Jekyll set-up, I don’t think it really matters anyway. Regardless I’m seeing that it really is very simple to use p5.js, and there’s an example here that tracks user input. At this point I’ve been a bit more aware of how basic JS in a canvas is and how much you can do with it, so it’s not a huge surprise but it’s nice to see it in action on a basic Jekyll+GHP site.

Some quick takeaways here are that I really need to get into this JavaScript, and to hedge my bets I can simply utilize and test it for embedding if not (though perhaps alongside) for embellishment and definitely not as a fundamental construction material.

I’m still, perhaps ignorantly/stupidly/schizotypically, wary of using such none HTML features at least for this blog which is becoming very important to me, as I feel one day the CDNs will break apart and the Azure pools will overflow and we will be left with HTML 1.0. That or I’m going to get caught looking like I emotionally invested myself into Macromedia Flash and built a site fundamentally using it. Who am I kidding, I just need to learn and enjoy, but maintain the core spinal system of Web Log and pay heed to compatability conventions. Regardless, wouldn’t it be right to accept the potential future challenges catastrophe might bring, thus simultaneously coveting and laying roots in the now? Okay.

I feel now as though I have a bit more knowledge and confidence from these explorations and the planning. While I haven’t seen anyone be so verbose and making such record of fleeting and useless thoughts, I enjoy it and it helps me collect my thoughts excellently even if referring back will be wholly bad.