This helped today. https://gist.github.com/benkeen/339af429dbac2c026c3d
JS Error Logs
Many javascript errors on production sites go unnoticed: they’re only ever visible to the visitor and never tracked – what a wasted opportunity!
This script catches any client-side errors that occur in any modern browser and pass the information – line number, URL, stack trace – to the server for logging. It can provide significant insight into problems occurring on your web sites and applications that otherwise would go missed.
Canvas spinner script fork
I came across this marvellous little script yesterday by Nick Stakenburg which creates a loading icon spinner using Canvas, letting you avoid having to use animated gifs. Very nice!
http://projects.nickstakenburg.com/spinners/
It was almost perfect for my needs, except I needed a few small tweaks. So here’s my fork of the script, with fadeOutSpeed, pauseColor and pauseOpacity options.
http://www.benjaminkeen.com/experiments/spinners/gui/
You can download it from github here:
https://github.com/benkeen/spinners
Avoiding DOM-insertion timing problems with JS
This afternoon I revisited some old code I wrote to address the problem where sometimes you want to do the following:
1 2 | insertSomethingIntoDOM(); accessOrSetSomethingInDOMContentJustInserted(); |
Even though that’s perfectly acceptable within JS, it takes time for the browser rendering engine to do the job of actually inserting the DOM, so it may not be ready for the second line to actually find the content it just inserted. I outlined the whole problem in an old post here.
Anyway, I updated the code in that post and rewrote it into a requireJS module. You can find it here:
https://gist.github.com/4242808. It’ll be included in the upcoming Data Generator rewrite.
Object.observe()
Very interesting article on the latest revision of the Object.observe() spec. That thing has tremendous potential if it becomes an implemented standard.
http://weblog.bocoup.com/javascript-object-observe/
PHP Smarty Template mode for CodeMirror 2
A Smarty syntax highlighter for CodeMirror has long been needed for my Form Tools script, so this weekend I finally took a few hours to put one together. It’s not been reviewed by the CodeMirror developer yet (Marijn Haverbeke), but will hopefully find its way into the main script at some point. I also plan on developing a HTML-JS-CSS-Smarty mixed mode, which will be useful in many places.
Example: http://www.benjaminkeen.com/misc/CodeMirror2/mode/smarty/
[UPDATE: Marijn accepted my changes and it’s now part of the CodeMirror repository].
[UPDATE 2: I added in Smarty 3 support in May, 2013].
Experimenting with Canvas
Read MorejQuery performance tips
Read MoreEvent Delegation with focus/blur
Another excellent article by Peter Paul Koch (PPK):
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
Blur and focus don’t bubble. Today this has been the bane of my existence – pursuing a daft solution when I should have spent more time thinking.
The article explains a workaround.
Namespacing in Javascript
A very nice summary of some techniques to namespace your javascript:
http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/
Personally I’ve always used what he calls direct assignment. But his objection that the namespace label is hardcoded is quite legitimate. Doing a search and replace on the file isn’t the problem – it’s catching all the calls to the namespaced functions that are scattered around the code. That’s bit me a number of times (today, as a matter of fact!). But what I like most is that it’s extremely simple: even a noob can understand it.
That said, his favourite – #5 Using this as a namespace proxy – is excellent. Very inventive indeed.
Check out his post for the details.
Recent Comments