Unrequested review of pixelfx.org

Reviewed: No idea, didn’t bother to find out.
Site URL: pixelfx.org

Generally I only direct my unrequested reviews at other review sites of poor quality — a taste of their own medicine. However, having seen pixelfx.org mentioned about 6 times today I’m getting more and more infuriated at the amount of people relying on the generally crappy tutorials at this site.

Don’t get me wrong, it’s nice to see people creating tutorials to share their wisdom, but when said wisdom is littered with mistakes and the tutorial author seems to display little knowledge of the basics of HTML themselves, it makes me wonder what kind of lessons other people are learning.

Before I dive into the review, I’ll freely admit that I’m a big f’ing hypocrite. There are tutorials at my own tutorial website which are out of date, unfinished and probably produce results which could be achieved much more efficiently. However, I strive to ensure that my tutorials at least work and follow published standards. If you dislike hypocrisy, stop reading now.

On with things…

Upon entering the url in my address bar and hitting the handy return key, I am greeted with a lovely poo-brown colour — the kind of colour I find in my niece’s nappy after she’s been eating chocolate buttons again. A redundant image in a similarly disgusting colour and a bloody great “free iPod!!!” banner which I can’t help but stare at. Way to attract visitors to actually enter your website!

After my pupils have returned to normal (post-dazzled from said banner) I notice some lovely requirements. Anyone who’s anyone knows that there’s one thing I hate more than splash pages, and that’s splash pages with stupid requirements. Note to anybody reading: it is YOUR job to cater for your visitor, not the other way around. As this is a tutorial website, I am actually shocked to see these requirements: full stop.

Before I enter the website, the moment of no return, I can’t help but chortle at the title of the web page. Whilst “Your Ultimate Resource For Tutorials” might suggest a tutorial site at the peak of fantasticness to some, it only goes to remind me of the Merriam-Webster definition of ultimate: “arrived at as the last result”. How appropriate.

On the splash there are several HTML errors, including the lack of a Document Type Definition (doctype), unescaped ampersands in s (replace & with &), a missing </center> and proprietary attributes (hspace, vspace) in the Screenshot Exchange <iframe> tag. Easily fixed really.

Now I’ve finally clicked to enter, I get some Google ads shoved in my face (again, great way to keep your visitors) and another poop-coloured image.. only this time it’s split into several tiny sections and placed into a mess of table rows and columns. Why the heck am I still seeing sliced images where people are trying to decrease loading time? It achieves nothing. In fact it often increases the total loading time of an image as more colours are saved with each section.

After a tedious wait for the page to load I don’t even get a “Welcome to my site” — just a list of archives because the site hasn’t been updated recently. Quickly moving on to the About page I find some irrelevant details on the size of your package (now there’s a suggestive sentence if ever there was one) and some run-on sentences about hosting/hostees, why?

The Broken Link page has a typing error within the first sentence (”if your here” should be “if you’re here”) and a thank you for visitors before they’ve even done anything. The form fields reset to blank once they’re clicked so an accidental whack of the mouse and I have a form with fields that I’ve no idea what to do with. This could be fixed by using:
<label for="field">field name</label> next to each field, where field (in for="") is the name/id of the field and field name is what you want the visitor to fill in (e.g. Name).

Cam Portal. Wait, what the heck, what place does a web camera portal have on a tutorials site? This is the third link I’ve clicked and I’ve not even got the sniff of a tutorial yet. At least the next page, Contact, doesn’t have that bloody irritating field-clearing nonsense.

Moving on… Domain — isn’t that what the About page was about? Okay! I find it amusing that your visitors get a free plug on the side and yet the people who’ve taken the time to apply to affiliate with you get tucked on a page two-links deep. Credits — hmph, this is a tutorial site, how about trying to do things yourself?

The disclaimer had me fuming! First, you claim that everything on the website belongs to you and then you state that people should e-mail you if they find content of their own — if you know you’ve taken other people’s content, why not just credit them outright? Or, perhaps do the right thing and remove any stolen content from your webspace?

Oh look, how to alienate your visitors with one (badly punctuated) sentence:

So please respect the website and if you dont like it then just leave!!

Respect is earned and not given out to badly designed, badly coded websites. Something to keep in mind, me thinks?

Link Me, Listed @ and Link Exchange would be better off combined into one page, with each section placed under different headers. That’s proper/correct headers like <h1> and <h2>, not text wrapped in deprecated <b> </b> tags, please.

Moving on again… Why have you got Mail List in the Domain section and in the sidebar? Resources, self explanatory and well ‘padded’. Still, disturbing that this is linked above your tutorials on a site that is supposed to be about the tutorials? You’re missing tutorialtastic.co.uk from your Other Tutorials list.

Suggest Tut — finally, the prospect of a tutorial. Well, at least an abbreviated form of the word itself. Of course, yet again I feel myself getting annoyed at something on your page:

Can you give me a url to a sample of what you want?

..is this so you don’t have to bother writing your own version?

Hah. “PixelFx Fan?” Not likely.

Tutorials! By God I thought we’d never get here. Now, much to the dismay of anyone reading I’m not going to bother even looking at your graphics-related tutorials. As fun as I’m sure it’d be for me, I am not an expert in design and will leave the chore of reviewing those to someone more experienced. Likewise, the JavaScript tutorials. I hold most decorational JavaScript in contempt. It is a waste of time, decreases the speed at which a web page loads and therefore can cause endless problems for slow connections. Lastly, they’re rendered pointless simply by switching off JavaScript in the browser. However, I can’t wait to crack open those on HTML/XHTML…

“What is CSS” is a question and should be ended with a question mark. You’d be better with a full stop instead of a comma after “CSS stands for Cascading Style Sheets” and suggesting that it is used to change the appearance of your scrollbars is misleading as scrollbar colour-altering CSS is proprietary (doesn’t work across all browsers). Of course, you semi-cover that in your next sentence “CSS does not work on all browsers” but could be more specific. Likewise, “CSS can also be used externally” could be made more specific by stating that it can be used internally in the first place.

In “Background Image” you have a link to a page that will supposedly let me read up on CSS but really is just a page analysing your coloured scrollbars, pointless? There’s a second page which is supposed to be a short cut to learning CSS but really just confuses me further with words like “subbies” and “espeically”. Of course, I’m assuming “espeically” is especially but “subbies”?

Back to the Background Image tutorial (although tutorial really isn’t the word for it) — you incorrectly state “If you want the background to repeat, change no-repeat to repeat-y”, as this is only applicable if you want a vertically repeating background. What about horizontally repeating backgrounds? “Just change the #000000 to whatever color you want your background to be” is not entirely correct either; entering <BODY bgcolor="light pink with blue spots"> (as suggested) isn’t going to change the background colour to what I want it to be.

The Cursors tutorial tells me nothing of any actual benefit about Cursors — for example, I’d like to read about the accessibility implications of changing the cursor from default; but it does give me some nice a selector customisation CSS (just what I wanted to know from a Cursor tutorial). Oh, it also shows me how to place style coding inside HTML too, considered a no-no in the most modern of coding standards. Hmph.

Custom Bullets, amongst your listed instructions that don’t seem to have an opening or closing list tag, gives me a “go (here)” link that’s not actually a link and teaches me how to make a class that I’d then have to apply to every single list item that I want a custom image next to. Why not explain how to give the entire list (<ul>) a custom image for each <li> to save some time?

On the Dashed Border On Image page you’ve got the CSS mixed up (border: #000000 1px dotted; should be border: 1px dotted #000000;) and you seem to have HTML comments in your styling (something I noticed before but had hoped was a one off). You keep telling people to put this CSS in their stylesheet and yet you’re surrounding the CSS with tags only applicable in an HTML document.

The Fading Links code is proprietary to Internet Explorer (thank God) and yet there’s no note of this. Also, this is a JavaScript tutorial so I’m confused as to why it’s in the CSS section?

Image In Textarea — way to make a textarea unusable; Large Button Menu — a superfluous <div> instead of customising the <ul>; Link Effects — the link pseudo-classes are ordered incorrectly, the borders are mixed up, you’re missing ‘px’ from the measurement and there’s more proprietary code (by way of filters). Also, stop recommending ‘pt’: it’s for print only. The Left Scrollbar tutorial needs to be removed before some plonker actually follows it! direction: rtl; is intended for websites in languages such as Arabic and Hebrew which is naturally written right to left, not to look snazzy or to give you more crap to publish.

Link Transitions — otherwise known as “more proprietary crap”. Rainbow Link Effect — again, proprietary. “Text Coding” — HTML comments in style, more ‘pt’ measurements and a pointless declaration of letter-spacing. Last but not least, you’re missing the } at the end of each selector in the CSS Classes tutorial. And wow, that’s the end of the CSS section.

Most of your /CGI tutorials seem to be taken from other people, are about other people’s scripts or in the case of “Email Form (PHP)” in particular involves redistributing code you don’t own. Did you get permission from Dodo to redistribute her form script? While I’m on the subject of redistribution — Greymatter has many security flaws and shouldn’t be offered freely as if it’s a perfectly usable script.

Page 3 of the tutorials takes me to more lovely redistributed scripts. Have you not thought that by “offering” scripts that you didn’t write, you are putting visitors at risk because there may be important security fixes in newer versions? Not to mention the questionable legality of actually offering these scripts in the first place; most without any credit to the script writer.

Next stop: HTML tutorials. Your 3 Column Layout is badly in need of either a) deletion or b) updating. The code you’re offering is reliant on tables for layout, features tags in capital letters, has proprietary coding in the CSS, mistakes in the HTML comments, more ‘pt’ font measurements, attributes that are not being “quoted”, link pseudo-classes in the wrong order (again), style coding inside the table columns and so much unnecessary crap it’s almost unbelievable!

Your 3 column layout coding, when saved in a text file, is approximately 4Kb in size and 164 lines long. My 3 column layout is not only coded with today’s standards in mind and therefore includes two files (as the stylesheet should be external) but is only approximately 2Kb in size. Not only that, they equal 76 lines in total: and that’s both files added together. Hm, I wonder which is the better example layout?

The Absolute Positioning tutorial contradicts itself by saying:

Absolute positioning will positions text, images, gm, or anything, except TABLES

..and then goes on to use a table in the example of absolute positioning? Still, no explanation of this feature of CSS and your visitors haven’t actually learnt anything. Furthermore, this tutorial is promoting yet more inline styling which should be placed in stylesheets after having given the item that needs positioning an id or class (as appropriate).

Your Alt Codes tutorial is not only badly named — the symbols you’re displaying are HTML entities — but also contains generated code in the page itself, from a WYSIWYG editor. Why should anyone follow the tutorials of someone that uses the likes of MS FrontPage?

The Alt Message On Text Links tutorial is also inappropriately named: that’s a title attribute, not an alt message. Oh, and they work on image links too. Onwards… the Ask Me Form tutorial is laughable: it doesn’t actually show you how to create a question form, merely points one in the direction of Bravenet. Who wants to sign up to an ad-ridden service when there are perfectly feasible ways to code this yourself?

On the Anchors page, you’re missing the closing </a> for both the demonstration page anchor and the code in the textarea. Also, you’re using <li>s for your instructions again without actually opening/closing the <ul>.

Your Banner Killer is allowing people to break the terms of their free hosting account — why is there no warning that this can cause the account to be suspended thus losing the unsuspecting tutorial-follower their files?

In the example code for the Centering Layouts tutorial there’s a superfluous <tr><td align=center> (oh look, attributes that aren’t wrapped in quotation marks) and the tutorial itself would cause the content entered to spread out into a full-width table: hardly the result most people would be expecting.

A tutorial on How To Write Tutorials? How amusing, particularly as the first item you’ve listed is “Write your own tutorial. In your own words not someone elses.” — perhaps consider that yourself? Image Map, Slice and Positioning is not a HTML tutorial primarily and would probably be better placed in one of your graphics categories. The first block of example code in your Lists tutorial is missing the opening/closing <ul>. Again.

You’re recommending a semantically incorrect way to display HTML in the Showing HTML tutorial (<textarea> — these are for forms) as well as a deprecated tag (<xmp>) that doesn’t work in all browsers. The best way to show HTML is to replace each < with &lt; and each > with &gt;. Or, if you’re lazy, use my code converter.

Another incorrectly named tutorial: View Source. It’s nothing to do with viewing the source, it’s the code for an HTML comment. Likewise, your tutorial on so-called “Webding Extras” are only going to work on computers that have the font Wingdings (i.e. alienating Mac/Linux users). The Whats Bandwidth tutorial should be “What’s Bandwidth?” and your explanation is flawed: using .jpgs is not always more efficient than using .pngs, it depends on the image you wish to save and the amount of colours contained therein.

On to XHTML, the section that I am quite positively pissing my pants to see as you’ve so-far demonstrated no knowledge of this mark-up language.. ..and, oh, what a disappointment. Only one tutorial? It’s mostly incorrect too, what a surprise.

There are 3 doc type definitions currently.

..not specifically true. There are three XHTML 1.0 doctypes, but you’ve not mentioned XHTML 1.1 or any of the HTML doctypes. Also, your descriptions of each doctype make no sense. For example, under Strict you have:

Strict is standard for pages with only valid source code.

All pages should have valid mark-up, irrelevant of the doctype! Then, under the Transitional doctype:

Standard for those of integrating into XHTML.

I assume by “integrating” you mean moving away from HTML? Again, this isn’t necessarily true. Anyone can move straight to Strict, if they so choose. Thank God there’s only one XHTML tutorial, is all I can think to say.

Now that I’m done with the tutorials, I think I can finish the review with a summary. This tutorial site is of poor—average quality. The reviews are often mislabelled (as are the languages: Java is not JavaScript) and offer badly written code examples often with missing closing tags, proprietary filters or completely irrelevant mumbo-jumbo.

The site is an awful colour, has a boxy layout constructed out of several layers of invalid nested tables. You’ve got blocks of styling inside the head of the document, a superfluous <head> after the styling in the main source code and countless occurrences of <head> and <body> in each linked page (the ones that open in the iframe) that needn’t be there.

You haven’t followed any set standard with your coding and what’s more, there’s no consistency (some styling, some deprecated <font> tags). There’s a complete lack of quotation marks around most of the attributes in your mark-up, and quite a few tags are in capital letters. Why anyone would want to follow your tutorials when you clearly demonstrate such incompetence in your own coding I do not know. I applaud you for taking the time and initiative to try and help people, but please: if you’re going to do a job, at least do it properly.