Developing for a design firm means cranking out website after website, quickly and efficiently and with craft. I've only been doing client work for a few months now, but I'm starting to recognize patterns and I'm often cannibalizing code I'd already written. The sequence is 1) get a mockup from design 2) notice an interface element that will require non-trivial javascript 3) remember that I wrote similar functionality on a prior project 4) cut and paste the code directly from the old project's live site or its git repo 5) customize it to the current design.
Of course, a basic coding tenant is to take repetitive tasks and abstract them into reusable libraries so that the repetition ceases and you can apply yourself to the creative stuff. In short: Do no Repeat Yourself. In that spirit, I've been drafting a standard library that I hope to use to offload a lot of commonplace javascript work, and might release as open source if it seems like it would be of value. This toolkit might be specific to our workflow and common design elements at UI, so I'm wondering what's missing. If you're a web developer doing client work and you happen to be reading this, what else should a standard JS library include?
Stuff we seem do all the time:
- auto-replace heading text with non-websafe fonts via image replacement or sIFR. this seems simple but you learn over time that there are lots of edge cases to handle.
- handle teaser text within form text input fields elegantly
- perform client-side form validation
- automatically find and style inline and background PNG-24 images to fix transparency in IE6
- handle auto rotation of background images in a div for simple "homepage slide show" features
- add graceful placeholder styles or "spinner" images wherever large image files may download slowly
A JavaScript standard library might also include a "development" mode, giving the developer things like this for free:
- alert the developer to XHTML problems on page load (missing custom title for each page, etc)
- fire javascript unit tests with one click
- display page layout grid with one click
What other tools might a robust, repurposable "client kit" contain?
UPDATE: I did end up packaging most of this functionality as a library; it's availalble as clientele on GitHub.