preview

Preprocessing Language Essay

Decent Essays

Staying DRY with Preprocessing Languages

HTML, CSS, and JavaScript together make up the visual landscape of the web as we know it. Like the skeleton, skin and muscles come together to help create a functioning human body, these three languages, when combined in an intentional and planned way, create a website. As front-end Developers, it is our job to utilize these languages creatively and efficiently in order to create the best possible experience for the end users of thunder::tech’s clients. While these languages are fundamental to the web, writing them is a repetitive and time-consuming process. To help streamline the process of writing these languages, alternative languages called preprocessing languages have been introduced to help …show more content…

Getting a little deeper down the rabbit hole here, Sass and Pug are tools to help front-end developers create DRY’er, more modular code.

DRY is a principle in development called “Don’t Repeat Yourself,” which focuses on reducing and eliminating duplicated code. Considering that every line of code in software must be maintained, it’s easy to see that duplication then is simply waste. Similarly, modular programming is a software design technique that encourages separating functions of a program into individual, reusable modules, in that each module contains everything necessary to perform a single desired function. Phew!

A simple way of visualizing this can be seen by looking at thunder::tech’s homepage:

Each separate color and number is it’s own unique module. These sections can be reused in other places on the site with different content. Building websites modularly removes some of the repetition encountered in development which promotes DRY development and in the end results in a more flexible, expandable, and maintainable website.

So with the understanding that Sass and Pug help to create better code overall, let’s take a look at another example of a feature that both Sass and Pug use called mixins.

Pug to HTML (Source: pugjs.org)

Sass to CSS (Source: sassmeister.com)

A mixin in both Sass and Pug allows a developer to write named, reusable blocks of code. These blocks of code can be called by their name to be used in different areas.

Get Access