devexp

Everybody who uses Photoshop knows the advantage of using actions and since a long time I was creating my own actions when for example trying to resize a lot of images at once. An action is nothing more than a series of commands you play back on a file.  Off course you only use and create these actions when you really need them but today I discovered that a lot of sites share their actions with the world. They make it possible to create, in one click; a 3dbox, page curls, 3d-collage effect, old preachment view etc.

For an example of this nice work you can visit deviantart, they have a nice collection of actions. (and other Photoshop and Illustrator utilities)

When you’re not into these actions but interested in Photoshop, believe me, actions are a really cool and timesaving thing. Learn it.

AjaxForm or ajaxSubmit

This plug-in provides numerous options you can call to manage your form before and after submission and all this in AJAX. More info on http://malsup.com/jquery/form/

Live Query

When an element is loaded into a page, you will not be able to use the events on this element. But when the Live Query is used, this magically appears to work… This is because the Live Query binds events of elements together every few milliseconds and does a DOM (Document Object Model) update. A really cool plug-in that creates the possibility for web developers to execute events without reloading the page every time an element is clicked. The only disadvantage of live query is the fact that it appears to slow down the execution time a bit, but when you don’t have to reload your page each time, I guess it’s worth the usage. More info on http://brandonaaron.net/docs/livequery/

JSON (JavaScript Object Notation)

In our case we are using JSON as response-type from an AJAX request. This is a sort of XML but a lot easier to read, especially when you work with a lot of data. For more information on JSON visit http://json.org/ or http://borkweb.com/story/the-case-for-json-what-is-it-and-why-use-it

I assumed until a couple of days ago that objects are way better then arrays, but let’s take a closer look into that.

As objects are an instance of a class you can always know what type of data is inserted in the object, when trying this in an array you quickly get in to problems, for example:

$testcase = array();
$testcase["Name"] = "testcase";
$testcase["value"] = 20;

When doing this in objects, you can split it up very easy like so:

$testcase = new testcaseObject();
$testcase->setName("testcase");
$testcase->setValue(20);

I guess you see my point….

When using huge amount of data though, arrays seem to have the upper hand in memory usage so that can count as an advantage.

When we create a query to get some data from a database that returns us multiple rows, the best thing you can do is make an array of objects. Like this:

while( statement ) {

$id = $row->categoryId;

// If category doesn't exist, we create him, else do nothing
if (!isset($category[$id])) {
$category[$id] = new testcaseCategory ();
$category[$id]->setId($id);
$category[$id]->setName($queryrow[categoryName]);
}

// Create testcaseObject
$testcase = new testcaseObject();
$testcase->setId($queryrow[id]);
$testcase->setValue($queryrow[name]);

// Add testcaseObject to testcaseCategory.
$category[$id]->addTestCaseObject($testcase);

}

Have fun with it.

It’s already clear that we are constantly working on applications for internet, and often those applications or websites use images. Over the years it became an evidence to use png images instead of jpeg or gif. How comes:

Jpeg covers 16.7 million colors and are without any doubt the best for photographic images, but when it comes to website images like buttons, icons, etc, they mostly suck. They are mostly 3 or 4 times the size (kb) of png images, and don’t even think about using shadows or transparency without a background.

Gif is great, without any doubt the most popular on the internet, but they only cover 256 colors, and that’s a huge pain in the ass. When a gradient is in images, you always get these awful lines in the image. The only advantage gif has, is animation.

So why use png?

• They are 25% more compressed then gif’s (don’t even mention jpeg here)
• Save, restore and resave will never degrade the quality of the image
• PNG is recommended by W3C since 1996 (already 12 years ago)

That already should be convincing, isn’t it…

Kenneth

Last year, my team and I, needed to create a new web application. We decided to make use of a well known PHP framework called Symfony. Not because some say this is the best framework, but because …

• It is Enterprise Ready
• Has many plug-ins available
• It is Actively developed
• (most important) A great community and documentation
• Integrated Unit Testing

Although symfony has a good implemented MVC architecture with a lot of helpful functions, it is still very easy to make some design mistakes, like the DRY (Do not Repeat Yourself) principle. Fabien Potencier, lead developer of symfony, recently refactored an existing web project which he wrote down in the symfony blog.

If you work with symfony, you really should read this refactoring session because I’m pretty sure somewhere in your code you made the same mistake(s).

Call the expert: A refactoring story (Part 1, Part 2, Part 3, Part 4, Part 5)

John Resig is writing a new book that will be released in the fall of 2008 and we are waiting impatiently. It’s called Secrets of the JavaScript Ninja and will be 300 pages full of information for the advanced JavaScript developer. As he says the book will cover cross-browser compatibility issues, I’m already looking forward to the release of it. I’m quite sure that my colleagues and I are not the only ones breaking our heads over that issue. So if you’re interested in designing your own library, or want to know more about them, this is a book for you.

Let’s hope the next book will be as helpful in my learning process as the last one he wrote (Pro JavaScript Techniques). More info can be found here.

The last couple of months, I’ve started reading some books about software and programming and I must say there are a few very interesting books out there. The most eye-catching books are those of Head First, they are not the most in to depth books on the market, but they make you think about the things you read.

Ordinary books just tell you theoretically how things are done, give you the rules how things are done, and on the end of the chapter give you a few exercises. Head First does it on a very unique way; they use a lot of images (admit it, they really draw the attention) and examples throughout the whole book. Not only reading is required from the user, but also thinking and finding solutions. By role-play they make complex issues look very easy and also possible to remember those things for longer than 2 days.

One of those books I’ve read is the Software development book, not really interesting for a full time developer or a beginner but a great reference for people who want to start creating software (that’s what we are trying to do at the moment). It’s amazing how much problems we have in real time where also described and solved in the book. A few examples are:

• Planning your time for development
• Follow up of your project
• Dealing with bugs

I guess you just can’t build software without dealing with those problems. A nice example to get your development planned is using planning poker, where all your theme members play a little poker game, but instead of using cards you’ll use hours or days you need to develop. A great way to talk about different topics and do analyzing at the same time. Those and many other problem solving stories can be found in this book. Hope you like it to.

When creating a more complex table the last few days, I noticed that it is very useful to create them with the different additional elements: tbody, thead, tfoot, col, th, td, etc…
In order to create a table in your webpage, it is not required to use these elements but when using css and trying to put a layout on a table, they are very handy.
For example you can, by using the display property, specify the function of all the elements:

• TABLE { display: table }
• TR { display: table-row }
• THEAD { display: table-header-group }
• TBODY { display: table-row-group }
• TFOOT { display: table-footer-group }
• COL { display: table-column }
• COLGROUP { display: table-column-group }
• TD, TH { display: table-cell }
• CAPTION { display: table-caption }

TFOOT will always be displayed as the bottom row of a table and most of the time contains totals.
THEAD contains the header information of a table.

Not really a very interesting post, but I just love it when using a bit more complex css on tables. It makes the tables easy to manage and they are tons more readable in code.

The thing me and my colleagues noticed is that tables aren’t very good for web design; they are created to display data and not a whole site or newsletter. A few years ago everybody started creating sites in tables because they were easy to set up, and looked great in a few hours. But the horrible time starts when you need to change layout after worth. In the most cases you’ll end up with a table that contains a table that contains another table. I guess you get the picture and that they are very difficult to manage. By experience we can tell that they are not very layout friendly and readability sucks.

We started using divs and with good css you can do anything.
Take a look at it, we recommend it.

The use of patterns in code being a good enhancement isn’t big news. But I discovered them recently and am very positive about it. It can, when understood, hugely increase your readability and is a nice problem solver for complicated and extendible coding.

Before creating a design pattern, you have to create it on paper. Think about what pattern you can use before implementing one. There are different patterns, every one of them has specific needs and specifications.

For example:

* Observer Pattern
* Decorator Pattern
* Factory Pattern
* Command Pattern
* etc…

In our case we needed to build a good nice 5-step wizard that is perfect to use simple pattern structure.

For us, it made the code very easy to understand and realy clean. We created one controller that gets the correct action when initialized , and it initializes the correct class (step) by itself.

$controller = new StepController();
$controller ->getInstance($action);

stepcontroller.class.php

public function getInstance($currentAction = null) {

$stepAction = null;

switch($currentAction) {
case "step1" :
$stepAction = new step1Action();
break;
case "step2" :
$stepAction = new step2Action();
break
}

return $stepAction->execute();
}

All the action classes have a execute function on their own and implement an interface that contains the execute function.

By using this kind of pattern it is very easy for us to add or remove steps in our little wizard. Every step has its own action and is really easy to maintain.
As you can see (and this is only one little example) the patterns have great advantages, the only challenge is to know what pattern to be used best in your specific situation.

Have fun with it.

What I like about Google software is its design simplicity. You cannot beat them at that point, after releasing Gmail a couple of years ago, Google maps, Google Calendar and Google Analytics, you just cannot deny the fact that they make cool and super simple (design wise) software. Now with the new Google Chrome they did it again. Creating a nice piece of software that has only the basic needs for everybody, of course today is a bit too early to judge the capacities of the new browser, but as our website and online applications run on it without any issues, I’m pleased.

Now let’s look at it a little more in detail.
This version has different nice features; one of them is the incognito window. There were different rumors that IE would have it in one of the next versions, but it’s cool that Chrome already has it. It allows users to navigate websites without leaving any personal traceable details. Cookies, browsing history etc won’t be saved to the computer. It will be a great feature for those who want to visit adult sites without letting the boss know about it, or for the kids to go around the porn blockers dad and mom installed on IE on their wannabee porn-free computers.

Just like Firefox, Chrome delivers a nice bug fixer (JavaScript console). Not a lot of differences from the Firefox firebug add-on here, only a more user-friendly layout in the resources tab. Of course, on this point my knowledge about Chrome isn’t that detailed, but it seems to be a very good help for developers.
The nicest feature of them all is, in my opinion, the task manager. You can easily see the memory, CPU and network usage for each tab you opened in the browser. Hopefully they expand the view of the memory usage even more, as they partly did in the ‘stats for nerds’ part.

The Doctype website already is a great step in the right direction for developers and designers. A good reference and managed by developers for developers, just like on Wikipedia this should keep the whole Doctype site up to date.

Let’s see where Google is heading with this browser in the future, for now I will stick to Firefox. But that is simply because I don’t like the fact that one monster company has all the power on the internet. Maybe my colleagues’ opinions are different; let’s see about that…

See you next time with more news…