Shawt App

Location-aware chat app. Made with love by Manon & Nico.

Read this first

Making adjustments

Our app is finally up and running. In case you would like to have a sneak peek, it’s available here.

The last few days were then dedicated to the daunting task of fixing the “small details”.

We have tried and enhanced the app in three directions: Performance, Design and User Experience.

Improving the performance

When we first deployed the app, a single page weighted more than 800kb. That was a lot, given that the app is meant to be primarily accessed on mobile devices (i.e. data consumption and broadband speed can be a problem).

We took several decisions to try and reduce the load.

  • Minifying the CSS and JS using Grunt uglify and cssmin routines saved us around 60kb
  • Generating a custom build of JQuery UI tailored to our needs (namely, the range slider) saved us around 400kb

Improving the design

As neither of us has any experience in graphic design, we tried to do our best to...

Continue reading →

Deploying our app

By now, our app looks okay and works reasonably well. But we were still stuck on local testing, meaning that we couldn’t test it on mobile platforms to see what it rendered.

Thus, we decided to deploy our app.

Hosting our app

As NodeJS is getting a wider and wider audience, more and more hosting services have emerged, the choice is now huge.

We settled on Nodejistu, but we could have used others, like Heroku or Joyent.

Nodejitsu has a great client for deploying node apps (more about that later), and offers 20$ for new users, which is enough to host our app for this course.

Moreover, Nodejitsu has partnerships with databases providers (we used MongoLab) that allowed us to bootstrap MongoDB very quickly.

Deploying our app

Here is the best part : deploying a node app in incredibly easy. We have been baffled by how fast and straightforward it was.

We used Nodejitsu’s jitsu command...

Continue reading →

Discover Jade, a great template engine for Node

Jade is a powerful tool that makes writing HTML easier than ever. We use it extensively in our project and wanted to share our experience.

What is Jade

Jade is a robust, elegant, feature rich template engine for nodejs. 1

A web template engine is a tool that allow developers to write simpler HTML, while adding some nice features that quickly become essential.
These templates are then rendered in standard, W3C-compliant HTML and are completely transparent to your users.

What does it look like ?

As a simple example, this :

doctype html
html(lang="en")
    head
        title Shawt !
    body
        h1 Home page
        ulmenu
            li.menuitem Item 1
            li.menuitem Item 2
            li.menuitem Item 3

is rendered as :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Shawt !</title>
    </head>
    <body>
        <h1>Home page</h1>
        <ul id="menu">
...

Continue reading →

Why Node ?

You may have heard, in the past few years, about [NodeJS][1], a relatively new server-side language.

nodejs.png

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.1

I2 have been trying it for several months now. Before that, I nearly exclusively used PHP for my web projects, and I was happy with it. But when I heard about Node, my curiosity made me move outside my comfort zone and try the thing.

And I am now convinced that Node is the future in Web development.

About NodeJS

Here are the most important things one need to know about Node :

  • Node is plain Javascript: You read it well. With Node, no need to switch between languages when you are working...

Continue reading →

Day Zero

This post is about explaining what we have already done, our first decisions about the upcoming development and sketching an approximative timeline of the project.

“Ce qui est fait n'est plus à faire”

Or “What is done isn’t left to do”, as a french saying goes. We started this project as a one-week mini-project for the same course, two weeks ago. The site is already up and visible here.

Let’s take a tour to see what we have already implemented :

The design

We both had previous small experiences with webdesign. For this project, we imagined a minimalistic approach, in which the content would be the focus. The user interactions have been thought of with usability and intuitivity in mind, which we hope results in a clear, easy-to use application.

global.PNG

We used no framework for the integration, as we wanted to have complete control over the final result, but also to minimise the bandwidth...

Continue reading →

About Shawt !

Shawt ! is a social, location-aware chat application. It gives you insights about what you want to know based on where you are.

global.PNG

The app is based on a set of three filters and a distance selector. Make your choices and see the messages appear dynamically !

The idea

We imagined our app on a simple postulate : our Facebook feeds are flooded with irrelevant information.

Most of the time, we are not interested in this guy that needs three more persons to play football, or this girl selling something at the other side of the town. We’d rather watch pictures of our friends at the last party, or stalk our crush to see if he/she’s going to the next one.

So we had the idea of moving this content out of Facebook, to make it less intrusive and more intuitive.

The principle

The app covers three fields of interests :

  • Organizing sport events on-the-go
  • Posting and reading classifieds
  • ...

Continue reading →