Friday, October 29, 2010

How to avoid Information Overload

In the daily course of our works, we come across numerous emails from colleagues and clients as well as countless other unsavory emails uncaught by the junk filters. For the most part, it’s quick and easy to spot those unsavory emails and press the DEL key.

We all know the popular sayings of “Knowledge = Power” and what is knowledge if not information? It implies, then, that having too much knowledge is a bad thing. The real problem is that we often get copied on messages that our friends and colleagues think would help us in our daily duties when in reality they hinder us from completing our tasks effectively and timely. Then there’s the problem of people conversing using emails instead of using the more immediate communication tools such as instant messenger, phone or even simply walking-by for a chat(when it seems a walk-by-and-chat is appropriate).

So when we do get in the crossfire of people’s conversation emails—even when we are in the same project team, conversation circle, etc.—it pays to first know at the beginning whether we really want or even needed to participate in the essence of the conversation. Generally speaking, unless specifically addressed and called to answer a specific question, the simplest thing to do is to decide not to read it and any of the subsequent correspondence within the same thread. And thread is the keyword here.

Most modern email clients feature the ability to organize emails so they look like forum message threads. That’s the first and foremost what I personally do. Keeps things easy to quickly eyeball.

Second, we can (single-click) tag or flag emails that at quick glances seem important to revisit later. Forget about creating folders to categorize those emails. It takes more time than we think we have and won’t necessarily work as emails come faster than our ability to move them to the appropriate folder, especially not when today’s email clients have improved search function that can automatically create smart folders to contain the results of our searches. If anything, we’d be better off ignoring emails whose subjects are too generic to be useful as they indicate no forethought about the email itself. If one sender can’t take one minute to write a proper subject line, why must N recipients spend even one minute trying to decide whether it is worth spending more time to read and understand. It simply would be a disservice (not to mention costly in real terms) to our boss and other colleagues who are expecting us to perform our duties timely and productively unhindered by fly-by emails.

Third, also we can a mental note who among our colleagues are frequent offenders so that when email messages come from them, we can make an educated guess the likely importance of those messages and act accordingly.

Lastly, don’t return the favor, i.e., if we don’t like being blindly copied on messages that we think are not important to us then when we do get involved in an email conversation, remove all other recipients names except for the one with whom we are having it. I am a proponent of respecting everyone’s time and summarizing the conclusion of the conversation in a single email and creating a single attachment for the conversation, if we want to inform the team such conversation had taken place only for a matter of historical curiosity.

More often than not, we’ll be appreciated for not being party to exacerbating the condition of everyone else’s information overload. And most importantly, by going through the aforementioned steps regularly and consistently, we build for ourselves a habit to reduce our own being overwhelmed by things we’re unable to decide their importance.

Monday, October 04, 2010

Simple Creative-Interactive Development Approach

Preproduction:

· Brainstorm quick engagement rules.
· Gather and generate content.
· Construct the site map.
· Develop and approve and interface.
· Determine technical needs.

Production:

· Develop and refine content.
· Establish development, staging, and hosting resources.
· Get graphics production underway.
· Produce server-side support.
· Produce interactive materials.

Publication:

· Test cross-platform and cross-browser compatibility.
· Functional code review.
· Feature review.
· Coding style code review.
· Content (copy & graphics) review.
· Sign-off and deploy.

Post-Publication:

· Schedule maintenance periods.
· Schedule updates and fixes.
· Add content regularly.
· Promote site to targeted audience.
· Discuss expansion and re-design.

Organize and interview feedback and focus groups:

· Internal employees to provide management and organization needs.
· Public audience to provide likes, dislikes, and wish list.

Reuse:

· Create inventory of all existing content (brochures, graphics, interactive media, etc.).

Scheduling:

· Adherence to development schedule is a must; only one exception is allowed: unforeseen technical difficulties.

Project management:

· Although many stakeholders, there should only be single-point of authority in order to have:

  1. a final-say decision-maker; or,
  2. a tie-breaker in a round-table project discussion group.

Wednesday, September 08, 2010

Analysis and Specification Principles

More often than not, a project suffers not because of its lack of merit rather from miscommunication of intents causing grave consequences. If only we concentrate more at analyzing the subject area at the onset of a project, its probability for success can increase substantively.

1. Information Domain representation

a. Information Content and Relationships

This refers to the data themselves and their relationships to one another. For example: A “Paycheck” is composed of several pieces of data attributes belonging to different data objects such as: Employee {id, name}, Bank {name, routing number}, Instruction {net amount paid, date}, etc.

b. Information Flow

This refers to the manner in which data and their state are transformed by control objects or functions as they move through different points in the system.

c. Information Structure

This refers to the internal organization of the data and their state. For example: A “Paycheck” data could be organized in a single data table or object or in three different data tables or objects such as Employee, Bank, and Instruction and have their attributes linked to make what will be understood as a Paycheck object.

2. Models

Models are aspects of the information domain. They are abstractions that highlight important system requirements. Typically, several models are developed during requirements analysis and included in a requirements specification using a combination of graphical notations and textual annotations that may be plain natural language, e.g. English and/or a more structured language resembling a pseudo-code.

a. Functional Model

A functional model focuses on the data transformational functions in the system.

b. Behavioral Model

A behavior model focuses on the system state and event handlings (internal and external as well as user-invoked and systemic).

3. Specification partitions

a. Entity-Relationship Diagrams (ERDs) to represent Information Content and Relationships;

b. Data Dictionaries (DDs) to represent some information about Information Structure;

c. Data Flow Diagrams (DFDs) and Process Specifications, as functional models, and State Transition Diagrams as behavioral models representing information about Information Flow.

4. The Analysis and Specification Progress should cover Essential Requirements to Implementation Details in the spectrum

a. Essential Requirements

This refers to information about what needs to be done or to have (not how) with the basic understanding that human beings and other systems that the system with whom the system interacts are imperfect.

b. Implementation Details

This refers to the information about how the what will be addressed by the system.

Wednesday, April 21, 2010

How to create an Excel file programmatically (Part 2)

Offce 2003 XML method

This method is as simple as saving an .xls file into a template .xml format. When we open the saved XML file, we'll see a rather simple format to follow and places where we can insert new data rows.

<!--xml version="1.0"?--> <!--mso-application progid="Excel.Sheet"?--> <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40"> <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office" /> <ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel" /> <Styles> <Style />... </Styles> <Worksheet ss:Name="Sheet1"> ... {Data table location} <WorksheetOptions /> </Worksheet> </Workbook>

All we have to do then is insert the data table in the XML dialect below, which while different from (X)HTML is still relatively easy to understand and follow.

<Table ss:ExpandedColumnCount="3" ss:ExpandedRowCount="2" x:FullColumns="1" x:FullRows="1" ss:DefaultRowHeight="15"> <Column ss:Width="107.25"/> <Column ss:Width="106.5"/> <Column ss:Width="21"/> <Row> <Cell><Data ss:Type="String">This is Cell A1 in Excel</Data></Cell> <Cell><Data ss:Type="String">This is Cell B1 in Excel</Data></Cell> </Row> <Row> <Cell><Data ss:Type="Number">123</Data></Cell> <Cell><Data ss:Type="Number">456</Data></Cell> <Cell ss:Formula="=RC[-2]+RC[-1]"><Data ss:Type="Number">579</Data></Cell> </Row> </Table>

But even if we don't use Excel's own dialect of table elements, we can still easily substitute in regular HTML (4.0) tags as indicated in the namespace declaration near the beginning of the XML document above:

<Workbook ... xmlns:html=".../REC-html40">

All in all, it's still relatively simple to do.

(Part 3)The OpenXML approach, however, isn't as simple (for me, anyway)

Sunday, April 18, 2010

How to create an Excel file programmatically (Part 1)

This was a fairly easy and straight-forward job without requiring any additional APIs. Microsoft Office 2003 was pretty forgiving about Excel file extension that any auto-generated Excel file would be easily accepted without much hiccup. Nowadays, with Office 2007 and the upcoming Office 2010, we again are forced to resort to a "few" different Excel-creation techniques which yielded various pros and cons.

  1. The should've-been-the-easy-way: (X)HTML+CSS+Excel Formula minus-JavaScript format saved as .xls file.
  2. The should've-been-just-as-easy-way: Office 2003 XML format saved as .xls file.
  3. The what-we're-now-forced-to-do: Microsoft OpenXML SDK (2.0) way creating a warning-free Excel 2007 file (SDK 2.0 is the most recent library for Office 2010).

I think I know one of the many reasons Microsoft decided to restrict the flexibility later versions of its Office suite—something to do with all those macro/VBA-infected office files or something like that. So they now go by the "locked-down-by-default" starting point. But I also think it's a crying shame that we get all sort of warning dialogs for file extension renaming and things that are already automatically recognized by Microsoft Office suite, anyway. If only there's a way to suppress the dialog from an administrative policy instead of going to each user's PC... If anything, they should make still automatically protect the end-user while still enabling programmers maintain high-productivity by adopting web document standard but without that whole pop-up dialogs everytime so that worker-bee programmers like myself aren't forced to find, re-devise yet another technique to create, and yet again re-wrap a new set of APIs on a new SDK just to do what's supposed to be a simple thing. Do I digress? Perhaps not. We'll see with the aforementioned techniques in the following illustrations.

(X)HTML && CSS || Excel Formula !JavaScript method

This technique is as simple as it could be; there really is no other additional digging required other than what any web programmer already knows. Anyone could manually write the (X)HTML-based Excel file or use his/her favorite programming language to generate the intended file. You be the judge after seeing the code in Listing 1 below.

<!--xml version="1.0" ...?--> <!--DOCTYPE html PUBLIC "... XHTML 1.0 Strict//EN"... --> <html> <head> <title>XHTML-based Excel file</title> <style>/*CSS styling directives here*/</style> </head> <body> <table> <tr> <td>This is Cell A1 in Excel</td> <td>This is Cell B1 in Excel</td> </tr> <tr> <td>123</td> <td>456</td> <td>=A2+B2</td> </tr> </table> </body> </html>

The advantages of this technique are as apparent as the advantages of following a widely-accepted and standardized document object model, especially one that would be readily usable on a web browser. In addition, this would translate well to the natural order of a spreadsheet being a two-dimensional table understood as rows and columns made up of cells. Those as what

<table>, <tr>, <td> and other related (X)HTML elements are for.

The one great disadvantage stemmed from an annoyance of the application (understandably) warning the user that the content format is different from what is understood by Excel when looking at an .xls file extension. And it is more often than not sufficient to put-off a client-centric programmer who cares about NOT scaring his customer as much as he does about programming ease and efficiency.

Will this image: XHTML-based Excel file warning dialog be enough to make us try to think of a new, more "Excel-worthy" technique? I certainly thought so.

Up next (Part 2): Office 2003 XML format approach.

Friday, March 06, 2009

Essential Windows PowerShell Commandlets

Previously, we learned the basic commands: help and gal. I suppose now it's time to properly refer to these "commands" as commandlets or cmdlets following PowerShell's own set of terminologies. But just to note that whenever both commands and commandlets, I use them interchangeably for the same semantic meaning. Call me stubborn. Call it bad habit. But they really are all just commands to me. In any case, although I think of all of the commandlets simply as commands, we should still mentally note at the back of our mind that for "data-typing" purposes, PowerShell truly types these items or commands as Cmdlet.

Our first essential command after learning the basics is Get-Command

Get-Command

Get-Command outputs all of the available commands in PowerShell in a clean PowerShell installation. These are the commands that we really will use as the building blocks for writing PowerShell scripts. Through a process of trial and errors, let us try to see if we can perform the obligatory, introductory of any programming lesson: print the string "Hello World!" on screen (I promise I'll keep the trial and errors to an abridged version).

  1. Type-in Get-Command at the prompt
  2. Observe the output and see if any of the command contains descriptions that indicates it is a command for printing anything on-screen by using guess-words such as: "Print", "echo", "Write", "Response", or any other words from whatever your other experience may have been.
  3. If nothing on-screen indicates as such, then you'll want to type in help [Cmdlet name] at the prompt to read the details one-by-one. Hey at least that's how I started learning PowerShell, by reading documentation as well as by trial and errors.

But, let's use my experience, shall we? Let's just type in the following simple command, and we'll simply get the result we want just as we'd see in Listing 1.

Listing 1: PS C:\Users\antonius> gcm | where {$_.definition -match ".*print*"} CommandType Name Definition ----------- ---- ---------- Cmdlet Out-Printer Out-Printer [[-Name] <string>] [-InputObject <psobje... ps c:\Users\antonius> gcm | where {$_.definition -match ".*echo*"} CommandType Name Definition ----------- ---- ---------- Cmdlet Set-AuthenticodeSignature Set-AuthenticodeSignature [-FilePath] <string []> [-C... PS C:\Users\antonius> gcm | where {$_.definition -match ".*write*"} CommandType Name Definition ----------- ---- ---------- Cmdlet Write-Debug Write-Debug [-Message] <string> [-Verbose] [-Debug] ... Cmdlet Write-Error Write-Error [-Message] <string> [-Category <errorcat... cmdlet write-host write-host [[-Object] ><object>] [-NoNewline] [-Separ... Cmdlet Write-Output Write-Output [-InputObject] <psobject []> [-Verbose] ... Cmdlet Write-Progress Write-Progress [-Activity] <string> [-Status] <strin... cmdlet write-verbose write-verbose [-Message] ><string> [-Verbose] [-Debug... Cmdlet Write-Warning Write-Warning [-Message] <string> [-Verbose] [-Debug...

From these output we can sort of guess which command we can use, but if in case we're still in doubt we could always do help write-debug, help write-error, etc. Soon after we go through this we'll find the command we want to use is Write-Output.

That's a rather "long" command to type, though. Let's try to see if there's a shorter version of it. For this purpose, let's try what's on Listing 2.

Listing 2: PS C:\Users\antonius> gal | where {$_.definition -match "Write-Output"} CommandType Name Definition ----------- ---- ---------- Alias write Write-Output Alias echo Write-Output

Now that we found what we want, we can try either command aliases just as in Listing 3

Listing 3 PS C:\Users\antonius> write "Hello World!" Hello World! PS C:\Users\antonius> echo "Hello World!" Hello World!

Sure enough, we found both yield the same result

We might wonder, "Why are there two aliases for the same command?" I don't really know the answer to that question other than perhaps the alias write is the built-in alias for Write-Output and perhaps the alias echo is simply a way to help those who are used to writing .BAT scripts to transition a little more easily to Windows PowerShell. Whatever the answer to that question is rather irrelevant; what's more important is that now we've gone through the basic exercises in learning each PowerShell command.

Wait wait wait!!! We're not done here!

What's all that business with the where command and the rest of the strings following it?

No, I didn't cheat :)

I simply wanted to shortcut all the trial and errors I went through in learning PowerShell without filling the content of this notes full of garbage. Trial and errors, after all, are things we each can do individually on our own time. As for the shortcut strung with the where command, I'll note an explanation of it another time.

Tuesday, March 03, 2009

Basic Windows PowerShell Commands

Windows PowerShell is relatively new shell command interpreter in comparison to the venerable CMD, CScript, and Windows Script Host.

Just like any shell script, it isn't really difficult to learn simply by trial and errors as long as we get the few basic commands down so we can drill further to other commands we seek to use.

The most basic command we should know is, of course, help.

Get-Help

As the command name suggests, it is the single command we use to see the details of a particular command we submit as a parameter to the help command. Listing 1 below illustrates the help command execution.

Listing 1: PS C:\Users\antonius> help help NAME Get-Help SYNOPSIS Displays information about Windows PowerShell cmdlets and concepts. SYNTAX Get-Help [[-name] <string>] [-component <string []>] [-functionality <string []>] [-role <string []>] [-category <string []>] [-full] [<commonparameters>] Get-Help [[-name] <string>] [-component <string []>] [-functionality <string []] [-role ><string []>] [-category <string []>] [-detailed] [<commonparameters>] Get-Help [[-name] <string>] [-component <string []>] [-functionality <string []>] [-role <string []>] [-category <string []>] [-examples] [<commonparameters>] Get-Help [[-name] <string>] [-component <string []>] [-functionality <string []>] [-role <string []>] [-category <string []>] [-parameter <string>] [<commonparameters>] DETAILED DESCRIPTION The Get-Help cmdlet displays information about Windows PowerShell cmdlets and concepts. You can also use "Help {<cmdlet nam e> | <topic-name>" or "<cmdlet-name> /?". "Help" displays the help topics one page at a time. The "/?" displays help for cm dlets on a single page. RELATED LINKS Get-Command Get-PSDrive Get-Member REMARKS For more information, type: "get-help Get-Help -detailed". For technical information, type: "get-help Get-Help -full".

It's so helpful that we can simply type help help at the prompt to display the details of the help command itself. As we examine the command output's "Related links" section, we see three other commands related to the help command. All the three new commands we found here: Get-Command, Get-PSDrive, and Get-Member are part of the important basic commands we will discuss more thoroughly a little later.

Get-Aliases

"Shallow Hal wants a gal."

The second basic command that is most useful to expedite our PowerShell command study is Get-Aliases also aliased as gal. First, we're gonna combine gal with the first command we learned earlier: help in Listing 2. Then, we'll try to see if sending the command twice to the shell prompt, one as the command call itself and another as the paramater to the command call gal gal in Listing 3.

Listing 2: PS C:\Users\antonius> help gal NAME Get-Alias SYNOPSIS Gets the aliases for the current session. SYNTAX Get-Alias [[-name] <string []>] [-scope <string>] [-exclude <string []>] [<commonparameters>] DETAILED DESCRIPTION The Get-Alias cmdlet gets the alternate names for cmdlets, functions, and executable files that have been established for the current session. This collection includes built-in aliases, aliases that you have set or imported, and aliases that you have added to your Windows PowerShell profile. If you specify one or more aliases, Get-Alias gets the alias object and displays its properties, including the object that was aliases, such as the full name of a cmdlet. This feature is made available by the Windows PowerShell Alias provider. RELATED LINKS Set-Alias New-Alias Export-Alias Import-Alias REMARKS For more information, type: "get-help Get-Alias -detailed". For technical information, type: "get-help Get-Alias -full".Listing 3: PS C:\Users\antonius> gal gal CommandType Name Definition ----------- ---- ---------- Alias gal Get-Alias

See! It's simple right? From Listing 2, we find the usage details of the command gal, and from Listing 3, we find that gal itself is an alias of the command Get-Aliases.

But, but, but... How did I know in the beginning that help and gal are commands we can execute? The answer is as ordinary as it could be—I guessed the first command: help presuming that a program usually has a variation of help, --help, --h, man or the old-school /? in some sort of form even without reading its documentation. As for the command: gal, after having found out that while the command help could be executed and yields an output indicating the actual command name: Get-Help, I simply sought in MSDN PowerShell site a reference entry pertaining to available command aliases.

Up next... We won't need to go through the details of each command, but will start our PowerShell exercises by using the three new "related" commands we learned earlier from Listing 1.

Tuesday, February 24, 2009

One ID to rule them all!

Having an OpenID is a cool thing. In theory, I wouldn't have needed to register for any other account ever. Alas, most ideals are just that: ideals. No, I'm not saying anything bad against OpenID; I'm only saying that even with the best intention we still frequently are unable to realize the full potential of the idea's ideals.

Take SourceForge.Net for example, it's one of sites I frequented. Sure it does take my OpenID to authenticate me when I logged into the site, but it still requires me to bind to a local SourceForge account if I want to use it to access certain things such as its CVS repositories. C'est la vie.

The OpenID provider I chose for my use is MyOpenID.com. I like MyOpenID.com because it is one of only a few (as of this writing) strong authentication providers who uses SSL certificates and Windows CardSpace/InfoCards which enables auto-authentication. This is so that while I do have a password for my OpenID account, I won't need to really memorize it or use it to sign into any sites using my OpenID account.

To demonstrate:

  1. Go to MyOpenID.com
  2. Sign in (if you already have an OpenID account)
    Type in your OpenID account
  3. Choose a sign-in method
    Sign in using SSL P12 certificate
    Or
    Sign in using InfoCard
  4. You'll be presented with a certificate you've previously created and install in your browser
    SSL P12 certificate
    Or be prompted to send your Microsoft Windows InfoCard you've previously linked to your OpenID
    Microsoft Windows CardSpace - InfoCard
  5. Click sign-in
    OpenID sign in
  6. And swweeet!! I'm in... quick & easy.

Tuesday, February 17, 2009

How to write clean website layout using CSS (Part 2)

The pure <div/> approach: Positions

Creating web page layout using CSS positioning really is a very simple thing to do. All we need to remember is that an XHTML element's absolute position is always relative to its container. That is the one thing we usually forget. We are so caught up in the semantic definition of the word absolute position we forget that it isn't absolute only in the context of the web page itself (<body/>).

For a similar simple markup we wrote in Listing 2 of our previous notes, we now have the following Listing 1.

Listing 1: <body id="doc"> <div id="d11" class="d1"> <div id="d11-sub1"> <div id="d11-21" class="d11-2"> </div> <div id="d11-22" class="d11-2"> </div> </div> <div id="d11-sub2"> <div id="d11-23" class="d11-2"> </div> <div id="d11-24" class="d11-2"> </div> </div> </div> <div id="d12" class="d1"> <div id="d12-21" class="d12-2"> </div> <div id="d12-22" class="d12-2"> </div> <div id="d12-23" class="d12-2"> </div> <div id="d12-24" class="d12-2"> </div> <br style="clear: both" /> </div> <br style="clear: both" /> </body>

The styling commands we needed in Listing 2 felt simpler to do and easier to understand from the perspective of having to think about how the browser layout engine will interpret the commands we write.

Listing 2: /* Section: Content specific **********************************************************************/ body, #doc { border: 5px double rgb(255,0,0); width: auto; /* Use // to give a specific instruction to IE browser only **********************************************************************/ //padding-bottom: 100px; } #d11, #d12 { height: 100%; width: 920px; border: 5px solid rgb(0,255,0); margin: 100px; /* Set margin-{left, right} to &quot;auto&quot; to center the div box because * setting text-align to &quot;center&quot; at the container level only works * with IE but not with other browsers, in addition to having the * unintended effect of having the container's text actually centered * that is if we simply just want the layouts centered, not its text. **********************************************************************/ margin-left: auto; margin-right: auto; } div.d11-2 { border: 5px solid rgb(0,0,255); margin: 50px; } #d11-sub1, #d11-sub2 { width: 900px; height: 100%; border: 1px solid red; margin: 10px; position: relative; } #d11-21, #d11-22, #d11-23, #d11-24 { width: 100px; padding: 25px; } #d11-22 { position: absolute; top: 0px; right: 0px; } #d11-24 { position: absolute; top: 0px; right: 0px; } #d12 { border: 5px solid rgb(0,150,50); } div.d12-2 { border: 5px solid rgb(0,0,255); margin: 50px; } #d12-21, #d12-22, #d12-23, #d12-24 { padding: 10px; width: 100px; float: left; } /* End Section **********************************************************************/

I'd say it looks pretty straightforward without having spent lots of hours tweaking the style attributes to get the desired results.

I was pretty happy this turned out to be easy. But then just for kicks I wanted to find out "What if I did the other way around, strictly with floats and kept all the elements' positions at its default relative value?" "Would it be just as simple?" "Would it be just as quick to do?"

The pure <div/> approach: Floats

With the same base structural template as Listing 1 above, I found that achievement the desired result using float method is considerably longer. Sure if you look at the last CSS code-block of Listing 2, you'll see that I actually cheated by using floats because well... that was actually the simplest way to order the <div/>'s in simple column formation. But then, to figure out which of the <div/>'s in square formation need to be floated the right way took quite a bit of trial and error in the order of magnitude of 5. Yes. Five. Listing 2 took me only a couple of minutes to write and get right. Listing 3 took me almost 15 minutes to do due to tinkering with the float and clear attribute combinations.

Listing 3: /* Section: Content specific **********************************************************************/ body, #doc { border: 5px double rgb(255,0,0); //padding-bottom: 0; } #d11, #d12 { width: 920px; border: 5px solid rgb(0,255,0); margin: 100px; /* Set margin-{left, right} to &quot;auto&quot; to center the div box because * setting text-align to &quot;center&quot; at the container level only works * with IE but not with other browsers, in addition to having the * unintended effect of having the container's text actually centered * that is if we simply just want the layouts centered, not its text. **********************************************************************/ margin-left: auto; margin-right: auto; } div.d11-2, div.d12-2 { border: 5px solid rgb(0,0,255); margin: 50px; } #d11-21, #d11-22, #d11-23, #d11-24 { width: 100px; padding: 25px; } #d11-sub1, #d11-sub2 { border: 1px solid red; margin: 10px; //padding-bottom: 50px; } #d11-21, #d11-23 { float: left; clear: left; } #d11-22, #d11-24 { float: right; clear: right; } #d11-23 {clear: left;} #d12 { border: 5px solid rgb(0,150,50); } #d12-21, #d12-22, #d12-23, #d12-24 { padding: 10px; width: 100px; float: left; } #d12-21 {clear: left;} #d12-24 {clear: right;} /* End Section **********************************************************************/

How to write clean website layout using CSS (Part 1)

There are three well-known techniques in creating a website layout using CSS:

  1. The <table/> approach.
  2. The <table/> + <div/> hybrid approach.
  3. The pure <div/> approach.
    1. The positioning approach of absolutists v. relativists; and,
    2. The clearing float (or is it the floating clear? <smile/>).

There are others of course; very advanced CSS masters like to further enhance the cleanliness of their XHTML code without using a single <div/> or <span/>.

As I jumped into refresher exercises, I wondered: "How easily would it be for me to do this (ref: screen)?" Or, "Is it even possible to easily do it for the four popular browsers today?"

layout-div1


Warning: At the time of writing, the following materials were only proofed on:

  • Internet Explorer 7.0.6001.18000
  • Firefox 3.0.6
  • Safari 3.2.2 (525.28.1)
  • Chrome 1.0.154.48

This article merely documents these variations and choices. We do not advocate one approach versus another as these choices are left to each of our individual circumstances and reasons. Although <grin/> I would soon give up doing the first approach.

The base skeletal structure for each of the tested approaches is the following Listing 1(with slight differences):

Listing 1: <!--xml version="1.0" encoding="UTF-8"?--> <!--DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd"--> <html> <head> <title>DIV</title> <style type="text/css" media="all"> /* Section: Initialization **********************************************************************/ * { margin: 0px auto; padding: 0px; outline: 0 border: 0 none; font-family: cambria, georgia, "Times New Roman", times, serif; font-size: 11pt; font-style: inherit; font-weight: inherit; vertical-align: baseline; text-decoration: none; /* Set min-height to "100%" and overflow to "auto" in order to set * the div box to stretch to the height of its children elements. This * setting bears no effect whatsoever on IE. **********************************************************************/ min-height: 100%; /* Use // to give a specific instruction to IE browser only **********************************************************************/ } } body { padding: 10px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } ul, ol, dl {list-style: none;} table, tr, td { border-spacing: 0; } a img, :link img, :visited img, { border: 0 none; vertical-align: bottom; } code, .code{ padding: 10px; padding-left: 15px; font-family: consolas, monaco, "Courier New", courier, monospace; font-size: 9pt; color: rgb(100,100,100); white-space: pre; text-align: left; } /* End Section </style> </head> <body> ... </body> </html>

The <table/> approach

If we search the Internet for arguments against using <table/> tags for layout purposes, we will find them in abundance. They are all valid arguments and we should heed them. I simply could not bring myself to nest <table/> tags like it's 1999.

The <table/> + <div/> approach

For the following simple layout in Listing 2:

Listing 2: <body> <table> <tr> <td id="t11-21"> <div id="d11-21" class="d11-2"> </div> </td> <td id="t11-22"> <div id="d11-22" class="d11-2"> </div> </td> </tr> <tr> <td id="t11-23"> <div id="d11-23" class="d11-2"> </div> </td> <td id="t11-24"> <div id="d11-24" class="d11-2"> </div> </td> </tr> </table> <table> <tr> <td id="t12-21"> <div id="d12-21" class="d12-2"> </div> </td> <td id="t12-22"> <div id="d12-22" class="d12-2"> </div> </td> <td id="t12-23"> <div id="d12-23" class="d12-2"> </div> </td> <td id="t12-24"> <div id="d12-24" class="d12-2"> </div> </td> </tr> </table> </body>

We still had the following styling code in Listing 3

Listing 3: /* Section: Content specific **********************************************************************/ body, #doc { width: 100%; border: 5px double rgb(255,0,0); //padding-bottom: 100px; } table { width: 948px; border: 5px solid rgb(0,255,0); margin: 100px; /* Set margin-{left, right} to &quot;auto&quot; to center the div box because * setting text-align to &quot;center&quot; at the container level only works * with IE but not with other browsers, in addition to having the * unintended effect of having the container's text actually centered * that is if we simply just want the layouts centered, not its text. **********************************************************************/ margin-left: auto; margin-right: auto; table-layout: fixed; } /* TR styling doesn't work on IE ************************************************************************/ tr { width: 928px; border: 5px solid red; display: block; } td { vertical-align: top; } #t11-21, #t11-23 {width: 100%;} #t11-22, #t11-24 {text-align: right;} #t11-21, #t11-22, #t11-23, #t11-24 { //width: 50%; border: 1px solid blue; } #t12-21, #t12-22, #t12-23, #t12-24 { width: 25%; text-align: center; border: 1px solid blue; } div.d11-2, div.d12-2 { border: 5px solid rgb(0,0,255); margin: 50px; } #d11-21, #d11-22, #d11-23, #d11-24 , #d12-21, #d12-22, #d12-23, #d12-24 { text-align: left; width: 100px; padding: 25px; overflow: visible; } #d12-21, #d12-22, #d12-23, #d12-24 { padding: 10px; //margin-left: 0px; //margin-right: 0px; } /* End Section ************************************************************************/

Yes, this approach yields a slightly cleaner code result than only the <table/> based approach. But it isn't without its own problems. There's that <tr/> rendering issue in IE. And of course, I found that the CSS implementation differences between the various browsers render this approach virtually indefensible, as in saying: "If we have to resort to using various CSS tricks/hacks anyway, why not simply do a Table-less Layout with its pros and cons already weighed by the web design community at large, especially when we already have ample samples written by masters such as those from A LIST apart and Zen Garden—two sources of my favorites reading materials where I found a wealth of knowledge shared to us all common netizens."

Need I say more?

Up next: The pure <div/> approach (Part 2).

Thursday, February 12, 2009

How to create a new Blogger template (Part 2)

Blogger's Layout Data Tags

As of this writing, a Blogger's template document requires at least a skin declaration, usually placed in the document header as seen in Listing 1 below.Listing 1: <b:skin><!--[CDATA[ /* Blogger only allows exactly one (1) <b:skin/--> element be defined * in the template document. * Although this is essentially where we place our global CSS code, * we can still declare style blocks or inline style attributes as * usual just like the example below. */ .globalStyleClass { definitions; } ]]></b:skin> <style type="text/css"> .standardstyleclass { definitions; } </style>

For details on why tag is required read this Blogger Help article—that is, if you want to integrate your customized template to Blogger's WYSIWYG layout editor.

That's pretty much it. The rest, we can just drop widget definitions following this Blogger Widget article and regular X/HTML web-design exercises.

The following is the result of this new Blogger template exercise.

Before:
image


To what we're seeing now.

How to create a new Blogger template (Part 1)

  1. Start with a Blogger's basic default template and dissect it.
  2. Understand basic X/HTML coding.
  3. Understand Blogger's Layouts Data Tags
  4. Know where to find help for customizing Blogger's template.

Dissecting a Blogger's basic default template

Leave the first two lines alone.

Listing 1:
<?xml version="1.0" ...?>
<!DOCTYPE html PUBLIC "... XHTML 1.0 Strict//EN"... >

After the first two lines of code, a Blogger's template is essentially just a regular X/HTML document (according to the specified DOCTYPE in code line #2).

Side notes: Personally, I use XHTML 1.0 Transition for reasons we'll experience when we exercise the coding style I wrote in here: How to write clean X/HTML document. For this reason, in the remaining content of this study assumes and follows the transitional document type declaration.

Basic X/HTML coding

An X/HTML document essentially consists of simple structural tags as seen in Listing 2 below.

Listing 2: <html> <head> <style></style> <script></script> </head> <body> </body> </html>

Despite all of the content we see when view an X/HTML document on the web, that's really all there is to it. A Blogger's template is no exception. The some differences we see in the basic template we've downloaded usually has to do with what Blogger labels "Layout Data Tags" or, for those used to using Blogger's WYSIWYG layout editing tool, "Widgets" (regardless of whether or not they're displayed on the resulting browser screen).

In Blogger's document template case, there are extra namespaces declared as attributes of the <html> tag as shown in Listing 3 below.

Listing 3: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr" expr:dir="data:blog.languageDirection"> ... </html>

We should do the same.

Tuesday, February 10, 2009

How to write clean X/HTML document


Warning: XMP tag is an officially deprecated tag as of HTML specification 3.02. So follow this advise at your own risk.


Use <xmp/> tag instead of the using many <br/> tags to pre-format ourmultiline texts inside a <p> tag. We should use <xmp/> tag for plain text and demonstrated code listings instead of using escaped stuff (entities) such as &lt; and &gt; Escaping characters are such tedious chores and we are all better off with using <xmp/> tag. If we want to have the HTML content of our tags still interpreted as HTML content then we choose to use the <pre/> tag instead of <xmp/> tag (ref: Listing 1) Listing 1: <pre> <b><u>HI THERE!</u></b> XMP is sweet. I don't know why such as useful tag is deprecated. </pre> Listing 1 will still be interpreted as HTML content and render as the following: (notice how the rendered text includes the invisible 'tab' characters). Let's compare it to what we would have to do in Listing 2 below if we don't use <xmp/> Listing 2: &nbsp;&nbsp;&nbsp;&nbsp;<b><u>HI THERE!</u></b><br/> &nbsp;&nbsp;&nbsp;&nbsp;XMP is sweet.<br/> &nbsp;&nbsp;&nbsp;&nbsp;I don't know why such as useful tag is deprecated.<br/> Which codeblock is easier to work with? Just for writing:
	HI THERE!
	XMP is sweet.
	I don't know why such as useful tag is deprecated.
We could alternatively use CSS to control our content like the following: Listing 3: <p style="white-space: pre;"> My multi line content inside a paragraph &lt;p/&gt; tag </p> to render the following:

My multi line content inside a paragraph <p/> tag

Although the sample in Listing 3 takes the white-space character and carriage-return/line-feed character, it does not take the tab character and other invisible characters that may be inside our text content-not to mention more typing compared to using <pre/> tag. If it is still chosen, IE will fault us (if we are reading this using IE, we will see the above example above as a single-line, instead of what it should be). Using the <xmp/> tag and/or <pre/> tag helps us reduce the mess that other developers would see when they view the source of our program. What mess am I talking about? Think about this: How often do we use &nbsp; like the above example? Yep, that's what I'm talking about :) So what if we want to stylize an <xmp/> content?
All we have to do is use a CSS class as we would in any other case:
For example: we could do the following:
Listing 4:
<xmp style="color: blue; font-weight: bold;">Content</xmp>
Such that the result renders as the following: Content We should be careful and test the use of <xmp/> tag carefully since this tag has been officially deprecated as of HTML standard 3.02 and is replaced by the <pre/> tag (see: WARNING at the top of this page), despite the fact that the <pre/> tag is available, it doesn't completely offer all the simple escaping facilities offered by the <xmp/> tag.

Saturday, September 06, 2008

Confidence == Self.Comfort in {Knowns, Unknowns}

Confidence != Perfection;

Confidence != Arrogance.Hide(Inferiority);

What do we do when a user asks for a facility for a matter of convenience and where the cost of providing such convenience far outweighs the value of the time saved from the convenience?

There's a dictum that states: "Customer is King." If we want to be responsible subjects to our king, it is our duties to say to the King: "Your Majesty, if you wear this 'clothes' you will be naked; is that what you really want?" and instead of: "Yes Your Majesty, we will use the finest invisible silk thread to match the invisible royal garb you ordered."

Friday, April 25, 2008

Information is to knowledge as...

Bit is to Byte.

Byte is to data.

Data is to information.

 

A computer is such a nice tool to collect, prepare / process, and consume knowledge. But nice is different from easy. The level of ease in using computer for the aforementioned activities however are usually inversely proportional to one another. For example, if it could be considered easy to collect data, it can be reasonably said (and observed) that the data processing is relatively more difficult than the its collection; or so the logic dictates, for what it's worth.

Fast forward to preparing cubes for SQL Server Analysis Services, I found myself trying to figure out how to prepare an ease of processing for my work product's audience, starting with its setup. After a little bit of struggle through the various binaries in my machine, I found the following steps helpful for those of you trying to do the same:

Local environment variable path setup:

  1. Add to your local environment path an entry pointing your VS.2005 IDE location (screen Evp1.1 - 1.4).
  2. Add to the same local environment path another entry pointing to the location where you find Microsoft.AnalysisServices.Deployment.exe, if it isn't already there. (Notes local environment path entries are separated by semi-colon).

Screens:

Evp1.1evp11 Evp1.2evp12

Evp1.3 evp13 Evp1.4 evp14

 

The lazy version:

  1. prompt:> devenv [solution filepath and filename] /deploy

Well... sure you might run into a couple of pop-up dialogs, but just a couple of OK clicks without knowing what they mean will put you back on the processing track. No worries though, even when you don't click the buttons until the end the show will go on until completion with the exception that the thread is still be hanging until said clicks are made.

If you're bothered by the only seemingly semi-autonomous run (since you still may be needed for those two manual clicks), here's another way to do it... properly... starting with the same local environment path setup steps above, then followed by these steps:

  1. Build the .asdatabase file from your solution file using prompt:> devenv [solution filepath and filename] /build
  2. The deploy using prompt:> microsoft.analysisservices.deployment [solution filepath]/bin/[project name].asdatabase /s:[deployment log filepath and filename]

A word of caution: Don't be alarmed if your screen seemingly freezes during the deployment; this will likely be the scenario depending on your hardware configuration and the volume of data in your database that Analysis Service engine processes.

Why do we want to go through this when we can just load the solution file in VS.IDE then with just a few clicks to the above easily without having to memorize seemingly arcane and puzzling commands and steps? There are several different answers to this, but my favorite one doesn't have anything to do with it as knowledge that reliable technician needs to have; rather, it has to do with the pursuit of knowledge itself.

If our knowledge is the sum of our experience, and if we postulate that human beings learn more from difficult experience than an easy one, then it follows that by doing the above steps we will retain this knowledge longer that had we just done the usual mouse-clicks. And that my friend is what knowledge is to an application...

Friday, April 11, 2008

Joy is...

A smile in spite of what's around.

You know... these days I sensed a lot of unhappiness around me—not from me, mind you—around me. So I took a few minutes out of my day and scoured the Internet to see if I could find some quick, inspirational statements people say about how we can reach happiness since I don't seem to be doing well in inspiring happiness for others.

Here's what I found:

From Dennis Wholey:
Quote #1: Happy people plan actions, they don't plan results.
Quote #2: Expecting the world to treat you fairly because you are a good person is a little like expecting a bull not to attack you because you are a vegetarian.

Here's another from our favorite genius, Albert Einstein:
Quote #3: If you want to live a happy life, tie it to a goal, not to people or things.

From an unknown smartie:
Quote #4: Happiness is not the absence of problems but the ability to deal with them.
Quote #5: Some pursue happiness; others create it.

How are these useful for me? Eeh, they aren't new to me, really; they're what I already naturally use for me. And I'm happy in a happy-go-lucky-sort-of-way-kind-of-guy; see if these could be as useful for you as they have been for me.

Thursday, March 27, 2008

To be gainfully employed is...

A rather challenging act to perform.

It's not just about having a job nor about the money that the job brings.

It is a constant juggle to balance our personal and professional lives.

I've shared with many people I encounter in my careers a personal attitude that may help reduce one's own stress in a work setting and be able to feel secure on and of our own: that work is just a vehicle for us to meet new friends and earn income to support our family.

Professionally, the level of quality of my output and my team's output is much less driven by our individual talents, but more about the principles we go by and use in our teamwork:

  • Kanban: Just-in time (classic production understanding in manufacturing industry of what's now called Agile in the software industry).
  • Kaizen: Continuous improvement; our work is never done, even when the output has shipped. This translates personally to set a goal where we can pace ourselves according to our health and ability and professionally to always understand that the best we deliver today should hopefully be better tomorrow.
  • Gandhi engineering: A combination of irreverence toward established way with a scarcity mentality that spurns superfluities while at the same time maintaining consistency of applying the principles in play.
  • Einstein tolerance: That can't be paraphrased, but simply understood in what Albert Einstein himself said: "Great spirits have always found violent opposition from mediocre minds. The latter cannot understand it when a man does not thoughtlessly submit to hereditary prejudices but honestly and courageously uses his intelligence and fulfills the duty to express the results of his thoughts in clear form", to help us maintain composure in an adversarial environment. This also relates to what I wrote earlier in my post: The 道 of Writing, the sublime of Work Ethics...

Thursday, March 20, 2008

A customer is NOT always right

1. If he is belligerent and makes my team and employees unhappy.

2. If a customer makes me choose between unreasonably serving his business or my relationship with good colleagues and employees. My employees come first. (This is along the line of: "If an employer makes me choose between unreasonably serving his business or my devotion to my family. My family comes first.)

3. If his business is bad for my business: we all have a finite amount of resources serving a customer that does not further our own goal. For example, serving a bad customer who takes so much more time and efforts where consequently we are unable to provide an equal or better time and service for a good customer, we'll have to say goodbye to the bad customer.

4. If he is unreasonable despite our best effort to serve him/his company with a good service, and that they have been receiving good attention and services.

5. If we happen to get a glimpse, somehow, that he doesn't treat {another person | his own employees | general public} fairly and with dignity as it is a telltale of what is to come for us as an outside vendor.

Friday, February 01, 2008

Holy chocolate fudge!!! Quick! Show the window pronto!

The first month of 2008 came and went.

We've gone through 31 days of a new year so quickly, we barely had a chance to reflect on the past year due to piles of backlog tasks that seems to increase faster than we can keep up. It's a blessing and a curse.

Speaking of a curse, I was in the middle of debugging an application last night and was unable to find the Immediate Window in my VS2005 IDE. It had been there before; I sought for it in all of the menu and sub-menu items and couldn't find it. I still don't know what caused its disappearance. Perhaps it was a recent VS2008 IDE installation that might've affected the 2005 environment settings; perhaps others unknown reasons.

Suddenly, a simple thought sprang to mind bulb : go to Tools/Customize/Debug and simply add it back-in to the menu bar and my shortcut toolbar. Et voilà! My indispensable Immediate Window returns; and all is well.

Thursday, January 17, 2008

What a great {insert a nerdy title here} feels:

  • I don't need to prove I'm 1337 to know I am one.
  • I don't understand the end-user, but I'll always try to.
  • My end-user is the reason I have a job.
  • Patience really is a virtue.
  • Nobody likes complicated stuff.
  • It's better to be perceived as inexperienced but a quick study, than experienced but a slow poke.
  • Knowing the subject well is better than knowing how to code well.
  • If I don't know how to code it well, give it to someone who does, then learn from it.
  • $1/day for 365 days is better than $10 for only 30 days. Long term builds trust, character and wealth; short one brings false sense of confidence.
  • Each new job feels like my first job; done with great excitement, else it could be my last one.
  • Get completely in or get out, capiche?