skypoet's world

Oh the Scrollable Fixed Element in IE6!

2011-05-09T20:42:00.000-07:00

After two years of not writing a post, it's funny that I'm writing about IE6. For goodness sakes, it's 2011! The good news is that there's a really concerted effort to encourage people to move away from IE6. Yes, it's not secure. Yes, it doesn't support HTML5. Yes, it has huge memory leaks, but IE6 still persists.Look at Internet Explorer 6 Countdown. Look closely at Asia. As of this

Super Easy Fast-Forward Reverse Carousel with YUI 3!

2009-03-02T01:04:00.001-08:00

I've been mucking with YUI 3 and playing around with carousels using their Animation Utility. If you don't know what a carousel is, here's a suggested reading. Our carousel is a little different. Ours rewinds when we reach the end or fast-forwards when we're on the first and go to the last element. We come up with something like this --Play with it. It'll work on all the big browsers -- IE,

Don't Ever Put Block Inside Inline Elements

2008-10-26T22:26:00.000-07:00

It's been incredibly busy at work so I haven't blogged at all in over two months. I did discover something which may seem obvious to you, but is worth repeating. Don't ever put block elements inside inline elements. If you do, in most cases, nothing bad will happen. If you do, watch out. It's better not to do it. Here's

Mashup Redo!

2008-07-10T08:05:00.000-07:00

My first mashup was way back in 2006 and like everyone else, I did one with Google maps. It was really in vogue to do a mashup with maps. It meant you got to play with AJAX. You were hip! My version looked like this. I integrated the Google Map API with data from a Zip Realty feed. I wasn't building a competitor to Zillow or Trulia. I was just building a prototype for fun.

On the Importance of Clearing Floats

2008-06-30T14:10:00.000-07:00

I've been doing a lot of work with the Big Three of web development -- HTML, CSS and JavaScript. Prior to Yahoo!, I had done a lot of work with Bindows, a powerful "do everything" JavaScript framework. You built your entire web application with Bindows. You never manipulated HTML or CSS directly. It was all abstracted for you with their API.I loved working with Bindows. It allowed me to

Code Review Goodness

2008-05-21T21:23:00.000-07:00

I can honestly say that prior to Yahoo!, I never had good code reviews. I think there were several reasons for this.First, my code reviews weren't emphasized as being important. Sure, when a new project starts, there's the initial enthusiasm to discuss code reviews, but once it gets going and milestones are missed, reviews become secondary and it's far more

Cross Browser Rounded Borders Using Sprites

2008-04-14T22:06:00.000-07:00

I was reviewing techniques for rounded borders and came across this. It uses four background images for each of the corners; however, they're not using a sprite. So, we'll do it with a single sprite. Once we're done, we'll have something like this that works on all the major browsers ( IE6/IE7, Firefox, Safari and Opera ) --First, we'll take the four corner GIF images that they have, make

Persistent iGoogle Dashboards :: Redux

2008-04-06T09:45:00.000-07:00

From time to time, I get questions about the iGoogle imitation example. The most often asked question is how to persist the layout once you've moved the containers. One way to do it is to use cookies. Because the original example used the YUI library to handle drag and drop and because YUI 2.5.1 now supports a beta cookie library, we'll take the cookie approach.Keep in mind that

Using Sprites :: Transparent PNGs in IE6

2008-03-21T22:17:00.000-07:00

IE6 doesn't support transparent PNGs unless you use Microsoft's alpha filters. You can't use alpha filters for background images which is a key part of using sprites. Fortunately, you can "sort of" simulate it. Julien Lecomte has this good write-up. The key is to use the CSS clip property and to replace background with that. Here's my implementation --.sprite-s0 {width:47px;height:62px;

How to Build and Fly a Spaceship

2008-02-24T22:06:00.000-08:00

Well, not exactly. We'll build and fly a spaceship built with the YUI library ( I'm using the 2.3.0 library; I typically don't upgrade that frequently especially when things aren't broken ). Once again we'll explore event handling and extensively use the animation library.For part 1, We'll focus on listening for keyboard events and then using the YAHOO.util.Motion object we'll fly the spaceship

Animated Horizontal MenuBar

2008-02-17T22:28:00.000-08:00

The animated horizontal menubar isn't the most practical or useful menubar around, but it does allow us to explore events with complex workflows. We'll also explore how we fire events programatically.Here's our horizontal menubar --The menubar is based on the YUI MenuBar ( in fact, I've kept some of the original comments from the YUI examples ). There are many examples and it's well documented.

Dashing All the Way... Not

2008-01-30T21:50:00.000-08:00

In programming, nothing ever just happens. There aren't any gremlins or magical incantations that cause code to work. Programming is about logic and good sound reasoning. If your code doesn't work, there's a really good explanation. The challenge is finding that explanation.As a web developer, you sometimes see really weird problems like the one I saw today.In HTML, how do you add a comment?

Augmenting JavaScript's String Object

2008-01-13T20:24:00.000-08:00

A popular question to ask in interviews is string manipulation. In particular, string reversal questions are very popular.Given a string,Reverse the stringReverse the words in the stringReverse only the words in the stringWith JavaScript, all three are easy to do. One way to solve it is to augment the String object. In other words, we'll add three new functions to String. We'll call

Browser Debugging Tools

2008-01-05T17:25:00.000-08:00

We'll start off 2008 and talk about web browser debugging tools. It's a topic that we haven't visited before.At Yahoo!, we have graded browser support and so, as a frontend developer you tackle the problems found only in the major browsers.“Major” means IE, Firefox, Safari and to a small degree Opera ( if you’re interested in browser market share, check this out. )I code on a MacBook Pro running

Anonymous Function Fun

2007-12-14T23:11:00.000-08:00

Yahoo!'s Julien Lecomte wrote an interesting piece regarding the perils of using innerHTML.One of the "bad things" that can happen are memory leaks caused by circular references. He provides this inner function which breaks the reference -- (function (o) { var a = o.attributes, i, l, n, c; if (a) { l = a.length; for (i = 0; i < l; i += 1) { n = a[i].name; if (typeof

Bindows Gauges

2007-12-03T20:54:00.000-08:00

Recently, Bindows released a set of very functional gauges. These are "provided free of charge." They're built on top of their excellent Bindows component library.The gauges are built from their BiGauge2 component.One of the great things about these gauges is that it not only gives you a flavor of what Bindows can do, but that at least with these gauges, you don't need Bindows to manipulate

JavaScript String :: Primitive or Object?

2007-11-26T13:14:00.000-08:00

A colleague and I were chatting about JavaScript strings and he noted that they're not objects. He's half right.JavaScript strings are primitives much like numbers and booleans, but they can also be objects ( like Numbers and Booleans ).You can create a String object ( I've capitalized String ) by calling it's constructor --var aStr = new String("I'm a String object");You can also create a

iGoogle and Newsvine Dashboards

2007-11-18T18:19:00.000-08:00

I've always been partial to dashboards and often write about it. I've done a number of prototypes just to experiment with visualizations.Dashboards allow you to organize and see the information you want without adding too much clutter.Here's my implementation. It works in IE, Firefox, Safari and Opera.I particular like the visualizations found in the iGoogle and Newsvine dashboards. They

Select and Scroll

2007-11-11T20:23:00.000-08:00

A colleague asked how I would implement this --Click on an item in an list Vertical scroll to it I can up with this --I think the only way that this can be done is if the item ( in this case a div ) is absolutely positioned. For each item, you can get the value for CSS style "top" from the item's parent ( container ).If the item uses default positioning ( i.e. static ), "top" is auto which is

Stixy Dialog

2007-10-06T21:45:00.000-07:00

I think one of the best things to do is to imitate UI controls. It's a great way to test your front-end skills and the toolkits that you're using. It's also incredibly fun.Continuing along our previous DnD and resizing examples built in part with YUI, here's an imitation of a dialog found in Stixy, a web-based free-form collaborative and file sharing application --There's nothing really special

Resizing with YUI

2007-10-03T00:12:00.000-07:00

Here's a really simple example of using YUI's Drag and Drop component to build a resizer. It's not a reusable component, but you'll see just how little JavaScript you need to do something like this.Here's the example --The JavaScript looks like --I'm using YUI 2.3, but the version really shouldn't matter.The HTML is even simpler --and then we style it with some CSS --That's all there is to it.

SplitPane Control :: YUI

2007-09-19T23:30:00.000-07:00

One of the basic controls is the split pane control. YUI doesn't have one right out of the box. So, we'll build one.Note that Jack Slocum created one based on YUI about a year ago for his ExtJS library. He called his a "SplitBar Component."Of course, Bindows has a **pure** JavaScript one.We'll base ours off of the YAHOO.widget.Slider. We'll take advantage of its ability to slide horizontally

YUI :: First Impressions

2007-09-15T07:40:00.000-07:00

People must think I've been living in a cave, but I've only recently been playing with YUI. In the past two years, I've been a Bindows developer creating a few examples here and there and so, I know that framework pretty well.Of course, now that I'm at Yahoo!, I'm supposed to get a firm grasp on the library. Unlike other web devs at Yahoo!, I haven't taken any classes on YUI. So, this series

Yahooooooooooooooo!

2007-09-09T10:06:00.000-07:00

Two weeks ago, I joined Yahoo!.If you're a front-end web engineer, it's the best place to be. They have some of the best front-end engineers in the world in an environment where you can become a better cloud developer.If you're smirking ( or laughing ), you've probably haven't noticed what Yahoo! has contributed to the world of front-end development.A few years ago, I would have thought the same

Interaction Over Visualization

2007-08-25T18:20:00.000-07:00

Often in programming, it's best to think in orthogonal terms -- for every add, there's a remove or for every set, there's a get method, etc.As John Resig noted in a comment on his talk on "Building a JavaScript Library" that "if you have a method that performs one action, you should have another that performs an equal and opposite action. Secondly, that there should be one equal way to perform an