The Book and the Cover http://benjaminsterling.com Ok, you did not judge the book by it's cover, great. Now, read the whole thing before passing judgment. Tue, 24 Mar 2009 19:25:03 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 IE6 Support http://feedproxy.google.com/~r/benjaminsterling/~3/t7Zwutw2oIw/ http://benjaminsterling.com/ie6-support/#comments Tue, 24 Mar 2009 19:25:03 +0000 Benjamin Sterling http://benjaminsterling.com/?p=142 With the launch of Internet Explorer 8 last week there has been a good amount of talk for support for IE6. At my company we are currently discussing the best approach that will both keep the client happy at the same time forcing people to upgrade their expectations of a browser. Some thoughts have been to charge a premium to support IE6 – whether this is a percentage of total expect hours for a project or a flat rate based on the requirements , the difference being building with IE6 in mind compared to progressive enhancements after the fact. Obviously my team has pride in our work so we most likely would be building to some extent with IE6 in mind either way.

The following stats are some questions I posted surveying a large group of people.

What do you fall under?

Response Total Percent
Developer 117 54.93%
Designer 78 36.62%
Profession (ie. PM, Director) 18 8.45%
213

What type of client do you support?

Response Total Percent
Commercial (big companies) 84 32.81%
Mom and Pop type clients 84 32.81%
Non-Profits 58 22.66%
Government 30 11.72%
256

How long will you/your group support IE6?

Response Total Percent
Umm… IE6 who? 50 24.27%
Till what seems like the end of time (or till gov’t offices update) 53 25.73%
Another 6 months, then progressive inhancements FTW 26 12.62%
Another 6 months, then not at all 24 11.65%
Another year, then progressive inhancements FTW 14 6.8%
Other Options 39 18.93%
  • Other Text
  • We only suppport it for clients that ask for it.
  • As soon as Windows 7 OS is released to the public
  • until our internal IT team drops 6
  • when full experience is needed for ie6 clients, otherwise prog. enhancement now
  • Bare minimum now (works, may not look 100% perfect) unless there is extra budget for it.
  • As long as there is a business requirement to do so
  • As long as my damn clients still have it on their desks
  • Until enough of our client’s client’s no longer use IE6.
  • unsure, our clients are often not tech savvy
  • only when target audience uses
  • We only suppport it for clients that ask for it.
  • As soon as Windows 7 OS is released to the public
  • until our internal IT team drops 6
  • when full experience is needed for ie6 clients, otherwise prog. enhancement now
  • Bare minimum now (works, may not look 100% perfect) unless there is extra budget for it.
  • As long as there is a business requirement to do so
  • As long as my damn clients still have it on their desks
  • Until enough of our client’s client’s no longer use IE6.
  • unsure, our clients are often not tech savvy
  • only when target audience uses
  • IE7.js
  • Once our IE6 usership drops below 5%
  • Depends on user agent stats to my clients’ sites
  • I detect IE6, then redirect visitor to page ‘gently’ suggesting they upgrade to a better browser (with links to Firefox, Opera, Safari, Chrome, and IE7/8)
  • Until it holds a significantly lower Market share that we can profesionaly ignore it
  • Already stopped
  • until we replace expensive legacy apps that rely on IE6 for some reason
  • Untill ie8 becomes as involved as ie6
  • until IE6 market share drops below 5%
  • We only provide basic support as a opt-in feature.
  • Till clients stop using it.
  • we get the basics working, anything else is a bonus
  • Already dropped support
  • I simply try to ignore IE6 =)
  • I can’t say. My clients still see traffic from IE6.
  • progressive inhancements FTW already
  • ceased support 1st Jan 2009
  • No more support DIE IE6!
 206

If you have to support government agencies, how do you plan to tackle the IE6 issue?

Response Total Percent
Will support, but with a IE6 cost adjustment, ie. charge more 93 52.84%
Just keep doing what we do 75 42.61%
Other Options 8 4.55%
  • Other Text
  • Since I work for a govt agency I don’t really have a choice. Supposedly IE7 will be released soon but they’ve been saying that forever. Until then, its all about progressive enhancement
  • I don’t pay taxes so govt. agencies can use browsers like IE6.
  • Since I work for a govt agency I don’t really have a choice. Supposedly IE7 will be released soon but they’ve been saying that forever. Until then, its all about progressive enhancement
  • I don’t pay taxes so govt. agencies can use browsers like IE6.
  • n/a
  • IE MUST DIE!!!!!
  • I dont
 176

How does having IE8 available effect your process?

Response
  • How does having IE8 available effect your process?
  • Response
  • Doesn’t
  • It makes it worse. Now we have THREE versions of IE to test in!!!
  • Not at all, just one more browser to test for.
  • It doesn’t. We don’t even have IE7 deployed across our agency.
  • definitely gives us more leverage for dropping IE6
  • not at all until mass adoption
  • We have not setup a plan yet but are planning currently
  • just another browser to debug in.Also, should be noted that IE 7 is considered ‘buggy’ and ‘unsafe’ by most corporate IT services including AOL and Time Warner
  • Not at all.
  • Hopefully it helps fight our cause for stopping IE6 support
  • It’ll just mean one more browser to test in.
  • Currently, not at all. The bigwigs at my company have yet to recognize it.
  • We’ll add X-UA-Compatible = Edge headers, and fix IE8 rendering issues that we might have ignored while it was still in beta.
  • None until the % of IE6 users drops below a certain threshold.
  • It’s just yet another browser to support. No difference.
  • It doesn’t
  • Doesn’t. The gov has IE6.
  • allows me to shame IE6 users more.
  • It complicates it—there’s now another browser to test against. It wouldn’t be such a problem if the IEs weren’t so annoyingly different from version-to-version.
  • We told IE6 to take a hike months ago. IE8’s just another browser to test.
  • One more crappy browser to deal with.
  • It doesn’t yet. We’ll use IE6 internally until 2056.I do internal web apps, and I wish we could code to more than IE6 though… it’s more of an impediment to professional development than anything else. I can only code/use other browsers outside of work.
  • Not much. If it’s truly standards compliant, then we’ll still have to use IE specific stylesheets and little hacks for users who have 7 and below.
  • Not much at all, thankfully. Just one more browser to test.
  • Afraid to see how crappy it is, can not answer that
  • We are not rolling it out until after our applications have been certified for user with them. They currently are not.
  • It makes me have to test for another fucking browser. Fuck!
  • i don’t know for now, but i’m expecting for some trouble in near future
  • it doesnt
  • Other than giving me one more browser to test in, it doesn’t.
  • We don’t get to play with it because the site is adamant that they WILL deploy IE7 (and Vista) first, just to fark everything up, instead of jumping straight to Win7 and IE8 or FF.
  • Doesn’t
  • It makes it worse. Now we have THREE versions of IE to test in!!!
  • Not at all, just one more browser to test for.
  • It doesn’t. We don’t even have IE7 deployed across our agency.
  • definitely gives us more leverage for dropping IE6
  • not at all until mass adoption
  • We have not setup a plan yet but are planning currently
  • just another browser to debug in.Also, should be noted that IE 7 is considered ‘buggy’ and ‘unsafe’ by most corporate IT services including AOL and Time Warner
  • Not at all.
  • Hopefully it helps fight our cause for stopping IE6 support
  • It’ll just mean one more browser to test in.
  • Currently, not at all. The bigwigs at my company have yet to recognize it.
  • We’ll add X-UA-Compatible = Edge headers, and fix IE8 rendering issues that we might have ignored while it was still in beta.
  • None until the % of IE6 users drops below a certain threshold.
  • It’s just yet another browser to support. No difference.
  • It doesn’t
  • Doesn’t. The gov has IE6.
  • allows me to shame IE6 users more.
  • It complicates it—there’s now another browser to test against. It wouldn’t be such a problem if the IEs weren’t so annoyingly different from version-to-version.
  • We told IE6 to take a hike months ago. IE8’s just another browser to test.
  • One more crappy browser to deal with.
  • It doesn’t yet. We’ll use IE6 internally until 2056.I do internal web apps, and I wish we could code to more than IE6 though… it’s more of an impediment to professional development than anything else. I can only code/use other browsers outside of work.
  • Not much. If it’s truly standards compliant, then we’ll still have to use IE specific stylesheets and little hacks for users who have 7 and below.
  • Not much at all, thankfully. Just one more browser to test.
  • Afraid to see how crappy it is, can not answer that
  • We are not rolling it out until after our applications have been certified for user with them. They currently are not.
  • It makes me have to test for another fucking browser. Fuck!
  • i don’t know for now, but i’m expecting for some trouble in near future
  • it doesnt
  • Other than giving me one more browser to test in, it doesn’t.
  • We don’t get to play with it because the site is adamant that they WILL deploy IE7 (and Vista) first, just to fark everything up, instead of jumping straight to Win7 and IE8 or FF.
  • Sure does!
  • Frankly it’s just another pain in the ass. It just adds another browser to test on. It’s already not a short list
  • Just one more browser to test in… :(
  • Hopefully will lead us into an age where IE6 WILL be outlawed… or something like that.
  • na
  • Not yet… but we’ll likely focus on IE7 and IE8 soon and less and less on IE6.
  • Just makes it more complicated, I guess!
  • no effect.
  • We will have to start testing in it, although the priority on the fixes will be much lower that FF, IE6/7 and Safari.
  • It doesn’t. It just came out, need to wait 6 months to a year for people to update. Still can’t use some things until even IE 7 is dead.
  • We will now check in IE8
  • just another browser to test in
  • One more browser for test
  • Sigh.
  • Just one more browser to QA and tweak for.
  • Another VM with another browser to test in… more development time.
  • As we primary design for FF, not very much.
  • Not yet.
  • It hasn’t at the moment. Will now download as IE8 is out of beta
  • Adds one more browser to test once we find a machine to put it on.
  • IE8 doesn’t affect things until it becomes more popular. Then I’ll need to add it to the list of browsers to test in.
  • First of all, it’s *affect* not ‘effect’. Effect means ‘bring about’ or ‘make happen’. (Sorry, my mom was an English teacher!).Second, the IE8 beta’s been around for what, a year now? So having the actual release doesn’t make much of a difference to my development process. Although I suppose I should pay attention now to making sure the sites I build look proper in IE8, the reality is that the vast majority of my clients’ visitors won’t be using IE8 just yet, unless Microsoft forces it down their throats via a non-optional update.
  • Until the people in charge of Corporate IT networks pull their fingers out, it makes zero difference
  • not sure yet :)
  • IE8 will continue to be the worst browser. It is less bad than IE6, however.
  • I need another desktop to test for IE8, the way I already have one just for IE7 testing…can’t do some of the fancy tricks here at work to get them up side by side
  • Still renders differntly, ie7 still seems easier to deal with
  • It lengthens the time spent on IE-fixing ¬¬
  • Doesn’t really effect it. One more browser to test in but it’s the closest to standards so far.
  • we make our website the more cross browser possible. It’s just another test we must do.
  • It doesn’t. If it’s standards-compliant, it should work fine anyway. If it’s not…DIE!!!!
  • Not right now. Many of my clients are small businesses. Main focus on IE7 and some IE6 right now. But this will change soon.
  • one more effing browser to test in. and an effing Microsoft browser no less
  • It’s just another site to test it. It also means I can push a bit farther into the realm of CSS3.
  • Nothing now as everything we do already works in 8, but hopefully it effects our clients process, getting them to upgrade from 6.
  • Just another browser to test.
  • just another browser we have to test in.
  • It’s actually a kick in the pants, but not because of IE8 itself, but rather its IE7 ‘compatibility’ mode. Since, that mode won’t render the way IE7 itself renders, it effectively adds another browser to test and support.
  • it doesn’t really yet.
  • test
  • We’ll have another browser in which to test, and another stylesheet to implement should the need arise (via conditional comments)
  • So far not at all. It seems to be working well.
  • At least it is somewhat compliant but is already behind the curve without CSS3 support. So many people that use IE don’t even know what version they are using so unless microsoft forces a change my life will still be burdened by the plagues that is know as IE. I only see a minimal change in the near term to my process.
  • it makes debugging for ie7 and 8 easier
  • Haven’t really tested in IE8. I’m fairly confident that the majority of work will be OK. Will need to look more closely at what I must do to ensure standards compliance mode.I’ve been watching site stats and I think across all the sites I manage I’ve had 2 or 3 visits from IE8
  • One more browser to test in.
  • Well. I’m hoping that with the news of IE8 some people will upgrade after realizing there has been two major versions of the browser released. In the end I hope it will keep me from spending a ton of time fixing the site for IE6.
  • Minimal
  • not sure yet
  • hmmmm. it is a microsoft product. need I really say more. I will likely have to hack on
  • It’s another browser to test again, but so far the testing process seems pretty straightforward. I expect that having implemented CSS2.1 properly will mean that it won’t impose too much change in our process. Of course, in theory.
  • Makes developing for these kind of platforms a lot easier. Less time concerning stupid errors and glitches specific to IE platform.
  • Makes more problems to deal with.
  • Doesn’t effect
  • Hope, IE6 will die.
  • Hardly at all. I mostly test in webkit and mozilla browsers then when the page is done I see if everything works okay in the IE 6-8 and include conditional stylesheets to work around the ‘bugs’.
  • Not at all. IE7 only recently became our officially supported browser. As much as I hate to say it, I don’t expect to see IE8 in our environment for some time.
  • Saves me and the client money
  • Yet another browser to test in.
  • Don’t know yet.
  • None really because it’s too new
  • Just one more browser to test on. Hopefully that slice of IE6 will keep shrinking. Is it worth testing for if it gets under 10%? Most of my clients audience has already moved on to IE7+
  • It has yet to affect us. I’m terrified when we start supporting it.
  • Still trying to sort that out.
  • it creates more work. IE8 compatibility view is not the same as a native IE7 client so now we have to work with even more cross-browser issues.
  • Doesn’t really. There have always been browser inconsistencies to deal with, with IE8 there are some more.Only in my dreams do all browsers render the same.
  • I usually use the IE7 compatibility meta tag. So, IE8 is more like a pseudo-ghost to me anyways.
  • It hasn’t so far.
  • Better than IE6!
  • No
  • not at all so far…
  • Just another rushed out browser that has to be entered into the equation and bugtested for each project
  • Ugh, just another idiot browser to maintain..

Are your sites working in IE8?

Response Total Percent
Yes 133 63.94%
No 8 3.85%
Other Options 67 32.21%
  • Other Text
  • dunno
  • most, but not all
  • Haven’t tested yet.
  • have not been actively qa’ing for ie8
  • Don’t know
  • untested
  • Haven’t tested yet.
  • Still checking
  • Have not checked
  • not sure
  • Haven’t even tested yet
  • Internal NO, External Yes
  • testing this week
  • have no ieda
  • I’ve not played with IE 8 much
  • dunno
  • most, but not all
  • Haven’t tested yet.
  • have not been actively qa’ing for ie8
  • Don’t know
  • untested
  • Haven’t tested yet.
  • Still checking
  • Have not checked
  • not sure
  • Haven’t even tested yet
  • Internal NO, External Yes
  • testing this week
  • have no ieda
  • I’ve not played with IE 8 much
  • Maybe
  • Don’t know
  • Don’t know yet
  • Haven’t checked yet ;)
  • Haven’t checked.
  • We haven’t even started testing yet.
  • Most of them, yes
  • for the most part
  • haven’t been able to test yet.
  • Untested…
  • Haven’t tested all yet.
  • not sure at the moment
  • Do not know yet.
  • Not Sure
  • not sure
  • I don’t know
  • not sure yet.
  • Haven’t checked
  • mostly
  • Everything renders larger
  • Haven’t checked yet
  • I should say not…!
  • the phone’s not ringing … yet
  • Haven’t tested yet.
  • have not check them yet.
  • Most are, using the meta tag for IE7 rendering
  • Don’t know. I would imagine most if not all will work.
  • havn
  • idk I’ll begin testing in it now
  • not sure
  • The ones I direclyt worked on, yes
  • haven’t checked
  • untested
  • Mostly, have to fix some float issues.
  • need to check
  • there are issues
 208


]]> http://benjaminsterling.com/ie6-support/feed/ 0 http://benjaminsterling.com/ie6-support/ Chrome For Standalone Web Apps http://feedproxy.google.com/~r/benjaminsterling/~3/m_Z4Ep-8ebY/ http://benjaminsterling.com/chrome-for-standalone-web-apps/#comments Fri, 12 Dec 2008 16:00:27 +0000 Benjamin Sterling http://benjaminsterling.com/?p=124 Thanks to Seano I have been using Google Chrome to make my life easier.  How you ask?  Well, Chrome has a really nice bookmarking feature that will allow you to create a standalone instance of Chrome for what ever bookmarked site you want.  I use it religiously for Pandora , Google reader, Whos.amung.us, hulu, and gmail.

The process is pretty simple, make sure you have Chrome installed, open and browse to the website you would like to bookmark.


Just left of the address bar is a button, click that and you will get a drop down list of options. Click on “Create application shortcuts…” and you get the below dialog box. In my case, I am creating a “Quick launch bar shortcut for Last.fm, the other options are “Start menu” and “Desktop.”

After you hit ok you while now see you newly create shortcut:

Update: Rey points out that this feature has been available for Firefox in the form of a plugin for some time via the Prism add-on found here: https://addons.mozilla.org/en-US/firefox/addon/6665

]]> http://benjaminsterling.com/chrome-for-standalone-web-apps/feed/ 2 http://benjaminsterling.com/chrome-for-standalone-web-apps/ Portfolio Layout Idea Using jQuery http://feedproxy.google.com/~r/benjaminsterling/~3/6M2db5enU0E/ http://benjaminsterling.com/portolio-layout-idea-using-jquery/#comments Thu, 11 Dec 2008 19:16:23 +0000 Benjamin Sterling http://benjaminsterling.com/?p=133

The Inspiration

A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.

After digging around I came across thunderfuel's website and was like "OMG, I must make that" and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.

Demo of the Portfolio idea

The HTML

As always, I am using a definition list:

PLAIN TEXT
HTML:
  1. <dl id="portfolio">
  2.     <dt>
  3.         <img src="smallerImage.jpg" alt="cubes still life"  />
  4.         <a href=''>Domain.com</a>
  5.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  6.     </dt>
  7.  
  8.     <dd>
  9.         <h3><span>Project:</span> The Project </h3>
  10.         <h4><span>Client:</span> Acme </h4>
  11.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  12.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  13.         <img src="biggerImage.jpg" alt="cubes still life"  />
  14.  
  15.     </dd>
  16.     <!--  more piece adding up to an even number -->
  17. </dl>

The CSS

Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:

PLAIN TEXT
CSS:
  1. #portfolio{position:relative;width:850px;height:450px;margin:0;padding:0;overflow:hidden;}
  2. #portfolio dd{position:absolute;left:250px;top:-455px;width:330px;height:430px;margin:0;padding:0;background:#666600;padding:10px;}
  3. #portfolio dd h3{font:bold 15px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;}
  4. #portfolio dd h4{font:bold 13px Georgia, "Times New Roman", Times, serif;color:#fff;margin-bottom:0;margin-top:0;}
  5. #portfolio dd p{font:11px Geneva, Arial, Helvetica, sans-serif;}
  6. #portfolio dd img{display:block;margin:0 auto;border:3px solid #999999}
  7. .dt{width:240px;height:65px;background:#808040;font:11px Geneva, Arial, Helvetica, sans-serif;padding:5px;margin:0;}
  8. .dt img{border:2px solid #fff;height:55px;width:55px;float:left;margin-right:5px;}
  9. .dt a{display:block;color:#fff;font:bold 13px Georgia, "Times New Roman", Times, serif;padding-bottom:5px;text-decoration:none;}
  10. .dt.left{position:absolute;left:0px;}
  11. .dt.right{position:absolute;right:0px;}

The JavaScript

I am using the the easing plugin in my example so be sure to grab that also:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Here is the actual code being used:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.     $(document)
  3.     .ready(function(){
  4.         var hght = 0;
  5.         $('dt')
  6.             .addClass('dt')
  7.             .each(function(i){
  8.                 if( i % 2 ){
  9.                     $(this).addClass('left').css('top',hght);
  10.                     hght += 75;
  11.                 }
  12.                 else{
  13.                     $(this).addClass('right').css('top',hght);
  14.                 }
  15.             })
  16.             .click(function(){
  17.                 if( $('#portfolio dd:animated').size() ) return false;
  18.                 var that = $(this);
  19.                 $('#portfolio dd.showing')
  20.                 .animate({top:-455}, 750, 'easeOutQuad', function(){
  21.                     $(this).removeClass('showing');
  22.                     that.next().animate({top:0}, 750, 'easeInQuad').addClass('showing');
  23.                 });
  24.             })
  25.             .eq(0)
  26.             .next()
  27.             .animate({top:0}, 750, 'easeInQuad').addClass('showing');
  28.     });
  29. </script>

Demo of the Portfolio idea

The Improvements

So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?

Be all mean, let me know what you come up with.

Update: Made a change to the easing methods to easeOutQuad and easeInQuad, should be less jarring.

]]> http://benjaminsterling.com/portolio-layout-idea-using-jquery/feed/ 6 http://benjaminsterling.com/portolio-layout-idea-using-jquery/ Separating Pings/Trackbacks from Comments in WordPress 2.7 http://feedproxy.google.com/~r/benjaminsterling/~3/3KniBuOJkPw/ http://benjaminsterling.com/separating-pingstrackbacks-from-comments-in-wordpress-27/#comments Wed, 10 Dec 2008 17:00:35 +0000 Benjamin Sterling http://benjaminsterling.com/?p=125 With the coming release of WordPress 2.7 we now have an easy way to separate out your pings and trackbacks from your comments.

I will be using the default theme WordPress comes with to show you have to do this.  Below is the important code you should focus on:

PLAIN TEXT
PHP:
  1. <?php if ( have_comments() ) : ?>
  2.     <h3 id="comments">
  3.         <?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;
  4.     </h3>
  5.    
  6.     <ol class="commentlist">
  7.         <?php wp_list_comments(); ?>
  8.     </ol>
  9.     <div class="navigation">
  10.         <div class="alignleft"><?php previous_comments_link() ?></div>
  11.         <div class="alignright"><?php next_comments_link() ?></div>
  12.     </div>
  13.     <?php else : // this is displayed if there are no comments so far ?>
  14.    
  15.     <?php if ('open' == $post->comment_status) : ?>
  16.     <!-- If comments are open, but there are no comments. -->
  17.    
  18.     <?php else : // comments are closed ?>
  19.         <!-- If comments are closed. -->
  20.         <p class="nocomments">Comments are closed.</p>
  21.     <?php endif; ?>
  22. <?php endif; ?>

With WordPress 2.7, you would edit the wp_list_comments(); function to look like wp_list_comments('type=comment'); and just after line 8 (‹/ol›) put:

PLAIN TEXT
PHP:
  1. <h3 id="pings">Trackbacks/Pingbacks</h3>
  2.  
  3. <ol class="pinglist">
  4.      <?php wp_list_comments('type=pings'); ?>
  5. </ol>

That bit of code will echo out all the pings, so your final code should look like:

PLAIN TEXT
PHP:
  1. <?php if ( have_comments() ) : ?>
  2.     <h3 id="comments">
  3.         <?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;
  4.     </h3>
  5.    
  6.     <ol class="commentlist">
  7.         <?php wp_list_comments('type=comment'); ?>
  8.     </ol>
  9.     <h3 id="pings">Trackbacks/Pingbacks</h3>
  10.    
  11.     <ol class="pinglist">
  12.         <?php wp_list_comments('type=pings'); ?>
  13.     </ol>
  14.  
  15.     <div class="navigation">
  16.         <div class="alignleft"><?php previous_comments_link() ?></div>
  17.         <div class="alignright"><?php next_comments_link() ?></div>
  18.     </div>
  19.     <?php else : // this is displayed if there are no comments so far ?>
  20.    
  21.     <?php if ('open' == $post->comment_status) : ?>
  22.     <!-- If comments are open, but there are no comments. -->
  23.    
  24.     <?php else : // comments are closed ?>
  25.         <!-- If comments are closed. -->
  26.         <p class="nocomments">Comments are closed.</p>
  27.     <?php endif; ?>
  28. <?php endif; ?>

Ah, but there is a problem, what if you don't have any comments but you have pings/trackback or visa-versa? You should now be able to wrap each H3+OL combiniation in code like:

PLAIN TEXT
PHP:
  1. <?php if ( ! empty($comments_by_type['comment']) ) : ?>
  2.     <h3 id="comments">
  3.         <?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;
  4.     </h3>
  5.    
  6.     <ol class="commentlist">
  7.         <?php wp_list_comments('type=comment'); ?>
  8.     </ol>
  9. <?php endif; ?>
  10. <?php if ( ! empty($comments_by_type['pings']) ) : ?>
  11.     <h3 id="pings">Pingbacks/Trackbacks</h3>
  12.    
  13.     <ol class="pinglist">
  14.         <?php wp_list_comments('type=pings'); ?>
  15.     </ol>
  16. <?php endif; ?>

And that's it, your Pingback and Comments are now separate. Have a look at the final code below and let me know if I missed anything or if you have any questions.

PLAIN TEXT
PHP:
  1. <?php if ( have_comments() ) : ?>
  2.  
  3.     <?php if ( ! empty($comments_by_type['comment']) ) : ?>
  4.         <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
  5.        
  6.         <ol class="commentlist">
  7.             <?php wp_list_comments('type=comment'); ?>
  8.         </ol>
  9.     <?php endif; ?>
  10.    
  11.        
  12.     <?php if ( ! empty($comments_by_type['pings']) ) : ?>
  13.         <h3 id="pings">Pingbacks/Trackbacks</h3>
  14.        
  15.         <ol class="pinglist">
  16.             <?php wp_list_comments('type=pings'); ?>
  17.         </ol>
  18.     <?php endif; ?>
  19.  
  20.  
  21.     <div class="navigation">
  22.         <div class="alignleft"><?php previous_comments_link() ?></div>
  23.         <div class="alignright"><?php next_comments_link() ?></div>
  24.     </div>
  25.     <?php else : // this is displayed if there are no comments so far ?>
  26.    
  27.     <?php if ('open' == $post->comment_status) : ?>
  28.     <!-- If comments are open, but there are no comments. -->
  29.    
  30.     <?php else : // comments are closed ?>
  31.         <!-- If comments are closed. -->
  32.         <p class="nocomments">Comments are closed.</p>
  33.     <?php endif; ?>
  34. <?php endif; ?>

Update: In regards to Chris' question, there is a way to separate out your comments count; after some research you can use the get_comments_number filter, you just need to create function and put it in your functions.php file.

PLAIN TEXT
PHP:
  1. add_filter('get_comments_number', 'get_new_comment_count', 0);
  2. function get_new_comment_count( $count ) {
  3.     global $wp_query;
  4.     return count($wp_query->comments_by_type['comment']);
  5. }

If you don't already have a functions.php file in your theme, just add one.

]]> http://benjaminsterling.com/separating-pingstrackbacks-from-comments-in-wordpress-27/feed/ 5 http://benjaminsterling.com/separating-pingstrackbacks-from-comments-in-wordpress-27/ Skribit: A tool for getting post suggestions http://feedproxy.google.com/~r/benjaminsterling/~3/iia4hd4UOUo/ http://benjaminsterling.com/skribit-a-tool-for-getting-post-suggestions/#comments Tue, 09 Dec 2008 15:15:45 +0000 Benjamin Sterling http://benjaminsterling.com/?p=132 When coming up with topics to write about I really struggle; I would equate it to a root canal.  I just never know what you the read would really be interested in reading about.  In my mind, everything has already been writen about and that makes it even harder.  I know I can put my own point of view on any topic, but is my point of view better then the next guys?  It may be, who knows.

Since I want your feedback on what topics you want to read about, I signed up for skribit and installed the widget just to the right of this post.  What I ask from you is to use it, tell me what you want to hear about.  If you see a topic already in the widget you would like to hear about, vote it up and I will make sure to make that one a priority.

]]> http://benjaminsterling.com/skribit-a-tool-for-getting-post-suggestions/feed/ 0 http://benjaminsterling.com/skribit-a-tool-for-getting-post-suggestions/ Developer Tools That Don’t Get Enough Love http://feedproxy.google.com/~r/benjaminsterling/~3/tzIS67E0eho/ http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/#comments Mon, 08 Dec 2008 06:00:46 +0000 Benjamin Sterling http://benjaminsterling.com/?p=127

Jing

The concept of Jing is the always-ready program that instantly captures and shares images and video…from your computer to anywhere.

Why I think this tool should get more love? Ever needed to explain something over the phone to someone and they are just not getting it? So what do you do, you take a bunch of "print screens" and past it into a Word doc and send that over. They get it and they still don't get "it." Well, this is where jing comes in, you simply open the program - if you don't already have it open be default like me - select a section of the screen to record, record what you are trying to explain, save and the send that SWF over and you just saved yourself hours of hassle.
http://www.jingproject.com/

Yugma

Yugma is the leader in affordable instant web conferencing solutions. Yugma provides Free, Professional, and Enterprise web conferencing software-as-a-service (SaaS) solutions to individuals, small businesses, and large enterprises across a diverse range of industries.

Why I think this tool should get more love? Inline with Jing, using Yugma helps you take client "support" to the next level. Sometimes a three minute video is not enough, you actually need to see what the client is seeing and the next best thing to actually sitting of the clients or co-workers shoulder is to share their screen. Yugma's free account, although not as feature rich as the Pro account, it gets the job done in a pinch.
http://www.yugma.com/

Twitter

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Why I think this tool should get more love? Really, Twitter gets a ton of love from the average person to Steven Colbert to CNN but I don't think it gets enough love as tool for Developers/Designers. Imagine you work is a firm, design/development/both, and you have a problem with some code or how to make a design better, you simply call over one of your co-workers and get their advice. But if you don't work in an office where you can get help you alternatives are forums, mailing groups or IRC which are all ok, but not - in my experience - give off the truly "personal" help that Twitter can help provide. If you follow and build a rapport with other people a request for help can be fulfilled pretty quickly.
http://twitter.com | follow me

Virtualbox

VirtualBox is a family of powerful x86 virtualization products for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL). See "About VirtualBox" for an introduction.

Why I think this tool should get more love? I've had limited interaction with the other visualization apps but I really must say that I really like VirtualPC. "But you are talking about VirtualBox, am I missing something?" No, no you are not. VirtualPC in my mind is probably the best visualization app out there but it costs $$ and if you are not making a ton of $$ the next runner up is VirtualBox which is an extremely close second. In my development I try to test in as many environments as I can, I try to set up my VB to only have 512mb of ram running WinXp and Win2000 (don't have Vista yet otherwise that would be my main install). The reason for setting up weaker environments then my custom built machine is because not everyone has 3.5gb of ram with a video card that has 512mb ram and so on. Some of the apps I build are quite JavaScript intense so I need to make sure it can still run as smoothly as possible in those systems.
http://www.virtualbox.org/

]]> http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/feed/ 2 http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/ Tip for weekending 12/06/08 http://feedproxy.google.com/~r/benjaminsterling/~3/ulSX1awd--c/ http://benjaminsterling.com/tip-for-weekending-120608/#comments Sat, 06 Dec 2008 14:00:28 +0000 Benjamin Sterling http://benjaminsterling.com/?p=121 Backwards-Compatible Spam and Delete Buttons for WordPress
Add Spam and Delete buttons right to the comments for WordPress installs below 2.6.

Disabling the update nag
Removes that nagging "WordPress [Version] is available! Please update now" message from your admin area.

Add Your Website to Firefox’s Search Bar Using OpenSearch XML

The ability to search right from your browser’s address toolbar is a Godsend. No more extra Google or Yahoo page loads — simply open a new tab and roll off your search terms. Of course Firefox comes with Google, Yahoo, and other search engines by default, but what if you want to offer search for YOUR website in the address bar? Using Open Search, you can create an XML file to do just that.

WordPress 2.7 Comments Enhancements

WordPress 2.7 includes a lot of new enhancements, but one of the big ones is the new comment functionality. Comments can be threaded, paged, etc. This is all built in, but unfortunately, your theme must support it. So, for theme authors, I’d suggest getting to work on making your themes compatible right away.

]]> http://benjaminsterling.com/tip-for-weekending-120608/feed/ 0 http://benjaminsterling.com/tip-for-weekending-120608/ WordPress: Theme Test Drive http://feedproxy.google.com/~r/benjaminsterling/~3/IgqVmXte-pw/ http://benjaminsterling.com/wordpress-theme-test-drive/#comments Fri, 05 Dec 2008 14:00:36 +0000 Benjamin Sterling http://benjaminsterling.com/?p=123

Have you ever needed to see what a theme looks like with your content but you did not want to have to recreate your whole site on a testing server and import all your data?  Well, Theme Test Drive to the rescue.

You simply download the plugin, unzip it, upload it to your WordPress install, install the plugin and then select the theme you want to test.  This will allow you to go through your site as if it were live and see how it looks and works.

Now, have you ever need to make some changes to your current theme but did not want to shut down your site and you did not want your visitors to see a busted site?  Well, Theme Test Drive to the rescue again.

Follow the steps above, but instead of installing a new theme, just duplicate your current theme via your ftp of choice.  Once you have the duplicate theme, go into the dup and make a change to the style.css file and change the "Theme Name" - I just renamed the theme to have a 2 at the end of the name.

Reupload that style.css file and in the select menu under the Design -> Theme Test Drive page select your newly named theme and click enable at the bottom.

After that, just work off of the duplicate theme till you have everything looking the way you want and just either copy over all the changes to the old theme folder or change your default theme to the duplicate.

Complete install instructions, support and download can be found on the plugins site.

]]> http://benjaminsterling.com/wordpress-theme-test-drive/feed/ 0 http://benjaminsterling.com/wordpress-theme-test-drive/ Password Strength Indicator and Generator http://feedproxy.google.com/~r/benjaminsterling/~3/dD4ma3dkzH8/ http://benjaminsterling.com/password-strength-indicator-and-generator/#comments Thu, 04 Dec 2008 16:00:51 +0000 Benjamin Sterling http://benjaminsterling.com/?p=117 Sometimes you want to show your user the strength of their password and although there a quite a few jQuery "plugins" that do this there are none - that I've found - that let you set the class of an element so that you can do a graphical representation of the strength.

What I have put together is some code that I have been using on a few projects and turned it into a rough plugin. I say a rough plugin because it is very basic and not entirely flexible; let's just call it a proof-of-concept.

Live Demo of Password strength indicator and generator

In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

The first example you notice that I have a basic indicator showing the strength is the form a colors blocks going from green to red with red being the strongest indicator. (I got these images from the cpanel password changer)

This is what you would normally see and it is fine, but what if your design is much like my current design where you are featuring trees?

In the second example we simply swap out the icon for a tree that has four levels and when the password is real strong the tree is completely filled in with red.

tree strength indicator

Have a look at the code:

The Code for Password strength indicator and generator

By default the plugin will work off of ten default classes that you can set the css for which you can do an image sprite like I did above. Or maybe just a DIV with specific colors and widths that will illustrate a growing strength of a password.

Final Thoughts

The point of this post is to show you that you don't need to limit yourself to what is already out there, expand your thinking to include all possibilities and not just prepackaged ones.

With that said, what other possibilities do we have for a simple thing like a password strength indicator? Hmm... maybe doing a meter type thing that goes from zero to a hundred and just rotate the pointer much like the clock example?

]]> http://benjaminsterling.com/password-strength-indicator-and-generator/feed/ 12 http://benjaminsterling.com/password-strength-indicator-and-generator/ Really Simple History: Ajax history and bookmarking library http://feedproxy.google.com/~r/benjaminsterling/~3/xEseFh5s7EI/ http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/#comments Wed, 03 Dec 2008 16:00:51 +0000 Benjamin Sterling http://benjaminsterling.com/?p=119 For some time now I have been using Really Simple History for my applications that use a good amount of AJAX. RSH is exactly what it sounds like, it is a really simple way of adding history and bookmarking to your AJAXified apps.  To see it in action have a look at the Mason's Graduate Requirements site where it is being used to handle bookmarking for four separate parameters.

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg's Querystring functions which has only one modification to it.

PLAIN TEXT
JavaScript:
  1. if (qs == null) qs = location.search.substring(1, location.search.length);
  2. // changed to
  3. if (qs == null) qs = location.hash.replace(/^.*#/, '');

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

PLAIN TEXT
JavaScript:
  1. var initail = false;
  2. var qs = null;
  3.  
  4. window.dhtmlHistory.create();
  5.  
  6. $(document)
  7. .ready(function(){
  8.     dhtmlHistory.initialize();
  9.     dhtmlHistory.addListener(theListener);
  10.  
  11.     if(!initail){
  12.         theListener();
  13.     };
  14. });

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to "theListener" which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

PLAIN TEXT
JavaScript:
  1. hash = function(){
  2.     return location.hash.replace(/^.*#/, '');
  3. };

The last function is the "theListener" function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

PLAIN TEXT
JavaScript:
  1. theListener = function(){
  2.     if(!initail) initail = true;
  3.     qs = new Querystring( hash() );
  4.  
  5.     if( typeof qs.get('cat') == 'undefined' ){
  6.         // run cat specific code
  7.     }
  8. };

Although the RSH script does pass back two params you will see that I don't use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference - should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.

]]> http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/feed/ 0 http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/ From the horses mouth: 2.7 Gets Here in Two Days! http://feedproxy.google.com/~r/benjaminsterling/~3/z-yNRDG7zcg/ http://benjaminsterling.com/from-the-horses-mouth-27-gets-here-in-two-days/#comments Wed, 03 Dec 2008 03:08:56 +0000 Benjamin Sterling http://benjaminsterling.com/?p=122 This is so overly great, WordPress 2.7 will be release on Thursday. This is huge and which means I need to get my butt in gear in getting my plugins updated.

As promised, here is the advance notice that WordPress 2.7 is coming to WordPress.com, and will go live on Thursday, December 4, 2008 at 8pm Eastern Time. That’s 5pm Thursday in California, 1am Friday in London (UTC), 8am Friday in Jakarta, noon on Friday in Sydney…find your time here. Some people like to learn how to use new things by jumping right in and exploring, while others like to read the manual first to get the lay of the land. This post is a written version of the 2.7 interface tour/feature review I have been doing at WordCamps, and will tell you what’s new in the administration interface of WordPress 2.7. There are a lot of new features, so fair warning: this post is pretty long. If you’re more of the jump-in-and-play kind of person, you can skip this post for now, but you might want to remember it’s here just in case you get confused when 2.7 arrives at WordPress.com in two days.

2.7 Gets Here in Two Days!

If you don't feel like reading that post let me bring over another very important note:

A note on browser capabilities: WordPress 2.7 makes extensive use of JavaScript to create the user experience outlined here. If you have JavaScript turned off in your browser, some features may not be available or may work a bit differently than described here. In addition, using a recent standards-compliant browser will ensure that you have an optimal experience. Older browsers that are not supported by their manufacturers any longer may not look as expected; we recommend Firefox 3, Google Chrome, and Safari 3.

What does this mean, it means that WordPress will become much easier to use and manage... for people using better browsers. I am not sure why IE7 is not in that list, I've tested it in IE7 with zero issues.

Be sure to upgrade as quick as possible as to not miss out on the beauty that is WP2.7.

Please Back Up Your WordPress Install Before Upgrading

]]> http://benjaminsterling.com/from-the-horses-mouth-27-gets-here-in-two-days/feed/ 0 http://benjaminsterling.com/from-the-horses-mouth-27-gets-here-in-two-days/ Blog News Ticker http://feedproxy.google.com/~r/benjaminsterling/~3/X0HuQfkHLfU/ http://benjaminsterling.com/blog-news-ticker/#comments Tue, 02 Dec 2008 16:00:44 +0000 Benjamin Sterling http://benjaminsterling.com/?p=118 Recently I had been asked to help put together a post scroller widget for a WordPress install but sadly after it was nearly completed it was agreed that it would not "fit" the site it was meant for. And it is true, some sites, depending on who the site is meant for - the targeted audience - or what the main topic of the site really don't need bells and whistles to get content in front of their users. Since I did not want all that work go to waste I figured I'd write up a post on the code and thought processes.

Ideals

I firmly believe that a site should still be functional, 508 compliant and still look good when styles and JavaScript are turned off. With this in mind we will be doing some "progressive enhancements" and since there is going to very little that won't work in all browsers I won't go into my rant about PE.

Structure

We will be using Definition lists; why definition lists? Because they are semantically correct for this situation. Have a look at two really good articles from Css-tricks.com and Maxdesign.com which go into detail on why you should use definition lists.

Below is the structure we will be dealing with, notice that we only have the DL/DT/DD structure and now wrapping DIV or any other extra mark up:

PLAIN TEXT
HTML:
  1. <h3>Our News</h3>
  2. <dl id="newsScroller">
  3.     <dt>Title</dt>
  4.     <dd>Excerpt</dd>
  5.     <dd>Date</dd>
  6.     <dd>Tags and comment count</dd>
  7. </dl>

With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.

Current Progress

The content from our current progress is from a dump I did of my own site using WordPress' loop.

Styling

In our next layer of PE will are going to add in some style simple based off of the current structure minus the JavaScript.

Current Progress

In this phase we really did not do anything special, I just styled it as I would have normally. You can add more pop to it if you feel. Do note however, that at line 28 I am using a selector that IE6 does not support and since the extra padding for that element is a nice to have and really does not hold the user of IE6 back I felt it was ok to add that in there.

PLAIN TEXT
CSS:
  1. dl#newsScroller dd + dd{
  2.     padding:0 0 0 22px;
  3. }

JavaScript

Now we start with the real fun, using JavaScript - in this instance, jQuery as our framework of choice, but you can just as easily use MooTools or DoJo - to add in some WOW factor. Here the plan is to wrap the DL in a DIV, add some classes to some elements, set up some events, and animations.

What we have in the example just below is some additional styles and elements.

Current Progress

Finally we have to set up the events and animation; what events do we need to set up and why? We need to bind the mouseenter and mouseleave event because if we want to be able to read what is being shown we need to be able to put our mouse over the content and have it stop any animations that are running so we can read it.

First thing we will need to do is to find out the total height of the grouped content is. The grouped content in this case is the DT/DD/DD/DD combination. We will be using the outerHeight() method to get the total height (padding/margin/height). To get that grouped content we will be using a combination of .children() and .slice().

Final

Final

Closing

So with the final product we have a decent footprint to stylize to your likings. Feel free to stylize it, add new functionality, new animation - some easin/easeout effects would look nice. Think outside of the box, just make sure it degrades nicely.

]]> http://benjaminsterling.com/blog-news-ticker/feed/ 0 http://benjaminsterling.com/blog-news-ticker/ Send Email Notifications for Broken Images Using jQuery Ajax http://feedproxy.google.com/~r/benjaminsterling/~3/4VFulH4iMCQ/ http://benjaminsterling.com/send-email-notifications-for-broken-images-using-jquery-ajax/#comments Mon, 01 Dec 2008 16:00:51 +0000 Benjamin Sterling http://benjaminsterling.com/?p=120 David Walsh posted a priceless and overly useful post about Send Email Notifications for Broken Images Using MooTools Ajax but the only problem with that is that he used MooTools ;).

For those that want to do the same thing with jQuery here is the JavaScript code, please have a read at his post for the PHP code and any discussion his post sparks.

PLAIN TEXT
JavaScript:
  1. $(document)
  2. .ready(function(){
  3.     $('img').error(function(){
  4.         $.post('ajax-image-error.php',{'image':this.src,'page':location.href});
  5.     });
  6. });

Yeah, I know, there is so much less code then the MooTools example, why is that? Psstt... because jQuery is better ;).

Here is a live demo (an email is not sent, but the returned data is appended to the page.

]]> http://benjaminsterling.com/send-email-notifications-for-broken-images-using-jquery-ajax/feed/ 19 http://benjaminsterling.com/send-email-notifications-for-broken-images-using-jquery-ajax/ Web Tech November Meetup Presentation http://feedproxy.google.com/~r/benjaminsterling/~3/OSSwPI6PYG0/ http://benjaminsterling.com/web-tech-november-meetup-presentation/#comments Tue, 25 Nov 2008 17:35:00 +0000 Benjamin Sterling http://benjaminsterling.com/?p=116 Last night I had the opportunity to speak at the Web Tech November Meetup in Baltimore about jQuery.  I focused mainly on traversing since I believe once you fully grasp some of the built in jQuery traversing methods you can do just about anything using jQuery and do it easily.

Preparations

I spent about three weeks getting this presentation together with the hopes that everything I talked about would be self-explanatory.  For the most part it was, there was some items that I should have wrote differently as to not make it look complicated.  Over all I think most of the items just flowed well.

My preparations went something like this, first I went through most of the code I had written over the past two months.  As I went through the code I made a tally of what traversing methods where used and how often.  I was suprise to see that I used .eq() quite often, guess I am glad jQuery brought that back quickly after the move to the .slice() method back at 1.1.4.  The others that ranked pretty high were .is(), .hasClass() and .not().

Since that list is pretty small I decided to go through some of the "help" emails, IMs and twitter messages I have gotten over the past couple of months and although I took some more complex routes with the answers I provided, after looking at them again they could have been accomplished better by using some of the family methods.  Yes, I am coining a new phrase for a group of methods.  Those methods are .children(), .parent(), .parents(), .siblings(), and the cousins .next() and .prev().  I also through in .end() since this can be a very useful method and helps the chaining a bunch of calls together.

I know that I am much better presentor when i present on the fly with minimum talking points, so actually creating a slideshow and talking off of that slide show was going to very hard for me.  After many, many edits to my talking points that I had written down and desided to put pen to paper or mouse pointer to web browser.  I signed up for an account with 280slides, started making my slide.  Although the app does not offer the same flexiblity or features that a desktop app would provide, it was pretty damned close.  My hat goes off to the developers of that app, it is quite nice.

After some time, about two weeks, I finally got the presentation done the day before I was to present.  I went to the slides over and over again and noted what points I should make what points were less important and depending on how well the presentation was going, I would expand on those talking points.

The Presentation

The meetup did not have a big turn out so the nervousness I had before hand disapated enough for me to get in to my zone.  I started off by introducing myself and did my best to keep away from any self depricating statements that I am so very skilled at.  Told the group what I would be focusing on, Selecting, Caching, Traversing, and we were on our way.

The group consisted of a few JavaScript rookies and JavaScript novices but for the most part, everyone knew CSS.  So for selectors, I focused on if you know CSS then you know how to select DOM elements in jQuery.  It really is that simple.  I explained the Hierarchy Selectors since a good majority of people I've helped over the years don't fully grasp them.  The main ones are the prev + next and prev ~ siblings selectors since if you don't see it is use, you can't really grasp the purpose of them.  I also showed the built in Custom Selectors but did not go into detail with them.

Caching was pretty straight forward so there was not much explanation needed for that.

Finally I jumped in to Traversing, focusing the methods I mentioned above.  The .is(), .hasClass() and .not() methods were pretty easy to explain, but for the family methods I actually had to show a family, my family.  I created a family tree for the group to better demonstrate .children(), .parent(), .parents(), .siblings().  I think it went over pretty well, I think for ease, I will put this grab in between each of the family method slides.  Moving back and forth between slides was a bit time consuming.

Explaining the .next() and .prev() methods was pretty easy and straight forward, there were some questions, but mainly because I was using a bad term, can't remember what it was now.

To demonstrate .end(), I pulled up a few pieces of code from projects that I've been working on and explained what each line was doing, much like what I did for the "Slide in tab" post I did a few weeks back.

The Close

There really was not a ton of questions thrown my way, that could mean that I did an excellent job of explaining myself or it means people were totally confused and felt I could not help them.   For the questions that were asked, I was able to answer them pretty easily.

My thoughts

There are obviously a few things I feel I need to work on and will try to do so.  I want to do some more talks, maybe focusing on the same topic at first till I feel that one is working the way I want and then maybe move on to more complicated jQuery topics.

The slide show I used for my presentation is below, feel free to have a look at it and let me know your thoughts.  As soon as slideshare is done processing it I will post the slideshare link here, till then feel free to check out the presentation via 280slides.

The Slides

]]> http://benjaminsterling.com/web-tech-november-meetup-presentation/feed/ 0 http://benjaminsterling.com/web-tech-november-meetup-presentation/ Notices, what notices? http://feedproxy.google.com/~r/benjaminsterling/~3/mU_p0rYZjgg/ http://benjaminsterling.com/notices-what-notices/#comments Mon, 24 Nov 2008 18:00:56 +0000 Benjamin Sterling http://benjaminsterling.com/?p=112 I've been using Blueprint css framework for a bit now mainly for the typography structure it provides.  But lately I've been investigating the rest of the framework.  Just a few weeks ago I noticed some of the default classes it has for forms error, notice and success.

Although they do and look like you would expect I decided to add a little flare to them.

The Look

The Code

PLAIN TEXT
CSS:
  1. .error, .notice, .success {
  2.     padding:.8em;
  3.     margin-bottom:1em;
  4.     border:2px solid #ddd;
  5.     padding-left:5em;
  6.     -moz-border-radius: 0 10px 0 10px;
  7.     -webkit-border-radius: 0 10px 0 10px;
  8. }
  9. .error {
  10.     background:#FBE3E4 url(../img/cancel_48.png) no-repeat 15px center;
  11.     color:#8a1f11;
  12.     border-color:#FBC2C4;
  13. }
  14. .notice {
  15.     background:#FFF6BF url(../img/warning_48.png) no-repeat 15px center;
  16.     color:#514721;
  17.     border-color:#FFD324;
  18. }
  19. .success {
  20.     background:#E6EFC2 url(../img/accepted_48.png) no-repeat 15px center;
  21.     color:#264409;
  22.     border-color:#C6D880;
  23. }

The Closing

Someone once told me, when optimizing my images for the web from Photoshop or Fireworks, don't use the default values.  I think the same should be said about using any of these css frameworks that are out there.  Get into the code and 1) learn what's going on and 2) experiment with the default values.  You will be glad you did.

Credits

]]> http://benjaminsterling.com/notices-what-notices/feed/ 0 http://benjaminsterling.com/notices-what-notices/