Introducing Objektiv

Posted by .

Objektiv LogoMeet Objektiv, our first Mac App. It’s a simple utility that lets you switch your default browser quickly. You might find it useful if you’re a web designer or use multiple browsers in your workflow.

Download it now! Or grab the source from GitHub.

Features:

Objektiv is a status-bar app whose icon shows you your currently selected default browser. Clicking on the icon will list all available browsers on your system, and let you choose something else as your default choice. Pretty straightforward!

Objektiv browser-selection menu
Objektiv browser-selection Notification

Pressing Option (⌥) will allow you hide browsers or apps that were mis-categorised as browsers from this menu.

We also have a whimsical looking overlay window that you can trigger with an optional global hotkey. The overlay window is also pretty keyboard-driven; you can quickly select a browser by typing the appropriate number.

Objektiv's Overlay Window

About:

We built it mainly for our needs, but also as a way to learn all about Mac app development and dip our toes into the weird and wonderful world of Objective-C & Cocoa. If you look at the source code’s history, you’ll see a novice Cocoa programmer’s journey, with occasional missteps along the way.

Please let us know what you think of this app, we would appreciate any feedback! If you encounter any problems, please post bug reports to GitHub.

PS: We’ll be writing more about the internals of Objektiv in later posts, keep an eye out for them!

CSS Snippets: Infighting

Posted by .

Here are a couple of small CSS tricks I discovered while working on Indite:

fight shadows with shadows

CSS box shadows are the same shape and size (at a minimum) of the element throwing them. So, when you want to combine shadows in your UI in say, a header, you might not always get the result you expect.


http://jsfiddle.net/xrivatsan/gE5hr

In the above fiddle, the second group of elements depict the default behaviour of CSS box shadows. We want it to look like the first group.

Thanks to multiple box-shadows, all we need to do is add two more box shadows in white, and offset them negatively so that they cover the original shadow exactly.

box-shadow: 10px -50px 0 #fff,              //white
           -10px -50px 0 #fff,              //white
             0px 1px 15px rgba(0,0,0,0.3);  //black

Given the reverse order in which browsers paint CSS shadows, you’ll have to add the white shadows first.

As you can see from the third group of elements, the new shadows leak from the top, so this technique is best suited for header elements, or elements that are wrapped with overflow: hidden.

uneasy easing functions

Click anywhere on the gray area to move the queen chess piece. Notice the slightly curved path the piece takes from point A to point B. Over short distances, it seems to avoid your cursor sometimes.


http://jsfiddle.net/xrivatsan/7rUZL

The queen’s position is updated whenever you click on the gray area. The wonky path that she follows to her destination is due to two different easing functions battling it out.

transition:  top 250ms ease-in,
            left 250ms ease-in-out;

Try it out with custom cubic bezier functions and different easeing durations. You’ll see a little bit of this in indite too!

Easy local development with a node.js proxy

Posted by .

Single page apps & websites-as-APIs are pretty common lately. Due to browsers’ cross-domain security restrictions, designing a front-end on a local machine becomes difficult, unless you deploy the whole app.

We’ve encountered this problem often-enough that I have a ready-made solution: creating a local proxy server that serves my static files as-is, and transparently forwards requests for API calls to the deployed app server. This solution works best when the API and the front-end are to be deployed on the same domain, with all API methods having a URL-prefix — something like /api/*.

You will need:

  • a working node.js installation
  • npm configured and running properly

Create a folder-structure like this:

.
|-- package.json
|-- public
|   `-- index.html
`-- server.js

The public dir will contain your HTMLs, CSS and JS files. The package.json file looks like this:

{
  "name": "your-app-name",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "http-proxy": "0.8.x",
    "connect": "2.3.x"
  }
}

And the server.js file looks like this:

var httpProxy = require('http-proxy'),
    connect   = require('connect'),
    endpoint  = {
      host:   'your-app-domain.com', // or IP address
      port:   80,
      prefix: '/api'
    },
    staticDir = 'public';

var proxy = new httpProxy.RoutingProxy();
var app = connect()
  .use(connect.logger('dev'))
  .use(function(req, res) {
    if (req.url.indexOf(endpoint.prefix) === 0) {
      proxy.proxyRequest(req, res, endpoint);
    }
  })
  .use(connect.static(staticDir))
  .listen(4242);

// http://localhost:4242/api/test will give response
// from http://your-app-domain.com/api/test

To run, just run these commands from your project’s directory:

$ npm install -d
$ node server.js

Now, you can access your HTML/CSS/JS files via http://localhost:4242, and any AJAX calls that the JS needs to make will work with your remote API (as long as you’ve used the right prefix!).

You can download the files from this Gist.

How it works

It’s pretty simple: we’ve made a small node.js webapp that uses the Connect framework and its static middleware in order to serve static assets. The excellent node-http-proxy module by Nodejitsu does the heavy-lifting of proxying the API requests.

Of course, there are other ways, but I prefer this approach since I can can specify multiple API endpoints with minimal fuss, and node-http-proxy can even proxy WebSockets! See the documentation of the module for further details.

Again, you can download the files from this Gist.

The Story of the Logo

Posted by .

We wanted the logo to be interesting, graphically involved and representative of what nth loop stood for — great design and cutting edge technology.

First try at creating a logo for nth loop, based on a möbius strip We went through a few iterations before finalizing our current logo. Our first thought was to use a Möbius strip and twist it to an n shape: we tried a few variations of this but weren’t too happy with any.

One day, Srivatsan had a flash of inspiration whilst doodling. The basic idea was to depict a section of a fan-folded paper, twisted helically, or more simply put, a section of the crepe paper streamers that decorate ceilings in parties.

Paper streamers

These streamers are twisted clockwise, but a counter-clockwise twisted streamer draws an outline that looks like a ‘n’.

Rendering the logo

A screenshot of the output of our processing script used to create the nth loop logo It was pretty easy to visualize, but tricky to implement. We fired up Processing, played-around with Helix equations, and after a few attempts created a sheet of paper, twisted through 180 degrees (something that’s probably impossible to do physically!).

Creating the fan-folds on the paper turned out to be harder than we expected since it’s not easy to visualize drawing shapes in the same way Processing does, but with some luck, we managed to crack it!

An animated version of the nth loop logo And here’s a neat little animation of our final attempt! Check out this gist if you want to re-create this!

The next step was the hard part — creating a static image to serve as the logo.

We exported the Processing sketch as a PDF with the raw shapes; imported the file into Illustrator and painstakingly coloured the individual paths, and finally tweaked the overall levels and added some layer styles in Photoshop, et voila!

Colouring & Animating the logo

Srivatsan made an interesting choice with the colours of the logo: the first and last colours only differ in the R component of RGB, ranging from 0 to 255. We realized that it would be pretty cool if we animated the colours using the CSS3 Hue-Rotation filter, as it would lead to a nice colour-step effect.

If you’re using Chrome or Safari 6, you should be able to see a very subtle transition in the colours of the logo on the top of this page. We initially used a simple CSS animation, but that lead to uncomfortably high CPU (& GPU) usage due to high frame rates and hardware acceleration. I switched to a JavaScript-based animation and settled on a frame rate of 5fps that barely bothers the CPU, even on old machines.

Note: The CSS3 Filter + Animation used around 60% CPU and 12% GPU on a Macbook Pro, whereas the JS version ended up using less than 5% CPU. This is interesting because moving forward, web designers will have to watch out for the ‘hardware footprint’ of the websites they design.


Image credit: Flickr

Hello from nth loop!

Posted by .

Hi! We are Ankit & Srivatsan, the founders of nth loop and this is our blog.

Expect to read a lot of interesting posts about design & technology, and everything that goes into developing our products. We may also sneak in a recipe or a rant or two.