LocalTodos is simple todo app. It’s built on Backbone.js and was meant to test my own implementation of Backbone.js for MooTools as well as my Backbone.localStorage adapter.

For Fun & Profit

Initially, the reason why I got to build yet another todo app was to test my implementation of backbone-mootools and backbone.localStorage. I needed those two javascript libraries to port Ostrich to a much more coherent and organized codebase. The simplest possible project to test those could only be a todo list, the “hello world” of modern programming languages!

It took quite a bit of fiddling around to get acquainted with Backbone.js, there weren’t any example app out there, only bits and pieces in the documentation. In a desperate move, I went to the #documentcloud channel on freenode, hoping to talk to some of the developers of Backbone.js. I was in luck as I spoke with its creator, Jeremy Ashkenas, and he gladly answered my questions about both Backbone.js and Javascript in general. He looked forward using a nice simple app as the first example of Backbone.js usage, porting it back to jQuery, annotating it and releasing it in the main repository.

Jeremy guided me through the jQuery bits in Backbone.js so I could replace them with MooTools equivalents. Jeremy is both a genius and a friendly helper. I couldn’t have been luckier in my endavour.

Profit? Yes. Jeremy said I should add my credits to the app. Even though he had refactored pretty much the whole code, he still felt this was my app. After Jeremy posted it on HackerNews, it got quite a bit of attention and quickly rose to the frontpage. I wrote a short bit about how it had been made and my experience using Backbone.js in the comments. Anyhow, my name is plastered all over this example app and I’ve been contacted by several people concerning business opportunities. Thanks for everything Jeremy…

Ostrich is a special piece of technology. For me, it’s ahead of its time, at least concerning Safari Extensions. It’s pretty unusual to build something so intricately complex on a rather simple platform. In short, Ostrich is made of Javascript, HTML, CSS and WebSocket. It’s an app.

Safari Extensions: A Primer

The Safari Extensions Platform is mainly a way to augment the browser experience with small additions written in HTML/CSS and Javascript.

As explained here, Safari Extensions have a “back-end” in Javascript which is loaded only once per Safari application session and should contain the heavy-lifting of the extension. The “front-end” is comprised of injected javascripts (before or after page load) and injected stylesheets which are appended to every page. The back-end and front-end communicate through a simple message/proxy system. They both have access to a variety (but not the same) of functions pertaining to the browser, the window and the tabs, to either set or get some values.

The intended purpose, in my view, is to extend the browser’s capabilities with additional functionalities like a reload button, a statusbar with more info à la Chrome, various toolbar buttons (Gmail, Google Reader, Instapaper), change the style of specific websites, etc. All small(ish) additions to make life easier on some tasks. I especially use the Gmail, GReader and Instapaper extensions, as they achieve a simple purpose in a more elegant way than greasemonkey scripts or bookmarklets.

Up to now, that’s pretty much how it’s been used. Some use it more creatively by appending interfaces on websites, but most just go with 20% of the effort for 80% result. They usually don’t go beyond.

You can follow pretty much all the new extensions coming in (the ones not featured in the Extensions Gallery) on the Safari Extensions Tumblog…

When Apple released Safari 5 with extensions, I was psyched. Since I’ve been reading daily about technologies in a multitude of domains, it’s as if new technology announcements made an extra connection in my mind. I could see how Safari Extensions could be way more than what had been done with them. I knew there was a system which could be built to support much more complex extensions (which at that point I’d call “apps”).

To me, that’s an opportunity. A brand new market, an unexploited niche in which I saw more than the small utilities it promised. This untapped platform had something I dearly liked: HTML/CSS and Javascript. Oh and it wasn’t the CSS we know from Internet Explorer, it was top of the line CSS3 from Webkit. Imagine being brought upon you a free platform on which you can create “apps” in languages you already master (or almost), using the best and latest technologies.

For months I had been talking with my dear friend Scott about new technologies, what they meant and how they could be assembled to create something way better than the sum of its parts. Innovation? I think so.

Up to now, there’s yet to be anything quite like Ostrich in the Safari Extensions field. Is this a rant? Yes. I’m ecstatic of having shipped the product while the opportunity was still there and while I could still call it “innovation”. It’s not perfect, but it works. Enough to compel over 8000 users to try it.

Ostrich has been my life for the past month and it’s been a hell of a ride. The story is a long one and I’m writing it in separate posts. In the next few ones I’ll be talking about the technology behind Ostrich, the community and how I managed it, its success, etc.

You might like to check those out

• OstrichApp.com
• Ostrich on Twitter
• An Ostrich in the Safari (blog)
• Safari’s Extensions Gallery (Twitter section)

• Git for the Lazy — Guide on using git… simply.
• jQuery Fundamentals — Free book on jQuery. Actually got caught up reading it while creating this post.
• Dragdealer JS — A Javascript Dragging Component. Does sliding too.
• List of freely available programming books — Stackoverflow has some of the best answers around.
• Why Intelligent People Fail — Written in 1994, but still so actual.

I was baffled by this article which claimed warping drop shadows weren’t possible in CSS3. I felt like I had to disprove that claim. Hence this post.

I present to you…

Warping Drop Shadows with CSS3

To be honest, it wasn’t much of a challenge. Anyone with basic knowledge of CSS3, its new box-shadow and transform properties, shouldn’t have trouble arriving at the same conclusion.

#warped
  position: relative
  z-index: 0
  padding: 0
  margin: 50px auto
  font-weight: normal
  line-height: 1.2
  text-align: center
  background: #fff
  width: 500px
  &:before, &:after
    position: absolute
    z-index: -1
  &:before
    content: ""
    text-align: left
    background: transparent
    bottom: 9px
    right: 10px
    width: 50%
    height: 40%
    +rotate(4deg)
    +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)
  &:after
    content: ""
    text-align: right
    background: transparent
    left: 10px
    bottom: 9px
    width: 50%
    height: 40%
    +rotate(-4deg)
    +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)

  .content
    background: #fff
    padding: 30px 0

… I used StaticMatic, here’s the source

As you may know, I love to use StaticMatic to whip up quick prototypes. I used the same for this prototype, if you’d like to take a look at the source, it’s on github.

Update: I optimized the code for less markup.

Live from Panama City!

• Sencha Touch UI — Sweet HTML5 and JS library making use of the iPhone and iPad touch capabilities!
• Vector Icons with SVG and Canvas — No images!!
• How to Name your Product, Service or Startup — Use these tips.
• Rake Tasks 101 — Short tutorial on rake tasks… I always wondered…
• Hourly Work vs. Linchpin Work — Makes sense :)
• World’s Healthiest Food — Good to know.
• CSS2 Multiple Backgrounds — Awesome idea to emulate the multiple backgrounds wonders of CSS3.
• PubNub — Javascript Push API for Real-time Applications. Is that clear?
• MongoMapper 0.8 Goodies Galore — MongoDB with this gem rocks. I use them all the time.

I don’t understand how I didn’t think about open-sourcing my extension before. It’s just so much better, even to actually distribute the file!

You can now download it from the “Downloads” section in my repo jeromegn / beautifier and feel free to pull that thing, mess with it, make pull requests, etc.

Have fun.

I created an extension that smooths every websites' fonts.

Download: beautifier.safariextz. (if you see gibberish, right-click and save on that link)

I’ve been liking the different little extensions coming out in the last few days since the launch of Safari 5. By the way, your best source for those is this tumblr blog.

Making your own is quite easy. Check the docs!

How does it improve fonts exactly?

Before:

After:

Source: Max Voltar

How did you do it?

html { -webkit-font-smoothing: antialiased; }

Update: This thing is now open-source

On github: jeromegn / beautifier