Pushup Makes the Web Stronger

Posted on by Paul

Every web developer that I know is sick and tired of making compromises and hacks to accommodate Internet Explorer 6 and other browsers that are not standards compliant. While graceful degradation (or progressive enhancement, depending on which philosophy you subscribe to) will continue to be a par for the course for the forseeable future, it would be great if we could fully take advantage of the available technologies and minimize crosss-browser tesing costs in our project budgets.

To this goal, Nick Stakenburg released a script that gently alerts the user that their browser could use an upgrade. Pushup detects the version of the client and briefly flashes a notice with a link to download an update. The entire package is fairly lightweight (only 11kb, zipped) and includes the images, sylesheets and JavaScript files to run. Implementation and customization information is provided on the download site, in addition to ports of the function for dojo and jQuery.

This doesn’t really help users whose IT departments prohibit them from updating, but if it helps those who are unaware that there is a better web experience to be had then it is worthy of praise and support.

UPDATE

VICTORY!!! Even Microsoft is denouncing IE6. Track the downfall of this archaic software at IE6 Countdown.

sIFR + jQuery = Custom Typography Without Image Replacement

Posted on by Paul

If you haven’t heard of it already, sIFR lets you appease all those designers by integrating custom fonts onto your standards-compliant web page without turning them into images. On its own, it’s not a small or straightforward undertaking, requiring a number of additional CSS and JavaScript files to function. However, the recent release of the sIFR jQuery plug-in should make it more accessible to developers:

First, jQuery makes finding the item(s) that you want to replace as easy as using CSS. Then, the jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors, and any other configurations needed for the conversion. The jQuery sIFR plugin is fully configurable and can choose how little or how much you want to customize the display of the sIFRed text. Finally, the jQuery Flash Plugin does a most excellent job of embedding the sIFR flash into your web page. After all is said and done, you should have beautiful sIFR replaced text with consistent behavior across all major browsers.

All the resources are available for download from the developer’s site, as well a simple API and usage examples for easy customization.

UPDATE

While sIFR may have its uses it also has a number of serious drawbacks. Check out some of the emerging web typography technologies, including Cufón, @font-face and Typekit.

The Evolution of Sizzle

Posted on by Paul

Among the many interesting things discussed in the interview with Sitepoint, John Resig again brought up a project titled Sizzle. No, he’s not talking about adding POW BANG SHAZAM to our web layouts; it’s an initiative to create standardized and easily-implemented CSS-based selectors for JavaScript.

Aside from its lightweight and extensible nature, jQuery’s ability to easily assign behaviors and attributes to custom-created arrays of elements without much hassle is one of its most appealing features. Using a similar scheme for other libraries, frameworks or even in stand-alone cases would not only simplify programming (goodbye document.getElementsByTagName “for” loops!) but would improve the language as a whole by making scripts more readable and accessible.

Integrating Your Social Networks

Posted on by Paul

If you’re reading this, you probably have them: social networks. Del.icio.us, Facebook, Flickr, LinkedIn, MySpace, Twitter, Virb, and countless others that supposedly keep us in closer contact with those close to us. A quick Google search returns over 34 MILLION results for the phrase, and it’s the holy grail, golden hammer, or panacea depending on who you talk to. But once you’ve decided which to participate in, how do you update them without wasting oodles of time?

Reviewing my Recent Posts, I have tried many times to begin a posting regimen to share information about my personal life as well as topics and links for fellow web developers with limited success. I attribute it to a combination of a lack of blogging discipline (as well as time and content) and the intimidation of having to post and update to the various services that I belong to. After performing a little research, I think I may have  painless solutions to connect and cross-link them. WordPress is the blogging software this site uses. The features that drew me to it are that it is open-source (free!), has regular updates, and is fully customizable. There is a vast library of themes and plug-ins to extend the functionality of application, and here are some of the ones I am utilizing to work toward my goals:

  • WordBook notifies Facebook whenever a new blog article is published. With an easy-to-integrate API, it creates a wall post with a distinctive icon to inform all my friends.
  • Twitter Tools not only lists recent tweets in a sidebar widget, but also provides the option to send post headlines to Twitter.
  • FlickrRss displays photos from your profile or recent items from your photostream RSS feed.
  • Digsby is not just the best new multi-client chat application that monitors e-mail and social network accounts, it also lets you create customized live chat widgets that can be placed on the page with WP-Digsby
  • BONUS: If you are looking for a social network aggregator check out netvibes, which features innumerable widgets and views to keep on top of all the feeds, posts and entries on your social network. It doesn’t have a WordPress plug-in that I am aware of, but it does a kick-awesome job of being the one-stop-shop for  information updates.

Addendum: WordPress 2.7 was released today, and in conjunction with the BuddyPress plugin, appears to give developers a framework to create their OWN social network tools. Facebook beware!

Agile Philosophy for More Than Just Software Development

Posted on by Paul

I posted a link to Getting Real About Agile Design to the studio message board recently, and it set off quite a discussion internally. A number of people were hung up on the phrase “software development” and weren’t able to see the applications of planned flexibility for the greater business model. Admittedly, it is quite challenging in contrast to the waterfall model of project workflow, but Agile practices seem more fitting to the attitude and goals of this business.

From the article:

Agile is here to stay. The economic difficulties of the past months have finally put waterfall out of its misery; now more than ever, long requirements phases and vaporous up-front documentation aren’t acceptable. Software must be visible and valuable from the start.

Using jQuery for DHTML Drop-Down Menus

Posted on by Paul

You may have heard of the Suckerfish Dropdowns featured on A List Apart (which use CSS and JavaScript along with valid HTML to create vertical or horizontal “drop-down” menus) and the the extended revised version Son of Suckerfish, but if you’re already using the jQuery library on your site the code to mimic the :hover pseudo-class gets even simpler.

Instead of:

1
2
3
4
5
6
7
8
9
10
11
12
13

sfHover = function() {
  var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  for (var i=0; i<sfels .length; i++)="" {="">
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</sfels>

You only need:

1
2
3
4
5

jQuery('#nav li').hover(function(){
 	$(this).addClass('sfhover'); //mouseover
 }, function(){
 	$(this).removeClass('sfhover'); //mouseout
 });

or, simpler yet:

1

jQuery('#nav li').bind("mouseover mouseout", function(){ $(this).toggleClass('sfhover'); });

Such is the beauty of using css-style selectors to build an array of affected elements. Of course, you must make sure the code is wrapped in $(document).ready(function(){…});, but there is no need to modify the window.onload event in this example. Otherwise, refer to the code provided in the above examples to get your markup and formatting styles in place.

Open Call: Eclipse

Posted on by Paul

My editor of choice lately has been Eclipse, even though I don’t know anything about Java. The PDT project for PHP development is wonderful for keeping track of variables and functions and classes that my site/application uses, and it has just enough panels that provide information about the projects that I am working on, as well as the attributes for just about every HTML/CSS element.

Coupled with Subclipse for Subversion source control, Eclipse is my one stop shop for all things web development.

My only problem is that I know I haven’t much scratched the surface of what it can do, or how it can help to simplify my workflow. I discovered the plugin library at EasyEclipse, but only experimented with a few of them; the HTML Tidy and webDAV + FTP plugins. I know that there are keywords and shorthand commands that can be entered to cut down on the entry of raw text, but I can’t seem to find a good resource for them.

If you use and love Eclipse, post a comment and share your resources about how it improves your workflow.

UPDATE

If you love Eclipse, but want something that will easily let you add functionality like SVN, Git, or support for Ruby on Rails, check out Aptana. It’s a fantastic editor/IDE that absolutely blows DreamWeaver out of the water.

Cross-browser Debugging

Posted on by Paul

A number of code monkeys that I know use the Web Developer Toolbar in conjunction with the Firefox browser. The addition of a menu/toolbar is quite handy, especially the abilities to enable or disable JavaScript and CSS, and providing line guides and rules to ensure proper alignment of layout elements. Despite being so comprehensive in its features, it lacks the ability to view the loaded assets of a page, explore the DOM tree, or view box model for any element.

This is where Firebug comes in, allowing you to not only inspect an element with one click to reveal all of its defined and inherited styles and attributes, but also to edit the properties in the browser without having to make changes to the source documents.

With the most recent version of Firefox, I had issues with viewing the attributes and styles of the A element, but I found that an upgrade to beta version 1.1 solved the problem.

And for testing in Safari, Opera or dreaded Internet Explorer, they offer Firebug Lite that can be implemented via Javascript file to take advantage of the console object, which can be very useful for debugging JavaScript. I plan to write in further detail later about the wonder and majesty of this feature, so stay tuned.

If you enjoy the inspection aspect of Firebug, there is another cross-browser tool available called pi.debugger. It does not work with Safari (at least not version 3) but performs like a champ on IE, Camino and Flock. The script can be downloaded to your workspace or linked to from the Google source page in the link.

Given the number of options and resources available, the task of finding that one property that is throwing your whole layout off should be made that much easier. Happy hunting!

ADDITION: Westciv has released a slick bookmarklet called XRAY that lets you inspect elements in almost any browser.

I’m Blogging This

Posted on by Paul

No, I’m not talking about this ThinkGeek item, I just installed the ScribeFire extension (or add-on, if you’ve never worked with the older versions of the browser) for Firefox. Hopefully this will help me to actually create some of the blog postings that I set out to when I was envisioning these pages.

I don’t think of myself as on who frequently uses trendy catchphrases or jargon excessively (and I can’t stand those people who use the word “blog” like the Smurfs use “smurf”) but I hope that through this channel I can accomplish the following things:

  1. Improve my own style, grammar and vocabulary through writing on a more regular basis, though I will try to avoid too many obscure esoteric references
  2. Provide interesting links and useful resources to others in the web development field
  3. RantVent about things in life unrelated to my workplace or personal relationships (I can’t exactly be anonymous about these things people)

So, with this in mind, stay tuned and feel free to comment or contact me if you have suggestions. (or complaints!)

BarCampMilwaukee2 (part 2)

Posted on by Paul

Day 1 of BCM2 is at a close, and I can’t help but share some thoughts and experiences. First off, it was really nice to run into an old friend. After a somewhat rocky start (things really didn’t kick off until almost 11, then there was a lengthy introduction process, and followed up by a less than timely arrival of lunch) the proposed sessions were posted, and overall things looked promising.

Tracy and I even decided to present a topic — Program Like It’s 1999. We hoped that it would be a satirical look at how web design has changed in the last 10 years. Originally the plan was to create a horrific table-based template to distribute to the participants and create something that we could all laugh at. UNFORTUNATELY the wireless kept dropping out and we were unable to make much headway. Because of this things turned more into a discussion of standards-based design and sharing CSS tips.

Beyond the sessions and networking, I managed to improve my personal website. Recently I learned about object-oriented PHP and discovered the value of implementing scalable solutions. After a bit of trial-and-error, I created a class specifically for connecting to MySQL databases and returning resources or boolean values. Hopefully as things progress I will be able to add to and refine the object.

After dinner, there were a few more sessions but I opted not to stay for the overnight.

BarCampMilwaukee2 (part 1)

Posted on by Paul

This weekend I am attending the second annual BarCampMilwaukee. From the name, you may think it has something to do with drinking, or serving drinks, or tents. In fact, the goal (according to the faq) is to host an impromptu conference that is organized and presented by its participants.

“A 32 hour anti-conference about the intersection of art technology and culture.”

I don’t think I can express enough how insanely great an idea this is. In practice, it might end up being a complete and total disorganized disaster, but I genuinely hope not. Imagine it — mac and windows and linux users, php and asp.net and java developers, meeting to discuss common interests and share resources.

The programs listed on the site for examples seem varied in their goals and aspirations. What I’d like to take away from this experience would be increasing my network, learning about new technologies and techniques, and maybe even presenting a program. If I feel brave.

Hello world.

Posted on by Paul

I think that title is pretty appropriate; considering when a person learns a new programming language, the first attempts usually involve outputting the text ‘hello world.’ So this is me learning the language of blogging. <blog on>

I hope to use this forum to share resources and links about web design, programming, and general geekery, as well as to talk about things going on in my life (sorry no sex or violence here). I will try to keep this regularly updated, and we’ll see where this all leads!

Switch to our mobile site