User Avatar: CJT

Hey.

My name is Connor. Welcome to my little corner of the Internet! Before we get down to brass-tacks, let me share a little bit about myself 

I am...

  • An Engineer 
  • A Designer 
  • A Developer 
  • A Builder 

I like to...

  • Solve Problems 
  • Innovate 
  • Learn 
  • Ski 

Tools I Use...

  • HTML5 
  • CSS3 
  • JavaScript 
  • TypeScript
  • NodeJS

Industry Experience

Since 2018, I have been giving my all towards working to develop a more sustainable web — both for users and developers. During my time in the industry, I have not only worked toward consilidating user interfaces to ensure a consistent experience for all users, but I have also sought to improve the developer experience by utilizing existing web standards in favor of the "framework of the week."

Select an item below to learn more about my contributions.

Southern New Hampshire University

Front End Developer

User Experience Developers at Southern New Hampshire University work to maintain brand style by management of a self-developed component design system which leverages the Stencil JS toolchain. This requires in-depth knowledge of Web Components, TypeScript, CSS, HTML, and more. Adherence to WCAG best practices is also a key element of this position. Additional job roles include:

  • Research the impact Web Components have in a production setting utilizing Google's Core Web Vitals. This led to continued development of the component design system after demonstrating that this technology would result in net-gains to CLS and LCP scores.
  • Principal development of Stencil JS-based Web Component design system including: front end build processes, CI/CD pipeline integration, dynamic HTML template loading, and more.

SilverTech Inc.

Front End Engineer

Frontend engineers are responsible for translating design prototypes into reusable segments of code to later be picked up and integrated for continued, iterative use within content management systems. This includes authoring custom CSS and Javascript modules when necessary. A heavy emphasis is placed on an ability to scale code effectively. Secondary job roles include:

  • Testing and validation of all developed layouts across systems and device resolutions. This ensures a given design will perform correctly on mobile devices, as well as across browsers operating in different environments.
  • Development of Javascript modules to interact with API's, or consume API data in a multitude of formats, ranging from OData to flat JSON or CSV files. One such module is a complex wrapper around Google's Map API to help provide a more intuitive way to merge customer location data with a custom map interface.

P&R Dental Strategies

Application UI Developer

The Applications UI Developer is responsible for wireframing and prototyping easy to use, intuitive, user layouts for use with enterprise-level data analytics applications. Technologies utilized are primarily from the Microsoft stack and include .NET core, as well as ASP.NET and ASP Web Forms. The Applications UI Developer implemented the necessary Javascript in order to improve the user experience and overall application flow. Secondary job roles include:

  • Secure applications from XSS and CSRF attacks through the use of double token authentication, while also removing vulnerable Javascript libraries and other dependencies.
  • Explore alternative solutions outside the Microsoft stack in order to help speed up application development and delivery time while also aiding to improve the developer experience.

Pacific Group Resorts Inc.

Webmaster

The Webmaster for Pacific Group Resorts is responsible for overseeing all site maintenance and updates for Ragged Mountain, Wisp Resort, and Wintergreen Resort. Each website is served by a Microsoft IIS server running an instance of Episerver's Ektron CMS. Another core responsibility of the webmaster is to explore modern alternatives to help improve Pacific Group Resorts' online presence while streamlining the content creation workflow. Solutions explored have utilized technologies including MongoDB, Express, React, and Node. Secondary job roles include:

  • Integrate eCommerce tracking via Google Tag Manager.
  • Develop and reimagine user experience for key pages of the website.
  • The Webmaster is also responsible for performing monthly ADA Accessibility compliance audits through the use of Google's Lighthouse Tools.

More Vang

Data Automation Specailist

The Data Automation Specialist's primary job role was to develop automated data workflows which directly correlated to an increase in productivity by reducing hands-on man hours for recurring jobs. This required exceptional problem solving skills, as well as an ability to ensure that tasks were completed with high levels of accuracy. It was crucial to have an in-depth knowledge of Javascript data transformation capabilities, as well as extensive knowledge on a number of other proprietary technologies. Secondary responsibilities included:

  • Software development to assist workflow logic.

Projects

In addition to my professional experience, I've also taken on a number of personal projects to occupy my time outside the office. These escapades range from tinkering with data structures to establishing networked applications via the use of WebSockets.

Select an item below for more information on a particular project.
Web Components

Web Components

Technologies used: Stencil JS, TypeScript, NodeJS, RollupJS, HTML5, CSS3, SCSS, JavaScript

As outlined by the MDN Documentation, "Web Components [are] a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps."

With the introduction of the Stencil JS toolkit, many of Web Component API's are abstracted into toolchain which allows you to author self-contained components which can be distributed amongst any web application capable of running JavaScript. This very website is constructed utilizing Web Components authored via Stencil's toolkit.

In addition, an implementation of a JavaScript router (included in Stencil's toolkit) allows for developers to generate reusable segments of HTML code without the need for a templating engine like Svelte, Handlebars, or Nunjucks. A prerenering process is then leveraged to generate static output (static site generation) which can be served from a web server.

Linked Node Grid

Linked Node Matrix

Technologies used: JavaScript, React, Github, HTML5, CSS3

This experiment is mostly the product of a lot of free time, coupled with the desire to have a location for friends to play tabletop games online. With that in mind, I cautiously offer you this link with no other instruction.

While the interface remains half-baked, the real meat is what happens behind the scenes. It is not immediately obvious, but if new players are added to the board (0-indexed), you will observe that their “range” is projected onto the board. This is a feature of the data structure that contains the board's information.

Each cell in the matrix is linked to the cells around it, making each ”player“ on the board aware of the elements that are in the projected range. This enables the board to keep track of pieces that are within striking distance. This data structure could be leveraged for a number of games. There is a little more to it than what I have outlined here, but it has been the better part of 3 years, and time makes fools of us all!

CoupON Interface

CoupON

Technologies used: WebSockets, MongoDB, Strapi CMS, JavaScript, React, HTML5, CSS3

This application's purpose was to generate large lists in CSV format in order to track redemption of coupons throughout the course of any particular campaign. Coupons were tied to a unique identifier, and when redeemed, the back end was updated across all connected clients via the use of WebSockets. The Socket.io npm package made this process a breeze.

When looking for cost-effective CMS solutions to help manage the data, Strapi immediately stood out among the competition. As a self-hosted option, the cost is difficult to beat. Strapi, oupled with affordable offerings from MogoDB, made for a robust, developer-friendly CMS.

Upon redemption of a voucher, the client would utilize the existing WebSocket connection to update the MongoDB instance. The server, in turn, would notify any connected clients of the update, ensuring that these vouchers could not be redeemed twice. If a client was disconnected at the time, it will be automatically updated of the voucher's status upon reconnected to the network.

Strapi Interface

New Hampshire Mountain Inn

Technologies used: JavaScript, MongoDB, Strapi CMS, HTML5, CSS3, React

I first became aware of Strapi through an effort to replace an aging and inefficient content management system. As a headless CMS, it offered a true separation of design and content, ensuring that Front End Developers can do the work that is necessary to present users with rich experiences.

In addition, Strapi's integration with MongoDB provided for a cost-effective solution that would scale gracefully for smaller clients. As a proof of concept, a few pages from an existing web property (the New Hampshire Mountain Inn) were successfully mocked up utilizing the new stack.

Picture of interactive chart.

ChartJS

Technologies used: JavaScript, ChartJS, HTML5, CSS3, React,

Interactive charts are quickly becoming a staple of modern web interfaces. When implemented properly, these interfaces provide users with an intuitive way to navigate large data sets via filtering, animations, and more. ChartJS is but one of many libraries which developers can take advantage of to help implement these kinds of experiences.

This example was constructed utilizing TSA Claims data captured between the years of 2010 and 2013. Mostly, this data outlined the total numerical values of all claims made during these years. All of this information is publicly available on the TSA's web page.

Additional Skills & Certifications

During my professional career, I have been fortunate enough to work in environments that provided me with opportunites to advance a number of skills which are not related to Web Development.
  • Agile Development
  • Moz SEO Essentials Certification
  • Object Oriented Programming
  • First Aid / CPR Certified
  • Azure DevOps
  • Version Control – Git