Valid XHTML/HTML/CSS/LOLCAT/… badges

You know what I’m talking about:

Your visitors either don’t know what it is, they do not care, or – in my case – they are laughing for a first few years, and than it is just silly.
It really was laughable to want a valid web from webdevelopers in time, where the most widely used browser was not supporting the web standards.
And now, there is not much meaning in it either. 100% result in W3C validator does not mean the right usage of web standards. It does not mean, that your website will render exactly how you want, or even that it’ll render in every browser the same.
For example, I can have a website with nice, clean code, working and looking exactly how I want in every major browser, with error-free JavaScript, but:

• I’ve used a custom HTML tag attribute for better comfort in JavaScript (as “data-” attribute is not supported yet): BAM! Code is not valid.
• I’ve declared a CSS opacity value, which is working in almost every browser by now, but it is not officially “out” yet: BAM! Code is not valid.
• etcetera…

Validation badges are used only for e-penis enlargement, or ripping off the customers for “additional services” – yes, I’ve seen a webdesigners, that are persuading their clients that they NEEED that badge, so they can charge more.

And of course, they look awful, and they do not fit anywhere :)

Horizontal scrollbars

I have a 1920 pixels wide screen resolution. If I see a horizontal scrollbar, I get annoyed.

• badly coded JavaScript horizontal sliders
• designers that think that horizontally based pages are cool (seriously, this is not what “accessibility” means)
• bad cascading styles

These are just few of the problems that causes this issue.

Advertisements

Oh, how much i hate them… ALL of them. There is not one ad on my personal webpages, and I’ll do whatever I could to preserve it that way. I hate when I have to scroll through 2 pages of ads to get to the content. I hate when blinking ads are trying to kill me with epileptic seizure. I hate when flash ads are moving, sliding, popping, animating, and stealing my focus from things that I want really read, or watch. I hate when flash ads are removing my cursor from screen.

In spite of my hatred against ads, I understand the business model based on them. So, people, if you like some website, you are grateful for services provided by it, click on the ads there. It doesn’t cost you anything, website will get some money, and the best part is: those bastards that created that awful blinking ads will pay for it :)

Flash abbusing

Already mentioned ads, flash menus, flash buttons, or other unnecessary flash components. Most of what I’m seeing in flash could be done with few lines of JavaScript. Things in flash are often not much accessible for users (copy&paste of text), and I just hate when I have to click before activating flash controls. Not mentioning overlapping HTML elements, or whole flash blocks disappearing when coder is trying to prevent overlapping.

Yes, I’m not a huge fan of flash, but I’m not totally against it. I’m just marked by webdevelopers, that are doing Flash components on their website only because they know Flash, not because Flash is the good choice, and that is just fundamentally bad behavior. On the other hand, whole interactive websites completely done in flash are often looking really good (checkout this great list of awesome flash sites), but such approach can not be used for other than purely presentational purposes (like main pages of movies, etc).
Flash video players are another example of the right choice for Flash (even though SilverLight is better, presence of Flash plugin is more common).

JavaScript abusing

There are MANY ways how JavaScript is abused. For example:

• words replaced for advertisement links that pops up advert bubble on hover event
• links that will show you the thumbnail of page they are referring to if you will hover them (what is the point of that!?)
• share “supper” buttons
• etcetera…

These things are truly the plague of the websites.

Java applets

Seriously, websites are not the place for Java. Nuff said.

Donate spam

In every WordPress plugin, under every article post, on every tutorial demo presentation, there is some PayPal icon. Please, choose one place on your website, and leave it there. Make the user interface of your apps clean, and do not spam with that everywhere.

Web 2.0 bullshit talk

I can’t explain it better than Andy Budd and Jeremy Keith on their How to Bluff Your Way In Web 2.0 presentation. Must see!!

Click here to view the embedded video.

Register or GTFO

You had to encounter that. Website is offering you some download, presentation, or tutorial, but only if you’ll register there. No fees, or other requirements, just register……. WHY?! Why the holy fuck are you bothering people with registration, if you are offering that for free? Why do you need that useless account?

FireFox users, there is a big helper for you against fuckers like this. It is called the BugMeNot plugin, and it’ll log you in on every website that is requiring useless registration.

Demo presentation

474x

Tutorial files

24.93KB 247x

First, we need to decide, how the animation will be triggered, and by what object. I’ve choose the solution of creating your own attributes (yeah, now you can’t masturbate over 100% W3C validation result you hypocritical bastard ;)), so the triggering object can be almost any tag. Animation will start after click on any object with my custom attribute “toggle”, and animated will be object with id equals toggle value. The whole HTML will look like this:

<a href="#" toggle="myObject">Click me</a>

<div id="myObject">
content ...
</div>

Easy, huh? And as I already wrote, you can add this custom attribute to any object, like this:

<a href="#" toggle="myObject">Click me</a>
<div toggle="myObject">Click me</div>
<span toggle="myObject">Click me</span>
<h1 toggle="myObject">Click me</h1>

<div id="myObject">
content ...
</div>

All objects with attribute “toggle”, which is addressing to triggered object ID, are live buttons now.

“But, what if I need to show one object, but close few others with some group, or something?”

Nothing can be easier. We can add to targeted object another custom attribute called “group”, and give it the name of group as a value, so all the objects with this group will slide up, when another object is sliding down. Here is the HTML:

<a href="#" toggle="bread1">I want some bread</a>

<div id="bread" group="breakfast">
content ...
</div>

<a href="#" toggle="bread2">What about milk?</a>

<div id="milk" group="breakfast">
content ...
</div>

So, now, when we know how we want this to work, we can jump to creating our jQuery snippet.
We need to trigger the click() function, when any object with the attribute “toggle” is clicked.

$("[toggle]").click( function() {

});

Now, we need to define some variables to work with. Read the descriptions next to them.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle"); // get the ID of targeted object from "toggle" attribute value
  var targetObj = $("[id="+targetObjId+"]"); // find and target the needed object into variable
  var targetObjGroup = $(targetObj).attr("group"); // check, if tehre is any group reference on targeted object

});

We have our variables, so lets do some magic and finish the snippet. Again, read the comments in code.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup ) // if there is some reference to group, run this
  {
      $("[group="+targetObjGroup+"]").not(targetObj).slideUp(); // slide up (hide) all objects with refered group, but not our targetObj
      $(targetObj).slideDown(); // slide down (animated show function) our targetObj
  }
  else // if  there is no reference for group, run this
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).slideDown(); // if our targetObj is hidden, slide him down
      else $(targetObj).slideUp(); // in other case, slide him up
  }

  return false; // in case that triggering object is an <a> tag, we don't want to href="" got executed by browser

});

And thats it. This 19 lines of code can simply replace the whole Animated Collapsible DIV plugin. Interesting huh?

But this is not over yet :) In case, that you want to use this snippet as a tabs switcher, you have to do some changes, but you want to leave this snipped like it is, so simply copy paste it, and change the attribute to “showtab”. Here is the new snipped, with highlighted lines and explanations.

$("[showtab]").click( function() { // changed attribute

  var targetObjId = $(this).attr("showtab"); // changed attribute
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  {
      $("[group="+targetObjGroup+"]").not(targetObj).hide(); // in case of hiding tab, we don want to animate sliding, so it wouldn't mess with height of surrounding elements
      $(targetObj).fadeIn(); // fadeIn() animation is way better in tabs switching
  }
  else
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).fadeIn(); // in case, that there is only one tab, just toggle it
      else $(targetObj).fadeOut();
  }

  return false;

});

If you need to change style of triggering button after click, just create a css class called “active” with needed changes, and toggle this class to button after if().

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  { ... }
  else
  { ... }

  $(this).toggleclass('active'); // <- thats what I'm talking about

  return false;

});

Or add this class with addclass(), and remove with removeclass() whenever in code you need.

I hope, that this tutorial will be useful for someone, and remember: Try to create some functions & features yourself before finding the solution among plugins. That way, you will gain more experience, and know-hows.

As bonus, here are 2 simple snippets for “show” and “hide” attributes, for better understanding.

$("[show]").click( function() {

  var targetObjId = $(this).attr("show");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideDown();

});

$("[hide]").click( function() {

  var targetObjId = $(this).attr("hide");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideUp();

});

If you have any questions, do not hesitate to ask. Comments are always welcome.

Demo presentation

474x

Tutorial files

24.93KB 247x