December 7th, 2011
Browsers have lots of bugs—among them a tendency to introduce issues where elements just completely vanish (most of the time, that’s a result of over-eager drawing optimization code).
Here’s how you can deal with this issue in some browsers.
On Internet Explorer, you may have met the zoom CSS property before:
zoom: 1;
Basically, this forces IE into using a different rendering engine for the affected elements, potentially fixing the problem.
On Chrome, which seems to not get tested too well before releases, I’ve had luck with:
-webkit-transform: translateZ(0.00001px);
Sometimes, a -webkit-transform:scale(1) might do the trick, too (This should also help in case you hit this problem on Safari.)
If you hit this issue on other browsers, or have different solutions, please send me a mail and I’ll add your findings!
November 25th, 2011
This Friday, November 25, 2011, mastering the art of JavaScript performance got cheaper!
Use code TURKEY to get over 50% off my JavaScript Performance Rocks! Ebook and get it for only $19!
Enjoy!
P.S. We have a few more seats available for our November 28/29 JavaScript Master Class. See you there?
November 4th, 2011
Zepto.js 0.8 is out! Here is what’s new and improved:
- Cross-browser CSS transitions with the
animate() method
- Unified event handling with
fn.on() & off()
- Ajax global events, timeout support, and other improvements
- Performance boost for selectors
- 2 new add-ons: extended
data support and animated show & hide methods
- Zepto is now expected to work in all major browsers, mobile or desktop, except IE.
If you want more details, we have a full change log available.
Big thanks to core team member Mislav Marohnić for putting this release together, as well as to all the awesome Zepto contributors.
Download Zepto.js 0.8.
October 21st, 2011
So we’ve launched our new product Charm (right now, it’s invite-only as we scale)—and we’ve learned a lot developing it.
Here’s the first part of a series of blog posts about the underlying technology we use.
This time around, let’s have a look on some of the Ruby libraries in the back-end. To give you an idea about the general architecture of Charm—it’s a Rails 2.3 app (we’re not using 3.x because we ran into memory leaks and performance issues along the way), plus we’re using node.js for real-time push updates, and several storage/database/indexing systems, like PostgreSQL, Redis and Solr; among other things.
Production
As an email support application, Charm obviously reads email. We’re using a custom fetcher (called Fido) for fetching email from IMAP servers, combined with the Mail gem to parse email. The state of email parsing on Ruby is sadly not as well advanced as on some other platforms, and there are bugs and kinks, mostly having to do with parsing broken email and working around encoding problems. We hope to contribute back some fixes for the Mail gem at a future date—we aim to parse any and all email without errors and have a pretty good collection of tests by now (thanks to our awesome beta testers!).
It should be noted that Ruby really lends itself to monkey-patching, and that’s a good thing to quickly fix problems that cause issues in production—and at the same time it’s easy to contribute back and solve the problem for everyone. Yay, open source!
Of course, we need to send email, too. We don’t want to mess with our own infrastructure for this, and leave it to the specialists at Postmark to deliver our mail. It’s an awesome service, and it comes with a snazzy Ruby gem.
Of really great help is Whenever, which helps automating cron jobs—we have a lot of background processing, and it goes a long way to have a nice DSL at your disposal, combined with integration into Capistrano for deploying.
Here’s an example of using Whenever:
every 1.day, :at => '12 pm' do
rake "charm:subscriptions:process"
end
every 1.day, :at => '12 am' do
rake "charm:notifications:generate"
end
every :hour do
rake "charm:push_updates:purge"
end
# a lot more stuff
As for optimizing performance, among others, the date performance gem and of course Erubis (ERB implementation in C, now comes default with Rails 3) makes a big difference. Plus, the Dalli gem is a good choice when you use memcached.
Development
There are a lot of new and shiny libraries for an easier time during development, too. Of note are Foreman, a really incredibly cool way to start all the required services that your app needs (via a Procfile), and Timecop (makes it easy to mess with the current date/time, which is great when writing tests for the receiving email/replying to it cycle; not to mention billing systems).
Here’s our Procfile for Charm:
redis: redis-server config/redis-dev.conf
guard: bundle exec guard
sunspot: bundle exec rake sunspot:solr:run
# plus other secret stuff
We also use Guard and Guard::CoffeeScript to automatically compile CoffeeScript files to JavaScript during development.
Fancy IRB!
I like hacking around in the Rails console, so Wirb comes in handy—I can highly recommend it. To use it, you’ll need a ~/.irbrc file like this (also increases the history buffer):
require 'irb/completion'
require 'irb/ext/save-history'
ARGV.concat [ "--readline", "--prompt-mode", "simple" ]
IRB.conf[:SAVE_HISTORY] = 1000
IRB.conf[:HISTORY_FILE] = "#{ENV['HOME']}/.irb-save-history"
require 'rubygems' unless defined? Gem
require 'wirb'
Wirb.start
Plus, in your Gemfile, in the development section add:
group :development do
gem 'term-ansicolor'
gem 'wirb'
end
Then, enjoy the new syntax highlighting goodness when using script/console.
Next time…
In the next installment of the “what makes Charm Support tick” series I’ll take a look at the client-side and dive into the various JavaScript libraries we use and how it’s all connected! Stay tuned!
P.S. Do you want to break out of working by the hour? Do you want to create your own products and really be your own boss? How about crafting an independent income you can live on — and never have to freelance again? Want to learn how to make a living from developing your own software (or other) products? Take the 30×500 product class.
October 6th, 2011
Thank you, Steve, for inspiring me to switch to a Mac, to create Scriptaculous, to strive to create software that is human and cheerful, and to never stop making things better.
Thank you to teach me that you shouldn’t listen to the nay-sayers and haters.
Thank you for creating all those things that continue to amaze me every day.
Here’s to you, Steve: steve.twistori.com.
September 15th, 2011
Steve Jobs (April 2010):
“Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.”
Dean Hachamovitch, leader of Microsoft’s IE team, September 2011:
“Running Metro style IE plug-in free improves battery life as well as security, reliability, and privacy for consumers. Plug-ins were important early on in the web’s history. But the web has come a long way since then with HTML5. Providing compatibility with legacy plug-in technologies would detract from, rather than improve, the consumer experience of browsing in the Metro style UI.”
Interesting, indeed.
September 8th, 2011
For our next product Charm (an email support and CRM app) we’re going the all full-screen, real-time, highly interactive web app path, and using a lot of cool technologies, like Zepto.js, Backbone.js and CoffeeScript, to name a few.
As we believe that the details make the product, we’re also going to have keyboard shortcuts, so you can quickly navigate around the app without having to use your trackpad or mouse. After a short survey of what’s available for in-browser keyboard shortcuts (think Gmail or GitHub), for various reasons (other libs mostly depended on libraries or had too many/the wrong features) I decided to roll my own—and here it is!
Keymaster is a simple (100 LoC or so) micro-library for defining and dispatching keyboard shortcuts. It has no dependencies on any libraries so you can just drop it in your app and it will work, cross-browser.
// define short of 'a'
key('a', function(){ alert('you pressed a!') });
// returning false stops the event and prevents default browser events
key('ctrl+r', function(){ alert('stopped reload!'); return false });
// multiple shortcuts that do the same thing
key('⌘+r, ctrl+r', function(){ });
If you want to reuse the same shortcut for seperate areas in your single page app (we need this for Charm, so I added it in!), Keymaster supports switching between scopes. Use the key.setScope method to set scope.
// define shortcuts with a scope
key('o, enter', 'issues', function(){ /* do something */ });
key('o, enter', 'files', function(){ /* do something else */ });
// set the scope (only 'all' and 'issues' shortcuts will be honored)
key.setScope('issues');
Right now it’s in beta and we have a few known bugs, but overall it works really well already. If you’d like to contribute, you’ll find all info you need to get started in the Keymaster README on GitHub. Happy short-cutting!
P.S. Want to learn how to master the JavaScripts? Sign up for my virtual JavaScript Master Class! We still have some tickets left for our next one on September 15 ad 16. To sweeten the deal, I’m throwing in a coupon code just for you as my dear reader, use MIRAC50 to get $50 off any ticket!
August 3rd, 2011
Ready? Here we go:
10. JavaScript is the new cool kid on the block. If blocks where made out of programming languages, that is.
9. You want to do something cooler with objects then just using them as hashes. We might have one or two things to show you—for example how prototype inheritance is like having a ghost butler. I kid you not.
8. Homework that is actually fun. In a brain-wrecking kind of way!
7. You get not one but two teachers. With Amy Hoy and yours truly, that’s double the awesome, and we can attend to any and all questions you might have.
6. You get PDFs of all slides, including a handy printable version; plus a video of the class that you can re-watch. And all comes without DRM, because DRM sucks and should go die in a fire.
5. Join the ranks of hundreds who already participated. And folks really love it, here’s a quote: “Just completed JavaScript Master Class. Mind is blown, awesome.”
4. You want to be truly meta. Just trust me on this one.
3. You want to get our JavaScript Performance ebook as a free bonus! Write awesome JavaScript and have it run smoothly.
2. You get to pick my brain in live text chat. As one consulting hour of yours truly runs in the upper 3-figures $$$ range, you’re getting a great deal here. Heck, I even do live coding examples.
….aaaaaand the number one reason is:
1. As my dear reader, you save! Use coupon code JSROCKS for $25 off—how awesome is that?
Grab your JavaScript Master Class seat now—next class is coming up at the end of August, with early bird tickets available for a short time only!
August 1st, 2011
Another great release of Zepto.js is ready for your download pleasure! With tons of jQuery-compatible additions and recently optimized DOM manipulation methods, Zepto is close to running most existing jQuery plugins without problems. Zepto is now also largely compatible with Firefox, enabling its use in desktop as well as mobile web applications.
Zepto has grown to have 1,777 watchers, 185 forks on GitHub—now, for the first time, Zepto also has an official core team including Sasha Koss and Mislav Marohnić. These guys have worked hard around the board for this release addressing open issues and pull requests. Together we’re working to push Zepto towards the big v1.0!
Here is a summary of what’s new since v0.6.
Core
- added $.each() method
- added $.slice()
- added $.map() and make $.fn.map() behave the same as jQuery’s
- added end() method that switches back to previous context after Zepto methods that change the current context
- added negative index support for eq()
- detect HP TouchPad through $.os.touchpad
DOM
- added $.fn.serializeArray() & $.fn.serialize()
- support creating all table elements from strings, e.g. $(‘<tr>..</tr>’)
- make width() & height() methods also setters (when called with an argument)
- support toggle(bool) where
bool indicates whether to force showing or hiding
- support setting camelCased CSS properties
- appendTo() and prependTo() now accept selector as parameter
- execute embeded JavaScript in $.fn.html(), $.fn.append() and friends
- various bugfixes and optimizations for append() and friends
- index() without arguments now returns index of current element among its siblings
- added $.fn.wrap(), wrapAll(), and unwrap()
Event
- added $.Event() constructor
return false in event handlers now triggers preventDefault()- added “longTap” event (tap and hold for at least 750 ms)
- added shortcut methods to bind event handlers, e.g. $(‘#el’).click(function(e){ … })
- added $.fn.triggerHandler() method
Anim
- support animating elements just added to the DOM
- anim() now supports using transform properties among regular CSS properties
$('#myelem').anim({
opacity: 0.5,
scale: '0.8',
rotateZ: '90deg',
translate3d: '100px, 100px, 100px'
})
Keep in mind that animations are still limited to just WebKit browsers.
Again, thanks to our new core team and the growing number of our contributors.
Download Zepto.js v0.7 from the official website.
July 29th, 2011
Safari 5.1’s (on Mac OS X Lion) rubber-band scrolling is teh awesome for websites and “classic” web apps like good ol’ Freckle time tracking, but for those newfangled single-page apps (like our upcoming email & twitter support app, Charm) that have their own page layout and aim to look more like desktop apps it can quickly get in the way; that is when you use vertically scrolling sub-elements (like lists) in your app.
Never fear, this little CSS snippet will disable rubber-band scrolling:
html, body {
height: 100%;
overflow: hidden;
}
This of course, disables all scrolling of the body element, so you’ll need a wrapper div that is overflow: auto around your respective content (elements with overflow: auto don’t use rubber-band scrolling).
Of note, setting overflow: scroll will make it look like the vertical scrollbar is not going all the way to the bottom. This is because there’s room left for a horizontal scrollbar that’s not needed in most cases—the solution to this is to use overflow-y: scroll or just the overflow: auto on the scrolling content wrapper div.
Related to this, the new -webkit-overflow-scrolling: touch property will enable single-finger rubber-band scrolling of elements within a page, but only on Mobile Safari in the next release of iOS. This property doesn’t change the behavior of scrolling on desktop Safari (yet? I wish it would be supported there too).
