The winner was WhatFontIs.com, which, I must admit, was also my personal favorite. A nice web application, easy to use and clearly explained by its author. The author was also very enough and donated the prize money to an humanitarian cause.
The idea is very simple. You see an image with some text on it and you want to know what font is using. You upload the image or specify the URL and the application analyze the image, splits into letters and then gives you a list of closest matching fonts. Further on you can download (if it’s free) or buy the font. It aggregates different font sources and searches through almost 250000 fonts. Extensions are available for Firefox and Chrome.
This is especially useful for designers, but not exclusively. I don’t see myself using this on a daily basis, but only because of my job nature. And I can see the value and usefulness in it.

There are a few things that I would like to see in such an application. First it would be nice that the application will also recognize the letters and to offer at least some suggestions. And to also have an option to contact a font author that will create the font for you if you haven’t found it.

Altogether, this web application is easy to use and valuable. And 100% Romanian. Nice!

First of all let me tell you that I understand where this idea is coming from. The reason behind is that a PM should have only knowledge about managing a project and he can easily apply the methods and processes to any kind of project. Far from true. The real value of a PM comes from taking the theoretical tools and processes and tailor them to fit the specifics of the project and company. Without it, a PM is no more than a glorified secretary. Or can be easily replaced by an automated software tool.

Another thing that is easily looked over is the field expertise. The argument is that a PM should not be an SME (Subject Matter Expert). True, but he should be able to understand one, to have a common language. Let me give you one example. In a software project (I will mostly use examples from this field as this is to what I’m acquainted with) a PM can easily have access to SME knowledge through a senior developer, team leader, architect etc. But a PM should also play the role of a mediator/negotiator between the resources/teams involved in a project. What will happen when two SMEs from two different teams (like QA and dev) don’t reach an agreement because what it lacks is a common ground, a common language. Then the PM should step into the scene and lay out this common ground. But if he lacks the minimal expertise in the field to understand both languages and bridge the teams …
In business, there is a saying: a worst decision is better than a late decision. Same in project management. And sometime, the PM will end up in the position of taking hard decisions for the well being of the project. Sometime these decisions are at the borderline of two SMEs.

Just for the fun let’s see a discussion between a PM with a background in construction and a developer.
John (developer): – Mike, the database broke just two hours ago.
Mike (PM): – But this should not be a problem. We will order one, you’ll unscrew the old one and mount the new one.
John (developer): [Thinking: Ohh geez, what a %&#$]
And we can laugh about the other side of the coin too. But my expertise in the construction field does not allow me to make a good one . Of course, the example is exaggerated and this exact situation can be easily handled by an SME, but I think you got the point.

And not to forget the human factor – the professionals in the team can feel frustrated and not understood if the PM does not employ a common language and a minimal expertise in their field.

So you can easily see, why a PM is a little bit of everything plus a PM. Of course, real life examples can easily contradict me (and any of us knows at least a few), but the actual added value of the PM in those cases is worth pennies.

First of all, how do you define Java custom functions in XSLT. Opposed to .Net, no workaround is needed, you simply define a namespace for all the public static methods in a class. And then you can easily access all these methods.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xpath2="java:com.wordpress.beradrian.XPath2Utilities">
...
<!-- select the XHTML elements of which CSS class is 'one' or 'two' -->
<xsl:for-each select="descendant::*[xpath2:matches(string(@class), '(\b(one|two))*')]">
...
</xsl:stylesheet>

Now all you have to do is write the com.wordpress.beradrian.XPath2Utilities class and its static method – one of them is matches.

package com.wordpress.beradrian;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * Emulates XPath2 functions extending XSLT 1.0. capabilities.
 */
public class XPath2Utilities {
	public static String replace(String input, String pattern, String replacement) {
		return input.replaceAll(pattern, replacement);
	}
	
	/**
	 * Matches an input string against a regular expression
	 * @param input
	 * @param pattern the regular expression pattern
	 * @return true if the input matches the given regular expression, false otherwise
	 */
	public static boolean matches(String input, String pattern) {
		try {
			Pattern p = Pattern.compile(pattern);
			Matcher m = p.matcher(input);
			return m.find();
		} catch (Exception e) {
			return false;	
		}
	}
	
	/**
	 * Compares two strings.
	 * @param first first string to compare
	 * @param second second string to compare
	 * @return a negative value if first string is lexicographically smaller than the second one, 
	 * 0 if they're equal and positive if first one is bigger than second one
	 */
	public static int compare(String first, String second) {
		return first.compareTo(second);
	}

	/**
	 * @param first the full string
	 * @param second the string to check if it is a suffix of the first one.
	 * @return true if the second string is a suffix for the first one 
	 */
	public boolean endsWith(String first, String second) {
		return first.endsWith(second);
	}	
}

And now let’s see how you can put the pieces together and test the result. I’m using Eclipse and starting with version 3.4 (I think, I’m using Indigo anyway) it has an XSLT debugger integrated. In Project Explorer view, right click on an XSLT file and select Run As … / XSL Transformation. Then choose the XML file and the XML result will be generated. As this is as any run/debug item you can easily configure it. Go to Run / Run configurations, select the Classpath tab and then add your project, the one containing the class com.wordpress.beradrian.XPath2Utilities. You can also check the log in Console view.

For reference you can check XPath functions 1 and 2.

<html>
<body>
<a name="one">an anchor</a> <hr />
<div id="one">a div</div> <hr />
</body>

<script>
document.writeln("Element with id 'one' is '" + document.getElementById("one").innerHTML + "'");
</script>

</html>

You would think that it will print that element with id one is a div. Yep, and Firefox, Chrome and Safari will agree with you. But not IE . For IE getElementById is synonym with getElementByName. No matter the version – 7, 8 or the mighty IE 9. I don’t know if you would guess, but if you put the div first, it has the expected behavior.
So, getElementById, in IE, returns the first element that has the id or name attribute, equal to the given value. Good to know. But sad.

.gradient(@fromColor, @toColor, @additionalImage) {
	background-color: @fromColor;
	background-image: @additionalImage;
	background-image: @additionalImage, -moz-linear-gradient(90deg, @fromColor, @toColor);
	background-image: @additionalImage, -webkit-gradient(linear, 0% 0%, 0% 100%, from(@fromColor), to(@toColor));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
}

Some time ago I wrote an article about mobile web and what choices you have to create a mobile web presence for your company. Few days ago I gave a presentation to the students in Polytechnics about the same subject. The presentation was focused more on healthy mobile web development principles, which will also be the subject of the present article.
But first of all, why you must care about mobile web?3.7 billion unique mobile phone users, 1.2 billion mobile Internet users vs 1.4 billion classic (desktop, laptop, netbook) users in 2010, and most probably surpassing in 2011, 600 million phones sold yearly worldwide. This industry all together surpasses worldwide in revenues any other IT or entertainment industry.
Not convinced yet? Then maybe you should skip the rest of the article.
Ok, so you want to dip your fingers in mobile web. Good. Let’s start first understand it.

Definitions

What is a mobile phone? If we use Wikipedia as reference a mobile phone is a device that enables you to make mobile telephone calls (… move around freely rather than stay fixed in one location …) across a wide geographic area.. Nothing more. No web, no applications. Just voice calls.
Then there are featured phones, mobile phones augmented by the manufacturer with different applications like a web browser, games and even productivity suites.
And in the late years, the smartphone. But what is a smartphone? To tell you frankly it is pretty hard to define it. More computing power or more memory? About CPU frequency or RAM size would you consider a phone to be “smart”? Complex operating system? How would you define an OS to be complex? But there is a more widely accepted definition and I will adhere to it as being the most appropriate one: a smartphone is a mobile phone on which you can (download and) install applications. And if you think a little bit, it makes sense. Nobody is born smart. But you learn and you become smart. Same way a phone, offers a new feature, by installing an application. It “learns” a new software, it becomes “smart”.
And now you have a website. Do you need to build another one for mobile? Yes and no.

Differences

Why yes? Simply because mobiles have different characteristics. We have different hardware capabilities: smaller screen sizes, resolutions, various input devices (touchscreen, trackball, smaller or no keyboard), lower capacity battery. If some of these are somehow downsides, we also have advantages: camera, GPS, newer upcoming technologies like NFC(Near Field Communication).
We also have software differences: different OSes, browsers and in many more flavors than on desktop, different tools to leverage hardware capabilities: QR codes reader, mapping applications.
When it comes to connectivity, a mobile has a smaller bandwidth and most probably higher costs per bit. But on the other hand, the user is 24/7 online (yes, it is the only device that connects us even in our sleep). Moreover, on the mobile you have a wide range of communication channels: SMS, email, web, social networks, voice, LBS, SEM. You can even expect that the classic channels (print ads, radio, TV) are closer to the user.
We don’t have to miss one important aspect: the mobile is the only device that has an integrated payment method. Either it is by SMS, integrated credit card (mostly on Asia) or NFC.
These are the technical terms, but the mobile is the most personal device and we need to take a look at its social impact. A phone is not simply a device, in many cases is the door to the user social network or it is a mobile entertainment center. In some cases, it is a fashion statement. The most expensive phone is an 8 million USD iPhone 4 and there is a 100 USD iPhone application that does nothing. Compare this with the most expensive laptop.
Another important aspect to consider when developing a mobile website or application is the user behavior. You will watch to a presentation on mobile, but most probably you will create it on desktop. You will use a software application on mobile, but you will develop it on desktop. As a rule of thumb you can compare a 30 minutes task on desktop with a 30 seconds task on mobile. That’s why you will hear about “task oriented websites”. The concept means that you will include in your site only relevant tasks to its interest and environment(physical or virtual). It would not make any sense to create a mobile website to download drivers. A mobile website for a versioning control system will offer little value, but if you reduce it to a tracking/statistics section can make its way to the user pocket.
Something that is easily ignored is the technological awareness. A phone is upgraded every 18 months, opposed to a laptop/desktop that is upgraded every 42 months. As a consequence, the technological advancement curve is much more steep and you have to keep in mind that not all the users are keeping the pace. So it could be that they are not fully aware of their phone potential.

Developing mobile web

Taking into account all these differences should I care about mobile? Definitely. Should I develop another site? No.
Following just a few principles, you will have a clean website, that can easily adapt for desktop and mobile. Without the hassle of maintaining several websites.

Content-layout separation

This principle has made its way into many software development design patterns and architectures: MVC, three tier architecture, etc. Extended to web development, this will allow faster development, cost effective maintenance, easy re-branding, improved collaboration between web developers, designers and content editors.

One web

Content layout separation allows us to have only one website and to optimize the presentation of the same content for desktop, netbooks, featured phones, smartphones, printing etc. W3C is militating for this as one of the primary objectives in web development.

Semantic CSS

Considering that you used the content layout separation, usually the link between is done with CSS classes. Semantic CSS is about how to name these classes. You should choose names relevant for the content and not the layout. So a name like bigfont will most probably become irrelevant when you will decide to change the layout or optimize for different devices; but sectionTitle will not lose its meaning over time. I will come back with a detailed article on this matter.

Progressive enhancements

This term sounds very complicated and futuristic, but it is not rocket science. It is not a framework or a new technology to learn and use. It is only a change of mindset. Mainly this applies to JavaScript and you have to keep in mind that some features that you’re going to use in your scripts could not be implemented on some devices/browsers.

To better understand the concept let’s take an example. Let’s say that you’re going to use geolocation on your website.

		navigator.geolocation.getCurrentPosition(locationHandler);
	

The above could be one option. But what happens if the user browser does not support geolocation. Your website will break and offer a poor user experience.
By simply adding an if you’re out of the trouble.

		if (navigator.geolocation)
			navigator.geolocation.getCurrentPosition(locationHandler);
	

You can even have some fail-over mechanism implemented on else branch. As I said nothing complicated, only a mindset change. Develop for the highest end browsers/devices, but think of all.

The same can be applied to CSS. If you want to implement CSS gradients you will have to do something like

		background-color: #00ff00;
		background-image: url(bg.jpg);
		background-image: url(bg.jpg), -moz-linear-gradient(90deg, #00ff00, #0000ff);
		background-image: url(bg.jpg), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), to(#0000ff));
	

This way you will be able to have a green to blue CSS gradient on both Mozilla and WebKit and just a plain green background on older browsers. Also if you have an image that one will be there as well. The browsers without CSS gradient support will just ignore the last two lines.

Liquid layout

With so many screen sizes and resolution, two possible orientations, it is nearly impossible to optimize your website for a given size. That’s why you will have to use liquid layout and your website will honor every resolution and expand through the entire viewing area. This way you will also take advantage of the full display, which is also critical on mobile.

Detection and adaptation

So far you developed your website, thinking to all the mobile users. But a user who paid over $500 on his phone wants to take advantage of it. So you will have to detect high end devices and offer extended features for them. This can be done on the client side through progressive enhancements or server side. About the latter subject I wrote another article in the past. And remember that the 80/20 rule applies here as well. 20% of the users generates 80% of the traffic. You don’t want to lose the big amount of traffic, but you also don’t want to lose a big amount of users.

Performance

This is a very sensitive topic on both desktop and mobile. On mobiles you can refer to page performance in terms of response time, cost, number of dependent resource.

Mobile guidelines

There are also very specific mobile guidelines, like no flash, order of preferred format images is JPEG, GIF, PNG, but I will not enter into details. You can find them at W3C Mobile Best Practices. You can even use automatic validators for your code like W3C mobileOK or mobiReady

This article will be a starting point for the mobile web developer and it will help you setting the right approach, when it comes to this new highly expanding field, mobile web.

a.xml

		<beans>
			<bean class="java.lang.String" id="x">
				<constructor-arg>Bean from A</constructor-arg>
			</bean>
		</beans>

b.xml

		<beans>
			<import resource="a.xml"/>
			<bean class="java.lang.String" id="x">
				<constructor-arg>Bean from B</constructor-arg>
			</bean>
		</beans>

web.xml

		<context-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:b.xml</param-value>
		</context-param>

a.xml

		<beans>
			<bean class="java.lang.String" id="x">
				<constructor-arg>Bean from A</constructor-arg>
			</bean>
		</beans>

b.xml

		<beans>
			<bean class="java.lang.String" id="x">
				<constructor-arg>Bean from B</constructor-arg>
			</bean>
		</beans>

web.xml

		<context-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:a.xml,classpath:b.xml</param-value>
		</context-param>

In both cases the Bean from A is overridden by the Bean from B. In the first case a.xml is imported in b.xml and only a.xml is referenced from web.xml and in the second case both a.xml and b.xml are referenced from web.xml, but b.xml is the last one.

If you have many configuration files and many modules this can be somewhat confusing. Personally I would add an attribute named, let’s say, override, that must be set to true if you want that the current bean override another bean definition. If not, then an exception will be thrown during configuration load. (default value will be false).
I also encountered another issue with Spring configuration: having the same configuration file name in different classpath locations (aka jars). This lead to undeterministic behavior (unlike the first case) resulting in loading one of the two files. But this one is clearly bad practice from the programmer side. I usually keep my Spring configuration files along with the sources. So in the package com.my.package I have a file package-ctx.xml. This can be referenced in Spring as classpath:/com/my/package/package-ctx.xml. I would not recommend names like spring-ctx.xml or general.xml. They are too general and counterintuitive.

Aş dori să mă înscriu şi la a doua ediţie a concursului Idei tari pentru că, prima participare a însemnat mult pentru mine prin faptul că am cunoscut foarte mulţi oameni din Romtelecom şi de la diferite universităţi şi am discutat cu oameni care vorbeau aceeaşi limbă cu mine… cea a pasionaţilor de tehnologie. Am putut să îmi prezint ideile şi să îmi fac o imagine mai clară despre locul în care se află momentan technologia în România. Am văzut că sunt mulţi oameni talentaţi şi m-am bucurat enorm că există instituţii şi fundaţii cum este şi cea a Romtelecom, care sunt interesate de tinerii ca mine şi le oferă sprijin să arate ce pot.

Este declaraţia lui Hunor Bocz, câştigătorul premiului special din cadrul primei ediţii a competiţiei naţionale Idei tari, organizate de Fundaţia Romtelecom pentru români, pe care l-a obţinut pentru un proiect de casă inteligentă.

Hunor este un puşti de numai 13 ani care în loc să iasă cu prietenii şi să vorbească numai despre muzică, preferă să mănânce pe pâine proiecte robotică şi tehnologie, în general. Iar el nu este singurul, poate doar cel mai tânăr şi entuziast aplicant la cea de-a doua ediţie a competiţiei, care îi vizează de această dată pe cei care se pricep în special la dezvoltarea de soluţii multimedia.

Orice tânăr până în 35 de ani care poate să creeze, de exemplu, un personaj interactiv online sau o aplicaţie speech-to-text (restul temelor sunt disponibile pe site-ul competiţiei) are şansa să câştige între 2000 şi 5000 de euro, dacă se numără printre cei trei mari câştigători.

Temele acestei ediţii au un caracter inovativ, iar nivelul lor de dificultate depinde de ce îţi alegi să dezvolţi. Dacă cei care se înscriu au cunoştinţe de programare, electronică nu pot spune despre teme nici că sunt floare la ureche, dar nici că sunt imposibil de abordat.

adaugă Hunor, rugându-i pe toţi cei care îl cunosc să îi ţină pumnii. Urarea este de fapt pentru toţi cei care vor să demonstreze în cadrul competiţiei că pot implementa proiecte complexe, iar pasiunea pentru multimedia le aduce şi premii consistente în valoare totală de 10.000 euro.

Tinerii pot răspunde provocării până pe 30 aprilie 2011, iar pe www.ideitari.ro găsesc toate detaliile pentru înscriere.

<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:DEFAULTS viewLinkContent="true"/>  
<PUBLIC:METHOD name="addEventListener" />
<PUBLIC:METHOD name="removeEventListener" />
<PUBLIC:METHOD name="dispatchEvent" />

<SCRIPT>
var TRANSLATED_IE_EVENT_TYPES = {
    DOMContentLoaded: "readystatechange", 
    DOMAttrModified: "propertychange",
    DOMMouseScroll: "mousewheel",
    invalid: "error" // for HTML 5
};

/**
 * Translates W3C DOM event types into IE ones
 * @param type the event type
 * @return the translation or the initial type if there is no translation
 */ 
function translateIEEventType(type) {
    var xtype = TRANSLATED_IE_EVENT_TYPES[type];
    return (xtype != null ? xtype : type);
}

function addEventListener(type, listener, useCapture) {
    return this.attachEvent("on" + translateIEEventType(type), wrapListener(listener)); 
}

function removeEventListener(type, listener, useCapture) {
    return this.detachEvent("on" + translateIEEventType(type), wrapListener(listener));
};

function dispatchEvent(event) {
    try {
        return this.fireEvent("on" + translateIEEventType(type));
    } catch(exc) {
		// if we can log ...
    	if (window != null && window.console != null && window.console.log != null)
    		window.console.log(exc + ";" + exc.message);
    }
}
</SCRIPT>
</PUBLIC:COMPONENT>

function wrapListener(handler) {
    var h = handler;
    if (h._wrapper == null) {
        h._wrapper = function() {
            var event = wrapIEEvent();
            retval = h(event);
            return retval == null ? (!event.defaultPrevented) : retval;
        };
        h._wrapper.toString = function() {
            return h.toString();
        };
    }
    return h._wrapper;
}


/**
 * Wrap the IE Event into a W3C one. 
 */ 
function wrapIEEvent() {
    // keep the W3C event as a standardEvent property of the window
    if (window.standardEvent == null || window.standardEvent.ieEvent != window.event) {
        window.standardEvent = new Event(window.event);
    }
    return window.standardEvent;
}

/** 
 * Creates a new event.
 * @param ieEvent the IE event. 
 */
function Event(ieEvent) {
	// wrap the IE event into a W3C one
}

Event.prototype.preventDefault = function() {

};

Event.prototype.stopPropagation = function() {

};

* { 
	behavior: url(cb.event.htc);
}

P.S. This was tested with IE 7 & 8. It seems that IE 9 is implementing W3C events, but still I would like to see it gone.

Code analysis

I will start with some automated code analysis tool.
I’m using FindBugs and PMD. My goal is to have 100% clear report from FindBugs. On PMD, things are a little bit different, and this plugin is reporting even the slightest problems, even though they aren’t of real concern. But this tool has a useful feature, Find Suspect Cut and Paste to find duplicate code. It does not always do the best job, but increasing the tile size can help.

If you need report metrics about your project a good choice can be Metrics. It calculates a lot of metrics, it can do a dependecy analysis, export the reports into XML.

All these tools can be easily installed in Eclipse from the update sites. Then they will provide contextual menu items to run the analysis on file, folders or the entire project, displaying the results in specific views. They can be integrated in your build process, running as Ant tasks and generating reports in various formats, usually XML.

Code review

I love automation, but human intervention is the ultimate factor. In this case – code review. And the tool here is Jupiter. I must say that I love this tool – easy to use and right on target. Unlike other similar tools, it does not require an additional web application or any additional software. It stores everything on files, which can be maintained in your source versioning system, to coordinate and communicate the review between team members.
I will enter here in a few more details.
After installing Jupiter like any other Eclipse plugins and restarting the environment, you will have to setup a review, to keep everything under the same roof. So, click on the project that you want to review, then Properties > Review > New … A wizard will start to configure your review (you can edit these settings at a later time). Here you can setup

• the review name and description;
• the files to be reviewed – you can leave blank for all;
• the reviewers – I would suggest to use the developer’s email addresses;
• review folder (where Jupiter stores all the review data) – I would suggest to use /review or /.review and to store this into your versioning system, along with the file /.jupiter (where Jupiter stores the metadata about all the reviews). Be careful, if you keep the latter on the versioning system, that one contains who is the author of the review, which should be different on each machine;
• issue types and severities – the default ones seem pretty good and they’re explained here;
• the author of this review;
• the default values for fields like type or severity;
• filters for the issues for different phases of review: individual – when issues are submitted, team – when issues are discussed and assigned and rework – when issues are addressed

Now you are all set up and good to … REVIEW. Just go to a line in a file in editor, right click and select Add Review Issue … The Review Editor view will open and there you can enter all the details. You can browse the existing issues using the Review Table view and navigate directly to an issue in the file, notice the purple icon on the left side of the editor or the small purple line on the right side. Another useful feature is the ability to customize different filters, even different for each review phase.

If you will store your review files on SVN (or other versioning system), after update/checkout, don’t forget to modify in the configuration that you are the reviewer (and not the one that committed the last version). Just go to Project Properties > Review > Select a review > Edit > Author and select your name from the list. Also after update don’t forget to refresh the project and the review.

I like Jupiter, because it does not require another server or software installation, it keeps everything in some XML files so you can use your favorite versioning system and it is easy to use and straightforward. It is like a local code issue tracker, but you can also synchronize across a team using, let’s say, Subversion. And, it is integrated in Eclipse and you can do everything in one place.

Summary