Just about a year ago, I started working at Allstate. Myself and my team of two UI Engineers and a Design Lead established a Pattern Library that has been very successful. With the success I decided that it would be a good idea to share our workflow in an article.

For starters we have the four segments that every Pattern Library is structured with. These start with fundamentals that translate into the coded components and then we bundle together those components into templates. Finally the production ready pages built from the templates and are distributed inside of apps.

• Fundamentals: Colors…

Just about a year ago I joined Allstate and was given the task of assembling a way for developers to collaborate and share code. After a few conversations and some digging through the source code it was understood that the development being produced couldn’t easily be used project to project because of it’s loose standards and narrow implementation.

On my second week I decided that the best strategy was to establish a Pattern Library with my colleagues by using what existed but refining it into reusable components. …

For starters, let’s take a look at the typical process that most teams work under. This doesn’t matter if you’re waterfall or some form of agile, you probably have a structure like this for getting your projects onto the web.

The Typical Process

Phase one involves discovery:

Back when I started work at Paylocity I was a Front-End Developer for the larger set of product teams. All of their developers at the time were DotNet focused and they needed people like me to produce their client-side code (HTML, CSS, JavaScript). Specifically my job was to work with Interaction Designers and Product Managers to produce production Front-End code for each of the 12 large products. I was personally assigned to two in the beginning that they wanted to refactor visually.

There was an initiative to start developing reusable code components but it never really picked up due to…

Back in October 2007 I was just starting my first day at New Concepts Development. My starting position was a Technical Support Representative because honestly at that time I wasn’t extremely skilled in web development or design and it was more of a personal hobby. The atmosphere was enjoyable and friendly but especially it paid the bills. During my time there I was exposed to a lot in in-depth details about computer hardware which has been great in recent years as I’ve started taking on more DevOps responsibilities.

Outside of work I continued to level up on my Flash …

For those unacquainted with the game each person plays by portraying a character in a fantasy world. Going on adventures and rolling polyhedral dye to determine your success and failure when attempting a feat or action.

One person in the group takes the role of the Dungeon Master and it’s their job to direct the story like a referee for the other players.

It’s important to note that in these games you’re not a ruthless real estate mogul trying to bankrupt your fellow players and erect hotels all across Middle-earth from Hobbiton to Mordor. Instead you all work together, collaboratively…

Specificity is a hard thing to get use to when you first start writing CSS but there is an easy way to calculate the specificity of any selector.

Before we start it’s important to understand that there are multiple ways of declare CSS in HTML and they all have different specificities as well.

Inline Styles have the highest specificity:

<h1 style="color: blue; margin-left:30px;">This is a heading.</h1>

An Internal Style Sheet are lower than Inline Styles:

<style>h1 {color: blue; margin-left:30px;}</style>

The External Style Sheet which is the most popular approach are lowest:

<link rel="stylesheet" type="text/css" href="styles.css">

Of course there are the…

It’s no secret that I have a lot of love for Gulp. It’s fast to setup and gives you a lot of transparency into what your tasks are actually doing.

The three key reasons I haven’t switched completely to Webpack yet and instead I’ve been using both Webpack and Gulp’s watch tasks separately is because Gulp has a lot to offer when it comes to moving around static assets around in larger projects. Thankfully there’s a Webpack plugin for that and you can really do a lot with it.

The second reason is because I’m not always bundling my ECMAScript…