7 Tips for Commenting Your Code

Your code doesn’t need to be commented. Or does it? Clear code needs to be easy to read. You may not be the only one who has to maintain this code. Write comments so the future person who updates this code can understand why you did things. Remember that person may be you.

7 Tips for Commenting Your Code
Image by Gerd Altmann from Pixabay

Use these tips for commenting your code for the better.

1. Comments should be meaningful

They shouldn’t duplicate the code. Comments should compliment your code. You write to explain why the code works this way.

2. Add comments when fixing bugs

It helps you to understand what changed and why. Include references to issue numbers to provide further information. Anything else that you used to help solve the problem.

Everyone codes code they found on the internet. It helps to add links in the comments so you remember where you got the code from. Add who wrote it and what problem it fixes.

4. Sometimes your code isn’t finished

Use comments to remind everyone that there are limitations to this piece of code. Add TODO to remember what you need to finish.

“You should first strive to make your code as simple as possible to understand and without relying on comments as a crutch. Only at the point where code cannot be made easier to understand should you begin to add comments.”

-Jeff Atwood, Code tells you how, comments tell you why

5. Comments should explain why you did something

If your comments are confusing, remove the comment. Keep comments that are clear and easy to understand.

6. Keep your comments brief

Comments can take time to read. You want to make them as short as possible.

7. Remember to update your comments

As you change your code, your comments may need updating to reflect changes.

Comments can’t fix or excuse bad code. They should compliment it. Commenting your code should help you understand why you chose to do something.

For getting better at writing comments, read Best practices for writing code comments.

Anything else that you used to help solve the problem.

Microcopy Tools and Tips

As a developer, you may overlook the tiniest bits of text on your app or website. The copy on your buttons, labels, tooltips and error messages can have the biggest impact. It can help your users to understand how to use your app or website.

Microcopy Tools and Tips
Photo by Med Badr Chemmaoui on Unsplash

Picking out the right words can help people to keep using your website or choose another. Use these tools and tips to help improve your microcopy.

1. Keep it casual

You want to convey a tone that is friendly and relaxed. Keep it simple and conversational. Address your users by using “you” and “your”.

2. Use simple, everyday words

Pick out words that talk to your users. Use the same language that they do. Avoid using complex jargon and words. Keep it short and to the point.

3. Be helpful

You want your users to keep using your app or website. Microcopy should help guide them. Pick words that help them to understand what is going to happen. Words like download, buy now, learn more or get more information.

Depending on what you want your users to do, you’ll want to confirm that they completed an action. Or shows an error message if it fails. You want to provide feedback to the user that helps them complete their tasks.

4. Use a microcopy tool

You can use an AI writing assistant or a microcopy collection to help you write better.

5. Test your copy

Not all copy resonates with your users. You may need to try different words before you find what works with your users.

Challenge your writing skills

Take the Daily UX Writing Challenge to practice writing better microcopy.

Learn more tips on improving your user experience with UX Writing.

Switching to Utility-First CSS

When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.

Switching to Utility-First CSS
Image by superdirk from Pixabay

What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.

Where can you learn more about it?

Start by checking out these articles:

What CSS Methodologies can I use?

You can look at these couple popular methodologies:

  • Cube CSS – a CSS methodology that focuses on simplicity, consistency and works with whatever medium you are using.
  • Tailwind CSS – a CSS framework that helps you rapidly build modern websites.
  • Atomizer – a CSS utility library that integrates with the most popular web frameworks.

Software development consistently changes. A developer needs to experiment with new tools and new ideas. You need to pick the tools that best suit your project and users.

Why Write Technical Documentation

As a developer, you spend a lot of time writing. More than writing code. You reply to emails, update bug requests and write project documentation and more. Code allows us to communicate with computers. With people, we need to use words to communicate.

Why Write Technical Documentation
Image by ha11ok from Pixabay

Every day, we communicate with clients, users, team members and other developers. We write all kinds of different things to communicate with them. From a quick email to help them get started using our product to a full user’s guide.

"If you can’t automate it, document it. – Hila Fish

Why write?

You want to write technical documentation to help reduce your work load. Technical docs help you to remember why you are doing things a certain way. You or future developers will be glad you took the time to document the choices made.

Documentation keeps your project on track

When you work on your own projects, writing becomes more important. You write documentation to help explain what your product does. How it solves your customers’ problem and how they can use it. If you like to work on many projects, documentation helps you to keep going. Simon Willison explains how to use documentation to maintain multiple projects.

Document your project quirks

Every project has its own quirks. You make choices that affect how things turn out. To help your future self or the next developer, document the following:

  • Choices that you make while you are working on the project
  • Things that bugged you
  • Items that aren’t clear or straight forward
  • Any surprises that came along
  • Issues or things to consider when using this tool or language feature

Read more about writing better documentation

Making an Advice Generator

Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.

Making an Advice Generator
Image by Dean Moriarty from Pixabay

You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.

Advice Generator

The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.

Screenshot of Advice Generator with Advice #100: Everybody makes mistakes.

How I Built It

I created this app using HTML, CSS and JavaScript. For CSS, I started with Bootstrap to help structure the design. Then, I used FlexBox to manage the layout.

Fetching Data

I used the JavaScript Fetch API to fetch the data from the Advice Slip JSON API and display it on a web page. By default, it picks a piece of advice and displays it. If you want to get another piece of advice, you need to click the dice icon. This icon button retrieves a random piece of advice.

If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.

Design Challenges

The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.

The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.

Other Coding Challenges