One of the first lessons most developers learn in improving their code is the DRY (Don't Repeat Yourself) standard. Simply put, if you have to write that same component twice but with different content, you need to refactor. The problem I see is that most developers only apply this to the code and not their processes. This is where templates come in. Here are 3 immediate improvements to your project process if you take time to template your most used designs and components.
Increased Speed
How many times have you retyped an entire Navbar/Hero Section/Sidebar in a new project? Wouldn't it have been easier to copy that Navbar from the last project and make small changes. If in React, you could style the component, add props for customization (background color, font-size, etc.), save it to a "favorite components" folder, and import those components when needed. This cuts down future build time significantly.
Easy Practice
Consistent practice is one of the harder parts of learning to code. This is sometimes because developers burn out on Javascript challenges or building entire projects. What if you only have 20 minutes today? Building a styled footer that you can use for your next project should take just that amount of time. It's a creative break from the "logic grind" and still productive.
Develop A Signature Style
Imagine having a library of 25 custom Bootstrap Cards to choose from? What if you displayed them on a site as a project show to recruiters or clients? It would be an easy way to say "This is my style of design" and would show your ability to create reusable components. As a bonus, this would also show your dedication and passion to code.
Overall, templating code can greatly improve your process by making it more seamless while also creating practice for the core elements of Frontend Development.
I hope this convinces you to store some of your favorite elements today. If you have some that you'd like to share, comment your GitHub profile below. I'd love to see!
Top comments (0)