HTTP/2 Increases Performance

Published on September 27, 2022September 27, 2022 by [email protected]

HTTP/2 is a major revision of the HTTP network protocol. HTTP/2 improves on HTTP in speed and latency. It accomplishes this with multiple changes.

Receiving and sending multiple responses on the same connection. HTTP uses a separate connection for each request. This reduces the overhead required for establishing new connections.
Sending page content and assets concurrently. The server can send assets to the browser in a single response. For example, the pages images and JavaScript can be sent all at once allowing the browser to render the page immediately.
Compressing the HTTP headers.

HTTP/2 has been supported in major browsers since 2015 but it must be configured on the server before it is enabled.

Installing an SSL Certificate for your website

Published on September 11, 2015September 27, 2022 by [email protected]

Why do I need an SSL Certificate?

An SSL certificate is a beneficial for every kind website. It is one of many important security features that limit the interception of sensitive data that is transferred between the client (browser) and the server (your website).

Even websites that don’t transmit sensitive data can benefit from an SSL certificate with a small SEO boost on Google searches. When setup correctly, an SSL certificate will show a green lock icon in the location bar of the browser which will increase the confidence of your clients when they are visiting your website.

1. Preparing the server

If you haven’t done so already install the required software and modules onto your server.

yum install mod_ssl openssl

2. Create the signing request and private key

The following command will create a new private key and a certificate signing request (CSR). The private key should be treated like a password and always have secure file permissions (read only).

openssl req –new –newkey rsa:2048 –nodes –keyout mydomain.com.key –out mydomain.com.csr

Move the private key to where the key files are stored. On CentOS, the correct location for the private key is /etc/pki/tls/private.

mv mydomain.com.key /etc/pki/tls/private/

3. Upload CSR

Now that you have a private key and signing request, you need to get the public key generated using a Certificate Authority (CA).

Purchase an SSL Certificate from a trusted vendor and when prompted, upload the CSR file that you generated in the previous step.

When setting up a new SSL Certificate you may need to provide proof of your or your company’s identity first. Depending on the type of certificate this can be a long drawn out process with phone calls and faxes or as simple as verifying your email address.

If there are no errors, your signed certificate will be emailed to you. Copy the downloaded public key to your server and move it to where public keys are stored.

mv mydomain.com.crt /etc/pki/tls/certs/

4. Configure Apache

If you haven’t done so already configure Apache to listen to port 443 (don’t forget to open up 443 on your server’s firewall).

vim /etc/httpd/conf/httpd.conf

NameVirtualHost *:443

Add a new virtual host entry for your domain. Remember to disable SSLv3 and SSLv2 because they are vulnerable. You should also configure apache to avoid allow weak ciphers such as ADH.

If you want to support the majority of the web, SSL Certificates are limited to one per IP Address.

Your configuration should look something like this:

<VirtualHost IP_ADDRESS:443>
    DocumentRoot "/var/www/vhosts/mydomain.com/public"
    ServerName mydomain.com:443
    ServerAlias www.mydomain.com:443

    SSLEngine on

    SSLCipherSuite ALL:!ADH:!NULL:!EXP:!SSLv2:!LOW:!MEDIUM:RC4+RSA:+HIGH
    SSLProtocol -ALL +TLSv1 +TLSv1.1 +TLSv1.2

    SSLCertificateFile /etc/pki/tls/certs/mydomain.com.crt
    SSLCertificateKeyFile /etc/pki/tls/private/mydomain.com.crt
</VirtualHost>

When you are finished restart apache and test your server.

service httpd configtest
service httpd restart

Bryan Wiebe is a web developer and mobile developer living in the Okanagan, British Columbia. He works for Hutz Media Ltd. If you need help getting your website mobile friendly contact me and I’ll provide free consultation and a free estimate.

Google Mobile SEO

Published on April 29, 2015 by [email protected]

As of April 2015, Google has significantly changed the way that websites rank whether they have a mobile friendly website or not. Is your website mobile friendly?

This change only affects rankings for searches that originate from a mobile device. So if your website isn’t mobile friendly in the first place, why would you want to improve your SEO ranking from mobile searches?

The fact is that mobile use is growing every year. According to CBC, 49% of all time spent online is on a mobile device (source).

Ten years ago it was vital that your business simply had a website. Now it is paramount that your business has a website that works on every device especially mobile.

Making your website mobile friendly

Now that you know how important it is to have a mobile friendly website, it is time to do something about it. Google has an online tool that allows you to see how your website looks.

Head over to https://www.google.com/webmasters/tools/mobile-friendly/ and check out how your website performs.

Here are some problems a typical website may face:

Text is too small
Links are too close together
Content is wider than the screen
Mobile viewport is not set

Responsive Web Design

A website needs to not only work on mobile devices, but also work on desktop computers and laptops. In the past, companies would build two versions of a website — one for mobile and one for desktop. Back then mobile devices had their own special markup and were very limited in what they could do. Now, mobile devices have full support for modern HTML standards so today you can build a website that works on all devices.

A responsive web design strategy will enable you to build a website that transforms automatically based on the current screen size. Typically columns are split up into rows, images change size automatically, and header menus get moved into a dropdown tab.

Responsive web design is something that I enjoy designing. If you need help getting your business’s web site mobile friendly contact me and I’ll provide free consultation and a free estimate.

NetBeans on our Development Environment

Published on April 1, 2015 by [email protected]

What is NetBeans?

NetBeans is an open source IDE used for developing desktop, mobile, and web applications with support for Java, HTML5, PHP, C/C++ and more.

We will be configuring NetBeans to develop our web application on our development server. Our web application files will be on our computer’s hard drive and will automatically upload to the web server as we make changes so that our development environment is similar to the production environment.

NetBeans is my IDE of choice because of its strong support for code hinting and built in versioning (Git).

Create a new project

Step 1: New Project

If you haven’t done so already, download NetBeans here.

Right click in the projects section and create a New Project or select File -> New Project. Select PHP Application with Existing Sources.

Step 2: Project Sources

Type in your project name: “new-project.com”. Put the project metadata in a separate folder so that it doesn’t get uploaded to the server. Click “Finish”.

Step 3: Remote Connection

In this step we will configure your new project to automatically upload to the development server whenever a file is changed.

Right click your project and select “Properties”.

Under “Run Configuration” change “Run As” to “Remote Web Site (FTP, SFTP)”.

Add a new “Remote Connection” by clicking on “Manage”.

Enter in the host name of your development server that you configured previously. Select the private key that you created previously. Make sure you select the .ppk version of the private key that PuTTYgen outputs by default.

Create or select a Known Hosts File. If you don’t have a known hosts file yet just create an empty text file somewhere.

Change “Upload Files” to “On Save” and check “Upload Files Directly (temporary file is not used)”.

If everything is setup correctly you should now be able to work with NetBeans IDE with your project files on your local computer. Whenever you make changes they will automatically be uploaded to your development server.

Bryan Wiebe is a web developer and mobile developer living in the Okanagan, British Columbia. He works for Hutz Media Ltd. This post is an entry in a blog series covering the configuration and setup of a Development Environment.

Authentication with SSH Keys

Published on March 19, 2015March 19, 2015 by [email protected]

Now that your development server is configured you can begin uploading your files to the server. For development we can create a login procedure that doesn’t require a password using SSH keyfiles.

Creating the private and public key

On windows, download the PuTTY Key Generator utility and generate a new public and private key.

Save the private key. Software will use one of two different formats for the private key. Export both a ppk file and an OpenSSH key file:

File -> Save Private Key -> Save as private.ppk

Conversions -> Export OpenSSH key -> Save as private.key

Copy the public key to your development server’s authorized_key file for the user you want to authenticate. In our examples we will be using root. On a production server you shouldn’t login as root directly.

If the directory and files don’t exist yet you will need to create them with the following permissions:

cd ~/
mkdir .ssh
chmod 0700 .ssh
cd .ssh
touch authorized_keys
chmod 0600 authorized_keys

Copy the public key, changing the string to match your public key:

cd ~/
cd .ssh
echo ssh-rsa AAAAB3NzaC1yc2EAAAABJQAAAQEAz7tEMrKSSLiYi3vaYu71KQeK+VX0zA07Rc5ZyyenLvihXW3TR7y6Yz9sYMOSgWMewUWosXxGNy17XR2pJSRXtD6mIEcQmhJh47H99bJEHxQ3NOEsRcEwe1yn++T7Q4DthunxzxLY+1M85EYMemz1ato+E341zwEZj0KJr064K9MtrCvC86menKsUFeRoEoj5YafJ02PaUeZiweLw3VyLgmhDCnx3DuSrEtO2O0eBHrziycamrbTE5W69oh+SUpXwnWQEagbHVGGWtXKCYltMiD14rWdqSsrlkAeg2hmDdxuIEn5w41OWJjeVqkXBnA4Pvp+hnCZKQBlCtP2/aSkVaQ== rsa-key-20150318 >> authorized_keys

Troubleshooting

Sometimes things don’t go that smoothly. If you are having problems connecting your client to your server using your new private / public key pairing. Check out the log files on your server for clues on how to solve the problem.

tail –f /var/log/secure

Configuring your FTP client

FileZilla is a popular open source FTP client for windows. It supports SFTP as a method for transferring files between your computer and the server.

Add your private key to the SFTP settings.

Edit -> Settings -> Connection -> SFTP -> Add key file

Create a new connection profile. Enter in your development server’s host or IP Address. Select SFTP as the protocol. Enter in your user but leave the password blank. On a production server it is not a good idea to connect as the root user.

Configuring your SSH client

PuTTY is an open source implementation of SSH for windows. It allows shell access to your server without having to access the development server directly. If using a virtual machine, it is more responsive than the VMWare window and is preferred.

Set the default user to root and the private key file to private.key.

Connection -> Data -> Auto-login username

Connection -> SSH -> Auth -> Private key file or authentication

Configuring other clients

The setup procedures are fairly similar on other software. Remember that security is important on a production server. You should not be logging in a root directly. Nor should you be creating a passwordless private key when accessing your server. On a production server assign a password to your key.

Modifying Hosts File

Published on March 4, 2015March 5, 2015 by [email protected]

During web design and web development, it is important to simulate the environment that your website will have when it is officially released. You can simulate your website on a development server as if it is live and hosted on its correct domain name, while keeping the website private and in your local area network.

Be sure to check out our previous blog post where we learned how to setup a Virtual Machine for development.

What is a hosts file

A hosts file is a used by your operating system to map hostnames (or domain names) to an IP address. If the hostname is not found in the hosts file your operating system will look for the IP address through your Internet Service Provider.

Finding the hosts file

In Windows your hosts file is located at:

c:\windows\system32\drivers\etc\hosts

In MacOS the hosts file is located at:

/private/etc/hosts

In most Linux distributions the hosts file is located at:

/etc/hosts

Modifying the hosts file

In Windows you need to edit the file as an administrator. Open notepad as an administrator.

The default contents of the file should look like:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

Find the IP Address to your local development server and append the desired domain to the hosts file. For example:

192.168.1.201		example-website.com

Save the file and open your browser (some browsers require that you close them before the addresses in the hosts file are updated). Type in example-website.com. If you already have a virtual host configured on your development server, it will now point to your website. If you don’t have a virtual host configured it will point to the server’s default website.

When it’s time to release example-website.com don’t forget to remove this line from your hosts file or you may be wondering why changes your clients make to the website aren’t showing when you look at them on your computer.

Using a Virtual Machine for Development Environment

Published on February 24, 2015March 5, 2015 by [email protected]

During development of web applications it is a good idea to use a development server instead of the live production server. There are many reasons for this such as a simple coding error taking down the entire production server and all of your client’s web pages with it.

You could try to running a web server directly on your Windows or MacOS operating system. However, this can be a pain to set up and get going and chances are that the differences in the environment between your personal OS and the production server will be enough to cause headache when it is time to deploy.

At Hutz Media, we use a dedicated CentOS Linux server running 24/7 for development and testing. For part time developers a virtual machine running in the background will work just as well.

We also CentOS on our production servers. I find that it is always best to have your development environment as close to your production environment as possible.

In this post we will be using VMware Player 7 to setup and install as LAMP web development environment for CentOS. You can also use VirtualBox.

Download CentOS

CentOS is a Linux project that is derived from sources freely provided by Red Hat. Download the latest minimal ISO image at http://www.centos.org/download/. The file should be around 566MB.

Create a New Virtual Machine

Once you have finished download the CentOS ISO image open VMware Player and create a new virtual machine.

If using the Easy Install Wizard, VMware Player will try to install the GUI Desktop version of CentOS. We want to install the server version so we need to avoid the Easy Install process and install CentOS manually.

Select “I will install the operating system later”. On the next window select “Linux” and “CentOS Linux 64-Bit”. Under the Hardware settings window select the ISO you downloaded as the startup CD and also change the network settings to “Bridged”. Click “Finish” and power up the virtual machine.

Follow the directions to install CentOS. While it’s installing you can setup the root password. This should only take about 10 minutes.

Setting up network

CentOS minimal is installed by default with the network turned off. Type “nmtui” in the console to get to the network adapter settings. Set the ethernet device to automatically connect through DHCP (or configure your connection manually). Restart the network service.

service network restart

Using yum to install services

Now that CentOS is installed on your new virtual machine it is time to get your web development services installed and ready.

First you will want to update your server. Using the virtual machine window and the username and password you setup in the Easy Install wizard, log into your root account.

Use the yum command to update your server software to the latest.

yum update

Now install the services you’ll need for your LAMP environment.

yum install php php-cli php-pdo php-mysql php-gd httpd mod_ssl mariadb mariadb-server

Starting and configuring services

Let CentOS know you want to start these new services on bootup.

systemctl enable httpd.service mariadb.service

Start the services.

systemctl start httpd.service mariadb.service

Allow http and https traffic through the firewall.

firewall-cmd –permanent –zone=public –add-service=http firewall-cmd –permanent –zone=public –add-service=https

Test your new LAMP server. Find out your virtual machine’s IP address by typing:

ip addr

Open up your browser to http://MY_IP/. You should see the following page:

Your new virtual machine is now setup and ready for development. You can enjoy low latency development that is nearly identical to your production environment without any additional hosting costs or having to purchase a stand-alone server.

10 Steps to Improve SEO

Published on February 13, 2015February 13, 2015 by [email protected]

SEO or Search Engine Optimization is a process of improving the visibility of a website in a search engine’s organic (un-paid) results. Improving your website’s visibility on a search engine can be a great way to bring interested customers to your website.

Compared to the costs of other forms of advertising such as pay-per click advertising or social media advertising, SEO provides a better overall ROI.

In this article I will explain ten ways that you can improve your web page’s search engine optimization using webpage best practices and Google Webmaster Tools.

1. Page Navigation

In order for a web page to be effective with your users it should be easy to navigate. It is recommended that you set up breadcrumbs at the top of your page’s content. A breadcrumb is a secondary navigation scheme that reveals the user’s hierarchical location in the web page. This will allow the user to identify where they are in a website and how they can get back to what they are searching for.

As an example and breadcrumb for this blog post:

Blog / Home – 10 Steps to Improve SEO

2. Page Titles

The page title tells users and search engines the topic of the page. If the user’s search terms are included in the title tag they will be highlighted in bold. This allows the user to quickly identify that your page contains the term they are searching for.

Don’t just fill the title with every search phrase that applies to your product. Search engines like Google typically display only the first 50-60 characters of the title tag. Keeping a title in this range will result in the title displaying correctly.

Page title:

Okanagan Web Developer – Kelowna Penticton Web Developer

3. Page Sitemap

Creating a public sitemap will help search engines learn which pages it should index on your website. It also helps users locate the page they are looking for.

You should also create a XML sitemap and log in to Google Webmaster Tools to direct it to your XML sitemap.

4. Content Keywords

When writing content for your website such as a new blog post you should focus on phrases that a user will be searching for. Users won’t necessarily have the same level of understanding of a subject as you do. They may search for something generic like “web page company” when you have focused on advertising yourself as a “web application software developer”.

Google provides an excellent tool for searching for the popularity of a phrase and identifying new phrases and their popularity.

https://adwords.google.com/select/KeywordToolExternal

5. Anchor Text

Search engines prioritize text that is located in anchor links. They give a quick preview to the search engine that can improve visibility of the targeted URL. Try adding your own targeted search phrases to links in your articles or web pages.

Below is an example link:

A more search engine friendly link would be:

6. Image Descriptions

Not only does adding descriptions to image tags improve usability of your website, but it also improves your search engine visibility. An image description can be added in the “alt” attribute of the “img” tag:

<img src="image.png" alt="A nice picture of a cat.">

An alt attribute allows you to specify alternative text for an image if it cannot be displayed. Why use this attribute? The alt text for an image will be treated similarly to the anchor text of a link.

You should also optimize your image filenames to make it easier for image search engines to understand and index your images.

7. Heading tags

Use heading tags to emphasize important text. Heading tags are used to emphasize sections of page’s content. Search engines treat text inside a heading tag as important. Consider placing search phrases that you want targeted inside a heading tag in your content.

<h1>Web Developer</h1> <h2>Hutz Media Ltd. provides web development services to the Okanagan.</h2>

8. Mobile Content

Mobile web page design is becoming more important every year. Search engine companies have also noticed this trend and are considering adjusting their algorithms to reward mobile-friendly websites with a ranking boost. It is also important to have a mobile-friendly website from a user experience perspective as well.

A mobile friendly website should automatically adjust itself to fit inside the viewport of a browser, mobile or desktop with the need to zoom in or out.

There is no reason to wait for Google to change their ranking algorithm. Have your website upgraded or created to support responsive web design.

9. Utilizing rel=”nofollow”

Setting the “rel” attribute of an anchor link to “nofollow” will tell search engine’s that links on your site shouldn’t be followed. This will prevent your page’s reputation from being shared with the page that is linked to.

<a href=”http://google.ca” rel=”nofollow”>Google</a>

Obviously when creating content that links back to your own content you will not need to worry about this. If your blog or website has user editable content such as a blog comment or a message board you should set all links to nofollow by default.

Linking to websites that search engines consider spammy or malicious can affect the reputation of your own website.

10. Back linking

The core of the search engine ranking system is links. Each link from a website with high reputation to your own website will increase your own website’s reputation. A higher reputation will mean that your website is more likely to appear in the search phrases that you are targeting.

Consider adding your website to a free listing service. Find listing websites that are related to your website’s business and get them to link back.
Post your content on social media such as Twitter or Facebook.
Submit your blog’s RSS feed to public RSS feed directories.
Post video content on Youtube or other video sharing websites relating to your product or business.

Bryan Wiebe is a web developer for Hutz Media Ltd. Hutz Media provides SEO content creation and optimization.