October 30, 2007

New Look

Filed under: Miscellaneous — Matt @ 10:13 am

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!

October 28, 2007

Show/Hide Content With CSS & Javascript

Filed under: CSS — Matt @ 1:51 am

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 <head> tags.

<script type=”text/javascript”>
function shToggle(content) {
if (document.getElementById(content).style.display == “none”)
document.getElementById(content).style.display = “block”
else
document.getElementById(content).style.display = “none”
}
</script>

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.

<strong>What’s the name of Calgary’s NHL Team?</span>
<a href=”javascript:void(0);” onclick=”shToggle(’calgary’); return false;”>show/hide answer</a>

<div id=”calgary” style=”display:none;”>The Calgary Flames</div>

October 23, 2007

Automating Photoshop; Actions and Batching Explained

Filed under: Photoshop — Matt @ 12:40 am

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…)

October 21, 2007

Protecting Your PHP/MySQL Queries from SQL Injection

Filed under: MySQL, PHP — Matt @ 6:36 am

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?

October 20, 2007

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

Filed under: Miscellaneous — Matt @ 3:09 am

Meta Titan traffic spike yesterday, I found this amusing:

Digg Effect

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

October 18, 2007

CSS Builder - Brand New Meta Titan Tool

Filed under: CSS — Matt @ 10:55 pm

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.

October 16, 2007

How to Check Link Popularity in Google & Yahoo With PHP

Filed under: PHP, SEO — Matt @ 4:31 pm

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

<?php
// 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\>(.*?)\<\/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\>(.*?) \<\/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('/\<popularity url\="(.*?)" TEXT\="([0-9]+)"\/\>/si', $v, $r);
return ($r[2]) ? $r[2] : '0';
}

// Page Header
echo "<h2>Search Engine Popularity</h2>";

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

// Search Form
echo "<br />
<form action=\"linkcheck.php\" method=\"get\">
<input type=\"text\" name=\"url\" />
<input type=\"submit\" />
</form>";

?>

Complete List of HTML Tags

Filed under: HTML — Matt @ 11:07 am

A complete reference of every HTML tag available, good for any web developer - new or experienced. Several tags that have been deprecated have been omitted from the list. Click on each tag for more information and sample usages. This took about 4 hours, I hope you find it useful :)
(more…)

Next Page »