Building quality APIs is essential to facilitating equally quality web app. Think of this as a waiter in a restaurant having terrible habits. This will taint restaurant’s overall quality will be affected. We don’t want that, right? This series will look at some tips and best practices you should follow when building and consuming APIs.

Understanding the purpose of the API can help you get a good idea of the kind of data the API collects as input and the kind of data it gives out. There are different formats of data used with APIs. Some examples are JSON, YAML, e.t.c.

Understand API purpose

An API should be easy to read as this will make it easy to understand. Readability includes API definitions and response messages. Writing readable code also applies to software development as this will make it easier for further development and collaboration with other developers. Use readable response messages that include both error and success messages clearly stated out using standard error codes to give more understanding to the consumers.

Is the API easily readable?

Documentation is essential to API development. It gives the users a firmer understanding of the API endpoints along with their functions, the API data types, and its overall workflow.

Does the API have good documentation?

Writing tests can not be overemphasized as it is also essential to building quality software. It helps solve security issues, resolve errors in the codebase, and test API workflow.

Did you run tests on your API

Implementing rate limiting on your API is essential in managing resources. This forces developers to take a more optimized approach to use your APIs. You can also build paid version of your API by increasing rate limits for paid customers.

Rate limiting

Building quality APIs is essential to facilitating equally quality software. This article will discuss the best practices for building and consuming APIs.

computerscience

Computer Science

API Best Practices You Should Know

The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.But we can use alt differently. For example, use the title text as a basis and add more details about the image. For example, if you have a product card with a title and an image, you can use alt to describe the external characteristics of the product.

alt-text  Is Not a Duplicate Title

Developers often use anchor link to mark up interactive elements. The idea behind this is override the default link using JS and they will get button behavior.At first glance, this makes sense. But there is a problem. Browsers still think it’s a link & right clicking it open the context menu of such an element, with options: “Open in a new tab”, “Open in a new window”, & “Open in a private window”.When users see those items, they think that it is a link and they can open it, for example, in a new tab. When they do this, they get an unexpected result – they see the top of the page.

button type="button" Or href="#"

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.Therefore, it is better to use margin if you need IE11 support, or column-gap to set space between items.

justify-content: space-between  Causes Unexpected Markup

There is a problem that is especially common with vertical positioning. This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items & they will go beyond its borders and may not be displayed correctly.For example a modal window with a cross button beyond the window, which makes it unavailable. You need to zoom out of the page to close it.It can be solved by using the margin property set to auto. Inside a flex container, the auto value will be calculated based on the size of the container and its flex items.

justify-content  and  align-items  Lose Items

I think many designers and developers like to create animations. Yes, those interfaces look more interesting. But we have to be more careful.In WCAG 2.2, there is section 2.3.3, which says that some users may experience dizziness, nausea, and headaches when they see animations that trigger moving elements.Thus, if we create this type of animation, we should use the prefers-reduced-motion media feature. In this case, if people disable animations in the operating system, they won’t be displayed, and if they don’t do this, the animations will work. And we are going to take care of our users.

Take Care of Those Users Who May Experience Dizziness, Nausea, and Headaches

Good practices for HTML and CSS are hard to find. Read about 5 cases where you can create a user-friendly, or clumsy, interface using only HTML and CSS.

API Best Practices You Should Know

5 HTML and CSS Good Practices - DZone Web Dev

sunny prakash