Top

Work Philosophy

Front end web developer: friendly, reliable, future-focused & committed to delivering as part of a team or independently. Holistic, advanced, understanding of the challenges, factors that play a part in website development. Dedicated to innovation, problem-solving and learning.

Experience

At Blast Radius, I worked as an Interface Developer as part of a team, just before their acquisition by WPP group. My portfolio included clients such as Nintendo of America, Microsoft, Starbucks, Nike, BMW, Chanel, Electronic Arts, Standard Pacific Homes, and Guthy Renker.

In 2014, I branched out to create the small, but mighty, corporation Oakenfold Enterprises Ltd. Since, I have collaborated and lead on a variety of projects. Read on to learn more about my work…

Here are some of the things I bring to the table:

  • Delivering sites from alpha > beta > production
  • Developing and refining features in consultation with project founders and stakeholders
  • Contributing new UI/UX features to pre-existing or blank slate codebases
  • Success incorporating new technologies into projects
  • Success working remotely with early stage startups

I am committed to continuous learning. Currently, I am passionate about React, web page performance, and accessibility.

Top

Single Page Applications

Visitor’s expectations of their online experience are constantly evolving. Single Page Applications provide a sophisticated and seamless website experience that feels like a native application. A user interface is an extension of brand and differentiates an organization from their competitors.

Key features and deliverables

I developed, prototyped, and refined the front end code for Fyndit.com. Key features and deliverables include:

  • HTML markup
  • CSS styling
  • Javascript:
    • Searched business locations using Google Places and Foursquare. Results plotted to Google Maps
    • User registration and login flows. Includes support for authenticating via Google, Facebook and Twitter
    • Delayed loading of 3rd party libraries until they were on the page or had been interacted with by the user
    • Search and Autocomplete features
    • “Rehydrated” Redis cached interface state via an inline .js {obj} (e.g: “the user has liked this item so update it’s styling”)
    • Routed xhr requests through a central function. Useful for adding pre and/or post request scripting
  • Code splitting at a component level
    • 2 main javascript bundles: core application scripting and related library files. The rest is dynamically loaded
    • components initialize via a callback that is registered with a central function. Communication via pubsub
  • Cross-browser tested. Most features supported down to Internet Explorer 11 on Windows 8.1
  • A ‘scripting only’ CSS class name, e.g.: .js-*. No .css styles attached to those classes. Useful for:
    • initializing components
    • setting state of elements
    • event binding
  • App Shell setup: a site frame, new content inserted into a dedicated <div>

See more features, libraries, and technologies used in this project

Top

Web Performance

The speed at which a site loads directly impacts conversion rates, visitor retention, and revenue. Web performance requires research, learning, and implementation of various strategies.

I have had success with:

  • Frequent and early WebPagetest testing using recommended settings
  • Component based code splitting
  • Lazy loading 3rd party scripts
    • dynamically insert the <script> tags after an event (e.g.: the visitor interacted with the element)
    • adding the async attribute to <script>s that are in the source
  • Enabling HTTP/2 for ‘multiplexing multiple requests over a single TCP connection’
  • Cache what you can

See in depth performance results

For the 2018 fyndit.com release, page load performance was tested with webpagetest.org. Focusing on the initial load over a slow 3G connection using a mid-tier mobile device.

The new version outperformed the previous release in several key metrics:

  • First Interactive time went from 17.959s down to 7.918s. A 56% reduction.
  • Fully Loaded Bytes In size went from 1084kb down to 749kb. A 30% reduction.
  • Fully Loaded Time went down from 27.476s to 25.09s. A 8.67% reduction.

Fyndit.com had better Fully Loaded Time compared to sample pages from Amazon 1, Reddit 2 and Twitter 3

  • 58.42% faster than Amazon
  • 29.79% faster than Reddit
  • 6.27% faster than Twitter
Top

Web Content Accessibility Guidelines (WCAG)

Accessibility is increasingly important and often overlooked. It is a net benefit to provide access to more people.The more accessible and legible your content, the wider it can spread.

Legal action in the United States has recently increased over inaccessible websites.

Animikii asked me to update and improve an interactive timeline feature. The key deliverables were:

  • small screen compatibility
    • iOS support
  • WCAG support: keyboard navigation, contrast, color, alternate text content, no inline scripts
  • content for the timeline was in an data.xlsx file. I converted it into multiple formats using xls2json
    • data feed into the TimelineJS3 plugin
    • text for WCAG text alternative
  • used semantically appropriate markup, and aria labels
  • tested with the Web Accessibility Evaluation Tool (WAVE)
Top

Static Site Generators

GatsbyJS is a React based static site generator. I successfully developed a large single page site using GatsbyJS for WatchMojo.

The oakenfold.ca website was initially hand coded html/css but once the codebase became unwieldy due to size and complexity it was switched over to Jekyll with much success.

Static site generators offer a lot of benefits:

  • an easy to use yet sophisticated system that meets most business’ needs
  • code quality increases due to developer tooling and plugins
  • static sites typically load faster than single page applications
  • website copy can be stored outside of html markup for easy updating
  • the template loops minimize repetitive typing
  • easily group source code by component
Top

HTML, CSS

A large portion of the oakenfold.ca html/css version was developed by hand coding.

Hand coding CSS tends to reduce selector chains and number of declarations.

Hand coding HTML tends to reduce the amount of markup generated.

Resulting in a smaller codebase which is maintainable, easy to comprehend, and performant.

WatchMojo asked me to provide a prototype for a new product they were developing. A one page html, css with minimal scripting.

  • Created small utility scripts that cloned sample markup in order to populate the page, i.e: lorem ipsum for interface elements
  • Tested with the Web Accessibility Evaluation Tool (WAVE)
  • Tested in a wide range of devices, browsers, and operating systems