Like thousands of other self-respecting professionals you may have been trying very hard to stay competitive by focusing on the little details. Details that others are missing. I’m sure you’ve read hundreds of blog posts on how you should tune notifications so they are less intrusive, or how you should design forms and dialogues in software to be more intuitive. You may even have gone so far as to attend UX conferences and passionately brought up related topics in many meetings in your company.

Huge demand, little improvements

I’m sure that in your mind, you have a belief that you are trying hard to understand your customer’s needs and create great products. You know what ? You are trying hard! And I’m extremely happy that there are many people like you, trying to make great digital products.

But maybe, you, just like me, always had the feeling that you are still missing something. That despite all the hard work you do, there’s always a vague void. A feeling that despite all the stats, numbers and knowledge, there is still a missing link between you and your customers. It’s not an irrational fear. It’s true. There is a missing link between you and your customers. And the worse part, is that this gap is huge.

You have absolutely no idea what your customers want. Even more you got no idea what your customers need. You can study about UX, marketing and product design all you want. You will slightly improve some metrics, you may even be so lucky as to build a successful business (which is a huge feat by the way), but you won’t make huge leaps. You will sense that there is huge demand for approachable, sexy, interesting, easy to use digital products. Yet you’ll be unable to capitalise on that demand, and deliver the maximum.

How real people think

Let us leave these questions here, and let me tell you a few stories. I was recently on a trip to my home island. Meeting family and friends, getting away from work for a bit, trying to have a good time. I had a few, let’s say shocking experiences while seeing how ordinary people interact with products (digital or not).

First, there was Katerina. She is one of the classmates that I still keep an eye on. Because you know, there is this thing called facebook that lets us monitor the life of someone who shared the same classroom with us twenty years ago. Katerina shared a video on facebook about a movie that was supposedly secret. And according to her comment, we should all rush and see that movie, because it’s so amazing, and also “they’ll take it down any moment now”.

This movie was a documentary about people who study the paranormal and all that crap. The funny part is that, there was a guy in that video, who claimed that he was able to get a parking spot every time, just because he thought about his desire to park his car. Funny considering that I have the same fantasy for years and still I have to wait for hours before I park my car.

I can understand this guys motive to claim extraterrestrial mind powers. Everybody wants to be famous, right? But why does this blog have 70,000 followers on facebook, and why is it considered be in risk of being taken down. As if it’s a very valuable secret that “they” are trying to hide. I honestly have no idea, and I absolutely cannot understand those people.

Then there is this pal of mine. He’s called Nick and he’s got some free time in his hands right now. He makes musical instruments from wood and metal. Specifically, he makes his own custom variations of Brazilian and African instruments. He showed them to me, and even did a small demonstration. It’s incredibly interesting! Using stuff most of us would throw in the trash, he makes stuff that sound absolutely amazing. Although I admire his dedication and his passion about it, I honestly cannot understand it. I don’t know what motivates a person to spend hours of research, hours of hard work, to create something that has value mostly only for him.

And the last story is about my sister. I recently bought a new laptop, and gave her my old macbook air as a gift. Having been part of endless debates on OSX vs Windows, I was very curious as what her reaction would be, interacting with a mac for the first time, after years of using windows computers. So after I let her use the macbook for about one day, I asked her what did she think about the new laptop.

Her: It’s great. I can now make up without going to the bathroom!
Me: Great. Wait, WHAT ? !
Her: See ? Here, it has a mirror.

It turns out the “mirror” was a conferencing app, which comes with every mac. This app’s icon is on the default icons on the OSX dock. She probably randomly clicked the app icon, saw her face on the screen, and thought: “hey, why go all the way to the bathroom”. Now to get you into context, she is a doctor. She’s got more than 10 years of education and quite high income. This means that she’s got the customer profile that we would expect to appreciate a well designed computer.

On the contrary she didn’t give a single fuck about the skeuomorphism vs flat design debate. She didn’t even care that her new operate system was built on the “industrial strength of UNIX”. Let alone the intuitive dialogues and the lack of viruses. Who gives a fuck about all that “chinese”, when you can make up in your computer. I honestly believe that even Jakob Nielsen would be unable to understand this customer segment.

Time for answers

Do you get it now ? People are absolutely irrational. Not in the sense that they like “sexy” designed icons instead of three more features. They simply do not give a fuck about all the things, that we think that they are so extremely important. And since I don’t want to go to sleep tonight, worrying, that I didn’t put enough emphasis on something so extremely important: THEY DON’T CARE. They don’t give a dime, period.

They don’t care if your icons are copied from another app. They don’t care if you are using bootstrap because you’re too lazy to write your own css. They don’t care if you can get to a screen in two steps instead of four. They don’t care if your backend is in PHP or rails. And they certainly don’t care if Samsung copies Apple or if it’s the other way around.

On the contrary, most people who make digital products, spend the majority of their time on exactly those things that no “real person” cares about. We spend hours debating and discussing about the little details in our products. It seems that we forgot the single most important topic. Who cares ?

So how can we put all the irrelevant questions aside, and focus on what’s important? It’s simple. We have to become irrational ourselves. And to do that we must not analyse our own products. Instead we must analyse the products we buy, but we don’t care about. Gladly we all have products that we don’t care about yet we still buy. Why did I buy tobacco X instead of Y ? Was it the packaging ? Was it the flavour ? Was I influenced by my friends’ opinion ?

The “human layer”

The analysis, and execution of products, based on basic human emotions is what I call the “human layer”. I’ve seen many companies adding a bullet to a powerpoint on their product being “user friendly”. I’m sure in their heads they must think that they try to understand users. I really wish it was that easy.

The human layer is everything. It’s the top (if not the only) reason, people make decisions. Why they buy products. Why they buy something instead of something else that has similar traits or features.

Forget about features, forget about metrics, forget about trying to understand others using the metrics that are important to you. Your customers are, not designers or engineers. They are simple humans. And the missing link between you and them, is the human layer.

Note: This is a post written on August 29, 2010 in my personal website, Bibakis.com.
It has moved here, mostly for archival.

The hover effect or “mouse over” back in the early days is quite common in websites these days. Unfortunately it’s one of those bad habits that harm the user experience. I guess in a few years we’ll be laughing at hovers, like we now laugh at frames and tables.

Touch is here to stay
As we speak about 200,000 touch screen devices are purchased in the US alone every day. This includes Android smartphones, iPhone and the iPad. You can easily imagine that in a couple of years touch screens will be the norm and mouse based interfaces will be considered “business tools”. Instead of creating multiple versions of your web application why not consider getting rid of mouse-only features ?

Even if people continue to use computers at the same rate as they do today in the future, and even if you don’t plan to deploy your application on mobile devices you still need to forget about the hover. The average user will soon forget that you can expect something to come out if you place your cursor in a link. The reason is that users won’t be running into hovers on the majority of devices (and the most part of their browsing time).

Drop down menus
This is one of the major annoyances in the web for quite some years now. When evolutions in CSS popularized the use of drop down menus, a lot of designers tried to imitate the behavior of desktop applications. Unfortunately they forgot a very important aspect of desktop-like menus. Once you click, they stick! The sudden disappearance of sub-menus made surfing an adventure since users were expected to hunt menus around the page. Have a look at this great study on the topic: Users Decide First; Move Second

If it’s not visible it doesn’t exist
From time to time I’ve happen to surf Facebook with a friend or two. The majority of people I know are not aware of the additional options when hovering over some areas of the page. This is not a surprise as hover destroys the principle of what you see is what you get.

Can you imagine a car or a cd-player with hidden options ? I guess not. Then why should we design web interfaces that way ? Can we realistically expect people to scan the whole screen with the mouse, just in case the designer had the idea to hide some elements ? Most people have a quick look at the page and if something doesn’t appear there they just assume it doesn’t exist. Of course they are right to think so. Nothing else requires you to imagine where parts of it’s functionality are hidden but the web of today.

How can you replace mouse over

Organize information the smart way

The best way to de-clutter an interface and therefore avoid the need for hiding things, is to organize information in a human friendly manner. If you build your information structure in a simple and efficient way, everything can be “hidden” in the next page. The best example I can think off is the apple homepage.

Apple is a multinational company selling a huge variety of products and services, from smartphones and mp3 players to business server operating systems. Yet, in the main menu of apple.com website there are only seven options plus the link to the home page. Let’s take the “Mac” section for example. Instead of having a drop down menu with sub-options like MacBook, MacBook Air, iMac and so on, you are given these options only once you are taken to the “Mac” section. Each page has as few options as possible, yet you never feel that something is missing.

Apple.com’s main menu: Only seven options in a website with a vast amount of information

Use “click and drop” (pop-over)
This is a relatively new technique to the web. When you click on a button, you are presented with some options regarding your further actions. This is a great way to hide things like advanced search options. In the picture on the right you see an implementation in the main menu of startupdonut.co.uk.

In this case, a user with a touch screen device can navigate as good as the mouse users and all the extra options are well hidden until you click topics button. An excellent use of the “click and drop” technique is anywhere you need filtering. For example, search results, viewing a list of products or like in our example, viewing blog posts tags.

Clicking “topics” on the main menu of startupdonut.co.uk opens up the list of tags

Don’t forget lightbox
Lightbox is a nice solution when you want to give some information to the user quickly without sending him to another page. By clicking on a button you display a box on top of the page which can be an image, some HTML, or an iframe. You can use lightboxes for things like displaying notifications, showing the terms of use in a registration page, giving the user a quick preview of a shopping cart or for zooming images in a gallery. In the example on the right you can see the way facebook implemented it for sending a quick message.

The most common implementation of lightbox: Sending a message on facebook

Note: This is a post written on August 13, 2010 in my personal website, Bibakis.com.
It has moved here, mostly for archival.

Content Delivery Networks are one of the latest trends on the web. The idea is simple. Instead of having a single server in a central location, place lots of servers of smaller capacity in a variety of locations. This allows you to avoid bottleneck and reduce delivery times.

Some major web companies (most notably Google and Microsoft) have started offering public CDN services to open source projects. A lot of developers advise to use public CDNs in your websites to serve javascript libraries like jQuery and Prototype. Before you make haste to take advantage of this new trend keep the following in mind.

Your websites will be depending on the CDN
Although CDN providers have an advanced infrastructure and are generally considered very reliable, they cannot guarantee 100% availability. In fact even commercial CDNs cannot do that. Given the fact that we are talking about free services here there will be times when the CDN will be offline. If the CDN goes offline so do you.

You are as slow as your slowest part
If a CDN is performing at high speeds then everything will be ok. However consider the following example. If a page from your application takes 4 seconds to load and a javascript library takes 6 seconds to load from the CDN then the loading time for the user is 6 seconds. So while a CDN is often used to offload a site and increase loading speed it may result in the opposite if it’s not in the peak of it’s performance.

The client will have to open a connection to a second domain instead of using the already existing connection to your one. Also the client will be forced to make a second DNS lookup to determine the CDNs IP.

Unsuitable for intranet applications
If you are developing a web-based intranet application then using a CDN will reduce performance. Instead of loading the files from a central location within your Ethernet based network you will be loading them from a much slower internet connection. Also your application will become dependent on your internet connection, therefore disabling the biggest advantage an intranet applications.

Offline development becomes painful
There may be times when you’ll have to develop your application offline for a variety of reasons. Whenever you go offline you must change you code to temporary use local files. This can be a real pain depending on the structure of your application.

JavaScript is cached anyway
JavaScript files are cached by the client’s browser. The only real benefit of using a CDN is for first time users. Are you willing to take the CDN risk just for the chance of increased speed on the single first pageview? I guess that depends a lot on your bounce rate but you get the point.

Conclusion
Before making the decision of using or not a public CDN take some time and make some performance tests of your own. Get YSlow and test loading speeds yourself. This is the only way to see if it makes sense to use a CDN.

Note: This is a post written on August 11, 2010 in my personal website, Bibakis.com.
It has moved here, mostly for archival.

My latest experiment. A redesign of my website using a literature magazine as a source of inspiration. The idea came to me while I was reading this magazine in a local cafe.I thought that the newspaper and magazine industries have been existing for decades now. Thousands of talented people have evolved the science of text layout in printed media. The web is not very different from that. If you think about it, both the web and printed press give you a flat surface where text is displayed.

What I see all over the web is a lot of people trying to create a great layout for their website or blog. I don’t recall seeing anyone looking back in the past. This has been done over and over before. Why reinvent the wheel ?

I used a two column layout to achieve better readability. Mainframe CSS framework handled the layout through the 960 grid system. On the server side, I moved from Drupal to a custom made system based on CodeIgniter which will power all the websites I’ll build from now on.

Note: This is a post written on August 9, 2009 in my personal website, Bibakis.com.
It has moved here, mostly for archival.

One of the biggest challenges in web development is making multilingual websites. The easy part is having common functionality across all available versions. The hard part is making sure you don’t have blank spots. And that means that if you got an English-French website, you shouldn’t have French words appearing in the English version and vice versa.

The oldest solution I can remember used in PHP is the use of constants. For example instead of writing Home page in your HTML, you write __HOME_PAGE__. Then you got a file for every language with constants that you include in every “visible” PHP script. An if block takes care of including the proper constants file for the currently active language. The major problem of this technique is that if something is left untranslated you get ugly __CONSTANTS__ all over the place. There are few things that can make a website look more amateur.

In CodeIgniter there is the language class that takes care of this issue. Instead of using constants you simply do $this->lang->line(‘Home page’) to get the translation for the words Home page. Then you got files in the “application/language” folder with all the translatable items.The problem with this approach is that when something is left untranslated you don’t know how to find it easily.

I recently took over a multilingual e-shop platform project for an agency. A friend and colleague there came up with a solution for this which is to extend the language class and add the ability to the line method to add marks before and after a string in case there is no translation available. For example Home page becomes !– Home page –!.

Although this time we are more organized and flexible since we can for example enable/disable/customize the !– –! marks you will notice that practically we are still in the footprints of the ugly constants trick. We still get !– Ugly –! stuff in our website in case a translation is forgotten. The worst part is that we still have to scan the entire site by hand and hunt down every little !– untranslated word –!.

To overcome all of the above problems there are two simple things we can do. The first one is to add semantics to all strings we want to translate. This way Home page is different from home page and we can ease the guy/girl translating our content who won’t have to figure out when a word starts a sentence or not.

The best part is that we can have all the items we want to translate gathered automatically without the need for spot marks (!– –!). To achieve this you need to follow these steps

1. Create a simple two column table in the database called translations (id INT, item VARCHAR 1024)
2. When the line method of the language class finds an item that doesn’t have a translation available make a check to see if this item is stored in the translations table.
3. If it is not stored then create a line with the exact text you use in your language files. In our case this is $lang[‘Home page’] = ”;
   Insert this line in the translations table.
4. Create two pages. One called something like ‘translations’ and another called ‘translations_clear’. The translations page should run a simple select query to get all the items and just display them in the browser. The translations_clear page should just empty the translations table.
5. Run a spider against your page to make sure all links are visited. Any decent offline browser should do the trick. Windows users can use Httrack and linux users wget.
6. Visit the translations page after the spider is done. You will get a page with all the items inside an array ready to be translated. Simply copy the entire page to your language file and start translating.

This way you can have web pages that are translated in one step, right before you fire your FTP client for the final upload. Also when something is added later but is not translated you won’t get __UGLY__ stuff in your page. You don’t have to use CodeIgniter to use this technique. All it takes is that you use a function to fetch the translated items.

Note: This is a post written on July 24, 2009 in my personal website, Bibakis.com.
It has moved here, mostly for archival.

One of the problems that came up with the rising dependency on Google and SEO in general is the use of www. On the one hand there is no reason to use www anymore. 100% of modern browsers use the HTTP protocol by default so you don’t need to specify that you need to access the web part of a domain. It makes your site’s address larger and harder to remember, more ugly, less likely to fit alongside a logo. Also many suspect that it has an effect on your keyword density, therefore harming your search engine rank just a little bit.

On the other hand most of the users still keep the old habit of typing www.site.com in the address bar. I try to redirect to the “clean” version of the domain on all my sites. Even if the user uses the www he’s not harmed at all.

In fact most of the times nobody even notices. One way or another there is a solution to this. Whether you want to get rid of that 90s annoyance or you want to keep your domain a classic www there is an easy way to do this in codeigniter.

First create a hook in /application/config/hooks.php

$hook['post_controller_constructor'][] = array(
 'class'    => 'Utils_hook',
 'function' => 'redirect_to_base',
 'filename' => 'utils_hook.php',
 'filepath' => 'hooks'
);

This tells CodeIgniter to execute the “redirect_to_base” method before the controller starts executing it’s own methods. Then you need to create the file /application/hooks/utils_hook.php and place the following code inside

Class Utils_hook {
 function redirect_to_base(){
  $ci = & get_instance();
  $uri = $ci->uri->uri_string();
  // recreates the URL
  $location = substr(base_url(),0,strlen(base_url())-1).$uri;

  $active_base_url = 'http://'.$_SERVER['SERVER_NAME'].'/';

  if (($active_base_url != base_url()) && ($_SERVER['SERVER_ADDR'] != '127.0.0.1')){
   Header( "HTTP/1.1 301 Moved Permanently" );
   Header( "Location: $location" );
  }
 }
}

This way the visitor is always redirected to the URL version you want even if he entered through an old bookmark such as http://www.sitename.com/action/example/

The JavaScript placement debate

A few years ago, Yahoo released a free benchmarking tool for web pages. Aka Yslow. This tool is measuring what and when loads, during a pageview. It then gives a report about what is slowing down your page and then makes some recommendations on how you can improve the performance of your site.

One of these recommendations is that you should load your JavaScript in the bottom of the page, right before the closing </body> tag. The Yahoo people even went so far as to call this a “best practice”. Ever since, there is an ongoing debate among developers about the right place to load JavaScript files. Most people are indeed consider placing JavaScript in the bottom of the page a best practice. Is it so ?

When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading.

On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if for example your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.

I’m using the word perceived, because in both cases the page will be completely loaded in the same amount of time. In whatever order you place your assets, they still take the same time to load. All we can achieve by placing JavaScript at the bottom is how fast the user thinks the page has loaded. But still it sounds amazing, right ? By putting JavaScript at the bottom of the page, our pages will appear to be loading twice as fast.

The perception of “the web”

Well this used to be the big picture in the past. Back then, when the web was something very different from what it is today. Overgeneralizing, for the sake of simplicity, this is how the web was perceived by almost everyone (including web professionals) until recently.

Since then much have changed. First and most important, we don’t talk about “web pages” these days. We now talk about “web apps”, “software in the cloud” and “software as a service”. The web used to be more like digital paper. A way to let people know about your company, a platform for your blogging, at best a place to read your email remotely. But now in 2013 the web is quickly replacing the remnants of desktop software and is battling toe to toe with Java and Objective-C, for domination on mobile devices.

All these concepts were a utopia, no more than five years ago. But today the content is no longer the king. The web is now a democracy. People don’t come to us for content anymore, they create it themselves. Our role as web developers is to empower them, by giving them the tools and functionality to create and interact with their content.

Forget about supporting IE6 and browsers without JavaScript. This is just a 5% of people who fear change, like some people never bothered to buy a computer at all. In a world where we are competing with native mobile developers over performance and features, we can’t afford to think of the web as anything other than pure software. In a way, functionality is the new content and JavaScript is the new king.

JavaScript placement in web applications

Back to our topic. Let’s get back to our example, where we load our JavaScript at the bottom of the page. The user is left for a few seconds with a perfectly looking HTML template where nothing is functional. If the users tries to perform an action and finds out that it’s not working, he will perceive our application as “broken”. What’s even worse, is that we have no way of letting the user know when the app will be fully functional.

On the contrary if we place our JavaScript on top, the user will get a blank page for a few seconds, but once the markup is loaded, everything will be fully functional from the first second. Therefore by purposefully giving the user a blank page, we are giving him information that the app is still loading. The user knows that the app will be functional when he sees boxes and buttons.

The user may think that our app is slow, or that his connection is having hick-ups or even that his device is slow. Not only we don’t take the full blame for the slow loading of our app, but we eliminate the possibility of the user interacting with a broken version of our application.

A few seconds to load the app is one of the most common things in digital devices in general. People wait for computers to boot up, for youtube videos to load, for Microsoft Word to open, for almost everything. Nobody will go crazy for a couple more seconds of waiting. But there is nothing worse than a user tapping a button which does not work. This is a breach of trust from the user end. If the app didn’t function correctly now, will it lose my data tomorrow ? Should I pick another app instead ?

Even the slow loading experience can be eased, using a simple loader like Gmail did.

Summarising, it really depends on what you’re making. If you’re still stuck in the “content” world then it’s maybe best to place your JavaScript at the bottom of the page. But if you are making web software you’re much better, placing JavaScript at the top, because functionality is the new king.

Vangelis Bibakis recently gave two presentations to Joomla Day Greece.

In the first presentation he talks about MainframePHP, the framework we use to create web applications. The first parts of the presentation are a basic introduction with case studies and performance data. He goes into detail on how Mainframe compares to external libraries which provide similar functionality. This is also a great intro to people who are getting started with Mainframe and want to see how it implements concepts like theming and modularity.

In the How to get the tech job of your dreams presentation he explains why you should not have a CV and how to write a great cover letter.

It’s far more simple than you may have thought. Also it’s more common sense than secret. Anyway it goes like this.

The million euros question

You (obviously) know your product, and you know the competition.

So since the main competitor in your field prices their equivalent product at $X/m, how much would you pay for your product. Oh, you have 5 seconds to answer…

If you can’t answer this question in 5 seconds, this means one or more of the following:

• You don’t have a clear idea of what your product really is.
  You’ve built some features together, but you have no sense of the end result.
• You have not studied the competition enough.
  You may have a good product, but you don’t know if it’s good enough.
• You can’t put your self in the customer’s shoes.
  This is by far the worse case scenario. If you don’t know how people perceive and evaluate similar products, it’s very hard to know what features to build, how to advertise your product right and obviously how to price it.

The tablet example

First of all let’s define tablets.

Tablets are the device that people use to get away from all the things that suck about computers. These include, Adobe flash, keyboards, cables, Microsoft office, loosing your work because of a virus, running out of battery after an hour, troubleshooting driver problems and many many others.

People use tablets to easily watch videos, surf the web, enjoy music, and talk with friends. They like them because they are simple, light and the battery lasts for long.

Microsoft released Surface tablet for $500, the same price as iPad. Surface had most of the problems in group A, where iPad had all of the qualities in group B. Surface’s only competitive advantage was running Microsoft Office natively. As we all know, MS Office is a boring piece of software most of us already use all day at our computers at work. Mostly because we have to.

So if the top competitor in the market prices it’s product at $500, and your product is heavy and boring, with a worse screen and poor battery life how much would you pay for it? I’d say $200 would be a fair price, although I’d still go for the iPad.

Microsoft failed to answer all of the above questions and ended up dropping the price by $150 a couple of weeks ago.

Who got the price right ?

Google was more respectful of the competition and priced Nexus 7 at an introductory price of $200. At the time android was not as polished as iOS, it didn’t have an equally large app selection, it was heavier and with a bit worse battery life. Still at $200 it was a very honest and competitive offer compared to iPad mini being 65% more expensive at $330.

The pricing path

Every day during the development of your product, it’s important to be respectful of the efforts of other talented people. The market is full of well established products that you simply cannot compete with without either an amazing product or a very competitive price.

The more you evaluate your competition the harder it looks. This not defeatism. This is realism. There is a good reason 80% of new companies fail during the first five years. This thought path will eventually lead you to the conclusion that in most markets it’s impossible to compete. For example I can’t imagine any startup competing with Gmail.

That’s perfectly fine, you don’t have to compete with giants. Through constant and honest re-evaluation of your pricing strategy you will understand in which market segment you can achieve a competitive pricing for your product.

The rule of thumb is that if you end up pricing your product very low, your are trying at a very saturated market. If you end up pricing your product very high, you are trying at a market where there is not sufficient demand. The pricing path leads to the ideal positioning of your product in the market, in a segment where you can realistically have a good chance of competing.

It’s fun to see Siri making fun of Android and Samsung at WWDC 2012.

It’s also fun to see Microsoft making fun of Siri in it’s latest commercial.

But it’s infinitely more fun reading IDC’s report on mobile OS market share for the first quarter of 2013.

Android: 75 %
iOS: 17,3 %
Windows Phone: 3,2 %

Losers always try to find cheap ways to degrade other’s work.
Winners are busy developing their next version.

As people buy more and more tablets, the time has come to see old tablets permanently docked around the house. The living room hi-fi player tablet, the kitchen tiny tv tablet. While this gives the impression that people will still use a tablet, in reality this is an entirely new use case.

So far we used to design our apps based on two dominating use case scenarios.

a) People are sitting in front of a computer at work, or at their personal laptop at home or while traveling. In this case it was safe to assume that the device was to be used for a long time span, and that the user had logged in the device and had a personalized selection of software and settings. Simply put, the user was using a customized environment, and had ample time to spend.

b) People are using their smartphone, much likely outside their house, but even inside the house as a secondary activity. This is not as clear as the computer use case, but still we got some constants. The user has his personal choice of software available, and may or may not have lots of time to spend. Still he’s using a personal device.

I highly recommend reading Luke Wroblewski‘s articles on the topic, such as this one.

In the new “home tablet” use case, we don’t have the “personalized device” concept any more. Consider the case where we got an old iPad 2 in the kitchen so we can quickly find recipes and watch youtube videos while having a snack. What other software fits in this device ? First of all let’s check at more parameters to get a better understanding of what people expect in this case.

• It is possible that you don’t have your favorite apps pre-installed.
• You have not logged in, in any app or website in this device.
• You don’t have much time to spend in the device. If you got 5 minutes to spend in the kitchen altogether, the time you can spend in the device drops to half a minute or less.
• Because of the above,  the attention span for any website can be 5 seconds or less. Comparing that to the 12 seconds we consider the norm in the computer world, it’s a huge change.

So in order for any software, to even have a shot at being used, at these new “home tablet” conditions it has to:

• Have very clean and simple design. Menus with few items, clear separation of content and navigation and labels that describe exactly what functionality they perform. 
• Display only the most important information. Most email tablet apps would fail this. Even the relatively simple Gmail iPad app is too bloated for a “home tablet”.
• The application should be used without an account. We can’t expect people to lose 20 of their 30 seconds trying to type an email/password combination.
• Even if the app must absolutely log in the user, this must be done in the simplest way possible. The preferred way would be to just log in by just tapping a button and using a third party provider like facebook or google to log-in. Even if that’s not possible, at least the app must remember the last used username, and ask the user only for a password.
• A very powerful search engine. This should allow people to quickly perform searches to find “that brown sofa I was looking this morning at work”.
• An easy way to find information stored from other devices, and an easy way to send information to other devices. We can expect that people will want to continue where they left off in another device.

The good news is that most well designed apps which take UX into account should already satisfy these criteria. These are qualities that were already important, but now will become absolutely necessary. As people divide their time into more and more devices, specialized power-user features will become less important. Less features IS the feature in such use cases.

The web is the platform that can better serve these needs. Not only because nobody will have time for app-stores, but because native apps serve the concept of a walled data space. On the other hand, the web has always had openness in mind, with linking being it’s primary concept. A web app can link to a specific point to another web app, where a native app can only serve it’s private space and has no visibility to the rest of the device.

As of today there is a huge number of startups, both in the US and abroad, trying to create new applications to inject functionality to cyberspace. It’s very easy to notice that these days we don’t have a problem of finding software to get our job done, but rather a problem of finding software to get the job done the right way and in the right timeframe.

I feel that the software industry in the 2010’s is quite similar to the automobile industry of 1910’s. Obviously we got “cars”, but not the right ones. Cars today serve  a variety of roles. Some are sport cars, some are trucks and some are busses. But our software is not equally evolved. It’s quite monolithic (and disapointing) that the majority of computers in the workplace today are evolved typewriters.

Ford motors, Model T, 1908

Yes we got the internet of course, which means that fortunately we got “roads” to let our information move. But the vessels that use these roads (computers) were not built for the highway. The basic elements which allow someone to use a computer, are the keyboard and the mouse. This means that so far, we have digitised the pen and pensil.

Watching at the huge amount of research taking place in the B2C software marketplace, I can’t but stop and think. Is this the best we can do, in the business software world ? Are we left behind ? Have we injected our organizations with a culture of innovation and adaptation of the new, or are we just laggards who just wait for the inevitable to be forced upon us ?

Unfortunately not a lot of people in the business world today talk about the concepts which make today’s software fresh and exciting. There is no UX research in business software today. There is no design which supports functionality in business software today. And worse of all, we still believe that it’s still ok to be stuck behind a static monitor, with a keyboard and a mouse.

The single most important factor in breaking the norm and moving forward is us. Humans are the weak link in the chain in the modern organization’s workflow. We still believe that software developers need a keyboard because they need to type a lot. And we believe that designers need a mouse to create “pixel-perfect” designs. They don’t.

Quite the opposite. We should be asking ourselves: How can we transform software production today so that it doesn’t involve huge amounts of typing ? How can we change the workflow of designers so that a mouse is rendered obsolete.

We must start producing new cars today. Sport cars, trucks and busses. We got engines, we got tires and most important, we got roads. The more we continue to use Model T’s in our organizations, the less competitive we are. And there is really no point, in waiting for retail computing to force the evolution upon us.

Update 7/5/2013:

I’m so glad to see that there are companies willing to really innovate and create new ways for us to unleash our creativity. This is adobe’s mouse and keyboard killer:

If you have recently visited the homepage of Salesforce.com you may have noticed a strange quote on their “welcome” banner. The slogan reads “No hardware. No software. No headaches.”. How can it be “No software” when right  below they claim that they are supposedly the leaders in cloud computing ? My bet is that someone from their marketing department insisted that people have associated software with viruses, painful error messages and technical terms they don’t understand. So the way they chose to differentiate themselves is by claiming “No software”.

Yet it is software. In fact it’s a lot of software. It’s at least four software products that are deployed in desktops, tablets and smartphones. Yes that is a lot of software. And since they consider software a bad thing and claim not to produce it, we can easily understand the quality of their software. It takes only one click at the “Free trial” button to get a glimpse of what salesforce thinks about how software should be like. When you hit the “Free trial” button, you are faced with a form with 12 fields and buttons. Indeed that’s a lot of software for such a simple task.

If that is what salesforce’s idea of software, then indeed their software sucks. If it takes 12 fields to make a request for a demo and that complexity is carried out to their products as well, then it’s easy to understand why they view software as a nightmare. Because they have never produced great software, neither have they got the taste to appreciate other people’s great work. What a sad thing to see a company, with the mentality to create and ship crap and then just try to hide it from it’s customers with gimmicks.

Fortunately there are other companies which do their best, to produce great software products. We at Demian Labs are one of those companies that spend day after day, putting our knowledge and effort into tweaking every little detail that makes our software fast, easy and pleasurable to use. And as such a company, we are proud to claim “Yes, software. Great software!”.

I don’t agree with everything Steve Jobs did, neither do I consider him an example that I’d follow. But I have to give him that not giving a cent to philanthropy was the best thing he ever did for the rest of us. You see, there is no greatest temptation for the modern man in the western world, than to find ways to justify his wealth. Deep inside we all know that while we wait for next cool iPhone 6 or a shiny fast MacBook, millions of people starve to death in other parts of the world.

The mess is all around us

But you don’t have to go that far to experience the mess. As a person living in the center of a capital, in a western country hit by recession, I see homeless people in the streets every day. Before the recession, people living in the streets was a problem of some major cities like New York and London. I’ve never had the chance to see people who literally just hope to make the day by finding food in the garbage.

In the first few weeks it was a shocking view. For the first time I’ve seen people whose entire fortune is just a blanket. But what was even more shocking was the months that followed that. I’ve started to notice each of these people individually and notice trends in their daily lives. There is one guy sleeping outside the office where I work. He only shows up after night so that all the people from the offices are gone. Another one, an old guy with a large beard, lives outside a jewellery shop and eats from the garbage can next to it. He sits for an hour or so before he goes back in the garbage for a snack.

There is a huge number of immigrants in the center of Athens as well. People mostly from Bulgaria, Albania and other countries of the former Soviet block but also from Pakistan, Afghanistan and even from African countries. At best they live piled up in old abandoned houses without electricity, water or heating. Ten or fifteen people are forced to live in the same room because that’s the best they can afford. Needless to say, they missed the announcement of the new lightning connector on the new iPhone.

Why do those people suffer ?

Why do all those people suffer so much ? Why is it that they can’t afford anything, while at the same time others have everything ? To be honest this is a question that goes beyond me. I can’t tell you if it’s the flaws of capitalism, or if people are greedy by nature. I can’t even tell you what we can do to make things better for them. Should western governments force multinational companies to raise the wages they pay on Asian and African countries ? Should we make more free trade zones that include the poor countries ? Perhaps there is an answer to be found and perhaps there is hope for a better more equal world. I certainly hope so although I don’t have such an answer.

However I am certain that we won’t find a solution through philanthropy. In fact I believe that the more we fund philanthropy, the more we condemn those people to more poverty. It sounds very reasonable though, I’ll give philanthropists that. How is it not help, when we give the poor people money ? It’s not help because you’ve missed the fact that poor peoples’ problem is not the lack of money.

What is the problem poor people have then ?

I have been without a job for a couple of long periods in my life. But it only took a few months each time, before I got a new job and joined the moneymakers again. I didn’t have an income at that time but had lots of other benefits to make up for it. Most of all I kept on being considered a part of society and an able worker. To everyone, including me, losing my job was only a minor temporary setback.

Unfortunately unemployed people and immigrants are not that lucky. Even if they do have a job, it is (ironically) considered a temporary success. The major problem poor people have, is the fact that by default, society considers them less entitled to wealth. This happens for one reason or the other depending on the case. For immigrants it’s their nationality, for black people it’s their color, for people in underdeveloped countries it’s the fact that they just happen to live in underdeveloped countries.

The global point of view (in the western world at least), is that Chinese workers are entitled to $400/m at best in companies like foxconn, while people working to produce the same products in the USA, are entitled to more than $15.000/m. So even if Bono succeeds in the “drop the debt” campaign, people in Africa will still be making pennies the next day. It will only take a few years before we get back to the same state. As long as we leave the causes of inequality untouched, we will end up in the same state.

But why is philanthropy a problem ?

The one thing (almost) all philanthropists have in common is that they never talk about what causes the problem. They want to offer painkillers to people with a rotten tooth. Nobody ever proposed a law that will cut wages in half in his country so that people in another country can have more. Everybody pretends to want to help but at the same time all they are willing to sacrifice is their 3rd iPad. Nobody ever proposed to change the way we see ourselves as entitled to wealth.

By donating a bit of your income to charity, you are practically washing your guilt away. It’s your way of saying “I gave you something. I am a nice person. I have done all I could about your poverty. That will be all.”. What this does is shift people’s attention from the real problem. If as a society, we got some people like Bono trying to drop the debt, we get the impression that we are already doing something about it.

But we are not. We are just giving people painkillers and consider their rotten tooth problem fixed. It’s only prolonging their suffering and shifting the conversation away from “the dentist”. And the worse part is that Bono considers that bankers should lose their wealth for the debt in Africa to be dropped. At the same time it’s perfectly acceptable for him to travel the world business class.

Because Bono deep inside, seems to consider himself a god-gifted artist with sensitivities, while bankers are evil capitalist pigs who must loose their money so he can keep his, and feel good at the same time. This is the exact mentality which causes the inequality problem in our world. That for some reason “we are good” and not part of the problem. The poverty problem is supposed to be caused by “others”, the evil bankers, evil lawyers, evil politicians. And since we are good we are entitled to our wealth.

And since all people consider themselves entitled to what they have, at the same time they practically consider the others entitled to their poverty. And all the philanthropy and charity in the world does nothing to change that mentality. It’s only rich people’s way, of feeling better for being entitled to their wealth, since they gave some pennies away.

After some long brainstorming sessions, me and Jason came up with the concept of our new logo. It should be a clear iconic sign that makes immediately clear that we are a think tank and at the same time we got the horsepower to materialize our ideas. The new logo does just that and on top of it, matches our philosophy that technology and machinery are a interdependent part of human nature since the times of Hephaestus.

This is a great example of how to evolve ideas by simplifying each part to the point where it becomes an iconic pointer to a particular concept. The steps below illustrate the though process we did to get to the final result.

The world is full of startup mentors, that try to guide founders, on creating applications that solve people’s problems. Companies like 37signals suggest that you should “scratch your own itch”, and create software that solves your problems and then it will probably solve somebody else’s as well. While it is indeed a great way to start working on something, it is not the only way. Furthermore it doesn’t answer the question: “What if my problem is that I don’t have a problem ?”.

How can you not have a problem ?

There can be many reasons why you may not have a problem. First of all it’s quite possible that you already are, in a perfectly functioning ecosystem where there are no big problems left to solve. One such ecosystem is operating systems. Sure we all have our minor complaints about what we can do with our computers, but generally speaking, the operating systems of today are quite powerful and easy to use.

It is also a common case to see a problem lying right in front of you, and at the same time see a lot of people trying to solve it. This means that people are in the process of trying out things on the commonly perceived problem and a great solution will come out sooner or later. One such case is JavaScript development in web applications. Today’s applications need so much to be interactive and responsive, that developers have to write huge amounts of JavaScript to make it happen. The huge volume of JavaScript code required creates a chaos, and obviously developers need tools to bring order in their code.

At the same time a large numbers of open source projects are trying to do just that. A few that I’m aware of are backbone.js, ember.js, AngularJS, Tower.js and node.js. The real problem right now is choosing the best way to solve that problem. It will take some time for the dust to sit down, and we see one of these projects emerge from the pack as the dominant solution. Either way it is obvious that there is no problem for you to solve, since a lot of others are already solving it.

There’s more than repairing

So if there are no problems for you to solve, what is the alternative ? Let’s get back to the start and remember that the end goal of a company is to provide value. And while it is true that when your TV is broken, a repairman will be of some value to you, it is not always the case. Some people choose to repair TVs, some others try to create new ones and some others just try to sell them to you. Not only nobody considers the repairman the most important part on the TV chain, but most people will agree that he’s often the less important.

Why ? Why ? Why ?

Why was Instagram a success ? We already had the option of sharing photos on twitter and facebook with a few taps, and we also had some filters in software like Photoshop and iPhoto. Instagram just made it easier. So if you were asked by someone, “Why should I use Instagram ?”, the answer would be: “Because it allows you to easily share manipulated photos”. It didn’t solve any problems, it didn’t do anything not possible before. But it created a new pleasurable way of hiding that you are just an amateur photographer using a phone’s camera with a crappy lens.

Everyone I know has at least some free time, one way or another. And this free time has to be filled somehow. Some people watch TV, some play video games and some just go for a walk. And while it works, and we manage to fill our free time everyday, we all know, that honestly everything gets quite boring after a while. Even the most conservative people I know, are willing to try something new if the risk is low and they have a reason to do it. And since by definition, software is mostly a low risk product we should all focus on giving people reasons to use our products.

Why should I use Flipboard ? Because it’s like a magazine on the iPad.
Why should I use Path ? Because it’s like Facebook, but without the annoying people.
Why should I use X ? Because of Y.

Your startup is an X trying to create a Y and therefore complete the sentence and justify it’s existence. And while I believe that solving someone’s problem creates enormous value, just answering the why, is often a great shortcut when you got no problems to solve.

In the last few years, I have visited London and Frankfurt. Both are Huge urban zones, with London being the largest urban zone in Europe. In both cities I had to use the metro (or subway, or whatever you want to call it) to get from the airport to the city center and vice versa.

When I first sat foot in Frankfurt, I saw a railway map similar to the one below:

Ouch! What a fucking mess! I said to myself. What do all those icons mean ? And why are some places written sideways ? How am I supposed to turn my head when I’m looking for something ? And how do I get back to the airport once I get to the city center ?

I asked some people in the airport and finally found my way around. But once I got in the city center, I had trouble getting back resulting in one hour lost. Of course it was not a pleasant experience and this coupled with the ultra-dirty trains, have placed Frankfurt quite low in my list of future destinations.

A couple of years later I visited London which is at least two times larger than Frankfurt. I was expecting, given the size of the city, that I would have an even hardest time moving around. To my surprise, when I landed in Heathrow I saw this, outside the train station:

What an improvement! Everything written horizontally, all lines clearly visible and an amazing index in the bottom left with anything I needed to know. They even have small red airplanes next to all stations that can take you back to the airport. How cool!

Needless to say, I had no problem whatsoever finding my way around London, wasting zero time, and without having to ask around.

Now back to the real world…

Earlier today I had to ask one of my team members to rename some database tables according to our boring convention of plugin_table_name. So since the arrangement_types table is obvious that contains arrangement types, it had to be renamed to arrangement_arrangement_types.

Duh! What meaningless convention you may think. Rest assured it is not. When you want to export all database tables belonging to a certain plugin, or when you want to make a list of each plugin’s tables, to create an upgrade procedure it pays off.

Remember that one hour I lost in Frankfurt ? Every time you break a convention, you lose one hour some time in the future and you destroy your coding experience. Maybe even more if you consider that it’s a journey that you will repeat many more times.

With the new MacBook Pro, for the first time, a high resolution retina display is used on a computer. A large number of questions are raised about what software and web developers must do, to ensure their software products conform with what seems to be, a new generation of computers. First of all…

Does the retina MacBook Pro signal a new generation of computers ?

Yes it does. As the smartphone market already proved, Apple never had any interest in turning the river back. The retina display is a huge advantage for Apple and it is certain, that in two years the most, the entire Apple line-up will feature the retina display. With other computer manufacturers (most notably Sony) already using high definition 1920×1080 monitors in a wide range of products, it will not be a surprise if we see the entire PC market going down the high resolution road pretty soon.

What exactly is the retina display ?

It is a display with double resolution than the classic displays, most of us use in our computers. For example the iPad 2 had a resolution of 1024×768, the iPad 3 which uses the retina display has a resolution of 2048×1536. Similarly the “simple” MacBook Pro has a resolution of 1440×900 while the new retina MacBook pro has a resolution of 2880×1800.

Does it mean that everything on the retina is smaller ?

No. Retina was created to increase the clarity and sharpness of displayed elements, not to fit more stuff onto the screen. Everything on the retina display takes up four times more pixels than a classic display since the retina display provides four times more pixels (two times more pixels times two dimensions = four times more pixels). However the end result to the user is that everything looks like still having the same size, but rendered using four times more pixels, therefore looking much better.

For example, a 960 pixel web layout will still occupy the same space on a retina display but will be rendered using four times more pixels. In other words the browser will automatically “convert” it to a 1920 pixel layout without any change required in the markup. Try to think the retina display as change in pixel density, not in pixel number.

OK, so what’s the catch ?

While text is rendered using the operating system’s fonts which are already designed to be rendered equally good at any size, the same is not true for images. When your computer renders a font, it just needs vector data from the font file and then the operating system takes care of the rest. However when you need to display an image in a space four times larger, you need to have the information about the pixels that will occupy the new space. It is like trying to display a 300×100 image in a 600×200 space using <img src=”something.jpg” width=”600″ height=”200″ />.

Showing an image in the retina is something similar . The browser will have to display an image in a space four times larger and inevitably will have to guess the new pixels in order to resize the image. Unfortunately it is impossible for any software to make a guess good enough to resemble what an image should really look like if it was four times larger.

Let’s consider the above image which is a still from the Verge’s review on the retina MacBook pro.

I have highlighted the following three points of interest:

1. MacBook pro on the left renders the letter O’s curves with much more detail making it much sharper.
2. Small text looks much more readable on the retina display.
3. The retina display fails to render the small triangle with more precision.

As you easily see, while text rendering is noticeably improved, images appear “pixelated” since they cannot provide any additional visual information. Websites that use images to display text elements with fancy fonts (for example in menus) will have their menus appear “pixelated” when compared to sites that use plain text. This means that this already bad practice is now even worse.

What about photos ?

As we’ve already discussed it’s up to the browser to resize the image. Does that make any actual difference to the user or do resized images look good enough ?

As it stands, browsers do a terrible job at resizing images. Resized images look blurry and pixelated. The best resizing software that I’m aware of  is Adobe Photoshop. So let’s assume that browsers will not be late to implement an equal quality filter when resizing images. How will that make photos look on retina displays ?

Let’s use this photo as an example. In the next two thumbs I cropped a small part of the image and zoomed in to 400%, so that all details are clearly visible. The first preview is a piece of the image with no resizing implemented. The second one is the same part, resized to twice it’s size and then downscaled back to the original size so we can compare the two.

Notice the following differences:

1. The sail has lost some of it’s detail
2. The waves look blurry and far less detailed
3. The blue in the sky looks washed out

As you can see the reduction in image quality is quite noticeable. As a result there will be a noticeable advantage to websites that take care to provide higher resolution images.

How can I provide images for retina displays ?

The best way to avoid resizing is to provide images with double resolution even if you want to display them in in half their size. This is done by specifying a smaller size in the width and height attributes in the image tag.

For example let’s assume that you want to display a photo in a 300×300 pixel box. You should upload and use a 600×600 version of the photo and use the following markup: <img src=”example.jpg” width=”300″ height=”300″ />. This way your image will be shown in a 300×300 pixel box, but the browser will have enough visual information to show it correctly in higher resolution displays since you provided an image of double resolution.

Note that this technique requires that you do actually have higher resolution images. If you try to use this technique using low resolution images resized in software like Photoshop, you will only move the resizing procedure from the browser to your photo editor. This way you will still provide low quality images while wasting your time resizing and greatly increasing the image size. Which brings us to our next question…

What is the bandwidth cost ?

While providing higher resolution images is a great practice and greatly improves the user experience, one shall not forget the increased bandwidth required for downloading these images. Of course there is no general rule as to how much the size increase is, but depending on the image the increase in file size can be up to 4x.

Such a file size is forbidding for mobile users. Developers should resort to server side browser detection techniques to serve lower size images to mobile users. Even if you use responsive design techniques for your layout, you won’t be able to avoid the server side for the images part.

Conclusion

Higher resolution displays are here to stay. We should all make haste to implement new ways of providing high detail images to our web sites and applications. However one should carefully study all available options before choosing which way to go. Expect more on this as I will have my hands on a retina MacBook Pro in a couple of weeks.

What is WordPress P2 ?

P2 is a theme for WordPress which eliminates the need for using the WordPress administration interface. You can post right from your blog’s home page and see your changes right away. P2 transforms WordPress to a social-media-like platform since anyone can easily post updates which are immediately available to everyone.

With the use of a couple of plug ins we transformed a WordPress installation to a private log for all developers of the team. Every time a developer makes a “radical” change to the database or code base that the rest of the team should know about, he can post it on P2 and therefore inform everyone instantly. We no longer have to use boring files to store a list of changes, or email people when we need to update them on the latest stuff going on in the project.

How to use P2 as a development log/blog

1. Download and install WordPress to a sub domain of your main site (for example devlog.company.com)
2. Download and install the P2 theme
3. Activate the new theme through Appearance > Themes, in WordPress administration
4. Download and install Private WordPress plugin to make sure that only logged users can view your log
5. Download and install Global Hide/Remove Admin Bar plugin to get rid of the annoying black WordPress bar
6. Create user accounts through Users > Add new, in WordPress administration
7. Log in and start posting

The internet was one of the most important revolutions in the history of mankind. There is no doubt that no other technology has made the information age a reality like the internet has. However in the wrong hands, it can be made a tool to discriminate, annoy and treat people with disrespect.

The images bellow are real screenshots from web pages that I’ve encountered in my daily browsing. Some companies think that there are some priviledged countries, and the rest of the world. And those companies obviously think that those two categories should not be treated equally.

We live in a planet where everyone is connected with the rest of the world through the net. Twitter spreads the news faster than TV or newspappers. We are constantly moving towards a more connected future. It is innevitable that all these practices of discrimination will fail sooner or later. It is common sense that some people just don’t get the medium.

We deserve a better web and we have the tools to develop a better web. We also have the responsibility to create a better internet. So if you are a web developer or designer, or work in a startup, you should know that there is always room for improvement. You don’t need a million dolar idea to make a difference. Take a sad web app and make it better.

We all know about Google’s plus one button. What most of us don’t know is whether it is something more than a way for people to like our website our product. Since it’s made by Google, a lot of SEO specialists have suspected that Google may improve the search engine rankings of websites using the button, with the obvious end goal of making the button popular.

As with all things SEO, there’s no scientifically proven answer to this question. Even if Google does modify it’s search engine rankings in order to promote it’s own product (button) it will never admit it in public. All we can do is observe and assume.

A couple of years ago I built a small util that generates random text. It helps designers by providing random text that looks real in their demos. You may have guessed by now that it’s called random text generator. It’s just a language selector and a form essentially so I’ve had just a couple of ads on top and on the side of the form just for the sake of it. The ads are bringing some change every month but nothing serious. The traffic is a few thousand page views a month.

When the plus one button came out, I though I’d give it a try on this tool and see how it goes. About four months ago I removed the top advertising banner and installed the button next to the logo as you can see in the image above. To my surprise the advertising revenue did not change at all, despite the fact that I’ve removed half the advertising space. I guess this is yet another reminder that advertising, when done on a small scale and without serious targeting is practically worthless.

However traffic from Google started rising almost immediately on a rate of 10% to 15% per month. The cumulative traffic growth over the last four months is around 50%. The best part is that in contrast to retweets and facebook likes the google plus button clicks stay. Any people with google+ friends who clicked the button will see it as a recommendation in their search results now and in the future. Of course facebook and twitter buttons have other uses and benefits and I’m not suggesting not to use them.

However the moral of the story here is that the Google plus one button seems to work very well and is definitely worth a top spot in any webmaster’s toolkit. Also since I’m promoting other products of mine on this website from time to time, it is a nice outcome to increase traffic and reduce advertising space. Of course none of the above is official and it’s just my personal observations, but I hope you get the point!

Update:
It seems others have also noticed SEO benefits from the +1 button.
The latest that caught my eye is a post from INC magazine.

Responsive web design is the latest buzzword in the web world. Everyone is making haste to learn about conditioning through media queries, flexible grids and so on and so on. However responsive design as it’s used at the moment is a negative trait and should be avoided at all costs. The reason is, that it’s a negative term by definition.

You are confused a bit, right ? How can it be negative when you’ve seen all those great examples of websites that scale according to your device’s resolution. It seems to work in real life. Well I doubt that. And to throw our beloved responsive design showcases away, and get along with our post, just remember that all those great examples are simple content sites. And to make a long story short, simple content websites don’t justify the time needed to produce a great responsive design. Most of the times a wordpress with a mobile device detection plugin and a great mobile theme does the trick far easier.

For all other cases where you have a more complex website or a web application, where extra time and research is justified, responsive design still won’t do. And this because responsive design destroys the “device scemantics” (I just made up the term). This means that we use devices for a reason. Each device has a purpose and meaning, a reason why we bough it and why we use it.

For example, say I just landed from a plane and want to find quickly the phone number of Hotel X. I got my luggage in one hand, my coat on the other and can’t hold my phone near my face. If you show me a responsive design of the hotel’s website with lots of pictures and small text you’ve just made me angry. I already had trouble typing your website’s URL in the browser and just need a huge link labeled “Contact details” so I can call you and make sure my reservation is ok.

Of course the same is true not just for content but for apps as well. A form might be reasonably large when viewed from a desktop computer but way too big for a tablet or phone. I will want to store a PDF with an printable application form on my computer but will prefer the HTML version in my iPad.

Each device has it’s own natural time and space in our lives, we can’t just serve the same content and functionality everywhere just because we find it easier to have only one version of our website. Each device type has it’s own context and purpose and it’s our duty as web professionals to serve that purpose. Just because your layout doesn’t break on a smaller resolution, does not mean that you provided the functionality your visitor expected.

The way I see it, responsive design is an ugly workflow hack. And as such, it will not improve your long term strategy, whatever device type you consider your priority. Mobile web and tablets are way too important to be left in a hands of a few divs that collapse below each other when the resolution changes. Oh! and three wireframes simply will not do.

Responsive web design techniques should be used as an assistant to overcome different device specifications of the same type. Use these techniques to make sure that your website displays correct across all mobile phones but don’t take the same website to another type of device. If you plan to deploy on mobile and tablets, do yourself a favor and do it properly, with the right amount of planning and research.

I’ve uploaded a few changes in Deskhot which make the interface simpler and easier to use. Now your bookmarks in Deskhot look like the picture below:

The new interface

1) The new tags index now groups tags by letter and shows group letter in the left side. This allows you to scan the index very fast when looking for a particular tag.

2) All extra options of a bookmark (edit/delete/share) and extra information like tags and date, are now hidden and you can show them by clicking the small expand button next to a bookmark. This way you can now focus on your bookmarks and find very easy the one you are looking for instead of being distracted by the many buttons of the previous interface.

3) Just in case you prefer the old way of having tags and buttons shown for all bookmarks, you can click the expand all button. Deskhot will remember your preference and keep it that way if you want all your bookmarks expanded.

3b) You may noticed a number with a small arrow next to it. This is the next page button. So now you don’t have to go to the bottom of the page to find the next page link. This is very useful when you remember that a bookmark is on page 3 for example. You can find it with just two clicks.

Expanded bookmarks

The new changes make Deskhot an even better tool for your bookmarking/archiving/organizing needs. I believe now it’s one step closer to the original vision of a central place to store all your information. The new notes feature which I’m already preparing will bring it even closer to that goal.

Yesterday I was traveling from Athens back to my hometown. I woke up in the middle of the night cause of the endless snorring of one of the guys that shared the cabin with me. As I walked dizzy in the hallway trying to get a grip as to where I am, (and most of all, which floor) I reached the stairs and saw two large numbers right between the two floors. I immediately realized that I was in deck 8 and headed down to grab a coffee. It’s was really great to notice that instead of the millionth boring advertisement, someone thought that huge deck indicators were the way to go.

In the end of the day great user experience is quite simple. All it takes is walking in your user’s shoes. The rest comes quite naturally.

MobileTest.me is a tool that allows you to see how your web site or app looks across different mobile devices and resolutions. You select a device, type the URL you want to test and it will show you the selected device displaying your website in the device’s original resolution. As you can see in the picture below all types of devices are covered, from the relatively small Samsung S3650 to the iPad.

Everytime you test a different website, the URL changes dynamicaly. This allows you to send the exact same test to someone just by sharing the URL. For example this link is a classic responsive design example by a list apart as seen on the Google Nexus one in landscape mode. Real life scenarios include showing completed work to clients or pointing out bugs and errors to collueagues.

Click on any of the images bellow to see the corresponding test.

One of the biggest drawbacks of a framework is the absence of built in theming functionality. CodeIgniter is no exception to that rule. Although there are quite a few libraries out there which aim to provide theming support, they don’t feel like being part of the framework. I was annoyed with having to use anything which looks like an ugly hack so I created a library which supports themes in CodeIgniter in a native style.

First of all let’s see how this baby works:

Using themes:

$this->load->theme('demo');
$this->load->view('home');

Loading CSS and Javascript files from within your views:

$this->load->css('/themes/demo/css/styles.css');
$this->load->js('/themes/demo/js/javascript.js');

Yes that was all. It is that simple.

Structure of your files

In the same path as your application folder create a theme folder and inside it a folder with the theme’s name. Also create a folder with the theme’s name inside views.

Inside the download you will see how the demo theme is structured.

/application/views/demo/...    (Your views go here)
/themes/demo/css/...           (CSS files)
/themes/demo/js/...            (Javascript files)
/themes/demo/theme.php         (The theme file itself)

Bonus: Caching control

Have you noticed that sometimes when you update your css or javascript files the changes don’t take effect until the browser empties it’s cache ? This library supports a suffix for all css and javascript files which allows you to control the caching of your files by the browser. Inside the config folder you will find a file mainframe.php. Make sure you autoload it and set a version for your files.

$config['cjsuf'] = '0.1';

When you change that version to say 0.2, browsers will be forced to reload them since they think it is a different file.

Inside the download there is a demo theme to get you started

Download it here

They say that one image is one thousand words and in this case it’s true. I won’t say much, the image speaks for itself. This is a screenshot from the most popular Greek site. I followed this link from twitter. The article I was looking for was buried deep and I had to scroll, and scroll and scroll.

As you can see the article takes up 5% of the page (counted in pixels). The rest 95% is ads, menus, ads, offers, ads and some ads.

Most people I know use a piece of paper or a word document to take quick notes on things to be done in a web project. For me nothing is more to the point than handwritten notes on a screenshot of your app.

When you keep your notes on a text file, you will eventually have to get back to your application to remember what “background of sidebar on tasks overview page” actually refers to. When you take your notes on a screenshot, the word “grey” right above the sidebar does the trick. Visual note taking saves you from the annoying back and forth between your notes and your application. It’s like a post it with the text “buy milk” on your fridge.

Of all the CEOs ever retired, Steve Jobs caused the greatest noise on the blogosphere and social media. A couple of days ago when his resignation was announced, my twitter timeline was literally full of Steve Jobs tweets. Only one out of about 20 tweets had a different subject. This effect caused a lot of people to express their annoyance on the overload of Steve Jobs news on online media.

One of the things I dislike on people, is impiety. So I’d like to take a couple of minutes to remind you who is Steve Jobs and why all this fuss is taking place.

• At the age of 21 and without having any money at all, he co-founded the company that popularized personal computing.
• He popularized the mouse. Did he not, our computers could be still running some weird text based OS like windows 2.0
• His company NeXT created NeXTSTEP which later became OSx. The worlds most popular UNIX desktop operating system and till now the only viable competitor of Microsoft Windows. If Jobs had not created NeXT, our computers could be still running Windows 95.
• He popularized the touch screen interface on mobile devices. Otherwise, instead of the mobile revolution we are witnessing these days, we could be still stuck with some lame Nokia running Symbian.
• He turned tablet computing from a theoretical and experimental concept to the next generation of computing with the revolution called iPad.
• At the moment of his resignation Apple INC was the most valuable company in the world.

Now forget what you just read and consider that the large majority of people younger than 40 is spending more than 12 hours a day in front of a computer screen, either at work or at home. And for the rest of the day most of us use frequently a smartphone with a touch screen.

So if we put technology aside for a moment and try to think in absolute terms, it’s no exageration to say that Steve Jobs shaped the way our generation will spend half of it’s entire life. He literally helped to turn the information age from an intellectual conversation topic, to a day to day life reality for everyone. If that’s not enough for a media flood, then I don’t know what is.

And before you call me a fanboy, I should point out that I’ve never owned an apple device in my entire life. Not even an iPod.

As I’m creating the mobile version of deskhot as well as some new accompanying apps I came across the need to have a single multisite codeigniter base where I can do all the development instead of multiple installations.

What I needed and what this post covers:

• Multiple web applications running from a single codeigniter instance.
• Each application must have it’s own subdomain. For example deskhot.com, m.deskhot.com, pilot.deskhot.com and so on.
• When a user logs in, in one application, he must be logged in, in all applications. So all applications must share the same session data.
• Only one codeigniter system folder so upgrades can done once for all applications/subdomains.
  But also having the flexibility to have a certain application using an older system folder if I see fit in the future.

So let’s get into action

1. Add the subdomains in your hosts file

All operating systems have a hosts file which helps map ip addresses to domains. Of course you should add all the subdomains in your hosts file. Here is the location of the hosts file for each operating system.

This is how my hosts file looks like

127.0.0.1        deskhot.d
127.0.0.1        m.deskhot.d
127.0.0.1        pilot.deskhot.d

2. Add a server alias in the apache config

The next step is configuring your virtual hosts so you can have apache know about your subdomains. In my system the vhosts file is located in /apache/conf/extra/httpd-vhosts.conf. This will be different in your system so just do a search and you’ll find it. There will be some default configuration for localhost already there.

Add the following in the end of the file:

<VirtualHost *:80>
    DocumentRoot "/path-to-your-document-root/your-domain.tld"
    ServerName domain.tld
    ServerAlias *.domain.tld
</VirtualHost>

For example my vhosts file looks like this (in a windows system)

<VirtualHost *:80>
    DocumentRoot "/Users/Username/www/DemianLabs/Deskhot.com"
    ServerName deskhot.d
    ServerAlias *.deskhot.d
</VirtualHost>

As you have guesses I access my development version through http://deskhot.d. You need to change the path and domain in the above lines to suit your own configuration.

3. Create your applications

Grab a fresh CodeIgniter and drop it in the folder where you would normaly do your single site development. Then make a copy of application folder for each of your subdomains. A tidy way to name all those application folders is to follow the patern application_subdomain. So for example my folders look like this:

/application                  // for the main site: deskhot.d
/application_m                // for m.deskhot.d
/application_pilot            // for pilot.deskhot.d
/system                       // the system folder
/user_guide                   // the user guide
/index.php
/license.txt

Once again change deskhot to your desired domain.

Next we need to tell CodeIgniter which application folder will be active depending on the url. To do that, open the index.php file and find the line containing $application_folder = ‘application’; and replace it with the following code:

switch ($_SERVER['HTTP_HOST']){
        case 'm.deskhot.d':
            $application_folder = 'application_m';
        break;

        case 'pilot.deskhot.d':
            $application_folder = 'application_pilot';
        break;

        default :
            $application_folder = 'application';
}

Once again change deskhot to your desired domain.

4. Configure all applications to share the same cookie domain

In each application folder find the file config/config.php and find the line $config[‘cookie_domain’]    = “”;. It’s around line 260.

Replace it with something like this depending on your domain:

$config['cookie_domain']    = ".deskhot.d";

Notice that this must be the same line in all config/config.php files in all application folders. This will ensure that all applications will read the same cookie and therefore use the same session data.

5. Specify a different system folder for each application (optional)

We can do the same trick we did in step 3 for the system folder as well. So for example we can have the following folders:

/system             // The latest CodeIgniter
/system_201         // Version 2.0.1
/system_202         // Version 2.0.2
.... and so on

To do that open index.php again and delete the line (around 65) $system_path = ‘system’;

Then change the code we used in step 3 to look like this:

switch ($_SERVER['HTTP_HOST']){
        case 'm.deskhot.d':
            $application_folder = 'application_m';
            $system_path = 'system';
        break;

        case 'pilot.deskhot.d':
            $application_folder = 'application_pilot';
            $system_path = 'system_201';
        break;

        default :
            $application_folder = 'application';
            $system_path = 'system';
 }

In this example all applications use the system folder except pilot, which is using system_201. This way you can upgrade CodeIgniter to a new version only for a specific application and leave the other ones using an older version. This can be handy when you want to do your post-upgrade testing in stages.

If you have any comments or questions I’d be glad to hear them on twitter or google+.
In a few days I’ll be writting a new post about how you can make all the applications share some common resources like helpers.

Sometimes things in the web are way simpler than we think they are. You don’t have to be a coding guru or an expert designer to understand why some products succeed and others fail. Most of the time it only takes a fast look at a single page to understand the future of a web product. So after a couple of weeks of using Google+ I can easily tell you why facebook is already dead.

I wake up on a random day and log into facebook. I notice that a girl I met once at a bar, posted a picture with her new haircut on her wall. As a natural consequence three single males and some of her female friends rushed to comment on the new haircut. Despite my initial shock I somehow find the guts to move my eyes further down facebook’s homepage. I find out that someone we went to school with, liked a love song video that a girl posted on her wall. To make things more spicy I get to see that some people made some new connections on facebook and finally that two of my friends attended an event, which I know for sure that they did not attend but rather just clicked “yes” on the invitation.

Having seen all of the above, I inevitably have to ask myself:

1. Who cares ?
2. How will the above information improve my life quality, social relations or at least my web browsing ?
3. Why did I even bother signing up for this crap ?

The right answers are:

1. People who go on the Internet just to pass their time consuming whatever content.
2. It won’t.
3. Because when it started getting popular everyone was doing it. Also because a better alternative did not exist at the time.

But to be fair, there are some people sharing valuable and interesting information on facebook. And there a few of my fiends that I indeed interact and catch up on chat from time to time. So it’s not a complete waste of time. However if there was a filter that would remove all the useless information from facebook the content would drop down to 10%. And this is the reason why facebook does not create such a filter. Facebook doesn’t aim to provide people with valuable information. Facebook simply wants to provide people with any information and keep them consuming it.

But to many people this is just pain. Having to search through a vast ocean of information I don’t care about, means that the effort is not worth it. Whoever takes this effort out of the way will have me hooked on social networking again. And indeed Google+ removed all the junk out of the way and allowed me to focus on what people are sharing. It also gave me an easy way to filter content with circles. Despite the fact that not all of my friends are on Google+, it takes just a week to understand why it’s so much pleasurable to use that I don’t care.

So will facebook be dead tomorrow ? I don’t think so. The vast majority of people will never switch to Google+. Most of us will “have” to rely on facebook for lots of our messaging with the ones that won’t switch. But still the value gained through Google+ and any new social networks that may emerge soon will make facebook less and less important as time passes. Remember when MySpace profiles were filled with band spam and silly backgrounds nobody ever liked ? In a few years facebook just like MySpace, will be just another social network. And to be precise, it will be the old fashioned social network that failed because everyone was on it, but it was more about the distractions than the content itself.

By the way, click the icon bellow to circle me on Google plus:

Update: I just found out an oatmeal comic strip which perfectly illustrates my opinion in a much funnier way:

When you work at a normal day to day job you face some competition. When you work at an office you compete against your co-workers. If everyone else is significantly faster or better than you, then you got yourself a problem. If you have a small shoe store things are even worse. Instead of competing with the ten people in your department, you compete with established businesses more experienced than you, multinationals with millions of dollars and of course all the other businesses of your size.

More than half of small businesses will not survive 4 years in the market. Considering the fact that entering the market requires a significant investment (and possibly a loan) you can easily say that it’s a pretty hostile environment. Becoming a great employee is something that takes guts and lots of hard work, but owning a business is quite a bigger challenge. However some people are driven by competition. What is a hostile environment to one, is a challenging field full of excitements and opportunities to another.

But what if you seek the most challenging work environment available? What if competing with your co-workers or other business owners is just not enough fun. The only place that can offer the maximum level of competition is the internet. When you own an internet based business you don’t just compete with the guy next door. You compete with the best in your field from all over the planet. For some people in their 30s (like me) who were born before the internet, it’s a little hard to conceive.

As we speak, my flagship product (a bookmark manager) is not only competing 50 other similar products but also google bookmarks and delicious. My best competitors are owned by two of the largest web companies with practically infinite resources. At any given moment they can throw in a room some developers far better than I can ever be, and some designers that can make me look like a kid playing with crayons to develop a product to compete with mine.

This level of competition is so high, that it ends up being the most brutal business environment I can think of. Yet for some strange reason, every time I think of it, I smile, make a cold coffee, and get right in my desk.

Google is retiring the blogger and picasa brands in favor of a new new branding strategy. From now on we’ll have “Google Blogs” and “Google Photos”. This is part of an effort to move the company’s direction towards more social oriented products and of course is related to the launch of Google+. A bold move for sure, that makes one wonder how can Google be so certain about it’s success

You see, unfortunately for the first time in human history we don’t know where we are going. And by that I mean that there is no certain path for the future of technology. Some things are certain, like the mobile supremacy in less than five years, but nobody can predict how people will be using the internet next year. Since the first dot com bubble back in 2000 we see every year new products that change the way we interact with computers and people and reshape the way businesses and people work. Game changing products like YouTube, Facebook and twitter pop out so fast that we can’t even tell if there will be demand for something in the next two years.

With all that uncertainty in the air, giants like Google are forced to make irrational decisions that will prove wrong sooner or later. The greater the size of a company, the greater the risk. And the greater the risk for the big players, the greater the opportunity for the small ones. The lesson here is that scanning market demands as fast as possible with the lower cost possible is not a luxury anymore.

The lessons we got from the early revolutionary startups like 37signals are now put into action in the total of the tech economy. Until the web app market of today becomes congested all we can do is develop and release as fast as possible and keep our eyes open for the new leaders.

A new, simpler, cleaner homepage is about to go online for deskhot. This is how it looks.

The aim of the new design is to give out “the message” quicker. Taking out the gradients allows the eye to focus more on the text. On top of that the picture with the kids is great. It gives a warm welcome to new visitors.

New mobile devices concepts emerge constantly.

My favorite is Project Rimino. It’s a concept based on a user interface inspired by print posters. It’s very good looking and user friendly. The people over at Umea Institute of Design have created a detailed page with their inspirations for the concept. Definitely worth looking at.

Another interesting concept is “A day made of glass” by Corning Glass. As you have guessed it’s about devices with glass interface.

It seems designers have understood that buttons on devices are no longer popular. Let’s hope that we’ll see elements of these concepts in production devices in the near future.

Well facebook is the very big thing on the internet right now. A huge number of users, a huge number of buzzwords. “Social engagement”, “Social interaction”, “Content curation” and so on. The big tech blogs always rush to inform us about the latest evolutions in the facebook platform. Even if those “evolutions” are something as silly as changing the text of the “like” button we *have* to be informed. We have to be alert, we have to keep up with whatever that is that facebook is up to. Well in case you got caught in that storm, let me clear up some things.

First and most important, not everyone is on facebook. From the total internet population only a part is on facebook. Less than a third. The other two thirds are only on “the rest of the internet”. Second: facebook doesn’t really have 600 million users. There are 600 million accounts registered but most of those people just log in a few times a month (or less). It’s true that for some people facebook is a daily need, but that doesn’t mean that all of it’s users are equally “addicted”. Third: even within the daily users, a huge part is just browsing holiday pictures and watching youtube videos. Nothing that would justify your attention.

Of course facebook and the tech blogs will always claim that something huge is going on. It’s the equivalent of news on TV. Big scary headlines, always something of huge importance, always something that justifies your time. But the world we live in is not like that. Things that justify our time happen rarely. At least not as often as the TV news claim they do. But if one day you open your TV and see the newscaster saying “another boring day in the news”, the first thing you would do is turn it off and carry on with what you were doing before. It’s the same with tech blogs. If one day you read on mashable that “the social web is not that important” what would you do? Carry on of course. And this is what mashable doesn’t want you to do.

The way I see it, facebook is the TV of our generation. Yes it’s popular, yes it’s important, and yes it’s a huge market. But while you should be aware of it, you should not obsess over it. I’m tired of listening to over-exaggerations like “Oh! now adwords is dead”. Have those people really considered that social networks could might as well be what ICQ and instant messengers were 10 years ago? They were popular, they were important but I’m glad I didn’t waste my time developing ICQ plugins.

Update:

A few days after writing this post I read on technorati that facebook sources are reporting traffic losses for the second month in a row. Read more on the original post.

Inspiration from:

(All these Brilliant People at) Facebook Make Me Sad

Why Facebook isn’t the best home for your public events

When you’re about to start a new project it’s the right time to move to something new. Sometimes it’s a new CSS or Javascript framework, sometimes it’s a new version control system, in my case it was moving from PHP/CodeIgniter to Ruby/Ruby on Rails.

I started out in my windows 7 laptop and came across a myriad of problems. The first time there was encoding problems. Google came to the rescue. Then I had to configure the system PATH variable a few times since there was no documentation to tell me what to configure. It worked out fine. After a lot of hours I reached the point where I have a working Rails 3 installation but no virtual hosts and of course no sub domains. Unfortunately Passenger doesn’t work on windows and it’s developers don’t plan a release anytime soon. So since I can’t find documentation on virtual hosts with ruby and I’m quite tired of googling I gave up on the idea.

Next stop was Ubuntu. The Rails version in the latest Ubuntu is still 2.x. There are no official repositories to give you a Rails 3 installation out of the box so the most reasonable option is RVM. To make a long story short, after a few hours of trying, it didn’t work. I’m quite well aware that other people have had more success than me but unfortunately for me things didn’t work out the way I wanted them to.

In PHP/apache world there are installers for windows that just work out of the box. In any Linux distribution things are even better. So since I don’t own a mac and I can’t spare any more time things are quite clear. The way I see it deployment for Rails is still lacking in options. Maybe Rails is a great way to build web applications and maybe it could save me time in the long run. But the way things are now, it just waists me time. So I’m sticking with CodeIgniter and I’ll revisit Rails next year when it will hopefully be more mature.

When you see your average page loading time going from 0.08 sec to 1.40 sec you know it’s time to do someting about it. I’ve run into this situation a few days ago and made some tweaks to my database. Now the average loading time is even lower at 0.05 sec. Here is how to do it.

1. Create indexes

Indexes are a way for mySQL to scan through tables very fast. The greater the number of rows, the greater the speed improvement. The mySQL manual claims that in a table with 1000 rows, an index could speed up data retrieval by 100 times.

Let’s see how it works in action. Let’s assume for example that we have a simple application that stores all books in a public library. We will need a books table and an authors table to store our data. Since an author may have written many books, and some books can have multiple authors (like many tech books) this is a many to many relationship. So we also need a books_authors table for relating books to authors. So our tables will be:

1. books

CREATE TABLE books (
  ID INT,
  title VARCHAR(255),
  ISBN VARCHAR(255),
  date_published (date)
)

2. books_authors

CREATE TABLE books_authors (
  ID INT,
  book_id INT,
  author_id INT
)

3. authors

CREATE TABLE authors (
  ID INT,
  name VARCHAR(255),
)

Primary keys are automatically indexed by mySQL so we will turn our attention to the books_authors table. The reason is that there will be a lot of work done by mySQL in that table, since it acts as the glue for the other two. Depending on the type of your select queries you may want to index other columns as well, such as the ISBN column if you want to search for books by their ISBN. However if you make the ISBN unique it will be also automatically indexed by mySQL. This is a great idea since ISBNs are unique anyway.

However, back to our example. Let’s see the code that will create the indexes.

CREATE INDEX book_id_index ON books_authors (book_id);
CREATE INDEX author_id ON books_authors (author_id);

As you may have guessed, the syntax goes like this.

CREATE INDEX index_name ON table (column);

2. Query cache

MySQL has the feature of caching select queries along with their results. To make things even better, MySQL serves the same cached results to different clients. A great advantage over classic server side HTML caching. Although query cache is on by default you have to configure the cache size in order for it to work.

To check out the size of the query cache connect to MySQL and issue the following command:

SHOW VARIABLES LIKE 'query_cache_size';

The size of query cache should depend on your server’s RAM. A nice practice is setting it to about half the memory size to allow resources for other services.

To set query cache size to 1MB just do:

SET GLOBAL query_cache_size = 1000000;

The first time a select query is executed it will run at normal speed. However consecutive queries will be returned almost instantly since they will be cached. This will speed up even the most simple applications since routine queries, like “select the 10 latest posts” will practically always be cached.

Conclusion:

These two simple tips can have an enormous impact on your web application’s performance. However you should be aware that database optimization is a huge topic and it’s worth digging deeper into it. Your next stop from here should be database normalization.

Reference:

How MySQL Uses Indexes
http://dev.mysql.com/doc/refman/5.0/en/mysql-indexes.html

When To Use Indexes In MySQL
http://www.howtoforge.com/when-to-use-indexes-in-mysql-databases

Query Cache Configuration
http://dev.mysql.com/doc/refman/5.1/en/query-cache-configuration.html

If you got comments/suggestions or want updates on new posts be sure to follow me on twitter.

In the last couple of days I’ve had the “problem” of having lots of people trying out deskhot. The nice part of my “problem” is that people, not only love the application and start using it right away, but they also move their bookmarks from competitor’s services. The bad part is that the database has gotten very large in a very short period of time.

I’ve spent the last two days conducting a series of experiments and benchmarks. I’m thinking of replacing apache with nginx and MySQL with a no-db solution like MongoDB. I’ve set up Debian Linux on a couple of computers, installed the software mentioned above and have been testing various configuration combinations since. While I was feeling lost and dizzy from hours in front of a green and black terminal, countless manual pages and forum posts, I remembered how computing was back in the 90’s when I was studying computer science.

Back then it was all about things like Windows NT, enterprise UNIX, Visual Studio and the like. If you wanted to even have a shot at creating a software business you needed money. And by money I mean lots of money. But the real cost was not hardware or software. It was the time and money you had to invest in specialized training from corporations like Microsoft and SUN. Back in 1998 you couldn’t just find a specialized technical answer on Google.

In about a decade the open source movement changed all that. Now everyone who is willing to devote a reasonable amount of time to it, can start a software business. The same enterprise level software available to Google and Facebook is available for free to everyone. Along with documentation and technical support. It’s the equivalent of every school basketball team on earth being able to be coached by Phil Jackson for free.

It’s becoming obvious that over the next twenty years we will experience radical changes in the way businesses are created and operated. The Goliaths of today will be smaller tomorrow and the Davids of today will have a better chance at the future. And the best part of this forthcoming renaissance is that we can all be a part of it.

If you’ve visited any tech blog over the last couple of years you must be convinced by now, that Apple is creating amazing products that enhance our creativity and productivity. And why is that ? Not only they are technologically superior but they got a certain different culture. An aura surrounding any Apple product. It’s the same culture embraced by the alternative and successful people. The artists, the rebels, the warriors, the crazy ones.

It sure sounds amazing. You get one of those Apple computers and you join the elite of the mankind. However did you notice something weird about this video? None of these people ever used a mac. In fact most of them lived before the era of personal computing. But what if they had been given the opportunity of having a mac ? Well that’s an easy guess!

Einstein would be too smart for it and would have installed Linux. Muhammad Ali would have repeatedly punched the monitor right away. Bob Dylan and John Lennon would probably be too busy scratching their guitars. Sorry if I spoiled the recipe for success but it really is not that easy.

As a web developer I have many colleagues who praise and love their macs. I don’t think that’s the right mentality for any professional. The moment you start caring about the kind of tools you use is the exact same moment when you give away your focus and passion to Apple’s marketing division for free. It’s not about the tools you fools, it’s about what you do with them.

It’s the right time to quote Hugh MacLeod who wrote in his “How to be creative” manifest:

A fancy tool just gives the second-rater one more pillar to hide behind.
Which is why there are so many second-rate art directors with state-of-the-art Macintosh
computers.
Which is why there are so many hack writers with state-of-the-art laptops.
Which is why there are so many crappy photographers with state-of-the-art digital cameras.
Which is why there are so many unremarkable painters with expensive studios in trendy
neighborhoods.
Hiding behind pillars, all of them.

Thousands of people use delicious. Until a few months ago I was an active daily user myself. But delicious is slow and I always thought it’s social layer was implemented poorly. I never felt I was interacting with people of similar interests on delicious. Yahoo never had a vision for delicious. They never cared to improve it so after a while I got tired.

I’m a web developer, and web bookmarking is essential to me. I needed a fast and easy way to store my bookmarks. And a personalized homepage so I can get faster to them. I thought “if nobody cares about the tools I need, I should create them myself”. So I created Deskhot to cover my own needs at first.

I showed it to a few friends and they started using it. It turned out I wasn’t the only one who needed a fast bookmarking tool. Now Deskhot is used by a small group of people who moved away from delicious and never looked back.

A few days ago Yahoo decided to finally sell delicious along with it’s users. They warned that everyone not willing to accept the new terms of service will not be able to use delicious in a few months. What they really said is: I don’t care if you got 5 years of bookmarks in there. You will take parts in some investor’s “social web” experiments like it or not.

If you, like me and lots of others, don’t like being sold, but just need a great tool for your bookmarking, you are welcome to join us. I have created an import tool that allows you to migrate your bookmarks from delicious in a few minutes along with their tags and privacy settings. Most pages in Deskhot load as fast as 0.08 seconds and real time search makes finding your bookmarks faster than ever.

Deskhot will always be free of charge. I will be offering premium accounts for people who desire specialized features like storing cached pages. But the main functionality of Deskhot will always be free of charge. By having premium accounts along with the free ones I will ensure that Deskhot will always be a profitable project that will never have a reason to be sold or shut down.

I’d like to hear your opinion about it. Feel free to talk to me on twitter anytime.

April has been a great month with new stuff and improvements for the existing ones. More new people started using Deskhot and the number of stored bookmarks is about to hit the first milestone. I have installed analytics on Deskhot in an effort to get more information on the way people use it and make future improvements based on real-world usage.  Besides these and lots of bug fixes for Deskhot here’s what new came out of the lab over the last month.

Import bookmarks on Deskhot

Deskhot can now import your bookmarks from your browser or delicious. This was one of the features planned for later but certain events made this top priority. An extensive post will go online in a few days with more details on this.

New favicon for Deskhot

When you have 10 or more tabs open and you need to get to your bookmarks right away, till now you had to scan the tab bar titles for deskhot. This was taking some time and was a bit annoying. I created a new favicon in plain blue and white. The new favicon is far simpler and now Deskhot is easy to spot among the other tabs.

New design for the lab

A new theme for the lab gave more focus on content and separated navigation completely. Now text is a bit bigger and the centered headlines make spotting the beginning of each article much easier. The text in the sidebar was rewritten and anything non-trivial was moved in the bottom of the page.

Releases: task management for people who create products

The problem with project management tools today is that they attempt to organize everything, making it easier for supervisors to have a global view of a production process. Releases puts the people who actually create a product in the center of attention. The single most important thing in producing any product is not work-hours or work units or anything else. It is the way the product is gonna be when it’s finally released.

By focusing on product releases you eliminate a lot of the “project management noise”. Sure, things like work-hours are nice to know but they remove your focus from what really matters. Releases purposely removes all that information so people who make the actual work can focus on what is top priority. It is currently in the early stages of development. Expect a private beta in a couple of months.

New posts

How Google wasted time and resources trying to copy Facebook and why you shouldn’t do it on
Forget the competition. Just use your products

How to create an invisible login form that you don’t have to look for on
The little details of the web

Why you shouldn’t waste your time on the iOS vs Android debate on
Native mobile applications VS the web

A few weeks ago Google launched the +1 button. Just in case you are not aware of it yet, it’s a small button which allows you to recommend a search result to your friends. It made the headline in a huge number of blogs around the web as the answer to Facebook’s like button. Unfortunately it’s already on it’s way to abandonment like buzz and Google wave.

Like most of the people I type a query, then the results show up, then I scan the results for a while and click on one of them. The surfing goes on and on until I need to perform another search. I don’t click the browser’s back button to return back to Google because I want to keep the page I’m currently viewing. Instead I perform the new search in a new tab.

Facebook’s like button is embedded in most websites and doesn’t interrupt my surfing. But in order to recommend a page with Google’s +1 I have to stop whatever I’m doing on the web and navigate a few pages back to the original search results page and then find the exact result I’ve clicked the first time. It’s a no-brainer that nobody wishes to interrupt his workflow to click a recommendation button.

It’s quite obvious to me that this is a pointless feature (at least in the way it’s implemented right now). There is no point for Google to have a recommendation button because people can’t recommend a webpage they haven’t visited yet. It’s a clear case of a company trying to imitate a successful feature from a competitor instead of really improving it’s own product. And the best way to know what your product is missing is to use it. Ever worse Google is trying to copy features from a social network to a search engine.

So if you are creating a product, just use it. Forget what the competition does and just add value. Not only there is no point in re-creating something that is already out there in the market but chances are that you are trying to fit yourself in someone else’s clothes.

Sometimes it’s the little details in life that make your day. The same goes for the web. Unfortunately the attention to detail vanishes sometimes in most big websites.

This is a screenshot from the playlist browser of YouTube in the “MyVideos” section of my account. On the left is the Firefox version and on the right it’s the Google Chrome version. The first annoyance is the scroll-bar. Why does this box have to be of a fixed size? Wouldn’t it be easier if I could just see all my playlists right away?

The second annoyance is that for some reason on Firefox YouTube is in English while in Google Chrome it’s in Greek. I happen to be a Greek guy living in Greece, so I guess it’s not that much of a trouble but I assume that YouTube will be in German if I visit Austria sometime in the future. This will be harder to deal with. Finally I can’t understand why in the English version I see my playlists sorted by date while in the Greek version they are sorted alphabetically.

Another example of a detail in the web is what I’ve done with Deskhot‘s login form. While initially it’s hidden so that new users can focus on the sign-up form right away, it’s not an annoyance for regular users. Normally your username and password are saved in the browser, so all you have to do is click the login button in the login form. When a user clicks on the login link the login form comes down. The login button is then placed in the same place where the login link was. So all you have to do is just click twice without moving your mouse.

There’s a lot of talk over the past year on the ongoing battle between iOS vs Android or Apple vs the world. Everyone has arguments for and against both sides and you’ll find it very easy to find a vast amount of blog posts on the issue. Apple’s consistent experience versus the freedom of open source. The Windows vs OSx debate reborn. I won’t try to persuade you to take one side or the other. I only want to take you back in time 16 years ago and remind you of a few things that a lot of us seem to forget these days.

Back in August of 1995 Microsoft was releasing Windows 95 and everyone was going crazy. It may sound funny right now but back then Windows 95 was the most successful operating system ever produced. Of course the Mac guys had their arguments as well and everyone was picking sides, much like now.

A few years later the Internet started to take off and other major players came up in the tech scene such as Yahoo and Google. Despite being a hostile and adventurous place at the time it kept growing and growing until our days, where everyone considers connectivity to the cyberspace a necessity. Most desktop software producers have gone out of business and only a few key players still remain. Even traditional desktop strongholds like gaming have been outgrown by web based companies such as Zynga.

Web based software had some huge advantages over native desktop solutions all the time. You don’t have to develop a separate version for each operating system, web software is cross-platform by default. You don’t have to care for the user’s hardware, the browser handles it. You don’t have to care about piracy, web software is never given to the user. Your users don’t have to be techies to use your software, it’s already installed on your server.

16 years later does it matter if Microsoft delivers a better operating system than Apple ? Who in his right mind would dare start a desktop software company today ? So real the question is: Why pick sides once more, why take place in the same pointless debate of one platform over the other ?

Of course you can be “cutting edge” and start developing for iOS or Android and make good money for a few years. Yet you must not forget then once the fad is over, the economics of scale that the web provides will prevail once more and native mobile applications will become a thing of the past just like desktop software did.

With it’s first public release scheduled for April 11 it’s time to show you what’s coming. Since Deskhot is the no-nonsense approach to web bookmarking, it’s introduction screen follows the same principle. And since we’ve taken anything unnecessary out of the equation it’s “Seriously fast”!

This is what our lab looks like. At any given time the window shades are down to ensure a night like experience (a basic element of quality code). The laptop on the left is connected to the monitor in the middle. A filling 24″ giving something more than a full HD resolution. The computer on the right serves as an emergency backup workstation and a hide-box for distractions like twitter.

Behind each monitor there is a lamp providing ambient light to prevent eye fatigue. The (plastic) plant and the vinyl covers on the wall add bits of home warmth to an otherwise quite cold environment.