Approaching Accessibility with Visual Studio Code

An OSD Contribution Update

For the last three years, I’ve grown a passion for extending technologies towards a direction which makes them more accessible for a wider range of users. It took a while to realize what accessibility truly meant in the world of development, software, websites and health organizations. Through the process, I took a course on behalf of my employer at the time to learn the three levels which make up the Web Content Accessibility Guidelines (WCAG) 2.0, A, AA, and AAA. This course took me through so many spirals of knowledge and issue, all-encompassing different scenarios and acceptance criteria for web development. After taking the course, I started to see software design and accessibility very differently. Contrast between colors, element organization, font-sizing even became subject of my mental focus at first.

When looking for issues and improvement requests in Visual Studio Code, I decided for this round that I wanted to explore and help improve how we handle accessibility within the platform. This led me towards two bugs which relate directly to the newly released custom drop-down component which was apart of the February 1.20 release. I thought this would be a great outlet for contribution since it’s a brand new component to the project, enabling me to also seat myself if possible in that domain and help update and upgrade the component over time.

Monokai Drop-down Selection Theme

This bug was originally an issue directed towards how the Monokai theme handled drop-down selection indicates the currently selected item. After discussing in the issue how to handle the fix, a proposed quick solution was implemented and tested. Changing the list.focusBackground to a different color of the Monokai theme, thus ‘fixing’ the issue.

The reason why I said ‘fixing’, is because this very small, single line fix also produced evidence towards a bigger issue with the drop-down component which would span all custom themes. Essentially, there was no way to promise this improved accessibility for custom themes which set list.focusBackground to a non-common theme color, since the attributes used in many components alongside the drop-down.

Christopher Leidigh known as @cleidighon on GitHub, developer for Visual Studio Code, and also contributor to the new drop-down component provided a non-intrusive update which provided a new attribute titled dropdown.listBackground which is used by the component if it exists. With this update, switching list.focusBackground back to the previous color and using dropdown.listBackground provides the bugfix without breaking the established patterns of decade old themes, and custom editor themes. I have a feeling that this will be expanded later to accommodate APIs and contrast-awareness functions. The final PR can be found here

Escape Key Should Revert Selection to Previous State

Again approaching accessibility improvements and learning more of the drop-down component, I was introduced to this bug. Essentially, it is a request to return the common behavioral pattern of when a user hits escape during text input modification, return to the original state. A simple concept, and I had an idea which is in my work in progress PR which is found here.

Essentially, store the currently selected index when opening the drop-down component, and in onExit and onBlur restore the selected item back to the original state. Simple enough I think. There isn’t any magical React / Redux paradigms occurring here, so I feel pretty confident in my initial approach and, based on Christopher’s initial review of my attempt, we share the same mindset for this update.

Conclusion

Was this a huge contribution / release? No. That I can admit, and if I do have time I’ll try to find a bug to make up for the lack of substance. This round of open source interactions allowed me to discover a few interesting lessons, some of which I consider as valuable:

  • A single one line bug fix can produce a tentacle of other bugs and or politics.
  • Accessibility is a characteristic which can be easily overlooked, and is overlooked often times by the common developer.
  • Working remotely with developers in different time zones can create one of the most interesting plots of disconnect and resource-management that I’ve ever seen. You see their replies in the morning when perhaps they are calling it a night. This grants you HOURS before they’d see your reply, providing space and resources to plan out both your intent and knowledge base towards the issue and the reply. Likewise, it’s very easy to fall into the trap of waiting around for a reply as I did during segments of this release, which is ill-advised if one is seeking continuous progress and movement.

Going forward I really hope to discover more improvements or bugs relating to the drop-down component or various other UI elements, ones revolving around accessibility being preference. Code is so much bigger than I would have ever imagined, and seeing the following response from a well-respected Developer such as Christopher admitting that even he is only scratching the surface lifts my spirits when I find myself lost in endless lines of code and confusion. With each new experience, I look forward more and more towards the next step into Open Source.

Becoming a Maintainer of BulmaPress

I love Bulma, I love contributing to projects instead of spinning up my shoddy implementation of a need, and I love when the two come together in such harmony it’s as if fate meant it. I discovered BulmaPress while looking for Bulma / Non-Bootstrap WordPress themes for a CMS project I’m working on. It looked to be relatively abandoned, sporting an old version of Bulma 0.2.1 and last being updated half a year ago.

Still, this didn’t deter developers including yours truly from forking and fixing or updating; a relatively painless experience since the project was built on-top of the underscores project, providing a solid foundation which only needed the Bulma part to be updated instead of the WordPress theme functions. It took several iterations to get the modern Bulma navigation pattern to work as expected, but once that was in place (you can see the code change required here), the rest fell much quicker.

Instead of keeping the fix to myself, I decided that any updates should make it upstream to benefit other users who discover the project. These fixes included removing the outdated Bulma code (replaced with a CDN), fixing the SASS compiler, and now writing a stable override structure which provides easy modification of Bulma variables.

The SASS was priority in my mind after correcting the navigation since no one sticks with the defaults, almost ever. Writing in CSS is a pain when it’s a full website theme, and once you learn SASS, SCSS, or LESS, CSS functions like assembly in comparison. Literally! For my project, I also needed the SASS configurable since this project would involve multiple different overrides and branding elements too.

As my first contribution got merged in, I became a contributor to the project and was also promoted to maintainer (meaning I could merge, triage etc). It’s a cool experience to see yourself at the top of a contributor board on an abandoned project: https://github.com/teamscops/bulmapress/graphs/contributors. The numbers do seem off, but I’ll let the GitHub magicians assume what they will about code changes. Later on, I’d begin to have questions tweeted or emailed to me on BulmaPress, which was another cool moment because I realized this abandoned project still had love from developers who perhaps like me, needed exactly it.

This is my first time working inside-out on a WordPress theme, my only previous experience being changing the default layout of the theme to support Bootstrap headers for a client two years ago. Working with only foundation, knowing that everything else can change if needed was an opportunity that I didn’t expect from BulmaPress. I had different ‘implement this feature so you can use it’ styled expectations, not so much ‘update this because a lot has changed in recent years’. There is still a lot to update and fix, such as the navwalker used for multi-tiered navigation menus (Which I don’t believe ever worked to begin with according to comments in the code), and fixing the demo domain issue where you which expired in January.

Exploring The Inner Workings of Visual Studio Code’s Command Panel

An OSD700 Contribution Update

Interesting concept, it’s a very surreal experience to explore and work on a project while using said project as the tool for development and exploration.

For a good part of the weekend, I’ve put aside time to look into how Visual Studio Code handles and manages the Command Panel, a tool / extension which I use daily for accessing various extension actions, configurations, and accessing files. The reason for trying to undercover the goldmine which is le Command Panel can be found in my attempt to add a color picker toggle to the list, a work in progress pull request can be found here.

Fully Customized VSCode, Command Panel Displayed

Attempt #1

My first attempt towards adding a command to the command panel was based off of how the comment extension accessed the panel. Later I would be pointed to a better example which I address in Attempt #2. In this attempt, I tried to create a wrapper which would expose the ColorPickerWidget class to the command panel, similar to how it is done here.

The idea at first made sense, till I realized that the implementation of CommentLineAction was directed to manipulation of the code close to the cursor. Furthermore, I didn’t need the kbOptions related scope in this case, since the original intent is simply to toggle a Color Picker through the command panel. I should have kept the code as an example here of what Attempt #1 looked like, but I had reverted back to the branch’s version prior to writing this post.

Attempt #2

After much research and discussion over the VSCode Slack Channel, I came to the conclusion that the first attempt should be redone using a better reference: hover.ts, which compared to comment.ts, provided a much better context. Thanks to Eric Amodio (Creator GitLens) for the tip there!

Attempt 2 for Color Picker

Through this process of trial and error, I learned the basics of how the command panel worked: How commands and context are loaded into its elasticsearch-esque data-store, how said commands call different scoped functions and contexts, and how to add my own command into the mix!

Putting EditorActions (Commands) into the Command Panel

A command you see in the panel is really an extension of the abstract class EditorAction, which extends EditorCommand. This extension allows for one to program the context of how the implemented run command, contexts, editor-permissions, and keychords while providing a type inferred structure which is compatible with the original EditorCommand interface.

You can see in the snippet of code linking to my second attempt, the super call in the constructor handles creating a IActionOptions object, which is an extension of the abstract class ICommandOptions. It is this portion of the object which is placed in the Command Panel to provide context, labels, translation and scope. The Comment extension ~/src/vs/editor/contrib/comment.ts shows the alternative way of handling the IActionOptions, which you can see below. I prefer this method due to a much cleaner and easier to read since the scope does not include the functionality, but the command alone.

The final part is to call registerEditorAction which is imported from ~/src/vs/editor/browser/editorExtensions as you may have guessed. The total amount of imports from that file derives directly with the context and actions that your command will need or perform, below I’ve listed the common ones which I encountered when looking through the comment, and hover extensions.

EditorCommand

Location: Github Link
The function which extends Command, and provides the inner-architecture required to bind and remove actions to the command panel. It’s public functions are:

Command

Location: Github Link
Command is the base class which appears to be replacing (based on the commit history favoring it over ICommandOptions for updates / improvements), and is extended by EditorCommand.

ICommandKeybindingsOptions

Location: Github Link
ICommandKeybindingsOptions appears to act as another context-aware object, this one containing an optional weight (of importance / override?) variable which makes me believe that this is used for keyboard chords (ala Emacs) and priority only-after the precondition in Command has been met.

IKeybindings

Location: Github Link
This class is extended by ICommandKeyboardOptions, which provides the correct keyboard-codes for Emac style keychords.

ICommandHandlerDescription

Location: Github Link
As the name suggests, this object handles description of the Command Object, not to sure to be honest what the purpose of this object since all labels are handled at the root of the object which would be displayed.

ContextKeyExpr

Location: Github Link
The ContextKeyExpr is an abstract class which contains the following public functions for working with the cursor:

IEditorCommandMenuOptions

Location: Github Link
This class appears to dictate the context of when an action is available in the command panel, checking against the ContextKeyExpr object it appears.

Making Your Command Execute Specific Scope & Functions

In the class which extends EditorAction, you have to implement the function titled run. This function is crucial, for it is exactly as you’d guess, the code which is hit upon calling your command from the panel. Since my own isn’t 100% complete at the time of writing this blog post, I’ll reference comment.ts again for how a proper run implementation works.

It is still unclear to me why editor.pushUndoStop() is executed twice, perhaps to correct duplicates? Perhaps I still have more to research and understand regarding the command panels data store, for the only hint I found being the code comment itself, Push an “undo stop” in the undo-redo stackfound here

ICodeEditor

Location: Github Link
An interface of the editor itself. Listening for events and acting as the glue between the user’s keypresses and the rest of the system. This is fed into the run command to provide access to context, events and user input. If that doesn’t provide enough weight towards just how powerful this interface is, the current structure spans 409 lines (which does include 5 lines roughly of TSDoc providing documentation to an estimated 81 (409 / 5) functions!

Comment Command Action

Conclusion to this Experience

I can admit there will probably be quite a few mistakes, missed scopes or crucial details that a weekend of research and speculation cannot provide, but in that time I’ve tried to acquire as much as possible, in the process learning a great deal of how Code’s command panel operates, the overall architecture relating to the editor and it’s extensions, and how CMD+T (or CTRL + T on Windows and Linux) brings up a contextually aware panel full of options and usability. I cannot understate just how vital it is to seek guidance from other developers, developers who have already contributed and work to the project and thus, can help guide you through the never-end maze of classes, interfaces, services, observables and architectures which make up such a huge project.

On an architectural footnote, VSCode (and perhaps in response, React) follows a very different order of components, services, and delegation of tasks compared to Angular does. The difference is quite colorful at first, some being obvious compliments such as Observable / RXJS patterns, others being grotesque and difficult to understand. I was looking forward to both ends of the spectrum jumping in, for it allows me to compare and perhaps even evaluate the different development decisions made between my own projects, work projects, Code, and tutorials. I hope that through this, future projects are inherently improved upon in design and implementation from said experiences. Interestingly enough, I’m reading The Art of Unix Programming by Eric S. Raymond, which provides different insight still relevant even this day to the idea of software development and architecture. The parallels between Code and Unix’s philosophy appear more and more the deeper I look, and I’m hoping to gather enough on the topic to write a blog post later in the year explaining such.

.

Building Visual Studio Code

On MacOS High Sierra

Building Visual Studio Code is quite the interesting process, mostly because the dependencies differ in obtainability between operating systems. For this article, I’m going through the process on MacOS High Sierra since it will be primary development machine for upcoming bug fixes, code improvements and contributions to Microsoft’s Visual Studio Code.

Set Up

Visual Studio Code requires the following prerequisites, Git, NodeJS, Python, GCC, Make, and Yarn. Of all the dependencies for this project, Yarn required me to use homebrew for installation, which is supposed to be as simple as brew install yarn if you have it configured correctly. I didn’t, so following the excellent single step found here https://brew.sh helped set up and configure Homebrew on MacOS. Finally, running through the CLI yarn will install all other dependencies over the course of an hour depending on your internet connection.

Building & Launching A Development Instance of Code

After installing all dependencies, the setup guide simply says to run yarn run watch which will compile and build Code. From there, if you see no errors or warnings you’re good to proceed!


Launching via ./scripts/code.sh for Linux or MacOS, or ./scripts/code.bat results in the final compiled application executing!

Going Forward

Right now, I’m looking into bugs relating to Visual Studio Code’s Color Picker, which is a front-end developers best friend when it comes to writing CSS Framework overrides and theme templates. Currently, I’m exploring the following potential bugs:

One pattern that I’m starting to discover among many of the bugs reported, is a lack of administration among the various domains. Bugs have been fixed, merged, etc, the tickets themselves remain open and untouched. More research is being conducted to discover bugs which line up with my interests and end goals, worst case being moving to a different domain of the project, or trying to find a different open source project to contribute to such as Angular Material https://material.angular.io.

Contributing to the Bulma CSS Framework

City Bokeh by Gabriele Santiago

I’ve been a major fan of Bulma ever since discovering it through the weekend project of developer Hassan Djirdeh (@djirdehh), https://www.cryptovue.com. On top of introducing me to the Bulma CSS framework which I instantly fell in love with, it also introduced me to VueJS, a JavaScript framework which, like Bulma, is capturing the attention of developers quicker and quicker each day. It’s been at least five months since I had first discovered Bulma, and in that time it’s already become my favorite CSS Framework and goto tool for Front-end Web Development. It’s replaced Bootstrap, Foundation, and Semantic UI within the span of months; a task which I wouldn’t consider easy by any means.

Bulma is written entirely using CSS alone, meaning that the developers are reliant on their own code alone if they want to introduce functionality such as a hamburger menu toggle it’s CSS class; an opinion that I highly am a fan of, since it reduces the bloat that I was often uncomfortable with when it came to Bootstrap or Foundation. On Top of that, Bulma is written using flexbox instead of traditional CSS grid mechanics, making it much more accessible and extendable where needed. If you hadn’t heard of the framework or played with it, I highly recommend seeing the documentation and comparing it to your favorite framework: bulma.io.

I often browse the issues and pull requests of projects which interest me for that time, and when an issue caught my attention as a topic which I highly needed, or wished for as well, I’d jump in offering to help in anyway possible. This behavior resulted in a week long discussion with Jim Blue, a contributor who had raised the the bug which caught my attention; the result being the solution which would follow the bulma culture best. is-small, and is-large css classes were created for the hamburger button, allowing for the developer to intentionally double or halve the hamburger button while styling the navigation bar to their requirements.

This small contribution perhaps means little to most developers, but I found the fix to be quite useful since in my own projects, I’ve had two instances (so far) where I had to override the defaults of the hamburger button to follow a new desired width / height, this in consequence requiring the spans having to be adjusted to accommodate the ratio as well. The addition of these classes make it much more accessible, and provide non-intrusive options for when the defaults don’t fit your criteria.

During this process, I learned over the week-long discussions and idea-throwing just how easily it is to misinterpret user experience expectations, even when written in the simplest of terms. The concepts from either side being misunderstood resulted in three seperate ideas and implementations, all for a simple CSS bug. That’s amazing! It’s amazing when I reflect on this, thinking of how much bigger projects with developers all over the globe get only conventions, concepts and rich-text to convey such delicate ideas effectively. The world of Open Source is amazing like this, where barriers which separate communities are simply ideas conveyed through language and language alone.

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.