Tag Archives: web developer

3 Techniques that Minimize Downtime

downtime

Since users keep on expecting a stable and reliable service, many web developers and system admin attempt to create infrastructures that are more reliable and able to minimize downtime. In fact, minimizing downtime is necessary for increasing customer satisfaction and decreasing support request. Below, we provide you with three areas that are crucial when it comes to downtime and we also offer some improvements that you can apply on them. Check this out!

  1. Monitoring and Alerts

Nothing works better than properly monitoring your infrastructure. In this way, you can discover any issues before they really appear and affect your customers.  Furthermore, monitoring infrastructure will also aggregate and retain a record of stats such as application performance metrics, and system resource utilization. So, the main purpose is to look for anything weird.

Usually a client is interacted on each host that collects metrics for monitoring, and then reports back to a central server. These metrics will be stored in a database and available for many services like searching, alerting, and graphing. Fortunately, there is software that can help you monitor your infrastructure, such as:

  • Graphite

Graphite provides an API that has the support of dozens of applications and programming languages.  On the other hand, metrics are pushed, stored, and graphed in the central Graphite installation.

  • Prometheus

To pull data from a variety of community supported and official clients, you can use Prometheus. It has an alerting system that is built-in and is highly scale able. Besides, it comes with client libraries for several programming languages.

  1. Software Deployment Improvement

Believe it or not, software deployment strategies are one area that plays an important role on your downtime. Unfortunately, many people often overlook it.

Bear in mind that having a complex deployment process will result in the production environment leaving the development environment behind. This can cause any risky software releases since every deployment is a much larger set of changes that naturally brings a much higher risk of problem arising. No wonder this process can easily lead to numerous bugs that can slow down development and cause the unavailability of resources.

Therefore, the best solution for this situation is to set up some up-front planning. In order to sync your production environment with your development environment, you have to figure out a strategy that allows you to automate the workflow, code integration, deployment, and testing.

Here are some best practices regarding the continuous integration and delivery (CI/CD) and testing the software that help you start automating deployments:

  • Maintaining a Single Repository

To make sure that every person on the development team works on the same code and can test their changes easily, you can maintain a single repository.

  • Automating Testing and Build Processes

Don’t forget to automate your development and testing as this will simplify deployment in an environment similar to the final use-case. Besides, you will find it helpful, especially when debugging platform-specific issues.

  1. Implementing High Availability

Another strategy that you can apply to minimize downtime is to use the concept of high availability on the infrastructure which includes principles used in designing resilient and redundant systems.

In this case, the system should be able to detect and analyze the health of the system; it has to know precisely where the error is located. Furthermore, the system must be able to redirect traffic as this can help minimize downtime through reducing interruption.

In order to upgrade to a highly available infrastructure, you have to move to multiple web servers and a load balancer from a single server. The load balancer will show you regular health checks on web servers and routes traffic from those servers that are failing.

Moreover, you can also add resilience and redundancy to increase database resilience using database replication; surely, you will find different database models on different configurations of replication. However, many believe that group replication is the most interesting one, as you can read and write operations on a redundant cluster of servers. In this way, you can detect any failing servers and routing done to prevent downtime.

In conclusion, there are three areas that can lead you to less downtime. If you truly put attention on them, you will have happier clients and of course this will lead you to more revenue.

Practical Guidelines for Using Background Videos on Your Website

When to use background videos on your websites

Nowadays, as a web developer you can use background videos as a great way to improve your website’s look. Moreover, it will also make your videos more enjoyable for visitors. Why? Because good videos can tell the story of a business which each business will surely have their own story that can be told better. So, now you are interested in making background videos, but don’t know how to start? Let us guide you! All you have to do is just keep scrolling and reading.

Best Practices for Adding Background Video

The best reason why you use a background video is because when you use it, your website will look better. Therefore, it is tempting to use any video that looks shiny and interesting without considering its impact. Even though those shiny things may contribute you a lack of minimal advantage, in most cases, they are also the biggest factors that contribute you a slower site. Therefore, trading a static image for video must be worth it.

Below are some things to consider:

  • Select a short length video that loads quickly.
  • Don’t use sound. Sound adds the file size and gives little value.
  • Use a placeholder. This is used to anticipate if the video is stopped or can’t be played.
  • Replace the video with an image for the mobile experience. You can hide the background video element at mobile breakpoints to reveal the background image. Besides, it will give the best experience for the mobile visitor.

When You Shouldn’t Use a Background Video

For some reasons, a background video is good at grabbing attention. However, instead of focusing on your copy, a background video might take up all the attention on them.

On the other hand, if you are too aggressive with your background video, it will overpower the important content. When you want to present complex ideas, like sales-related content to read, videos can be distracting. In terms of explaining, words are still the best. So, don’t run the risk of distracting or losing visitors with a video.

Choose Useful Over Complex

When we are deciding whether or not to add an element, you have to think about the mistakes that it might cause. For instance, it’s easy to make the mistake of thinking you’ll enhance an experience by sprinkling in some fun animations or by hiding and revealing elements, but you might actually be adding an obstacle.

So, the simplest way to keep thing simple is to make it as simple as possible. Your background video should reinforce the content message, eliminate barriers, and complement the rest of your site’s content. In other words, it should bring out the aesthetic element of the website, not stand alone or get in the way.

The Smarts behind Adding a Background Video

A best-case scenario is when background videos supplement or enhance the CTA.

  • Make It Personal

Generally, people want to see other people. It will be easier for users to decide whether they have to take an action, like signing up, making a purchase, or getting in touch once they see a person. Therefore, adding a short video will allow people to visualize themselves working with you.

  • Make it Pop

Most of the case, people want to have text layered on top of the background video, so make sure it’s easy to read throughout the entire video loop. Furthermore, you can aim for a strong light/dark contrast between the background video on the copy.

You can also apply a solid, monochromatic filter on top of the video to ensure full, legible contrast. This technique will not only make this look super professional, but the color contrast also makes the text, form, and landing page CTA look impressive. Other method that you can also try is by including a text shadow, or a semi-opaque color block behind the text.

  • Keep It Short

It is important to keep the video short. Therefore, it is better to make a video with the length no longer than 10 seconds, but make sure that this short, looping video should be enough to get the point across without impacting the load time.

Sometimes, creating a loop can be challenging, the loop will appear out of place or incomplete if the video is too short. On the other hand, if the video is too long, your visitors can easily click away from the site or to another page before the video’s had a chance to do a great thing.

If you can’t produce your own video, you can search for other places to get stock video clip. Double check the copyrights associated with any video before you use it. However, we would recommend you to always produce your own video to make it more personal.

  • Make It Unstoppable

Be confident, as long as you give a good quality and on brand video content, your visitors will likely press play or pause. The best way that you can offer is to play the background videos automatically. This will surely grab the visitor’s attention and keep them interested, as soon as they see the video element.

Don’t Forget the Analytics

It’s important to run a test, such as an A/B test to compare how your page performs with a background video compared with a static image. Just to be safe, you can start by pushing a small portion of your traffic towards the page. However, most usability specialists lean on experience, gut, and personal opinion when deciding what design brings customers satisfaction. This method is, of course, not right as you can use data as a great way to know what your customers actually think, as opposed to what they say they think.

So, have you tried background video in your website? It’s worth trying the method that will surely make your site look more sophisticated and smart. Good Luck!

Customizing the Error Page for Deactivated or Archived WordPress Sites

When someone visits a site by default, that means they are deactivated, then they will see a pretty dull default screen, informing that the site has been suspended. However, the problem comes when you want to customize, or add some custom content. Therefore, as a solution, this article will show you the exact way to do that. Below are some of the ways:

Suspending Sites in Your Network – the Options

Many web developers may think that terminology around deleting and suspending sites in a network is very confusing, since it’s not clear what each one means and sometimes when you do one, the system will tell you that you’ve done another.

Below is a recap on the options for removing sites from your network.

Here’s a detail of the Multisite Sites screen, which you access by going to My Sites>Network Admin>Sites:

You can find four options for removing the site:

  • When your users signup for a site, you can deactivate reverse the activation step users. However, it can be reactivated any time, since it doesn’t permanently delete the site. Besides, both the front end and the site admin screens aren’t accessible.
  • It is important to mark a site as being archived to prevent other users from accessing it. The admin screens can be accessed but not the front end. Besides, you can archive a site easily at any time and it hasn’t been removed.
  • Once your site gets spam, your site will be marked as spam, not deleted. To make it available again, you can decide whether to unmark it as spam or delete it.
  • Delete the site, but be careful when deleting the site because you have to make sure that you are ready to delete it.

The Default Screen for Suspended Sites

When your site is removed, WordPress will show a default screen. Below are scenarios that you will see.

Deactivated Sites

Visitors can see a default screen if a site is deactivated and someone other than the (logged in) network admin visits it.

Archived Sites and Sites Marked as spam

You’ll get a different screen notification, when you mark a site as spam or archived.

I know that the screens may be too basic and simple. Therefore there is not much information or explanation about what’s meant by ‘no longer available’ or ‘archived or suspended’.

Creating a Page for Deactivated Sites

Creating a new page for displaying when someone visits a deactivated site is quite straightforward. You simply create a new file called blog-deleted.php and put it in your network’s wp-content folder. This file will then be used to display a custom page instead of the default page.

Note that this is in the network’s wp-content.php folder and so the same file will be used for any sites in your network that are deactivated. In other words, you have to create something generic, rather than something specific to one site in your network.

To avoid your site from using theme or calling any plugins or additional files, the page you create has to stand alone. As a solution, you need to include any styling in that file or call an external stylesheet, which you would put in a styles folder in your wp-content folder.

Remember to include the <head> section and the opening and closing <body> tags as these won’t be coming in via your themes’ header or footer files.

You can try this by using a very simple file with all the styling included in it or with a completely blank file if you’d like or you can copy some of the content from your theme files. For example, use the copied contents of  theme’s header.php file and edit those down significantly, then manually add the rest of the markup.

Here’s the content of  <head> section:

<?php
              // file for displaying an error message on deleted sites
?>
<!DOCTYPE html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php
              /*
               * Print the <title> tag based on what is being viewed.
               */
              global $page, $paged;
              wp_title( ‘|’, true, ‘right’ );
              // Add the blog name.
              bloginfo( ‘name’ );
?></title>
<style>
              .content {
                             width:500px;
                             height:500px;
                             margin:0 auto;
                             background:#999;
                             position:absolute;
                             left:50%;
                             top:50%;
                             margin-left:-250px;
                             margin-top:-250px;
                             padding: 10px;
              }
              .content p {
                             position: relative;
                             top: 50%;
                             transform: translateY(-50%);
                             text-align: center;
                             font-size: 18px;
                             font-family: ‘Helvetica Neue’, Verdana, sans-serif;
              }
              a:link,
              a:visited {
                             color: #fff;
                             text-decoration: underline;
              }
              a:hover,
              a:active {
                             color: #fff;
                             text-decoration: none;
              }
</style>
</head>

 

You can find some metadata and styling from the example above.

Now for the <body>:

<body <?php body_class(); ?>>
       <section class=”content”>
 
              <?php _e( ‘<p>This blog has been deleted, sorry! To create your own site, please visit <a href=”‘ . network_site_url() . ‘”>The Main Network Site</a>.’, ‘compass’ ); ?>
 
       </section>
</body>

 

The code above is just an element for the content, with a paragraph inside it and some text, which is translatable. If your network allows user sign-ups, you might need to include a link to the main site. If this site has been replaced, you might need to link to a different site or to a page on your main site explaining your policy for deleting sites, or wherever you want.

So, now the result will be like:

Isn’t it pretty? Now, you can add some different styling colors and maybe a headline. Furthermore, it is also possible to replace the default page for deleted sites and add anything you want to.

Creating a Page for Archived Sites

You can also create a custom page for sites which have been archived or marked as spam and you need to create another file also in your wp-content folder. This is called blog-suspended.php. file, but with a slightly different text. Here’s the code:

<?php
              // file for displaying an error message on deleted sites
?>
<!DOCTYPE html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php
              /*
               * Print the <title> tag based on what is being viewed.
               */
              global $page, $paged;
              wp_title( ‘|’, true, ‘right’ );
              // Add the blog name.
              bloginfo( ‘name’ );
?></title>
<style>
              .content {
                             width:500px;
                             height:500px;
                             margin:0 auto;
                             background:#999;
                             position:absolute;
                             left:50%;
                             top:50%;
                             margin-left:-250px;
                             margin-top:-250px;
                             padding: 10px;
              }
              .content p {
                             position: relative;
                             top: 50%;
                             transform: translateY(-50%);
                             text-align: center;
                             font-size: 18px;
                             font-family: ‘Helvetica Neue’, Verdana, sans-serif;
              }
              a:link,
              a:visited {
                             color: #fff;
                             text-decoration: underline;
              }
              a:hover,
              a:active {
                             color: #fff;
                             text-decoration: none;
              }
</style>
</head>
<body <?php body_class(); ?>>
       <section class=”content”>
 
              <?php _e( ‘<p>This blog has been suspended, sorry! To create your own site, please visit <a href=”‘ . network_site_url() . ‘”>The Main Network Site</a>.’, ‘compass’ ); ?>
 
       </section>
</body>

 

The page below is what you will get when you visit an archived site:

 

By this, our visitor will get more information and a link to the main site which you can replace it with whatever you want.

Hopefully, by following the steps above, you can quickly and easily replace the default pages for archived, suspended or deleted sites. As a result, visitors will get more information from the default screens which will give them a link to your main site. This will prevent users from just leaving your network entirely.