Patrick Canfield, Developer in San Francisco, United States
Patrick is available for hire
Hire Patrick

Patrick Canfield

Verified Expert  in Engineering

Software Developer

Location
San Francisco, United States
Toptal Member Since
December 22, 2015

An engineer with a right-brain-hemisphere orientation (a unique combo), Patrick is good with lateral thinking, visual problem solving, green-hat thinking as well as the analytical reasoning that engineers typically rely on. He has a decade of professional experience, recently in front-end web tech (React.js, Redux, ES.Next, Webpack, Angular, Backbone.js, and jQuery). He's currently learning about the psychological foundations of UI design theory.

Portfolio

EventRay
Git, Sass, ECMAScript (ES6), Babel, Webpack, Redux, React
Metromile
Sass, NGINX, Git, Gulp, Angular
GoGet.fit
Protractor, Jasmine, Cordova, Ionic, Angular, Python

Experience

Availability

Part-time

Preferred Environment

Git, MacOS, Linux

The most amazing...

...thing I've created is at EventRay.com/learn/logic/forms

Work Experience

Co-founder | Front-end Engineer | Chief Marketing Officer

2016 - 2018
EventRay
  • Wrote code for hovering error feedback next to associated input on a form.
  • Contributed to the landing page design.
  • Built end-user help pages.
  • Developed a predicate logic-building UI.
  • Wrote code for responsive toolbars.
  • Wrote highly reusable code for building CRUD interfaces.
  • Helped fix bugs in an open-source library, React-Popper.
Technologies: Git, Sass, ECMAScript (ES6), Babel, Webpack, Redux, React

Senior Front-end Engineer

2016 - 2016
Metromile
  • Created rapid prototyping scaffolding.
  • Wrote the code for displaying a map showing recent trips.
  • Wrote a shimmer animation loading feedback Angular directive.
  • Contributed to a testing framework.
  • Significantly rearranged the customer-facing front-end code to fix race conditions.
  • Initiated a weekly company-wide front-end engineering sync.
  • Wrote an Angular directive for fading in a background image once it's fully loaded—eliminating an ugly distracting loading flicker.
Technologies: Sass, NGINX, Git, Gulp, Angular

Software Engineer (Remote Freelance)

2015 - 2016
GoGet.fit
  • Established an agile process using Pivotal Tracker, Google Hangouts, and Bitbucket pull requests.
  • Helped design a mobile app's API.
  • Implemented front-end Angular services for interacting with the API.
  • Wrote the first unit tests using Angular-mocks.js and Jasmine.
  • Wrote the first end-to-end tests using Protractor.
Technologies: Protractor, Jasmine, Cordova, Ionic, Angular, Python

Senior Software Engineer

2014 - 2014
Synack
  • Developed the ID verification step using the Jumio API.
  • Set up a JavaScript unit testing with Jasmine.
Technologies: Jasmine, Backbone.js, JavaScript, Ruby on Rails (RoR)

Software Engineer

2013 - 2014
Constant Contact
  • Developed a Marionette.js-based social post scheduling interface.
  • Introduced Backbone.js to a young project in need of structure.
  • Helped implement unit testing with Jasmine.
  • Developed a sophisticated color picker using Raphael.js.
  • Created a new project yeoman generator.
Technologies: Jasmine, Marionette.js, Backbone.js, JavaScript

Co-founder | Developer

2011 - 2013
EventRay
  • Developed a WYSIWYG conference badge design.
  • Constructed a D3.js-based graphing library.
  • Developed a conference-center-oriented event scheduling app.
  • Created the Prezi presentation that was submitted without a successful application to an incubator.
  • Wrote the landing page with HTML/CSS.
Technologies: Sass, D3.js, Marionette.js, Backbone.js, JavaScript, Python

Software Developer

2008 - 2011
Adtec
  • Created a tool for viewing the current LCD output of a remote embedded system from my development machine.
  • Introduced a C++ unit-testing framework.
  • Developed an interprocess messaging service and an SNMP daemon.
  • Created a service for parsing and aggregating TV guide data.
Technologies: Linux, C++

EventRay Logic Builder Documentation

https://eventray.com/learn/logic/forms
I wrote EventRay's logic builder as well as these documentation pages that use the logic builder's actual code to render examples inline with the documentation. I also conceived and implemented the technology to make that possible.

Music Streaming App

I built the front-end of this music-streaming app using Backbone.js.

Photo Map

This piece of software automatically places photos that I've taken on an interactive map using EXIF data, Mapbox, and a DBSCAN clustering algorithm library.

Boggle

A web implementation of Boggle, a word-finding puzzle game

Source: https://github.com/pzatrick/boggle

Calorie Tracker

A simple app for tracking calories using AngularJS and Firebase. I'm most proud of the stylesheet which I created from scratch and the robustness of the app, thanks to significant automated test coverage.

GoGet.fit

http://goget.fit
I wrote much of the foundational front-end code using Ionic and AngularJS. I also put in place the unit and end-to-end tests.

JavaScript | Find by Text Module

A module defining a function that will search all elements on a webpage for specific text that matches a given query in a simple query language.

The language organically developed while I was writing end-to-end tests with Protractor. It works like this: a list of words—limited by spaces—represents all elements that contain the exact words in the same order, ignoring the presence of other words. If any word in the query is preceded by a bang (!), all elements with that word are excluded.

For example: "stardust spiders" would match elements containing "ziggy stardust and the spiders from Mars," and "peanut !butter" would match elements containing "peanut brittle" but not "peanut butter."

Languages

ECMAScript (ES6), ES7, JavaScript, CSS3, HTML5, Sass, C++, Python, Ruby, C#, GraphQL

Frameworks

Jest, Redux, Jasmine, AngularJS, Ruby on Rails (RoR), Angular, Ionic, Protractor

Libraries/APIs

React, Lodash, Backbone.js, jQuery, Marionette.js, REST APIs, D3.js

Tools

JSX, Git, Jira, Gulp, Babel, Webpack, Pivotal Tracker, NGINX, Sketch

Paradigms

Object-oriented Programming (OOP), Functional Programming, Responsive Web Design (RWD), Agile Software Development, Behavior-driven Development (BDD), RESTful Development

Other

Front-end Development, Cordova, Gatsby, General Agreements on Trade in Services (GATS), Web Pages, Coding, Scripting

Platforms

Linux, Mapbox, MacOS

Storage

PostgreSQL, MongoDB, RethinkDB

2004 - 2008

Bachelor's Degree in Computer Science

University of North Florida - Jacksonville, Florida

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring