Zenning!

Designing websites with a grid system like 960.gs has been made easier with the availability of two sets of Photoshop actions, which come in really handy to create a new Photoshop document based on the 960 grid system.

These actions will create a Photoshop document ideal for laying websites out in 24, 16, 12, 10, 8, 6 and 4 columns.

960 Grid Actions for Photoshop

These set of actions by Johnny Nines supports 4, 6, 8, 10 and 12 column grids.

Key Features of the Action:

• Creates a new Photoshop document from scratch.
• Creates guides to determine grid columns and gutters with transparent layer to show gutter space
• Creates Layer Groups for Header, Content, Footer and Backgrounds making it easier to lay your sites out in a orderly manner.
• Compatible with Photoshop CS3 and higher
• Works on Mac and PC

Download from here

960 Grid Actions

These set of actions by Ben Shoults supports 12, 16 and 24 column grids.

Key Features of the Action:

• Creates a new Photoshop document from scratch.
• Creates guides to determine grid columns and gutters
• Works on Mac and PC

Download from here

I have been more of a programmer in the past couple of years with my focus on open source languages (PHP, Ruby). I have been writing code and leading programming teams. In fact, my very first job after graduation was as a Software Engineer in Visual Basic.

But there’s a creative side to me as well, which I haven’t let gather dust in all these years that I have been a programmer. I kept my creative side active – be it with photography or be it by studying music, or be it by practicing and improving upon Photoshop skills; creativity never left me. In fact, even in programming I make sure that the code I write is ‘beautiful’ (which doesn’t mean that one has to do anything extra – just proper indentation, meaningful variables, proper white-spaces, following conventions, etc, makes the code beautiful).

Although I have always been able to design in Photoshop, but I have never been able to make an HTML out of that design! This has remained a challenge for me since I’m very much of a hand coder (I loved Allaire’s HomeSite – R.I.P. – more than I would ever love the bloatware called Dreamweaver)!

I always thought that slicing a design and generating HTML/CSS out of it would be easy (or should be). I have tried Photoshop’s slicing and exporting tools to generate HTML, but it leaves a lot to be desired. For example, when saving as DIV-based HTML, Photoshop makes everything absolute positioned (is it bad? I just feel that it’s bad, but I’m not sure)!

But finally, I have learned and applied the skill of creating HTML out of a Photoshop design, and that too a DIV-and-CSS-based-design. All hand-coded, mind you.

So now I’m having fun all over again with designing, as now I can bring my designs out of Photoshop and into the real world, for everyone to see. I already loved playing with HTML and CSS (and soon JavaScript/Jquery too hopefully), and with my new favorite text editor, E – TextEditor (with Notepad++ as a reliable side-kick), I’m writing code that is beautiful; as Wordpress’ dictum goes: “Code is Poetry”!

The first of my designs, which I have successfully exported out of Photoshop and on to the web, will be revealed in my next post. So stay tuned.

Just came across a very interesting fact about ENIAC (the first general-purpose electronic computer): The ENIAC was programmed by six people … and all of them were women! Yes, you heard that right. All women.

The ENIAC, the world’s first computer, was invented to calculate ballistics trajectories during World War II – a task that until then had been done by hand by a group of 80 female mathematicians. The six women who were chosen to make the ENIAC work toiled six-day weeks during the war, inventing the field of programming as they worked.

Read More http://www.wired.com/culture/lifestyle/news/1997/05/3711#ixzz0mTilaWzt

Just had a look at this awesome prototype from Microsoft. I am loving what Microsoft is up to these days, researching and developing some great new UIs and interaction mechanisms. Have a look at this Microsoft Manual Deskterity prototype video and you’d love it too!

Pen and touch computing have long-thought to be mutually exclusive methods of human-computer interaction, but as the Microsoft Research project “Manual Deskterity” shows, the two intuitively combined makes for a much powerful input method than each of them might ever be on their own.

If you’re short on time, the real soul of the demo – a custom application for the Microsoft Surface with a special infrared pen – starts at the 1 minute mark and shows off capabilities that either wouldn’t be practical or possible at all by either pen or touch alone. Bear in mind however this is a research project so the application is quite limited in scope.

– I Started Something

I just hope it makes it out of their research labs and into our hands soon.

What do you do if the application used to kill other applications itself becomes the problem? I’m talking about the Windows “Task Manager”; it always comes in handy when an application is acting up. But today, the Task Manager itself became the problem and I needed something to shut-it-down (or resort to restarting my laptop)!

So I thought there must be a way to achieve the same from the command-line (and thus, be able to kill Task Manager), and certainly there was – the command taskkill – as I found here. You need to know the rogue program’s name, for example, if Notepad was acting up, you would open the command (DOS) prompt (Start –> Run –> cmd) and enter the following:

taskkill /IM notepad.exe

In Task Manager’s case, I entered:

taskkill /IM taskmgr.exe

Congrats! You are now a more lethal Windows ninja! *haeeyyaaa*

Here’s a graphical look, by Henrik Kniberg, at how a small Kanban system works, making it easy and simple to understand how Kanban – a concept related to lean and just-in-time (JIT) – creates value in software development:

Source: One day in Kanban land

After having tried many IDEs for PHP development, including Eclipse and Komodo Edit, I have found myself the most comfortable and productive with the excellent NetBeans IDE.

You can start building PHP applications with NetBeans right out-of-the-box by simply downloading NetBeans for PHP (version 6.8 is the latest as of this post). Debugging with it requires an additional download of Xdebug.

Here is a quick and step-by-step guide to quickly start developing and debugging your PHP application projects with NetBeans + Xdebug:

1. Download and install NetBeans IDE for PHP.

2. Download Xdebug (it’s a small DLL library file).

Advice: Among the plethora of download links available on that page, let me tell you that you generally wouldn’t want the ‘non-thread-safe’ version, so ignore that; go for the latest non-beta version. I downloaded 5.2 VC6 (32 bit) of Xdebug 2.0.5.

3. Next you need to make changes to php.ini found in apache\bin folder (the location of your apache folder may vary depending on your installation, look for it).

Find “[Zend]” section in your php.ini file, which should look like the following:

   1: [Zend]

   2: zend_extension_ts = "E:\Servers\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"

   3: zend_extension_manager.optimizer_ts = "E:\Servers\xampp\php\zendOptimizer\lib\Optimizer"

   4: zend_optimizer.enable_loader = 0

   5: zend_optimizer.optimization_level=15

   6: ;zend_optimizer.license_path =

   7: ; Local Variables:

   8: ; tab-width: 4

   9: ; End:

Xdebug is not compatible with Zend Optimizer, so comment out lines 2 to 5 (by prefixing the line with a semi-colon), and add the following lines under [Zend] section heading:

   1: [Zend]

   2: zend_extension_ts="E:\Servers\php_xdebug\php_xdebug-2.0.5-5.2.dll"

   3: xdebug.remote_enable=on

   4: xdebug.remote_handler=dbgp

   5: xdebug.remote_host=127.0.0.1

   6: xdebug.remote_port=9000

Note: Remember to change the path and filename to match your Xdebug path and version.

4. Restart Apache (if using XAMPP: Open the XAMPP Control Panel and first stop, then start Apache).

5. To verify if Xdebug is configured properly for debugging, create a php file containing this one line:

   1: <?php echo phpinfo() ?>

Save it in your htdocs folder [phpinfo.php], and open it in your browser [http://localhost/phpinfo.php]. If Xdebug is loaded successfully, you should see something like this:

That is it! Now you are ready to debug your applications with Xdebug using NetBeans IDE. Simply open your PHP project in NetBeans and press Ctrl + F5 or click in the toolbar.

A detailed guide on configuring Xdebug with NetBeans can be found on this wiki: http://wiki.netbeans.org/HowToConfigureXDebug.

Happy coding!

Late last year (November 2009), the CollabNet sponsored open source version control system Subversion (SVN) was submitted to the Apache Incubator, in order to become part of the Apache Software Foundation. A press release was issued to this effect.

Subversion is now officially called Apache Subversion and has a new home address at http://subversion.apache.org/.

The old homepage of Subversion is showing the following message:

It’s an exciting development for me, as I have recently become more interested in the whole Open Source lifecycle: the community, the forking, the contributions, and the learning. This submission, and consequently the acceptance, of Subversion into the folds of Apache Software Foundation is an important case in point of how open source softwares (will) continue to live and flourish.

Another feather in the cap of Apache Software Foundation in particular, and open source in general. Keep going!

Related reading elsewhere:

Subversion moving to the Apache Software Foundation

I liked the way I was able to create additional toolbars from the taskbar in Windows XP, and then detach and move them around to dock to any side of the desktop screen. Unfortunately, this is not possible in Windows Vista, or so I experienced at first. The ability to detach a toolbar from the taskbar is no longer there, but there is another way now.

This nifty little feature of having a toolbar dock to any of the edges of your desktop screen is still there; only the mechanism to achieve this has changed.

The new technique is nicely described here: Create a New Vista Toolbar – Magic Trick. It’s quite simple: all you have to do is drag a folder to the edge of the screen and it will dock! Yes, that is all.

Here are a few additional links to take maximum advantage from this sweet little feature:

10 things you’ll miss when you upgrade to Vista (and how to get some of them back) – #1 tells you how to get the Quick Launch bar off of the main taskbar and dock it vertically to one side of the screen.

Trim Windows Vista’s Bloated Window Borders – You might find the new docked toolbars a bit ugly because of that thick translucent border around them (with Aero in Windows Vista). Follow this link and put those borders on a diet for good!

The Vista taskbar: it’s worse than XP’s – Although this rant by Dan Warne is no more relevant, since the solution has been discovered (and mentioned in the comments), but it’s still fun to read this old blog post on this at-that-time-presumed missing feature (of detachable-n-dockable toolbars) from Vista.

How to Create a Toolbar in Vista – Once again, the link to the article containing the solution (magic trick) mentioned above.