28 Oct 2010 Ferado

How to be a good web developer

I recently added live chat to my site in hopes of helping my readers and picking up more business. Adding live chat is easy when you use a service. I’m using Olark. They offer different plans, depending on your budget; I’m using their free version.

When implementing the code, I had a few different, easy to implement, options:

  1. Copy and paste the code, as is, without change (most slackers do it this way).
  2. Put the code in a theme function with a descriptive function name using the wp_footer hook.
  3. Put the code in a plugin, existing or new, using the wp_footer hook.

I’m sure the quickest and easiest way would have been to use option #1. It’s easy to implement and it takes 2 seconds. Right? Well, here’s my problem with that approach. You have ugly, loose code in your theme. That right there should scare you away from that approach; however, your average developer will do it this way. It’s sad, really. What you need to understand is that being a good developer does not necessarily imply that you’re the fastest. Remember the story about the tortoise and the hare? This approach is horrible. Having un-organized code just laying around is bad. What happens when you need to make changes? What happens when you forget what the hell that code is? Forgive my cursing, sometimes I forget where I am.

The second approach is better; however, what happens down the line when you need to change the theme and you want to keep live chat on your site? You’d have to move the code over to the new theme.

My approach, #3 from the preceding list, is better and only takes a few moments to think about what you’re doing before doing it. What I’m suggesting here is creating a new plug-in or using an existing one that matches what you’re trying to do. In my situation I had to create a new plug-in named “Barton Enterprises” because of the new company I’m forming. I’ll be putting my live chat code on many sites. Therefore it makes sense to put it in a plug-in like this. Even if I wasn’t putting this code on multiple sites, it still makes sense to put the code in a plug-in for reuse. This is EXACTLY what your teacher in school would have told you. Unfortunately, in the business world, I’m one of the few people to do it the proper way.

The code using the wp_footer hook

[cc lang=”php”]

//… preceding code

add_action(‘wp_footer’, ‘bartonenterprises_livechat’);
function bartonenterprises_livechat() {
echo ‘…code…’;
}

// … other code

[/cc]

Moral of the Story

What I’m trying to teach here is that it’s better to take a moment and think about future use cases before working on a project or developing anything. Lots of people out there are just there to knock things out and do things quickly (the first time) without thinking about future implications. Time and time again these people have to go back and fix their work.

I’m merely suggesting that you write your code to last. Is that too much to ask?

24 Jan 2010 Ferado

Getting your legacy site to look good in IE8

Internet Explorer 8 was released March 19, 2009 and what an exciting browser it was supposed to be. It was going to be faster, allow you to browse privately, it was going to be be XHTML compliant, and it was going to be more secure. All those fun things, right? Sadly, IE8 was faster, had a private mode, it was XHMTL compliant, and more secure than the older IE browsers.

The Problem

You must be wondering what the problem is right? Well, there wasn’t really a problem with the browser. There was a problem with your code, wasn’t there? You coded around IE6 & IE7 bugs. You made your site look lovely in those 2 browsers, and now that IE8 is out, your site looks broken again, doesn’t it?

What are you supposed to do about it?

The Solution(s)

7 solutions come to mind. In words similar to Fox News, “I report, you decide.”

  1. Ignore the problem and let your users click on the “compatibility view” button.
  2. Hope that your users have “compatibility view” enabled for all their websites.
  3. If you’re an IT Administrator, and this is an intranet site we’re talking about, then you can set “compatibility view” for all the computers in your network.
  4. Enable “compatibility view” for your website by using the following header with IIS or Apache:
    [cc]
    X-UA-Compatible: IE=EmulateIE7
    [/cc]
  5. Use a meta tag on a page-by-page basis. Make sure the meta tag is directly after the HEAD tag.
    [cc lang=”html”]

    [/cc]
    Example:
    [cc lang=”html”]



    Hello World!

    Yes world, I see you!



    [/cc]

  6. Fix your code with IE hacks by adding new JavaScript, HTML and/or CSS.
    [cc lang=”html”]

    [/cc]
    With IE hacks you can embed HTML, CSS and JavaScript. Only IE reads the conditional. All other browsers treat it as an HTML comment.
  7. You can also add the header via your favorite programming language. I think it’s easier to add it through IIS or Apache, but if you want to do it on a page-by-page basis and you feel this is an easier way, by all means:

    Putting the IE8 compatibility in your PHP script:
    [cc lang=”php”]
    < ?php // PUT THIS WITH ALL YOUR OTHER HEADER CODE header('X-UA-Compatible: IE=EmulateIE7'); // ... the rest of your code [/cc]

Conclusion

Now you know what to do with IE8 and your legacy site. I’ve shown you 7 ways to make your site whole again. Of course these solutions are not limited to legacy sites. If you are in a jam and need to get your site working in IE8, these solutions with work for you too. Of course, the first 3 solutions should be ignored if you ever want to call yourself a professional.

21 Jan 2010 Ferado

10 Ways To Make Your XHTML Site Accessible Using Web Standards

10 Ways To Make Your XHTML Site Accessible Using Web Standards

In 2009, Smashing Magazine wrote up a great article about the 10 ways to improve the accessibility of your XHTML website by making it standards-compliant. A few of the things they touched up on were specifying the correct DOCTYPE, one thing we seems to ignore because most of the time our IDEs generate this for us; defining the namespace and the default language; supplying proper meta tags. They go ahead and list 10 of them.

[ad]

Again, a great article. I like to brush up on the article every few months so I can save time in the long run.

[source href=”http://www.smashingmagazine.com/2009/06/18/10-ways-to-make-your-site-accessible-using-web-standards/”]

17 Jan 2010 Ferado

How to check if your popup was blocked using JavaScript

When I researched how to get pop ups to not be blocked using flash, in that research, I found out how to check and see if a popup was blocked or not. It’s such a simple solution I don’t know why I haven’t consciously noticed it before. I’ve created many popups in the past, just never thought about how I would check if a popup was blocked.

The Solution

Using JavaScript, put something like this in your code:
[cc lang=”javascript”]
// this is sample code so replace
// wurl = the url you want opened
// wname = name given to the window so you can reference it again programmically
// wfeatures = optionally you can give it scroll bars, make it resizeable, etc.
var win = window.open(wurl, wname, wfeatures);
if(win == null || typeof(win) == “undefined” || win.location.href == ‘about:blank’) {
alert(“Please enabled popups for this site to continue.”);
}
[/cc]

That’s it! That’s all you need to do to test if someone has blocked your popup. Now you need to decide if it’s worth the hassle of working with popups and how to handle when a popup is blocked.

The three simple ways around using popups are:

  1. Use target=”_blank” on your anchor tag
  2. Use a modal popup, which is just a layer within the DOM
  3. Use inline code that slides down, up or sideways

Remember that you should never automatically open a new window for a user. That’s just rude and unethical these days. Use something inline instead. Only open a new window after a “click” event has been fired. Automatic popups are evil.

10 Jan 2010 Ferado

20+ Useful Desktop Blog Editors

20 Useful Desktop Blog Editors

Even though I prefer a web interface when blogging, I feel I should let you all know about a great article introducing 20 or so blogging tools. It’s really well written so I don’t feel the need to summarize. Check it out and enjoy!

[source label=”Visit Source” href=”http://www.webdesignerdepot.com/2009/07/20-useful-desktop-blog-editors/”]

7 Jan 2010 Ferado

TomatoCMS: The NEW CMS in Town

TomatoCMS

Ladies and Gentleman, the moment you have all been waiting for – a new CMS to come into your life and confuse the shit out of you – TomatoCMS. Just when you thought there were enough CMS’ out there to choose from, a new one pops out and says “Hello World.”

All kidding aside, I’m actually quite intrigued by TomatoCMS. Now, I haven’t tested it out yet, but this CMS does sound promising. I know there are better ones out there that you might know about (Drupal), but you should still give this one a try. And here’s why.

[ad key=”text-inline”]

Features & Benefits

  • Built using the Zend framework (this is a BIG plus for me) which means you have a solid foundation you can trust.
  • Modules/Plugins are available so that it can be extended – you’re not stuck with vanilla, when you might want some chocolate.
  • Multi-language support. This is great – now you can stop discriminating and allow everyone the ability to read what you have to say.
  • Comes with jQuery. That’s all I’m going to say. Well, no, I’ll add this: Prototype JS blows.

How to get it?

Go to the website. It’s been running slow for me so please be patient.

Download TomatoCMS
View Demo