Meta Titan

Classes vs IDs, CSS Practice

Matt — Thu, 03 Jan 2008 20:22:29 +0000

A good use of classes and IDs can save you a lot of time. You’ll end up with a site that’s easy to maintain, and frankly, your code will look a lot cleaner. There are certain rules and practices when using classes and IDs, the following guide looks over them.

First off, what defines an ID and a class? Simply put, an ID is a unique identifier and should only be used once in your document. It’s good practice to use ID on structural blocks of your site such as a wrapper, header, footer, navigation bar, etc. A class can be used more broadly to define objects that can appear multiple times in your document, such as link styling, tables, etc.

Example usage of an ID:

In your html code:

content

In your stylesheet:
div#mainWrapper { margin: 10px 30px; }

Example usage of a Class:

In your html code:
Hello, World

In your stylesheet:
span.test { color: #003366; font-weight: 900; }

When naming your classes and IDs, try and use generic and easy to identify names. For example, instead of calling something “yellowBar” try “topSidebar”. Who knows what color that bar will be 6 months from now! Also, pick a naming style that you’re comfortable with and stick to it - either lowercase (#helloworld) or camel case (#helloWorld) - you should never use spacing in names.

How to Calculate PHP Load Times

Matt — Thu, 13 Dec 2007 12:42:06 +0000

Here’s a popular request amongst those who are learning PHP. When developing PHP applications, it’s good practice to benchmark your pages to see if you need to further optimize your code. The following snippet will show you how much time it took your server to process your PHP document.

Insert this at or near the top of your PHP file.

$m_time = explode(" ",microtime());
$m_time = $m_time[0] + $m_time[1];
$loadstart = $m_time;

Now place this snippet at or near the bottom of your file for the best results.

$m_time = explode(" ",microtime());
$m_time = $m_time[0] + $m_time[1];
$loadend = $m_time;
$loadtotal = ($loadend - $loadstart);
echo "Generated page in ". round($loadtotal,3) ." seconds";

That’s it! I suggest adding this while you develop any PHP application, and include it even after the launch, so that you can see how well your scripts scale with the traffic you receive.

Backing up a MySQL Database Using Cron

Matt — Mon, 10 Dec 2007 15:44:06 +0000

It sure has been awhile since I’ve updated, things have been pretty busy and I just haven’t had time. Anyway, the most important and often overlooked part of running a dynamic MySQL website is backing up your data often. Losing your file system often doesn’t hurt as much as losing all of your content, especially when running a script that’s easily replaceable like vBulletin, Wordpress, etc. Backing up your data can be a chore, so this is the simple method I use for an automated backup of my databases.

1) SSH in your box

2) Open up your crontab, to do this type:
crontab -e

3) Add the job to your crontab, this is what I use:
30 0 * * * date=`date -I` ; mysqldump -a -uuser -ppassword dbname > /path/to/dump_$date.sql

I’ll break down what’s going on in the above line and what you need to edit

30 0 * * * - This specifies the interval in which it will backup your data. Minutes, hours, days of the month, months, days of the week, respectively. In my case, I’m going to be running this every day at 12:30 AM. Asterisk out values which you do not need to limit.
user - Enter your mysql username here
password - Enter your mysql password here
It’s important to note that -uuser is not a typo, you need to prefix -u on your username, so if it’s jsmith, you will enter -ujsmith. Same goes for your password.
dbname - Enter the mysql database name which you want to backup
/path/to/dump_$date.sql - Enter the directory you wish to back up your data to, include $date if you want a datestamp on your backup names. Don’t back this up to a web accessible directory as anyone would be able to access your database information and view potentially sensitive data.

Once your cron job is up and running you can then use a 3rd party backup service to automatically pull those backups across onto secure networks at set intervals (ie: every day at 12:40 AM). Talk to your hosting provider as many already provide backup services like this. You can also choose to manually download them onto your hard drive if you prefer a most cost effective approach. Just remember to go in weekly or monthly to delete older backups if necessary - those with large databases may eventually max out their hard drive space if left unattended.

New Look

Matt — Tue, 30 Oct 2007 14:13:30 +0000

It felt unfitting for a blog that teaches and discusses web development tips & tricks to use a generic widely used WordPress theme. I’ve launched a new custom look for Meta Titan and I’m just working out the kinks and making adjustments.

I have a couple entries planned for this week so keep an eye out for them!

Show/Hide Content With CSS & Javascript

Matt — Sun, 28 Oct 2007 05:51:50 +0000

My apologies for the recent lack of updates and the briefness of this post, things have been (and still are) really busy on my end. Anyway, when building websites for my clients a popular request is to have content that can be toggled by the user. Today I’ll show you have to have this effect done really quickly. Although this method does not support persistence (saving cookies to the users browser to remember what they have hidden/shown), I’m sure there are some who will find it useful.

Place this code in your tags.

Now you can effectively show/hide content by placing id=”elementname” style=”display:none;” inside the element tag you wish to be toggle-able, and onclick=”shToggle(’elementname‘); return false;” inside the link code of the image or text the user clicks to toggle it. You can see a live example of it on this page, or simply look at the example code snippet below.

What’s the name of Calgary’s NHL Team?
show/hide answer

The Calgary Flames

Automating Photoshop; Actions and Batching Explained

Matt — Tue, 23 Oct 2007 04:40:06 +0000

If you work in Adobe Photoshop regularly, you’ll often find yourself engaged in repetitive loops that have a tendency to drain on your stamina and attention span. Today I’ll teach you how to use, and embrace the Action menu, a tool that will change the way you approach boring, monotonous tasks. Whether it’s mass resizing photos, embedding watermarks, adding filters, or perhaps something more or less complex, most of it can be automated.
(more…)

Protecting Your PHP/MySQL Queries from SQL Injection

Matt — Sun, 21 Oct 2007 10:36:08 +0000

SQL injection is a serious concern for webmasters, as an experienced attacker can use this hacking technique to gain access to sensitive data and/or potentially cripple your database. If you haven’t secured your applications, I implore you to get yourself familiar with the following method and grind it into your coding routine. One unsafe query can result in a nightmare for you or your client.

I’ve read through a lot of guides, and they tend to over complicate this, so I’ll be as straight forward as possible. In PHP the easiest way is to pass your data through the mysql_real_escape_string function. By escaping special characters on fields where the user can manipulate the database, you will avoid being vulnerable. Take a look below at the example of what to do and what not to do.

// This is a vulnerable query. $query = "SELECT * FROM products WHERE name='$productname'"; mysql_query($query); // This query is more secure $query = sprintf("SELECT * FROM products WHERE name='%s'", mysql_real_escape_string($productname)); mysql_query($query);

Since I primarily code in PHP, I can’t confidently provide techniques for other programming languages. The most important part of protecting yourself is stopping users from being able to pass unaltered database manipulative special characters, like single quotes.

MSDN - SQL Injection Article
Wikipedia - SQL Inection
SecuriTeam - SQL Injection Walkthrough
SitePoint - SQL Injection Attacks, Are You safe?

The Digg Effect - Can your hosting plan handle this? [Pic]

Matt — Sat, 20 Oct 2007 07:09:12 +0000

Meta Titan traffic spike yesterday, I found this amusing:

The fort held up, but it really puts it into perspective for those who are on penny and dime hosting plans.

CSS Builder - Brand New Meta Titan Tool

Matt — Fri, 19 Oct 2007 02:55:09 +0000

You’ve seen it done in programs like Adobe Dreamweaver, but believe it or not, there aren’t a whole lot of decent CSS generators in the flavor of my new tool (that I could find with a thorough Google search at least).

The Meta Titan CSS Builder provides a human readable interface for generating your selector (class/id/tag) code with valid syntax on the fly. Fill out the form, press build, copy the code, paste it into your stylesheet. I believe it will improve your productivity, especially if you’re a beginner / intermediate user and haven’t memorized all of the property names and appropriate values.

Give it a try, and a bookmark - click here!

This is the product of about 1 weeks worth of casual coding. I’m planning a version 2 that cleans up the interface a bit, and I’ll be taking suggestions on what I can approve.

How to Check Link Popularity in Google & Yahoo With PHP

Matt — Tue, 16 Oct 2007 20:31:01 +0000

Everyone knows that the best traffic you can get is organic, meaning people who come to your site naturally with genuine interest. Search engines like Google & Yahoo are notorious for placing a high value on the amount of websites that are linking to you. While their algorithms haven’t been completely unraveled yet, SEO specialists have a pretty good idea of how to make your site rank higher, and it usually starts with link building (assuming you have quality content first of course!).

The amount of links your site has indexed in Google & Yahoo can change often, so checking can be an arduous task. Luckily there are a ton of tools out there for this, but you’re not here for that, are you? You’re here because you want the code to run your own service, or maybe you want your own local copy of it, or maybe you just want to see how it works. The script below will check your backlinks in Google and Yahoo, as well as your Alexa rating. Feel free to modify and redistribute (non-commercially) as you see fit.

Live Demo | View Source Online

// Setting the URL variable
$link = $_GET['url'];

// Google Backlinks
function fetch_google($uri) {
$uri = trim(eregi_replace('http://', '', $uri)); $uri = trim(eregi_replace('http', '', $uri));
$url = 'http://www.google.com/search?hl=en&lr=&ie=UTF-8&q=link:'.$uri;
$v = file_get_contents($url);
preg_match('/of about \(.*?)\<\/b\>/si',$v,$r);
return ($r[1]) ? $r[1] : '0';
}

// Yahoo Inlinks
function fetch_yahoo($uri) {
$uri = trim(eregi_replace('http://', '', $uri)); $uri = trim(eregi_replace('http', '', $uri));
$url = 'http://siteexplorer.search.yahoo.com/search?p=http://'.$uri.'&bwm=i&bwmf=s&bwmo=&fr2=seo-rd-se';
$v = file_get_contents($url);
preg_match('/of about \(.*?) \<\/strong\>/si',$v,$r);
return ($r[1]) ? $r[1] : '0';
}

// Alexa Rating
function fetch_alexa($uri){
$uri = trim(eregi_replace('http://', '', $uri)); $uri = trim(eregi_replace('http', '', $uri));
$url = 'http://data.alexa.com/data?cli=10&dat=snbamz&url=' . urlencode($uri);
$v = file_get_contents($url);
preg_match('/\/si', $v, $r);
return ($r[2]) ? $r[2] : '0';
}

// Page Header
echo "
Search Engine Popularity
";

// Display Links and Information
if (isset($link)) {
echo "URL: " . $link . "
";
echo "Google Backlinks: " . fetch_google($link) . "
";
echo "Yahoo Backlinks: " . fetch_yahoo($link) . "
";
echo "Alexa Rating: " . fetch_alexa($link) . "
";
}

// Search Form
echo "

";

?>