Talk In Code

I found this excellent bookmarklet the other day which allows you to see nofollow links quickly and easily in Chrome most modern browsers.

Nofollow?

The bookmarklet consists of the following JavaScript.

javascript:function%20highlightNofollow(){var%20newStyle=document.createElement('style');newStyle.type='text/css';newStyle.appendChild(document.createTextNode('a[rel~=nofollow]{border:1px%20dashed%20#852!%20important;background-color:#fcc!%20important;}'));document.getElementsByTagName('head')[0].appendChild(newStyle);};highlightNofollow();

Which basically puts the following CSS rules into your document, thus highlighting any links with the rel="nofollow" attribute.

a[rel~=nofollow] {
 border:1px dashed #852! important;
 background-color:#fcc! important;
}

Take a look at the bookmarklet on johnmu.com.

One neat thing about Wordpress is the ability to add images to your posts in a quick and easy manner. You can also create thumbnails of larger images and link to them using a captioned image. The only problem is that when you have sorted out how your images look in your post in the admin section they just don’t appear the same in your template once you have published it.

This is because Wordpress creates a set of styles that are used in the admin section and the default Wordpress templates. However, these styles are usually left out of custom template stylesheets. If you want to use the same sort of formatting that the Wordpress admin section has then open up your stylesheet file in your template and put the following stylesheet rules in at the bottom.

.alignleft {
float:left;
margin:20px 20px 20px 0pt;
}
 
.alignright {
float:right;
margin:20px 0pt 20px 20px;
}
 
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
 
.wp-caption {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
color:#000000;
}
 
.wp-caption img {
border:0pt none;
margin:0pt;
padding:0pt;
}
 
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0pt;
padding:0pt 4px 5px;
}

With this simple fix you will now have much better looking image styles.

One note for blog writers out there is that if you want to float an image left or right then you need to place it before the text you need to wrap it around. When you align things to the center the text will not wrap around it.

Firebug is by far the best JavaScript debugging plug-in available for Firefox. I have been stuck on a few problems in the past and Firebug has usually provided me with a reason as to why things are going wrong. In fact when developing for other browsers (like Internet Explorer) I can feel a little blind as there are no debugging tools with the power and features of Firebug. It can allow you to stop JavaScript execution at any time using breakpoints.

Firebug is important if you are creating AJAX applications as it will tell you about every client/server communication, what headers where sent and what the response was.

Aside from the decent JavaScript features there are also a host of HTML and CSS features that allow you to edit styling code on the page in real-time or inspect a portion of the page for HTML and style information.

The only thing wrong with the program is that it can slow down some sites like Gmail, but you can turn it off for any site you wish. If you haven’t tried Firebug I suggest that you give it a go.

Generating CSS with PHP has several benefits. For example, you can keep all of your colour declarations as PHP variables so if you need to change any colours it only takes a small edit and not a find/replace operation.

Getting PHP to generate CSS requires just two steps. The first thing to do is to open your CSS file and insert the following line at the top. This tells the browser that the file is CSS.
<?php header("Content-type: text/css"); ?>

The next step is to change the file extension on your CSS file from css to php. This will tell the server to parse the file as a PHP script and not a plain CSS file. This is a necessary step unless you have direct access to your web server and can set CSS files to be parsed as PHP, but I don’t suggest that you do this as it will slow down the server when it serves normal CSS files. Once you have changed the extension you need to change the link to have the same connection.

<link rel="stylesheet" type="text/css" media="screen" href="style.php">

You are now ready to start putting PHP into your CSS files. Take the following CSS file.
body{
  background:#fff;
  color:#333;
}
h1,h2,h3,h4{
  color:#00840;
}

The first thing we might do is to standardise the colour declarations.

<?php
  header("Content-type: text/css");
  $white = '#fff';
  $dkgray = '#333';
  $dkgreen = '#008400';
?>
body{
  background:<?php echo $white; ?>;
  color:<?php echo $dkgray; ?>;
}
h1,h2,h3,h4{
  color:<?php echo $dkgreen; ?>;
}

A better way to use colours is to call the variable by the function rather than the value of the colour. So using the previous example I will rename the colours so that we use the function.

<?php
  header("Content-type: text/css");
  $background = '#fff';
  $text = '#333';
  $heading = '#008400';
?>
body{
  background:<?php echo $background; ?>;
  color:<?php echo $text; ?>;
}
h1,h2,h3,h4{
  color:<?php echo $heading; ?>;
}