preview

Preprocessing Language

Decent Essays

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 developers write code more cleanly and …show more content…

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, duplication of code then is simply a 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 home page:
A screenshot of thundertechs home page explaining modules

Each separate color and number is its own unique module. These sections can be reused in other places on the site with different content. Building modular websites removes some of the repetition encountered in development, which promotes DRY development.

In the end, this 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

A code example of Pug demonstrating a mixin
Sass to CSS

A code example of Sass demonstrating a mixin
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. Here’s a

Get Access