We Have a Front-end Workflow and You Should Too

Search Options
Blog Search
Sign up for our monthly marketing trends enewsletter
  • 12/4/2017

    Our workflow is based on an opinionated boilerplate. Opinionated means that it comes with certain assumptions about how things are done. This is more efficient because it's more predictable, allowing us to automate many tasks.

    The automation itself is performed by a program which we maintain in-house. Most of this program is actually built out of smaller programs, or modules, which are open-source and available free of charge. Among these are Pug and Sass, preprocessing languages which we wrote an article about recently. Our automation system includes various other tools like Autoprefixer, Connect and Livereloader.

    Each of these accomplishes a task, and the tasks are all different:

    • Enable writing more flexible and stable code
    • Optimize the sites to load faster
    • Improve cross-browser compatibility
    • Generate instant previews of changes as we work

    We've also written a lot of automation ourselves:

    • Create projects from our boilerplate
    • Create and configure smaller components of projects
    • Bring in open-source and proprietary code libraries, but only when needed, keeping projects lean
    • Bring in simple prototypes of common project components that can be expanded upon to eliminate duplicated efforts
    • Run preprocessing and push generated code to Git branches using naming conventions using a Continuous Integration (CI) Server
    Scaffolding Selectors

    However, one of our favorite automation features is the ability to scaffold selectors. Scaffolding means automatically generating code, either from previously-written code or from some other data. The generated code is often incomplete, but the idea is to let the computer calculate the results of a tedious task so that developers can spend more time on creative problem-solving.

    In front-end development, markup is code that describes a page's content and structure, written in HTML. Stylesheets describe how pieces of markup should be styled, and selectors are the pieces of the stylesheets which identify which elements in the markup should be selected for a certain set of styles. Since the elements described in the markup are approximately predictable when compared to the selectors in a stylesheet, and are often written first, selectors are an excellent candidate for scaffolding. For example, if I were to write some HTML:

    <ul class="navigation-link-list">
        <li>
            <a class="navigation-link" href="http://www.thundertech.com/">Home page</a>
        </li>
        <li>
            <a class="navigation-link" href="http://www.thundertech.com/blog">Blog</a>
        </li>
    </ul>

    I might have a stylesheet that looks like this:

    .navigation-link-list {
        display: flex;
    }

    .navigation-link {
        color: orange;
        font-size: 0.8rem;
    }

    With scaffolding, I can have some of this automatically generated:

    .navigation-link-list {

    }

    .navigation-link {

    }

    This may not seem like much effort is being automated, but many web projects have hundreds of selectors. Markup can also be elaborate and repeat selectors, meaning that a person manually writing selectors may end up writing the same definition twice.

    We recently released our selector generator as an open-source module on the Node Package Manager so that others putting together front-end development workflows can take advantage of this idea. Since different organizations are going to have different coding standards, we created some simple configuration options to help users customize its output.

    Our workflow was designed to meet the needs of our team and our clients. If you're designing a workflow, there are many factors to consider. Let us know if we can help you sort through your requirements and set up automation that works for you.

  • Basecamp 101
  • 926
  • Best SEO Tools from 2017
Sign up for our monthly marketing newsletters