Resources: Code

When you're working with multiple environments (which you'd usually be doing if you're using GIT!), you want to exclude your environment-specific configurations, like database connections and system alerts. If you've modified your .gitignore file accordingly, you still need to untrack your file from the Git index. To do this, run the code below:

git rm --cached [your_filename]

Windows and Mac OSX aren't too bothered about the case in your MySQL databases, however Linux is. TableName is not the same as tablename (at least in Linux).

If you're working with Git, and are using it to manage your databases, you will need a seamless (and identical) setup between XAMPP and your production/dev environments. To make XAMPP respect cases, track down your my.ini file (usually C:/xampp/mysql/bin/my.ini) and add the line below (or update it if it already exists):

lower_case_table_names = 0

This will make XAMPP allow uppercase table names, which will mean you can safely push to a *nix environment!

When you clone a GIT repository, by default it creates a new sub-folder by the name of your repository. This is highly annoing when you're deploying a repo to your webserver. Instead, you want your repo to exist in a specified folder.

To do this, just take note of the third option of the git clone command:

Syntax: git clone [git url] [local folder]
git clone https://github.com/username/repo.git .

This command will clone said repository into your current folder.

Load a favicon for your site

27 September 2012

Most sites load it by default if you upload your website icon (favicon.ico) into the root directory, but some browsers (cough *Internet Explorer* cough cough) don’t bother unless you explicitly state where it is. The code below will make it happen!

emember to empty your browser cache before refreshing your browser.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut-icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Remove WWW from your URL

27 September 2012

Google recognises http://www.yourdomain.co.nz as a completely unique site from http://yourdomain.co.nz – so it makes sense (especially for search engine optimisation) to unify these urls.

Use this code in your .htaccess file to remove the www. Ensures search engines see the right site, and makes your url shorter! Boom!

RewriteCond %{HTTP_HOST} ^www.yourdomain\.co\.nz$ [NC]
RewriteRule ^(.*)$ http://yourdomain.co.nz/$1 [R=301,L]

Sometimes it’s just not worth creating a completely new CSS file for one IE6 fix, you just want to create a hack within your primary stylesheet – check out the hacks below!

#element {
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
padding: 7px;
color: #fff;
}

I’ve often had clients wondering why their website seems to ‘bump’ from side to side when navigating between pages. When I eventually understand what they’re experiencing, it is when a scrollbar is not shown when the page is shorter than the browser’s window. This quick CSS code will make every page an extra 1px taller than the window it’s shown in, so permanently fixing a vertical scrollbar.

html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}

Scalable Background Images

27 September 2012

We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.

html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

There is also a good Internet Explorer version here (but it needs to be applied to a
instead of as it breaks the links:

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Flush the Facebook Cache

27 September 2012

Don’t you hate it when you post a link or video on Facebook and it decides to show your old pictures or thinks that your newly-launched website is all about “Under Construction, coming soon!”? Well I do, and as a web-developer it is important to understand and resolve the quirks and tricks of working with social media networks.

There is a nifty tool known as the ‘Facebook De-linter‘, which does make sense. Effectively it shows you what your website looks like, in Facebook’s eyes. But most importantly it also updates the Facebook cache to reflect your newest page content. So if you’re having trouble getting Facebook to recognise your new web content, throw your website into the De-linter!

Visit the Facebook De-linter.

Share a link on Facebook to a webpage that hasn’t been developed very thoroughly and you will notice that Facebook pulls in an outdated and (often) irrelevant thumbnail, title and blurb. If you add these three tags you can customise what Facebook shows when a link is shared. Just drop it in the of your pages and modify as you would like it to read.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

1 2

Let's work together