Posts Tagged ‘My one year challenge’

Well, since I plan to develop a social web application (Squirrel2), I need web pages to be designed, right? This is the problem. I have implemented a fair number of web pages in the past, but all they were designed by other folks. Yes, I understand quite well HTML, CSS and JavaScript. But still, this is by far not enough to consider myself a real web designer. In addition I don’t have any artistic skills. So there is no chance I can design a good looking web page.

The most obvious solution would be to order the web development to a professional web designer. But this is not allowed by conditions of my one year challenge

Here I show you how I have solved the problem.

To start with we need a web page we like and which is similar to what we envisage ourselves for our website. Keep in mind, we can’t just save and use a page we like! Web pages, pictures, scripts etc are subject to copyright and could not be used without owner’s permission.

Luckily for us, there is a number of websites where one can find web templates that can be used free of charge thanks to their authors. I have used this one. It contains great variety of web templates, so there is good chance you can find something similar to what you are looking for. I have chosen this template, courtesy of Free CSS Templates (web design) and Mark James (icons). The template comes with Creative Commons Attributions 2.5 license and as authors wrote “…you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)”. In a sense of copyright, this is exactly what I’m looking for.

Before you choose your template, you need to know that layouts of all web pages fall into four categories:

  • Fixed-width layouts
  • Liquid layouts
  • Fixed-width/liquid mixed layouts
  • Em-driven layouts

Here is explanation what each layout type is about with examples, if you are interested. For purpose of this post you just need to remember that fixed-width layouts are the easiest to work with among listed above and if you have a level of skills in web design similar to mine, I strongly recommend you to choose a template with fixed-width layout. The template which I have chosen has three-column fixed width layout.

Here is how the template I have chosen looks like:

As I mentioned, it has three column layout. I want two column layout, so we have to remove third column (“Add space” one) and adjust width of remaining ones. Also we need to change the site logo, remove “Free CSS Templates” text on top (not at the bottom!) and do several lesser tweaks.

If you are “kinda old school guy”, you can do all this using just a text editor and a browser. But I will be using couple other tools. First one is ScreenRuler. It looks like a real rooler and measures distances on a screen in pixels:

I will be using the one which comes with Ubuntu (a version of Linux which runs on my laptop) and can be installed via Synaptic Package Manager.

In addition I will be using Firebug plug-in to Firefox browser. This is a very powerful tool for web design. I will be mostly using two its inspection features:

  • If you point a mouse at a particular HTML element in Firebug window, it highlights an area rendered by the element on Firefox screen
  • It shows what element of CSS stylesheet has defined a particular CSS property of the HTML element

Of course, it has much more functions that are worth learning; but this is outside of the post scope.

First we need to download the template, unzip it to a hard drive and open the page in Firefox. Next we are going to remove the third column.

To do this we need to find a div tag which contains the column. This is easy to do with Firebug. Just press F12 and it will open Firebug window at the bottom of the screen:

Now you see HTML code at the left side of Firebug window. You can navigate through it. Each time you put cursor at any HTML tag, Firebug highlights corresponding area withing HTML page.

This way we can find that the Ad Space column is rendered by div element with id=”abs”. Open index.html file in a text editor and comment out the div tag:

Save the file and reload the page in Firefox. The third column has gone:

But now the left column is too narrow. We need to increase its width which is defined by CSS stylesheet. Let’s find which CSS element is responsible for this. Using the same approach that previously we find that the column is rendered by div element with id=“content”. As soon as we highlight it, Firebug shows what CSS element defines its properties:

As we can see, the div width is defined in line #217 of a file named default.css and it is 430 pixels at the moment.

Now let’s use ScreenRuler to measure a space available for left column. The ruler shows that we can make it up to 650 pixels wide maximum. But we want to have a certain space between columns (gutter), right? So let’s open default.css in the text editor and change the width to 620 pixels. Save the file and reload the page in Firefox. Here we go:

Now let’s remove “Free CSS Templates” text at the top of the page. This time we are going to use a text search in the text editor where we have index.html open. It appears to be a link. Let’s comment it out as well.

I don’t have a logo for the application, so let’s replace temporarily “Mr.Techie” with “Squirrel2” (the name of the project). We’ll put there a real name later. To do this I again use text search in the editor etc.

I don’t need the electrical bulb picture (the one next to logo) on my page, but I will keep it for now as a placeholder so that to replace it with something else more relevant to my application later.

Now let’s reload the page in Firefox so that to see how it looks:

Not bad. But the search field (technically – search form) length looks out of proportion. It should be the same as width of the right column. Let’s fix this. Firebug shows that the width is defined at line #134 of CSS file and it is equal to 200 pixels:

#search {
      float: right;
      width: 240px;
      height: 28px;
      background: #FFFFFF url(images/img02.gif) no-repeat;

ScreenRuler shows that width of the right column is 250 pixels, so let’s change the width of the search form to 250 pixels and reload the page.

Well, the result is not entirely satisfactory – the form width remains the same (200 pixels), it just moved a bit to the left. This is because the actual image we see as the search form is defined by img02.gif picture which is 200 pixels wide. To solve the problem we need the same picture but wider. Visually it would look better though if we had an image a bit narrower than the column (230 pixels wide) centered with regard of the right column. We will make the form 240 pixels wide (by editing CSS as above) and the image itself 230 pixels wide.

I’m using GIMP image editor and here are instructions on how to scale images with GIMP. After editing the image and the CSS file the page looks like this:

That’s all for now. We’ll continue in one of the next posts.


Read Full Post »

Well, I’m about to start development of a social application (Squirrel2 project) and I have to decide on what technology stack I’m going to use. This is a very important decision: making a wrong technology choice can easily result in project failure.

Here is a good research on the current technology stack of well-known social applications. Looks a bit intimidating, right? 🙂

Do I really need all this software? I don’t think so.

All new social applications face two major risk at the beginning:

  • Their development may be not complete at all. Most new social applications (with some exceptions like Google+) are developed either by individuals or small teams with very modest financing. In both cases resources are very limited and there may be just not enough time or money to complete development. This is very true in case of Squirrel2 – I have just around 500 hours for the whole development accordingly to my one year challenge.
  • Even if the initial development has been completed, the application may not get enough traction with its potential users. This happens more often than not. Therefore developers should bring a first version to production as soon as possible so that to verify its viability before too much money or effort is spent. This implies minimum of the initial development as well

So the bottom line is: the initial technology stack should be such so that to allow launching the first version of the application as soon as possible and with as less investment and development as possible.

Notably, initial versions of many successful social applications were built using technologies that are more known for rather rapid development then scalability or high performance:

  • The initial version of Twitter was built in Ruby on Rails.
  • The initial version of Facebook was built on PHP.

And what about scalability, ability to serve millions of concurrent users? I wish I had that problem 🙂 Those issues will be dealt with when and if it becomes necessary.

Squirrel2 technology stack must satisfy following requirements:

  • Main development environment/main technology should be optimized for quick development
  • At the same time it should have a clear transition path to more scalable solution
  • Technology stack must minimize amount of new development; the more ready made solutions I can use instead of doing my own development, the better. I will make exception for technologies that I’m specifically interested to learn, though
  • Technologies that I already know are preferable whenever feasible; I don’t have much time for learning given that the whole Squirrel2 development budget is 500 hours
  • Naturally, the technology stack should be suitable for development of web applications

I have been thinking of the technology stack for some time. Here is what I decided to use.

Main technology

Since my main competence as a software developer is in Java, I could choose that language as the main technology. However it would be somewhat boring… I want to learn new things, remember?

So after some research I have decided to use Grails.

A primary reason for this is that it is a rapid development technology. Yeah, I know it was inspired by Ruby on Rails, so should I have used RoR?

RoR is very good technology. The reasons why I decided on Grails and not on RoR are following:

  • I just happen to like Groovy (the language used by Grails). I think it yields in a very elegant and easy-to-understand code which I consider very important qualities. Absence of those qualities is the reason why e.g. I did not select Scala and Lift which I evaluated as well; to me Scala code is just somewhat cryptic and difficult to read.
  • Groovy produces quite compact code, about twice shorter than corresponding Java code. This is also a very important advantage in my opinion.
  • Groovy++ and Java (ability to mix Groovy and Java, to be precise) offer a clean and easy gradual path to future performance improvements in case I would need improve it. RoR does not offer a similar path as far as I know.
  • Ability to mix Groovy and Java allows leveraging a huge collection of high quality open source software that Java accumulated over time (remember, my goal is to minimize amount of development).

Grails comes with a lot of plugins that provide functionalities I hope to leverage. Grails community is vibrant. In short, Grails is “what the doctor prescribed” 🙂 Decided: my choice is Grails.


Grails is mostly used with relational databases. I could use e.g. MySQL which have worked well for me in my previous projects. However this time I have something else in mind – namely, NoSQL DBs.

I think NoSQL DBs are a part of a major paradigm shift happening right now in IT industry and I want to have hands on experience with those technologies. Funny enough, unlike much hyped Web 2.0 or SOA this paradigm shift, which in my opinion is much bigger and more important than those two, happens almost unnoticed. I will write a post or two on the paradigm shift and NoSQL DBs soon.

There are Grails GORM plugins for several NoSQL databases: MongoDB, Riak, Redis, HBase, Gemfire.

Hbase is for huge data grinding facilities; it is too big for my needs. Gemfire is proprietary, so I am left with MongoDB, Redis and Riak each of which is quite good. I will think a bit more of this and I will describe my choice later in a separate post.

Presentation layer

Naturally, social applications use web technologies at their presentation layer. So will be Squirrel2 doing. I plan to use HTML5 and Rich Internet Application technologies.

In particular, I consider using jQuery, jQuery UI and plugins to them. I like very much architecture of jQuery and actually it is a sort of standard de-facto in modern web GUI technologies.

Also I plan to use Coffeescript language for writing JavaScript code. I consider latter a very promising technology and want to try it.

That’s all for today. I will describe my choice of tools and supporting technologies in the next post.

Read Full Post »