Skip to content

HubSpot

My software career really began when I joined HubSpot in 2011. For the first two years I was the lead front-end developer on the Content team, building out the Content Optimization System.

The system was a complex set of products for companies to create their online presence, including: Email, Landing Pages, Blog, Website Pages, Template Builder, Style Builder, Smart Content, and CTAs.

During the time HubSpot has been building out these products, and many others, our style guide has been evolving, with new components created frequently. As one team would find a good pattern for typeahead dropdown with search, tokenized multi-selects, stylzed alert/confirm/prompt dialogs, sortable/filterable/paginatable tables, etc., we’d try our best to promote that and standardize it, so other teams could take advantage.

Up until this point, one of my major contributions to the style guide was a modal library, called vex. Within the app, modal dialogs are used for everything from simple stylized alerts/confirms/prompts to complex nested applications.

Perhaps the most valuable thing a modal can offer is composability. Take our file manager. It lives in a dedicated page within the dashboard. There you can upload images, files, create folders, move files around, etc. Think of it like a little Finder inside the browser. Of course though, the file manager can’t just be available there. We need to be able to invoke it inside another app where you actually need the files.

If a customer is crafting a tweet in our Social app and wants to grab an image they’ve already uploaded, we provide them access to that same file manager, but inside a modal. The thing about that though is the file manager itself has situations where it shows a modal, e.g. when you’re cropping an image. So while the file manager app itself only needs one level of modal depth, composing with it requires two.

The vex library solves this problem by managing the z-index of modals for you, layer the modals with a backdrop/cover in between each to prevent clicks from getting through to the modal below, and providing callbacks so the parent modal can properly handle the closing of a child modal.

After seeing the value that these shared libraries were bringing to the team, we decided to get more into the open-source game to be able to share them with the broader front-end community on Github. This is what I’ve been working on the last nine months or so at HubSpot.

My friend and colleague Zack Bloom and I have been generalizing, creating, and releasing many small open-source projects. These have garnered tens of thousands of stars on Github, and hundreds of contributions from the broader community.

Here are some of the projects:

  • vexBeautiful and functional dialogs
  • TetherA positioning engine to make overlays, tooltips and dropdowns faster
  • DropA versatile and powerful dropdown library, built on Tether
  • ShepherdBuild help guides for you app, built on Tether
  • SelectStyleable selects built on Tether
  • SortableDrop-in script to make tables sortable
  • OfflineAutomatically alert users when they’ve lost internet connectivity
  • OdometerTransition numbers with ease
  • PACEAutomatic progress bars for any website

You can find a complete list on the Projects page, which also includes a list of personal projects as well.

Loading...