Is your JavaScript slow JavaScript? Don’t fear, we’ve put up a handy dandy JavaScript performance checklist for you!
Grab the PDF for free at slowjavascript.com!
We’ll also be sending out free optimization tips and tricks from time to time– sign up to our newsletter to get them! These great tips and tricks are drawn straight from our not-free-but-totally-awesome book, JavaScript Performance Rocks! 🙂
TweetI’ve been working this past year together with Nokia to bring multitouch APIs to a browser near you, and this is how it looks and feels like, in a little demo of just about 50 lines of JavaScript code:
Nokia’s new technology is the Starlight browser, a browser based on the Qt port of WebKit, and they’re working with the Mozilla community on the specifications. If you have the hardware/software needed (Windows 7 Multitouch-PC with latest drivers), grab the Starlight browser, and try for yourself. And it’s all open-source, so visit the Starlight open source project page to learn more about the modifications and enhancements to WebKit and grab the source.
scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.
Currently the scripty2 API abstraction event supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With just one API, you can now multi-touch enable any web application easily, just check out the demos.
In a recent update to scripty2, I’ve also introduced automatic support for WebKit CSS transitions, so whenever scripty2 effects are used and CSS transitions are available, the effects engine will automatically do the right thing for you.
All in all, using this in your web sites or apps boils down to just a couple of lines of code:
$('element').observe('manipulate:update', function(event){
$('element').transform(event.memo).setStyle({
left: event.memo.panX+'px', top: event.memo.panY+'px'
});
});
Note the manipulate:update event and the new Element#transform method.
It’s really exiciting to finally get this technology out, and I’d love your feedback, patches and of course see your demos or real-world apps that you build with it! And big thanks to the Team at Nokia for making this possible!
Again, here’s the demos, the scripty2 Multitouch documentation and more videos!
TweetWe just launched something really awesome that just might change your way you think time tracking can be done. Personally, I think this is super-fricking-amazingly-awesome, not having to go through a GUI at all for tracking time, rather just adding a little bit of functionality to stuff you already do anyway.
So Freckle Time Tracking now comes with Github integration, which means you can instantly log time from Git commit messages when you push updates to Github.
Here’s how it works:
Log 15 minutes:
git commit -m "Remove some extra whitespace f:15"
Log 2 hours, 30 minutes:
git commit -m "reporting, add CSV export f:2.5"
When you git push to your freckle-enabled Github repository, Github will automatically contact freckle and log time for all commits that come with the “f:time” bit.
To set this up, first grab your freckle API token. This API key is available in freckle under “Settings & Tools” in the Integration (API) tab. You’ll need this API token in the next step, configuring your Github project– in your Github Project admin section, go to “Service Hooks” and select “freckle”, then fill in your freckle subdomain, the API token you just grabbed and then the Freckle project name you want to log time for in this Github project.
Once you’ve set this up, you can log time from your commits! freckle even links back to Github, to each individual commit (the little “github.com” link after the commit message). Users are mapped with their email addresses, so these need to be the same in both Github and freckle.
Which also means that you save a minute or so that you’d need to open up the freckle web app or timer every time you do this, and rather spend the time on doing what you love, coding and creating stuff.
TweetHere’s an awesome presentation on Interface Design Basics from Samo KoroÅ¡ec.
Some good reading and thinking material for the weekend! 🙂 And maybe helps to make the web a little bit more use- and beautiful!
TweetAmy Hoy and I proudly present our second JavaScript Master Class, this time it’s right after JSConf.eu in Berlin, Germany, on November 9, 2009.
If you’re at the intermediate or advanced level in your JavaScript practice, now’s the best time to level up to expert– you will learn boatloads, whether you use Prototype, jQuery, Mootools, or just your own naked cleverness.
The day is half about JavaScript the language, with topics ranging from functional programming patterns, closures and anonymous functions, object-orientation and prototypes all the way to building domain-specific languages and APIs in JavaScript; and half about the ecosystem, encompassing code organization, getting deployment right, creating great documentation, and having proper unit testing in place.
Our full-day class is limited to 20 seats, so you get to to pick Amy and my brains to the fullest (and afterwards we’ll socialize over a beer or two!).
Head over to http://javascriptmasterclass.com/ to learn more and register!
PS, we’re expecting to sell out—and quick, too. We’d hate to hear from you that you wanted to come but didn’t get a seat in time, so if you want to attend, please don’t hesitate! Register early!
TweetUpdate October 6, 2009: http://textorize.org is now live and the main resource for the textorize project!
We all want really nice looking web typography, and there’s a ton of solutions out there. Here’s mine. I’ve to warn you, it’s very lo-tech. It’s done with images. But with really nice ones.
In the image above, note how the textorize version is much more consistant and “clear”, where as the Photoshop-generated text has fuzzy fringes and varies in clearness. For example, compare the bottom of the “a” in “readers”, and the “l” in “mir.aculo.us” between the versions.
View the presentation on how this compares to Photoshop, ImageMagick, sIFR and cufon, and why subpixel antialising is so awesome:
It all boils down to a Ruby script that runs on OS X only and uses OS X’s really awesome typography and subpixel antialiased font rendering. Why not tap into this to make those headline graphics? With Rubycocoa you can easily whip up a small app that draws some text, and save it into a PNG file.
On OS X, just do a:
$ gem sources -a http://gems.github.com $ sudo gem install madrobby-textorize
You can then call and generate images by:
$ textorize -f"Hoefler Text" -s30 "Hello mir.aculo.us readers"
Images are by default rendered into a output.png file. The command line interface is great for integrating it into build tools, for example we’ve a list of graphics to generate that a capistrano task handles for us (I’d love to release this as a Rails plugin, too). There’s more options of course, e.g. to customize colors.
Voilà , really nice and pristine headline graphics, without the suck of ugly Photoshop typograhy or tons of plugins and complicated font conversion. And don’t get me started on all the license issues.
Interested in the source? It’s all licensed under a MIT License, and put on Github for your forking pleasure.
Big thanks to @kastner and @levinalex for helping me get this to work!
Update October 1, 2009 Some people have asked for how this compares with “
Typekit. I do like Typekit as it tries to make good use of the @font-face CSS property, however there are problems with browsers’ font rendering engines themselves. Here’s an example on what I mean, Firefox 3.5 on Windows doesn’t do a great job of rendering subpixel antialiasing:
Something I’ve tried when I had an issue with Safari 4 not properly layouting/rendering an element after setting a new value for its innerHTML:
element.style.webkitTransform = 'scale(1)';
This did the trick and should work with Safari, Chrome and other browsers that are based on WebKit.
If you need a more general solution for elements that don’t seem to render properly, try my text-node based trick.
Seems that browsers are a little bit too optimized, but as long as you can give them a nudge…
Tweet
Our book is ready for your download pleasure! And it’s packed full of info on all the tricks we use to make our apps and sites fast and snappy.
Co-written by Amy Hoy and me, it’s over 300 pages and is actually three books and our DOM Monster, a bookmarklet-based cross-browser performance evaluation tool.
Get started with knowing what this is all about, why it is important and how to measure performance and master all the tools.
Loadtime is a sad time, a time of of enormous, slow-loading assets; of maxed-out request queues; of bloated, waddling DOMs. Of limp white screens. Most of the world’s worst web performance woes? They live and breed in Loadtime.
See how to write slicker, sexier, faster JavaScript from the get-go. Micro-optimize without being premature. Learn the kinds of ridiculous optimization tactics that Gentoo tuner boys can only dream of. And yes, we’re teaching you how to unroll loops.
We’re totally framework-agnostic, so everything’s applicable to any and all JavaScript code out there! Whether you use Prototype, or jQuery or dojo, you’ll find that our tuning tricks can help speed things up!
And… introducing…. the… DOM Monster! See for yourself!
We’ve an introductory price for the first 500 copies we sell of $39, after that it will go up to $49!
P.S. After the great success of our JavaScript Master Class in Washington, DC, we’ve decided to do a Master Class in Europe, too. We’ll announce details soon!
Tweet
Amy and I will do talks at JSConf.eu, the European JavaScript Conference, which will be held in Berlin on November 7 & 8. I’m really excited to be a part of this and to see that there is a JavaScript community forming in Europe!
My talk will be on Extreme JavaScript Performance and Amy will show you how to think outside the box and do a Hard Refresh: Not Just Another Lightbox.
Other speakers include John Resig of jQuery and Dion Almaer and Ben Galbraith from Ajaxian/Mozilla!
We hear that tickets are selling fast, and because it’s just €249 for the early bird ticket I wouldn’t think twice of attending. 🙂
TweetWant to learn about how to do graphics in pure JavaScript and dump proprietary plugins? Vote for our JavaScript graphics panel at SXSW 2010!
We’ve a bunch of wonderful panelists lined up:
Show your interest and vote for us! Head over to the SXSW 2010 panel picker and give us a thumbs up!
See you at SXSW 2010!
Tweet
The aerogel-weight mobile JavaScript framework, which also works great for Safari and Chrome extensions. The jQuery-compatible API makes it easy to pick up, and it's just 5k to 7k in size!
Why not try Noko, the best time tracking software ever! :)
Questions, corrections or constructive criticism? Write me an email.
Follow me on Twitter @thomasfuchs
© Copyright 2024 Thomas Fuchs
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Want to support me? Get a subscription to my time zone converter!
