The Intimacy Through Ink

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.

When Tweaking Doesn’t Fit Anymore

When I was in Highschool, I remember spending every moment I could on XDA, Reddit, and various other Android tweak-centric mediums; emulating such tweaks and ‘optimizations’ on my device during breaks.

Throughout most of College, I had done the same, to the degree where I often would end-up with a completely new ROM and setup at the end of each month with minimal effort made on my homework or social tendencies. It was a mix of utter freedom similar to driving on an empty highway, and self-inflicted chaos which can only described as ‘russian roullete with a single player, you’. Still, it was fantastic until my addiction to tweaking led to two phones being hardbricked, and the last straw being my device not being able to display the correct time, fetch new emails or use bluetooth headphones without causing a spike.

With that, impulse led to transition to an iPhone 6S Plus straight from Apple. This would in consequence, reduce what I am able to change on the phone tenfold unless I jailbroke it – which, I promised myself that I wouldn’t do. My daily driver was the average iOS user’s daily driver, Facebook and Twitter included.

Jumping forward two years, and I decided I wanted to see what Android 8.0 Oreo on a Pixel 2 XL was like, and after establishing the display wouldn’t be the leading factor to my regret of said purchase, I learned an interesting fact about myself: I didn’t find any wish to tweak every square inch of the device after configuring it.

Instead, I found myself going for the minimalistic setup that I had always used on an OS (where possible, inspired by this article:https://betterhumans.coach.me/beautility-my-ultimate-iphone-setup-1b3dd0c588a0), which heavily implied a blank canvas without widgets or text, instead just your Dock icons and wallpaper. To me, this made much more sense than a screen full of icons ala iOS, or differently styled widgets ala Android. My OCD appreciates the aesthetic.

Perhaps this is from my two years exposed to iOS exclusively, building up the perpetual ‘it just works’ mantra throughout it’s usage. Or, it could be the maturing of both Operating Systems compared to previous experience, lending to a much more reserved temptations to ‘fix’ or replace items which annoy me. Realistically, if I had to mention the most common tweaks I used to focus on, it was the following:

Unified System Theme

Google’s introduction of Material Design as an utter mess on Android. Popular applications updated months behind, some only being updated as of recent. This created quite the dissociation between the applications, resulting in a horrible experience and driving me to discover the CyanogenMod / LineageOS theme engine. This engine allowed for system-wide themeing, which was utter bliss once a theme was found through the Play Store or XDA forums.

On Android O, or even iOS 11, I would have loved a dark theme built-in by default. But alas, no such luck aside from small ‘hacks’ or ‘tricks’ to invert the entire display. Not the best effort, but some nonetheless. While playing with the Pixel, I still yearn for a dark theme to utilize the P-OLED technology, but it’s not the same priority as I had in the past.

Optimizing CPU / GPU Performance

I am a product of the generation whose entire life has seen the performance increases in the yearly iPhone releases, and envied just how smooth iOS was for the everyday user. This envy derived from Android’s lack of optimizations (which started with Project Butter), or inherit lack of cohesion with the hardware. Indeed, the flaw of open hardware became clear, but that didn’t mean that a silly high schooler couldn’t root his Nexus 5, install new kernels every week and attempt to boost performance right?

That is what I had attempted, often sacrificing battery life or stability to get that ‘buttery smooth’ effect on a stock AOSP ROM. This tweak to CPU / GPU governors led to my first hardbrick when I stupidly set the CPU max frequency to 1%.

Mimicking Other System Features

I have an unhealthy obsession with those whom oppose the norm; BB10’s / WebOS gesture based navigation (now found in the iPhone X funnily enough), A unified Messaging application (ala BB10 Hub), or even Ubuntu Phone’s side-dock multitasking system. All of the aforementioned above were ideas or attempts which failed horribly, or proved that perhaps if I wanted said functionality, I’d had to implement it myself. Though I never did back then, I feel that perhaps an implementation in my free time may help more than just myself.

Being Annoyed by Application imperfections

So this one is completely and utterly blown out of proportion I admit, but it is also one which means dearly to me and, is found throughout the other examples listed above (in theme). I found in my experience from using Android Oreo for a week, I had already tried out multiple SMS applications because I noticed that the text field on Google’s Android Messages lacked the same padding and height as the font should have for that application.

 

This, plus having noticed that also making me notice the lazy approach Google had taken on the right side with the condensed SMS ‘send’ button which to me, is more of an eyesore than anything else. Not to make this sound like the end of the world, but realizing that by having all the choice in the world when it comes to applications and devices, I will forever be trapped in a spiral of ‘try’, ‘enjoy’ and finally ‘annoyed’ with a multitude of applications.

Conclusion

This entire article may sound like a rant, or even a disapproval of how Android operates as a system, but that was not the purpose of this post. Sometimes, I write simply to put jumbled thoughts to a page – attempting to make sense of them through the process. While spending a week with Android Oreo on a Pixel 2 Xl, writing this article in the process, I came to similar conclusions or revelations about why even with an amazing device I still had discontent.

Android is an amazing system, likewise so is iOS. They both have so many unique perspectives and implementations that often the end-user all they could ever want. In recent years, feature parity has blurred the differences between the two operating systems – creating a fantastic experience regardless of the chosen device.

In the end, I suppose Android will remain my hobby operating system, simply because it gives me far too much choice for my OCD mind to fathom. I love the choice, but in the end I found myself tweaking and longing for hours both as of recent or in the past. Luckily, choice is still an option and I have time to continue deducing what is the best for myself. I know many who are happy as can be with choice, and others who treat Android as a defaults-only configuration. It’s truly amazing when you think about just how many different types of users there are out there!

As for the Pixel, perhaps it’s my lack of discipline which is causing disconnect; an idea which only time will tell.

Visual Studio Code Plugins I Use for Modern Web Development

Visual Studio Code Setup

Visual Studio Code has quickly become my go-to text editor for many languages, even replacing XCode for Swift-centric programs or IntelliJ for light-weight Java programming. This article focuses more on the web development plugins which have provided a smoother experience for the past eight months of my internship at SOTI while learning the ways of the full-stack developer. If you have suggestions or alternatives to the listed plugins, I’d love to hear about it in the comments!

I’ll segregate the list based on the web technology, which will help to separate the primary use case for the plugin via yours truly.

HTML

Emmet

I cannot for the life of me explain Emmet via text properly, so instead I’d recommend this video by Traversy Media if you truly want an overview and in-depth explanation: Emmet For Faster HTML & CSS Workflow. Visual Studio Code bundles this plugin now, but the functionality is available found in almost every IDE and text editor which supports third-party plugins. It has saved me hours of CSS / HTML syntax typing, while also providing fantastic configurability for my coding style.

Stylesheet

SASS

When not writing in SCSS, I write in SASS. SASS as a language is tenfold more efficient than standard CSS, and compiles down to CSS in the end of the day. The need for this plugin is due to the current lack of built-in support for SASS on a stock Visual Studio Code, and this plugin provides syntax highlighting. The official website is well documented, and switching between SCSS and SASS for different projects is relatively seamless due to the similar syntax.

IntelliSense for CSS class names

Depending on the project, I end up with 100+ class names for specific elements or mundane states which are configured differently. This helps by parsing and suggesting through the IntelliSense engine relevant class names as soon as I start typing.

StyleLint

Following a well established style guides enable a clean and maintainable project, but up until this point I had not yet learned Style related properties inside out, front to back. This plugin points out redundant styles, non-applicable calculations / dimensions and other issues that my style sheets contain, allowing for a cleaner and less hack-filled workflow.

TypeScript

TSLint

Similar to StyleLint for style sheets, TSLint enables one to adhere to predefined coding guidelines in their TypeScript files. This has been an absolute godsend when working with others, or even keeping myself disciplined in those late hours where lazy ‘any’ types start to arise. If I could only choose a single plugin to  recommend on this list, it would be this TypeScript linter. It has transformed code bases from mess to organized chaos, and unfamiliar object types to defined and well tested structures.

Code Runner

I find that the usage of this plugin derives from my introduction to Firefox’s Scratchpad. Because of this common habit of prototyping code in a dedicated scratchpad environment,  utilizing Code Runner in a similar fashion only seemed natural. I found prior to my introduction to unit testing, Code Runner also allowed me to isolate and test functions without having to worry about environmental variables.

Git

Git Lens

This plugin mimics the lens functionality found in Microsoft’s Visual Studio, showing last commit detail involving the current line of code. Whether it’s quickly figuring out where a new function is introduced, a style class changed, or comments added, this plugin makes the process effortless and efficient. So far, I had yet to see any lag on the system with the plugin active 24/7, and the experience itself doesn’t leave me wishing the plugin was anymore less obtrusive than the current implementation. To me, it’s a perfect representation of the data I’m interested in seeing as I work with a complex code base.

Editor Themes & File Icons

Material Icons

I found this icon pack to offer the best overall aesthetic when mixed with One Dark Pro or Nord Dark, while also providing a coherent design language which still described the folder structure and file types with ease. Overall, this is one of the first plugins installed on any workstation.

One Dark Pro

Having come from Atom before, I actually found their standard One Dark theme quite attractive during the early hours in contrast to Visual Studio Code’s dark theme. I still have some gripes with the default background – which, I find is simply too bright on the standard Dell 1080P matte monitor. Still, an excellent theme which deserves all the recognition that is has, and looks utterly fantastic on my 4K screens.

Nord

Ever since I had discovered Nord, I had discovered a truly amazing color pallet which seemed to have found itself supported 99% of every tool that I’d ever use. From IDE to GTK themes, Nord is supported or being developed with upcoming releases occurring weekly. I highly recommend looking into the repository and projects by Arctic Ice Studios, which is located here: https://github.com/arcticicestudio/nord. For the latest of hours, I typically switch to the settings found here for ‘Nord Dark’, which simply darkens the background and menus.

Settings

Settings Sync

This plugin has become an utter godsend when it comes to working on multiple machines and operating systems while keeping all of my settings, plugins and configurations synchronized. By keeping everything synchronized through a secret Gist, I can focus on learning and optimizing my workflow instead of matching functionally from one workstation to another.

Conclusion

In the end of the day, I’m constantly trying new plugins and workflows when I find an annoyance or void in my current, so this list is really a snapshot as of recent workflows and settings which work well for my setup. By tomorrow, it could change easily and with that, luckily my settings would synchronize among all devices. This is the beauty of Open Source, that you can mix and match until your heart’s content. I love that fact more than words can describe, for it means to me that you are never thrown into the cage with only the plugins provided by the jail staff.

The Open Source Audio Project (Idea!)

Hello there! If you’re not new to blog, or I haven’t changed any of the main headings for the website at the time of this article, you’d be aware just how big of an advocate I am of FOSS technologies on our everyday mediums. Android devices running AOSP-centric ROMs, Linux workstations running Fedora 26, and my non-FOSS hardware running as many OSS technologies as possible such as Inkshot, Visual Studio Code, Kdenlive, Firefox, etc. Ironically, the one theme which I hadn’t played with for a few years now was audio production in an open source environment.

Why is this ironic? Because audio production is what first introduced me to Linux & FOSS technologies. In my cheap attempt to find a well developed & refined DAW which could be legally accessible by a high schooler, I discovered Audacity, Ardour, LMMS, and Muse; all of which pointed the way towards Ubuntu, Open SUSE, Fedora, and Linux itself. My world changed quickly from these encounters, but I always turned back to Cubase, FL Studio, Studio One when I wanted to record or mix a track for a friend.

Recently, a fellow musician and close friend had successfully encouraged me to get back into playing, recording, and mixing. It had been at least two years since I took such a hobby so seriously, but with his encouragement my YouTube playlists quickly became packed with refresher material, mixing tips, and sounds from the past. In consequence, We recorded in the span of a single day a cover of Foster the People’s ‘Pumped Up Kicks’; vocals done by the impressive Shirley Xia. The track can be found here for those curious: Pumped Up Kicks – FtP Cover by Ray Gervais

It was recorded & mixed in a Reaper session which turned out much better than expected with only the use of stock ReaPlugins. This begged the question, which would hit like a kick drum over and over all week, could this level of production quality be possible using only FOSS? Would Ardour be able to keep up with my OCD for multi-tracking even the simplest of parts?

The 1st Idea

First idea is to export the Reaper stems as .WAV files into Ardour, and get a general mixing template / concept together based on previous trials / settings. This will also help me to confirm the quality of the native plugins, and if I should be worried about VST support in the case the native plugins don’t meet the sound which Reaper did. I’m both incredibly nervous and excited to see the end result, but fear that most of the time will be spent configuring & fixing JACK, ALSA, or performance issues on the Fedora machines.

If all goes well, I’ll probably upload the track as a rerelease mix with the settings used & various thoughts.

The 2nd Idea

Recording a track natively (via MBox 2 OSS drivers) into Ardour, and compose, mix, master all using Ardour & open source software exclusively. I feel obligated to point out that if I were to use VST for any reason, they must be freeware at a bare minimum. No paid, freemium, or proprietary formats (looking at you Kontakt).

I wonder if genres which don’t demand pristine sounds such as lo-fi, ambient, post-rock, or even IDM would be easier to manage compared to that of an indie sound, or a angry metal sound. My first test would be probably dwell in the electronic genre while I setup the recording interface to work best with the configuration (reducing latency where possible, dealing with buffer overflows).

DAW Applications & Considerations

In this small conclusion, I simply want to list the other possible applications / technologies to consider in the case that the primary ones mentioned above do not work as intended.

DAW (Digital Audio Workstation) Alternatives

  • Audacity: One of the most popular audio editors in the world, known for it’s simplistic interface, ease of use plugins, and it’s usefulness as a audio recording application for mediums such as podcasts, voice overs, etc. I’ve only used Audacity twice, both times just to experiment or to record a quick idea on the fly. See, Audacity isn’t mean to be the direct answer to common DAW paradigms such as track comping. It’s not meant to be used to fix a bad rhythm either.  Source code: https://github.com/audacity
  • LMMS: A open source alternative to FL Studio. Useful for sequencing, and has built in VST3 support as of recent versions. I had used LMMS in the past for quick ideas and testing chords out through various loops, and dismissed using it further due to stability issues at the time (Circa 2013). I’m curious what state the project is in now.  Source code: https://github.com/LMMS/lmms
  • Qtractor: A multitrack audio and MIDI sequencing tool, developed on the QT framework with C++. This DAW I am the least experienced with, but some seem to endorse it for electronic music production on Linux.  Source code: https://github.com/rncbc/qtractor

I’m excited for this experiment, and hope to follow up in a much more frequent article release period. My only concern is the end product, and if I’ll have a listenable song using only OSS that is not subpar in quality. Documenting the process will also help myself to understand the strengths and drawbacks to this challenge. Even if just doing a modern remix of the original track would be a unique experience, since I have all the recorded stems in multitrack format already. Can’t wait to start!

How Amazing Individuals can Change Your Perspective

This little article has the minimal amount of relevance relating back to software development, but instead a recounting of how I’ve had the an opportunity to become friends with two individuals who are utterly changing my world from a musical perspective. This article describes simply my own amazement to hidden talents, and learning an interesting technique while producing & recording a cover with these talented individuals.

Failed Vocals, Sour Notes & Polyrhythmic Woes

I am no vocalist; this is a key fact which friends and family will attest to in greater numbers than I appreciate, but it’s true.

In past projects I had attempted to befriend AutoTune -which was a horrible idea if I may add, so that I could capture various melodies, lyrics and emotions that would fly around my head during the time I should have been studying. Later, when I realized that I should never attempt a vocal rendition of Ah’s Take On Me, I jumped into the electronic music technique of vocal sampling and chopping. This produced wondrously random, yet tangible, results. Though I hadn’t uploaded any of that crop of music to online sources due to other perfectionism issues, I was content with the vocal sampling technique for the sound I was developing for that time.

One issue with the technique above was the lack of control I’d have over the samples or melodies. This is perhaps, due to my inexperience in audio production at the time which resulted in a  ‘well I guess it sounds good enough’ attitude after I’d find a decent glitch-vocal melody. Think The Glitch Mob, Skrillex, Dada Life, or Daft Punk. Think any of those artists, but much less polished.

This issue, snowballing with various other issues a teenager would encounter when they can’t relate to sport programs or science fairs led me to give up entirely on music which had vocals (in any form). I started to gravitate (in the rare instances I would play or produce) to genres such as Ambient, Post-Rock, and Djent. Interesting mix of genres, but they all catered one way or another to the progressive genre which I have quite the affection for when the standard radio tune becomes boring.

Oh You Sing? Prove It.

This is my typical reaction when someone mentions how they love to sing, or they have been taking lessons for years on end. I love to hear their definition of ‘singing’, and also their vocal skill. I am judgemental, as no one should be surprised to hear, but I found this was an appropriate request since I was often surprised and moved by said individuals. More so, I was happy that they could carry a tune much better than I because it could open up the door to potential collaborations and get-togethers in the future.

This method of playing with friends led me to discover one individual’s amazing -and perhaps hidden to the public eye, vocal ability. They are the definition of all I could ever wish that I sounded like. It quickly caught my attention, in consequence the ideas began to pour out onto various notes, chord sheets, and recordings. All of which, revolved around their talents. I do wonder if some days they regret that initial jam with me some days, for I always had new ideas or experiments to try ever since.

Recording a Simple Cover

The above process occurred twice in the past summer, and by fortune both individuals had such a complementary skillset that playing together was inspirational for all. Perhaps I’m over exaggerating a simple exchange of cover songs and various melodic jams, but you have to understand that I’ve been playing various instruments for close to a decade with the minimal amount of genuine interaction with real musicians & talented individuals. Anyone can play Wonderwall.

This inspiration led to us trying a fun no-holds cover recording of Foster the People’s Pumped Up Kicks in the span of a single day. With the instrumentation that we had used, recording the essentials took only a few hours, leaving the rest of the day for perfectionist rerecords, and experiments.

The former is a burden of love which must be dealt with when instrument or vocal melodies aren’t as  desired by the group, and the later is simply me attempting to live up to the title of a producer for fun. That is where I realized that I was recording ‘Winners’, those that see every opportunity to improve themselves; to attempt experiments which are purely based on ideas and sounds that I hear in my head.

With the minimal amount of hesitation or concern, I recorded two talented musicians attempting dangerous harmonies, real-time counterpoint, and even live vocal chopping. All of this can be heard on the final product, and I couldn’t be prouder of the result that the three of us had come to together: https://soundcloud.com/ray-gervais-711531601/pumped-up-kicks-ftp-cover

Changing the Perspective

This experience is one which really did grant me a new perspective in contrast to previous projects. In this cover, is the energy & excitement of three individuals who did not know that morning what the final product would sound like; let alone the song that we’d choose to cover! One change to my thought process is the literal idea to let things ‘flow’, meaning to let ideas come and go, instead of trying to confine them to a pre-set rhythm, harmony, or style that I *MUST* have. Instead, these experiments and reinterpretation of the song resulted in a track that encompasses the sound that we wanted, but also allowed for natural growth of the track itself.

Coming from a programming background, I’m a very rigid individual who enjoys schedules, slotted appointments, and routine. This change in perspective was one that I would never accepted had it not been presented in the way that song had done so. Those two individuals, both of which admitted that they had never recorded before, truly did shine through rigid structure and hesitant ideas to create a truly interesting experience. It translates too into the actual song, which I’ve had a close friend describe as ‘a slower, grooved version full of modern nuances’ and another comparing the track to ‘schizophrenic thoughts’. Quite the impressions!

Saving the Off-Takes

While recording with friends in the past, I had heard from a podcast on recording ‘the performance’ the concept of recording 24 bars before the actual punch in. This was, to allow the musician to get into the song instead of being thrust right into the cue point, and in turn perhaps play some interesting tidbits knowing that the ‘fiddly’ sections could be removed in post. I did this for almost all my songs, because it allowed for me to capture the moment before the actual recording which was not anticipated in the context of the song. Some of the projects have muted channels full of little tidbits; out-of-key solos, funk bass rhythms, counter-melodies. They’re great, because sometimes it’s exactly what the song needs.

This idea was used quite a bit on the cover, which results in the way some of the vocal harmonies fight for breath and syllables between your ears and drum fills are manipulated to create a rhythmic pulse in the second verse. Even the piano, which becomes a dominate rhythmic point of the song -with the constant whole bar chords, was simply David just playing the chords while waiting to get to his vocal harmony. Does this mean I potentially have Gigabytes worth of ‘noise’ on most recordings which isn’t present on the final product? Absolutely, but in the end, it’s a trick that I’m glad to have employed in my work flow.

Learning From Two Mistakes How Easily You Can Halt Production as a Software Developer

Wow. That is quite the mouthful of a title; a title appropriate for one who’s position is described between an intern and full-stack developer with less than two years under his belt.

First, some background context symbols which will be found throughout the article:

  • ${SD}: Senior Developer
  • ${UD}: UI Developer
  • ${BD}: Backend Developer
  • ${IFUG}: ME. *I Forked Up Guy*

Mistake #1: Return Promise<A, B, C, D>().then(DeliverDemCodes());

Even if you’re the best estimator the world had ever seen, learn as I never did that story ${A} will take an incredibly long time to develop due to stability issues. Acknowledge that ${D}, though perhaps an easy 2 hour task, may result in quite a bit of refactoring of ${C}. Perhaps you don’t have enough resources to even consider ${B} in the timeframe allocated.

In other words, in the world of bleeding-edged production and inexperience, never assume that development is a linear and constant variable.  Regardless of experience, knowledge, sleep deprivation; nothing is ever a ‘simple’ task which can be remedied in a defined time frame.  I was once delayed by two hours because my main workstation -with uncommitted code ready for attention,  decided 10AM would be the optimal time to update it’s security protocols and packages.

Mistake #1 Lesson:

${A} took 3 days, which is what the ${UD} and ${IFUG} expected. We did not expect ${C} to take a good chunk of 2 weeks, effectively causing us to leave ${D} on the storyboard. ${SD} was not mad, but also curious as to how I factored in the original estimation…. I told him I’m horrible at gambling.

Mistake #2: // TODO: Remove Legacy Code From Awesome Project!

You know how parent’s always respond to inquisitive questions with ‘because I said so’? I never enjoyed that as a kid, and thus is helped to form a overly-confident egocentric behavior that I wear at times; instead of asking ‘why’, or ‘should’, I simply do. I do, with zest and vigour. This can translate into questionable decision making skills at times, and even more questionable conclusions to basic logic.

Where am I going with this? Well one day I while developing around ${SD}’s code base with ${UD}, we had noticed a bit of UI work which was used only in a single, non-visible use case which had no application to the current scope. In the eyes of ${IFUG}, and the ${BD}s who were testing our work, it was an eyesore and issue to be tackled.  With precious time before the next presentation, one had to act brash and swiftly to remove the issue; not considering the potential risks / issues it would cause in the immediate future. My overconfidence that this was simply just a dead code from a legacy base was at an all time high, so I commented it out, recompiled, and committed the change.

Even if your IDE claims your code is unreachable / never used… don’t blindly comment it out and commit. When the tests pass, and the features aren’t breaking, don’t pass it off as a ‘fix’ and move on, neglecting to mention it.

Mistake #2 Lesson:

${SD} was not overly pleased with my actions the next day, for it turns out it was his configuration which was used on another branch of the same UI…. I had cost him hours of debugging only for his eyes to see the recent git diff, and discover that this genius right here (${IFUG}) commented out the code which configured his current feature. We had a good talk about that for the next few hours.

Conclusion

It’s very easy to get caught up in the development of a project, even more so when you’re given the keys to build the *arguably* most important layer. In the past few months, I’ve taken on more leadership roles & positions which resulted in my judgement also becoming a questionable state of mind at times. In that state, it’s very easy for flaws to burst through and expose themselves in your decision making skills. Ego, confidence, recklessness, these are the flaws which I had exposed in the later half of summer, and just a few of the lessons that I had to experience to truly understand.

Are ${SD} and I on good standing you may ask? Of course! Only after we established some rules which were settled on with fresh peaches.

A Semester Working Exclusively with MEAN Stacks

Since May, I’ve had the unique experience of working with MEAN stacks on a daily basis, each varying in complexity and architecture to reflect a different end goal. A semester ago, I’d never guessed how little time I’d be spending writing C++, Java, Swift, or even Python applications compared to JavaScript-powered web applications. Furthermore, this is the first time in my life that I’d been exposed to a technology stack not taught at Seneca, which during the time of my attendance examined LAMP, and C# / ASP.NET stacks.

 

What is a MEAN stack?

Each letter in MEAN stands for the technology platform used – similar to a LAMP stack (Linux, Apache, MySQL, PHP), MEAN stands for MongoDB, Express, Angular, and Node.

MongoDB – The persistence Layer

Express – The back-end layer

Angular – The front-end layer

Node    – The renderer layer

 

The Learning Experience

I explained in a different blogpost how little I knew of modern-day ES6+ JavaScript, and how easy it was to fall into a spiral of constant peril while trying to learn said new technologies. If it weren’t for David Humphrey’s brilliant instruction, I can imagine within a matter of hours I’d quickly become discouraged to the point of dropping the stack all together. Luckily, that was not the case.

 

MongoDB

Luckily for me, I’ve only had to learn the basics about MongoDB and how it relates to the data you see in your various mediums. It’s a fantastic NoSQL database tool which really helped me to learn the benefits and downsides to non-relational databases in a variety of contexts.

 

Having data saved as BSON (Binary JSON) is quite the freeing experience compared to the programmed constraints of SQL-centric databases. Being able to insert entire JSON objects, regardless of the document’s structure, allows for a much more scalable and flexible database in my opinion.

 

Granted, this depends entirely on the purpose of the database. Need data to remain constrained to preset rules, configurations, and relations? SQL. Need a place to store your marked up blog posts, or to save the comments of an article within the article structure itself? NoSQL!  You wouldn’t want to save one’s most important information for example in a database which doesn’t enforce any constrains natively (though, drivers / mappers such as Mongoose do alleviate this issue very well).

 

Express

Express was an interesting beast, full of new paradigms and JavaScript-centric programming habits.  Coming from a PHP / .NET background, the flexibility of Express allowed for rapid prototyping and scaling of applications.

 

In this technology, I also learned how to write proper REST API programs which would power the back-end in the cleanest (at the time) way possible. I’m certain GraphQL (a newer technology which is already taking web development by storm) will become the successor to the REST API back-ends, but for my needs I’m content with the knowledge accumulated on REST practices. My URL end-points have never looked better.

 

Angular 4

This semester was my first foray into Single Page Applications (SPAs), which have an internal routing mechanism allowing for a single page load to access most if not all of the views. You learn rather slowly just how powerful Angular can be from my experience, because many opinionated workflows and APIs are hidden behind  a seemingly unforgiving platform complexity. Once you learn the basics, such as routing, services, components, child-views, then you realize just how much can be achieved by surrendering one’s self to such a framework.

 

Angular 4 does have it’s limitations, and this goes back to a similar topic of ‘what is the end goal for this program’? For example, I made my life a living hell by choosing Angular for a project which really, didn’t receive any of the benefits Angular 4 could offer, simply because it was used out of ‘hype’ and not ‘logic’.

 

Would I recommend learning / using this for other novice web developers? Absolutely! Angular 4 is a hot topic among enterprise and startups alike, and equally valuable for web applications which revolve around a SPA architecture.

 

Conclusion & Thoughts

If I had to describe the experience in a single word, it would be ‘perplexing’; this is a different word than I would describe the technology stack itself, which would be ‘influential’. There are quite a few hurdles that one has to get through before seeing truly remarkable results, but once one looks back at all the programming paradigms relating to a JavaScript-centric stack that was implemented, I’m certain they’d be amazed.

 

Working with MEAN technologies for the vast majority of the summer has allowed me to learn quite a few bleeding-edge technologies such as Web-Sockets, Webpack, Web Components, and SPA front-end frameworks. These technologies, though niche to the software developer or desktop programmer, have paved the landscape of open standards which must be supported by browsers, and likewise how one approaches the concept of a modern web application. Open Source advocates such as Netflix have contributed tens of thousands of lines of revolutionary code, all relating to the modern web & it’s various uses to the end user. I truly am grateful that I could immerse myself in such a trend which is transforming the literal internet for everyone, and though communities and developers alike are segregated on the current state of the world wide web, I am forever content knowing what I had learned, and what I was able to accomplish.

Taking Boostnote for a Spin

Recently, I came across a review conducted by It’s FOSS which described a new open source project aimed at improving the experience of note taking for developers. Titled Boostnote, here’s what I gathered after making the software my default note taking application and snippet manager -replacing SimpleNote in the process.

Website & Installation

Downloading the software for your respective platform is an uncomplicated process, the website supplying the files & overview of different features. A feature which caught my attention was the cross-platform availability of the note taker, all in credit to the wonderful Electron platform which is powering the vast majority of desktop applications as of recent. What does this mean? It means that I could utilize Boostnote on Linux, Windows, & MacOS devices. For this review, I primarily utilized the application on the later two platforms -my Linux box being moved to Mississauga during the time of this article. Still, I’d like to believe that due to the nature of Electron applications, the experience is ideally cross platform too.

Upon downloading the respective installer for your platform, the installation automatically sets up the program in a predetermined directory -on Windows, MacOS’ installation process simply involved copying the application to your Applications folder.

Finally, on first launch of the application you’re asked to choose a dictionary which will contain the various notes you make. Google Drive & Dropbox support is coming in future releases according to a tooltip, but I found no performance penalty when I created a folder directly in Google Drive (through the desktop applications) which would store the JSON notes. This way, I could keep all the notes synchronized while I or the team behind Boostnote implemented a dedicated server for cross-platform file synchronization.

Themes

Initially, as all applications default to, the user is presented with the bright brilliance which dulls one’s appetite for night programming, the bane to the common programmer: a light theme. One of the advertised features of Boostnote was the inclusion of both a light and dark themed user interface. I quickly swapped the stark white aesthetic for a pleasing dark, which along with various syntax highlighting themes allows for quite the customization of the application. Because it’s open source, it’s nice to assume that you could contribute and improve the the functionality as you require.

One item that I’m looking into, is creating a dark syntax theme which blends seamlessly with the dark theme of Boostnote itself. So far, I’ve gotten close by using the icecoder theme. My ambition is to make a Nord-based syntax & interface theme which I’d love to contribute back to the project.

You can see from the issue tracker on Github, the project is far from perfect. Some inconsistencies, bugs, glitches even, dwell within the current release, whereas enhancements and improvements are also being discussed for future releases. Overall, I’m impressed with the overall polish and current implementation.

Functionality

Updates

With all the looks, charms and dark themed components, one has to wonder if it’s the eye candy is to distract from the implementation itself -or if the implementation itself perhaps is even more beautiful than said eye candy. Well, let’s talk about the implementation, features, and general feel of this application.

Opening the application, I was greeted with a small update dialog to the right, simply notifying me of an update downloading in the background -not obstructing or delaying my work with the application. It seems the update runs in the background entirely, meaning the next time you were to run the application the update would apply itself. At the time of writing this document, Boostnote was at version 0.8.8 with 0.8.9 being released within an hour or few according to the application’s Github page. It seems that as more developers discover and play around, they’re equally contributing back to the project and fixing bugs.

The Editor

Once getting to the editor, the meat of the application some would argue, you’re displayed what could be described as the closest friend you’ve ever known; a text editor. Perhaps some aren’t as fond as I am with the text editing region of a development platform, but if you’re going to spend hours, sometimes days of your entire week staring at a single item, I feel the importance starts to weigh in.

Thanks to the customization I had done previously, which if I may add, were simply for preference and did not improve the editor itself in any way outside of it’s aesthetics, I had an immediately usable, and friendly-at-night interface. How does it work? Well because it’s a simple snippet manager, a note taking platform, I didn’t expect anything beyond the realm of simple text entry and syntax highlighting. Is it a powerful editor? No. It doesn’t need to be, and I think that’s what makes it so inviting for note taking. The lack of “bling” also results in startup time which rivals that of Visual Studio Code -another Electron app, and is only out-shined by the startup-king-of-text-editors: Sublime Text.

Overall, I couldn’t ask for much more from a basic note taking application on the snippet side.

Markdown notes are an interesting case, which can be created by selecting “Markdown Note” instead of “Snippet” when creating a new document. Because of the way Boostnote approaches rendering of the Markdown notes, which is to render the document after the user has become inactive on the document, I was confused at first when my text editor would disappear, replaced with the rendered version while I took a five second break to consider how best to explain the code snippet. This isn’t an issue at all, simply just a different workflow than the standard preview in one window, source in other.

One inconsistencies which I’ve seen so far, is the markdown preview not following the syntax theme I had previously set, instead resolving to the default. It’s too early to throw darts at the application, so once version 1.0.0 is released I’ll take a look into outstanding issues & update this post.

Organization

Compared to Simplenote, which employed a simple tag system which would continually dump ALL of your notes on your screen, Boostnote takes on the traditional “Folders” setup which I appreciate beyond words. Having to tag a C++ snippet as #cpp used to make me cringe, so I only see good things so far in contrast.  Likewise the ability to include multiple “notes” in a single note (ala OneNote’s notebook style) is useful for those who like to keep bigger snippets separated & organized. ItsFOSS cited an annoyance of not being able to drag-drop notes between various dictionaries, but I did not find that overly frustrating since my workflow rarely if ever calls for such maintenance. Again, different workflows, different preferences.

Search

I found the current state of the search features to be a mixed bag, expecting the search to run through and return to my code snippets which contained a simple int keyword for example, I got no such results. That being said, if I included said keyword in the title, tags, or even description, then that document would be returned within the blink of an eye. Needless to say, we will have to wait and see before judging.

 

Conclusion

This application has been a great mix of flourish & disappointment, of wonder and oversight. What else could you expect from an application which hadn’t hit the 1.0 version number? I’m happily watching the development of this application, contributing even in the near future, so that when 1.0 does roll around, it’s improved upon issues I or other developers have encountered while using it.
The rough edges shouldn’t keep you away from giving the application a chance, and perhaps you’ll even come to enjoy it as much as I did while writing about it! To conclude, I’ll agree with ItsFOSS’ last remarks, citing that Boostnote is not for everyone -not every workflow is efficient on this platform, nor is the interface attractive to everyone. It’s a hit & miss application, but a great start to one at that.

 

Reviewing a Peer’s Optimization

A Code Review Summary for SPO600

For the final project of the Software Portability Course, the class was tasked with reviewing the code of a peer who’d set up a pull request for Chris’ GLIBC repository. For my code review, I decided my good friend John would be a worthy candidate for my review musings, his pull request being found here for those interested in viewing.

There were a few stylistic issues that I brought up, all of which a simple fix would remedy.

The Code

The Stylistic Issues In Question

Throughout the GLIBC, a common coding convention can be found throughout the familiar and obscure files. In such convention, is the inclusion of a space between the function name and arguments. John’s editor perhaps did not detect this, and instead replaced all of his code with the common function sans-space argument arrangement.

As you can see below, the issue is a minor one which is easily overlooked.

Coding Convention Issue #1: Correct

Coding Convention Issue #1: Incorrect

Another convention issue, was the rearranging of declaration syntax for variables and functions. I won’t deny, the GLIBC’s coding style is unfamiliar to someone who’s experience with C derives from few courses, and I did question why that style of C syntax was deemed essential for the time. Perhaps to reduce line length? This idea does make sense on the low-resolution terminals utilized in the days of old, but does look rather odd to the modern programmer.

Coding Convention Issue #2: Correct

Coding Convention Issue #2: Incorrect

Conclusion

John’s optimizations enable support for 64-bit processing, which is a big improvement to modern servers & programs alike. Having gone through his code modifications for the review, I did not see any issues regarding logic or operations, which in the end will always be the make-it / break-it factor. He did damn good work with the optimization, and with the stylistic change I’ve mentioned above, I think the upstream developers will accept his code contribution without hesitation.

 

Introducing Thimble’s Console V1.0

A OSD600 Contribution Overview

This post will be one of my last related to this semester, specifically to OSD600 which has seen the class learning quite a bit about Open Source web technologies; contributing to Mozilla’s Thimble in doing so. More on such topics can be found here and there. Though I’ve mentioned my contributions before, -even sometimes becoming the main focus of an article, I thought this post would show how the console works at the current time. As of this moment, it would appear that a good majority of the first release version is complete, with UX / UI being the last remaining items that are being taken care of by yours truly, or Luke who’s a fantastic graphic designer working for Mozilla.

Introduction

This console has been a feature request for educators and hobbyists, enabling them a cleaner method of instructing or developing JavaScript driven web pages with ease. Soon, their request will be accessible within Thimble directly without any hidden settings, or complicated setup.

I suppose, being honest, there’s not too much reason to be as excited or as proud as I am -but to that, I say that this has been quite the learning experience; full of new platforms and practices that I had never encountered before. I’m damn proud of what I was able to learn with the instructions of Dave, Luke, Gideon and various others this semester, and equally as proud to say that I contributed to Mozilla in a way which will help benefit users in new ways. With honesty out of the way, onto the feature set of V1!

Important Note, all user interface & interactions presented below are not finalized and may change before release.

Resizable Containers

Like every good text editor, all elements and windows should be resizable to accommodate a wide variety of screen sizes, user preferences, and workflows. Thimble has been no different, which meant that this console too, had to be resizable. This is handled by a resizing plugin found throughout the project, which has made all the difference it seems when it comes to customizability and accessibility in the various toolings.

Console.* Functions

What good would a console be if it only displayed your shortcomings? This console goes beyond that, allowing for one to utilize standard console functions such as log, warn, error, time, timeEnd, clear, and assert. Other functions perhaps will be added before V1.1 ;).

Console Functions

Error Handling

When engulfed in a spontaneous 10-hour coding session, it’s easy for the split of a finger to cause typos, syntax errors, and inconsistencies across variable references all of which, resulting in an error being produced. In the console, the error is displayed similar to the standard stacktrace found throughout common IDEs & debugger tools. Below, you’ll see the current implementation, which is still being fleshed out.

Error Handling

Toggable Context

When starting returning to a project, or starting fresh with a blank template, the console does not appear. Instead, you’re presented with a toggle found in the bottom right which displays the console. Likewise, for those unaware of the toggle, the console automatically appears when a console-related function is called; convenient I’d say. If the console is instead unwanted, closing it with the close button will disallow the console to reappear until the user reopens the device.

Getting to This Point

It’s amazing how, from the very start of a semester how far you can go down the wormhole, effectively specializing yourself in one of the vast code pools which make up Thimble. I would have never guessed from my first contribution that I’d be working on a console which interacts with the injected back-end code, overriding functions with replaced logic that caters to how the user would interact with the basic console. Likewise my peers, roommate even, have discovered a section of the code base that no one else in the class had. In my case, here is how I got to this point.

Contribution 1: Issue #1635

This bug made selecting a link on the user’s dropdown menu borderline impossible at times to register.  Luke’s description of the issue was:

The items in the dropdown menus only work if you click the text of the item, and not the entire length and height of the highlighted item when you hover.

Luke's Issue Picture

Issue

Pull Request

Contribution #1 Fix

Essentially, this was a CSS fix, which resulted in me adding a few attributes to the a links which would fill out the list item object. A slight detour, was that when I say CSS, I mean LESS, an extension of CSS which is compiled into standard stylesheets. Having used SASS before, LESS wasn’t overly alien in syntax.

Contribution 2 & 3: Issue #1675 (Back End)

This was more of an enhancement, which Luke described as:

When writing JS, using console.log() to check in on variable values is really handy. Opening dev tools while using thimble isn’t a good solution because the screen gets really crowded. Is there a way to intercept console.log() calls and display them in Thimble? Any other solutions, can we add support for a “thimble.log” method?
Console Mockup 1

Console Mockup 2

Issue

Pull Request

These two contributions oversaw the development of the back end, which would intercept and handle the console-related functions that would eventually route said function data into the user interface. When Dave first discussed with a all-so ignorant young developer (me!), I figured this would be cakewalk; simplistic. Within the first week, I probably inquired half a dozen times via email or the Issue page itself to figure out where to start. It was evident to everyone except myself, I was in over my head.

Turns out to a inexperienced young developer such as myself, that Thimble operated within multiple iframes, each passing data asynchronously through dedicated functions found in PostMessageTransport.js and the various extensions. This meant, that 1) I had begun working in the wrong code base already, and 2) was completely lost as to how one overrides window functions. Before this class, my knowledge of modern JavaScript was limited, fragile even.

After Dave got me on the right track, by the end of the pull request I had changed 90% of all the code that this excited developer was trying to contribute at least a dozen times. These changes were all warranted, such as eliminating repeating patterns which should become their own function, or stylistic changes which would enable the new code to sit among the rest without standing out.

Why did this span two contribution periods for the class? Well avid reader, because the second period was getting the system to communicate with each other, and the third being the optimizations, extensions and testing of said functions so that the fourth contribution would consist of the user interface alone without too much backend work. The final commit count before the merge was 25 commits, which interestly spanned 71 lines being added and 4 being removed.

Contribution 4: Issue #1675 (Front End)

The final stage of the console implementation was creating the interface, which I was recommended to port from a Brackets plugin. I took the later option, which would in turn endorse Dave’s lesson of ‘good programmers are lazy’; well said sir. Well said. As I started porting the extension, it dawned on me that quite a bit would be redone to make it accommodate Thimble’s interface which differed heavily in contrast to Brackets -it’s forked base. Furthermore, many of the ‘features’ had to be evaluated since they followed a workflow which did not accommodate the standard style that Thimble presented. You can see a before & after I took a crack at the interface below, with Luke’s input as well thrown into the mix. It’s not complete, but I think it’s a step in the right direction.

Before

Console Port Before

After

Conclusion

To conclude, as I said previously, I’ve learned a lot. My peers and I have learned from those with decades of experience in the open source world; those who have helped pave the direction of many open source projects. Likewise, the code review and exposure to different toolings had enabled me to understand how Thimble’s code base -a project built on top of a plethora of other open source projects, looks and interacts as if a single developer coded every line. Learning contribution techniques specifically relating to Mozilla’s practices has also helped future proof our skill sets -that is if you share a similar belief; Mozilla’s developments and standards being the ideal technological standard for open source developers. If you’ve made it this far, I hope you enjoyed the read and get a chance to try out the first implementation of the console in Thimble.