Hadoop Tutorial

Yahoo! Hadoop Tutorial This tutorial includes the following materials designed to teach you how to use the Hadoop distributed data processing environment: Hadoop 0.18.0 distribution (includes full source code) A virtual machine image running Ubuntu Linux and preconfigured with Hadoop VMware Player software to run the virtual machine image A tutorial which will guide you through many aspects of Hadoop's installation and operation.

Hadoop Tutorial - YDN

Yahoo! Hadoop Tutorial Home

shared via Firefox Share — "share links with the people that matter to you"

Web Usability - Accessible Data Tables

Making your JSF datatable and html tables more accessible and 508 compliant.

Web Usability - Accessible Data Tables

shared via Firefox Share — "share links with the people that matter to you"

Firefox Share (alpha) :: Add-ons for Firefox

Cool add on to post from the firefox address bar.

Firefox Share (alpha) :: Add-ons for Firefox

shared via Firefox Share — "share links with the people that matter to you"

CSS best practices

CSS Notes

I have compiled few CSS best practices and notes from various sources. I have attempted to give the original authors the credit, but if I am missing anything please leave a comment to correct. 

What are the benefits of using CSS over normal HTML element?

a. Re-usability with CSS we can reuse styles that can be applied across different html elements.

b. Maintenance:- Easier to maintain few or more well structured css files.


What is the difference between DIV and SPAN tags, how does it affect layouts and CSS usage?
A DIV tag makes a paragraph break for the content within the DIV tag.  In other words when the browser encounters a div tag it does a paragraph break and renders the content and followed by a paragraph break.

A span tag does no do that. The latter inlines contents and the former block content.

Both the tags apply it's CSS style to its child elements.



The following are block tags:-div, h1...h6, p, ul, li, table, blockquote, pre, form 

The following are inline tags:-span, a, strong, em, img, br, input, abbr, acronym 

What are CSS selectors?


Every HTML element can be identified by the following forms by it's class attribute, id attribute and the HTML element in itself can be targeted as identifier (TABLE, TR, TD).

However in the final option that style would be applied to all the elements in the document tree regardless of its occurrence.

1. Example Class Based Selector :-/** Targets all elements whose class attributes match **/.sampleCssClass {
  color: #ddd;
}

content


2. Example ID Based Selector :-/** Targets all h1 tags where attribute id is equal to headerText **/h1#headerText {
 color: red;
}

content goes here

3. Example Targeted Element Based Selector :-/** Targets all specific table elements **/table.SampleCssClass{
 background-image: url('/images/fenil.png');
}
How can more than one CSS style class be applied to the same element ? Space separated list of css styles on the class attribute of the html content. In the case of icefaces put it in the style class attribute, then it will automatically be rendered as the class attribute when the dom tree is built.

What kind of CSS selector should we use?

Class based selector for maximum re-use. Things to keep in mind before writing CSS  CLASS based selectors?

a. Avoid element specific style attributes.
b. element specific style attributes can be in a different css class.
What is CSS Reset?


A CSS reset, is resets the style that may be the default in a browser, so the margin and padding can be set as 0px for a default list of elements.


What is CSS Alphabetizing, and why should we alphabetize it?Ordering the style elements within a CSS class by alphabetical order.

For example :-


.classUnorderedElements {


BORDER-RIGHT: #a52a2a 3px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #a52a2a 3px solid;
PADDING-LEFT: 3px;
Z-INDEX: 1;
LEFT: 50%;
FLOAT: none;
VISIBILITY: visible;
PADDING-BOTTOM: 3px;
MARGIN: 2px;
BORDER-LEFT: #a52a2a 3px solid;
PADDING-TOP: 3px;
BORDER-BOTTOM: #a52a2a 3px solid;
POSITION: absolute;
TOP: 21%;
BACKGROUND-COLOR: #ffb6c1
}


The above is an example where the elements within the class are un ordered alphabetically.

Why should we alphabetically order the elements within a css class?

    It is easier to scroll through and debug specific elements in a css class when we come across  it.
    It is more time consuming to read element by element.




What is a CSS shortcut?


Example .longclass{
 margin-top: 11px; margin-right: 11px; margin-bottom: 11px; margin-left: 11px;
}


Example .shortCutClass{
 margin:11px;
}


The same can be said for padding and certain other attributes.




Should I group elements in one line when I write code or should I write each element in a separate line?


Write each style element in a new line, alphabetized in a new line.


.classOrderedElements {
BORDER-RIGHT: #a52a2a 3px solid; BORDER-LEFT: #a52a2a 3px solid;
BORDER-TOP: #a52a2a 3px solid; BORDER-BOTTOM: #a52a2a 3px solid;
BACKGROUND-COLOR: #ffb6c1
FLOAT: none;LEFT: 50%;
MARGIN: 2px;
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
POSITION: absolute;
TOP: 21%;
VISIBILITY: visible;
Z-INDEX: 1;
}
Do Not Write as below, because certain editors may scroll all the way to the right. And it would be difficult to debug.


.classUnorderedElements {

BORDER-RIGHT: #a52a2a 3px solid; BORDER-LEFT: #a52a2a 3px solid; BORDER-TOP: #a52a2a 3px solid; BORDER-BOTTOM: #a52a2a 3px solid; BACKGROUND-COLOR: #ffb6c1
FLOAT: none; LEFT: 50%; MARGIN: 2px; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;PADDING-TOP: 3px; POSITION: absolute; TOP: 21%; VISIBILITY: visible;Z-INDEX: 1;
}


If it is an effective shortcut, which as follows, then that can be combined in a single line, as long as it does not exceed the default view port of an editor (80 columns)


.originalLongClass{

    margin-left:    5px;  

    margin-right:   7px;  

    margin-top: 8px;  

}

.newShortCutClass { 
    margin: 8px 7px 0px 5px;
}


What about performance, since new lines take up space and more time to download the CSS files each time?


That is the job of the compressor to do at build time when a product build is done. For development it should be a new line.




What is the difference between em's , pt , px and percent?

I wish I knew where I found this to give proper credit, please leave a comment and I will link to the appropriate post.

Meet the Units

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

__________________________________________________


a) How can I increase the font size of my entire site?

b) Accessibility?

c) Performance.

Yahoo has a CSS compressor that can be configured as an ant task.

d) Separate skins based on user preferences.






e) Separate CSS styles for structure and skin?


Do not combine colors or intermix colors in between structure and skin, also handle transparency.


Identify the structural CSS.


Identify the skin CSS that you want to apply for that stucture.


Further identify the background and foreground elements of that skin.




f) Separate container and content.Identify the container tags or style that will hold your content.


Identify the content tags or style that will hold your content.


g) DOCTYPE declaration and CSS compatibilities.
h) CSS Organization


The CSS classess within the document can match the typical layout of the website.


For example the bottom of the page is the footer and the top of the css file contains the classes for the header elements.


It can be grouped based on relationship and context.


It can be grouped based on page element based or section based.


In other words given an element we should identify where the matching css could be found quickly.


__________________________________________________


Credits and Useful Links

http://www.toxel.com/design/2009/01/11/top-50-best-css-articles-and-resources/

http://www.w3.org/TR/CSS2/selector.html

http://www.digital-web.com/articles/architecting_css/

http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/

http://www.w3schools.com/css/css_pseudo_classes.asp

http://compass-style.org/

How to find the current logged in windows user from java?

The class NTSystem will help to retrieve the logged in user name and other credentials.

Example:

NTSystem obj = new NTSystem();
System.out.println("Logged In User Name "+obj.getName());

From the java docs :-

This class implementation retrieves and makes available NT security information for the current user.

http://docs.oracle.com/javase/6/docs/jre/api/security/jaas/spec/index.html?com/sun/security/auth/module/package-summary.html

Inputs and Conditional Processing in Batch File

To get input from the console in a batch file and assign it to a variable  the following syntax works very well.

set /p name=Debug Y/N?

Then you can Echo %name% to print the contents of that variable.

To conditionally check for the content of that variable

IF "%name%" == "y" (other dos commands go here...) Without the enclosing braces :-)


I found it particularly usefull to start my jboss with some agents disabled conditionally based on what options I choose, that way I can still play around with multiple agents and debugging options without having to maintain multiple copied of the run.bat files, which is messy !!!

Split String on every UpperCase Letter, String Modify Array and String Join the array as a single word.

For example we have a string like “thisIsTheDay”

http://stackoverflow.com/questions/3752636/java-split-string-when-an-uppercase-letter-is-found

1.String sample = “thisIsTheDay”;
2.String[] sampleArray = sample.getChartType().split("(?=\\p{Lu})");
3.sampleArray = (String[])ArrayUtils.removeElement(sampleArray, "this");
4. String newStringName  = StringUtils.join(sampleArray," ");

Line 1: Declares a sample string.

Line 2: Splits the string for every unicode character that it encounters.

Line 3: Removes any unwanted words from the new array.

Line 4: Joins the elements of the array as a new word.

Debug CSS

Debug your CSS and layouts using Yahoo Debug CSS

https://github.com/yahoo/debugCSS

debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.


Visit the above link for more information.

Tool to bulk rename files in windows

This is a very usefull to bulk rename files in a folder with most pattern and extension matching options.

www.spacetornado.com/Renamer/

String substitution

To substitute words in String.

String exampleString = " There is %s disturbance in planet %s ";
String newString = String.format(exampleString,new Object[]{"a","mars."});
System.out.println(newString);

Output :  There is a disturbance in planet mars.

Alternatively you can also use the MessageFormatClass

http://download.oracle.com/javase/6/docs/api/java/text/MessageFormat.html

JSF Icefaces Accessibility

We have a JSF based application, and this is our experience in making the website more accessible.

Accessibility guidelines from the web.

• http://www.section508.gov/
• http://www.w3.org/standards/webdesign/accessibility
• http://www-03.ibm.com/able/guidelines/web/accessweb.html
• http://www.w3.org/WAI/
• http://www.w3.org/TR/WCAG/

Tools to check for accessibility 

• Online website accessibility tool http://wave.webaim.org/
• Alternatively you could also use the wave tool bar http://wave.webaim.org/toolbar
• Mozilla color contrast checker.  https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/?src=search 
• List of tools for checking for accessibility http://academics.georgiasouthern.edu/accessibility/docs/tools.html

Making your website font scale and resizeable. Typically websites show three (3) A alphabets and prompt the user to resize.
AAACreate the above as links and pass in a value to resize the body font.
document.body.style.fontSize = newSize + "em";

Key issues/challenges that were faced :-

• JSF popups with dialog boxes were not picked up by JAWS reader. Had to provide a separate entry point for those pages to be shown as a separate popup window and not within the application itself.
• Wherever we had a drop down based change listener we had to implement an action listener with a "go" button.
• Flash based fusion charts font sizes were not re-sizeable http://forum.fusioncharts.com/topic/10527-how-to-auto-resize-text/page__p__41271__hl__resize__fromsearch__1#entry41271
• To resize flash movies via a script in your website please see  http://swffit.millermedeiros.com/
• Basically flash can be set as a percentage of the parent container div to resize. 
• Providing alt text for images. 
• Providing table headers for tables where the th were not rendered due to improper use, the accessibility reader tools need the th to read the column headers. 
• No multi row headers. 
• Images pixelating if you increase the zoom of the page, but you can provide alt text for those pages.  
• Auto complete drop downs need to have a different layout. 

Update:

For example if you have section headings in a page (not the html title of the page). What JAWS would allow you to do is to pick a list of headings on a page and navigate directly to that section that contains the heading. So it is essential for your pages to contain headings.

Update:
To make tables more accessible,
this is an awesome post on how to make it more accessible.

http://www.usability.com.au/resources/tables.cfm

Will update more on this blog.

CSS Cross browser shadow

.shadow {

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

CSS Cross browser shadow for divs

Parsing XML and iterating it using XPath

How to parse XML from a string and iterate over a specific node name using Xpath

DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();

DocumentBuilder dBuilder = dbf.newDocumentBuilder();
String string = xmlBuffer.toString();
// not to parse a string you have to pass it in via stream
Document doc = dBuilder.parse(new InputSource(new ByteArrayInputStream(string.getBytes("utf-8"))));

XPathFactory factory = XPathFactory.newInstance();
XPath xpath = factory.newXPath();
// match all nodes where the tag name is column and get the text content.
XPathExpression expr = xpath.compile("//column/text()");

Object result = expr.evaluate(doc, XPathConstants.NODESET);
NodeList nodes = (NodeList) result;
for (int i = 0; i < nodes.getLength(); i++) {
    logger.info(" "+nodes.item(i).getNodeValue());
}

Xcelsius Send and Recieve XML with Servlet

Xcelsius is a great tool to quickly wire up dashboards and reports without much coding. However there is the need to sometimes integrate it with dynamic data. You can create an XML data connection to query values from the database and associate it to your Xcelsius Model file.

• 
  
• Following are the steps :-

• Create an XML data connection.
• Enter an URL for the xml data connection for Example /servlet/service/BusinessInfoServlet?mode=query 
• Click on the "+" symbol to add a variable name
• The name that comes up on the screen is your variable name. Please note that. 
• Click on the cell icon to select the range of cells that you want to associate your database result to your excel model.
• Select Enable Load
• In your servlet 

response.setContentType("text/xml");
PrintWriter out = response.getWriter();
String xmlContent = ""+xmlBuffer.toString()+"";

• The structure of your XML buffer is mapped as rows and columns.  

•  The variable attribute name should map to the name in the XML data connection. 

• Also note the row vs column structure, for multiple rows you need to iterate your tags like that.



<data>
<variable name="Range_0" >
<row>
<column>3.2</column>
</row>
<row>
<column>1</column>
</row>
<row>
<column>2</column>
</row>
<row>
<column>50</column>
</row>
<row>
<column>33</column>
</row>
</variable>

Works on My Machine

http://www.codinghorror.com/blog/2007/03/the-works-on-my-machine-certification-program.html

Post on "When developers say it worked

Icefaces Load Testing

The problem that I faced was the ability to load test icefaces page, and I could not find an open source tool that helped me to load test icefaces. What other open source tools that are there for this purpose? 

Apache JMeter is fantastic for load testing, but for testing sophisticated fully ajax layouts like icefaces applications, not sure it is really easy to use JMeter. On the other hand Selenium is really easy to capture and build a test case, but to automate and scale for load testing.

A combination of the above tools we can use to create the load testing for Icefaces application. One of the most critical features is that Icefaces generates id's dynamically on every form element, to overcome this, the developer has to set the id's normatively. That way Selenium can identify the components and able to reuse the test case.

Once the test case is recorded through selenium, we can start JMeter and re-record the selenium test case through the JMeter proxy. Once we have a JMeter test case, at this point we should be able to load test the application. http://stackoverflow.com/questions/7817498/is-there-anyway-we-can-implement-selenium-scripts-with-jmeter

Oracle Certified Master Architect Java EE 5

The following are some useful links for the oracle certified software architect master course.



Certification Objectives: http://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?page_id=326
Study Guide: http://java.boot.by/scea5-guide/ch01.html
Java Ranch:http://www.coderanch.com/t/540130/java-Architect-SCEA/certification/Cleared-Part-Thanks-all
Exam Tips:http://scea5-passingpart2and3.blogspot.com/
Java Ranch:http://www.coderanch.com/forums/f-26/java-Architect-SCEA

Architecture

1. Definition of Architecture.
1. What is architecture? Excerpt from Sun Tone From this link
   The terms “system architecture” and “system design” are often used interchangeably,
   but in fact deal with two very different system engineering processes. System archi-tecture focuses primarily on the overall structure of a system, identifying major com-ponents and their relationships. The systems architect seeks to define:
1. How the overall processing should be decomposed into component parts 
2. How the major components should be organized with respect to one another and the mechanisms underlying shared system-wide operations such as
   communication and storage.
1. Thus, the architect focuses on issues such as which components belong together or apart; which ones should be visible to one another; which should be replicated; how they should be distributed; how they should talk to one another; where they should be stored; and so on.
2. Infrastructure of an Architecture.
1. Transaction Management.
2. Security
3. Distribution.
4. Communication.
1. You provide a default method for developers to implement the above features consistently.
3. Creating an architecture means you have created an infrastructure that addresses service level requirements.
1. When does architecture stop and design begins, there is a never clear answer.
2. Architecture’s focus is on what is going to be built. Design’s focus is how that architecture is going to be built.
3. For experienced designers it is not needed to provide a detailed documentation as for less experienced ones.
4. When creating an architecture it is important to identify the system limitations.
1. Funds
2. Resources
3. Time
5. When making decisions in the architectural process, these decisions need to be documented, so that we do not have to repeat ourself over and over again.