example of how to simply keep your HTML clean

I was asked to make some minor changes to a website.

Upon reviewing the source code, I immediately began looking around for breakable objects.

And here's why.

Bad HTML
<div id="header">
<div id="header_container">
<div id="home"><a href="index.php">Home</a></div>
<div id="facebook"><a target="_blank" href="https://www.facebook.com/musicnowentertainment">Facebook</a></div>
<div id="youtube"><a href="mailto:[email protected]">[email protected]</a></div>
<...more bad code...>

Bad CSS
#facebook {
position: absolute;
top: 88px;
left: 905px;
width: 27px;
height: 28px;
}
#facebook a {
display: block;
text-indent: -9999px;
width: 100%;
height: 100%;
}

#youtube {
position: absolute;
top: 87px;
left: 949px;
width: 29px;
height: 28px;
}
#youtube a {
display: block;
text-indent: -9999px;
width: 100%;
height: 100%;
}

Notice there're no images? Oh. That's because the #header has everything in one giant graphic.
#header {
position: relative;
background: url(../images/Layout_Header.jpg) no-repeat center top;
height: 421px;
}

Layout_Header

That's right. All the links are placed as invisible containers above a header graphic with the text moved out of view.

How about we do this the non-n00b way.

Better HTML (remove unnecessary elements, add icon class)
<a class="home" href="/">Home</a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank">Youtube</a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank">Facebook</a>
<a class="mail icon" href="mailto:[email protected]">[email protected]</a>

Because DRY.

New CSS
.icon { position: absolute; height: 32px; width: 32px; display: block; top: 88px; overflow: hidden; }
.facebook.icon { left: 850px; }
.youtube.icon { left: 902px; }
.youtube.icon img { margin-left: -64px; }
.mail.icon { left: 954px; }
.mail.icon img { margin-left: -32px; }

It's okay if the above CSS attracts you sexually a little bit.

Even better HTML (use images and alt instead of text)
<a class="home" href="/"><img src="images/logo.png" alt="home" /></a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank"><img src="images/icons/youtube.png" alt="Youtube" /></a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank"><img src="images/icons/facebook.png" alt="Facebook" /></a>
<a class="mail icon" href="mailto:[email protected]"><img src="images/icons/mail.png" alt="[email protected]" /></a>

Why? Because Google hates -9999px text-indent you spammer!  And what about when we have 235235 x 1204124 pixel monitors? That text isn't actually gone. It's floating somewhere off the edge.

Even more better HTML (use image sprites)
<a class="home" href="/"><img src="images/logo.png" alt="home" /></a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank"><img src="images/icons.png" alt="Youtube" /></a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank"><img src="images/icons.png" alt="Facebook" /></a>
<a class="mail icon" href="mailto:[email protected]"><img src="images/icons.png" alt="[email protected]" /></a>

Why? This cuts down on HTTP requests for each image. Instead, we use a single image with the icons laid out in a grid. Then we adjust the visibility using negative margins.

Here's what a sprite graphic looks like:
icons
(I added a black background so the mail icon is visible)

Here's the cleaned up header graphic:
Layout_Header

And here's the final "clean" product
final

Other cool stuff that I'm going to tease you with but not tell you how to do (yet?):

  • With the sprite method it's extremely easy to add rollover effects (with css) and animation (using the spritely jQuery plugin)

  • Using a single image for your icons makes it super easy to change icon themes without touching a character of code!

  • Using a common icon class makes changing sizes and positions laughably simple. Haha. Done.


This post is only meant to quickly provide an example.

If you have any questions, please ask!

Simple placeholder text for input fields using jQuery

Today I came across a form using inline javascript events for placeholders:
[html]
<div class="inputBG" align="center">
<input name="company" id="company" type="text" placeholder="Company Name" onBlur="if (this.value == '') {this.value = 'Company Name';}" onFocus="if (this.value == 'Company Name') {this.value = '';}" />
</div>
[/html]
This is a no-no.

Instead, use this:

HTML

[html]<input id="name" type="text" name="name" placeholder="placeholder name">[/html]

 jQuery

[javascript]
// only necessary for browsers that don't support the placeholder attribute
$(document).ready(function(){
$('input').each(function(i,v){
// set initial values
$(this).val($(this).attr('placeholder'));
});
});

$('input').on({
'click': function(){ // clear the placeholder
if( $(this).val() == $(this).attr('placeholder')){ $(this).val(''); }
},
'blur': function(){ // reset the placeholder
if( $(this).val() == ''){ $(this).val($(this).attr('placeholder')); }
}
});
[/javascript]

And all is good and right in the world.

I'm assuming you have a basic understanding of document structure and how to implement jQuery.

If you have any questions, please ask.

I want to switch blog systems. Looking for a minimal blog platform

I feel that WordPress has become more of a CMS and has too many features that I don't need (or want). Also, I've noticed a significant performance problem. In all fairness, this could be a problem with the plugins I'm using and not WordPress, but it's still a problem nonetheless.

I did a few quick Google searches and ran across a promising (future) blog platform going by the name Ghost.

Anybody else have a suggestion for something that's real NOW and like Ghost?

I may end up developing something myself, but everyone knows how much we developers hate "reinventing the wheel"

12 ways to tell a webmaster is no good


  1. They refer to themselves as a "webmaster"
    if they refer to themselves as a "webmaster" you can safely assume they're awful. (this is similar to anyone with an @aol email account  inevitably  being a customer support nightmare)

  2. HTML tags are all uppercase
    <P>

  3. inline styles
    <P STYLE="COLOR: RED;">some text </P>

  4. FONT, B or other deprecated tags.
    Doesn't bother staying current with standards.

  5. Scrolling Marquees
    Bad.

  6. excessive spacing
    sign of an amateur using a WYSIWYG

  7. seemingly random <P></P> tags
    sign of an amateur using a WYSIWYG

  8. redundant/unnecessary element wraps
    <h1><em><strong>some text</strong></em><h1>

  9. classes or IDs for everything

    <p id="para2">some text <strong id="strong2">strong text</strong> more text <em class="italic3">italic text</p>
    fix: the id/class inside of the paragraph wrapper can be safely eliminated and can be set with #para2 strong and #para2 em. if there are multiple cases of the same element needing separate styles, the use of css2 selector :nth-child(N) can be used.

    for example:
    <p id="para2">some text <em>italic</em> more text <em> another italic</em> some text <em>italic 3</em></p>
    the default could be set as #para2 em { color: red;} and the 2nd em could be set to blue using #para2 em:nth-child(2) {color: blue; }

  10. unnecessary DIVS

    <div id="myDIV"><img src="some.jpg"></div>
    fix: assign a style to the image. start with display: block;

  11. excessive <BR> tags

    <br /><br /><br />
    fix: assign a style using margin-bottom

  12. Tables for page layout

    Bad. Tables are very cumbersome and not device friendly. The only acceptable format for tables is to display data (iffy) or in custom email templates.

jquery waypoints and throttle-debounce

Yesterday I went looking for what people are using to load content when it enters the window (is scrolled to).

I found jQuery waypoints.

Currently I'm using it on the homepage to load the animation of Zeah once it's scrolled to.

Unfortunately the plugin wasn't as easy to implement as I was led to believe. The issues I ran into had to do with altering the DOM with my loading scripts. I set the $.waypoint function to run at the right time (after everything is loaded) and now it seems to be working OK.

The waypoints site has a few demos that I'm dying to try out. Like a sticky nav and ad tracking. I don't ever plan to have ads on my site (especially not the homepage) but it would be useful to know when people are viewing content further down the page or if they're sticking to the first screen.

That brings me to throttle-debounce. I actually saw while looking through the waypoints source that they mention throttling, so I looked it up. Seems like it would be useful to implement on any events/functions that might be triggered several times (like hover overs and animations).

I didn't get a chance to look too much into it, but it's now on my to do list.

What do you use for "waypoints" and script throttling?

Leave you answer in the comments :)

[an error occurred while processing this directive]

Anybody know what this means?

[an error occurred while processing this directive]

It's appeared twice now on my Bluehost account (seemingly random) without warning or activity on my part and it "fixed" itself after a short period of time.

Maybe it's a result of my Bluehost overlords upgrading the servers?

Facebook like/comment inconsistency in JSON response from the Graph API

When there's 0 likes the data is missing from the JSON but when there's 0 comments it actually displays "0 comments" in the data.

Example Graph API JSON response
{
id:"513086950_10150999823946951",
from:{
name:"Joe Jiko",
id:"513086950"
},
message:"Speaking of the graph api, when there's 0 likes the data is missing from the JSON data but when there's 0 comments it actually displays \"0 comments\" in the data.",
actions:[
{
name:"Comment",
link:"https://www.facebook.com/513086950/posts/10150999823946951"
},
{
name:"Like",
link:"https://www.facebook.com/513086950/posts/10150999823946951"
}
],
privacy:{
description:"Public",
value:"EVERYONE"
},
type:"status",
application:{
name:"JoeJiko.com",
namespace:"joejikocom",
id:"160372647359458"
},
created_time:"2012-08-18T04:05:46+0000",
updated_time:"2012-08-18T04:05:46+0000",
comments:{
count:0
}
}

Why would they do this?
I'm now forced in my application to check if likes are undefined whereas it's unnecessary to do so for comments.

Firebug: SyntaxError: syntax error [Break On This Error]

Ran across this error in firebug after changing around the directory structure of one of our client's landing pages.



It's a very poorly worded and generic error message.

Obviously the doctype doesn't have a syntax error..

So what does it mean?
Some of the Javascript files on the page had invalid SRC urls.

Check the URLs to your JS files on the page and the error will disappear.

Although it does mention the JS file that's missing, it makes it seem like the missing JS file is being loaded and has an issue on its first line.

Confusing?

 

Did this help you? Let me know in the comments!

CS-Cart 3.0.1 design mode - view storefront in customization mode not working (solved)

Customization mode not working?
Short answer: There's a problem with CS-Cart's login system!

Instructions (for CS-Cart 3.0.1)

1) Switch to customization mode by going to the admin panel (default admin.php) and selecting design > design mode from the top nav.


2) click the "enable customization mode" button


3) follow the link "View STOREFRONT in customization mode."



4) you'll see your store front.. with NO customization hints. Login again with your admin user/password.

done.


You should now see little icons with tool tips pointing to relative templates when you hover them.

I decided to post this because I wasted a load of time trying to solve it.

Since my company decided to dedicate ourselves to using CS-Cart on client sites instead of Magento, I have been increasingly frustrated at the lack of good developer documentation in my struggle to familiarize myself with the system.

Hopefully these instructions will prevent someone else from wasting their time as I did.
If this helped you.. please leave your comments below :)

Omit optional HTML tags

What? Optional tags?

"For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted."

HTML5 Specification on optional tags




Hmm.. okay. Nobody wants to read that. Someone please show me an example.

Example  (thanks Google!)


Mind. Blown.

This literally goes against all of the HTML I've written in the past 10 years. It's like someone took the XHTML enthusiasts and lit their bible on fire. No </p> tags! No <head> or <body>?  Blasphemy!

I feel my brain struggling to conform.

Silly mistake with jQuery and a CSS ID [Web Development]

I felt like I had to share this story! I was sitting at my desk, stumped, because I was trying to create a logout action for an app using the Facebook API and it seemed like my jQuery selectors were ignoring me. I double checked everything, did some back research on .live() and .on(). Did some more research on delegated events (since I was binding a click event to an element generated after the DOM loads). Nothing. I could NOT get it to work! I decided it might be because I was using an ID selector instead of a Class (you never know the weird things that can cause your program to break) and I noticed that I had the following code: <a id="#logout" href="#!/logout">Logout</a>

Anybody catch my mistake? id="#logout" should NOT have a # sign in it! DOH! Still, it wasn't a total waste. I learned that .live() has been deprecated in favor of using .on() delegated events. You can read more about that  here.