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

Bindows Nifty Round Corners :: No Images!

2007-07-30T23:12:00.001-07:00

In March of 2005, Alessandro Fulciniti wrote a piece on using rounded corners without the use of images -- "Nifty Corners". The idea is simple -- by stacking lines of different lengths on top of one another you form a rounded corner.Alessandro used a combination of block elements and margins to achieve this. We can do the same by using the basic Bindows building block -- BiComponent --

Meebo Me :: Dressing Up a Widget

2007-07-23T18:42:00.001-07:00

In August 2006, Meebo, the web based instant messenger provider, released MeeboMe, a Flash-based chat widget which you can place on your website. MeeboMe allows your visitors to directly chat with you while they're enjoying your site.Because it's Flash based, you can easily embed it. First, go to Meebo and create the chat widget. Then, add the Meebo generated markup. It's a simple embed tag --<

At the Movies with Jaman

2007-07-11T23:08:00.000-07:00

As part of front end development, I sign up for a lot of beta testing. It helps me to see what's the state of the art and what everyone else is doing.Once in a while, I'm lucky enough to get into private betas. Jaman was one. I've been through the private beta and now, I'm a regular user ( by the way, for all you movie lovers, if you sign up now, you'll get 3 free downloads. If you sign up via

IE Memory Leaks

2007-07-01T07:53:00.000-07:00

Mark Wubben blogged that Microsoft recently released a security patch that among other things fixed memory leaks in IE 6.0 on XP. Specifically, Microsoft mentions a fix for --"A memory leak occurs in Internet Explorer 6 when you view a Web page that uses JScript scripting on a Windows XP-based computer"More details are found here.It's important to note that the fix is only for IE 6.0 running in

Bindows 3.0 :: 3 Animations in a Dashboard

2007-06-15T00:13:00.001-07:00

Early this month, Bindows 3.0 was released.One of it's main features is the animation library. I'd written about it before.To celebrate 3.0's release, I've put the animation library to good use by using their three animators - BiSizeAnimator, BiOpacityAnimator, and BiLocationAnimator - and created this dashboard.It's an imitation of the cool looking IconDB Dashboard ( IconDB never had animated "

Bubble Dialogs for the Summer

2007-06-07T15:39:00.000-07:00

It's summer and it's time to play with bubbles -- bubble dialogs. Here they are in action.Derived from the Bindows BiComponent, they're totally reusable.Download the bubble dialog here. Learn how to use the bubble dialog here by studying the test driver. Use as you please.Have fun!

Bindows Wonderful dispose() Method

2007-05-25T07:53:00.000-07:00

Almost anything useful you do with Bindows requires you to add components to other components. This is because you build visual components by creating parent child relationships.So, if you wanted to build a custom dialog, MyDialog, you might start off with a BiComponent and use that as a container. Then add a BiToolBar to the BiComponent. Of course, you'll need toolbar buttons and menus so you

Simple Fun Faders

2007-05-19T23:03:00.000-07:00

If you're using pre-Bindows 3.0 Beta, here's a simple way to do component fading in Bindows. When Bindows 3.0 is released, it'll do a lot more including resize and relocation animations. Hopefully, this little fader will wet your appetite for that release.For a preview of the animation capabilities found in Bindows 3.0, check out my earlier writeup.Here's an example of what the fader object,

On-demand JavaScript :: IE6/7 and Firefox 2.x

2007-05-06T18:22:00.000-07:00

Last year, there was a lot of talk about on-demand JavaScripting. A good bit is found on Michael Mahemoff's Ajax Patterns Wiki. If you've never heard of it, you can read Michael's primer here.Basically, on-demand JavaScripting helps you lazy load objects. When you need it, load it. It's simple.You can run it here.When you click on the "Load JavaScript" button, we're dynamically loading a

Sprites :: Reduce the Number of HTTP Requests

2007-04-29T00:17:00.000-07:00

Recently, Matthew Batchelder wrote a piece entitled "Faster Page Loads with Image Concatenation." It's similar to the "Sprite" pattern described by Michael Mahemoff.The idea is that you load small icon-blocks and from those blocks, use the icons as images in your application. This allows you to load the images once rather than making separate requests for each image.As front end web developers,

See Your Bindows Applications this Way Part 2

2007-04-24T19:46:00.000-07:00

I updated the Bindows AboutComponent ( the first part is found here ) to show properties associated with the Bindows component. These aren't nested at all and are shown as a long list. You can click on them and their values appear in the giant bubble dialog.Of course, the properties are nothing more than what you would get with the "for (var p in object)" syntax. You can probably get the same

Seeing Your Bindows Application This Way

2007-04-06T09:20:00.000-07:00

Almost everything useful that you do with Bindows requires you to create parent child relationships with components. In other words, to create "controls" you always end up adding components to other components. After all, one of the main functionalities of the toolkit is to build visual controls that express behavior ( without behavior, your application is just another pretty face ).For example

Reusable Toolbar, Menubar, Component Scroller Control

2007-03-15T17:46:00.000-07:00

Instead of using the CSS property "overflow" to show scrollbars, did you ever want to put scroll arrows on your Bindows toolbars? How about your menu bars? Or, how about your tabs? I did.I love CSS, but sometimes, horizontal scrollbars are pretty ugly especially if all you want to do is scroll a toolbar. Scrollbars are great for scrolling the browser window to see all of the content, but it's

Bindows 3.0 Beta :: Animating Yahoo's Expanding and Collapsing Tabs

2007-03-04T12:00:00.000-08:00

I was fortunate enough to be one of the lucky ones to test drive the Bindows 3.0 Beta. The 3.0 version has some significant new features --An animation libraryVector graphics support for all browsersAdvanced gauge support for all browsersEnhanced charting capabilitiesAn improved grid panel component for better layout performanceYou can read more about it here.I was most interested in the

Asynchronous Animated Slider :: Redux

2007-02-19T18:19:00.000-08:00

In my last post, we implemented our version of Yahoo's! animated sliders using the Bindows 2.5 toolkit. I demonstrated how to load and then animate nine random photos from Nikographer [Jon] one of my favorite photographers on Flickr. Now, we're going to extend that and show you how we load his photos asynchronously (Ajax!). Just the like the last post, we'll display three photos at a time and use

Animated Picture Slider :: Pre-Bindows 3.0

2007-01-29T15:36:00.000-08:00

Recently, Bindows released their 3.0 Beta. This new flavor of Bindows comes with a lot of good things including a animation library that allows you to move, resize and fade any BiComponent.It's pretty powerful and I'll write about that later in the weeks to come. For now, I'll cook up a little practical use of animation with a picture slider control built from the trusty Bindows 2.5 library.The

Smart Scrolling with Bindows

2007-01-11T22:27:00.000-08:00

Smart scrolling is the concept of navigating through a large data set (usually a list or grid) by using scroll bars rather than by pagination. The idea is that scroll bars are more "natural" at navigation because they're already there.Yahoo!'s Bill Scott, most notable for his UI patterns work, blogs about it here ("Rico's LiveGrid"). You can see real life implementations of it as well. Live.com

Wet and Dry UI

2006-12-24T09:25:00.000-08:00

I use screen wipes to clean my monitors. These are the wet/dry systems that you find at your local office supply store. I typically do it every week and I don't look forward to it.It's not because it's messy or that it takes a lot of time. It's because I have to figure out which one is the "wet" and the "dry" pad. The two pad system is very frustrating because even though I've been doing a

Cool Blue Nile Sliders

2006-12-19T18:47:00.000-08:00

One of the most successful luxury consumer sites is Blue Nile. Who would have thought that buying diamonds was something that people would want to do on the internet, but they do.One of the really cool things about Blue Nile is that they have some really innovative ways to filter data (in this case - diamonds). The filtering is asynchronous (AJAX), but it's their filtering control that we'll be

Custom Bindows View Port

2006-12-11T15:22:00.000-08:00

I was surfing for UI design patterns besides those offered by the great Bill Scott and his team at Yahoo and found Jenifer Tidwell's Designing Interfaces . Her book describes a number of design patterns one which we all use a lot -- "Overview Plus Detail."You might not have known the name, but if you've used Google or Yahoo! Maps, you're using this pattern.The way that the pattern works is that

Creating a Google Gadget Tips-Like Widget :: Part 2 :: Making It Reusable

2006-11-27T21:12:00.000-08:00

In the first part, we looked at how we could create the Google Gadget Tips-Like Widget using the Bindows JavaScript toolkit. Unfortunately, what we created wasn't reusable (i.e. we couldn't instantiate it to make more of the same thing) which made the component pretty useless (a component is synonymous with a widget; Bindows uses the word component to mean widget). However, our prototype did

Creating a Google Gadget Tips-Like Widget

2006-11-10T22:17:00.000-08:00

I recently had to rebuild my laptop which meant reinstalling software including the very useful Google Desktop.During the installation, the Desktop installed Google Gadgets and the "tips" dialog --Basically, the dialog is a series of help screens accessed by mousing over the vertical tabs. You really can't put too much information in each pane, but I thought that the vertical tabs were unique and