checking out the new tweet-embed plugin for WordPress

Just to try out this new tweet-embed plugin for WordPress, I’ll post the tweet of my this blog post just to be self-referential [this meant I edited the post after completion and it being automatically tweeted].

http://twitter.com/#!/cttwtr/status/1126307979071488

It pulls the tweet from Twitter with all the same styling as the Tweeter’s own Twitter page, but this also means it keeps the tweet live for each visitor to your blog (ie the time stamp displayed is relative to your page viewer’s time of visit to your blog).

my iPad app round-up

So, I’ve had my iPad for over a month now, and I felt it was time to review the apps I have on it now. I figure a month is enough time to settle into my usage patterns and have discarded apps that just didn’t do it for me afterall.

1: Social Networking –

I don’t run one app for all my social networking, some people prefer to but I have found it better to have apps that focus on one thing, and do what they do do well. For Twitter, I was originally using Twitterific, and had just upgraded to the paid version the day before Twitter released their own app. Since then I have been devoted to the official Twitter app which is clean, intuitive, and just pretty much perfect in my book.

For Facebook, I am still floating between two apps; Friendly and the official Facebook iPhone app. Both are pretty good, Friendly is more aesthetically pleasing due to being designed for the iPad form-factor, while the official FB app seems a little more intuitive and “like” Facebook itself (as you would expect).

I’m also running FourSquare on my iPad, as I don’t have an iPhone (still!!).

2: Utilities / Lifestyle –

I have quite a few utilities set up on my iPad, for news I am running the fantastic NYTimes app, the TVNZ News app, and the NZ Herald app. I also use GeekNews to pull all my geeky tech blogs together into one streamlined place. The Mashable! app is great for a quick check up on what is trending or popping up online currently.
I am currently using PrinterShare for printing directly from the iPad on my home network. This will hopefully change when iOS4 is released for iPad (rumors indicate late November 2010 maybe).
I also have Google Earth, the IMDb app, and a great tracking app – Parcel – which allows you to just put in your tracking code allocated to the delivery you are expecting. Saves having to visit different websites and remember your tracking numbers for different companies. Some other little gems are:
– Epicurious
– Wikipanion
– Evernote
– The WordPress app for blogging on the go
– Shazam
Then for a bit of creative fun, I have GrooveMaker and Drums! GrooveMaker lets you mix tracks, and even create your own tracks on the fly. Drums! is just that, a complete drum set on your iPad – in fact, it’s actually three complete drum sets, as you can choose between Standard, Groove, and Acoustic kits. The sound is true to life, so go get it.

3: Web Dev –

A few free web-dev helpers tucked on the iPad too. I’ve got JsAnywhere and three great apps from Interactive Blasphemy. JavaScript Anywhere is a JavaScript tool which enables you to edit your JS script, adjust the CSS, and then view the results in an HTML page. You can email the results to yourself. From Interactive Blasphemy I have robots.txt, which is just that, a robots.txt generator; Password, which generates passwords of random characters of length and complexity specified; and RGB/HSB/Hex, which enables you to create that perfect shade for you web job, and also then suggests good matching and contrasting colors.

4: Games –

Yep, the main reason most people have an iPad. I am personally a big fan of the logic/strategy games. I’ll list them all, then comment on a few of them, with more in-depth reviews being added, along with links to the iTunes store, later on:
– iFighter – essentially the classic fighter game 1945 remade for the iPad
– Harbor Master
– FlightControl HD
– Canabalt
– Gravity Hook
– Angry Birds
– Angry Birds (Halloween Special)
– Cut the Rope
– Pocket Frogs
– Plants vs Zombies
– Fruit Ninja HD
– Steve Young Football
– Build-A-Lot 2
– Blue Block
– Crazy Traffic: Crashed XL
– Train Conductor 2: U.S.A.
– No, Human
– Trainyard
– UFO On Tape
– Railway
– Chicktionary
– NOM
– Fish Eat Fish
– Dismount
– GearedHD
– Air Hockey
– TicTacDojo
– Little Metal Ball
– Soosiz HD
– Physics HD
– Gravity HD
– Tilt to Live HD
– NinJump
– Red Bull RC
– Asymmetry
– 8Bit Rebellion (the Linkin Park game)

Surprisingly enough, I have found my usage of the iPad to be alot different than I planned for. I have found the games an easy way to take a 5 minute break when I need to, but have found that I actually now tend to jump on Twitter or a news site when I want a 5 minute chill out. I am still just working with iBooks as my book-reader and PDF-reader of choice. Primarily because I have no need of the flasher features of the other readers out there. Overall, I have to say that the iPad is proving itself to be very worthwhile as a tool; and I keep finding new ways for it to excel and prove it’s worth.

some nice quick generic CSS

Just a quick bit of generis CSS to throw into your style-sheets if required. Copy-paste it if required to ensure you don’t use in-line styling at all.

.whitetext { color:#fff; }
.leftpadding {padding-left:10px;}
.toppadding {padding-top:15px;}
.leftfloat img {float:left;padding-right:10px;}
.rightfloat img {float:right;padding-left:10px;}
.Size8 { font-size:8px; }
.Size10 { font-size:10px; }
.Size12 { font-size:12px; }
.Size14 { font-size:14px; }
.Size16 { font-size:16px; }
.Size18 { font-size:18px; }
.Size20 { font-size:20px; }
.Size24 { font-size:24px; }
.Size36 { font-size:36px; }
.Size48 { font-size:48px; }
.Size60 { font-size:60px; }
.Size80 { font-size:80px; }
.Size100 { font-size:100px; }
.Size120 { font-size:120px; }
.Arial { font-family:Arial; }
.Helvetica { font-family:Helvetica; }
.Tahoma { font-family:Tahoma; }
.TimesNewRoman { font-family:Times; }
.Tahoma { font-family:"Courier New"; }
.Georgia { font-family:Georgia; }
.Sansserif { font-family:sans-serif; }
.Verdana { font-family:Verdana; }
.Geneva { font-family:Geneva; }

It’s nothing flash, simply gives class to the styles for easy use in valid and clean fashion. Basically provides the means to define individual styles via the style-sheet in stead of in-line.

PHP script to spread text over multiple pages

Sometimes you’ll get a text file that is way too big to reasonably display all on one web page, this script is a simple paginator, which spreads the text over multiple pages cleanly. For the purposes of this demo, I have the data being read from a text file, however a more scalable approach would be to have the data being read from a database (I have commented this into the script).

<?php
function currPageName() {
	return substr($_SERVER['SCRIPT_NAME'], strrpos($_SERVER['SCRIPT_NAME'], 
"/")+1);
}
$filename = "text.txt";
$this_page = currPageName();
if(isset($_REQUEST['step'])) $step = $_REQUEST['step'];
if(isset($_REQUEST['start'])) $start = $_REQUEST['start'];
if(isset($_REQUEST['file'])) $filename = $_REQUEST['file'];
// **************************************************
// or cut this out and allow the database script
// **************************************************
if(!strstr(".txt", $filename)) { $file = $filename; $filename .= ".txt"; }
else $file = substr($filename, 0, strlen($filename)-4);
$text = "";
if(file_exists($filename)) {
	$file_handle = fopen($filename, "rb");
	while (!feof($file_handle) ) {
		$text .= fgets($file_handle);
	}
	fclose($file_handle);
}
// **************************************************
// cut to here when allowing the database script
// **************************************************
/*
$file = $filename;
require("./db_connector.php"); // your database connection file
$sql = "SELECT * FROM your_table_name WHERE file={$filename} LIMIT 1";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
mysql_close($conn); // assuming your connector is called $conn
$heading = $row['heading'];
$text = $row['data'];
*/
$text_limit = 600;
$text_array = explode(" ", $text);
$text_total_words = count($text_array);
if(!isset($step)) {
	$start = 0;
	$step = $text_limit;
}
$text_display = $text; 
if($text_total_words > $text_limit) { // if the page needs to be split up
	$text_display = ""; 
	for($x = $start; $x < $step; $x++) {
		$text_display .= $text_array[$x]." ";
	}
	$text_display = str_replace("\n\n", "\n</p>\n<p>\n", $text_display);
	if($start > 0) { // not page one
		$pstart = $start - $text_limit;
		if($pstart < 0) $pstart = 0;
		$pstep = $pstart + $text_limit;
		$text_display = "<a class=\"backforward\" href=\"{$this_page}?
file={$file}&start={$pstart}&step={$pstep}\"><&nbsp;Prev page</a></p>\n<br />
<br /><br />\n<p>{$text_display}";
	}
	if($text_total_words > $step) { // not the end of the text
		$nstart = $start + $text_limit;
		$nstep = $step + $text_limit;
		if($nstep > $text_total_words) $nstep = $text_total_words;
		$text_display = "{$text_display}</p>\n<br /><br /><br />\n<p>
<a class=\"backforward\" href=\"{$this_page}?file={$file}&start={$nstart}&
step={$nstep}\">Next page&nbsp;></a>";
	}
}
else { $text_display = str_replace("\n\n", "\n</p>\n<p>\n", $text_display); }
?>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en">
<head>
	<title>page_stepper</title>
	<meta http-equiv="Content-Type" content="txt/html; charset=utf-8" />
	<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html {
	background: #ddd;
}
body {
	margin: 1em 10%;
	padding: 1em 3em;
	font: 80%/1.4 tahoma, arial, helvetica, lucida sans, sans-serif;
	border: 1px solid #999;
	background: #eee;
	position: relative;
}
a {
	color: #024378;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #04569A;
	text-decoration: underline;
}
.backforward, .backforward:visited {
	background: #222 url(./site_images/overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border: none;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	font-size: 13px; 
	font-weight: bold; 
	line-height: 1; 
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
	background-color: #e62727; 
}
.backforward:hover { background-color: #cf2525; }
</style>
    
</head>
<body>
<?php echo "<p>\n{$text_display}\n</p>"; ?>
</body>
</html>

I’ve hacked in a bit of CSS from the WampServer CSS to make it look pretty, but the buttons are mine. Basically the script pulls out the desired number of words from the text data, and prints it. If there are preceeding words, a “previous” button is prepended to the text; if there is more to come, a “next” button is appended.

quick update: how to force vertical scrollbar with CSS

Still studying hard for exams over the next few weeks, but I took a quick lunch-break today and “relaxed” by doing a bit more web work. I came across the problem that some of my pages for a site were less than the height of the browser window, while others were longer. The result of this is that you get some “flickering” when navigating to different pages that don’t require a scrollbar as the layout shifts back and forth slightly if the browser doesn’t have a permanent scrollbar gutter..

The solution is to force a vertical scrollbar. This works well in all widely used browsers with only a few lines of code as the document height will always be at least one pixel longer. Just insert the following into your CSS:

html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}

What the method above does is set your site’s height to 100 percent with a bottom margin of 1 pixel to force the vertical scrollbars to appear with at least one pixel to scroll. The advantage of this is that this works no matter what the visitor’s resolution is; and you don’t need to manually set the page height.