jeromegn's blog

Hey! It's me!

Creating LocalTodos.com -- A Short Story.

Posted on October 25th 2010

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.

LocalTodos.com

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 Pt. II: Intricate & Delicate

Posted on August 16th 2010

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

Ostrich Pt. I: An Opportunity For Innovation

Posted on August 11th 2010

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

Warping Drop Shadows with CSS3

Posted on June 19th 2010

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

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.

Links of interest #12

Posted on June 17th 2010

Live from Panama City!

I Just Open-Sourced Beautifier

Posted on June 12th 2010

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.

Beautifier: My Safari Extension

Posted on June 11th 2010

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:

No Antialiasing

After:

With Antialiasing

Source: Max Voltar

How did you do it?

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

Update: This thing is now open-source

On github: jeromegn / beautifier

Archives