The HARVEST V2 is going to be launched soon!

September 5th, 2010

The HARVEST Online Patisserie & Chocolaterie

The HARVEST, Premier Patisserie and Chocolaterie in Jakarta, with several outlets spread all over Jakarta, one in Surabaya and one in Bandung (with further expansion to other cities in the agenda), already had an old website since a few years back.

Upon meeting us, they realized that they needed something better to embrace the growing customer database, and to welcome the boom of Web 2.0.

Thus we started the development of the site about a month ago, and last week, the site went up! Well, it’s still in the soft-launching stage, but on the first day the traffic already increased by 200%, the online sales’ amount increased by 400%, and they have over 300 new members just in 3 days.

Considering that it is only the first week of the soft-opening – the Grand Launching will be after Lebaran/Eid Holiday – we are happy and optimistic that The HARVEST will become Jakarta’s leading patisserie on the internet – they’re already one of the best offline, and the new online shop will only make their services better.

Also, it goes up! When you type “cakes” on Google.co.id, The HARVEST is on 3rd position – on the first results page! First two ones are Wikipedia and Cakes.com – not their competitors anyway!

We are happy for The HARVEST and looking forward to a long-term cooperation with them in the future.

Inside CSS3 – Rounded Corners made easy

September 2nd, 2010

Having developed website for almost 10 years, I have known a lot of evolutions in terms of web design. A few years back, one of the biggest frustrations was appearing when you had to make rounded corners to some elements of your website. In 2000, a time where all websites were made using the old-school <table> tag, rounded corners were done using cells. But now, with CSS3, doing rounded corners is a piece of cake. To see the evolution of HTML rounded corners, let’s compare three distinct ways of generating rounded corners.

Solution 1 – Using Table + Images

Below is an example of box using table. The corners are actually made using four 10px*10px images (bl_s1.gif, br_s1.gif, tl_s1.gif, tr_s1.gif)

<table style="background:#9c0" width="400" height="60" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="10" width="10"><img width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" /></td>
    <td></td>
    <td height="10" width="10"><img width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" /></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" >Rounded Corners using Table + Images</td>
    <td height="10" width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="10" width="10"><img width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" /></td>
    <td></td>
    <td height="10" width="10"><img width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" /></td>
  </tr>
</table>

Result :

Top Left Top Right
Rounded Corners using Table + Images
Bottom Left Bottom Right

Solution 2 – Using Div + Images (relative / absolute CSS positioning)

This second solution is more recent, but still fastidious. It uses 1 <div> tag for the content (it has relative position), and 4 <img> tags for the corners (they have absolute position). This solution works well on modern browsers, but can produces unexpected results on some older ones. To accomplish that, we need to have to put the following css code in the <head> of the document :

<style type="text/css">
#box{width:380px; height:60px; padding:10px; position:relative}
#box img{position:absolute}
img#tl{left:0; top:0}
img#tr{right:0; top:0}
img#bl{left:0; bottom:0}
img#br{right:0; bottom:0}
</style>

Then display the box by putting the following code this time in the <body> of the document :

<div id="box"">
  <img id="tl" width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" />
  <img id="tr" width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" />
  <img id="bl" width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" />
  <img id="br" width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" />
 Rounded Corners using Div + Images
</div>

Result :

Top LeftTop RightBottom LeftBottom RightRounded Corners using Div + Images

Solution 3 – Using CSS3 border-radius property

Extremely simple to implement and not using image, this solution will change your life – really.
To make a nice rounded corner box, put the code below in the head of your document :

<style type="text/css">
#box{
width:380px;
background:#9c0;
height:60px;
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#9c0
}
</style>

Then, in the <body> of your document :

<div id="box"">
  Rounded Corners using CSS3 border-radius property
</div>

Result :

Rounded Corners using CSS3 border-radius property

As you can see, this solution just makes everything easier. The only annoying thing is that in order to have the border radius displayed on all modern browsers, you must set the border-radius property three times, using border-radius, -moz-border-radius, and -webkit-border-radius. Old browsers will just have the box displayed withut any rounded corners.

Fancy E-mail Signatures

August 23rd, 2010

@ Idebaik, we use Google Apps mail for a long time already. It’s simple, fast, and very easy to maintain, especially when you compare it to third-party softwares, such as RoundCube or Horde, for example. And, as long as you need less than 50 email accounts, free!

But Google Apps mail got a small weakness : it’s impossibility to handle HTML signatures. For people who want a simple signature (name – email – phone), that’s alright. But when you want to make your signature attractive (using colors and/or images), Google just do not support this feature – yet -. And for us, signature is something important. In a few lines a signature must not only contain the basic information about yourself and your company, but also a bit more than that.

That’s why we had to find a way to implement these HTML signatures in our messages. Then we found WiseStamp. WiseStamp is a Firefox extension allowing to… that’s it, embed HTML signature automatically to your Google Mail messages.

With a bit of HTML knowlegde, you can be able to create very good-looking signatures. Below are two examples of signatures generated with WiseStamp (each employee of idebaik got his own color). Easy to read and containing all the essential information about each employee and our company (Facebook + Twitter included), these signatures are there to show that an e-mail signature is not only a way to say who you are, but also to express the image of your company to your recipients.

Wisestamp is available for Firefox, Flock, Chrome, Thunderbird and Safari (beta). Click here to visit WiseStamp website.

Playing with YouTube API*

August 18th, 2010

* API : Application programming Interface


Two years ago, I had to do a video section for our in-house website, indonesiaclubbing.com. We already had our own YouTube channel. So everytime I was uploading a video on YouTube, I had to add it once again on indonesiaclubbing database (using a home-made admin panel) so users would be able to view videos directly from our website, without having to visit our YouTube channel.

Adding the info for a video on our website was taking us a few minutes. But two years and 200+ videos later, you can imagine that we have to find a way to avoid this “double-add” process. Time is money.

When I’m not at the office, I’m always looking for new ways to enhance our websites, learn new things, so they can be used by our clients. So let’s consider indonesiaclubbing as the perfect site to test new things in terms of programming.

My idea was simple : using the YouTube API to grab content of my channel directly from YouTube, and display it on my website, so I would not have to care about adding my videos to my own database too everytime I upload a video on YouTube.

YouTube API is “simple”. You call a YouTube URL with some parameters, YouTube send you back a list of videos matching your criterias. Then you have to “transform” the data received in good-looking HTML.

For my tests, I did not want to use PHP, since that’s a language I use every day, I wanted to make the work a bit more challenging by using something I barely use : JSON.  JSON is not that complicated in fact. It’s just javascript made for data exchange (a bit like PHP serialize() function). To get YouTube feed, I use jQuery $.ajax() function. To display the video (play it), I use swfobjects, a powerful Flash embedding library.

By default, I load the 12 last videos from my channel, and automatically play the latest one. If you click a YouTube thumb, the page will scroll automatically to the Flash YouTube player (if needed) and automatically play the video corresponding to the clicked thumb (scroll using excellent scrollTo jQuery plug-in).

The page navigation is generated only when the page is initialized. Clicking a page will create a nice fade-in / fade-out effect during the loading of the videos corresponding to the clicked page.

There are still improvements to do (I want to get rid of the youtube control bar and add my own external controls for the video, and also display more information for the video, like comments, rating, description, and so on).

Want to see the results ?

check http://www.indoclubbing.tv !

Without jQuery and swfobjects (loaded directly from Google servers), my overall code is 12Kb (including css + html). Considering that everything was done in just an afternoon, I am pretty happy of the results.

jQuery – What for ?

August 8th, 2010

Created in 2006, jQuery is a Javascript library that allow you to add a whole bunch of effects and animations to your website, giving it a livelier aspect without using Flash.

At Idebaik, when we were about to launch our own corporate website, almost a year already now, we sought to implement jQuery – but naturally.

And in the months that follow, jQuery gradually becomes something we always advise, when our clients ask for “a dynamic website with moving things”, still sans-Flash. Animated menu bars, fading effects, auto-complete search boxes – we can proudly say that we are, undoubtedly, one of the rare web companies in Indonesia who master this framework at its best.

Among the numerous functions used under jQuery library, we cite an example, the famous animate(), which, as you must’ve already guessed by its name, is a magic function able to animate just any element of a web page, giving it instant, arranged modifications of style (height, width and even background change, when combined with the jQuery UI plugin).

jQuery has become an indomitable element for the actual, up-to-date sites (The fact states that jQuery is currently used on 31% of the planet’s 10,000 most visited websites, including everyone’s favorite pastime-time-wasting social networking titan – the Facebook).

Although, the thing is you need to make use of jQuery wisely, not idly (and, in most cases, ignorantly) doing the erroneous practice of cut-copy-paste from a source you get through internet, without comprehending the library in order to be fully able to exploit the system.

At Idebaik, we create our own jQuery effects, giving you a guarantee that the site you trust us to do will not have such a-dime-a-dozen effects – it will have better, rarer effects, personalized to match your needs.

Obviously, to do that, one needs an excellent level of Javascript skills to completely master all the jQuery subtleties.

The advantage of using jQuery is also based, finally, on the fact that the increasing popularity of this technology gives it a constant evolution, and unlike other Javascript frameworks, we can be sure that the development of jQuery is not going to stop anywhere soon.

By reading this article, we would like to welcome you to the wonderful world of jQuery.

Nevertheless, the one and only little glitch of jQuery is that it is uncompatible with certain browsers from the past, for example Internet Explorer (IE) 5.5 (which hails from the Middle Age of Computers, about 10 years ago). Some people also say that jQuery is “heavy”, but to this I respond that jQuery, just like any other programming language or framework, must be learnt and mastered and a true web company will not rely on “copy-paste web developers” (Specimens of these species abound in Indonesia) – yes, jQuery will indeed be “heavy” if we don’t try to understand how it works, if we don’t care to find out how it works, if we don’t know how to create our own functions, if we don’t know how to optimize it for our own website.

But at Idebaik, we do understand. At our company, you’re in good hands.

We’ll be back in the upcoming weeks on the jQuery subject, upon the launching of several projects, currently in the final phase, all of them most certainly using  jQuery in all its splendor and glory. Stay tuned!

We love both Mac and PC

August 6th, 2010

In the eternal battle between Mac and PC ensued by creative houses all over the world, we pick no-one – we side with both.

What? How is that? You’re either a Mac person or a PC person.

Personally, it’s true. But professionally, well, it’s simple. We use both. We love both. We have a team that combines both technologies. We think that PC and Mac each has its own special features, and you simply need them all.

But we stay conventional, though: our designers both work on Mac (a Macbook Pro and a beautiful new 21.5 inch desktop iMac – the 27 inch coming soon, hopefully!) and they love using it, for the pixel-wise precision and the quality of the image; and our developers as well as the rest of the team members use Windows on various PC types and brands due to the practicality.

And the results? Combined results are the best – we test our sites in both platforms, using various popular browsers.

More electronic troop members coming soon…

Idebaik is growing!

July 31st, 2010

July was a really good month for Idebaik, in all aspects. But like any company, at some point, we must be realistic and we have to admit that we need more people to face the never-ending growth of our business.

That’s why we decided to look for new people to join our team. And if you read our site carefully – I know you did ! -, you will know that @ Idebaik, an employee is more than just an employee. S/He is a part of Idebaik family !

So, starting from next week, three new employees will be joining our company. 2 Account Executives (Rizky & Yonash) and one intern web developer, Brieuc (I challenge you to speel his name perfectly), from France. All aged of 22 years old, they will help us answering the growing demand from our clients.

We will introduce you to them more in details soon !

Late-Night at the Office

July 27th, 2010

Yeah well, life is challenging. Work is, too! We’ve been getting SO MANY projects lately that we gotta stay later at work.

It’s been 3 days in a row that the whole office stays later at work, to meet the deadlines.  We worked on Sunday (yes we do) and Monday until 11 PM and today, Tuesday, it’s ten minutes before 11 PM and nobody shows the sign they’re ready to go.

You know, I so would like to complain, but I’m not and I won’t. Other people strive to get even the lousiest of projects and we are submerged with quality projects – not only fun in the financial matter but also fun to work on.

But I think we will invest more in eye cream domain – hello puffy eyes, hello eye-bags, hello dark circles! (And helllloooo, nice projects, potential clients!)

Below are some shots of this special night.

Maurice is checking Tepo’s latest jobs…

… and is obviously not satisfied!

For Uri, indonesiaclubbing deserves not less than 2 computers!

Surya loves his job when girls are involved in his layouts

Riza working on Berlian Entertainment website

Reyhan “The Legend” is a geek. His jokes always start with <?php

Exhausting day for Maurice. He deserves some sleep, definitely!

A Pet at the Office: Maurice the Miniature Pinscher

July 10th, 2010

Having a pet in the office is a way to relax and have a little laugh every now and then.

Our own official mascot is a 4-year-old king of the toys: Maurice Pin, the Miniature Pinscher.

Maurice is tiny and cute (3.2 kilograms and merely 30 centimeters long, 25 centimeters high) but he has a strong hunter character and significant will.  He thinks that he is big – he never realizes that he is indeed that small.  Maurice is always happy to go to the office every morning, and greets everyone who comes in with a bark.

Naughty and lively but can be very lazy, Maurice spends half of his work hours running around the office, raising a quizzical eye and cries begging for bits of snacks to everyone who currently holds something edible (Food is Maurice’s main interest in life – he is always hungry and can smell anything good to munch from a distance) and the rest of the day he sleeps somewhere comfy – either on a chair or on the laps of Jon or Stefany, his favorite babysitters.

And now when Maurice is absent for some reasons (regular visit to the vet, grooming in the animals’ beauty parlor, sick leave or holiday in the pet hotel), everyone at the office asks where he is.

Web Design Business in Indonesia

June 17th, 2010

Actually, web “design” is a term we don’t like.

We prefer saying web “creation” or web “development” – why? Because design is only one part of the process.

When a client commissions us to do a website, we start the project by doing some researches. See how their counterparts or competitors do it, what their target wants, what we think could be good to put into the structure, submit the core ideas and sit together to define the design direction.

And then, comes the designing phase. This is the time all the elements are put together in the big picture, where all the color codes and layouts are decided.

And the biggest part is yet to come…the basic HTML programming and the hard coding, including layout implementation before finally filling the contents and submitting website for beta test to client, just prior to the launch.

So, that’s why we say the term web is often mistakenly hooked up with the word “design” for a process that is actually called web creation.