Why Use a Coding Style Guide

What is a coding style? It is the way your code looks. The way you learned how to code, the tools and languages that influenced your personal style. Your style is influence by the many decisions that you make while writing code. If you work on a team, the team has its own standards that also influence how you write code.

Why Use a Coding Style Guide
Lubos Houska from Pixabay

Code is the way you communicate with other developers. To make sure that your code is understandable to other, you need to focus on writing code that is consistent and readable.

How do you make your code understandable?

Consistency

Pick a way of writing and organizing your code. You’ll want to decide:

  • Tabs or spaces for indentation
  • A naming convention for variables and functions
  • How much white space you are going to use

If you have trouble deciding, look at coding style guides for suggestions.

Python Coding Style Guide

Readability

Code is written for both computers and people to read. You want your code to communicate what it does. Remember, you won’t always be the person maintaining your code. You want your code to be readable and maintainable by your future self or another developer.

What can you do to make your code readable?

  • Pick a coding style guide for the language that you are using and follow it. By following it, you can focus on writing the code not formatting it.
  • Use meaningful naming conventions and comments. Check out How to Comment Your Code like a Pro.
  • Format and layout your code with white space.
  • Use tools to help manage your code. Tools like JSHint, Prettier, or W3C Validator

Whether you are working alone or on a team, using a coding style guide can help you be more productive as a developer. Remember, you aren’t writing code for the computer but for yourself and others.

DevTools Tips and More

What are browser dev tools?
Your web browser has a suite of developer tools. You can use these tools to analyze problems, edit CSS and debug issues with JavaScript.

DevTools Tips and More

Debugging can be a slow and challenging. If you use Chrome to develop, you may find that you can’t use the same tool in another browser. This can be frustrating when solving problems.

Can I DevTools?

Can I DevTools is a website by Pankaj Parashar that is similar to Can I use? It shows and compares dev tools. You can quickly see if a browser supports the dev tool you need.

More DevTools Tips

DevTools has many useful features and shortcuts. It is hard to learn them all. Start with DevTools Debugging Tips and Shortcuts to learn some of the useful features for debugging in Chrome, Firefox, Edge and Safari.

If you want to know how to do something in DevTools, check out DevToolsTips. You’ll find tips on how to empty the cache and do a hard reset, copy and elements style and debug unwanted scrollbars.

Browser DevTools Docs

Each browser has its own set of developer tools.

Managing User Experience Debit

What is UX Debt? Like technical debt, UX debt piles up over time. Each design decision that you make can affect the user experience. Do you create a great user experience or ship your product? If you’re on a tight deadline, shipping wins.

Managing User Experience Debt
Photo by Sarah Pflug from Burst

What are the types of UX Debt?

There are two types of UX Debt — Intentional and Unintentional. Intentional debt occurs when you don’t have time or the resources to build your product right. Unintentional debt occurs over time. Design decisions that worked yesterday may not work today. Your users have changed and your UI hasn’t.

How do you manage it?

User Experience debt becomes a problem when you ignore it. Like technical debt, you need to manage how you handle it.

1. Determine where UX debt exists.

You need to figure out what issues you need to fix. Common places to look for problems are:

  • User Interface. Your buttons, links and visual styles may be hard to understand.
  • Content or copy. Check your written text, labels and headlines. They may be using confusing or hard to understand language.
  • Interaction Design. Is it easy to move from one page to the next?
  • Consistency. Does your UI look the same? Your elements should look and behave the same way.

How do you identify it?

  • Ask your users.
  • Use and analyze your analytics.
  • Perform regular user testing.

2. Focus on fixing debt

Not all issues are the same. Some need to be fixed right way. Others can wait until you have time. Rank the issues so you know which ones need to be handled first.

3. Build time into your schedule

Plan to tackle the UX issues that you have identified. If you don’t add them to your development schedule, you’ll forget to address them.

Learn more about UX Debt

Getting started with CSS Math

Why do Math in CSS? Math functions in CSS can make your life easier. It makes reading the CSS easier. You can save time by avoid having to do the calculations yourself.

Getting Started with CSS
Photo By: Chenspec on Pixabay

Use mathematical expressions to calculate property values such as width or padding.

What type of Math functions can you use?

  • calc()
  • max()
  • min()
  • clamp()

These four Math functions are currently supported by all browsers.

calc()

The calc() function allows you to do basic math. Add, subtract, multiply and divide. You use it the calculate the value for different properties.

This example shows using calc() to calculate a width using subtraction:

.main-content {
  width: calc(100% - 20px);
}

Or you could use it to set the value for part of a property. For example:

.custom-el {
  margin: 10px calc(3em + 2px);
}

You can learn more about how to use this useful function from CSS-Tricks in A Complete Guide to calc().

max()

The max() function takes the largest value from a list of values and sets it to the property value. For example, you may want to set the width to be either 50% or 300px. It picks the value that happens to be larger depending on the viewport size.

.custom-box {
  width: max(50%, 300px);
}

min()

The min() function does the opposite of max(). It takes the smallest value and sets it to the property value. In the custom-box example, you could:

.custom-box {
  width: min(50%, 300px);
}

In this case, the custom-box could not get bigger than 300px.

clamp()

The clamp() function takes three parameters. A minimum value, preferred value and maximum value. It selects a middle value with between the smallest and largest values. clamp() uses that value and sets it to the property.

For example, you can use it for setting a font size that grows with the size of the viewport. Your font won’t get smaller or larger than the specified values. By using clamp(), you can achieve the same effect as the code in Fluid Typography with less code.

Learn more about using Math in CSS

7 Tips to Make Your Website More Engaging

How do you make your website more engaging? A website that engages people means they spend more time on it. They read, search, interact or buy products from you. People come back for more and share with others.

7 Tips to Make Your Website More Engaging
Photo by Sarah Pflug from Burst

Use these steps to help make your website more engaging.

1. Mix up the layout

Are you using the same layout for every page? If you are, you may want to use different designs. One design for your blog and another one for your store. By mixing it up, your visitors don’t feel like they are visiting the same page over and over again.

2. Use White Space

White Space or “negative space” is the space that surrounds elements. Add extra space between different elements. It helps users scan your design. White Space can increase readability and legibility. Too much stuff on a page can make it feel cluttered. It helps to guide users and gives the content breathing room.

3. Choose a simple color palette

How many colors are you using? Too many colors or clashing colors can distract your users. It makes your site hard to use. Use these 7 Rules for Choosing A Website Color Scheme and How to Pick Colors for Better Readability.

4. Pick simple and easy to read fonts

Fonts have personality. Some are simple. Others are very decorative. Some fonts work better for print. Pick fonts that work well with your brand. Make sure it works well on mobile devices.

5. Make your site easy to navigate

If your users can’t find what they are looking for, they’ll leave your website. Your navigation structure helps people to learn how to use your website. It describes how web pages are organized and connected to one another. By combining different types of web navigation, you can make your site easier to navigate. Learn how to improve your website with navigation.

6. Use clear Call To Actions

Make your Call To Action stand out from the rest of the page. Use copy that is clear and distinct. You want your visitors to understand what you want them to do.

7. Make your content easy to read

Most people scan your content before reading it. They are deciding if they should spend the time to read. Use the following techniques to improve readability of your content:

  • Consider Accessible Font Sizing. Not all font sizes are readable to everyone. You want the user to choose the font size that works for them.
  • Use headings, bullet points, short paragraphs and white space to break up the copy. You don’t want your visitors to be overwhelmed by a wall of text.
  • Use a mix of short and longer paragraphs. You can use paragraphs that are one sentence long.

By using these techniques, you can improve how your visitors respond to your website.