Notes

CSS Responsive Tables

Tables can be tricky in responsive design, especially when there's multiple headings. Here are two examples on how to style them for every device.

Read More

Fix Broken Project Links in WampServer

Newer versions of WAMP may throw a “Site can’t be reached” page after clicking on a localhost project. The issue is that the URL sets the project name as the root, rather than localhost (e.g. http://project/). This was originally meant to avoid root directory issues when dealing with PHP queries.

Read More

Set Active Class to Current PHP Page

Development is a lot quicker with PHP templates - header.php, footer.php, etc., since there is only one file dynamically included into each page. When there's only one header template that contains the primary menu, active classes need to be dynamically inserted.

Read More

Basic Git Command Line Reference

Git can be difficult to get used to so I made a quick reference guide of the basic, most common commands I use. I normally check the status of the working directory for changes, commit them, and push to the master branch.

Read More

Troubleshooting WampServer Orange Icon

The WAMP orange icon occurs when there's an issue connecting to localhost. Common reasons are from mis-configured ports, Skype interference, and missing services. If you experience this problem, here are a number of ways to troubleshoot the network.

Read More

Setup a Virtual Host in WampServer 3.0

A virtual host (vhost) is recommended to prevent uploading conflicts between your local and live site. It sets the project name as the document root, rather than localhost to avoid directory issues and better match a live server environment. WampServer 3 offers an incredibly easy way to create virtual hosts for your projects.

Read More

Fix HTML White-Space Rendering from Inline-Block

Using the CSS property, inline-block provides an alternative to floats where elements align side by side without having to clear. They can be given a height and width, opposed to the inline property. The issue with this display property is that it renders HTML white-space, sometimes causing an alignment to break. Here are a number of ways to prevent this.

Read More

Deploy a Node Website with Express and Heroku

Node.js is a server-side JavaScript environment built on Google Chrome’s engine. It allows you to write JS on the server for quick front and back-end development. In this tutorial, we're going to install Node and use NPM (Node Package Manager) to include dependencies for our project. Once our website is up an running, we will deploy it to Heroku, a cloud application platform.

Read More