Illustrations delay development

I am currently doing some illustrations for a friend of mine, which takes up my spare time aside taking care of Cornelia and collecting treasures in Uncharted (well, I cannot code ALL the time!)

There are 30 illustrations in total, of which I have completed about half. After that, the keyboard will rattle once again!

NDepend

I have just received a pro license of NDepend and will use it in my .NET Extensions project (although it is far from complex) to get the hang of how to use it.

I will document how my work with this tool proceeds, so more info will be up shortly.

New version of .NET Extensions is out

I have just uploaded a new version of the .NET Extensions solution. The new version (1.1) contains a bunch of new functions as well as stubs for two new demo projects, which can be used to browse the functionality of the extension solution.

View the new version here.

Doxygen – a brief tutorialt

I am currently using Doxygen to generate simple web-based documentation from my documented .NET Extensions source code. Doxygen also supports extracting the documentation in various other formats (HTML, LaTex, .man, XML etc.), but I chose to keep it simple.

To extract a simple HTML site from your documentation, just follow these simple steps:

1. Download Doxygen and install it.
2. Run the Doxygen wizard, which opens a small window wit the Wizard tab selected:
3. Under the Project section, define these properties:
   • Project name (e.g. “.NET Extensions”)
   • Project version or id (e.g. “1.0.0.0″)
   • Source code directory (your source code root)
   • Make sure to check the “Scan recursively” check box
   • Destination dictionary (where you want the documentation to be extracted)
4. Under the Mode section, select All entities and Optimize for Java or C#
   
5. Under the Output section, select the various output formats you want Doxygen to create.
6. Since you selected All entities, you may believe that all entities will be extracted. Well, sadly, this is not true. For instance, Doxygen will not extract documentation for static classes, unless you explicitly tell it to.
7. So, select the Expert tab (wow, an expert already, huh?) and make sure that the EXTRACT_STATIC checkbox is checked. If not, you will find that static parts of your application are left out of the documentation. You can also check other boxes to configure Doxygen in detail.
8. Finally, you are more than ready to select the Run tab and click the “Run Doxygen” button. This will start Doxygen, which will place the documentation in your specified destination folder.

If you think that the documentation is plain and “boring” in HTML format, you can skin it with CSS. I will cover that part in another blog entry.

DIV-based grid with clean CSS

As a web developer, you sometimes feel the need to use the good-ol’ TABLE elements, since it is so DAMN hard to achieve some things with DIV elements. Although I think TABLE elements are OK if used sparesly, I have been looking for a nice DIV-based alternative for column-based designs.

A few days ago, my collegues Tomas Danemar and Mikael Brander showed me a nice-as-hell solution for building grids with DIV elements. Still, the solution they had found used a lot of class names (like naming each cell to “size1of3″, “size2of3″ etc. so I started experimenting on how to clean it up.

This solution still has the advantage that you just have to do the following:

1. Add the class name “grid” to the root element of the grid structure.
2. Add the class name “row” to each row elements within the “grid”.
3. Add the class name “one”, “two”, “three” etc. (the amount of cells) to each row DIV to specify how many cells it contains.
4. Add the class name “cell” to each cell DIV within each row.
5. Add the class name “last” to the last row and the last cell of each row.

I first considered not using the “row” and “cell” class names, but believe that they give some encapsulation of the element behavior within the grid.

I will try to improve this design even more in the future, but for now this works very well. I will also make it possible to apply column spans.

CSS

The CSS is really simple:

/* Basic grid settings (you should not have to change these) ************ */

/* Basic grid settings (you should not have to change these) ************ */

.grid {}
.grid .row {}
.grid .row .cell { float:left; _zoom:1; }

.grid .row.one .cell { float:none; }
.grid .row.two .cell { width:50%; }
.grid .row.three .cell { width:33.2%; }
.grid .row.four .cell { width:25%; }
.grid .row.five .cell { width:20%; }
.grid .row.six .cell { width:16.6%; }
.grid .row.seven .cell { width:14.2%; }
.grid .row.eight .cell { width:12.5%; }
.grid .row.nine .cell { width:11.1%; }
.grid .row.ten .cell { width:10%; }

.grid .row, .grid .row .cell.last { overflow: hidden; _overflow:visible; _zoom:1; }
.grid .row .cell.last { float:none; _position:relative; width:auto; }
/* Style your various grids below **************** */

.grid.border .row { border-top: solid 1px black; }
.grid.border .row.last { border-bottom: solid 1px black; }
.grid.border .row .cell { border: none; border-left: solid 1px black; }
.grid.border .row .cell.last, .grid.border .row.one .cell { border-right: solid 1px black; }

HTML example

The following HTML code will create a nice grid with ten rows and an increasing cell amount for each row. Note that the grid uses the “border” class, which adds borders to the grid.

<div class="grid border">
<div class="row one">
<div class="cell">1</div>
</div>
<div class="row two">
<div class="cell">1</div>
<div class="cell last">2</div>
</div>
<div class="row three">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell last">3</div>
</div>
<div class="row four">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell last">4</div>
</div>
<div class="row five">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell last">5</div>
</div>
<div class="row six">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell last">6</div>
</div>
<div class="row seven">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell last">7</div>
</div>
<div class="row eight">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell last">8</div>
</div>
<div class="row nine">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell last">9</div>
</div>
<div class="row ten last">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell last">10</div>
</div>
</div>


Update 2009-12-11: Removed border: none from the last border class.

Testing ScribeFire

So, here I am, testing the ScribeFire plugin for Firefox. Let’s see how this post turns out.

Header 1

Header 2

Bold text
Italic text
Underlined text
Striked-out text
Larger text
Smaller text
Red text
« (special character)
Link

Image from my computer

Image already on the web



MoE – Motion Capture Biped Demo

Code block (I will add CSS to skin these later on)

Quote

• Unordered list
• Unordered list

1. Ordered list
2. Ordered list

TwitterBar – THE Firefox plugin!

To all of you who use Twitter, I have found THE Firefox plugin – TwitterBar!

TwitterBar makes it possible to post tweets directy in the Firefox address bar. Just type a message and end it with –post, and TwitterBar will post it automatically…like this:

(In the address bar) Testing TwitterBar --post

Then, I also assume that you are using the Twitter plugin for Facebook, which automatically updates your Facebook status for each new tweet…ah, the wonders of technology!

Enjoy!

OS X: Show all files in Finder

Sometimes, it is nice to be able to see all files in the file system and not just the ones that Finder or Explorer wants us to.

In Windows, it is easy to enable and disable the feature to show all hidden files in the Explorer, but in OS X, you have to write the following script in a Terminal window:

   defaults write com.apple.finder AppleShowAllFiles TRUE
   killall Finder

This will show all files in Finder, hidden or not. To disable this feature, simply enter the following in a Terminal window:

   defaults write com.apple.finder AppleShowAllFiles FALSE
   killall Finder

Auto-eject external drives when Macbook goes to sleep

I have a Macbook, and have always been annoyed that I have to manually eject my external disk every time I put the computer to sleep. In Windows, I have never had any such problems.

Luckily, I found a solution to this problem. Click on the link below to view a script that will eject the disk automatically when the computer goes into sleep mode.

http://www.macosxhints.com/article.php?story=20080329201951648

NOTE (2009-09-16):

Since I do not want to eject all disks, but only the external drive, I edited the .sleep script to the following:

#!/bin/sh
osascript -e ‘tell application “Finder” to eject “<name of disk>”

Favicons in Firefox 3 for OS X

I have been looking for a way to display Favicons for web sites in the bookmark bar, in Firefox 3 for OS X. By default, Firefox only displays the page title, which takes up a lot of space.

Previously, there existed a plugin to achieve this, but it is not supported by new versions of Firefox, but I found a great alternative – the Stylish plugin!

To get Favicons in Firefox 3 in OS X, do the following:

1. Go to userstyles.org and install the Stylish plugin
2. After installing it, install the Firefox Favicon style

That’s all you have to do – now enjoy all those icons…it’s an order!