Logic’s Last Stand

June 17, 2008

The Quest for the Holy Browser

Filed under: Computers — Tags: , , , , , , , , , , , , — Zurahn @ 6:19 pm

All the top browsers have been releasing their latest recently, and the performance improvements between them has begun to challenge for my attention despite K-Meleon’s customizable options to which I’ve become so accustomed.

Firefox 3 was just officially released, Opera 9.5 was released about a week ago, Safari 3.1 has been available for a while, and IE8 BETA and Safari 4 BETA are available.  It also just so happens K-Meleon 1.5 BETA is available as well.  I will give a run through Firefox 3, Opera 9.5, Safari 4, Internet Explorer 8 and K-Meleon 1.5.  These tests will be for how well a browser is fit to what I personally want, though, so mileage may vary on agreement in features.

First thing to note are my complaints with K-Meleon 1.15:
-Pop-up blocking is inadequate and circumventable.
-JavaScript speed is a bit slow
-It closes itself to reopen a tab (jumps around on the taskbar)
-Rendering engine is dated (early Gecko 1.8 – 52/100 on Acid3)
-View source sometimes reloads page without checking cookies (so you can’t see the source if you need to be logged in)

I’ve been giving K-Meleon 1.5 a go, and there are improvements:
-Pop-up blocking is fixed
-It no longer jumps around on the taskbar

However, all rendering is the same.

Here’s my hypothetical perfect browser, in order of priority:
-Tabbed
-Option to have URLs from address bar open in new tabs
-Fast and low memory
-Adblock and Flashblock
-Custom tab-size/reasonable tab size
-Option for tabs ONLY (no extra windows)
-Compactable (Forward/Back and address bar all on the File/Edit/etc. bar)
-Clear JavaScript error reporting
-Double-click to close tabs
-Firebug or similar tool
-Built-in XHTML validation or quick access thereof
-Good view source highlighting
-Can send any page to any other browser through menu / right-click

All browsers are tabbed, so that’s covered immediately.

For my testing, it’s going to be quite informal.  I’m not running benchmarks, just my personal subjective feelings on how things are going.

I’ll start through the technical tests first:

First test is the basic speed test.  Here’s the results in order:
1. Safari 4
2. Opera 9.5
3. Firefox 3
4. K-Meleon 1.5
5. Internet Explorer 8

The difference between Safari and Opera are relatively negligable.  I find Firefox seems a little slower rendering, though not bad by any stretch.  K-Meleon 1.5 actually comes across as a little slower at times than 1.1.5.  I’m not sure why.  It’s slow enough that there’s a desireable and noticeable difference between it and Safari.  Internet Explorer 8 is pathetic.  It is so incredibly slow, it’s hard to believe.  I’m really giving it a chance here, but it’s terrible.  There are constantly lag points where the browser doesn’t respond, the JavaScript performance is awful.  It’s just not good.

Evaluating the speed, I’d say Safari and Opera are big enough win to warrant an advantage in this area, while Internet Explorer is so brutally behind that it deserves severe penalty in this area.

Second is standards compliancy.  This is how accurately a browser renders a page with regard to standards set forth by the W3C.  Each will take the Acid3 test

1. Safari 4 – 100/100
2. Opera 9.5 – 83/100
3. Firefox 3 – 71/100
4. K-Meleon 1.5 – 52/100
5. Internet Explorer 8 – 18/100

The pattern continues in terms of technical prowess with Safari 4 leading the pack, followed by Opera, and IE8 giving a new name to failure.  In practice, though, Acid3 isn’t a perfect test as it doesn’t account for human direction.  Safari is so accurate in standards that I have found it is compatible with sites,  though Opera 9 (though I haven’t tested enough with 9.5, tends to have some problems on occasion).  This is due to the market mainly being a IE/Firefox market.  However, IE8 can’t even excel here because its standards introduce so many new problems that pages that worked in IE7 are broken in IE8.  At least there’s an emulate IE7 button.

Third and last in technical is memory management.  I opened 5 tabs of GG Weekly, waited for them to load then checked the RAM usage, then closed them all and opened 1 and checked.  Here was how that worked:
1. K-Meleon 1.5 (54MB/42MB)
2. Opera 9.5 (83MB/53MB)
3. Internet Explorer 8 (92MB/68MB)
4. Firefox 3 (100MB / 92MB)
5. Safari 4 (102MB / 94MB)

This has always been a big advantage for K-Meleon, which it still maintains.  Where Firefox 2 had significant memory issues, K-Meleon offered the same rendering at a lower bloat.  If you look at tech site tests, they declare Firefox 3 the winner in memory manage between it, IE, Opera and Safari, but why?  It’s due to that under heavy load, Firefox does an incredible job at maintaining the same memory useage.  So at lower use, it’s not as efficient, but high use, it is.  K-Meleon is the big winner here.

On to features.  URLs in the address bar to open in a new tab:
Success:
K-Meleon 1.5
Firefox 3 (with an extension)

Partial Success:
Opera 9.5 (functional work around)

Failure:
Safari 4
Internet Explorer 8

K-Meleon has this built-in, while Firefox 3 requires the Tab Mix Plus extension.  Opera 9.5 I was able to edit the keyboard shortcuts so that when I press CTRL+L to select the address bar, it also opens a new tab.  Not perfect, but very similar in function.  Safari and IE I could not find any way to have addresses open in a new tab.

Tab-size formatting:
Success:
K-Meleon 1.5
Firefox 3

Failure:
Opera 9.5 (Opera 9 skin.ini hack doesn’t work)
Safari 4
Internet Explorer 8

Another built-in function of K-Meleon.  Firefox 3 has an available adjustment in about:config, but can also be adjusted using Tab Mix Plus.  Opera 9.5 may be able to get smaller tabs via an alternate skin, but the adjustment that worked in Opoera 9.2 doesn’t appear to work here.  Safari 4 and Internet Explorer 8 don’t seem to have anything of the sort.

Tabs only:
Success:
K-Meleon 1.5
Firefox 3

Partial Success:
Opera 9.5

Failure:
Safari 4
Internet Explorer 8

For all intents and purposes, Opera is tabs only since links that are intended to open in new windows open in tabs, but technically you can always still open more than one window.  Safari and IE8 painfull always allow a new window including any target=”_blank” or “window.open()”.

Adblock and Flashblock:
Success:
K-Meleon 1.5
Firefox 3
Internet Explorer 8 (ok, I didn’t download the add-ons, but they’re out there)

Partial Success:
Opera 9.5

Failure:
Safari 4

K-Meleon has them both built-in, Firefox has the ever-popular add-ons, and IE8 has its own imitators.  Opera 9.5 has the content filter, and user-made JavaScript file tricks to get adblock and flashblock, so it works well-enough, if not bothersome to set-up.  If the extensions exist for Safari on Windows, I can’t find them while filtering through the Mac offerings.

Capactable:
Success:
K-Meleon 1.5
Firefox 3

Failure:
Opera 9.5
Safari 4
Internet Explorer 8

The usual suspects.

Double-click to close tabs:
Success:
K-Meleon 1.5
Firefox 3 (with an extension)

Failure:
Opera 9.5
Safari 4
Internet Explorer 8

Here, I actually suspect that there’s some way to do this in Opera, but I cannot find it.  And don’t think I haven’t tried.

Onto the debugging and development section.
JavaScript error reporting, HTML display:
1. Safari 4
2. Firefox 3
3. K-Meleon 1.5
4. Opera 9.5
5. Internet Explorer 8

Once I found it, Safari’s error reporting and debugging tools were very nice and clear.  Firefox 3 is also quite nice, while K-Meleon can be occasionally troublesome, and Opera’s I just find hard to read (it is rather thorough, though).  IE8 makes an error, but still gives cryptic error messages and the debugging tool just isn’t very user-friendly.

Firebug or similar tool for DOM inspection
Success:
Firefox 3
Opera 9.5
Internet Explorer 8
Safari 4

Failure:
K-Meleon 1.5

This is an area in which K-Meleon is obviously lagging behind, including the 1.5 release.

Summation:
K-Meleon in terms of options in the browser has everything built-in, which means when you install, you know you can get the features.  Improved speed and standards compliance is what it mainly needs, but certain development features are lacking while competitors are improving quickly.

Firefox’s both strength and weakness is in its extensions, as while they are good to have, if Firefox gets an upgrade, you don’t know that the extensions will keep up.  The advantage, though, of Firefox’s extensions is that there are so well organized, while for other browsers it’s all over the place.  Firefox was the only browser I could get built-in XHTML validation.

Opera’s built-in functions, particularly shortcuts, are incredibly in-depth.  Additionally, it is the only browser for which I could get an Open With option to open a page with another browser by right-clicking (K-Meleon only has the option for Internet Explorer, and I can’t get any others on there).  Opera continues to feel “almost there”.  Feature-rich, quick and good with resources, but just minor annoyances spread around.

Safari gets its foot in the door with top-notch standards compliancy and lightning fast JavaScript execution and speedy HTML parsing.  Its development tools, and generally just the touches it adds to page, visually look great, and the tools very functional.  After that, though, things quickly go downhill.  The features just aren’t there, and neither is the customizability.

Internet Explorer 8 finally gives some kind of an effort in terms of JavaScript error reporting, and the Firebug clone is nice.  The best thing to developers in IE8 is IE7 emulation, and in Developer Tools, Quirks Mode (I believe IE5.5 emulation, either that or IE6).  The world still uses Internet Explorer heavily, so there are add-ons also, but far more dubious in terms of malware than anywhere else.  In terms of browsing speed and features, IE continues to fall flat on its face.

Verdict: Inconclusive.
Opera’s improved compatibility and Firefox’s improved performance combined with Tab Mix Plus both give a run at K-Meleon.  More time is needed to settle on what I’ll use most, but it seems hard to go wrong between them.  Safari in performance delivers, but little elsewhere.  Internet Explorer 8 does nothing to improve its standing, and by standing still, loses ground to the ever-improving competition.

Advertisements

June 5, 2008

Doctype Decoration

Filed under: Computers — Tags: , , , , , — Zurahn @ 6:40 pm

If you look at the source code a web page, you’ll see this at the top of almost every page. What does it mean, and why it is there? Apparently you aren’t alone in your confusion. A simple validation will yield ugly results.

XHTML is an HTML coding standard that sets rules for the otherwise extremely loosely typed HTML mark-up language. It helps with browser standards, something most web developers should be very familiar with. It’s getting rather ubiquitous, particularly XHTML transitional, but it’s not much good when you’re using a Doctype Decoration.

A Doctype Decoration is what I call an XHTML doctype declaration on a page that fails, particularly miserably. Just putting it there doesn’t magically make the page better — the whole point is to tell a validator what to validate. If you’re not going to bother with whether it validates or not, it has no point.

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 1374 Errors
Address: http://gamespot.com

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 100 Errors
Address: http://arstechnica.com/index.ars

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 139 Errors
Address: http://digg.com

This is pathetic.

Let’s give the browser sites a run:

This Page Is Valid XHTML 1.0 Strict!
Result: Passed validation
Address: http://www.opera.com

This Page Is Valid HTML 4.01 Strict!
Result: Passed validation, 1 warning(s)
Address: http://mozilla.org

This Page Is Valid HTML 4.01 Strict!
Result: Passed validation
Address: http://webkit.org

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 183 Errors
Address: http://www.microsoft.com/en/us/default.aspx

I guess that explains the state of browser standards pretty well, now doesn’t it?

April 16, 2008

Beginner’s Guide to a Real Web-site – Part 5 – PHP Programming

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 5:57 am

PHP is a complete programming language, as opposed to XHTML and CSS which are mark-up languages.

Programming languages have a few simple characteristics:
-Variables that store data
-Conditional statements
-Loops

Variables in PHP begin with a dollar sign

$num = 1;

The above statement (which must end with a semi-colon) assigns a variable called “num” the value of 1.

Conditional statements check the value of a variable or variables.

if($num == 1)
{
  echo "YES!";
}
else
{
  echo "NO!";
}

The above if statement checks if the value of $num is equal to 1. If it is, the page outputs the text “YES!”, otherwise, it outputs the text “NO!”.
Anything within the { } brackets applies only for that statement.

There are other conditional operators than “==”. Here are a list of operators in PHP:
== (equal to)
=== (equal in value and in type)
! (NOT)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
|| (OR)
&& (AND)

Loops repeat a section of code several times over. There are two basic kinds, the while loop and the for loop.

A for loop is designed for when you know how many times you want to go through the loop.

for($i=0;$i<10;$i++)
{
echo $i;
}

The above loop repeats 10 times, starting from 0. The loop repeats as long as $i is less than 10, and $i increments 1 each time through.
Also note
$i++
This increments the variable $i by 1. ++ is a shortcut. Equivalents to this would be
$i += 1
or
$i = $i + 1;

A while loop lasts while a condition is true.

$count = 0;
while($count < 10)
{
  echo $count;
  $count++;
}

The above loop repeats 10 times. It keeps going as long as the count, which started at 0, is less than 10. In the above case, it works identically to a for loop; however, if you have an uncertain condition, such as a random number or user-input, the number of times is unknown.

All we’re going to do to start is to receive some data from the user, then output it back.

Make a copy of index.php and call it blog.php. This will be the start of our blog page.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

There’s a bit to explain here. A form tag in HTML surrounds a series of data you want to send to the server (our PHP). In this case, we just want to submit the data to itself, so we echo out the page we’re on, which is stored automatically by PHP in the variable $_SERVER[‘PHP_SELF’]. You could just type in ‘blog.php’ to get the same effect, except it won’t work if the page gets renamed.

The input type submit sends everything within the form to the server.

Anything sent to the server (in this case with method post) in PHP will be stored in $_POST. Let’s echo out the value of the blogpost.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>

<?php
if(isset($_POST['blogpost']))
{
  echo "<p>".$_POST['blogpost']."</p>";
}
?>

<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

All I’ve added is a check to see if there’s a value in the blogpost, and if there is, to display it in a new paragraph.

For the sake of making things look a little nicer, you can create a new CSS file called blog.css and add this to it (and don’t forget to import it into blog.php using the tag)

#blogpost
{
  width: 85%;
  border: 1px dashed white;
}

#submit
{
  border: 1px solid white;
  background-color: black;
  color: white;
}

Our problem now is that the blog doesn’t go anywhere. It needs to be stored in a database, which we’ll cover in Part 6.

Blog at WordPress.com.