The Good Code for Great Code: Our best web dev practices

There’s an unwritten rule book or “good code” for coders who want to do their job well. It’s not just about the flashy tricks of the trade, but one of the most important skills that a great developer should possess is simply the ability to follow good practices. Although I learned many of these the hard way, no need to fret as your friendly web dev wizard is here to save you tons of time and frustration. Consider this your guide to good code, but remember to always research and do your own due diligence as well. The internet moves fast and waits for none, so it’s vital to adapt these practices to the new standards and technologies that arise daily in this ever-growing industry. Here’s to all who dream to develop not just great websites but great experiences.

Coding practices

1. Legible code - While commenting your code is important, it’s also about your style, structure, and naming conventions. If you get into the habit of writing easily readable code, you will actually find yourself writing less comments in the end. Save your future-self time by working smarter not harder.
2. Consistent naming for variables - Although this is relevant to the above section, I felt this practice deserved its own spotlight because it’s actually something that I struggled with when learning to code back in the day. There are several standards in the industry that you can follow, but I feel as long as you are consistent with variable naming (and the names actually make sense), it should be more than enough. Don’t be afraid to use long variable names, and also try not to mix coding styles like kebab and camel case. This just makes your code awkward to read. The use of capital letter variables is very standardized in the industry, so try to follow these rules as best as possible. For example, be mindful of this when naming classes or constants. Remember that good variable naming can also help you write less comments. I tend to use kebab style a lot more, but it’s only because it’s what I’ve been using since I began coding. This doesn’t mean that other styles aren’t good too!
3. Comments - Commenting your code is extremely important because it allows other people who take over the code to understand it a lot better. Don’t over do it. Over commenting is a common thing to do, so if the comment is something that takes more than a line, consider writing it in the project’s documentation rather than in the comments.
4. Documentation - Documenting your code is vital so that you remember how to use it and what it does. If you work on a library or project but want to use it 6 months after, odds are you won’t remember how you did it or how exactly it works. If you document it well, this will never be a problem for you or future developers that want to use your code. Documentation is something that I find small businesses either don’t do well or don’t do at all. It should be a top priority when writing reusable code or pieces of code that someone else is probably going to use.
5. Use a good editor and folder structure - This is something that people tend to overlook, but it can actually make your work a lot easier if you use the right tools and use them the right way. A carpenter is going to take his time building something, but if he’s been working with a faulty hammer and completed bad quality construction, all his time has now gone to waste. Same with a programmer — a good text editor can help you write faster, more organized, and with less syntax errors. My preferred code editor is Visual Code. It has tons of functionality out of the box, and there are tons of packages that help you code a lot faster.

Web dev practices

1. Understand the big picture - Some developers love to code so much that they skip the first step, which is planning, and end up writing code over and over again. First ask, what’s the overall intention or bigger picture of the project? This leads to understanding priorities and not getting bogged by the insignificant details that may steer you off course.
2. User Experience - Paper mock-ups are cheap to change compared to the cost of scrapping a project your users don’t want. A good rule of thumb to remember is that 70 percent of development efforts should be spent on research and design and then the final 30 percent on programming. By understanding the potential user and creating a user-friendly design, the development phase will significantly be less complex.
3. Separating HTML from CSS and JS - There were a lot of benefits for doing this a few years ago, and while current developed technologies may make it seem less relevant, separating HTML from CSS and JavaScript still applies and remains important today. A few of the benefits are: readability, no code duplication, reduced bandwidth usage (cacheability), ability to change styles without changing the content, and maintainability.
4. Working with modular components - Oh boy! My experience as a front-end web developer completely changed when I started doing this. It’s just so much easier working in a modular way when building websites and web apps. Code separation can help you write a lot less code (and write it better). If you know you’re going to be using a piece of HTML and CSS code over and over again throughout a project — make it a module, or in other words a template, and simply import and reuse it whenever necessary. With today’s HTML templating languages, this is so simple to do that it would be a waste of time to not do it. Working in a modular way will also make debugging a lot easier. Here at Black Magic, we often use Twig as our HTML templating language of choice because it’s the templating language that Craft CMS uses.
5. Try to write reusable CSS classes - Nowadays this is a really common practice, but it’s importance should still be noted. Using reusable CSS classes will make your work more readable and short. It will also allow your site to load faster, since you are writing less code. Before starting to code a project, go over the design and decide what some good global classes are. This will help you focus on the “hard stuff” later on.
6. Compilation and minification of CSS and JS - This is another highly adopted practice today, and it’s also greatly beneficial to helping websites and apps acquire smaller loading times.
7. Staging environment - A staging site is a clone of your “live” website. It allows you to test any changes or major new features that you plan to implement in a secure environment. Developers often use staging sites as a testing ground, in order to prevent errors occurring on “live” websites. Safe from the eyes of users, developers can avoid downtimes or issues that may otherwise occur.
8. Deployment - Deployment should always be done on major releases for the production site. It’s also vital to find the most suitable time for deployment — a time when the site is less active and when the whole team is aware of what’s happening. There should always be someone around during deployment, so it can be tested as it rolls out. Check all deployed features after the release to make sure they all work correctly. Minor fixes can be deployed at any time. Try to document a list of deployed features with timestamps, so if a bug appears, you can quickly determine when it was introduced to the code.
9. Database and code backups - This section doesn’t need much explanation⁠ — just do it!⁠ Things happen and trust me, they happen whenever you’re least expecting them to. Making scheduled backups of your sites and projects is like putting a seatbelt on as soon as you get into a car. You do it without much thought, and it’s a precaution that should become second nature. It’s always better to be safe than sorry and likewise better to be over prepared than underprepared. Git is your friend. Make use of it. It is really simple to have everything backed up every time you make a change in your codebase, so you just have to make it a habit. Also, try to make small comments specifying changes whenever you push something on GitHub. This will help you a lot when looking for a particular change you made on your codebase.

If you try to be as consistent as possible when following these practices, your life as a developer and coder will be a lot less stressful. Being stress-free in an industry that is permanently moving and changing is priceless (and totally awesome). We’re also constantly learning and growing with our industry, so be on the lookout for new good coding practices to be added in the future.