Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Make Your Own UI Pattern Library

By

On May 31, 2023

In Design, Web Development

What are User Interface Design Patterns? A pattern is a plan or model for making something. In software development, patterns provide solutions to specific design problems. Buttons tell people to do something. Download, Buy, Continue or Save.

Make Your Own UI Library

Photo by Susan Q Yin on Unsplash

When you design a website or web app, you’ll need a navigation bar, button, tabs, forms and more. Common design patterns help to make your design easy to use and user friendly.

What is a UI Pattern Library?

A UI Pattern Library is a collection of user interface components or patterns. It helps you to define how each component looks and works. Your pattern library helps to ensure a consistent look and feel across your products. You want to add solutions so you don’t have to solve the same design problem over and over again. Or search your app for the pattern that you need to use.

What goes in it?

You’ll want to define your user interface. How you create buttons, navigation bars, layouts, alerts and notifications. Include guidelines on how and when to use them. You may want to include code snippets so you don’t have to rebuild a component from scratch. Also include color palettes, typography and grid layouts.

Where to find Design Pattern Libraries and Resources?

Build Your Own

When you build your own pattern library, get designers and developers involved. A pattern library is a collaborative project. Both your designers and developers must work together in creating and maintaining it.

  • Decide on what to name things The team needs to decide what to call a component. A shared naming convention prevents communication problems.
  • Use a ticket system to track updates Your design library has to be updated and maintained. A ticket system makes it easy to track changes. You can create an approval system for requests.
  • Audit your library Your library can quickly become out of date. Remove old components, templates and no longer used patterns. Plan to audit your library at least once a year.

JavaScript Debugging Tips

By

On April 30, 2023

In Miscellaneous

Debugging code is a challenging task. When your code doesn’t work, it can be challenge to find the cause of the problem. You may do things like comment out the code or make a small change to see if that fixes the issue. What do you do when these tricks don’t help you find the bug?

JavaScript Debugging Tips

Photo by Mitchell Dunn from Burst

If you are like many JavaScript developers, you start with console.log to find the problems in your code.

When to use console.log()

Console.log() is simple and easy to use debugging tool. You can have it display a message so you know that the code worked. Or you can use variables and expressions to determine if you are getting the right values.

When to use debugger

What do you do if the problem is hard to find? You can use a debugging tool. A debugging tool is a software tool that helps you identify coding errors. You can step through your code line by line to see how it is working. You can stop executing the code at certain points. It can help you to read error messages and handle exceptions.

Your browser has powerful debugging tools include the console.log. Each browser is a bit different on the development tools that it offers. Learn more about the basic functions of your browser’s development tools.

Tips for debugging JavaScript

  1. Start with the console.log(). You can always switch to using other debugging methods if the console.log doesn’t work for you.
  2. Read the error message. Error messages may include helpful details. Like the line number where the error occurred, type of error and a brief description.
  3. Use Breakpoints. Breakpoints allow you to pause your code at a specific line. You can step through your code line by line and see how it is working.
  4. Add the debugger statement in your code. It acts like a breakpoint in your code. When the code reaches this point, it pauses at debugger. If no debugger functionality is available, your browser ignores this statement.
  5. Handle Exceptions. Exceptions are errors that when your code is executing. They can occur when you have syntax, logic or runtime errors. Make sure you are handling exceptions. Exceptions can help you to identify and resolve issues in your code.

Debugging like coding takes practice. Use this tips to help you get better at finding issues in your code. If you still can’t find it, take a break. Walking away from the problem sometime help. So can talking to others also helps.

Read more on debugging

7 Tips for Commenting Your Code

By

On March 31, 2023

In Miscellaneous

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

By

On February 28, 2023

In Design, UX, Writing

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.

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

By

On January 31, 2023

In CSS, Web Development

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.

Page 2 of 51

Previous

Next

Powered by WordPress & Theme by Anders Norén