database

Customizing the Error Page for Deactivated or Archived WordPress Sites

Posted on by Mario

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.

Ways to Make your Apps Serverless

Posted on by Mario

How-to-make-your-apps-serverless_ywf

The rise of a new buzzword has made many people think that servers no longer exist, but the fact is, a server is still needed somewhere. This is why the “serverless” term may mislead many people. What makes “serverless” term is that you can successfully build your applications without deploying code to your own servers. Therefore, as a web developer your dream of spending less time worrying about servers and more time for building software will come true.

Serverless in Action

When your site serves many readers a month, it means that the traffic that comes to our scale is significant and sudden, as articles can go viral at any moment. As a result, you may have trouble keeping up and our engineers are spending too much time on operations. Therefore, as a solution, you can take a look at serverless platforms which offer you a complete success of your projects, such as more maintainable, easier to operate, and cheaper.

Amazon Web Services

Serverless has a close relationship with Amazon Web Services (AWS). In fact, AWS is the answer for one critical question; where does the custom code go? The concept of using third-party services and platform is not new, with database, you can push notifications, caching, and many other layers of an application have all been available ‘as a service’ for a while, but they sat on the edge of your application. Therefore, a server is still needed as a place for core application code, which is usually a server responding to external requests. Through AWS Lambda and AWS API Gateway, you can deploy custom application code without the overhead of managing your own servers.

AWS Lambda

Applying Lambda is quite simple, you only need to write code and upload it. Lambda is Amazon’s version of functions-as-a-service (FaaS). Then, as a response to events including HTTP requests, S3 uploads, DynamoDB updates, Kinesis streams, and many others, AWS will run the code. Since scaling happens automatically, you are only charged when your functions are running.

None of these features are strictly a requirement for serverless, but AWS has certainly set the bar high. Any serverless platform will likely to have a stateless FaaS offering with very granular billing because of the precedent set by AWS.

Other Platforms

Right now, Amazon may still be the first competitor in the arena, but other providers are showing up quickly. All the major cloud platforms have recently launched services targeted at serverless applications. Here are a few of them:

  • Google Cloud Functions: Still in alpha, having almost the same functionality to AWS Lambda and can also be triggered by HTTP requests.
  • Azure Functions: This platform is still relatively new and similar to Lambda. Other benefits are Azure has a pleasant UI and makes it easy to expose functions over HTTP without needing a separate routing service.
  • IBM OpenWhisk: This is the only open source platform. You will want to investigate this, if you are interested in deploying your own serverless platform or just curious with how they work under the hood.

Challenges

If you think serverless is the solution of every problem, you might be wrong, for serverless does not come without its challenges. In fact, the community is still discovering best practices, especially when it comes to operations as the space is new and as such. In fact, this platform still requires tools for deploying, maintaining and monitoring our applications. However, many believe that there will be many new startups’ third party services targeted at solving these problems for serverless developers.

Tools

With lots of open source community, it is possible to manually build and deploy serverless applications yourself, but we suggest that you use the existed frameworks, since a few endpoints, building, packaging, zipping, uploading and versioning all become difficult to manage. Here are some frameworks that you might want to consider:

  • Serverless framework: This framework has a robust plugin system and integrates with many community developed plugins with many community developed plugins. Its stated goal is to eventually support deployment to any of the major cloud platforms.
  • Apex: Even though it is written in Go, it supports Python, Node.js and Java runtime languages. Furthermore, the inventor of this tool, TJ Holowaychuk, is a well-known fixture in the open source community and has a great sense of what makes for good developer tools.
  • Chalice: it is the only framework created and maintained by AWS and currently supports Python.
  • Shep: If you are looking for framework that can be used for all our production services, Bustles’ own open source framework can be a great choice. It focuses on the Node.js runtime and strives to be opinionated about how you should structure, build, and deploy applications.

 It seems that in 2017 “serverless” technology will keep growing and you will see rapid adoption from startups to fortune 500 companies. This is because many developers have realized that the serverless movement is the best way to build better software.

Json-api-normalizer: Why JSON API and Redux Work Best When Used Together

Posted on by Mario

As a web developer, we have to manage the data needed for every application we work on. There are problems when doing so, such as:

  1. Fetch data from the back end.
  2. Store it somewhere locally in the front-end application.
  3. Retrieve the data from the local store and format it as needed by the specific view or screen.

In this article, we are going to discuss about the data usage from JSON, the JSON API and GraphQL back ends, and from that, we can learn the practical way on how to manage front-end application data. As for the real use, let’s imagine that we have carried out a survey that asks the same questions of many users. After each user has given their answers, other users can comment on them if wanted to. Our web app will perform a request to the back end, store the gathered data in the local store and render the content on the page. In order to make it stay simple, we will leave out the answer-creation flow.

Redux Best Practices

What makes Redux the best is that it is changeable no matter what kind of API you consume. It doesn’t matter whether you change your API from JSON to JSON API or even GraphQL and back during development, as long as you keep your data model, so it will not affect the implementation of your state management. Below is the explanation on the best practice using Redux:

  1. Keep Data Flat in the Redux Store

First, here’s the data model:

 

 

Based on the picture above, we have a question data object that might have many post objects. It is possible that each post might have many comment objects. Each post and comment has respectively one author.

Let’s say we have a back end that returns a specific JSON response. It is possible that it would have a carefully nested structure. If you store your data in the same way you do in the store, you will face many problems after that, like, for instance, you might store the same object many times like this:

{

  “text”: “My Post”,

  “author”: {

    “name”: “Yury”,

    “avatar”: “avatar1.png”

  },

  “comments”: [

    {

      “text”: “Awesome Comment”,

      “author”: {

            “name”: “Yury”,

        “avatar”: “avatar1.png”

      }

    }

  ]

}

In the example above, it indicates that we store the same Author object in several places, which is bad, because not only does it need more memory but it also has negative side effects. You would have to pass the whole state and update all instances of the same object especially if somebody changed the user’s avatar in the back end.

To prevent something like that from happening, we can store the data in a flattened structure. This way, each object would be stored only once and would be easily accessible.

{

  “post”: [{

    “id”: 1,

    “text”: “My Post”,

    “author”: { “id”: 1 },

    “comments”: [ { “id”: 1 } ]

  }],

  “comment”: [{

    “id”: 1,

    “text”: “Awesome Comment”

  }],

  “author”: [{

    “name”: “Yury”,

    “avatar”: “avatar1.png”,

    “id”: 1

  }]

 }

  1. Store Collections as Maps Whenever Possible

After we have the data in a good flat structure, we can gradually accumulate the received data, in order for us to reuse it as a cache, to improve performance or for offline use. However, if we combine new data in the existing storage, we have to select only relevant data objects for the specific view. We can store the structure of each JSON document separately to find out which data objects were provided in a specific request to gain this. There is a list of data object IDs that we can use to gather the data from the storage.

Let’s say there is a list of friends of two different users, Alice and Bob. We will then perform two requests to gather the list and review the contents of our storage consequently. Let’s suppose that from the start the storage is empty.

/ALICE/FRIENDS RESPONSE

Here’s the User data object with an ID of 1 and a name, Mike, like this:

{

  “data”: [{

    “type”: “User”,

    “id”: “1”,

    “attributes”: {

      “name”: “Mike”

    }

  }]

}

/BOB/FRIENDS RESPONSE

This is another request that would return a User with the ID of 2 and Kevin as the name:

{

  “data”: [{

    “type”: “User”,

    “id”: “2”,

    “attributes”: {

      “name”: “Kevin”

    }

  }]

}

STORAGE STATE

This is what our storage state would look like:

{

  “users”: [

    {

      “id”: “1”,

      “name”: “Mike”

    },

    {

        “id”: “2”,

        “name”: “Kevin”

    }

  ]

}

STORAGE STATE WITH META DATA

In order to find out or distinguish which data objects in storage are relevant, we have to keep the structure of the JSON API document. With that focus, we can change it into this:

{

  “users”: [

    {

      “id”: “1”,

      “name”: “Mike”

    },

    {

        “id”: “2”,

        “name”: “Kevin”

    }

  ],

  “meta”: {

      “/alice/friends”: [

        {

          “type”: “User”,

          “id”: “1”

        }

      ],

      “/bob/friends”: [

        {

          “type”: “User”,

          “id”: “2”

        }

      ]

  }

}

With this, we can now read the meta data and gather all mentioned data objects. Now here’s the recap of the operations’ complexities:

As can be seen from the picture above, maps certainly works better than arrays because all operations have O(1) as the complexity instead of O(n). If we use a map instead of an array for the User data object, it would be like this:

STORAGE STATE REVISED

{

  “users”: {

      “1”: {

        “name”: “Mike”

      },

      “2”: {

        “name”: “Kevin”

      }

  },

  “meta”: {

      “/alice/friends”: [

        {

          “type”: “User”,

          “id”: “1”

        }

      ],

      “/bob/friends”: [

        {

          “type”: “User”,

           “id”: “2”

        }

      ]

  }

}

Now with this simple method, we can find a specific user by ID almost instantly.

Processing the Data and JSON API

There are many solutions to convert JSON documents to a Redux-friendly form. However, while there is no significant change within the application’s lifecycle, it will cause a failure if things are too dynamic, even though normalizing the function with the provision of a JSON document works great if your data model is known in advance.

Using GraphQL might be possible and interesting as well; however, if our APIs are being consumed by many third parties, we can’t adopt it.

JSON API and Redux

Redux and the JSON API work best together. The data provided by the JSON API in a flat structure by definition conforms nicely with Redux best practices. The data is typified in order to be naturally saved in Redux’s storage in a map with the format type → map of objects.

There are things to consider, though. First, it should be noted that storing the types of data objects “data” and “included” as two separate entitles in the Redux store can violate Redux best practices, as the same data objects would be stored more than once.

To solve these problems, we can use the main features of json-api-normalizer, such as:

  • Merge data and included fields, normalizing the data.
  • Collections are converted into maps in a form of a id=> object.
  • The response’s original structure is stored in a special meta

First, in order to solve problems with redundant structures and circular dependencies, the introduction of the distinction of data and included data objects in the JSON API specification is needed. Second, there is a constant update on data in Redux, although gradually, that can help with the performance improvement.

 Now that you know why JSON API works best with Redux, it can be concluded that this approach can assist us in prototyping a lot faster and flexible with changes to the data model. If you are in doubt whether using Redux with JSON API or not, this article will help you find the solution and reason why you shouldn’t doubt this method.