Nov10, 2009

Review of sarah.partyofme.com

I am in the unfortunate position of being due to give birth today, and yet have had not so much as a twinge. This means today will undoubtedly drag, and I have to find some way of occupying my time. Rather than do something constructive — such as responding to the increasing backlog of emails — I am instead choosing to write a review. I probably won't have the time to do another for quite a while, and so I'd like to get one in somewhere.

Sarah, owner of sarah.partyofme.com, added her site to rev.iew.me and received some good mixed feedback, and yet somehow derived from this that she is "the most hated person on [rev.iew.me]" (links to a comment she left on heartdrops.org). As people go, she barely begins to tickle the dislike meter, let alone "hate".

Still in the comment, Sarah refers to rev.iew.me reviews as being inferior because "Their layouts are not even made by them" despite owning a hosting site which use[d/s] a premade template. She also states:

I think I will just stick to people who actually KNOW what they are doing to review my website rather than have people who do not know how to code whatsoever review my website.

...after having dismissed Rose's excellent (albeit brief) point about using an unordered list over <br />s for the sake of semantics. Clearly sticking to the advice of people who "KNOW what they are doing" only applies if Sarah agrees?

Throughout both the linked comment, and Sarah's "rebuttal" to Rose's review, Sarah makes reference to the supposedly superior coding skills (and thus tutorials and articles) of Georgina; heartdrops.org (with whom I have no problem, for the record). Given that several of Georgina's tutorials are derived from tutorialtastic, and therefore my coding skills, I consider Sarah's request for a review from people who know what they're doing an indirect request from myself. And so we begin...

I'm unsure what the site name actually is. Is it "the sound of music." as dictated by the title tag, "sarah" as dictated by the subdomain? Perhaps even "PartyOfMe" as suggested by the copyright notice? A worrying inconsistency straight from the off.

One of the first things I spotted about the site was its total lack of a coherent colour scheme. You don't need a degree in design to notice 6 totally different colours of varied saturation, only 1 of which is used more than once (the background stripe and link hover colour are the same... I think). I'll let an expert back me up here but I'm pretty sure that one of the key components of good design is about sticking with a few colours and using them multiple times to hold everything together. Janet Lynn Ford shares a colour tutorial based on her thesis from university.

Sticking with colour, but changing course slightly to accessibility (something I know a little more about), I noticed a series of basic failures. For starters, the links are far too low contrast on the white background and I have to tip my laptop screen significantly to read link text near the bottom of the page. Second but ultimately related to the first is the grey copyright text sharing the same hex code with the links, confusing the visitor into thinking its clickable. Thirdly, there are multiple colours used for no apparent reason for text emphasis, including a nice shade of blue which I cannot seem to resist clicking. Last but not least is the 'meta' information associated with each entry sharing the text colour and size with the main body, making it virtually impossible to distinguish between the two.

Going back to the home page footer, I notice some old buddies: CSS and XHTML validation links (I can't believe it was over 6 years ago when I first used them myself!) Both the CSS and XHTML validate here but a swift look at the source code shows that this is not down to an understanding of the concepts; typical validation for the sake of it. As well as the aforementioned use of <br /> to mark up a list where <ul> and <li>s would be more appropriate (see the semantic vertical navigation tutorial over at TT), we have the repeated use of the target attribute, tables used to display the list of friends (floated <li>s in a <ul> would be more appropriate), <br /> used purely to create gaps/spacing and an unnecessary set of <b>.

Structurally the mark-up is ordered in a nonsensical manner, with the sidebar and <h3>s appearing before the content and a <h1>. There's also a sad case of divitis infecting the blog but this is down to FanUpdate rather than any contribution from Sarah. Aesthetically, aside from the obvious colour scheme issues, all linked images should have their borders removed (we are no longer in 1996) and the easiest way of achieving that is with img { border: 0; } in the stylesheet. In an ideal world the navigation should also be clarified as links such as "Artist" and "WWW" are meaningless.

Content-wise I struggle to see the point of Sarah's discussion about Paypal and bank accounts in the 2nd and 3rd sentences of her about page, and feel it's a crying shame that she has to declare herself "not against homosexuals and bisexuals". Oh to live in a world where this was a given. There's irony in the "Dislikes" ("Those who are illiterate with words" followed by a typo) and "Network" is a redundant title... a bunch of social networking links does not a network make.

"Site" states quite plainly "Current layout has been validated." despite an unescaped ampersand on that page resulting in error, and I feel somewhat disheartened that "Donate?" is an option on website that offers very little value. Quite why you would donate escapes me. I'm struggling to see the difference between the Advertising section and Affiliates, apart from the fact that those who wish to advertise seem to be able to do so with an image link for no financial contribution whereas affiliates must engage in discussion and get only a text link? Affiliates seems to be a repeat of the list of Friends in the sidebar; entirely unnecessary for them to have a separate page.

Sarah seems to offer reviews through her website (can I be credited with starting that trend, seriously? :D) and somewhat amusingly states "my review is my opinion" as if that somehow makes her different to those on rev.iew.me, smattering hypocrisy all over the place. Unfortunately she doesn't seem to have completed any reviews, although given the length of mine already this is probably a saviour.

In Visitor, we're offered brushes which seem to be nowt more than .png images, which confuses me as I was under the impression that brushes were little packs you could import into programs like Photoshop? Missing a trick here to explain what the brushes are and how to use them. The Fonts page is entirely ridiculous as it contains only one link and that is off site. I don't support the usual distribution of fonts that seems to occupy tween personal sites, but fail to see how this is any better! The available graphics are poor quality and covered in crappy credit notices, how boring.

Finally, under WWW, the only page worth mentioning is Awards. It seems to be an entire page dedicated to linking pointless images to heartdrops.org. This is where I think I'm missing a trick... why haven't I got people adding pointless shitty pages to their websites linking to me numerous times for no good reason? What a waste!

All in we seem to have low quality content, an inconsistent design and basic mark-up errors that could easily have been fixed after her previous reviews. Sarah seems like a nice enough person so her attitude to Rose, and to other reviewers, bewilders me. Hopefully feedback from someone who "KNOW[s] what they are doing" (that's me) will inspire a little more creativity and a lot less of this one-sided "everyone who's not Georgina sucks" bullshit.

Tagged , and .

Feb4, 2008

Unrequested review of designbytreitner.com

Reviewed: Ronald Treitner
Site URL: designbytreitner.com

When I first found myself at the site, I assumed that it had been designed for Internet Explorer, because there’s an overlapping text issue at the bottom of the page:

overlapping text in Firefox

I mean, it’s no surprise that amateurs still target IE. It’s unfortunately holding its ground in the browser market despite the wide variety of flaws that do bug us designers and developers so. Nonetheless, I resigned myself to opening IE6 (with a screen res. of 1280×800 by default) and while the footer problem is no longer there, it has its own problems in the form of dodgy PNG transparency. The title of the index page also overlaps the badly stretched top texture.

Back into Firefox, I realise that the site hasn’t been designed for IE at all. In fact, it’s very obviously more attractive (and that’s subjective) in Firefox. So why oh why does the design fail in such an epic way? Newbie mistake number 1: assuming that every person on the Internet uses the exact screen resolution, with the exact toolbars, and exact screen font size as you. It turns out, that if you set your browser at 1024×768 (thank you web developer toolbar) the site is actually readable. More or less.

Aside from the structural issues, which are actually a symptom of the absolute positioning and could be solved with floats without having to change the size or shape of the layout, I accidentally discovered newbie mistake number 2: the layout is one large graphic. Yes, instead of breaking the various sections into manageable chunks, what we have is one large (1024×768) image. I know that slicing is an antiquated technique that very rarely actually makes a difference to loading times, but there are exceptions! (Splitting the image up into 4 optimised jpegs takes about 10KB off the overall file size.)

On top of all this, I’m very confused as to why the Privacy Policy button differs in size from the rest, and what the point of the dull (Dreamweaver) JavaScript image rollover effect is.

Of course, we all know that a site is not just about looks. I for one recommend that people focus on their content over their designs unless you’re trying to sell your services as a designer. Wait.. what was the title of this page again? “Custom Web Design by Treitner” Hmm. There goes my logic. Baseless, biased criticisms of the layout aside (I’m not a designer, remember) I am awestruck by the textual content of the page.

This is very obviously someone who’s not heard of the KISS concept. No, you dirty gits, I’m not flirting with him! That’s Keep It Simple, Stupid. While it applies to many things in life, none are more relevant here than the copy on a design portfolio. Potential clients don’t care how much ass you can kiss, they want to get to the point. Quoting Jakob Nielsen on October 1, 1997:

How Users Read on the Web

They don’t.

Unless you’re as fantastically interesting as I am, your visitor is going to scan, skip and scan again. 428 words in one introduction is not a good start (newbie mistake number 3). I didn’t even try and read it. In fact, I read the first sentence, and the last. It’s quite apt actually: “Compromise design and you’re just filling web space with text.” Jakob Nielsen (again; well, he is an expert) said it best in October of last year in his Blah-Blah Text: Keep, Cut, or Kill? article: “The introductory paragraph(s) found at the top of many Web pages is what I call blah-blah text” This, my friends, is what I’d call mega uber long blah-blah text.

I’ll be honest at this point, I didn’t find this site through my own genius searching techniques. I didn’t go looking for “shit sites”, nor was I deliberately trying to spot my next Pants Award recipient. In fact, the webmaster walked into a forum and created a thread asking for feedback. Does that make me a traitor to the realm of unrequested reviews? :(

I’ve mentioned the thread at this point because, although my review would work without it, there is a specific line in there I want to briefly touch upon. I quote:

As for the rest, I should have realized my site would only piss off those who’s work is so bad they can’t even get it to validate.

Ouch. He was only criticised because the websites of those responding were “so bad” they couldn’t get it to validate? Newbie mistakes both 4 and 5 there: bitching about someone’s site before you’ve seen it (neither of those leaving critique have their own website(s) linked from their profile) and relying on the automated syntax validator to give you an indication of quality. Now, as my site does validate I feel like I’m suitably qualified to continue. Moving on?

On the About Me page, we’re advised that we shouldn’t have to deal with a faceless entity — damn those robotic web designers and developers with no flesh and feelings — and yet there is no face of Treitner? Who is this guy anyway? On the same page, validation is mentioned again:

My sites actually validate, which means they contain no errors. Many other web design sites out there can’t even get their sites to validate and that’s a skill any beginner web designer should know, let alone any site claiming to be a full service expert.

You know what I think any beginner web designer should know? When to admit that they are exactly that: a beginner. There’s no shame in it, we all had to start somewhere. Not all of us hid behind a veil of professionalism and mock-standards though. (And the site may validate but there are so many errors with the coding I can’t wait until I’m through with the content.)

On “THIS WEB DESIGNERS SERVICES” (should that have an apostrophe, or am I being grammar-retarded again?) basic search engine submission is offered as a chargeable service. News flash, it doesn’t take a genius to copy and paste a URL into a box provided free of charge by Google. Apparently this guy also works for peanuts: “Because I want you to know no matter how much time is invested into perfecting your next site, you won’t be paying extra for my time.” I wonder if I can try that one on vet next time we take Hex up. “Hey, it doesn’t matter how much time you put into becoming a qualified vet and treating my animal, I want this service for no more than £5!” Pfft. It’s no wonder so many people think that a professionally developed website shouldn’t cost more than 20 bloody bucks.

I can’t even put into words how amusing I found the Portfolio. Suitably warned by the introducty novel paragraph, I am armed with the knowledge that most designers in the industry fake it. All of those portfolios, design examples and published pages are naught but faking fakers. I can, will all confidence and sincerity say that I believe all of the examples in Treitner’s gallery are genuine. Why? For the pure and simple reason that you just wouldn’t fake that. Why would you? Why would you tell people that your design resembles that of a 12 year old unless you actually knew and understood that, and wanted to publicise it anyway?

I wasn’t going to pass comment on the Contact Me Today page because.. well, because it’s a contact page. I couldn’t help but laugh at this though: “Technical difficulties with server may sometimes delay e-mail processing.” This guy is recommending his host, despite admitting to technical difficulties? Why?

Awards. Awards. Awards. I don’t have anything witty or constructive to say about a page of awards. In fact, I believe the page says more than I ever could.

Dun dun dun — the coding! Unfortunately, it’s at this part that I remember/realise that the site has been templated in Dreamweaver. Any criticisms are of the program, rather than the designer, but when someone so vehemntly defends his coding ability I feel I must speak out; I must tell the world about the plight of us lowly hand-coders and our efforts in the world of developing and design! (FFS, get to the point Jem or I’ll KISS on your ass. *ponders* Talking to oneself, first sign of madness?) Aye aye aye..

Firstly, any designer, developer, coder, or programmer worth their salt doesn’t use a Transitional doctype. Transitional doctypes are for wusses, too chickenshit to advance into real syntax editing. OK, that’s an exaggeration right there, but seriously: use Strict or don’t use anything. You might as well serve up font tags for all the good a Transitional doctype does. (Newbie mistake number 6.)

Secondly, the div tag soup? Not as tasty as chicken noodle. For example, this:

<div id="Layer14">
<div align="center"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.designbytreitner.com/index.html" target="_blank"><img src="images/vcss.gif" alt="Valid CSS!" width="88" height="31" border="0" /></a></div>

</div>

..should not look like that. It’s wrong on so many levels.

  1. Meaningless div id.
  2. Superfluous inner div, created for purely presentational reasons
  3. Border, width and height all presentational: should be in the CSS
  4. Target is yucky. Let visitors control their browser!

The majority of the divs are like this. Yes, I know, Dreamweaver. But why oh why is this person so keen on his ability to validate if he is relying on a program to generate this crap excuse for a web page? Each navigational element gets two divs each (how greedy); each structural element the same. The paragraphs are individually assigned an align attribute instead of a global CSS rule, and yet more meangingless ids and classes are littered amongst the bloat. This: onmouseover="MM_displayStatusMsg('Design by Treitner Custom Web Designs');return document.MM_returnValue" is lamer than lame. Changing your status message is only cool amongst 12 year old doll site owners. I’m surprised that Dreamweaver even has a premade function for that kind of thing.

Sure, the web page validates. Sure, the majority of the text is coherant and legible. That doesn’t mean that this is a good web site. No amount of W3C buttonage will make this a quality design service. Either this is the best damned prank I have ever seen — and I fell for it hook, line and sinker — or this chap has delusions of success in the web design business. I’m not sure which is the more scary thought.

See follow-up: A Real Example of a Bad Web Developer

Tagged and .

Feb17, 2007

Unrequested review of nothingbutsong.org/tutorials

Reviewed: No idea
Site URL: nothingbutsong.org/tutorials

I make no secret of the fact that I really don’t like poor quality tutorial sites. I make no secret of the fact that I aim to ‘out’ those with bad tutorials on their personal websites. Consider yourself blessed to be the first in a (hopefully) long series of correcting the mistakes that others so frequently make.

This is going to be all about the tutorials, so I’ll step right in. Slightly different to my normal style of reviewing, they have been clearly marked with headers based on the category, then tutorial name. Any I don’t mention aren’t worth mentioning or aren’t ‘faulty’. This makes it nice and easy for you to skip through and cuts out the unnecessary word-filler crap.

WordPress Tutorials

Fast Installation

You point out that the tutorial is “For those of you who have installed similar scripts or have a lot of knowledge about these types of things“: surely someone who has a lot of knowledge on these types of things would not need to visit an amateur tutorial site to figure out how to install WordPress? I mean, it hardly takes a genius to install the script. That said, following the instructions I ended up at www.yoursite.com/wp-admin/install.php which is a site advertising whitelist solutions for my inbox and is of no relevance to WordPress. Of course I’m being pedantic, but you may wish to point out that “yoursite.com” refers to the URL of the person’s site.

Detailed Installation

The first sentence of this tutorial contains too many ‘and’s as well as inaccurately calling the WordPress install a “file”. If only the script was a singular file, eh?! Reword it to something like: “Download the latest version of WordPress from the official website. Using [WinZip/7-Zip/WinRAR/insert as appropriate] extract the folder to your hard drive; I would suggest using your Desktop as it will make it easier to find later on.”

It might be worth mentioning that not all hosts have cpanel. Godaddy customers may find themselves confused as Godaddy uses a custom management system.

There are some other wording issues: “Return to the folder where your extracted Wordpress.” -> “Return to the folder where you extracted WordPress” (or “Return to the location that you extracted the WordPress zip download to.”) “The hostname of your server (usually always ‘localhost’)” -> the word ‘always’ is redundant there (particularly as some of the larger hosts do not use localhost).

Common Installation Problems

..lists only one problem. It may be worth renaming the tutorial to something more relevant to the content, such as “WP Install: Headers Already Sent Error”. This will give your visitors a more specific idea of what the tutorial contains as well as improving your chances of being listed in the search engines results for “omg I’m getting a headers already send error!!!” (for example).

Add Clickable Smilies To Your Wordpress

Two things that immediately struck me about this tutorial:

  1. Your note at the top “This hack works on Wordpress 1.2” would have immediately made me browse away if I was using anything above that version, despite you offering tips for the newer ones. The page is split up with headers, the note is therefore irrelevant.
  2. At the bottom of the tutorial it states “[...] or read the instructions located in the wp-grins.zip file” — if there instructions available with the ‘hack’, why the need for a tutorial?

Change Your Wordpress Smilies

The first link (”jaunty.nu”) doesn’t seem to contain any smilies but did have a picture of the owner’s panty-wearing ‘lady bits’ on the front page. If you’re going to keep the link up you may wish to warn of inappropriate content so that minors don’t get a blast of a random camwhore’s twat. The line “Upload the smilies (in Binary format)” is likely to confuse anyone who has no idea about the differences between ASCII and binary mode and needs to be removed (most FTP clients default to ‘auto’) or explained further.

You stress the importance of following the ‘format’ set in vars.php but fail to explain what it means. While it may be obvious to me that the ‘:heart:’ => ‘heart.gif’, means that using “:heart:” gives the smiley “heart.gif”, a WordPress n00b won’t know that.

Add The Most Recent Posts To Your Wordpress

Because of your permalink structure, the link to the tutorial on creating my-hacks.php (so very helpfully named “click here”) is broken. “You can edit the following lines in the above tag:” ..that PHP function is not a tag.

Change Admin Username

So in this case, we go to trust phpmyadmin” -> “So in this case, we resort to trusty phpMyAdmin”. “Databses” -> “Databases”.

Integrate Ask&Answer Into Wordpress

This tutorial doesn’t specify which script you’re trying to integrate into WordPress. I assume you mean that piece of crap “Waks Ask&Answer”. In which case I’d suggest a more appropriate tutorial would be advising people how to get rid of the script.

PHP Tutorials

These all seem to be nicked from elsewhere and re-written, but I’ll add my thoughts anyway…

Blog Crew Code in PHP

I have no idea what a “blog crew” is but I’ll be honest with you, it was this tutorial that irritated me enough to start the review. Specifically this line: “PHP is the next gen of web design“. WHAT? PHP is absolutely nothing to do with web design. Nothing. At all. Ever. PHP is a scripting/programming language, web design is the art of creating designs for the web.

Regarding the actual tutorial: NL-Random was removed from CodeGrrl for a reason. I don’t know the reason, but nonetheless it doesn’t mean people like yourself should start replicating the content just because it’s not available anymore. What’s more, by the sound of what you’re trying to say a simple include of the link list would be more efficient.

Browser-Dependent Stylesheets

This code is lengthy and inefficient. If your code is semantic and standards-compliant, validates and looks good in Firefox then there’s no reason why it won’t work in Opera and Netscape. This only leaves MSIE which a conditional comment would suit better (and doesn’t need PHP support).

Display Current Date

I fail to see the point of this tutorial. You’ve just taken a few chunks from php.net/date and re-worded it in a crappy half-handed manner. You don’t even mention that echoing date() will show the servers date, not the date of the person looking at the page.

PHP Includes

PHP Includes is a great time saver” -> are, not is. “Using the PHP include() function you can call any .php or .html file to display anywhere within a PHP file.” -> using include() you can call ANY file: it does not need to end in .php or .html. You forgot to mention that allow_url_fopen(), and in PHP 5.2.0+ allow_url_include() need to be on for including via URL to work.

Random Quotes

$quotes isn’t initialised before you start adding data to it, and you don’t mention the need for escaping quotation marks should a person want to put a quotation mark in the array as it stands.

Shoutbox

“Your” shoutbox tutorial relies on register_globals which no sane host leaves turned on anymore, and is sending unsanitised “dirty” data straight to a database. You should rename this tutorial “How to get hacked in 30 seconds”. If you have no idea about PHP security, don’t publish/re-publish attempts at scripts.

Users Online

This is another insecure, easily-hackable tutorial. Again, it relies on register_globals being turned on. It would also be incredibly resource-intensive for anyone with more than a few hits a day because of it’s lack of optimisation and untidy coding: constantly inserting, selecting and deleting from a database for the sake of this shitty script is a bad idea.

Find Your Absolute Path

Stealing from CodeGrrl is probably not a good idea: it has a loyal user base. That said, the code is outdated and unnecessary anyway and can be replaced with <?php echo $_SERVER['PATH_TRANSLATED']; ?>.

Simple Navigation System

Another replicated tutorial, another inefficient method. You know, it amazes me how people seem to steal the bad tutorials but tend to leave the good, quality ones. Anyway, if you’re relying on numbers to identify your pages there’s no reason why you need to use a switch statement and multiple includes — simply check that the data in $_GET['id'] is a number and you can include it directly. E.g:

<?php if ((int)$_GET['id']) {
    include("page".$_GET['id'].".php");
} ?>

Add an else and you’ve got a failsafe.

CSS Tutorials

Introduction

Alongside more poor English is: “CSS is surely becoming the new generation in web page design” -> hold on, I thought PHP was the new generation?! C’mon, get it right! “CSS alongside with XHTML 1.0 can create a web page that views almost identically on most web browsers” -> a bit of HTML 4.01 and a page can look the same across all browsers, it’s not necessary to add CSS to achieve that. Your next line suggests that the former line (re: identicality in browsers) is only true if the CSS is valid. On the contrary, perfectly valid code can have different affects in modern browsers because of the browser manufacturer’s choice not to follow web standards.

People should learn how to code correctly now that there are web standards.” -> yes, perhaps you should.

An Example Of How CSS Works

Demonstrating how sleek CSS is by customising text in a table is like a blunt pencil: pointless. Firstly, the table in your example is not necessarily demonstrating tabular data and is therefore being inappropriately used. Secondly you’re assigning each table cell a class when you could customise the entire lot of table cells in one go:

table td {
properties here
}

How To Create A CSS?

It’s also a good idea to place sans-serif or serif at the end of the list so if someone’s PC doesn’t have any of the fonts you listed” -> you don’t explain which to use in which circumstance and what the difference is between a sans-serif/serif font. You also incorrectly state that a person must use one of the ‘colour words’ you have supplied or a hex value; an rgb value would suffice (color: rgb(123, 213, 244);).

In your example .html file you add an XHTML Strict doctype but don’t include the forward slash to close the link tag at the end (<link />).

What Are ID Selectors?

“IDS” is incorrect terminology. If you must capitalise it, the ’s’ should remain lowercase. Your example — using <div id="header"> — is promoting divitis. There’s no reason why you couldn’t have used the appropriate tag to demonstrate customising a header: h1-h6. Again you repeat the incorrect statement about the necessity of hex colours (when rgb values can be used).

What Is The Span Tag?

This whole tutorial is bollocks. <span> isn’t “to take over any other code that it ’spans’“, it is used to semantically define a section in a document that can then later be styled. “It’s used with the class selector” -> it doesn’t have to be used with a class, it can be used with an id or even without any attributes at all.

How Do I Import Style Sheets?

Importing Stylesheet’s” -> no need for that apostrophe. Re: the first method, “This is the most common way of linking to your CSS file, and probably what you will use unless you know CSS well enough to know the difference.” -> you don’t need to “know CSS well” to be interested in the different way of referencing a CSS file. The second method: “This is for layouts that need a different stylesheet for individual pages” -> I fail to see why you’d rely on inefficient inline styling for differing layouts when you could easily reference different stylesheets on each page with <link />. Alternatively you could create a ‘main’ stylesheet with all of your general coding: font sizes, margins, paddings etc and then simply override it with a second external stylesheet. Lastly, the third method: “If you aren’t a CSS wiz, you shouldn’t attempt to use this code.” -> why not? If you teach someone how to use something properly, there’s no reason why even a newbie couldn’t attempt it. That said, I don’t know why a “CSS wiz” would want to read this tutorial…

How Do I Center My Layout?

You fail to explain why/how this tutorial works. You incorrectly state that everything must be placed within a div named ‘content’ to be centered when in fact, any id would work. The correct margin setting is margin: 0 auto; and you forget to mention that text-align: left; must also be added to counter the text-align: center; in the body.

Remove/Add Custom Bullets

There are many things you can do with the bullets that appear when you have an unordered list” -> there are many things you can do with an ordered list. Custom bullets is not a limited approach to design. Talking of which, under “Custom Bullets” you have the crappiest, most bloated piece of code for assigning images to a list I’ve seen this year. Your 9 line example can (and should) be replaced with: ul { list-style-image: url(bullet.gif); }. I think my example wins.

Cell Rollovers

As well as being a fairly useless tutorial, your example at the bottom of the page doesn’t work.

JavaScript Tutorials

I would like to sum up all four of these tutorials with one word: pointless.

Miscellaneous Tutorials

Browser Redirect

Nobody likes meta refresh redirects. For people who have moved their website, I would suggest setting up a redirect with PHP using the header() function as this would allow them to set a status code, marking the page as permanently deleted: this is friendlier to search engine robots.

Custom 404 Error Page

There are two things missing from this tutorial:

  1. An explanation on what to do if you cannot rename a file to “.htaccess” which anyone using Windows will find.
  2. Brief instructions on how to make this work for all error message pages, which would make it ‘complete’.

Document Type

XHTML 1.0 Strict is used when everything in your document is valid code.” -> all code should be valid as per the doctype, stating that you must have valid code for a particular doctype is silly. The explanations here are poor, you should go further in depth on what the difference is between the doctypes and perhaps give advice on which a person should use.

Make a MySQL Database

Again, only works for people with cpanel. Cater for other options.

Stop Spam

If only it was as simple as following this tutorial. You don’t mention what the code is doing, or the fact that people using it need to create a page called “X.html” or their logs will be filled with 404s caused by these bots being redirected.

Host Subdomains with their Own cPanel

it’s prolly true” -> wtf? Apart from that irritating English “mistake” this is probably the most useful tutorial you’ve got. Unfortunately it doesn’t compensate for the lack of quality throughout the rest of the site.

And now that we’re done with the tutorials…

Your code is of a similar standard to your tutorials (i.e. pants). <meta name="Revisit-After" content="1 day"> appears twice in the head of the document and is missing the closing ‘/’. You’re using the deprecated <font> tag as well as <br> instead of <br /> undearneath the tacky advertising banner. The & in “Subdomains & cPanel” is unescaped and should be &amp; and your (hiss) <iframe> contains attributes that are invalid under the XHTML Strict doctype (align, vspace, hspace).

In summary, the overall quality and accuracy of your tutorials is generally poor and the level of English even more so. I can only assume you’re not from an English-speaking country; if this is the case you may wish to get a more fluent friend to look over your tutorials before you make them live. If you’re going to offer tutorials, make sure you fully understand what you’re saying before undertaking the task and please stop distributing outdated code that has been “acquired” from elsewhere. One final suggestion is to ditch the advertising and thus the code that’s failing the validation test.

Tagged and .

Oct2, 2006

Unrequested review of tutorials.delinquente.org

Reviewed: no idea
Site URL: tutorials.delinquente.org

I was tempted to name this review “how not to do a tutorial site”, but I don’t want to break with tradition. On one hand my super spider-sense says that I’m about to commit a major faux pas by reviewing you because you’re only 13, but hey — if you don’t learn the right code now you probably never will.

It always worries me when a person starts a tutorial site and the first thing they put in the sidebar is the tutorial count. Why brag about the amount of tutorials you have (not that you have enough to brag about)? If you have enough they’ll speak for themselves — without the need for counts and amounts and superfluous crap.

Well, just when you thought this tutorial site does not have much tutorials” …what? You’re right, the site does not have many tutorials, but that’s about the only accurate part of that sentence. “We’re adding hundreds out of thousands tutorials here!” …does that mean you’ve stolen thousands but you’re only adding hundreds of them? “Writing tutorials is pretty hard, especially ones that make sense.” …yeah, that must be why you’re having so much difficulty. “It’s Really, really,really hard..” …the R should be lowercase, and there should be a space after the second comma (*and I’d recommend not playing with it if it’s too hard). * don’t worry, you’ll work that one out in a few years time.

I could sit and criticise your grammar all day, and the size of your layout image is that large it causes Firefox to time out but what’s really bothering me is your tutorials. As I’m trying to get this review out to keep the people happy and get to bed relatively early tonight I’m just going to move straight on to ‘em…

Your Intro to HTML tutorial is a direct rip from W3Schools Introduction to HTML. Now, I know it’s free to learn from them, but that doesn’t mean you’re free to rip off the tutorials because you can’t think of anything original.

Your Hover Basics isn’t basic — you shove a piece of irrelevant styling at visitors before you’ve even properly explain the hover pseudo-class. You haven’t explained that it can be applied to various elements (but only works properly in IE on the links) nor the fact that it has to be applied to the a element in a certain order (LoVe HAte — link, visited, hover, active) for the pseudo-classes to work properly.

The block of styling you’re using (same tutorial) contains a lot of crap properties that aren’t needed because you’re not assigning a value (background-color:none;, color:none;, cursor:none; and text-transform:none;). You give completely false instructions: bold and italic should NOT be used with text-decoration: and you’re assuming that everyone has Arial, Tahoma and Georgia (my linux boot doesn’t). I chortled heartily at “1-10pt is a good range” because a) pt is a print measurement and px should be used instead and b) I would hate to see a website using 1pt text!

The tutorial Pseudo-Classes is wrong, wrong and more wrong. It’s like a big football of wrongness, only if you were to kick this it’d just explode the wrongness all over your leg. Possibly the worst simile I’ve ever done but the point still stands: it’s wrong.

Firstly, “Pseudo-class are an interesting group of selectors in CSS” …no, pseudo-classes are not selectors, they are applied to selectors. Interestingly enough I thought this tutorial sounded far too intelligent for you and Googled that first sentence and found the tutorial on dynamicdrive and cssdrive.com — both ironically wrong too. You state :langApplies to an element when it’s in the designated language.” …still wrong. According to W3Schools: :langAllows the author to specify a language to use in a specified element” and I couldn’t put it better myself (so I didn’t). I find it particularly amusing that “you” talk about first-child elements and the cascade and yet obviously don’t know what they are!

Your Comments “tutorial” is relatively pointless and doesn’t cover all types of PHP comments and your Include Function tutorial states “so you now have your first script!” …no I dont’t, I’ve not done anything yet! I’d also disagree that include() is one the most useful functions, but then I guess if that’s all you know you’re likely to rely on it.

Intro to PHP is another you’ve ripped directly from W3Schools and Php Support Checking is typically wrong. Simply naming a file .php, writing a bit of text in it and asking it to load in the browser won’t prove anything — it’ll load anyway. The best way to test for PHP is to use the phpinfo() function, just remember to delete the file afterwards so that malicious visitors don’t find out important information about your hosting configuration.

I had a good chuckle at your “A file editor and CMS” tutorial. It’s called Project 1 on the PHP index page and Project 2 on the tutorial and you’re referencing “the File Functions tutorial” which doesn’t exist — is this yet another stolen tutorial? Stolen or not, this tutorial is incorrect. join() is not “another way of including a page” and there’s no such thing as “phrased PHP”.

Your Getting and Hosting Images tutorial isn’t basic enough — if a person doesn’t already know how to do this then they’re probably not very ‘net-savvy and need more specific instructions. Your code example is also incorrect — you close the tag with a forward slash as if coding for the XHTML doctype but miss the all important alt attribute and fail to mention that the snippet won’t work on the majority of forums/boards (which is where most beginners want to stick their images). Incidentally you’re also using a <textarea> to house the code snippet (as in your other tutorials) which is misuse of the tag. You should convert ’special’ characters in the code to their entity equivalent (&lt;, &gt; etc) and style them with <code> </code> as suggested in my code box demo.

How to Open .zip or .rar Files states that you need to use WinZip for .zip files and WinRar for .rar, this is incorrect. Windows XP comes with a zip utility built in and WinRar extracts both .zip and .rar. You also fail to mention that the versions of WinZip and WinRar are trials and should be removed after 30 days.

I would summarise my thoughts on your tutorials but I’ve already abused the word wrong and don’t fancy writing it again…

For a tutorial site you show very little knowledge of some pretty basic stuff, reflected in the coding of your own pages. You’re missing a doctype (see my tutorial on Validating a Page using HTML 4.01) and you’re using nasty, nasty <iframe>s inside a <table> inside a <div> when you could just code straight into the <div>, customising it with CSS. Your actual pages have a <body> tag but no doctype, <head>, etc and you’re using <img src=""> to create bullets instead of the obviously better answer:

ul {
list-style-image: url(images/bullettut.png);
}

Your attempt at a no-right-click script isn’t working and because your bold text and links are the same colour it’s confusing as to what is a link and what isn’t. You fail to close the <body> and <head> tags on most pages and the fact that you’re crediting “Brush sites I can’t remember the name of” is appalling.

I would suggest doing a little research on the magical law that is Copyright (i.e. why you’re not supposed to steal tutorials from other sites) and removing your so-called tutorials from the web. As you’re not likely to do the latter I can at least ask (pray) that you take some lessons on basic HTML before writing any more.

Tagged and .

Sep27, 2006

Review of 3till7net (2)

Reviewed: Sarah
Site URL: 3till7.net

I’m having difficulty starting this review. Most reviews I start off with a quick summary of my first impression of a website — it’s hard to do that when you’ve been visiting a website for years.

Your new layout is not my favourite. I think the swirly zigzag pattern is fab — like a crazy 60s drug session (or so I’m assuming, heh) but the grey just doesn’t do it for me. I think the gradient divider and border could be made to match the header by using a darker version of any of the colours you’ve used. #6F686D is a dark alternative that might be worth trying.

(I’m going to be filling this review with blatant suck-up-y compliments: just thought I’d warn ya.)

Your site is incredibly functional. I noticed a while ago you started using big text which is great for those like me who’re blind as a bat (only minus that cool thing they do where they can ‘hear’ objects — I wish I could do that). Your link colour is fine for me, but the Juicy Studio Colour Contrast Analyser says there’s not enough contrast. It’s a groovy tool to play with. Your main navigation was immediately obvious and you even have a breadcrumb trail.

The content of 3till7 has got to be the main reason I come back — geeky entries and handy stuff about Ubuntu that has saved my ass on more than one occasion. When I did my first PHP project for my college work experience, it was one of your PHP articles that got me on track. Look at me now, eh.. says it all about the obvious quality of your tutorials I think.

The About Me page was a good combination of information and pictures keeping me entertained both mentally and visually. Always good to see a Terry Pratchett Discworld novel in a person’s favourites list, although Reaper Man is not my ultimate favourite (Monstrous Regiment is a great one — read that if you haven’t already). Good to know I’m not the only person that gets so deep into coding that the world could fall apart around us and we wouldn’t notice.

Your Image Generation in PHP tutorial is a handy dandy piece of knowledge to have, I wish I’d seen it months ago when I was fiddling with captchas. I hope your demo version for the PHP and Forms tutorial has validation of the input — you don’t want people inserting nasties in there. Regarding the line Hell, I don’t even have maxlength in any of the input fields!: I’d actually recommend leaving out maxlength. It’s the kind of thing that makes people think they’re secure but is so easy to get ’round. Check the length of fields server-side with other validation (e.g. if (strlen($input) > 15) { echo "error"; }) although I’m sure I’m trying to teach my Grandma how to suck eggs here.

Had a giggle at your Clichés of a Crappy Site article. Having recently seen people apply to The Quilting Bee using pixel/bitmap fonts on their entire site, I think I should start pointing people here. The point about sites working in all browsers is a current irritation with me. I’m seeing more and more websites that say “Best viewed in Firefox” where the webmasters don’t SEE the issue, and don’t see how this is identical to creating an IE only layout. I swear, we’re going backwards not forwards in the fight for compatibility (I wrote compatility first: really shouldn’t drink and review).

I have to say I love the way your site is organised for maximum click-through effect. Articles in your weblog being linked from your Writings page, archived, archived by category and listed under Possibly Related Posts — it’s like a massive interlinking orgy! Great SEO technique which I’m led to believe helps your rank in key search engines such as Google (though I’d mention that in case you didn’t know already).

Code-wise I expected your pages to validate — I know, I know, it’s rather presumptuous of me to expect your pages to validate perfectly simply because you’re a fellow geek, but there we go. Despite a few errors thrown up by the validator, I have found your website works impeccably in all of my browsers which is the most important thing. Nonetheless errors such as missing “/” in image tags (entry: photos of Todd and I) and unnecessary </p> tags (links page) are so easy to fix even if just for bragging rights.

I really don’t want to summarise this review already. I feel like I’ve added very little of any benefit and I’m kissing some major ass. If I’d waited about 15 months for a review I’d expect more than this.. but what can I say? I’m losing my touch, obviously. Anyway: your site is all things geeky. It’s accessible, usable, bold, beautiful, interesting and geeky — everything anyone with sense looks for in a website. Good work Sarah.

Tagged and .

« Older