Category: Ramblings

Home / Category: Ramblings

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: http://yoursite.com
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 (the-developers-playground.ca/grav/), 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

Features

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

Themes

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 the-developers-playground.ca/grav/

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 https://getgrav.org/downloads/skeletons, 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.

Plugins

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 the-developers-playground.ca 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: https://github.com/trilbymedia/grav-plugin-git-sync

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 rayzplace.ca which is in dire need of a refresh. GRAV would fit perfectly there.

Bonus!

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: https://github.com/getgrav/docker-grav

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.

References

https://www.cmswire.com/digital-experience/15-flat-file-cms-options-for-lean-website-building/
https://getgrav.org/

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 “https://bank.com” 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 Google.com.

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

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 zerossl.com.
  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: https://the-developers-playground.ca!

WordPress

Woah, blogception!

For WordPress, I found the Really Simple SSL (https://wordpress.org/plugins/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 raygervais.ca! Notice that lovely lock in the URL?

Conclusion

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

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.

Photography

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.

Me!
“Staged”, Taken by Nick

Nick
Nick Guyadeen

SvitlanaSvitlana Galianova

Videography

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

Specifications:

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

Bonus!

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: https://trello.com/power-ups

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.

It’s hard to believe how quickly this semester has come to a close. Some of us including me even had countdown calendars, and yet the days escaped even quicker than we could count. It feels like just last week I started my second dedicated foray into Open Source technologies, and yet in the next two weeks it’ll be the end of such adventure (for now, that is). Similar to what I did when I completed OSD600, I thought I’d recap and share my thoughts as I complete OSD700, and perhaps also allude to the progression and experiences between the two which is only possible through fantastic instructors such as David.

From 600 to 700

The Rise of JavaScript

In David’s OSD600, I learned quite a bit about modern-day JavaScript practices and how they applied to current Open Source trends. Looking back now, I gather a few reasons why JavaScript completely swept over and took the FOSS realm by storm:

  • Thanks to Electron and HTML, making cross platform desktop applications is now as simple as writing a web application. I believe this is imperative in the popularity of JavaScript applications since working with GTK, qt, WPF, and Cocoa (just to name a few) can be disjointed and utterly mind jarring at times. If you know HTML and CSS, your application can share unified styling and components on all major platforms.
  • JavaScript has grown in the past decade to be one of the most flexible languages I’ve ever seen. Learning advanced JavaScript development means learning new patterns, new paradigms, new programming concepts such as callback / closure centric logic wrappers, and with the addition of Node for the backend, a semi-robust alternative to the languages of yesterday.
  • I’ve observed a radical shift both from SOTI and from developers I’ve talked to regarding their change of perspective between dynamically typed, interpreted languages such as Python, JavaScript and compiled languages such as C#, C++, and Java. Many whom admitted disdain for JavaScript were now advocating its usefulness for prototyping and rapid application development without the need to compile or grand environments being provisioned. Of course, you have individuals in both camps, some who claim that NODE and JavaScript are still too immature to be taken so seriously in enterprise, of which I do see some their points being incredibly realistic. Tried True > Bleeding Edge.

From Student to Intern

Likewise, it was through learning JavaScript in OSD600 that I had the confidence to learn Angular and it’s primary language, TypeScript. From there, the entire MEAN (MongoDB, Express, Angular, Node) JavaScript centric stack and all of it’s toil and glory. Flash forward three months later, and this new experience actually landed me into my first enterprise Internship with SOTI Inc, where I was a front end Angular developer. Using David’s knowledge and lessons, I learned quickly how to excel and push forward the tasks much bigger, much more complex than my potential, and became the lead front-end developer (still an intern!) of the SOTI Insight team.

I don’t think a single day goes by where OSD600 hasn’t had an impact on my current work in the best way. Looking back now, without that class I can say that I would not be in the position I came to, nor would I have the experience and drive which came from that class.

The Transitioning to 700, Thoughts Post-600

The same can be said for many who took David’s OSD600, and for those who in OSD700 are also finding their callings. With 700, instead of being shown around the nest and how various communities work we were thrown directly into the sky, told to choose a place to land and from there build our own nests alongside the given communities we chose. Here, some chose Visual Studio Code, Brave, Chart.JS, Angular.Material, ngx-bootstrap, Python even!

The experiences differ per person, but I don’t *think* any of us walked out with less than when we walked in. Instead, we walk into the last few classes with contributions and pull requests to our name, a steady stream of work relating to us showing up on most search engines at the very top (talk about good publicity for a developer!), and a confidence and skill set which isn’t easily obtained that will push our careers further than ever before.

Lessons and Thoughts Which Stood Out This Semester

Debugging through Different Directions

I’ve written about some of the debugging methods I’ve painstakingly learned over the past four years, a post which was directly inspired by David’s lessons and articles on the topic. Being the ever-learning, humbly experienced developer that he is, David shared with us his strategies for debugging applications built on top of the Electron framework; a lesson which the very next day even affected the nature of my tasks at SOTI in the best possible way.

Whereas I discussed in my post a lot of the common debugging issues and or missed areas which younger students that I tutored or myself often struggle with, David went straight into explaining how to bend Chrome and modern technologies to our will. He explained Dogfooding, Dependency Injection concepts, and navigating your way around a huge code base looking for a single event listener using modern day tools. Never before had I looked at the Chrome DevTools specifically with such admiration of what was possible through a web browser. It’s amazing how much effort and work is put into such tools and applications that the everyday person will never think about nor discover.

I took some of the tricks that David had displayed and applied it next day while debugging an item at SOTI. To my disbelief, no one else on the development team (which at that time was comprised of 4 senior JavaScript developers, 6 software developers) had heard of the debugging-on-DOM-Node-event trick, or even conditional breakpoints accessible through Chrome’s DevTools. Yet, it was exactly these two tricks (plus a few others) which finally allowed me to discover the flaw in the code; the line which broke the business logic.

Becoming a Small Community in The Class

Throughout most of our courses, we’re always anticipating to make friends in the classes we frequent and build relationships or networking potential with our peers. This means that when we see each other in the halls while rushing towards the next test, we’ll nod, see how it’s going, strike a conversation, or perhaps press forward since the Prof isn’t going to wait for you. I found this scenario through my few years at Seneca to be very predictable, to be the standard of meeting individuals who are in the same field as you.

In OSD600, and even more so in 700, I found David guided us towards something much bigger and more concrete. As per his intention, the class of OSD700 became a community where thoughts, stories, events and coding struggles were shared and enjoyed. Interesting developments or thoughts were shared on the Slack channel weekly, often by Sean who somehow managed to always have a new link or article to share! We attended a Rangle.IO event as a portion of the class, and even got to tour the Mozilla Toronto Office (MoTO) with Michael Hoye. The twitter tag #SenecaSocksCrew was created initially as a chance to get awesome looking VueJS socks, but later kept alive to become a symbol. An anchor for all of us to come back and relate to, to keep in touch and also to plan out new events together after the semester ends.

David got what he wanted, which was to join a class of extraordinary people into our own open source community. The community at the moment consists of the following incredible developers, who I’d recommend looking into for both their work, their blogs, and their continued plans to change the world:

Presenting your Best and Worst Work


This is an interesting one, because as the title suggests some days aren’t meant for presenting the goldmine of work you produced. Instead, we were encouraged to present any and all of it. What this meant was explaining our thinking, our trials and where we want to go next with the task at hand.

This was one topic which took me away from the comforts of a polished end result. Never before have I had to talk about failures, and work in progress to such degree, admitting that at the time of your presentation that there is still work to do, things to fix, and a long road ahead. It took a lot of time for me to adjust, to admit alongside my pampered and finished tasks that some were the polar opposite, coal in a cave full of unknown code waiting to break or be found. It was incredibly stress-inducing to me to go up in front of my peers, and explain why an item isn’t working, similar to a progress report. I’ve always been a perfectionist, so the introduction of this style of presenting was one which pulled me very left field, but also gave me the slowly-worked-to chance to learn from the presentation style and own up to the tasks in their unfinished entirety.

Contributing To the Everyday Persons Workflow

This title seems odd, even for me who wrote it. What I really mean by this, is that our contributions should be aimed at making the biggest splash it can for others. This doesn’t mean sending thousands of lines of code changes in a single Pull Request, instead it means making the project one bug less, one language translated more, one requested feature added, etc. David really tried to emphasize this as many of us looked at lines of code as the metric between an ‘A’ and ‘B’ graded release, instead of how this ‘very small’ change would improve the workflow of developers all over the world using said project, or how this bug fix will help clients and developers alike to push the project forward by removing technical debt for example.

It took awhile for me to learn this, since previous courses and egos always considered the better programmer to be the one who writes quality code, in bountiful amounts. My first few fixes were mere line changes, which though they qualified as a ‘release’, to me they felt like the shortest fragment of a ‘patch’. Over time, this changed as David stressed how these fixes were improving the lives of both the users and developers, beit bug fixes, new features, or even accessibility improvements (my niche I suppose). I saw that contributing didn’t have to be verbose, but instead helpful.

Where Do I Want To Go From Here

This isn’t my last blog post, nor is it my last blog post relating to OSD700. But, I figured this would be a nice place to put my ambitions and thoughts towards how I want to steer 2018. Not in any order of priority or execution:

– Learn VueJS / React
– Learn Python 3, Rust, GoLang
– Write a Full Stack Web Application from the Ground Up
– Write a Mobile Application from the Ground Up (iOS? Android?)
– Become a Mozillian!
– Become a Node Certified Developer
– Become a Linux Certified Administrator (maybe?!)
– Continue contributing to FOSS communities
– Continue working on Musical Adventures, release some of it!
– Continue being a member of the SenecaSocksCrew community

Going forward, I’m hoping to learn more lessons and also expose myself to newer technologies which contrast or conflict with my own current experiences and vices, my logic being that it will round me out as a programmer better than falling into a specific niche. I imagine my new career title will play well with this concept, going from Front-end Developer to Cloud Platform Engineer. 2018 is only a quarter of the way through, and there is still much that is possible before we see the end.


This is a follow up to my previous post, describing some examples and public issues which touch upon heading semantics and color contrast.

Four Individuals infront of Glacier

Headings

Admitting to Your Mistakes

South Wind Motel

As you would have guessed, even I found the issues discussed above in past work from two websites which I used to claim where the best I was capable of at that time. Even more so, now that I know of these issues (which I discovered while looking for examples), the urge to fix and improve upon is there. In the South Wind Motel Website, I improperly used a H1 for the hero component, which would be fine had I made that hero display ‘Accommodations’ instead of a tagline. This is how the page reads to screen interpreters right now (without worrying in this example of divisional area tag sementatics):

South Wind Motel Heading Fail
South Wind Motel Heading Mistake

This may look like a minor issue, but the pattern repeats on each page with different taglines, some often not granting proper title-like context such as Property or Trail, which become increasingly more vague. Still, you have to start somewhere I suppose.

Silver Maple Motel

A website done a year after South Wind’s was finished (which was a weekend project during Christmas break in my defence), Silver Maple corrected many of the layout and ‘aesthetic’ issues I had with South Wind’s. In doing so, I created a different pattern of heading misuse. Here are the obvious ones that a simple inspect element unveils:

  • I used H1s due to their styling and size as icons. Meaning every standard icon on the page is a H1, without text or proper hierarchy in the slightest.
  • The proper titles use H5, unsure why I went so low down the spectrum, but we jump from an icon of H1 to H5 titles
  • The parallax images and their respective titles are H3s, which really should be H1s since they define the separation of page contents and topics. Likewise there is inconsistent blurring in attempt to mitigate contrast issues which I’ll discuss in a later article.

Two Examples of Similar Common Mistakes in the Wild

AndroidPolice

I love this website, it has been my goto source of news for all things Android since 2011, and I have to this day always held high regard for the content and it’s writers who publish there. While inspecting the site, I only saw one major offence (in my opinion, I could be forgetting a rule since there are so many) when it came to header use. The navigation bar uses a H1 for the AndroidPolice logo, and the article titles start at H2. This means that ever page is interpreted this way:

Android Police Headings Mistake
Android Police Headings Mistake

This may be a very minor issue, perhaps not an issue at all (depending on the ruleset, I am in no mood to read through the documentation this year just to confirm the smallest, most minute of a detail with a overall non-offending site), but I found it interested in how headings were used to imply hierarchy directly from the site’s title.

PC World

Simply put from a quick inspection of an article (I imagine said patterns are throughout, since all CMS use templates to remove the grunt work): H1 for title (great!), H3 for subtitle / annotation…. not so great. Realistically, the guidelines do not imply a need for subtitles to have a heading, and I imagine this was used to leverage the H3s styling. Kudos for following expected heading semantics otherwise, every other title falls under the H2 use, making the page be interpreted in the following way:

PC World Headings Mistake
PC World Headings Mistake

Color Contrast

I decided to take a stroll through Modern Flat Web designs, and see if I could find any practice which was an instant red flag. I’m using https://speckyboy.com/flat-web-design/ which currates 50 ‘Perfect’ examples of modern web design, a perfect list to try and pick a few apart. Will I succeed? Read on!

Design Interactions without Code

Website Interactions Without Code Color Contrast Mistake
Website Interactions Without Code Color Contrast Mistake

Damn that’s a bright hero component, it’s eye catching and yet blinding at the same time. The hero’s text is very readable, until you notice the cursive text which I almost missed the first time glancing through. It’s the same #FFFFFF as the bigger text, so how did I glance it over so quickly? How did it not catch my gaze? Well because the contrast ratio of that specific background color (#3EC7C2) and the text (#FFFFFF 29px font size) is 2.07:1, which fails both WCAG AA, and WCAG AAA demands. For large text, the ratio must be 3:1 or greater, which this one still does not comply with. Not off to a great start from the first page alone, and the contrast compliance didn’t improve throughout the page either for most of the colorful elements. Sad, and we just began.

CraftsmanAvenue

Funnily enough, the design and overall approach here is much more subtle and well established. I decided to test the mission statement found at the top, which has a text color of #887771 and a background page color of #FAF7F6, together they form a contrast ratio of 4.00:1, so close. Many of the elements are basic hues off from WCAG AA Color Contrast compliance, so I moved on, feeling hopeful.

Stash Flat Icons

Blinding Image
….

Presenting, modern aesthetic. Colors so close together in the spectrum that you don’t need to test using a color ratio tool to identify compliance. I can barely read the list items, I dare you to without squinting. It was at this point that I decided we had a good assortment of color related examples which all could learn from.

Learning from These Items

While doing writing this follow-up, I found two really helpful links for headings and HTML semantics which I’ve posted below. I think that if every front-end developer went through and truly understood, it wouldn’t take long at all to reprogram our already-logic-driven minds to the true semantic structuring of headings. I cannot say how we can improve these types of color contrast issues, aside from being mindful and questioning if aesthetic such as flat demands such low contrast elements beside one another. Even in enterprise, it’s not unheard of for design to be beautiful, but inaccessible to many.

H1: Headings Are Important

Common Heading Mistakes

Part 1

Caterpillar on Human Wrist

Introduction & Screen Readers

Accessibility is one topic which not many take into account when designing and developing an application, website, or printed media even. The concept of visual and interactive accessibility relates to any medium which the user uses to discover and consume content from, and how different impairments hinder the common forms and designs useless and nonconsumable. Easiest way to explain that last statement is this example: Imagine being unable to read the standard news headline found on newsprint or websites, but still wanting to know what the world around you is doing. How might one approach this if they don’t wish to listen to a TV or Radio? How might one discover headlines around a certain topic that the locals gloss over? Screen Readers and accessible websites. This video can explain the concept and need far better than I ever could, and hopefully also provides a foundation which segues into the important attributes which screen readers utilize in more detail.

Element Hierarchy

Resource
Many developers disassociate the levels and semantics of element hierarchy when designing and developing, opting for H2’s because H1 is too big for example in article titles. Often, I’ve seen cases where the H2s were used for titles, and H4s used for subtitles. Though the overall aesthetic may look better for your needs, this does not comply with the established semantics which screen readers / interceptors read to the end user, furthermore it also messes with Search Engine bots looking for content on your website.

If it’s a more unified overall font sizing you’re looking for, use a normalizer stylesheet such as NormalizeCSS or a css framework such as Bulma.IO which dictates all text the be the same normalized size among supported browsers (implying that you will edit / extend for custom font sizing).

‘Fake’ Elements

Resource
When is a button not a button? Well, aside from the philosophical test which also has us questioning what truly is, and what isn’t, we can discuss again how different element tags provide unique attributes which are useful to screen readers and screen interpreters. Likewise, as the blog explains, these attributes are critical to proper understanding of a screen and the contents on the page. Using fake a tags styled to look like buttons, or divs with backgrounds meant to impersonate an image make interpretation of the page borderline difficult.

Contrast and Colors

Resource
It’s a good thing that most developers admit that they should never design, because in truth it’s not a skill many have in their genes. I suppose the opposite can be said for designers attempting to program, but I digress. Perhaps a different day’s story. When it comes to design, there is a ratio which many choose to ignore because modern aesthetic demands it, contrast ratio.

WCAG Level AA sets the golden standard for how the contrast ratio is defined, that is the difference between two colors (commonly background and foreground) such as text and parent element or borders and container backgrounds. AA compliance is a ratio of 4.5:1, which demotes many of the grey on gray choices of modern design. This is important because too little of a ratio makes text unreadable, and too high of the ratio is semi-literally blinding to even the common user.

Part One Conclusion & Examples

I hope to update this article later in the week with real-world examples and explanations of these details more, along with following up with the next segment which would include aria tags! If you made it this far, thank you for reading and I hope you enjoyed!

When I first started contributing what I could to Visual Studio Code, I was under the impression that it was written using React. Even while working with the custom drop down component, I was still under the impression there were React Front-end technologies which enabled for the dynamic rendering of various components and functionalities. Only in recent, while debugging and looking for high-level understanding of different scopes, did I realize that Visual Studio Code developed without the front-end JavaScript frameworks such as Angular, Vue, React or even MeteorJS. Without sounding like I just discovered Pluto being once called a planet, this was very left field.

Programmatically Generated UIs is a term I’ve heard while doing research on iOS Development practices, but I never considered a full-blown web application (including all the HTML attributes and so on) being powered in such a way. I remember using basic JavaScript to change the DOM while learning how to do front-end validation for INT222 (now WEB222) at Seneca, but never to generate entire navigation bars or full-blown text-editors; the concept and understanding of said concept is both the scariest, and most interesting discovery I’ve attempted to learn and dig deeper into in the past few weeks. Looking back at the custom drop down source code, I realize that I was so caught up in the state persistence and accessibility concern of the bug I was working on, I never realized just how genius the component’s implemented; in-house, no external frameworks or libraries.

The Flipping of Comfort and Concerns

In every project to date; be-it Enterprise for SOTI, Open Source, or even just Seneca course projects, I’ve never considered a programmatically generated and managed user interface. While looking more into Visual Studio Code’s logic, I instead of becoming familiar with it, began to become more concerned quicker and quicker as I had to search for life cycle handlers which a standard layout or framework would handle. DOM manipulation is one thing, but recreating, redrawing, and DOM-managing the entire component while all being in-house along with storing application state is very much left field compared to my experiences. While looking over the code, I did find two valid and worthwhile reason for such design practice, which I’ll explain below.

The Liberation from Framework Idioms

In the past year working with Enterprise level Angular applications, I’ve come to understand the saying ‘going against the grain’ when it comes to working with frameworks and libraries; they are amazing when you implement within their design and allowance, and an absolute nightmare when the scope goes beyond or against the framework’s design. I see with Visual Studio Code, the happiest of mediums where more time dedicated on design and development, and less on fighting the code and assets which make up your product.

Examples

Adding all event listeners to the custom drop down element

Dynamic styling of the drop down based on context

Creation of the select list HTML element

Deeper Management of Application Logic and Views

Compared to having multiple components, edge-cases and sub-component requirements, you can manage all of which (cleanly) in a single well encapsulated scope. This is only possible because of the (granted, concerning) freedom which programmatically managed interfaces offer, since scopes of the element such as data, state, and interface itself derive from the same scope: in a single language and instance (compared to Angular’s HTML, TS, and SCSS separated file structure). One video that I had discovered last year which explains the benefits and reasoning why even iOS developers going this route compared to creating storyboard layouts:https://www.youtube.com/watch?v=up-YD3rZeJA

Final Thoughts

I’m looking forward to exploring new concepts such as this as I go about Visual Studio Code, and hoping that I never stop being thrown into challenging or adventurous situations where the only way out is to learn and understand it. I’m sure I’ve only uncovered only 5% of the entire concept, still unsure of every reason behind it, and even the proper implementation paradigms in Code; going forward with the bug fixes and improvements I hope will explain more and make me a better developer in the process.

The Intimacy Through Ink

December 10, 2017 | Ramblings, Technology | No Comments

I’m still a fan of the pen and ink; the older communicative and storage mediums which fueled yesterday’s greatest histories and paved the way to 99% of the populace flocking to word processors. Gone are the years spent cursive writing, practicing how to do proper curvature between letters and earning what would be known as the ‘pen privilege’ which in grade 5, was all the rage. I hadn’t touched a pencil for years, and it felt great.

Then, it appeared that with the migration to Word Processing and autocorrect, the art and personality of writing became processed to the point where hundreds of words looked the same from afar, and font-faces were as personal as one could get when trying to convey physical tone. The agony of writing for longer durations often made my words become incomprehensible, both in form and in literal use, likewise you could see the enthusiasm and dedication; perfectly formed letters, spacing which rivals even the best of font-faces. The former, just as the later, circle back to the days before QWERTY and Facebook.

I had a college ask me why I kept a moleskin around, and what was the purpose of it when all communication appears to occur through digital formats. My answer was twofold, the first and easiest: habit. The more drawn-out second explanation is my connection to thoughts and visualizations through physical mediums. See, I still find expression to be the driving force of the human process; the mistakes scribbled and marked out – corrected with frustrated strokes and red markings where one should ignore during future review, diverse diagrams and doodles which only one’s mind can fathom while gambling with the organization (or lack there of) which only our unique personalities endorse.

See, throughout my education I’ve had the honor and horror of seeing other’s notes and transcriptions. Some have an amazing style of writing and organizing their notes, others instead showcase their carefree nature when it comes to structure and order. This is just a single example how a simple page with ink can describe a person. The one with amazing writing? Honors student with fantastical ambitions. She is going to alter the world in anyway possible, and I hope she writes how the process will occur.

Writing can be easily seen as a chore, deprecated by Word processing and flashier mediums, but some would also argue the art-centric nature of such a task. Just as the painter established his style through broad brush strokes, or perhaps muted color palettes, the writer’s page describes their artful nature as well. One cannot express every nuance through digital text in every situation, just as one cannot write sincerity with the same tact. The screen has a place for many modern activities, and it can also offer organizational methods which incomparable.

I endorse technology first most, but the return to a simpler time eases the mind and removes the fatigue and disconnect from your thoughts and the medium. I find that on a computer or mobile device, we are too distracted by the colors and brilliance found on the screen. The simplicity of a durable notebook and comfortable page marks the turning point between storing thoughts, and truly understanding them.

Ink is like time, the more you find on the page requires understanding the process of which how you got there.