Tag Archives: development

Best Practices for API Error Handling

Best-Practices-for-API-Error-Handling

As a web developer, we all don’t want to see Error codes in an API response, neither do you. When it happens to you, it can mean one of two things — there was something wrong in your request or your handling that the API simply couldn’t parse the passed data, or the API itself has so many problems. In either situation, traffic comes to a sudden end, and we start trying to discover the cause and solution for that.

Although being unpleasant, errors, whether in code form or simple error response, are incredibly useful. Error codes are probably the most useful diagnostic element in the API space.

Today, we’re going to discuss about the importance and the usefulness of error responses and handling approaches. There are some common error code classifications the average user will encounter, as well as some examples of these codes in action that you need to know.

The Value of Error Codes
As explained above, error codes are surprisingly, but incredibly useful. Error codes in the response stage of an API are essential in communicating failure from a developer to a user. This stage is a direct communication between client and API. It’s considered as the most important step towards informing the user of a failure, as well as boosting the error resolution process.

An error comes randomly and sometimes it’s beyond our knowledge. That’s why error responses are the only constant, consistent communication that we, as the user, can rely on when an error has occurred. Error codes can both clarify the situation, as well as communicate the intended functionality.

For example, an error code such as “401 Unauthorized – Please Pass Token.” You understand the point of failure in that response, especially that the user is unauthorized. However, you also figure out the intended functionality, which means that the API requires a token, and that token must be passed as part of the request in order to obtain authorization.

With a simple error code and resolution explanation, you have already identified the cause of the error, as well as the intended functionality and method to fix that error. It is very useful, especially for the amount of data that is actually returned.

HTTP Status Codes
Before we deeply discuss about error codes and what makes a code good, we need to sort out the HTTP Status Codes format. These codes are the most frequent status codes that the average user will encounter, not only in terms of APIs but also in terms of general internet usage. Although there are other protocols and have their own system of codes, the HTTP Status Codes dominate API communication, and vendor-specific codes tend to be derived from these ranges.

  • 1XX – Informational

The 1XX range has two basic functionalities. First, in the transfer of information concerning the protocol state of the connected devices — for example, 101 Switching Protocols is a status code noting that the client has requested a protocol change from the server, and that the request has been approved. The 1XX range also elucidates the state of the initial request. For example, 100 Continue, notes that a server has received request headers from a client, and that the server is waiting for the request body.

  • 2XX – Success

The 2XX range notes a range of successes in communication, and combines several responses into specific codes. The first three status codes excellently determine this range, like 200 OK means that a GET or POST request was successful, 201 Created indicates that a request has been brought to completion and a new resource has been created for the client, and 202 Accepted shows that the request has been accepted, and that processing has begun.

  • 3XX – Redirection

The 3XX range is all about the status of the resource or endpoint. When this kind of status code is sent, it confirms that the server is still accepting communication, but that the contacted point is not the accurate point of entry into the system. 301 Moved Permanently denotes that the client request did reach the correct system, but this request and all future requests should be managed by a different URI. This is very convenient both in subdomains and in moving a resource from one server to another.

  • 4XX – Client Error

The 4XX series of error codes is probably the most well-known because of the famous 404 Not Found status, which is a prominent marker for URLs and URIs that are formed in the wrong way. However, other more useful status codes for APIs are in this range.

414 URI Too Long is a common status code, indicating that the data pushed through in a GET request is too long, and should be changed into a POST request. Another common code is 429 Too many Requests, which is used for rate limiting to note a client is attempting too many requests simultaneously that their traffic is being rejected.

  • 5XX – Server Error

The 5XX range is reserved for error codes notably related to the server functionality. Whereas the 4XX range is the client’s responsibility (meaning that it is a client failure), the 5XX range explicitly notes failures with the server. Error codes such as 502 Bad Gateway, which marks the upstream server, has failed and that the current server is a gateway, further reveal server functionality as a method of showing where failure is transpiring.

Making a Good Error Code
With a strongly-built comprehension of HTTP Status Codes, we can start analyzing what actually makes for a good error code, and what makes for a bad error code. Quality error codes not only convey what went wrong, but also why it went wrong.

Excessively obscure error codes are very inconvenient. Imagine that you are trying to make a GET request to an API that manages digital music inventory. You’ve submitted your request to an API that usually accepts your traffic, you’ve passed the correct authorization and authentication credentials, and you think the server is ready to respond.

You send your data, and receive this kind of error code: 400 Bad Request. Without additional data and without more information, what does this mean? It’s in the 4XX range, so you know the problem was on the client side, but it doesn’t explain and solve anything, other than “bad request.”

This explains that a “helpful” error code is not as helpful as it should be. We could easily make that same response helpful and clear with less effort. Good error codes must pass three essential criteria in order to be functional, such as:

  • An HTTP Status Code, so that the source and realm of the problem can be confirmed with ease;
  • An Internal Reference IDfor documentation-specific notation of errors. In some cases, this can substitute the HTTP Status Code, as long as the internal reference sheet inserts the HTTP Status Code scheme or similar reference material.
  • Human readable messagesthat conclude the context, cause, and solution for the existing error.

From this discussion, we can conclude that error codes are useful if inserted with messages conveying what goes wrong and why it goes wrong, topped off with the human readable messages emphasizing the solution that we can take and do to handle it. That way, we can effortlessly handle it when future errors occur spontaneously.

Bootstrap 4 Alpha 6 Major Components in Flexbox

Bootstrap-4-Alpha-6

Alpha 6 has just launched and it becomes the biggest ships to date.  Hence, in this article we will describe its grid system and major components in flexbox. If you are web developers who are currently working on WordPress, this article is for you. Discover what’s new with Bootstrap 4 Alpha 6, here!

Embracing Flexbox
As bootstrap is now flexbox by default, you can control your grid system and core components and provide unparalleled flexibility. However, it may be dropping IE9 support yet brings significant improvements to component layout, alignment, and sizing.

If you have no idea about Flexbox, here are some benefits that you can have when applying Bootstrap 4:

  • No more HTML white space or broken table-style rendering
  • Auto margins for easy spacing
  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
  • Equal height and equal; width cards
  • Utility classes for easily changing display, direction, alignment, and more.
  • Justified navigation and button groups
  • Vertical and horizontal centering without hardcoding values with translate or margin

In fact, almost every component now takes advantage of flexbox. This is because less reliance on clearfix, more control over Dom, and visual order, and fewer bugs. Even, Carousels, a more complex component has used Flexbox in some areas.

Responsive Utilities and the Great Infix
Among so many advantages that Alpha 6 offered, they also made two important changes to their naming scheme.

  • First, we’ve dropped the –xs infix from our lowest (extra small) breakpoint. However, xs isn’t a responsive breakpoint just like sm, md, lg, and xl. This is because it doesn’t start applying styles at a min-width and up. It can be applied to everything as there’s no bounding @media query.
  • Second, to better articulate their property value pairings, we’ve renamed several classes. Instead of pull, we use float. You can start with the property name, instead of creating new names for the various flexbox properties.

Combine them together and you’ll get updated class, such as .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. With these classes, you can have immense power and customization to folks building with Boothstrap.

More Grid Improvements
You will also have more grid improvements. By adding responsive auto sizing columns, more container padding options, and add any number of .col-* classes, the result will automatically be equal in width.

To remove gutters from grid rows and their columns, you can use the .no-gutters modifier.

Updated Navbar
If you find that the Alpha 5 navbar still needs more improvement, you’ll see that the Alpha 6 is done perfectly. The navbar has been rewritten and it provides better built-in responsive behaviors and improved layout customization.

Here are some of the lists of the updates:

  • The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customization. It also includes easy modifiers for absolutely aligning it to the top right or top left.
  • Navbar navs no longer require the .nav base class. While it provided a starting point, these shared styles often got in the way of navbar behaviors. Now it’s just .navbar-nav and utilities for alignment.
  • Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
  • The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within. This allows us to provide better responsive behavior with just one class change.

How to Synchronize WordPress Live and Development Databases

How-to-Synchronize-WordPress-Live-and-Development-Databases

As a web developer, using real content is considerably easier when developing WordPress themes. However, in the process you will encounter some unexpected situations, especially when adding pages, posts, media and comments. Hence, the only way to improve your workflow is by automatically synchronizing your content.

Synchronization Snags

You may think that database replication can be more challenging than you expect. But, you can learn from several reasons why few coders can survive in this dreamland.

Data Differences

There are various configuration settings in WordPress database. Some of them are the domain name and paths which are used throughout posts and asset references. To avoid any undesired consequences, do not import this information into a local database. Even though, the image and link URLs seems like working but it could take you back to the live server. To add to the complications, WordPress serializes some data. It can be difficult to parse and change those values.

Multiple Installations

If you are working alone on a local installation and uploading to a single live server, synchronization becomes less necessary and complicated compare to working with teams with multiple developers, staging servers, or more than one production server.

Databases can be Large

You’re unlikely to want or need numerous megabytes of post data, even if fast incremental synchronization were implemented.

It’s Not Just Databases

In the local file system, WordPress stores uploaded images and other media. Those need to be downloaded and the database references must be updated accordingly. Besides, you also need to make sure that theme and plugin files are synchronized, enabled, and configured appropriately. This will help avoiding certain plugins, e.g. multi-site, caching, etc enabled.

Is Synchronization Possible?

It will be difficult to find one option that can fit to all sizes as it will depend on your circumstances. For instance, you may want one-way replication from live to development servers. However, you can choose one among so many options below:

WP Migrate DB Pro

Many people find that the WP Migrate Pro WordPress plugin is the best-known and easiest choice from Delicious Brains. It is available in a free edition.

WP Sync DB

WP Sync DB is an open-source fork of WP Migrate DB.

VersionPress

VersionPress is able to manage database merging. It is a Git-based version control plugin for WordPress. This product seems promising even though it is in development process.

WPSiteSync for Content

WPSiteSync permits real-time synchronization of pages, posts and other data. It is also offering free and commercial editions.

Database Sync

Even though, Database Sync is not compatible with multi-site installations but it may be enough for some developers.

WordPress Importer

WordPress Importer is suitable for those who prefer a safer, more manual process, exports posts, pages, comments, categories, tags, authors and other data to an XML file that can be imported into another installation.

SyncDB

SyncDB is a bash script. It synchronizes local and remote WordPress databases.

WP Staging

The WordPress WP Staging plugin can clone data and files from live to development or staging servers.

WordPress GitHub Sync

The WordPress GitHub Sync plugin allows you to synchronize content allows you synchronize content from a GitHub repository or Jekyll-created website.