It all started with Steve Jobs writing a letter announcing why Flash will never be supported on the iPhone or iPad. It has been the talk of the industry and now more hands are rising in favour of ditching Flash and living with HTML 5. Following is Opera (the browser) and Microsoft both stating that they back HTML 5 in favour of Flash. (Microsoft clearly doesn’t realise it’s Silverlight is likely to die as well)

With Javascript being able to do most of Flash’s tricks natively it’s main purpose has been used for video and audio. Now HTML 5 can do both of these making Flash virtually pointless.

YouTube, Vimeo and Scribd are just a few of the sites that used to rely heavily on Flash that are taking advantage of HTML 5 features to rid themselves of Flash for a better user experience. I myself have been working of ridding Flash out of my sites, namely NexTunes.com.au‘s audio player will run using the audio tag in browsers which support it coming the next release of the site and it will also say goodbye to any Flash based ads.

Adobe are obviously concerned about this recent onslaught from competitors and will be interesting to see whether or not they try new techniques to keep Flash alive.

The beta currently supports the following browsers:

• Google Chrome
• Safari (4+)
• Internet Explorer with Chrome Frame installed

If you’re using one of these browsers, jump on to the YouTube HTML 5 beta page to opt-in and start trying out the Flash-free video player.

http://www.youtube.com/html5

The Problems

a) Your background won’t fill the screen even though you’ve set the color in the body via CSS as per below:

Background doesn't fill the screen

b) Can’t get a div or other element to stretch 100% of the browser window.

The Solution

It’s quite simple, in your CSS put height: 100%; in both the html and body as follows:

html {
  height: 100%;
}

body {
  height: 100%;
  ........
}

Why does it occur?

The reasons these problems occur is because most browsers don’t automatically render the page/body to 100% of the browser windows height.  This in turn means that when the background is rendered on the body or the height is set to 100% it will only fill 100% of whatever the body is. This is why setting the html and body’s height to 100% will fix the issue.

Well all major browser developers are on board INCLUDING Microsoft. This is great news, and it’s good to see Microsoft beginning to show support for these standards and putting in the effort to get IE6 + 7 users to upgrade to version 8. Thank you Microsoft!

Instead of me rambling on about what’s coming and what’s currently supported, I’ll show you a video from FOWA London 2009 of Bruce Lawson from Opera talking about HTML 5 and demoing on various browsers.

So many of the HTML 5 features are out and running in some browsers. However, the fact is until the modern browser uptake is greater we’d just be needing to code 2 sets of scripts, one for old and one for new. So at least for the next few years there is not a huge advantage in jumping onboard the HTML 5 train.

Useful Links:

• http://html5doctor.com/
• http://html5demos.com/

What is it?

To learn how to find the loop, it would be good to know what it does, and it’s purpose within a template. Loops are used in virtually all computer programming languages, it’s purpose it to repeat a set of tasks. Basically, you could code the same thing 10 times or use a loop to repeat the action 10 times. In WordPress, loops are used to get each blog article, or piece of information from the database, then read it out in HTML. This is how you see multiple articles presented on your blogs homepage without the code being in the template for each article. “The Loop” will generally only be on the index.php page of your template.

Finding the loop…

Every PHP programmer will program their template differently which means each loop is different. to combat this I’m going to attempt to arm you with the basics of PHP so that you can understand the workings of the code and find “the loop”.

Reading PHP

Lets start with separating the PHP from the HTML. It is important to recognise the difference between PHP and HTML, PHP being what’s known as a “Server-Side Language” and HTML being a “Client-Side Language”. PHP is run on the server, hence the term “Server-Side Language” – All PHP scripts are read by the server before any information is sent to the web browser for the “client” to see. HTML being “Client-Side” is read by the web browser on the clients side – using their computer resources, not the servers. “Server-Side” scripting will always be processed first on the server, then the information will be sent the “Client-Side” so it can present the information to you.

Finding the PHP is fairly easy. All PHP is enclosed between either of the following:

<?php
	// PHP script here
?>

<?
	// PHP script here
?>

Both <? php & <? do the exact same thing, just one is shorter than the other. ?> will signal the end of a set of PHP scripting. So to find “the loop” you need to look within these.

The start of the loop!

The proper term for the most commonly used “loop” in WordPress is a “while loop”. The most commonly used “while” codes will look like this:

while (have_posts()) : the_post();
if (have_posts()) : while (have_posts()) : the_post();

This is the start of “the loop”. It’s effectively telling the server “while there is new posts, do the following”. Not too different to standard English. The “if” on the second code is first asking “if there is a post, then do the while loop”.

It might be an idea to mark this spot for reference, so after the PHP script put a HTML comment like follows:

<?php while (have_posts()) : the_post(); ?>
	<!-- Start of the loop -->

The end of the loop!

Now we’ve found the start of “the loop”, we need to find the end. This should always look as follows:

endwhile;

This will end the content that is being “looped”.

Lets mark the end of “the loop” with a HTML comment once more but this time above the PHP script like follows:

	<!-- End of the loop -->
<?php endwhile; ?>

Okay so now you have found “the loop” the content within where you have marked is inside the loop, anything outside this script area is “outside the loop”. HTML within this loop will behave as normal HTML however it is just repeated multiple times.

So there we have it – finding “the loop” in a nutshell. “The loop” will generally only be on the home page and there should only be one loop, if you find multiple loops, use your HTML knowledge to find which is the correct loop for what you are trying to do.

I’ve released version 1.1.1 of my gzip php script for Javascript and CSS which is a minor updates and adds a few handy new features. You can get the latest version of the script here. You can read the release notes here. ]]> http://www.thewebdevelopmentblog.com/2008/12/script-new-version-of-gzip-for-javascript-css-now-available/feed/ 2 http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/ http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/#comments Sun, 02 Nov 2008 09:21:11 +0000 Jason Stockton http://thewebdevelopmentblog.com/?p=140 Today I’ve updated my gzip compression for javascript and CSS script to fix a security flaw. If you’re using V1.0 I advise you update to V1.1 which is available here. You can read the release notes here.

The Solution

All you need to do is in your CSS is set the overflow as hidden.

overflow: hidden;

Here’s an inline example.

<div style="width:100%; height:1px; overflow:hidden; background-color:#000;"></div>

So why won’t Internet Explorer let it go less then 12px without this?

When you make a div in IE it will automatically stretch to the size of the content and not the height that you’ve set in your CSS. In typical IE fashion, it will always think there is text inside the div even when there isn’t, thus forcing the div to fit the size font you have set. Telling it to hide the overflow will then tell it “we don’t care if it goes over, just hide it!” fixing our problem. You can also change the font-size to smaller which IE will then allow the div to shrink to the height of the smaller font-size you’ve set. The overflow option is probably better, but both will do the trick. Now we have solved another Internet Explorer problem… There’s still more to come, so keep a look out!

The set-up I wanted to achieve was as follows…

Very commonly used design, yet getting it to play ball was more painful.

You’d think that the following would do the trick…

<table cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
		<td style="background-image:url(image);"></td>
		<td style="width:800px"></td>
		<td style="background-image:url(image);"></td>
	</tr>
</table>

What you’ll find is the two side panels will stretch perfectly as wanted in some browsers, however others do not want to play ball.

The Solution:

The solution is thankfully fairly simple, however it’s not a very clean way of doing it. But the point is it will do the trick. What you need to do is give the two side panels a percentage width of 50% each (or if you have 1 flexible table cell, then 100%). Now in some browsers this will shrink the middle cell to nothing unless it has content to stretch it to the fixed width. If you don’t have the content in there to do that already, add in a transparent image and size it to the width of the cell. For example:

<table cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
		<td style="background-image:url(image); width:50%;"></td>
		<td style="width:800px">
			<img src="images/spacer.gif" width="800" height="1" border="0" alt="Spacer">
		</td>
		<td style="background-image:url(image); width:50%;"></td>
	</tr>
</table>

The above will (forcefully) behave as we want it to. If you have a table inside the fixed size cell, usually if you set the tables width it will be enough to force the cell to stay at it’s fixed width.

So there you have it, the above worked in IE, Safari, Firefox, Opera, Chrome and on the iPhone.

Step 1: Add the gzip.php file.

Download the gzip.php file here. (V1.1.1)

Then add it to the root directory of your website.

Step 2: Adjust your HTML.

We now need to set your Javascript and CSS to run through the compression. We do this by adjusting the script and style addresses as follows…

For CSS

<link href="gzip.php?f0=css/main.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js" type="text/javascript"></script>

To change the address of the scripts just change the address that is in italic. Files are restricted to only files with the .css or .js extension.

Step 3: Merging Files.

Another slow point for loading time is using multiple Javascript files and CSS style sheets. The reason for this is for each file the browser needs to re-connect to the server before it can download it. However if you’re like me, you don’t want to have to merge all your files into 1 manually, so I’ve built in this ability into gzip.php. Simply merge files together as follows…

For CSS

<link href="gzip.php?f0=css/main.css&f1=css/more.css&f2=css/evenmore.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js&f1=javascript/more.js&f2=javascript/evenmore.js" type="text/javascript"></script>

So as you can see you can add files by adding in more f variables which count up from 0. You can add up to 100 files in the current configuration. Although if you have that many Javascript or CSS files then you should look at fixing that…

NOTE: Make sure you don’t miss any numbers when counting up otherwise it won’t include all your files.

Step 4: Caching Files.

Another trick that will help speed up your site is caching these files. Again I have that covered! Simply add cache=true& to the front of the file address as follows…

gzip.php?cache=true&f0=javascript/main.js&f1=javascript/more.js

If you don’t want to have the default 3 days expiry you may add in exp=#ofDays& and it will change the expiry period. For example the following will set the cache period to 31 days…

gzip.php?cache=true&exp=31&f0=javascript/main.js&f1=javascript/more.js

NOTE: It is not recommended that you cache files that are updated frequently as when the file is updated it won’t update in the browser for the number of days you set.

And there you have it! I have decreased loading time on my sites dramatically using this exact script so I hope it helps you out as much as it has with me!

UPDATE: Just released version 1.1.1 which adds new functionality and better ways to pinpoint errors. Release Notes.

UPDATE: Just released version 1.1 which fixes a security hole (thanks for the heads up Nail) as well as a number of other minor updates. Release Notes.