sudo pear channel-discover pear.phpunit.de

then

sudo pear channel-discover pear.symfony-project.com

and then

sudo pear install phpunit/PHPUnit

Some blurred text

Some blurred text

Example:

HTML:

<h1 class="blurred">Blurred text</h1>

CSS:

h1.blurred {
	color: #FFF;
}
h1.blurred:hover {
	cursor: pointer;
	color: #666!important;
	text-shadow: 0 0 5px #444;
}

The colours need to be selected carefully, as the shadows are often a bit lighter than the foreground text colour. Shadow size also plays a role. 5px seems to be effective, but 10px can wash the colour out.

To apply the effect to a block element, you'll need to use the box-shadow property instead of the text-shadow property, but otherwise it's the the same.

For more effects, you could apply opacity to make the text a little see through and see how that works out!

If you find this useful, please check out my portfolio site.

<?php
setcookie('name', 'value', time()+3600);
?>

The above would set a cookie for one hour into the future.

<?php
setcookie('name', 'value', time()-3600);
?>

The above should set a cookie for one hour into the past, making it expire and effectively deleting it. Today, this wasn't the case, but adding a path did the trick.

<?php
setcookie('name', 'value', time()+3600, '/');
?>

The above sets it for an hour and for the whole domain. Adding the '/' to both the setting and expiring did the trick!

As we speak only photos I could Bluetooth to my phone have been added, will upload some more from my More photos added from my minimo later!

<?php
function __autoload($class_name) {
    require_once $class_name . '.php';
}

$obj  = new MyClass1();
$obj2 = new MyClass2(); 
?>

The function launches when ever a class is initiated, from what I can tell. Not sure how it would work with files held in multiple folders, as I like to do, but certainly a beautiful piece of kit... Also, not sure if the piece of code has to be written into each file or if you (ironically) have to include it! I'll be giving it a go and will report back.

Some great user examples on the PHP.net page too.

Titles

Often in Firefox, I find myself with quite a few tags but some of them just show 'Untitled' which just isn't very useful. Some sort of identification is always welcome by the user, whether they've minimized or tabbed your page.

Background color

This is a trivial issue and probably less than 0.1% of people will ever even notice it, but I will and it's a commonly forgotten bit of CSS or HTML when white backgrounds are used.

Most, if not all, modern browsers have a white background set as the default, but if you change the settings to show a light grey background instead, you soon realize the number of developers who just simply forget an attribute when really, the case should be the opposite. This is something I picked up from a colleague of mine from my days at Monkeehouse, Zoe Blade.

Alt tags

Whatever your feelings about accessibility, I think it's something that should always be considered. Whether client's require it or not, it often leads to code that's valid. Alt tags should be used wherever possible.

Alt tags shouldn't be blank, but if there's nothing to say, don't say it. If you can't apply an alt tag, maybe consider making the image a background as this will keep it out of the page and hopefully increase load time for those not using visual browsers.

At the moment, my BBCode doesn't support this, so I am guilty of not following this rule on some occasions, but I plan to make the necessary changes very soon.

&

Ampersand's do not validate, so when called dynamically through a database or AJAX, make sure you call ampersands correctly! not & but an & followed by amp;

This should apply everywhere, be it content, links, titles or even meta data.

Summary

That's all I've got for now, but hopefully I can part with some more words of wisdom in the future. The tips I've posted above should help to make your code validate first time, rather than having to go back and tidy up little things at the end.

I know what all the tags it suggest are, except for the 'del' and 'ins' tags. Turns out that they are indeed very useful and overcome a redundant and annoying bit of BBCode script I had to write myself.

The del tag signals that the text it contains has been deleted, while the ins tag signifies that new text has been inserted.

I am currently doing something similar with BBCode, which wraps text in a span and adds a strike through attribute. I think I'll be replacing this to just display a del tag instead, although I am not 100% sure if this purely presentational and should be left as is, or if the del tag provides more important information for bots/spiders.

function truncate(content, append, len) {
  // get the length that should be truncated
  if(!len) {
    var len = 255;
  }
  var p = content;
  // If nothing's been specified to be appended to the end of the truncation
  if(!append) {
    append = '';
  }
  if (p) {
    var trunc = p;
    // if the post is longer than the max length
    if (trunc.length >= len) {
    // remove images
    trunc = trunc.replace(/<\img[^>]*>/g,'');
    // remove flash videos
    trunc = trunc.replace(/<object(?:.|\s)*?<\/object>/g,'');
    // truncate the text left over
    trunc = trunc.substring(0, len);
    // find the last whole word
    trunc = trunc.replace(/\w+$/, '');
  } else {
    // remove images
    trunc = trunc.replace(/<\img[^>]*>/g,'');
    // remove flash videos
    trunc = trunc.replace(/<object(?:.|\s)*?<\/object>/g,'');
  }
  return p;
}

The above function will strip out image and flash video tags and then truncate the text to a specified maximum length (255 default). Once it's been truncated, it will go back to the last full word. The code isn't actually that long, I just left the comments I wrote in for convenience.

It would be easy to add more tags, striping out formatting or script tags. My regular expressions, especially in JavaScript, are not my strong point so I'm sure there would be any easier way to do the striping out. I'm thinking something similar to the str_replace function in PHP where you can pass an array of terms to replace.

Lots of the functionality was learnt on the WebDevTips website and especially using their Regular Expressions Tester.

element:first-child {
  background-color: red;
}

For IE6, you can simply use the following to check for a previous sibling:

element {
  background-color: expression(this.previousSibling==null?'red':'green');
}

The above checks for a previous sibling and where there are none, the background color is red, where there are previous siblings (every other item), the background color is green. Similarly, you can just use the following to re-create the :last-child pseudo-class:

element {
  background-color: expression(this.nextSibling==null?'red':'green');
}

So there you are, a simple fix for some of your pseudo-class woes!

I did have some trouble, but as you can see from the comments on the page, I got there in the end.

Please remember, that this fix relies on JavaScript to work, and if the end user does not have JavaScript enabled, the style will be ignored. To make sure standards compliant browsers see this, just make sure you keep the pseudo-class anyway!

element.setAttribute('onclick','event();')

IE needs the following:

element.onclick = eventCaller;

function eventCaller() {
  event();
}

Once I had the above working, I was confident that I could work around this so that the eventCaller function wasn't necessary, but it seems that it is.

For other attributes, such as the class name, you'll need the following:

element.className = 'class-name';

Styles work in a different way and it makes sense not to use the setAttribute method, but it would be nice to have the option to apply all your styles just once, rather than creating a new reference for every single one.

Microsoft promises that IE8 will be the most compliant version, but I sincerely hope that their claims don't just apply to CSS and the DOM, but to the JavaScript API and JavaScript methods too.

height: 1%

Adding the above to a floated element somehow fixes some issues, while in other instances it does nothing at all. This is the fix I've come across most in my travels, but it has only worked in maybe 25% of instances that I've needed to use it.

The fix I've come across has worked in the few instances I've given it a go in. I've even left the original styles on the element and just added my fix to an IE6 specific stylesheet.

display: inline;

That's it. Well, almost. This fixes a few issues but in some ways creates others. With a float, other items will adapt around it by filling the space that's left. When using the above fix, any other elements that should be on the same line will tend to wrap round. The fix for this is to apply the same fix. If you put these all into a containing div, that doesn't need to have any of it's own styles, or may even exist, it will wrap around perfectly, from top to bottom.

The first issue this creates is that all the elements with the inline attribute will all be vertically aligned to the bottom of the tallest one. This can be fixed with the following applied to all affected elements:

vertical-align: top;

One of the issues this inline fix fixes is that margins will no longer double in IE6 as they can when you float an element. The biggest plus for this 'hack' is that it completely avoids the 3pixel bug and will hopefully that will just mean fewer IE6 specific styles.

Please remember that the fixes should be IE specific, whether you hack that or use a conditional comment to create an IE6 stylesheet, Firefox will completely ignore a whole bunch of any styles you set (width most importantly) if you use the inline attribute.

I mainly posted this for my own reference, but please do leave a comment and let me know if it works for you!

div {
  float: left;
  margin: 0 0 0 100px;
}

A problem with floats is that IE6 doubles margins ([among other things!), and it's a pain to get right when you have values that don't divide equally into two!

div {
  float: left;
  margin: 0 0 0 100px;
  _margin: 0 0 0 50px;
}

This would half the margin in IE6, which then doubles it giving you the correct value. The problem with this is that IE7 still reads this hack. Annoying. However, there are two ways to reset what you've just done. One way requires a new block of code, which just bloats things even more. The other, the one illustrated bellow actually mimics the IE6 hack, but only IE7 can read it!

div {
  float: left;
  margin: 0 0 0 100px;
  _margin: 0 0 0 50px;
  *margin: 0 0 0 100px;
}

The first margin is for all browsers, IE6 and 7 both read the second margin value, but then we make sure IE7 gets the value it really needs with the third one. This is three times the code we SHOULD need, but with the conditional comments, we'd be creating more files and more code because we'd have to re-define the selectors, so for the odd hack it's not so bad when it comes to development.

If you're finding that you've got more than 10 or 20 lines of hacks, it's probably better to organize them into a file on their own. The only drawback to this method is that your CSS won't validate, but as I suggested, keeping it either separate or after your real CSS, you won't run into any problems!

If you know of any other hacks, please feel free to comment.

Text editors

Among the most important tools you'll need for web development, unless of course you plump for using Dreamweaver. Personally, I find Bare Bones' selection of software to be the best. Text Wrangler is an awesome, free, tool and is now compatible with another piece of software that was previously only compatible with BBEdit, Bare Bones' flagship product.

If you can afford BBEdit, there are plenty more features, but I've found Text Wrangler to be good enough. Having usedBBEdit previously, I do miss the odd feature, but if you haven't used it before, you'll find it to be a very reliable bit of software.

It's worth checking out this video podcast from MacBreak for a quick look at some alternatives and how they stack up against Text Wrangler and BBEdit.

FTP

When it comes to FTP, getting your files online is all you really need and there are plenty of free tools around. I've personally used Fugu and found it to be very good at what it does.

I personally use VicomSoft's FTP client, which previously catered for BBEdit users and allowed them to edit live files right of the server. It is now compatible with Text Wrangler and a selection of other text editors, so it's well worth a look. The interface is also really nice and straightforward.

Fugu is a great free alternative, but you don't get the almost priceless integration of your favourite text editor with your FTP client!

Graphics

For photo editing, look no further than Pixelmator. For the very basics, it does it's job fast, efficiently and very well. There are no vector capabilities and the results from using non-photo editing aspects are not always that great, but for chopping, resizing and manipulating photos quickly and easily, you can't go wrong with this!

For something like Flash, unfortunately, Adobe's offering is the only one that works. For website layouts, you could give VectorDesigner a go, but there are hardly any tutorials and very little help around right now. If you've used Illustrator in the past, you shouldn't have many problems with it. Both of these programs make use of Leopard's core features andVectorDesigner has the added bonus of Flickr integration! For raster based design, Photoshop will probably be your best bet.

Stats

Google Analytics is probably one of the best web stat tools around. Woopra is currently in beta and showing some real promise. They were featured on GeekBrief.tv and seemed to be very impressive. Be Unequaled has too many monthly page impressions to be considered for the testing, but if you give it a go, let me know how you find it... I might actually enroll this blog into it, just to see how it works.

You can't go wrong with Analytics though. Documentation, presentation and ease of use are the best from what I've seen when compared to similar services and especially in comparison with the standard web stats you normally get through your host!

Server

As you may know, Mac OS X ships with Apache and PHP installed, but it's not the easiest thing to setup. MAMP solves that problem with ridiculous ease. As well as MySQL,PHPMyAdmin and various other features come standard. Oh and it's free! There is a paid version, but I haven't had the need for it just yet. It allows you to share local development work outside of your desktop or laptop. A very nice feature indeed.

Resources

There are so many resources out there, and you can generally find what you need from a simple Google search. For specific results, try some of these bad boys:

PSDtutes
Good-Tutorials
PHP.net
Sitepoint
Alistappart
Flashkit

Check back as I intend to update the list with any suggestions I recieve or with any sites I might come across on my travels!

From the beginning

After spending some time planning my database structure, I wanted to make a decision early on about how content would be entered. I've got some experience in working with the TinyMCE WYSIWYG, but I'm not a big fan of the tools in general. TinyMCE can actually be very simple with the most basic options, or it can be scaled up to include a large number of features. The basic version appealed to me, but I prefer to write in code so that I have complete control over how the content I produce is formatted.

I decided that the first build of the CMS would feature a text area with some custom BBCode functionality, but for others that may take up my 'system', I'd give them the option for using the WYSIWYG, which should be a fairly painless changeover. Ultimately, I'd like that to be configurable as it is in Wordpress' admin area, but that's something for the future.

The BBCode functionality was something that required a lot more work than I'd hoped because I wanted to be able to control the HTML wherever possible, while also having a code view. This meant abandoning the usual str_replace() function that replaces greater and less than symbols in the markup for most of the content. After quite a few hours, I stumbled across the answer and it's made BBCode even better! I'll be posting my version of BBCode in the future, so keep an eye out for it!

Admin

The look of the admin section was a very important aspect of the blog. Wordpress has set a high standard in my eyes and although I wanted to replicate their ease of use, I didn't want to copy what had already been done. It was important because I intended for it to be the only piece that was guaranteed to be copied again and again, whereas the front end could be built in a million different ways. I also wanted my future use of the system to be as easy as possible. I have websites that are updated purely through PHPMyAdmin, but this isn't an option for something I want to take seriously.

Once I had the public end of the site being fed the way I wanted it to be, I began building the admin area as just very simple pages. I wanted to give the user some continuity between the front and back end, so I've tried to use the same styles wherever possible. Once I had everything working, I went back into the display class and mixed it up a bit!

Off course, only those that use the blog for their own sites will know how it looks and how well it works!

Client side

The visitors end of the site was also something I wanted to make a really show piece on my personal blog. I wanted it to be feature rich, but simple and intuitive. Hopefully I've achieved that, but if I haven't, please do tell me where I've gone wrong! I've kept the overall theme as minimal as possible, with graphics and icons only added to make certain things stand out more.

Getting features like the tag clouds, categories and the pagination working wasn't as painful as it has been in the past. I guess practice has made it easier for me to get things done. Tag clouds were new to me, on the build front, but with a bit of thought and planning it went very well. I'd even suggest it went a LOT better than I had expected, considering it worked first time!

I decided to put in features that be useful for the user but also for future products, the pick of which were the tag cloud, categorisation, tagging, related topics (by tag relevance). The related topics feature was among the most difficult, but I managed to minimize the processing by getting a MySQL query do most of the work.

Being a fan of the open source community, but wanting to cover my own intellectual property, I decided to put mark my posts as being part of the Creative Commons license (see bottom of this page). I have a comment listing a few details with links to the correct documentation that applies to the license I would enforce.

JavaScript & Ajax

I REALLY wanted to showcase my JavaScript skills, but I like to build degradable features. With that in mind, I found it difficult to come up with something that would really benefit the site enough to be included. I decided against using any frameworks so that I could get stuck in. I know for sure that what I have isn't coded as elegantly or as simply as it possibly could be, but it's built to the best of my ability and at the time of writing, the JavaScript file is just 4kb!

The first bit of JS that made it in was a simple image re-sizer. In the event that I link to external images, or am just too lazy to re-size an image in the first place, all images are dynamically given a CSS style the changes their width to match the width of the main content. I've used this on the Be Unequaled blog and it was a feature that I first, inadvertently, installed on the Billionaire-Boys-Club.co.uk forum. It's a very useful tool that keeps content nicely formatted. This off course doesn't really degrade as such, BUT it doesn't add anything that will be missed if you haven't got JavaScript enabled.

The second feature was the ability to click on these re-sized images and view them in a light-box. Again, a simple feature, just not one that is available to those without JavaScript. I ended up making a custom script that just works so nicely. If an image is a link, regardless of size, it stays a link and doesn't show a light-box. Also, any images that would popup in a window larger than the available screen space would actually cause a few scrolling problems. I over came this by disabling the light-box feature, but making this image open in a new window. Not as elegant as a light-box, but certainly better than having a window that doesn't go anywhere. The light-box was completely custom made and I'm really proud of it and I've tried to make it as flexible as possible.

The first Ajax feature was allowing dynamic commenting. This was just a piece of work I had to re-think and re-hash some code from a similar feature on a previous project. This had to be degradable, so it works with and without JavaScript, but with it, it's just so much more fancy!

Accessibility and SEO

I find that many of the issues raised through trying to make an accessible website apply to SEO. Correctly ordered tags, good markup and descriptive meta data, link text and well structured content usually end up ticking both boxes. SEO isn't my favourite thing because many people seem to be under the impression it can (read should!) be improved (read cheated).]

I always go by the mantra that good content will get you where you deserve to be. Not that I'm an expert at writing good content, but I hope to be descriptive and interesting enough to command a place I deserve. Whether that's first, last or anywhere in between, that's purely up to Google to decide!

W3

For many years I've followed the W3 specs and coded to a XMHTL strict standard. I have continued to for this blogging platform and I've tried to make the content delivered dynamically adhere to this specification too. If you find any pages that don't, please let me know!

Search

I have made a lot of effort in recent years to get my head around search engine friendly URLs and getting my markup into shape, so when it came to search, I initially went down a very basic tag and category only filter. After some thought and plenty of use of the blog during development, I decided a search feature might not be so bad. Specifically for finding articles I may have written to help myself! Not much use if I can't find them with ease!

For this blog, I am using the URL to send the necessary information. I have, on a personal level, normally stuck to using PHP's $_POST request over the $_GET request, but for some SEO, but mainly pagination, reasons, I decided to mix it up and get stuck in with the $_GET request.

The query is quite simple. I have filtered common words like 'and', 'the', 'it' and so on and so on. This was purely to stop results getting skewed when they were returned. Upon testing my queries, I found that some posts had 'the' up to 33 times, whereas others had just one or two instances. Couple this the more important terms in a search string often not reaching the dizzy heights of occurrences like the words 'the', 'and' or 'it' and it was an easy decision to make.

The results that are displayed are actually gathered by finding out how common the search terms are within the content for that post. I played with the idea of searching the content, title and description, but I had to keep in mind that I knew it would double, if not triple, the SQL execution time.

In the end, I thought it would be smart to search through this for the time being, as the title and meta description may be the reason someone finds my post through a search engine, so why not give them the same opportunity here? This could be something I review in a few months after looking over all the data I collect. If I personally find the server side load to be too much, I can always review it sooner.

Comments

I really wanted to push commenting in this project. I've always wanted to allow commenting and always been a fan of it, I just never knew how to approach it. I think it adds a whole other dimension to a site, so I decided to bring it to the blog!

I've shied away from using it on my own personal sites because of the threat of spam, but my curiosity won through and it's now a part of the blog! I originally planned for a password based system, but it got too complicated for a simple blog and didn't really make sense. I had too many rules and requirements that would turn me off, let alone any casual visitors that might stroll through. Hopefully what I have is enough without being too basic, as I have allowed some custom BBCode. I've also introduced Gravatars, which I think will be a nice little touch and make the comments a far more appealing part of each post.

Update: After having come across a threaded comment feature on jakeandamir.com, which uses Disqus (I just got that), I decided to see if I could replicate it. Initially, only available to those with JavaScript, I intend to make it available to those without too.

Update 2: I got comments working without JavaScript too, which meant more work in certain areas than I thought, but wasn't too bad overall. You can now reply to comments down to a third level.

Launch

So, here we are after a few months of continuous development. As you may be able to tell, I was blogging during this development time. At first the admin area was little more than a single page, but it's grown to cover every aspect of the blog that needed to be managed and I'm really really happy with how it's turned out.

The future

I really do hope that my blogging platform comes in handy for others. Be it a personal or a professional project. I feel it's simple enough for me to use and expand on in the future and could well make up the foundations of future projects.

Right now, I think it's doing it's job quite nicely!