LinkPost July 2010
So close to caught up! I'm really going to start changing the way I do these, well at least I think I'm going to change 
.
Image / Design
http://speckyboy.com/2010/07/02/25-free-color-tools-apps-and-palette-generators/ - like the link says, a large list of color apps for your designer side.
http://vandelaydesign.com/blog/design/paper-textures/ - Nice round up of paper textures, some have been passed around for a while, but who doesn't need a good paper texture now and then.
http://www.webdesignerdepot.com/2010/07/exploring-photoshop%E2%80%99s-angle-gradient-tool/ - Great little show on the power of the angle gradient tool (which I'll admit, I never used, because I thought it was useless).
http://www.noupe.com/tutorial/brilliant-adobe-photoshop-cs5-tutorials-from-2010.html - Good tutorials for the photoshopers
Web Development (HTML JS CSS)
http://designreviver.com/tutorials/fresh-html5-resources-articles-and-tutorials/ - great listing of html5 tutorials.
http://css-tricks.com/return-false-and-prevent-default/ - Seems this last week that e.preventDefault vs. return false is getting a lot of attention. Here's a great article on it.
http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery - A great list of where to start to dive into the wonderful world of jQuery (my js lib of choice).
http://speckyboy.com/2010/07/11/40-jquery-and-css3-tutorials-and-techniques/ - Large list of jQuery and css3 tutorials (although not sure why you need css3 if you're using jQuery, but eh, it's a good way to learn css3... I hope).
http://www.ilovecolors.com.ar/using-cookies-jquery/ - jQuery and cookies? sounds like it could be delicious
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ - Great article on detecting mobile devices and changing your display to fit them (just remember the toggle so they can view the whole site if they want).
http://www.admixweb.com/2010/07/14/oop-javascript-creating-an-window-box/ - Excellent tutorial (with demo) of how to build a window object with javascript.
http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html - More jQuery plug-ins (yes, some have been around for a while...)
http://mediaelementjs.com/ - Another html5 ready video/audio contender. This one looks pretty sweet, even includes silverlight if flash isn't installed on the system, I'll have to give it a try and then report back on it.
http://www.divisionbyzero.co.uk/2010/07/29/how-to-beat-form-spam-with-just-css/ - Good little article on how to avoid spam using css.
http://www.noupe.com/how-tos/50-useful-articles-and-resources-you-may-have-missed.html - Round up of articles I may have skipped, and others that should be mentioned again.
Print This Post
LinkPost June 2010
Continuing in the very late LinkPost updates, here is the one for June.
Images / Design
http://www.webdesignerwall.com/general/60-free-handwritten-script-fonts/ - Handwriting is in, well as long as it's not your handwriting.
http://www.webdesignerdepot.com/2010/06/opacity-photoshop-blend-modes-pattern-magic/ - Photoshop (and I'm sure you could gimp this to some degree) unite! and create patterns for everyone!
http://www.noupe.com/tutorial/30-useful-abstract-photoshop-design-tutorials.html - I like abstractiness, so enjoy these photoshop tutorials
http://speckyboy.com/2010/06/20/30-of-the-best-web-development-and-design-mini-icon-sets/ - Nice list of some great little icons
Web Development (HTML, JS, CSS)
http://www.html5rocks.com/ - Great page from some google devs on learning and incorporating HTML5 now into your site.
http://aext.net/2010/06/css3-animation-and-3d-effects/ - Nice round up article of css3 features (css3 sure is fun)
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/ - a nice list of some old and some new jQuery plugins to make life awesome.
Print This Post
LinkPost – Jan through April 2010
It's that time again. The time when I make good on those promises of finally posting all the backed up LinkPosts 
. The first quarter of this year has been fairly amazing, Google has started to include speed in page-ranking, jQuery released 1.4, and css3 is starting to build some serious momentum. There are links to all of that and more in this massive LinkPost
Print This Post
December LinkPost
And onward to the December LinkPost! I don't think I'll get around to posting the January LP until tomorrow or next week, but in this one we have more jQuery goodness, vectors, brushes, fonts, and more!
Print This Post
November LinkPost
Wow... Apparently I have been busy this winter. I thought about just skipping the last few posts and doing a monster LinkPost, but then I decided to still cut it up by month. So let's get to November shall we?
Print This Post
Summer 2009 LinkPost Extravaganza!
Whoa, what happened? I'll tell you what happened, I blinked and it was August! But fear not! I have kept the links that I was going to post and have compiled them into what I like to call the Summer 2009 LinkPost Extravaganza! Cheesy? Yes, a little absurd? Absolutely, but hey at least you're getting the links right?
This Post features plenty of images (icons, textures, etc.), a large selection of jQuery goodness, some php, fonts, and plenty of tools, resources, and tutorials. I even threw in a few links for our growing mac-user community (yeah, you can't see it, but I'm patting myself on the back).
Enough drivel, time to give the peoples what they want, the links!
Print This Post
LinkPost – May 2009
Yep, I'm a few days late, but this month is full of more tasty linked goodness! Plenty of image links, multimedia, jQuery, generic web dev, some WordPress, a couple of iPhone links, plenty of 'other', and of course what a LinkPost be without tons and tons of fonts (now that I've said that, next month watch there not be any )?
Print This Post
Brillar Resurrected and perfected.
Remember long ago when Sid, and Remo and I (and Bryce but he probably doesn't remember this cuz he is in infernal apps) started and there was this javascript function called Brillar? Well nobody seemed to understand the brillar function but we had to use it over and over again for image swapping, and I was just getting to the point that I almost knew how to use it without cheating. But then Phil killed it with jQuery and we have all partied since.
WELL THE PARTY IS OVER! Recently I've needed to do a rollover effect on some Input images and wasn't sure exactly how to do it with jQuery, come to think of it I am not sure how to do much with jQuery, so I turned back the clock and resurrected the Brillar function. only now it's hotter, better, more dynamic smaller and yes hotter. In fact it's so hot Phil and I renamed it to "BrillarCaliente".
Now instead of passing Two or three (can't remember for sure but it was a lot) parameters in your onmouseover/onmouseout calls, you only need to pass one.
onmouseover="javascript:BrillarCaliente(this);" onmouseout="javascript:BrillarCaliente(this);" |
The rest is in the Javascript function, thus making it easier to change what images/path's are to be used.
<script type="text/javascript"> function BrillarCaliente(image){ var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />'; var id = image.id; var source = document.getElementById(id).src; if(source == hostpath+'sml-addcart.gif'){ document.getElementById(id).src = hostpath+'sml-addcart-on.gif'; } else { document.getElementById(id).src = hostpath+'sml-addcart.gif'; } } </script> |
Ok so maybe it's not perfect but it's whole lot better than it was. The only thing I don't love is that I had to set up the "id" var in order to set up the "source" var, if there is a way around it I'd love to know.
Now for those of you who are reformists and love jQuery, I'm quite confident that this is doable in jQ with about 3 lines of code. Either way is better than what we used to do.
Alternativley if you wanted to make this more dynamic you could do the following:
onmouseover="javascript:BrillarCaliente(this, 'newimage.jpg');" onmouseout="javascript:BrillarCaliente(this, 'oldimage.jpg');" |
<script type="text/javascript"> function BrillarCaliente(image, swapImage){ var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />'; var id = image.id; var source = document.getElementById(id).src; if(source == hostpath+'sml-addcart.gif'){ document.getElementById(id).src = hostpath+swapImage; } else { document.getElementById(id).src = hostpath+swapImage; } } </script> |
note the extra param passed through to the function, I haven't actually tested it but it should work.
Print This Post
Awesome Image Evolution
So a while back, and by a while I mean about 3 months or so ago Marketing decided they'd like to show some eye catching images on some of the products on two of our sites...lucky me I got this task and at the time accomplished this the only way I could think of (and I'm not sure why it's the only thing I could think of). What I did was use Field 4 as a place holder for a phrase/word that would trigger an image to be shown if a proper word/phrase was in that field. The code looked quite similar to the following:
<wcbase:useBean id="product" classname="com.ibm.commerce.catalog.beans.ProductDataBean" scope="request" /> <c:if test "${product.field4 == 'blah'}"> <img src="blah"/> </c:if> |
While functional and handy for keeping any rougue phrases from triggering a false image this is not ideal, especially when your marketing group keeps adding more and more images to display...I think now we are up to around 8.
So about a month or so ago Phil got a task to add yet another image and while consulting about it we decided it would be better to change the code so that there weren't so many if's in our code. So we chaged it to the following:
<wcbase:useBean id="product" classname="com.ibm.commerce.catalog.beans.ProductDataBean" scope="request" /> <c:if test="${product.field4 != ''}"> <img src="<c:out value="${jspStoreImgDir}${product.field4}"/>.jpg" alt="<c:out value="${product.field4}"/>" /> </c:if> |
This is much better because it allows us to put any value in field4 and then the code will strip that value and slap a .jpg on the end, so as long as we have a value.jpg image it will show up. However we did find a bug in this, apparently if you have had a value in field4 and deleted said value it confuses the code and websphere will still look for a .jpg image which of course is nowhere to be found, and if viewed in the wrong browser (ie IE) a missing image will appear (funny how missing images can appear). So recently we've changed this code yet again and this time I think we nailed it, have a look:
<wcbase:useBean id="product" classname="com.ibm.commerce.catalog.beans.ProductDataBean" scope="request" /> <c:if test="${!empty product.field4}"> <img src="<c:out value="${jspStoreImgDir}${product.field4}"/>.jpg" alt="<c:out value="${product.field4}"/>" /> </c:if> |
The empty seems to ignore any previously entered values and focus on the fact that the field is empty and not so much look for a null value.
THE END
Print This Post
FFox broken image plug in
Update: Brett/Burt has had a problem with this working on his box, so it may not be compatible with some plugins/add-ons.
One of the worst things that I run into is the prettifying that FireFox routinely does to webpages. When you surf, it's a great idea, who likes to see broken image files? But when you are developing it gets in the way and can take an otherwise smashing page, and make it look... uh... well smashed. To get around this issue you used to have to install "greasemonkey" and then grab a user-script in order to force firefox into showing you broken image files. Well luckily those days are over as the other of the original script finally made it a standalone plug in. You can grab the plug in here.
I decided to do a little testing between FF2 (with the plug-in), FF3b5 (w/o plug-in), and a control IE7 (yes using IE7 as a control actually made me cringe, and may have given me a rash). I then created a generic html page with 6 broken img links in it. Here's what we have:
Now as you can see, I have some invalid html (missing alt tag), a couple alt tags with spaces, a few with the alt tags as spaces, you know some ugly things you should never do, and yet we find all the time. Render Time!! Let's start off with our control.
Here's how FF3b5(w/o plugin) rendered this mess:
Notice that it shows up with alt tags showing, and at first glance it looks like it picked up 4 of the 6 images. Upon closer inspection though, you'll see it only saw 3 and prettified the page by removing the rest. Although I gotta say, seeing the alt text looking so plain really throws me off when I'm looking for where an image should be.
And lastly a render with FF2(with plug-in)
We can see exactly what the plug in did. It doesn't show the alt text now, but you at least know that there should be *something* showing up on the page. When it's all said and done, I'd say that this is worth the install, and quite a nice plug in.
Print This Post