Graduating from Boostrap: With help form Atomic Design

A conference talk I gave at Techbash 2017. Approached how to transition from using UI frameworks to design systems from the “Full Stack” developers perspective.


When replying to a conference’s “Call for Speakers” or “Call for Proposals” you often submit an abstract. The abstract serves as a pitch for a topic you would be interested in speaking on. Often times, the talk does not have slides or even an outline at this point. If one or more conferences likes the abstract and asks the submitter to present, a talk is born.

Here is a copy of the abstract that ultimately led to this slide deck and presentation:

Bootstrap defines itself as “… the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” and it’s not wrong. At 105,000 stars, and over 48,000 forks on GitHub, it comes in as the second most popular repository of all time. Bootstrap is an amazing tool, but it’s not without it’s problems. Have you ever found yourself overriding a default Bootstrap style? Including CSS or JS for components you don’t use? Or maybe you’re just tired of your website looking like everyone else’s? We put up with this technical debt because of the wins Bootstrap provides, but what if we could keep the benefits without all of the headache? Enter Atomic Design.

In this discussion, we will start by exploring the problems Atomic design solves, how it promotes consistency/cohesion, easily traverses from abstract to concrete, and provides methodology for crafting an effective design system. Next we will get our hands dirty by digging into a concrete implementation of an Atomic Design based toolkit. Finally, we will go over resources for further education, how to begin the process of integrating Atomic Design into your process, and next steps. By the end of this talk you will be comfortable with Atomic Design basics and have the knowledge and resources necessary to create your own atomically driven comprehensive component library.

Slide Deck

Click Here to view on

Fullscreen is not available/does not function correctly within this layout. You can view the speaker notes and the slides in their full resolution on

This talk was presented at Techbash 2017. You can find information about the other wonderful talks presented there in this GitHub Repo.

If you have any questions, please don’t hesitate to reach out below!

Continue reading Graduating from Boostrap: With help form Atomic Design

How To Use Google Analytics' API To Share Your Traffic

Open source your website’s traffic using Google Analytics, service accounts, and Google’s new Embedded API server-side authentication methods.

This is a “proof of concept” post on open sourcing your website’s traffic data. A number of enhancements, both visual and performance wise, can be made. This post walks you through getting the data into your hands, so you can do with it what you will (:

Continue reading How To Use Google Analytics' API To Share Your Traffic

The Template Tag: A Refresher

The only remaining browser has begun to implement the template tag. With full cross-browser support in the near future, it’s time for a template tag refresher.

The <template> specification was introduced in 2011, along with the other three specs that make up WebComponents. Since then, <template> has become a part of the W3C Living Document, and has full support in Chrome, Firefox, Opera, Safari, and Android. To boot, Edge has just announced upcoming support.

Continue reading The Template Tag: A Refresher

The Programmer's Guide to Better SEO: Semantic Markup and HTML5

Search engine bots have issues reading most web pages. To improve search ranking, implement these tips to make your web page easier to read.

Disclaimer: Content is king. Provide value, make yourself accessible, make your website easy to navigate and easy to understand for your users. Everything detailed below is about Search Engine OPTIMIZATION, and is not worth a thought until you have something worth optimizing.

Continue reading The Programmer's Guide to Better SEO: Semantic Markup and HTML5


© 2017. All rights reserved.