As before, simple click the button to download a 3.5MB file from Virgin Media’s servers. The site will time how long it takes to download on your broadband connection and plot your broadband speed rating on a bar chart, allowing you to compare against other standard(ish) download speeds.
This is mainly to help with Google spidering, since the d04 subdomain doesn’t lend itself to website promotion as well as a dedicated domain would. Since I had the domain sitting spare, it made sense to bang Google Analytics on there and do some promotion for it.
The updn bit of the domain is an ambigram as well, which is nice.
Update:
To aid diagnostics (and show off a little) I’ve also written a scraper to take the content of Virgin Media’s Status page and plonk it into a table on the site. There’s even a Google Map showing the approximate location of the majority of the tickets.
I took a few minutes this morning to put a script together that would convert the comments from the old blog into the new WordPress format – another time-saving excercise that allowed me to convert 300+ comments in a few minutes.
The only hurdle I had with this was that the rowId for posts in the old table doesn’t marry up to the new one, so the process had to go something like this:
Get the entry lookup for a comment.
Find the titles of that entry from the old posts table.
Look for that title in the new posts table.
Grab the rowId from step 3.
Save the comment with the new lookup.
So! Comments are restored and visitors can continue their ranting and raving (especially on this post!), only with extra Spam protection for me, which is nice.
There comes a time when a list of records output by a MySQL query becomes too long to realistically display on a single page, and the programmer wants to break it up into pages. It might be log activity, forum posts or whatever, but the principle is the same – we only want to view a manageable section of the entire record list.
Let’s assume we’re dealing with a set of forum posts in a thread. Your query would take a unique number for the thread ($threadId) and you would pull out a list of posts like this:
<php
$postSQL="SELECT * FROM posts WHERE (THREAD=$threadId) ORDER BY ID";
$posts = mysql_query($postSQL) or die(mysql_error());
while($post=mysql_fetch_array($posts)) {
// display posts here
}
?>
This would return all of the posts for this thread in order of creation – ID being the master key for this table.
To split this into pages, we first need to decide how many posts we want per page. Once we have decided on this, we can see how many lines our mysql_query(), above, returns and calculate the number of pages. After that we can decide which page to show and calculate which posts go on that page.
Here’s the altered code:
<?php
$postSQL="SELECT * FROM posts WHERE (THREAD=$threadId) ORDER BY ID";
$posts = mysql_query($postSQL) or die(mysql_error());
$postCount =mysql_affected_rows();
$postsPerPage=25;
$pageCount =ceil($postCount/$postsPerPage);
$pageNum =min(max(1, (int)$_GET['page']), $pageCount);
$firstPost =($pageNum-1)*$postsPerPage;
$lastPost =min($firstPost+$postsPerPage, $postCount);
$posts = mysql_query("$postSQL LIMIT $firstPost, $postsPerPage")
or die(mysql_error());
while($post=mysql_fetch_array($posts)) {
// display posts here
}
?>
As you can see, we call mysql_query() twice now – the first time to get the total number of posts and the second time to get the subset of those posts once we have decided which ones we want. The highlighted green section shows what has been added, and I’ll go through them here:
$postCount =mysql_affected_rows();
Records the total number of posts returned. We need this so we can calculate how many pages we have in total using…
$postsPerPage=25;
This is how many posts we want on a single page. You can store this in a table for easy altering, or allow it to be overwritten from the URL so that users can decide on their own page sizes.
$pageCount =ceil($postCount/$postsPerPage);
The number of pages is the number of posts divided by the number of posts per page, and rounded up, so ‘30 posts at 25 posts per page’ would return two pages.
Slightly more tricky to read, this line limits the number of the page to be displayed between 1 and the total number of pages, taking into account any page number specified in the URL with ‘&page=’, even if a value is not given.
$firstPost =($pageNum-1)*$postsPerPage;
We need to know the record position – not the ID – of the first post so that we can tell MySQL where to start counting from. This number starts at zero whereas your ID would start at one.
We don’t actually need $lastPost for anything in this example, but it’s nice if you want to display a message along the lines of “Showing posts 25 to 50 of 376″. This value is the actual ID of the last post on the page, so it starts at one and never goes above $postCount.
$posts = mysql_query(“$postSQL LIMIT $firstPost, $postsPerPage”)
or die(mysql_error());
Finally we run your original SQL statement – here held in $postSQL – a second time but with our calculated limits applied.
In preparation for our upcoming trip to Tokyo I decided to check with airline KLM to ensure that my booking was complete and seats reserved. I toddled off to the KLM website using Internet Explorer 8 Beta 2 (since the window happened to be open) and was promptly informed that my browser wasn’t supported (click the image to the right).
The stupid thing about the method of detection they’ve employed is that it’s all JavaScript based, since the website loads without problems and then redirects to the error message. Once there, you can simply opt to continue using your current browser anyway and the site works without problems. Amazing!
The problem, of course, extends from using the browser’s UserAgent string to make a guess at compatibility. In this case a newer version of an existing browser, which you would reasonably expect to have the same feature set, has caused problems simply through not being recognised.
The answer is not to do any browser detection and – assuming your site is complex enough to warrant it – simply provide a link to a technical problems help page. Writing your site in a non-browser-specific way should be a no-brainer these days, too.
After adding the comments the other day I noticed that the website code was, quite frankly, a mess, so I’ve taken a couple of hours out to rewrite the bl0g structure in Strict XHTML 1.0 as well as CSS v2.1 – this should make the site more compatible with more browsers (looking forward to IE8 here…) as well as cleaner and better for Search Engines.
The older content will most likely break all this, since much of it is HTML4, and probably not very legit at that, so I haven’t bothered linking to the validation for that reason. Any content from this entry forward, however, should be perfectly OK. I’ll probably run this through the w3c validators, JUST to be sure.
No, not this one. I’ve spent the weekend rewriting a jewellery website to make it ridiculously Search Engine friendly using mod_rewrite and anything else I can think of. It all came about when I asked a client of mine how she was doing with her Google Adwords and it transpired the site needed an overhaul – so away I went.
Since I’ve been practising SEO on this site and sharing info with K on the subject, it was fairly easy to start from scratch and put together the product category and viewing structure that was required. Every page in the category section has URLs that are rewritten from:
This means the Search Engines see the former, but my script is the latter and much, much easier to work with. Best of both worlds? Yes, but it requires a lot of though into how to structure your RewriteRules and even what order to place them in.
OK, so the page URLs can be fancy schmancy keyword-laden affairs, but you have to generate them as well, so a local version of Apache is essential because you don’t want to be configuring and restarting it on a live server in the hope that you got it right first time. It doesn’t help that I have no real clue how Regular Expressions work, either – most of mine are copy/paste.
I’ve reinstated the old Broadband Speed Test since NTL were rebranded Virgin Media, and put it back online at www.speedtest.d04.netwww.updn.co.uk for you all to play with. This is seriously broadband only, and it’s really only good for Virgin Media Broadband users.
K and myself have definately been upgraded to the new 20MBit package. Upload speeds (using other broadband speed tests, since mine only does download) have topped out somewhere around 720Kbit and my downloads this morning look ike this:
Virgin Media Speed Test - Click to Enlarge
It may be that I am limited by my cable modem. Despite being good got approx 40MBit, the Motorola Surfboard SB4100 that us oldies (K, BB and myself) use is getting on a bit. At this time of the morning I can consistently download at 12MBit using IE, with FireFox being slightly slower.
23rd July ‘09:
I’ve added the list of current service tickets as well, so you can see if there’s a problem in your area that may affect your download speed.
Maybe a bug, maybe a strict adhereance to HTML coding regs, but if you miss the ‘#’ from an imagemap reference it won’t work in IE. I found this out the hard way. Eg:
<IMG SRC=”someimage” ISMAP USEMAP=”#somemap”>
If you miss out the ‘#’, it won’t work in Internet Explorer, but it will work in Firefox et al.
For a project at work I had to create a true colour PNG from scratch using GD, copy a load of image files to it from various locations and then display it on-screen.
The code to create a transparent PNG turned out to be a litle complicated:
<?php
// create a true colour, transparent image
// turn blending OFF and draw a background rectangle in our transparent colour
$image=imagecreatetruecolor($iwidth,$iheight);
imagealphablending($image,false);
$col=imagecolorallocatealpha($image,255,255,255,127);
imagefilledrectangle($image,0,0,$iwidth,$iheight,$col);
imagealphablending($image,true);
// ^^ Alpha blanding is back on.
// insert image manipulation stuff in here
// output the results...
header("Content-Type: image/png;");
imagealphablending($image,false);
imagesavealpha($image,true);
imagepng($image);
?>
Important Note: If you output the image direct into the document stream as this example does, the PNG fix that uses bahaviours won’t work as it’s not a true PNG. For that, you’ll have to drop the header and give imagepng() a filename and show that file. Seems to work fine in other browsers, however.
Download Files Click Here to Download
the HTML source.
This code allows you to create a vertically-scrolling text box of information – such as a news ticker – to your website quickly and easily. It does not use an IFRAME so the scrolling content is actually part of your document, making it more Search Engine friendly and easier do produce by simply populating it with content from your database. This makes it XHTML Strict as well.
The DHTML vertical scroller script has been tested with the following Windows browsers, if you experience any problems, please let me know:
Google Chrome 2
Firefox 3
Internet Explorer 7
Opera 9.50
Safari 3
The vertical scroller works by having two DIVs, one inside the other. The outer DIV acts as a display frame for the scrolling content, while the inner one holds the content itself. First of all, then, we need two DIVs:
<div id="scrollBox" class="scrollBox">
<div id="scrollTxt" class="scrollTxt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor
<a href="#" onmouseover="scrStop();" onmouseout="scrMove();">MOUSE HERE</a>
sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Phasellus tincidunt eros at risus consectetur feugiat.
Etiam id erat vel lectus pharetra posuere. Maecenas rhoncus est vel lectus
posuere dictum. Curabitur rhoncus ligula laoreet nisl rutrum sit amet
convallis purus tincidunt. Ut ullamcorper lorem eu odio tempus placerat.
Proin cursus semper elit sed pharetra. Nam convallis, quam vitae facilisis
varius, ligula purus egestas justo, vitae eleifend metus turpis ac felis.
Aliquam tempus nisi id ligula semper sed porta odio dictum.
</div>
</div>
As you can see, the two DIVs are nested, and I’ve filled our example scroller with typical Lorem Ipsum text just to pad things out.
Our next step is to apply some CSS styles to the boxes to ensure they appear one inside the other. We do this by adding a small stylesheet in our document’s header:
<style type="text/css">
.scrollBox {
/* The box displaying the scrolling content */
position: absolute;
top: 30px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 200px;
}
</style>
For this example, the box is positioned at coordinates 200,30 from the top-left, but you can essentially do whatever you want with it.
All that remains now is to animate the inner box, moving it inside the constraints of the outer box and looping when it is no longer visible. We accomplish this with JavaScript, but there’s an important point that needs making here, and that is: You don’t know the height of your content until it is loaded.
What this means is that we don’t know how far the scrolling content inside the box has to travel until we’ve loaded it. The box may be showing five lines of text or it may be showing fifty, we don’t know, and so we need to calculate the content height once the page has finished loading. Normally, you would use:
<body onload="doScroll();">
Which would only fire once the page had loaded all elements. For this example, however, I have called the doScroll(); function immediately after displaying the nested DIVs, since the box only contains text and already has a font assigned to it, and therefore the height of the inner box is already finalised.
Here’s the JavaScript required to get the height of the scrolling content and start the scroll loop:
<script type="text/javascript">
var scrollSpeed =1; // number of pixels to change every frame
var scrollDepth =200; // height of your display box
var scrollHeight=0; // this will hold the height of your content
var scrollDelay=25; // delay between movements.
var scrollPos=scrollDepth; // current scroll position
var scrollMov=scrollSpeed; // for stop&start of scroll
function doScroll() {
if(scrollHeight==0) { getHeight(); }
scrollPos-=scrollMov;
if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
document.getElementById('scrollTxt').style.top=scrollPos+'px';
setTimeout('doScroll();', scrollDelay);
}
function getHeight() {
scrollHeight=document.getElementById('scrollTxt').offsetHeight;
}
function scrMove() { scrollMov=scrollSpeed; }
function scrStop() { scrollMov=0; }
</script>
As you can see, doScroll(); calls itself automatically once it’s started, so all that is required is a single call to set it rolling. You can change the variables in the JavaScript so speed up the scroll or change the frequency of movement by adjusting scrollSpeed and scrollDelay accordingly.
Update:
I’ve added a link in the sample content that will stop the scrolling when you put your mouse over it. This is achieved using two functions, scrStop() and scrMove() which stop and restart the scrolling text, and are placed in onmouseover=”" and onmouseout=”" respectively. You can add these so that your users don’t have to chase a link as it scrolls up the page.
You can see the code working by clicking the link in the ‘Download Files’ box at the top of the page. It will open the document in a new window, and all you need to do is view the source code. Please leave any comments or questions below, and feel free to rate this post while you’re here – I might even respond at some point.
WordPress Comments Restored
May 20th, 2009I took a few minutes this morning to put a script together that would convert the comments from the old blog into the new WordPress format – another time-saving excercise that allowed me to convert 300+ comments in a few minutes.
The only hurdle I had with this was that the rowId for posts in the old table doesn’t marry up to the new one, so the process had to go something like this:
So! Comments are restored and visitors can continue their ranting and raving (especially on this post!), only with extra Spam protection for me, which is nice.
Edit:
Two posts in two days! We’re on a roll!
Tags: Comments, WordPress
Posted in Blog, PHP | No Comments »