Long story short, my portfolio, details and contact pages are all offline for the time being but should be back up as soon as I can dig more into MovableType. A note to all you subscribers, my rss feed has changed locations so be sure to point your feed readers to the new link at blake-walters.com/rss.xml.
]]>
$('input, textarea').each(function() {
$(this).focus(function() {
if($(this).val() == this.defaultValue)
$(this).val("");
});
$(this).blur(function() {
if($(this).val() == "")
$(this).val(this.defaultValue);
});
});
Simple, right? Now, every time a user clicks a form input or textarea, it will remove the default value. On blur, if no new text was entered, the default value was replaced. If at anytime new data was inserted, it won't ever be removed or replaced but if ever on blur the input is empty, the default value is replaced. Enjoy!
]]>The founders of Ajaxian gave a "State of Ajax and Javascript" talk right off the bat. The discussion focused heavily on javascript frameworks and their applications. Although their are hundreds of well implemented JS frameworks, there are really only 4 major player: Google Web Toolkit, Dojo (with Dijit), Prototype (with Script.aculo.us) and jQuery (with jQuery UI). In the past, each major framework had a specific use and could be assigned to specific tasks. Today, however, all 4 include essentially the same layers (a core, an ajax framework, and a ui toolkit) and can be used based simply on preference.
Personally, I use jQuery exclusively on new development because of it's lightweight, css based selector structure, and easy to use Ajax implementation and this choice was entirely validated at the conference.
Perceived performance was hit on quite a bit in the seminar as well. Humans can perceive delays in interactivity as small as .1 second and a train of thought can be broken (enough so for a person to leave a site) when delays reach the 1 second mark. This applies directly interactive work. You need to really sit and think whether an animation or transition is really key to a site's success and weigh that against the possibility that it could be perceived as a loss of performance.
A large part of what I'm trying to achieve is universally accessible website and web applications and who better to listen to a speech on accessibility than a blind software engineer? The Chief Engineer for everything Accessibility was on hand giving a lecture on making websites more universally accessible and it's larger implications and first hand accounts of what it's like to be a disabled web user. Developers today don't have to choose between Ajax and accessible websites, using some new techniques including broadcasting updates, scoping targets, navigation keys, and even client side JS frameworks, fully accessible websites can be easily achieved and having more accessible websites doesn't just assist disabled but power users as well, allowing shortcuts and quicker paths to more frequently used features.
Steve Souders, creator of YSlow and the YSlow rules for website performance, gave an amazing talk on creating faster websites. Alternative techniques for loading script and style data into a webpage were presented that we hadn't ever thought of. Some so amazingly simple and effective that I've started implementing them on current projects before even leaving the conference.
As it turns out, 80-90% of page load times are client side, meaning http requests, executing javascript, and other front-end matters. These can all be sped up dramatically by utilizing parallel downloading and execution, splitting the payload between what's needed on load versus on demand, and rearranging your load order to prevent blocks in the browser waiting for execution and DOM rendering.
Progressive rendering was also heavily pushed. Instead of holding back certain data, waiting for an entire page/site/section to be loaded and then presented to a user, give users items to interact with as soon as their ready to be rendered. On the whole, most users will begin to interact with a page before loading has completed and by holding back data until every last item is ready to be rendered out is only detrimental to the user experience.
In what was probably the most informative seminar of the conference, we had a chance to listen to a google engineer discuss developing sites to be more searchable. We got to hear first hand that, as far as search goes, flash is essentially a black hole for search bots. Developers shouldn't stop using flash, but should start using it sparingly, or instead as a content delivery mechanism instead of containing the base content itself. What this boils down to is progressive enhancement: start with a base page that is completely indexable (like HTML or XHTML) and then use flash on top of that to add to the user experience. Serving content directly through flash is essentially putting it into a black box that search bots can see into.
Some quick tips to help maximize searchability:
There are a massive amount of tools provided by google that can help to tweak and fine-tune page ranks and get the most out of google's indexing that can be found at Google Webmaster Tools
Google's obviously the king of search, but they also do a lot of other things internally that really make them stand apart from most other businesses. A big part of that is what they call 20% time. Each employee is given a day out of the week to develop on their own without set schedules or deadlines or project teams or anything like that. They are free to explore their passions and generally have fun with development. It keeps them fresh and engaged and benefits the company tremendously. In the past year half of all launched Google products (including Google News, Feed Reader, Google Calendar, and many more) began as 20% time projects. Keeping people interested in what they are doing is the perfect way to foster a creative environment where great ideas are what push the industry forward.
Internal project are also an extremely large part of Google. They've developed their own filesystem, their own database, even their own internal distribution of the Linux kernel to solve development issues that spanned the entire business. Products like Google Web Toolkit (a javascript framework) and Google App Engine both started out as internal libraries used to assist development. I think this would be a great way to push the envelope of your own development practices. Maybe develop and data providers or content management systems to help rollouts of new pages, work on more serious component frameworks for flash or other heavily used platforms, build up your code and utility libraries across all languages so you're not catching rourselves re-inventing the wheel with every client. Even the smallest of projects have the potential to one day grow into something that might change how you handle all of your development and that's the sort of thing that will keep us out in front of the industry
All in all, Google I/O was a great experience. If you'd like to talk more about any of these topics, check me out on twitter or shoot me a message
]]>
$("#textAreaID").keypress(function(e) {
if(e.charCode >= 48 )
if($(this).val().length > 150)
return false;
});
Quick and dirty. JQuery binds a function to the keypress even in the textarea. This function checks if the keyCode of the pressed key is a character input key (see here for a list of keycodes) and, if it is and the character count is over the pre-determined limit, returns false. Easy, right?
Please note, this does require pretty much any version of jQuery to actually work
]]>note: yes, I use Macs almost exclusively for work so everything in this list will be OSX based. This isn't because I'm some Apple zealot, and I'm not looking to stir up controversy, it's just a personal preference
Coda $80 - my multipurpose tool. I do all of my simple and general development work inside Coda. It's a great app for having an editor, terminal, file transfer, projects and preview browser all in one spot. Unless I specifically need a feature of another program, this is my go-to app.
TextMate ~$50 - if Coda is a swiss army knife, TextMate is a scalpel. I use this for all heavy or intense coding sessions, especially for Rails. Bundles alone make this app worth the entry fee.
CSSEdit $30 - another extremely specialized tool. I desperately wish CSSEdit's preview and XRay features were included in Coda. I use this less when writing CSS from scratch (which I do by hand in Coda) and more when I need to debug someone else's style.
Transmit $30 - another one from the boys and girls at Panic. In my opinion, the must-have file-transfer client for OSX
ColorSchemer $50 - a great app for web designers. Give it a color, it gives you options for matching color schemes. High specific, but extremely useful
XScope $17 - web development productivity tool from IconFactory. Includes onscreen rulers, universal screen color grabber, window frames and positioning crosshairs. Great part is, it can sit up in the menu bar and is always right there when you need it.
Adobe CS3 Design Premium $600 (upgrade)- the grand daddy of all imaging suites. Sure there are other apps out there that are a hell of a lot cheaper, and sure, Adobe might be doing some head-scratching things in the CS product line, but no matter what the picture, web design or illustration, Photoshop and Illustrator can handle it at the finesse of a skilled user. Not the most user friendly, and coming in with steep learning curves, but you'd be hard pressed to find a serious designer that doesn't own at least one copy.
So there you have it. I understand that none of my apps are free apps, and there's a reason for that. It's not that I don't support open source, or that I have some burning desire to spend my hard-earned cash on Mac software (quite the contrary), I use the tools that do the job the way I want them to, plain and simple. If a free app comes along that will completely replace Photoshop for me, great! That means I don't have to drop another $300 on an upgrade copy.
Grand Total - $857 (ouch)
]]>Thanks Apple and AT&T, that completely made my day
]]>"... if watch designers can do it, web designers can do it So if someone can make a 2 inch circle look unique, you can make a million pixels look unique. "
Some days great inspiration is hard to come by, even for the best artists and it's incredibly easy to "borrow" a design from someone else. Even if you try and fail in a design, or really in anything in life, though, at least you tried and failed as yourself than succeeding as somebody else.
]]>