Home / Posts

Adding Styling to a Simple VueJS Application

After completing the two hour VueJS crash course, I felt the wanting to extend the functionality to include an edit, and details view. Furthermore, I wanted to integrate a new CSS framework as well to give the project a coherent and modern look -gasp, without using my framework of choice: Bulma? Well I want to learn something new, evaluate a skeleton (minimalist) framework. For this little addition, I was considering using a heavyweight framework such as Formantic UI (a community fork of Semantic UI), but instead landed on the minimalist framework Milligram For this article, due to work also keeping me incredibly busy on top of other obligations, I opted to split up the two (styling vs functionality) with this article targeting the former. Without further ado, let’s talk about enhancing the experience.

Creating the Experience

It’s been a while since I last used a css framework loaded through a modern web packer, npm being my choice for this project. Following the instructions here enables you to install the framework, but no instruction makes it clear how to import and utilize

Pre Importing the Milligram Framework After a little Googling, it became evident to me that I can simply import it as if any other module, and the css will be included in the project ala import milligram from 'milligram'; in my App.vue file.

After Importing, Milligram playing funny with Brad’s other styles
Color Pallet Chosen

I decided that the color scheme will derive from this palette, which I think is a good starting place for a pleasing, pastel inspired aesthetic From there, I used transparent variants of the colors to form the UI components and call to action elements. I could actually go into a huge post about how the Coolors application has provided and driven every project I’ve worked on in the past three years, and how utterly amazing it is for those such as yours truly who’s not taken design courses and lack original color coordination insights.

Layout and Mobile First Design

I liked the todo’s layout, including the search above. The one item that I decided right way to change was the title and navigation components, pulling them left to and removing any and all text from being centred. Because of the simplicity to this application, there was no real changes to the layout aside from what I had just mentioned. More on this to follow if I have the chance to add the details and edit view.

Responsive Testing via Developer Tools

When designing and developing web pages, the term ‘Mobile First’ gets thrown around quite often by frameworks and developers alike. It’s the indication that your canvas should be designed on the smallest viewfactor first (Mobile, Cellphone/Tablet), and then expanding to the desktop viewports. This enables a different perspective, which is better defined in the explanation I’ve included at the bottom of this article. Simply put, it enables for one to consciously be aware of how responsive elements will act and scale to various form factors from the start, instead of it being an afterthought.

Hover, Focus, and Spacing

One of the first items I learned while doing front-end development was to always highlight your call to action buttons; to make sure the user knew they were interactive and clickable. I did exactly that by adding css to the :hover and :focus states of each button, following an easy to understand pattern described below.

Checkbox idle, disabled, and focused.

I wanted to make it apparent that these were buttons meant to be clicked, since the original HTML checkbox didn’t vibe very well with the page aesthetic I was going for.  

Instead, I switched them to buttons and used the Unicode symbol for a check mark inside. The rounding to the right side is a personal choice, but I think it attributes to a bullet-list, once which is very common in Todos and journals. From there, I wanted to indicate when an item was already crossed off, and thus added the grayed-out class which would visually distinct the completed and uncompleted from the bullets alone. Finally, I gave the hover the darkest variant of my primary, that color deriving directly from the pallet and the other shades being lighter transparencies or alphas of it.

Delete button Hover

I’ve grown fond of Material Design 2.0, and the reliance of button outlines instead of filled in elements. I think they should be used sparingly -as I like to think I did with only the submit button and delete using such a way. Again, personal preference and ignorance. I wanted to do more than just fill the button in on hover, I wanted to make it move under your cursor and signify great intent. To achieve this, I actually set the border radius to a sharper 3REM as opposed to the standard 1REM that I had been using in the idle state. I think this enhancement also helps provide some clarity if it was needed, since many are used to seeing a round red X or STOP sign as opposed to the original look.

Navigation Button Hover

We never want to be lost, even in the simplest of web applications. That’s why I first set out learning that the VueJS router automatically appends the class router-link-active to the currently active route, and making sure there was some styling in place to take advantage of that. An bottom border is that’s needed to provide some context.
I then wanted to make sure you knew those navigation items were indeed links, since there is no indication aside from experience that you’ve seen this button-less navigation bar before. So, I added the to the hover element a bit of gray, so you knew something magical happens here.

Each “page” also is encapsulated in Milligram’s container class, which reduces the width from full screen to 112REM (roughly 1012px) and keeps the app at a good size. Milligram’s default font is Google’s Roboto, which I thought worked really here as well. No need to change what is not broken.

Lastly, I wanted to approach a native animation style for all list elements (that being the ToDo objects in this case) to better resemble native applications compared to simply disappearing as web components often do. This also taught me about Vue’s transition component, which I found already to quite more flexible compared to Angular’s. In my next project, I want to reference the Native-like Animations tutorial I’ve included in the references at the bottom to further enhance the experience.

Deploying to the Internets

When it came to deploying and testing, I figured I’d follow Traversy’s recommendation, I started using Netlify. Netlify acts as a CI/CD deployment pipeline with many built in features which I’ve grown to love, one I highly appreciate is the preview deployments which allows me to spin up per pull request or commit a commit based instance of the project. This way, it’s easy to A/B, and compare. An example of this in action is viewing the original end-state of Todos for Vue, which is the last commit I did based off of Brad’s tutorial: https://5c7c1215662a58cc5535abb6– That link is also the starting place for what became my final style-based work on the final project:!

Having delayed releasing this article due to other obligations, I can say that I’ve been using Netlify for over a month now with various Node applications -built both for clients and myself. I keep finding more and more reasons to love the platform, even in the free tier for that matter! The integration with Github as well, both public and private repositories in the form of the Netlify bot also ensures that no code is merged into the primary branches without being fully aware that they are stable, built, and demo-able through the hashed instance.

Why Delay the Details?

So, a month later since starting this foray and still no details code has made it’s way to Netlify, what gives? Well, I realized very early on that in order to maintain a proper VueJS / Web Application data structure, I needed to integrate Vuex (similar to Redux) or some form of state management since there was no backend to talk to in this case. I also knew that in doing so, I had to rewrite quite a bit of the component logic to work with the Vuex system, one of which I was happy to do but had no time for right now. It’s still on my todo list, the priority rising even higher as Brad just released a lovely video on Vuex as well during the time of the article being written. I’m going to go through that video first, and then circle back here to finish up.


Approaching Minimalism

February 13, 2019 | Life Updates, Ramblings | No Comments

Source: Unsplash, Louis Brassard

An introduction to why I’ve written “Sort through X” on my daily to do lists as of recent!

If you were to ask anyone who knew me well, they’d claim that I have not exhibited values or mindsets which dance around the same way that a minimalists does. I am so far from such a genre (according to some), that I made the joke of calling myself the ‘failed minimalist’ to which, a chorus agreed. Yet, I don’t think it’s impossible for anyone to swing that direction if their interests focus that way. I’ve been conducting research through both YouTube and also forums on how individuals gradually converted over to minimalism -taking on lifestyles inspired by minimalism, and the common thread is that the once the mindset changes, the rest will follow. There are plenty of YouTubers explaining the concept, some of which I’ve included below (starting to see how big a fan I am of Matt D’Avella?) for anyone interested in learning more.

Less is More

It’s funny how easy it is to misunderstand minimalism, I did for years before truly becoming acquainted with what many consider to be the sensible, modern minimalism concept. It’s not about living in a box with only one attire to get you through everyday (could you imagine?), but instead living with only what you need. This means not consuming and housing excess possessions which do not provide value to your person in the average everyday. It’s about not owning more than one good suit unless you wear them more frequently than the average yearly wedding, funeral, and celebration. That is what many explain in the video, so I figured I’d throw in my own thoughts as well.

Closet, Attire and Shoes

I cannot say that I’m one to subscribe to the daily-attire being the exact same wardrobe (duplicates, not re-worn!), but I can see where limiting the wardrobe options to fewer entries being beneficial. Being honest with myself, I probably have two-times the amount of dress shirts than needed for any standard work week or laundry cycle; observations like these being the first creeping of minimalism thoughts perhaps? In the past few weeks, I’ve slowly made tasks for myself (often completed with eagerness) to sort through various pieces of attire and evaluate if it truly brings value to me now, or in the upcoming year. If not, donate or discard! There is still a lot of work to do, but the progress is very similar to that of spring cleaning; a refreshing walkthrough and clearing, similar to pruning a garden of weeds and crud

For shoes, I find myself somehow becoming a collector in the past few years, having owned multiple sets of Vans, Pumas, and Aldos even. This one will be a tougher process since each set of shoes have a specific purpose, some better for long days out walking and being active compared to the typical office dress shoes. On top of that, I’ve also started walking the lines of understanding what it is to be a closet-sneaker-head, which of course conflicts with this article’s topic. This in truth, similar to photography may also simply be a phase, a trend which latched on for a specific time. A follow up update may be appropriate if I’ve dove deeper into these mindsets in the coming months.

Source: Unsplash, Henrik Dønnestad

Digital Life

I’ve suffered from what I like to call “organized digital clutter” since working with my first Dell desktop over a decade ago; files, organized as best as possible into folders, and then stored into parent folders to provide context and hierarchy. Dozens of useless applications installed which are only open once a year, yet  causing system slowdown and friction with the everyday tasks. I’m still figuring out how to approach some of the file clutter, but for now removing redundant applications is a step in the right direction towards digital clarity. I wonder if that’s even possible for a software developer.

Likewise, looking at my current daily driver the Google Pixel 2 XL, similar to all I have the standard applications, popular applications, and the obscure and often (or so I hope) unique ones installed. How many do I use daily? Much fewer than the amount available. So much so, that Google’s Files app has even recommended applications which I have never or rarely open to be uninstalled. So I do. I’ve found that if the application is not useful within a week, and does not serve a purpose which I’m directly interested in outside of that week span (such as buying concert tickets, viewing movie listings etc), delete. The fewer options feels relieving, as if hurdles of pointless notifications and digital jank was simply wiped away.


I find that in the past few months (excluding the holidays in which all of our minds switch to spend-spend-spend sadly), my Amazon (primary retailer) purchases have reduced greatly. I find myself contemplating quite a bit now when interested in items, quantifying their value, worth and if they will add clutter to an already clutter filled room. I find this train of thought to be a major ally to how I spend my income, pushing them to savings instead, and instead creating wish lists on various sites to revisit if the interests returns to re-quantify. Even without the concept of minimalism, this is a train of thought that I wish I knew so far back as high school.

Moving Forward

So, where do we go from here?

For some, playing the minimalist’s game (linked below) will help transition you further into the concept and lifestyle of a minimalist (take that phrase with a grain of salt), for others such as myself: I simply want to keep working towards decluttering and removing “noise” or “valueless” objects and scenarios from my everyday life at a pace which accommodates the world around. In a year, will I wear one exact wardrobe style? Perhaps, but only if the interests dwell there. We shall see!

I’m curious, if you made it this far and checkout the resources below, do share your thoughts and experiences!


My Minimalist Wardrobe

The Benefits of a Minimalist Wardrobe

What’s In a Minimalimist’s Travelbag

The Art of Letting Go

What I Wish I Knew Before starting Minimalism

I tried Minimalism For a Week

We Try CEO Morning Routines

The Minimalists Game

Lessons 1-3

For 2019, one of my goals was to complete the Google/Udacity Kotlin for Android Development course. I wrote more about why over here!

Since starting on the first, I’ve completed the first three lessons of ten in the course (sadly, it appears that they are still working on content for lessons five to ten, and have not published the work for them), so I thought I’d give my initial feedback and also thoughts on the course’s primary focus: developing Android applications using Kotlin.  Digging into the unfinished courses does provide the video files, so it’s possible to learn some of Lesson’s 5-10 on my own without the quizzes or sample code.

Anyways, for those who want to follow along:, and now for some thoughts!

Lesson 1

Dice Roll (Intro)

Dice Roll

This was a basic introduction to Android application development using Kotlin, so if you had taken any previous course prior then nothing should be a surprise in this lesson. Still, one key item that this lesson taught was some of the major workflow enhancements which are enabled by Kotlin compared to the older Java paradigms. Still, I got a cool dice-rolling application out of it while also learning more Kotlin powered strategies including no longer needed to call findViewById(). Thank God.

Lesson 2

This lesson was split into two, as you can see I am quite fond of the first section, and not so much of the second.

Data Binding

About Me

Having understood the basics of Android development from a Seneca course (done in Java), the first lesson was a good refresher. This one on the other hand, this lesson on data binding using modern Kotlin modules felt like the natural extension of what I also employed in iOS using Swift Object Models and UIViews. This lesson brought the concept of Android Development tooling and workflows one step closer to being on par with iOS development, and removing of one nagging item which I fought with endlessly while working on a Java application.

The example is simple enough, and still loaded with enough descriptions of how and why data binding in Android is implemented in such a way that you can pick up the material and easily apply it to your current project. It transitions older development methodologies to more modern design practices which I really appreciate, since you can now bind ViewModel  and VIPER architectures much cleaner than having the object instance and detail view (for example) unaware of their contexts with each other.

Constraint Layout

This tutorial for constraint layout was more of a chore to go through. Though informative and useful for those learning the layout, the actual lesson pacing and end-product left a lot to be desired. I found the last bits of real code (instead of focusing on XML layouts for the other ninety percent) to be the most useful, since it displayed functional programming logic with UI Element Ids. Still, for those working on pixel-perfect designs and specific UI chaining of elements, this would be a good resource to consult.

Lesson 3

Fragments & Navigation Architecture

Fragments are hard. I think between all the various high and low level topics that I learnt at Seneca relating to Android, Fragments and View life-cycles were components which completely escaped me so much that I ended up writing my final project using only intents -we were instructed to utilize fragments as much as possible. Yet, with the newly released Navigation Controller and Navigation Graph (ala Google I/O 2018), fragment development seems much less daunting and again, comparable to the experience on iOS with Storyboards. Having no prior experience developing with Fragments, I can assume that this is closer if not better than what some claim third-party libraries have provided in attempts to better handle the Android View components.

Having gone through all twenty-nine steps in this lesson, I can say that there is a lot of valuable tutorials here; enough to cover a chapter or few even. It goes through the multiple new API’s released this past year and how to utilize both the native ones alongside developer friendly libraries such as KTX (Kotlin Extensions) which make the already less-verbose language (compared to Java) even more to the point. I love the NavigationDirections API built into NavigationControllerUI, and how easily Fragments are now developed and handled.

Upon completing the third lesson, you are presented with a modern application which (in my opinion) you can be proud of having created. It’s very basic, but for someone who never understood Fragments or View components this is like leaping over the wall which you previously didn’t know was only so tall. I also learned that the world of mobile application development is so much more vast than I anticipated API wise, so a good snippet manager is critical if you don’t want to review all the previous code bases you wrote! Currently exploring the open source snippet manager (which works with your GitHub Gists) Lepton:

Perhaps something on that in the future?

Course Link:–ud9012


This past year has been full of lessons, just as every year before; an expected constant which I think is important to reflect upon just around the end to identify growth, ambitions and also sway between where life is taking you, and which steps you want to take. Instead of mentioning the negative lessons, inner turmoil and emotional demons, I wanted to touch upon some career and personal growth discoveries that I learned this past year – some even being common sense! Without further ado, here is three lessons from 2018 and three goals for 2019:

Protect Your Hearing at Concerts (Ear Plugs)

In December, I went to a back-to-back dual-set (try saying that three times fast) show put on by my emo years hero’s: Silverstein (touring with Hawthorne Heights, As Cities Burn, Capstan). It was absolutely fantastic, and also long (4+ hours it felt like of loud music, blasted straight at your eager-to-headbang self)! For the first time in all my concert going events, I decided to wear hearing protection (which I always carried, but forevermore decided to ignore) since I knew I’d be close to the stage and also exposed to incredibly loud and sharp sounds for hours on end. Fast forward to end the end of the night, and I noticed the following thoughts or side affects:

  • My ears weren’t ringing nearly as much, or as loudly as one would expect.
  • The removal of the high ‘shrills’ due to the hearing protection actually made the live sound more enjoyable.
  • I was able to talk perfectly normal the next hour, and the next day.
  • I hopefully will not go deaf from this concert at least.

I’m definitely continuing this for the majority of my upcoming concerts this year.

Step Away from Technology Periodically

Simply put, learn to step away from all of the screens; the digital distractions and notifications, the networks, the allure. I’ve been a huge Matt D’Avella fan, and his video Breaking Your Phone Addiction’ really struck a chord with me as I immediately became aware of the digital ‘twitch’ that he described in the video and discussed similar findings with another like friend who was researching similar (thanks for the chat Andrew!). There was one more item that I noticed when I set all technology aside for the vast majority of December (sans work of course), it gave me room to clear my head and also evaluate interests, focus, and other non-digital topics.

For the past four years, I’ve enveloped myself in all things digital and binary-centric (aside from writing notes here and there and attempting to journal off and on), so this was really taking myself out of my expected comfort zone. Once you realize this, allow yourself to breathe and take in the world around  you; it’ll allow your never-stopping head to finally slow down and relax. I’ve learned from peers that some do this easier than others, sometimes naturally.

Take Yourself out of Your Comfort Zone

My career titles  since starting Seneca College have been rather humorous. As I’ll explain below in further detail, I got into software development because I was interested in Android, iOS and Desktop Application development. Yet, my first two coops (the later of which stemmed over a year) both revolved around web developer job titles (Web Developer, Front-end Developer, Full Stack Developer), and my current full time title revolves around the DevOps and Cloud Engineering concepts. It’s nowhere near what I originally went for.

Yet, I am content as hell to have experienced and learned those positions, since they took me out of my comfort zone and emersed me in such a different scope each time that I could add a different stack specialization from each title. In English, it forced me to become a better developer; a more well-versed and depth-aware programmer who could make awesome (I hope) websites for his own work, orchestrate and manage the CI/CD pipelines for his applications and also manage their cloud infrastructure – all in the span of three years. If you take yourself out of what’s familiar, you may benefit similar to as I have, and perhaps learn tricks that will boost the capabilities of your true passions.


Below, I’ve listed some goals that I’m aiming to complete (there are more, but I think it’s better to start small and see where we can go from there) for this year. Some of these goals revolve around daily involvement, so there has to be some realism and flexibility during the more hectic days where travel, meetings, and events consume precious hours of the day. Still, the worst that can happen is I turn away now or midway, so why not focus on being consistent where possible, and picking up as soon as possible from a falter (such wisdom [sarcasm])?

Read 20 books

In the average week, I probably watch a few hours max of Netflix (perhaps more than I like to admit since I have now given in to enough peer pressure that I am catching up on the classic ‘Friends’), and binge  both foreground and background focus with YouTube. I like to consume as much as I can through the platform, both in documentaries, tutorials, technological journalism, music, etc.Yet, I found myself also enjoying and truly growing as an individual not by the countless videos , but by the books I was invested in. Reading during my travels is by far one of the most common commuting habits I have, and in the past year I’ve managed to read fifteen rather lengthy books (all can be found on my GoodReads). My goal for 2019, read twenty books -and then keep going from there!

Complete Google’s Android + Kotlin Online Course

I got into programming with the intent of learning how to develop Android and iOS applications. Having completed the introductory courses offered by Seneca for both courses, I longed for more. Along the way of working towards my career, I took a few directional steps that some would consider wasted efforts or missteps -I don’t agree, but I certainly didn’t jump to mobile application job offerings at all; aiming instead for modern web development, DevOps and Open Source-y goodness. This past Google I/O, a new course created in tandem by Udacity and Google was released which targeted intermediate Android application development with Kotlin. I figured, it’s the perfect course to pursue my original motivations, and hopefully also position myself closer to where I think (at least as of writing this article) my specialization should be. The great reward from taking a course like this is that for one, I get to develop and enrich myself in the technology stack closer to my original intents as a hobby and personal growth task, and also implement ideas, portfolio items, and hopefully useful items available to many based around what I’d learn from the course. They would be hopefully architected and developed in a way to be somewhat future proof (one can hope)!

Journal Daily

I wrote about the benefits of having an analog notekeeping workflow perhaps a year or more ago; and since then I’ve had an on-off relationship with the same workflow due to a world that moved faster than I could keep up with on paper. Realistically, it’s no excuse; I got sidetracked or dropped the idea of paper notes and journalling and organizing for “it’s somewhere in my head, don’t worry!” promises. Since December, I decided to revisit and truly dedicate time to the subject; following a reduced variant of the Bullet Journal system created by Ryder Carroll. I found that after journalling consistently for two weeks, I found myself more at peace mentally with my thoughts of the day. Instead of having tasks and useless notes swimming around an already burnt-out head, I could instead put them somewhere a little more permanent to rest and congregate.

Now, I can reference them in one location, and declutter one more segment of my mental capacity with each new entry. It’s not all smooth sailing mind you, there is time and effort put into this system which may appear as a waste to anyone else not using the same exact system, but I find there is a beauty in it too: because each pen stroke is permanent unless otherwise trashed or overwritten, you truly do have to ponder and make think before the first word is put down. Notes truly mean something to you (since the purpose is also to avoid being verbose) and serve as a way to organize so much with just a paper book. At the same time, as I find more ‘modules’ (as I’ve come to call them), I write down the needs and how I think it would work best so that with the next bullet journal, I can place it properly into the system instead of being found on a random page as a rough draft. Needless to say, I’m enjoying the investment so far.

For those interested in also the course:–ud9012

For Those interested in the Bullet Journal system:

For those interested in my previous writings on Analog Journaling:

For those interested in Breaking Your Phone Addiction (Highly recommend):

Some Thoughts from a WordPress User

As a developer, I find a lot of the ‘magical’ moments occurring from discovering new technology, platforms and applications which challenge the norm, or go beyond the tried and true to carve a path both familiar and unfamiliar to the user. While reading either Reddit or HackerNew (cannot remember origin sorry!), I saw a comment comparing popular CMS platforms to a modern abstract interpretation: Flat-File based CMS; namely, GRAV. I decided that I’d take a look. I wanted this look to be brief, similar to how one may compare this look to a spike in a sprint, where some time is spent identifying the viability of investing further efforts and time into the task.

I should preface this by explaining what is a Flat-file based CMS, and why it caught my attention compared to the hundreds of offerings to your typical LAMP stack. CMS Wire described a Flat-file CMS platform as:

[A flat-file CMS is] a platform that requires no database. Instead, it queries its data from a set of text files.

Because there’s no database involved, a flat-file CMS is supremely easy to deploy and super lightweight in terms of size. Some flat-file CMS even run on as little as five core files.

Flat-file content management systems allow for heightened speed, simplicity, mobility and security. Plus, they are an approachable solution for the less technical and underfunded.

Here are the key benefits of a flat-file CMS:

Quick Deployment: installation can be done with an FTP client alone.
Site Speed: thanks to the absence of database queries, sites load a lot faster.
Lightweight: flat-file platforms are typically very small in size.

Mobile: because they’re so small in size and because they have no databases, moving flat-file projects from server to server is a breeze.

The lack of database I found unique since this opens up potential performance benefits and NoSQL styled archiving through your own file storage; I’m a sucker for those which oppose the expected, so I was all in for trying this CMS type out. I decided to approach this overview similar to a user, instead of a developer who’d be integrating API’s and various other snippets into their project, to better understand how it compares to the average user of WordPress which powers the current site you are reading this on.

Installation and Setup

Every good developer follows the README and instructions, after attempting all implementation ideas first. I was no better, having overlooked the three quick-install directions for this already portable application. They are:

  1. Download either the Grav core or Grav core + Admin plugin installation package
  2. Extract the zip file into your webroot
  3. Point your browser at your local webserver:
Unzipped File System (default)

I downloaded the Core and Admin plugin package, and encountered two issues within seconds of attempting step three, they were:

  1. Renaming the folder after extracting would have been a better idea than moving all ‘public’ files outside the folder (essentially moving the folder structure up a tree node), because one of the hidden files that I neglected the first time which was critical was .htaccess.  
  2. Tested in my GoDaddy Playground domain (, I had to enable a few PHP modules and versions which I’m led to believe are commonly enabled by default. Not an issue, but not easily accessible to those navigating around various hosting provider’s interfaces and default configurations.

Once fixing those two, the setup process for creating your website and administrative account was smooth and quick. When finished, you’ll see the admin interface similar to this which alludes to a successful setup!

Default Administration Dashboard


I’m currently playing with Grav v1.5.5, and version v1.8.14 of the Admin plugin.


What are the available themes like for GRAV? Well, if I had to summarize for those more aware of Drupal, WordPress and ModX’s offerings: stark. This is expected, I have no arguments or expectations about the available set being so low; it’s a brand new platform without the world-wide recognition of WordPress and other mature Content management systems which drives adoption and addon creation. At the time of writing this, there are 102 themes supported ‘officially’ in the addons portal -I am sure there is at least this amount in unofficial and unreleased themes as well scattered throughout GitHub. A few characteristics of the official themes that I’ve noticed are:

  1. Some are ports are popular themes and frameworks from other CMS offerings
  2. There are bountiful amounts of Foundation, Bootstrap and Bulma powered themes
  3. Many of these themes are geared towards three mediums:
    1. Blogs
    2. Websites
    3. Dynamic Resumes and Portfolios
MilliGRAV theme on

I certainly don’t have the qualifications to judge CMS themes, but I can say that if you are not in the mood of creating your own, there are plenty to choose from and extend as needed – You’ll see below that I chose one that I hope to extend into a dark theme if time and ambitions permit, but that’s another story for a different day. It appears new themes are published and updated weekly, which I think implies a growing ecosystem. I tried out the following themes, and currently have the Developers Playground instance  using the very last in the list below:

You can see the official ‘skeletons’ over here, which provide a quick-start template and setup for various mediums. A nice addition for those unsure how they want to use GRAV just yet.


If I wanted to be snarky, I’d say that I’m surprised there are still PHP developers in 2018. That would be ignorance and bias for the record, since PHP is still quite the lucrative language to know; almost every non .NET blog is powered by LAMP stacks even to this day -somewhere around 60% of the public internet is powered by PHP and WordPress, right? The saying goes something like that at least. That also means, that there should be a plugin ecosystem growing with GRAV, right? At the time of writing this article, there are 270 plugins in the known GRAV community. These wonderful modules include:

  • YouTube
  • Widgets
  • Twitch
  • TinyMCE Editor
  • TinySEO
  • Ratings
  • SQLite
  • Slack
  • Smartypants
  • Music Card
  • LDAP
  • Lazy Loader
  • Twitter
  • GitHub

The list goes on and on, but I listed a few that I found intriguing. I plan on playing with a few and making the currently static root for into a GRAV site, which will link to my experiments and work while utilizing some of the plugins.

Portability & Git Sync

So, why did I find intrigue in a Database-less CMS? Well portability for one. If all you need is Nginx or Apache with the correct (and standardized) modules enabled, you can have everything up and running with no other dependencies or services to concern yourself over. It means that I can develop locally, and know that when I update the production side all of the data will be the same, alongside configurations, styles, and behaviors. On top of those benefits, it also meant that I could version control not just the platform, but the data using typical developer semantics.

There are multiple workflows which allow for version control of content, similar to Ghost and Jerkyll which caught my attention. If you want lightweight, you can version control the /user/pages folder alone, and even utilize a plugin such as Git Sync to automatically pick up webhooks from your favorite Git Platform upon each commit. That’s one way to get those green squares, right? I see this incredibly advantageous because it allows for a much more flexible system which doesn’t dictate how items are versioned and stored, and instead treats the overall platform and it’s content similar to how a Unix system would; everything is a file.

You can find all the details for utilization, development, and contributions over here:

Closing Comments

Once issue I noticed quite frequent in both the themes and plugins, is the reliance on the [insert pitchfork.gif] JQuery library for the vast majority of the UI heavy lifting. Moreso, the documentation and Discord channel appears to be quite helpful, so first impressions lead towards a developer-friendly environment where you can build out your theme and plugins when the community ones don’t fit your needs.

I noticed that many of the themes can be overwritten safely (meaning you can update and not break your custom styling), which gave me the sense that there’s plenty of foundation to work off of instead of starting from a blank slate. I like that, because I really enjoyed the aesthetic of MilliGRAV, but longed for a darker theme such as my typical website. I may experiment porting my color theme over and seeing how well that goes in my next experiment with GRAV.

All-in-all, I really enjoyed doing a quick sporadic walkthrough of this content management system and can see myself using it in the future when I want to migrate away from WordPress for clients and myself; perhaps even start clients there if  they have less requirements and needs. I even see it coming up even sooner for static sites that need an update, and CMS integration such as which is in dire need of a refresh. GRAV would fit perfectly there.


I decided while reviewing the article to build out two Dockerfiles which revolve around GRAV, one being a templated default started that you can run locally, and the other which copies from your custom GRAV directory to an apache server for development and testing. Both employ using port 8080, and could be configured for HTTPS if you want to further extend them! Default Grav (non-persistence) + Admin Dockerfile provided by the GRAV developers:

After further investigation, it appears the link above also describes a workflow similar to what I was going to suggest utilizing volumes. I’m removing my link and advocating theirs, which works.


Hosted by GoDaddy, Leveraging Let’s Encrypt and ZeroSSL

At the start of 2018, Google made a major push to rank and direct users to HTTPS websites in effort to be more web-safe; a fantastic way to push for such security onto as many websites as possible, aimed at those who care about there search rankings, privacy, and consumers. This also meant that at the time of writing this article, I was already at least eight months behind on this -and GoDaddy was the persistent parent who always reminded me of the HTTPS push, alongside their one-click-install SSL certificates sold on top of their hosting packages. In 2018, who wants to invest hundreds for SSL just to spend as much (if not more) in the next?

I decided to try out Let’s Encrypt on both my WordPress blog site, and a static website which serves purely HTML files (for the manner of this test). Before we go about this tutorial, I figured that we should establish what defined a secure site and explain the motive of Let’s Encrypt, which I’ll be utilizing alongside the ZeroSSL tool. Though I can see where self-signed certificates are useful for high-end corporations and platforms, for your average website or application, Let’s Encrypt should be perfectly suited, and here is why I gather such opinion.

What is HTTPS / SSL?

How-To-Guide describes the differences between HTTP and HTTPS as the following:

HTTPS is much more secure than HTTP. When you connect to an HTTPS-secured server—secure sites like your bank’s will automatically redirect you to HTTPS—your web browser checks the website’s security certificate and verifies it was issued by a legitimate certificate authority. This helps you ensure that, if you see “” in your web browser’s address bar, you’re actually connected to your bank’s real website. The company that issued the security certificate vouches for them.

When you send sensitive information over an HTTPS connection, no one can eavesdrop on it in transit. HTTPS is what makes secure online banking and shopping possible.

It also provides additional privacy for normal web browsing, too. For example, Google’s search engine now defaults to HTTPS connections. This means that people can’t see what you’re searching for on

If it wasn’t obvious because of the above, the following websites and applications should be avoided if they don’t support HTTPS as of now:

  • Shopping portals
  • Banking applications
  • Social media platforms
  • Applications which consume sensitive data

If it’s any incentive, Apple’s application programming manifest defaults to HTTPS requests, and attempts to make a non-secure API call must also override this default; often failing the application in the app store approval process if not corrected.

What’s Let’s Encrypt?

Found on Let’s Encrypt’s website:

The objective of Let’s Encrypt and the ACME protocol is to make it possible to set up an HTTPS server and have it automatically obtain a browser-trusted certificate, without any human intervention. This is accomplished by running a certificate management agent on the web server.

Working with GoDaddy & SSL Certificates

If you are using GoDaddy (as I am in this tutorial), one crucial item you need is access to your account’s full cPanel interface. The web hosting LAMP stack should come with the platform access by default, as opposed to the WordPress hosting tier which grants no such means. Without, you may be stuck having to purchase a Certificate from GoDaddy who will kindly also install it for you onto your website. But, what does that cost look like? Because this tutorial is revolving around a blog site, and a static website, I’m not going to tread anywhere beyond the standard consumer offerings; ones which hobbyist and developers would utilize.

According to 10/15/2018, the GoDaddy offerings are the following for SSL Certificates and installation:

Tier# Sites CoveredCost / Year
One WebsiteOne$70.00
Multiple WebsitesUp to Five$154.00
All Subdomains of a Single WebsiteOne, all Subdomains$311.50

There is one benefit that I see coming from GoDaddy’s offerings (which, if I may add is freely available on many other providers listed below), is that it’s a year-long valid SSL certificate, which greatly outlasts Let’s Encrypt standard 90 days. Not knocking the company, simply the product’s cost PER website.


ZeroSSL is a fantastic interactive tool which runs on top of Let’s Encrypt, allowing for even easier SSL certificate generation and management. I find it utterly helpful with managing and describing the steps required to obtain a valid LE certificate for your various domains.

Here is a step by step which follows the video titled ‘Install Godaddy SSL Certificate for Free – LetsEncrypt cPanel installation’ found in the ZeroSSL link below. I highly recommend following the video, since visually it makes a lot more sense compared to the steps below.

  1. Log in to cPanel.
  2. In a seperate tab, open
  3. Click on ‘start’ button under ‘Free SSL Certificate Wizard’.
  4. Enter in your domains, you will be prompted to also include a www- prefixed variant.
  5. Select both checkboxes, click next.
  6. Select next again, which will generate account key.
  7. Download both the cert and private key for safe keeping.
  8. Hit next, where you are asked to verify you own the domain:
    1. Download the two files provided
    2. In your cPanel, open the file manager and navigate to the domain of choice.
    3. Create a folder in the domain titled .well-known
    4. Create a folder inside called acme-challenge, upload the two verification files to this directory.
    5. Once uploaded, click on the files in the ZeroSSL listings to verify. If you are able to see the keys coming from your domain, the next step will verify and confirm ownership successfully.
    6. Hit next to confirm
  9. Download the certificates generated in the last step, or copy them to your clipboard.
  10. In cPanel, navigate to Security->SSL->Manage SSL Sites
    1. Select your domain
    2. Add the first key (the certificate, which when copied contains two keys separated by the expected ---. Take the second key and put that into the last field (Certificate Authority Bundle).
    3. Copy the private key from ZeroSSL and put into the middle corresponding field.
  11. You should see green check marks which verify that the values provided are valid, and if so, click the ‘Install Certificate’ button. This will install the SSL certificate for that domain.
  12. Test by going to HTTPS://<YOUR_DOMAIN>, if you get a half-lock under HTTPS, see the topic below which describes what has to be done for a static site or WordPress site to be truly HTTPS compliant.

If the above worked, then you have a valid SSL certificate installed on your domain which will last 90 days! But, this is currently only accessible when a user types in ‘HTTPS’, so how do we default it? Adding the following lines to the bottom of the domain’s .htaccess file will reroute all traffic to HTTPS gateways!

Static Websites

The following need to be updated on your Static site (which should also apply to the vast majority of server-side rendered websites):

  • All links and references, moving HTTP-> HTTPS
  • All images, external content coming from CDN(s) need to be updated to use HTTPS
  • All JavaScript libraries and files need to be referenced using HTTPS too!

From there, you should be good to go! I tested the above using my latest little project ‘The Developer’s Playground’ which can be found here:!


Woah, blogception!

For WordPress, I found the Really Simple SSL ( plugin mitigated many of the common issues that would arise from a previously HTTP configured installation. It will correct image references, link references, and common semantics which makes browsers such as Firefox or Chrome complain about the site’s integrity. It really is, Really Simple SSL!

If you are using Google Analytics, you’ll have to update the domain’s via unlinking and reconnecting (depending on how you’ve connected the platforms), or by configuring via settings within the console.

The website I used for testing and confirmation of this process is the same one you are probably reading this on, which is! Notice that lovely lock in the URL?


This post I don’t find to be the best in structure or information, but it does provide one item which I was looking for when trying to understand and implement SSL on my GoDaddy based sites; how to do it. Finding ZeroSSL wasn’t as easy as I would expect, and included searching through various forums and tickets, with no direct link or resource pointing to it from the search itself. Hence, I wrote said post.

Once you go through the process twice, you’ll see just how easy it is to setup Let’s Encrypt on your domain, and have a valid secure site!

Sources & Reference

From a Developer’s Perspective

“NodeJS and Windows don’t work well.”
“I Need to run with Root Permissions to globally install vue on my MacBook Pro!”
“NodeJS broke my Linux Servers FS Permissions.”
“NodeJS can’t be found in my PATH!”

I’m sure you could list ten more items before finishing the next paragraph, but it’s clear to see that when discussing NodeJS, you cannot couple such powerful feature sets without the risk of also introducing issues with your own system or as I like to call it, ‘file-clog’ from the thousands of globally installed modules you make available to each project.

I found myself frustrated with this constant battle, be-it on ANY system that I was using. Eventually, they all became too cluttered and unlike a USB key which you could pull away and forget about, it was hard to clear out the jank without exposing your rm -rf habits to critical file systems. This is where I came up with the convoluted but totally awesome idea: Can I run NodeJS projects through Docker, and discard the container when I am done?

Turns out the answer is yes!

Aside from the above, why would anyone really look into this approach? Well, let me provide a few examples:

  • Your AngularCLI install is out of date, and any attempts to update also messes with your TypeScript version installed in the project or on your system.
  • Your testing framework creates files which aren’t cleaned up after, which results in artifacts on your system which are out of date by the next run.
  • You don’t want to muddy up your PATH with dozens of modules or leave it as stock as possible.
  • You want to leverage similar workflows on multiple computers using a single setup script/configuration.

The two workflows differ due to end-goal, I’ve included NodeJS’ fantastic workflow for ‘dockerizing‘ your application for production and orchestration, alongside my own development workflow. Whereas NodeJS’ simply need minor refinement (such as using multistage Docker builds to reduce final container size -stay tuned for my exploration and updates to that in the tutorial repo outlined below!), my workflow is still a work in progress.

My end goal of reducing .node_modules found on my computer is still not 100%, but it removes the need for global CLI’s and tooling to be existent on my file system, alongside Node itself. I imagine at this point into the post, you’re wondering why would I bother trying to complicate or remove the NodeJS dependencies in my workflow; to which I simply say: why not? In my mind, even if the workflow gets deprecated or shelved entirely, I’m glad that I got the chance to try it out and evaluate the value it could provide.

Dockerfile – My Workflow Tutorial – Development

My workflow leverages Linux symlinking with your application folder purely for the ability to edit your project in the IDE or text editor of choice, instead of in the container. This, coupled with many CLI’s having auto-build enabled by default creates a powerful and automated development engine. Scripted portions allow for simplistic automation of the redundancies such as mounting the code directory to /app, and all that is left is for you to run in the container (which the script lands you in):

Leveraging the Seneca Application in the Offical-Node-JS-Way Folder

One critical item which you need to do is enable in the Docker settings the shared volume location for your work/development directory. Without this, the script will fail to copy a symlink version of your project. On Windows 10, this is still an uphill battle where permissions and file system securities make this a not-as-smooth process. See the following link for an explanation why the bash script determines your OS and changes location prefix:

Running puts us directly into the container with our code in /app

The beauty of this method, in my opinion, is that it allows for consistent environments (such as what Docker is intended for) both for development and testing, with the absolute minimum of clean up or exposure to your filesystem. Because of the system link to your project folder, files modified in your editor or in the container reflect the other. This leads to node_modules also being a residual artifact that my next version of this workflow aims to remove from the equation. Once you’ve shut down the container -and thus, removed the link to your project(s), a container-cleanup is as simple as:

Or to kill all running containers

Then to finally remove the image

Or to remove the image(s)

Development Server working via Port 8080, utilizing a Node module such as Nodemon would cause rebuild and refresh (client-side) per code change. Damn useful!

And boom, you are now back to a clean filesystem with your project safely and cleanly in its own place, the only remainder being the .node_modules folder in the project itself which you can delete manually.

Dockerfile – NodeJS Tutorial – Production Build

The official way that NodeJS recommends using Docker is for containerizing your final application, which I highly recommend once you get to said stable state. It’s fantastic for having all your final dependencies and compiled source code running in a container that can be handed off to the cloud for orchestration and management.

Running to pull Docker image

I used this method quite often when deploying MEAN-based microservices at SOTI, and also for my own projects which are then orchestrated with Docker Swarm, or Kubernetes.

Configuration and listing of Docker images

The benefits with this workflow include being able to utilize Docker’s multi-stage build process so that the node_modules prior to being bundled in the application exists in a staging container which is never included in your final image, and instead, only the final output is bundled.

Local test of final application container

Taking their tutorial, I wrote two scripts titled and (pictured above), which automate some more of the process. Taking an old, lightweight application written for OSD600 and leveraging Express as a dependency, you can see how powerful this option for bundling and containerization is!

Closing Thoughts on V1

Well, I hope you get the chance to utilize this workflow and improve upon it. I’m looking forward to seeing what you can do with this little experiment of mine, and also how it may better maintain the health of your host operating system while exploring the hundreds of JavaScript frameworks and libraries which are created daily!

I decided to label this Version1, implying that when I have the chance to revisit the process I’ll update and improve it. In that vein, I also did some thinking and decided to compare or share some thoughts on both processes:

  • Following the NodeJS way is far too costly since it would recreate the container each time, the current workflow at least keeps all global cli’s to the container itself, and Node itself is contained as well to the image.
  • Likewise, following the NodeJS direction would remove some of the modularity I was aiming to keep, so that it could be used on one, three, ten projects all the same.
  • I had Toto’s Africa on repeat for a good hour or so while drafting this, apologies if you can notice any rhythmic mimicry to the first verse at points in the writing.
  • Updates to this will come, but for now I am content with the current workflow despite shortcomings and complexity.
  • Docker’s documentation is by far one of the best pieces of technical writing I’ve ever been exposed to. It’s that good.

Tell me, what is your Docker workflow? How do you use Docker outside of the norm?

Tutorial Repository

References & Research:


City Bokeh
“City Blur”

So, this blog post has been long overdue. There is both so many experiences and thoughts I want to share, and yet so few which I personally feel would be of any use to you. Regardless, without any order, here are some of the activities that I’ve enjoyed and also learned from this summer. For the technical, programming centric, let me follow that up with a smaller post since I didn’t commit anything major this summer outside of my work at ManuLife (which has its own lessons including Docker, Kubernetes, Concourse, Chef, … let’s write an article on that soon, okay?).

PS. TLDR can be found at the bottom.


It’s no surprise to many who’ve followed my social media channels outside of Twitter that I’ve started adopting many vlogger / cinematography based habits including in-the-moment streaming, hourly updates, and capturing images in any way I can while trying to express a dramatic composition. Through social media, I also complained about small annoyances (such as not being able to change the focal length or aperture on my Pixel 2 XL. First world problems?) which probably should have been simple annoyances, but instead led me to purchasing a second-hand Sony Alpha A6000. Out of all the impulse purchases made, I think this is arguably one of the most spontaneous, and also best purchases I’ve made without hesitation. The camera enables both a new level of expressive outlets, and also a new money-swallowing hobby for me to jump headfirst into.

Svitlana likes to use the camera as well
Svitlana likes to use the camera as well

Yet, I didn’t once hesitate or draw regret over the purchase or the hobby. Instead, I began planning more and more events, trips, areas to visit with frequent friends such as Svitlana, Jessica, and Nick. I began spending countless hours learning about framing, editing RAW images, and also how to manage a basic following -all through the magic of YouTube, Udemy or Pluralsight (Thanks ML for hooking me up with PS for free!). The visits to the hometown became much more meaningful, and allowed me to stretch the concepts I was learning where possible. I spent two hours waiting for a chipmunk (named Fred fyi) to come and go, getting closer and closer to the camera until finally I captured shots such as this.

Fred the Chipmunk
Fred the Chipmunk

My interests in Photography also helped both my father’s media and branding, and my friends who’s social media accounts were itching for new profile pictures, content, and edits. I suppose the creative side broke through quite a bit over the summer thanks to photography. Here are some shots which are either my favorite, my friend’s favorites, or ones being withheld from Instagram for now as I figure out the direction and tone I’d like to push towards -assuming there is energy, passion and time in the day to account such. Leaving it as a hobby is equally a likely scenario, which I’m content with as well, because it enables a new way to capture memories such as upcoming trips and events.

“Staged”, Taken by Nick

Nick Guyadeen

SvitlanaSvitlana Galianova


I’ve always been a huge fan of the Tech YouTuber / Content Creator niche, and have felt a genuine connection to them similar to how one may with Twitch Streamers or Bookhauls (two other content-based digital niches). Likewise, I always had a small voice in my head who enjoyed cinematography of different genres, different moods; good or bad. I sometimes found myself coming up with frames, transition ideas which at the time, I thought were a sign that I was thinking of UX improvements on whichever project I happened to be working on.

Toronto Island Sunset
Toronto Island Sunset

Todd Folks - Thunder in the Hills
Todd Folks – Thunder in the Hills

As YouTuber’s became more prevalent in my life, I began to shift some of my ‘idol space’ over from musicians to these new faces. Marques Brownlee, Jonathan Morrison, Michael Fisher, Karl Conrad, Kai Wong, Peter McKinnon; the list could go on. Regardless, with my foray into photography I figured this is the perfect stepping stone into videography as well. Who’s parent doesn’t want their child to be a vlogger? (sarcasm). In all seriousness though, I remember during my first software development COOP in Haliburtion the opportunity to edit some videos for a client who required audio work, reframing etc to be done. I volunenteered since I was the must comfortable with linear timeline editing and audio production, and to this day I still have the Google Keep note that I made which simply said ‘I really love video editing’. It was a thought which at the time seemed so perverse, I had to jot it down and see what I thought down the road. Guess all things come back in time if they are meant to?

Fireworks #1
Fireworks #1

Fireworks #2
Fireworks #2

Building a PC

Major shoutout to my roommate Jack, who helped choosing the parts which enabled the following comforts as I threw my wallet directly into a morgue with a DNR taped to the front:

  • 4 year minimum future proof
  • 4K Video Editing capable
  • 10+ VSTi3’ / VST3’s per channel in a +32 channel project (320 VSTs) <- Looking at you Ableton Live Set
  • Upgradable DDR4 Memory to 64GB
  • Power two 1440p screens or so down the line


PCPartPicker part list

CPU: Intel – Core i7-8700K 3.7GHz 6-Core Processor

CPU Cooler: Cooler Master – Hyper 212 EVO 82.9 CFM Sleeve Bearing CPU Cooler

Motherboard: MSI – Z370 GAMING PLUS ATX LGA1151 Motherboard

Memory: G.Skill – Ripjaws V Series 16GB (2 x 8GB) DDR4-3000 Memory

Storage: Samsung – 850 EVO 500GB M.2-2280 Solid State Drive

Storage: Western Digital – Caviar Blue 1TB 3.5″ 7200RPM Internal Hard Drive

Video Card: Gigabyte – GeForce GTX 1070 8GB G1 Gaming Video Card

Case: Phanteks – Enthoo Pro M Tempered Glass (Black) ATX Mid Tower Case

Power Supply: EVGA – SuperNOVA G2 750W 80+ Gold Certified Fully-Modular ATX Power Supply

Sound Card: Asus – Xonar DGX 24-bit 96 KHz Sound Card

Wireless Network Adapter: Gigabyte – GC-WB867D-I PCI-Express x1 802.11a/b/g/n/ac Wi-Fi Adapter

Songwriting / Recording

This one should come to no surprise to any of my peers, since I’ve had this off and on again relationship with music production, songwriting, and the idea of expressing one’s self through noise.  With the building of a production-grade computer (workstation I’ll continue to use term wise, since I do hope to employ many technologies / containers for orchestration), I’ve also rediscovered a drive to make music. This drive I felt died years ago, where even my SoundCloud (subtle plug of older material!) displayed a stagnated cut off between such passion, and eventually what my idea of being an ‘adult’ was. In other words, priorities changed, music was thrown out to make space for studies and relationships. I did manage to record a small cover that I talked about earlier in the year with some friends while living in Mississauga, but even that experience felt like a forced effort at times. That can be found in a separate account which will become my primary I imagine:.

2007 Fender Stratocaster
2007 Fender Stratocaster

Music is limitless genre wise, and there are many items that I’ve dabbled in the past and also on my Guitar / Piano recently. I’ve grown in interests and also listening preferences, often jumping even further into the spectrum of previous interests:

  • The usage of ambience for both foreground and background textures.
  • The removal of instruments to provide more power to the few playing.
  • Layering different parts instead of layers of repeated motifs.
  • Not striving for the ‘Analog’ sound where it doesn’t need to be.
  • Allowing songs to be simple tangible four chords structures, instead of 17 chord theory-based monstrosities which I dubbed Progressive House appropriate.
  • Allowing a song to be described as ‘lush’, ‘dark’, ‘moody’. This helps to drive the tonality instead of strip away from fear of being too ‘emotional’ lyric / sound wise.

I could probably go on, and I’m sure I’m also forfeiting many better, outstanding notes I’ve made in the past. You get the idea! I’m excited once I find a good balance post-summer, to create and share through here and more conventional mediums and networks. I already have a few instrumentals and lyric-driven songs waiting to be worked on that encapsulate some of this interesting year.

Manulife Tower
Manulife Tower

Summing the Above: Content Creator

While discussing offline with some friends, they’ve managed to piece together quite a bit of what my final focus of the above will look like; which is the interests above can and will be joined at times into a single project: a music video, short film, or for vlogging / content-creation related mediums!

Fire Up North
Fire Up North

Nick's Mixtape
Nick’s mixtape cover


I decided during this long weekend to give the above idea a try, creating a rough song template / mood, followed by (all B-Roll) footage which could paint a small mood. Utilizing the time that I wouldn’t be annoying my roommate Jack with loud music or constant swearing when shots ended up out of focus, here is what I came up with as an one-day-release experiment! All was captured, created and released in a single day (including the music!).

Waiting – Demo Concept

TLDR: Disregarded common hobbies / passions in exchange for social experiments, creative outlets, allowed hobby programming to take backseat.

PSS: I feel rusty having no written a blog post in a while, so as things hopefully improve and soar to better heights, I hope you don’t contract a sickness while reading this one. It’s another off-the-rails style, with very little preplanning / scripting and instead following one’s train of thought.

A few weeks ago, I went with my friend Svitlana to view Frame by Frame, a ballet which paid homage to filmmaker and animator Norman McLaren. It was the first time either of us had gone to see a show based around the expression of dance. Instead of citing her opinions, I thought I’d focus on mine and opt for anyone curious of hers to ask or encourage her to post an article on it. But, that’s not the point of this writing either. Put brief, the show is a fantastical mix of the digital modern aesthetic, classic analog grime, and contemporary fluidity used to depths which I never thought possible. Absolutely amazing. But, what is the point of this article?

Well, in the past few weeks I’ve been trying to experience and get my hands on new ventures; I’ve been trying new things!

How far does the rabbit hole go? Well, I’ve had a change of heart when it comes to Microsoft and it’s Surface lineup, and also replaced the vast majority of my creative outlet from audio centric to visual focused. From music making to photography even, with some videography slipping in here and there. On top of that, I had managed a 14-day meditation streak while trying out the Headspace application and found the overall experience to be quite useful. Aside from a weekend which caused a streak-buster, I’m actually attempting daily meditation; a phrase which a younger me would scoff at.

The introduction to photography and videography is one that I’ve longed for quite some time, having grown an interest while helping out my father with his Ray’s Place campaign media, and later it taking even more hold with the dawn of the Tech YouTuber / Journalist era. Am I implying a hobby / role in such era? Maybe, but that’s something for later down the road. I’ve noticed for quite a while my continued investment and attention into identifying what is considered ‘beautiful, quality cinematography’ and how one approaches such through various mediums; color-grading, framing, story telling, the score.

I suppose one question that I’ve been wondering for a while, is why? Why am I suddenly compelled to try new things or approach previous mindsets from a new perspective? I suppose the most logical answer is the move, ‘new place, new me’ -or, something like that.

I think that it mostly plays into the above, and the fact that I am now enabled in much more ways to pursue and attempt activities and possibilities which otherwise would be more difficult to manage while being a student at Seneca. Likewise, my ambition and research of the ever-so-cliche ‘7 things every successful individual does each day’ perhaps also paves some of the direction that I’m attempting.

Being realistic, the time spent has to come at a cost, and I think the cost I’m taking is; the 100 days of coding challenge. I found the challenge a great concept, but also a lingering voice in the back of my mind of an obligation that some days was not possible to fulfill. It is because of that voice, that I’m stopping the challenge here for the time being, and instead focusing on programming when I’m interested instead of when forced, and these new activities as the interest comes and goes.I still have many plans, which involve technology, programming projects, and other creative outlets which I can’t wait to share with you!

If you made it this far, I’m glad that my writing hasn’t put you to sleep! Likewise, this is a new style of writing that I’m trying, much more free-form and loose compared to the rigid scripting which I typically employ. I’m curious, what do you think of this write-the-train-of-thought-as-it-passes style? Too hard to follow? Perhaps too bouncy topic wise? Surely not nearly as subtle transition wise. I’d love to hear in the comments!

Moving both Physically, and Mentally to New Places

If you hadn’t followed my Twitter account (which you should, this shameless plug advocates for not any thought provoking posts or new insights, but more-less the mediocrity of the everyday developer such as yours truly @GervaisRay), then you wouldn’t have seen my ongoing battle for the past year with my move from Toronto to Mississauga. Mississauga is a beautiful, growing city; so why the battle? Well simply put, because I could not put down or give away my habits, friends, and favorite activities which spawned out of Downtown Toronto. I was the kid who didn’t want to say goodbye to his friends as he went home from summer camp.

In the past year, I through clouds and toil also learned quite a bit about how I like to approach management and scheduling, this in part being because of my part-time status at Seneca while I was completing the last few courses. I tried multiple forms of task management such as GTasks (now Google Tasks), Asana, Trello, and back to the new Google Tasks. In this order, it would appear that I gravitated towards Kanban / Agile styled task management which catered towards my programmatic persona. I found Trello to be a fantastic offering, but I also would let the cards expire / remain unkempt far longer than I should have on some occasions, this in part due to me having no discipline for daily routine clean up of the boards. Also, I found that my make-shift boards such as Bills, Content-Creation, Technology, etc were really not well suited for such style of task management.

I decided while in the process of organizing my move back to Toronto, that I would evaluate and target the key features and mindsets which make up my task management and scheduling style. Here is what I discovered and thought while sorting about my Trello cards and why I’m testing out a Google Tasks -only workflow.

To Trello, or not to Trello

I’ve been an off and on again Trello user for about five years, loving the flexibility and ‘power-ups’ which I could integrate into the boards. I had a few go-to combos which worked wonders once set up such as Google Drive integration with my Seneca@York board, GitHub with my OpenSource board, and InVision while I was working with a college while we were developing a startup website. The power and pricing scheme available to the free tier is a fantastic value, and if you’re curious what extensions are available have a look here:

All of the features here can set someone up for success, if their discipline enables them to maintain and update the board, making the board their planner. I tried and tried, and still advocate to this day how useful Trello is for teams and individuals, but currently I’m struggling to keep the board updated with changes and due dates. I suppose the feature set offered was wasted on me in the current moment, since I don’t have the time to appreciate and utilize the various amenities which come with Trello. This is where I decided to give Google Tasks a spin again, hoping the best with the latest Material Design 2.0 coat of paint and Gmail integration which I’ll explain below.

Hello Material Design 2

When I heard about Material Design 2, I was both skeptical and curious; how could so much white space be a good replacement for colour? How could we move forward with a refined UI / UX guideline when many deviated and fell astray from the original Material Design intentions for the past four years?

My curiosity led me to installing Android P on my Pixel 2 XL, curious what the next version of Material Design felt like to use and how it came across on a screen. It also gave a rough taste of what Stock Android would begin to look like as more applications ported over to the new spec such as Android Pay, Gmail, Calendar, and now Google Tasks.

So far, even with the white space and criticism that many are exclaiming relating the design to a merger between iOS and Android, I’m enjoying the new apps. Though heavily hard on the eyes to use (for those who prefer dark themes), I’m finding the overall end user experience to be quite pleasant and streamlined. I’m tempted to try / make a colour inversion application which will make the vast 85% of the light UI theme dark, and see what the future looks like.

Moving to Google’s Material Design 2 Applications is a very much thought out process, which I’m going to attempt to describe below and compare to my workflow when using Trello and various other services.

Gmail and Google Suite Integration

My primary email address for most items revolve around Gmail, so with the new UI / UX which Google pushed out last month, I was intrigued to give the Web Experience another try instead of hiding behind other Web Clients on my various devices. My primary workstation is a Linux box, so I’m pretty used to using web-clients for Hotmail, ProtonMail and Gmail addresses. I was also one of the first to advocate the UI update, opting for white-space if it meant a modern design and richer features. What really struck me as interesting, and one which perhaps rivals Microsoft’s Mail / Outlook application is the integration of a Google Calendar (same page, not separate web-page), Google Keep, and Google Tasks.

I’ve been a Google Calendar user since 2010, and can admit that without it, my entire world of plans and scheduling would be lost. Hundreds of events go into the calendar, and I use it to orchestrate my day where appropriate. Even with Trello, events always existed in Google Calendar. I even toyed with the idea of using Zapier or IFTT to synchronize or mirror events between Trello and Google Calendar. Regardless, It’s an invaluable tool which I’d yet to consider replacing. Having the tool available in Gmail (probably to be renamed to Google Mail before end of 2018, anyone want to place bets?) makes arranging my day and upcoming events simplistic since many items relate or revolve around email threads.

Likewise, the same integration with Google Keep makes basic note taking, lists, sharing of links and bits of information the most convent with the new workflow and UI. I used to store random notes into Keep while Trello held the true ‘professional’ notes, but I found there was no good IFTT recipes which justified having a board for notes vs just using a simple note taker such as Apple Notes, Google Keep, etc. Essentially, what I’m saying that Google Mail providing access to Keep in the same UI / UX is a beautiful bit of icing on the cake of this technological ride.

Google Tasks

For this move, I’ve written all my tasks and todos into Google Tasks, testing both the new Material Design spec and application itself while also comparing my previous workflow. I found that Tasks is easier to jump into, and also easier to include others in since most have Google accounts by default. I created lists such as:

  • Amazon Items To Buy
  • Bills To Set Up
  • Accounts to Update
  • Services to Call
  • ETC

From there, I was able to prioritize and integrate my Gmail, Keep and other notes into Tasks with ease, and check them off at the start or end of my day from my mobile. Had I collaborated with others such as my roommate in this way, Tasks may not be the best item and Trello or a multi-user solution would instead fill the need much better. For just myself, I think I’ve found a good medium and integration between technologies which promote a simplistic workflow for single-user related management.

Zapier published a guide to the new Google Tasks, which I’m not going to go over in too much detail aside from saying that the new features which are synchronized and available on all major platforms including iOS and Android is a godsend. Dragging emails to the task menu creates a task with the context and attachments included, damn useful. Likewise utilizing lists to separate and maintain context for different priorities.

Moving Forward

Do I have concerns with pooling most of my workflow into Google? A company who’s collecting user’s data like it’s going out of season? Or the fact that Google has a tendency to drop product support in the blink of an eye? Of course. I was skeptical when Keep was released, as many were for various reasons.

Still, I watched Keep flourish and even began to use it at version 2.1 with the introduction of Lollipop if my memory isn’t too far stretched. Likewise I know some who swear by GTasks since day 1, and are doubtful by now that Google will cannibalize or implode the service. Will I completely ditch Trello? No. Because I still rely on the service for Projects and collaborations. But I also love the idea of testing this workflow out while moving and going about my everyday. Perhaps my writing and lack of criticism is from an ongoing honeymoon with the concept? Only time will tell!

Still, if you’re invested into the Google Ecosystem at all, I already implore you to look at the new interface and try using the integrated services for a week. Test your workflow, it never hurts to learn more about what works for you.