A new website is like a great meal that you haven’t made yet, and the right scaffolding is the kitchen map. How many times have you seen a picture of a complete meal and thought “I want that,” and you were determined to make it?
How many times have you seen a picture of a complete meal and thought “I want that,” and you were determined to make it? You know you have the cooking skills required to make the dish, but you don’t know the exact recipe. You could do some trial and error, mixing ingredients until you get the right taste and looks, experimenting with cooking times until it comes out just right, but is that the most efficient way to make your meal? There is definitely a better way. Sometimes this is what it’s like starting a new website.
With every new website project, comes new spins on common HTML and CSS patterns, and new combinations of elements on a page to create the perfect design. Much like cooking, there are often many ways to correctly achieve the same thing, and in a team environment it’s not uncommon that every team member has a slightly different style. You might be thinking, “Okay, so what? As long as you can correctly code up the design, who cares?” and you wouldn’t be wrong, what’s the big deal? Doing things your own way is fine. You can finish the project on time, and with no bugs, it’s all good, but what happens when in 3 months someone else on the team needs to go into your code and add a new feature?
Since you came in under-budget on that project you’re in high demand in the department, so you aren’t available, so other people with different styles and coding backgrounds have to go into your code and now mesh their code in with yours. Since they use a different technique they don’t know that you might have already used a same markup pattern somewhere else, so they start from scratch to do something that might be mostly done already. This costs time and money – not good. A colleague and I decided to remedy this for our department. We have created a website project scaffolding.
Time & Money Saved
Okay, I’m guessing you didn’t just fall to the floor due to massive levels of amazement, so let me explain what we did and what this means. First, we defined a number of common markup and style patterns and pre-built them. To illustrate what this means I’ll use a common web design pattern – a grid. Some sort of horizontal grid is used on many websites that you probably like, it’s pleasing to the eye to see things line up and consistent. In our project scaffolding, a grid is pre-built. There is a default width of column and space in between that can be easily changed, then the rest of the grid pattern will do the math itself. Then, as the person building the website, all you would have to do to get some elements to line up on this grid is add a class of col-3 (for our grid, this means that that certain element takes up 3 grid columns). This is much quicker than figuring out the math yourself, and spending time setting up all of the necessary classes. Time and money saved. This is just one pattern used in our scaffolding, and there are many helpful recipes like this. Most are just small timesavers cut down seconds at a time, but are able to be reused across the entire website. Time and money saved.
Where are the Potatoes?
So far we have a base set of pre-built patterns, or recipes, that not only save time, but also act as a set of common techniques that are used across the team. This is huge. Now, in December when I get into some code that was written by someone else in May, I won’t have to spend much time getting up to speed on the coding style, and I also know most of what is already available if I need to use it. Time and money saved.
Have you ever cooked in someone else’s kitchen? You know they have potatoes, but where are they? They might be in the pantry, just where you keep yours, but what if they’re in the cupboard next to the oven? If you’re at my mom’s house, you would have to look in the basement (I still don’t know why). Websites have many files, and each person has their own preference on how to organize these files. Again, there isn’t anything wrong with this, but in a team setting it should be better. Our project scaffolding took care of this too.In our scaffolding, there is a defined folder structure, and all of the files are linked together using this structure. This is going to be another help when I get into that code in December. I will know exactly where to find the files that I need to open. Time and money saved.
The Microwave of Web Development
I’ve only touched on half of it. We have integrated a few command line tools to do two main things. First, you will be able to install our project scaffolding and begin a new project with one command. Let me say that again, with one simple command (it’s just two words) a folder/file structure is installed with many pre-built markup patterns, naming conventions, and timesavers. No more creating files and folders on the fly, with one command it’s all set up and ready to go. Awesome.
These command line tools are also used during the website building process. As files change, browsers need to refresh to pick up these changes, our styles run through a preprocessor, which has to build (and not error), and any scripts have to be error free, or the whole web page could break. This is a lot to keep track of and make sure is all up to snuff, not to mention takes a lot of time and mouse clicks with every change. The tools used in our scaffolding take care of all of this. With one more command, every file is watched and proofread at all times. Any time there is an error, the developer is notified with the error and it’s location, and the browser is refreshed. Refreshing the browser automatically may not seem like a big thing but to a developer this saves hours across the life of a website build. This is like the invention of the microwave: the microwave uses technology to heat things up very quickly compared to before, freeing a person up to do other things simultaneously. Time and money saved.
One last major feature of our project scaffolding is that it is source-controlled, and it’s a collaboration across the team. Each new project starts with the latest scaffolding. If the team agrees that one particular way of doing something is better, the project scaffolding code is updated, and the next time someone starts a project, they have the latest changes. Moreover, if we want to go back to an old version, we can easily see what that was and roll back to it.
Not Done Yet Folks
Our new scaffolding is a living, growing thing. It’s not done, and it won’t be done. It will grow into what works best for the team. However, the main goals of it will always be the same:
- Allow for more consistent code.
- Allow for quicker development.
- Be more efficient with our time and structures.
For our clients, this means being able to allocate more project hours to major features of websites instead of on parts that are basic but time-consuming. Since a lot of work is already done before the build even starts, and the build takes quicker overall, we can make better use of our time and have that perfect looking delicious meal without wasting hours getting it right.