Site hosting news, tutorials, tips, How Tos and more

Programming 101 Tips: 2 Ways to Add a Loading Icon “Spinner” to Your Website

For budding new web developers, here are two ways to add a “spinner” icon to indicate that your website is busy loading data. The first method uses jQuery’s .ajax method and the second method uses Javascript’s new Fetch API. For the spinner icon, we will use an icon from Font Awesome. I prefer this method because it reduces load time. A well crafted css-styled .png/.gif icon would work as well.

First, install Font Awesome by downloading it (you can get the Free for Web version) and then follow the various instructions on their site to add it to your project (look on the right for Using Font Awesome With). Since I am developing with Visual Studio, I just use NuGet’s Package Manager to install it for me. To add it to your web page, add a stylesheet reference in the <head> element. Since I’m using Visual Studio, my reference looks like this:

<link rel="stylesheet" href="/Content/font-awesome.min.css" />


Next, you will also need to install jQuery and add a reference for it as well:

<script src="/Scripts/jquery-3.4.1.min.js"></script>


jQuery can also be installed via NuGet’s Package Manager in Visual Studio.

Now, add the spinner by adding this line to your page in the <body> element:

<div id="Spinner"><i class="fa fa-spinner fa-3x fa-spin"></i></div>


It can be placed anywhere in the <body> element, but I prefer to place it at the top for organization reasons (i.e. easy reference). The <i> element is used to create the font-awesome icon and the “Spinner” id will be used for further styling. Here is the markup for the “Spinner” css:

#Spinner {
    color: blue;
    left: 47%;
    position: fixed;
    top: 47%;
    visibility: hidden;
    z-index: 1;
}


This should place the spinner in the middle of the page and hides it initially until you activate it (i.e. make it visible) via jQuery. The z-index is used to overlay it over a page.

Now, when making your .ajax call, use the following format:

        $.ajax({
            type: "GET", // GET, POST, DELETE, etc.
            url: "https://www.mysite.com/api/dosomething", // some url
            beforeSend: function () {
                $("#Spinner").css("visibility", "visible");
            },
            complete: function () {
                $("#Spinner").css("visibility", "hidden");
            },
            success: function (response) {
                // do something with response data
            }
        });


By changing the value of css property “visibility” using jQuery, you’re turning the spinner on before the ajax call is made and off after it finishes which gives it the illusion that the site is processing data.

If you plan to use Javascript’s new Fetch API, here is the sample markup:

    $("#Spinner").css("visibility", "visible");
    fetch("https://www.mysite.com/api/dosomething") // some url
        .then(response => response.json())
        .then(function (response) {
            // do something with response data
            $("#Spinner").css("visibility", "hidden");            
        })
        .catch(err => {
           // handle error
           $("#Spinner").css("visibility", "hidden");
        });


The spinner is turned on right before the fetch call is made and then off when it completes. I also added it to the catch clause because the spinner would still remain active when it errors out since the code to deactivate it never executes.

Hope these tips help those young and upcoming rock-star developers. 🙂

Visit Winhost to learn more about our ASP.NET hosting solution



PHP 7.3 Running Faster on Windows Server

PHP 7.3 that’s been recently installed on all of our IIS 8 and IIS 10 servers. One major difference is the speed of PHP sites running on PHP 7.3. Reading the buzz around the internet you’ll see claims that PHP 7.3 being 31% faster than PHP 7.0 and 3 times faster than PHP5.

Curious about this myself, I decided to check to see how much better the speed was for a based WordPress site running on our Windows 2012 IIS 8 Servers.

Users can easily change the PHP version of their site account within the Winhost control panel.

Sites > Site Account > PHP Version

I used Google’s PageSpeed Insights Tool to test a website. And sure enough, I got a lot better results while using 7.3. While just using a base WordPress install with the canned plugins it comes shipped with, 7.3 did in fact preform better than PHP 5.6.

Speed Score after using PHP 5.6
Speed Score after using PHP 7.3

Please note that your results will vary depending on how large your site is and what plugins and themes you are using.

If you’re using an older version of WordPress. Please be sure to update to the latest version before changing your PHP version within the control panel. You should also upgrade all plugins and themes your site is using as well. Otherwise, your WordPress site could break until you switch it back to the old PHP version you were using before. Contact our technical support team if you run into any issues.

If you’re still currently on our Windows 2008 IIS 7 servers. You can contact our support department and asked to be migrated to the newer servers.

Visit Winhost to learn more about our Windows hosting plans supporting PHP 7.3.



.NET Core 3 Hosting is Here

Announcement

We’ve been getting many inquiries about .NET Core 3.0 and we are happy to let you know that we now support framework dependent deployment of .NET Core 3 projects at Winhost.

asp.net core hosting

Some new features include general performance improvements, support for C# 8, support for .NET Standard 2.1, improvements for .NET Core Version APIs, tiered compilation, and ReadyToRun images.

We do maintain a list of the .NET Core versions that are supported on our ASP.NET hosting platform in our knowledge base. But remember, if you do not see the .NET Core version that you want to use on the list, you can always upload your application using a self-contained deployment. If you have any questions about deployment, please contact our Technical Support team.

Visit Winhost to learn more about our ASP.NET Core hosting solution



Fall App Installer Updates

Announcement

The latest version of these apps are now available through the control panel app installer:

Visit Winhost to learn more about our application hosting solutions



Introducing the Winhost Power Plan

In this post I wanted to discuss some background about our recent launch of our new Power Plan.

We receive a lot of customer comments on ways to improve our hosting services, as well as suggestions on features customers would like to see implemented. We try to take all this feedback into consideration and, when possible, work towards turning it into something real.

For example, we received feedback from customers whose sites outgrew the Ultimate Plan because their application required more resources. Applications growing in their resource usage requirement is a general trend we are seeing. Every year, each new version of an application has more features, which typically leads to its need for more server resources to run. We’ve seen this happen with applications like nopCommerce, where the older versions worked fine on our Max and Ultimate plans, but newer versions required more resources than our Max Plan. With its recent conversion to .NET Core and new features, we recommend running nopCommerce on our Ultimate Plan but active nop sites are now hitting the resource limit of the Ultimate Plan.

So we launched our new Power Plan to help resource intensive sites that outgrow the Ultimate Plan. We also built a separate high performance shared hosting infrastructure just for Power Plan users. The servers have less site density and are optimized to run resource intensive applications.

Now let’s dive into some of the Power Plan details. The table below shows some of the differences between the Ultimate Plan and the Power Plan. You’ll see that the you get double the resources on key hosting features.

Ultimate PlanPower Plan
Memory Allocation500 MB1 GB
Email Storage5 GB10 GB
SQL Database5 GB 10 GB
mySQL Database5 GB10 GB
Idle Timeout20 min60 min

For a complete feature list for the Power Plan, vist our website. If you have any questions about the new plan feel free to contact us or open a support ticket.

Visit Winhost to learn more about all our Windows hosting solutions



New Power Plan is Here!

Today we launch a new fourth plan which we are calling the Power Plan. The new plan includes more resources than our Ultimate Plan.

The Power Plan is designed for extremely active sites, resource intensive applications and customers that need more database storage – basically, for the power users.

The Power Plan hosting platform is on a separate shared hosting environment solely dedicated for Power Plan sites. To optimize performance, we use high performance hardware and the servers have less site density. This also means that existing Winhost sites moving to the Power Plan will require a migration. Of course, if any existing customers upgrade to the Power Plan, we’ll take care of migrating your site.

For more information on the new Power Plan, check out our website: https://www.winhost.com/hosting-plans/power.aspx

We’ll be following up with another post to look at the Power Plan with more detail shortly.


Visit Winhost to learn more about our Windows hosting solutions



Why is my email so slow? Check the email header.

Having an email message to take forever to arrive can be very annoying and sometimes it leaves people wondering why is this even happening. In this article I’ll show you how to analyze email headers of an email message.

What is an email header?

An email header is a timeline of where the email message went through to get to you and the different email systems it touched during the delivery process. It’s sort of like looking at the tracking information of your UPS delivery. The only way to find out where the slowness is happening is to review the email header of that sluggish email message.

Where can I find the email header?

First, the email message must arrive at the destination before you can review the headers. We have instructions on how to view email headers in our knowledge base. There are multiple ways of viewing the headers. Here is another list that can help you find your email headers.

How to analyze the email header

Email headers can look ugly and hard to understand. Luckily there is a email header analyzing tool provided by MxToolBox.com that can help with that.

Copy and paste that ugly looking email header into the empty field and click on Analyze Header.

In the results, the email server with the longest bar graph is going to be the email server that is causing the most delay.

Why is this occurring?

There are many different reasons why an email message could be slow. One common reason is that the email server that caused the most delay had a large amount of email messages to process. If you see that the latency is happening in one of our email servers, we will gladly check our system for you and the logs to see what might be happening. Please contact our support department via our support portal for assistance.

For the most part most email servers are temporarily handling large volume of emails and will go back to normal performance on their own. However, if you’re seeing this issue keeps happening at a particular email server, you can contact the email administrator of that email system and provide them with the email header as proof.

Visit Winhost to learn more about our Windows hosting solution



How to add reCAPTCHA to your WordPress Site

One of the most popular ways attackers are able to compromise WordPress sites is through a brute force attack. Through this method, they can try large number of passwords in a very short time. If your password can be easily guessed, there is a higher chance of an attacker gaining access.

In this post we will be covering how to add reCAPTCHA to your WordPress site. This can effectively shut down bots that are trying to abuse your pages, especially your login page.

To begin, you will need to log in to your admin section of your WordPress site. Go to Plugins > Add New, on this screen search for “captcha”. The plugin I have used and have not had any problems with is the “Advanced noCaptcha & invisible Captcha” plugin. Click “Install Now” , “Activate”, and then click settings.

For this next step a Google account is required. Go to this link:
https://www.google.com/recaptcha/intro/v3.html# and click Admin console on the top right. Fill in the label field with your domain name, be sure to choose reCAPTCHA v2, enter your domain, and accept the Terms of Service.

Click submit to be given your “Site Key” and “Secret Key”, go back to the settings page for the plug in and paste the keys in there. Fill in the rest of the fields as needed. **I would highly recommend testing it on only the Comment Form first and not the Login as it can lock you out if done incorrectly. ** You can also set how many attempts are allowed before a user is prompted, the default is set to always ask.

Click “Save Changes”, then visit a comment section on your site. The result should be the newly added reCAPTCHA prompting you to verify you are not a robot.

Congratulations! You can now go back to the settings page and enable it on the log in page, as well as any other pages you would like to protect from bots. Should you encounter any problems during the process please open a support ticket.

Visit Winhost to learn more about our WordPress hosting solution