Posts Tagged ‘css’

Rumored to have gotten their idea while at a bar, Dustin Moskovitz (Facebook co-founder and former CTO) and former-Googler/Facebooker Justin Rosenstein have undertaken a revolutionary project aiming to eliminate 90% of repetitive code facing most web developers today.

Modern web developers often feel like they repeat a lot of code. When we come up with a unique idea, usually that amounts to being only around 10% of our code, the rest is needlessly complicated and tedious. Enter Lunascript – “an in-house programming language for writing rich web applications in about 10% of the time and code you can today.”

At Asana, we’re building a Collaborative Information Manager that we believe will make it radically easier for groups of people to get work done. Writing a complex web application, we experienced pain all too familiar to authors of “Web 2.0″ software (and interactive software in general): there were all kinds of extremely difficult programming tasks that we were doing over and over again for every feature we wanted to write.

I am definitely going to try this out. The language seems very straightforward and could be very helpful in speeding up the development phase.
Read More

So last week Mozilla released FireFox 3.5, which introduces some awesome new features, all of which can be found on the Mozilla release notes page.

The ones I’m most excited about are the newly supported CSS properties, improved JavaScript capabilities (through TraceMonkey), SVG features, and HTML 5 support.

Now we can do things like use downloadable fonts (goodbye sIFR!), specify border images, achieve amazing shadow and border effects, use the CANVAS tag, and it looks like they even included cross-domain XMLHTTPRequests.

How practical all this will become only time can tell. We know other browsers are including like features, so we can only hope developers will keep visitors and security in mind as they build applications.

The Yahoo! User Interface Library (YUI) has a bunch of very nifty little methods to make complex tasks easier. One that immediately stood out to me was isAncestor, as I can attest first-hand to the cross-browser troubles when trying to detect ancestry in the DOM. Although a very basic concept, most drop-down code often becomes bloated or restrictive. I’m not advocating the use of JavaScript drop-downs over a CSS method, but there are some added benefits of using JS to achieve this effect:

1. Clean markup, no need for conditional comments
2. The ability to animate show and hide events
3. Added styling opportunities, won’t break so long as the nested list structure remains in tact

Below is a simple example of how to use YUI’s isAncestor to create flyout menus with HTML and CSS.

(function() {
	function mouseover(e) {
		var menu = this.getElementsByTagName('ul')[0];
		YAHOO.util.Dom.setStyle(menu, 'display', 'block');
	};

	function mouseout(e) {
		if (!YAHOO.util.Dom.isAncestor(this, e.relatedTarget) || e.relatedTarget == document.getElementsByTagName('html')[0]) {
			var menu = this.getElementsByTagName('ul')[0];
			YAHOO.util.Dom.setStyle(menu, 'display', 'none');
		}
	};
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseover', mouseover);
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseout', mouseout);
})();

See Example »

If you need something more complex, see the YUI MenuCreator page.

At work I frequently encounter designs that utilize a mouseover show/mouseout hide menu that usually consists of a trigger (often an A tag, or LI element) and a menu (often a DIV, or a UL). Due to the browser inconsistencies between event handling and mouseout/mouseover DOM detection, it can be cumbersome to create a menu that is quick to implement (thus cost effective) and most importantly, stable. It also has support for a delay threshold, and the ability to animate show and hide events.

(more…)