Posts in Category "Web Development"

I’m Looking for AJAX Applications

As you are probably aware, I’ve been working with AJAX techniques recently, and
I’ve been very impressed, especially with the Flash
integration
we’ve been able
to accomplish. And now I need your help. What are the coolest AJAX sites you’ve
seen out there? I’m looking for sites that inspire and amaze!

Flash and AJAX Integration Example

Kevin Lynch is at the O’Reilly AJAX Summit in
San Francisco today and tomorrow. He gave a presentation to the group earlier today
about integrating Flash and AJAX, and he demoed a cool new proof of concept Mike
Chambers
and I put together for him. We’ve integrated Flash and AJAX before
for the MXNA
reports
, but the new MXNA
Category Feed Report
takes it to a new level by using two-way
data exchange between Flash and JavaScript. First of all, click on the category
names, and notice how the feed names reload below without reloading the page. Pretty
standard "AJAX" stuff, really, but now click on a feed name and notice how both
the Flash chart and the posts below the chart update without the page refreshing.
When you click on a feed name, we’re using JavaScript to pass data into the Flash
movie which then updates itself using the MXNA
web services
. When you click on
a bar in the chart, we pass data from the Flash chart into JavaScript to load the
selected post at the top of the list. Overall, I think it’s a very good experience.

Ajaxian is reporting on the summit, and
wrote a
good summary
of Kevin’s presentation. There will be lot more information available
on how we did this with lots of code and documentation (along with a more generic,
reusable framework), but for now, feel free to view source and steal. You can
even right-click on the Flex chart and view its source, as well.

Creating Custom JavaScript Alerts

Slayeroffice has a
nice tutorial
on creating custom JavaScript alert boxes. Custom
alert boxes, in and of themselves, are nothing to write home about, but the
slayeroffice tutorial suggests an interesting twist. Rather than calling your own
alert function, like this…

if (foo) {
myCustomAlert("Hey, you can't do that!");
}

… they suggest actually replacing the default window.alert() function with your
own. There’s plenty of code in the tutorial, but here’s the code that actually
performs the magic:

window.alert = function(txt) {
createCustomAlert(txt);
}

What’s the advantage of overriding the default window.alert() function rather
than calling your own? First, it’s way cooler. But second, it allows you to easily
retrofit existing applications with new and improved alert boxes.
For instance, most web applications include a common header, so in order to change
all the alert boxes for an entire application, you can simply drop some new code
in your application’s header, and magically, all those ugly gray default alert
boxes are transformed. Pretty cool stuff.

I’ve Been Experimenting with AJAX

I did a new installation of MXNA
2.0
last night. In addition to adding "Most Popular"
views (check out the new menu at the top on the right), I’ve also been experimenting
with AJAX. Each post has an "Email to a Friend" option under it. Click it and give
it a try. It exposes an email form and sends your email without ever refreshing
the page. I think it makes for an improved user experience, and works great with
ColdFusion and, after some tweaks, the MXNA 2.0 framework. Expect to see more AJAX
features rolled into MXNA 2.0 in the future.

IE Only Allows Two Simultaneous Connections

I didn’t know this, but according
to IEBlog
, Internet Explorer only allows two
simultaneous connections to any single domain. I knew there was a limit, but I
thought it was higher. Anyway, IEBlog tells why, and what you can do as a developer
to get around it.

Rounded Corners Using CSS

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #ddd}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

My pal Ben Simon sent me this URL a while ago that describes a technique for creating rounded corners using just CSS and no images. Check out Nifty Corners for the full scoop. Hopefully you are
looking at an example right now, unless it doesn’t work in your
browser for some reason (I haven’t done extensive testing). If it
doesn’t work, leave a comment here so people will know the compatibility
limitations.

Update: I have no idea why this wouldn’t work in IE. An isolated version of the code works fine as do the examples. I suspect it’s just buggy IE rendering, but if anyone can figure out why it’s not working, and can suggest a fix, I will publicly shower him or her with praise.

CSS XML Buttons

It’s not rocket science, but here’s an easy way to make XML buttons(or any kind of button you want) using CSS. In other words, this
button (XML) is not an image, but is done all with CSS. I like using
CSS buttons when I can because it gives me a lot of control over
the look, and I can change the label easily without opening an image
editing application. See? Christian Cantrell

Anyway, here’s the CSS class:

.xml-icon {
padding: 0px 3px 1px 3px;
margin: 0;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff;
background-color: #ff6600;
border: 1px solid;
border-color: #ffc8a4 #3f1a01 #3f1a01 #ffc8a4;
cursor: pointer;
}

Advanced JavaScript Settings in Firefox

There are few things I hate more than websites that resize and/or move your browser.
I don’t visit a lot of sites that would tend to use such techniques, but every now
and then, I’ll come across one. I found one the other day (a watch-related site
which I will allow to remain anonymous) at which point I decided I would not quit
until I found a way to configure Firefox to not allow such poor JavaScript behavior.
Fortunately, the solution was simple. Open up Firefox preferences, go to Web Features,
and click on the "Advanced…" button next to JavaScript. You can allow
or disallow the following:

  • Move or resize existing window
  • Raise or lower windows
  • Disable or replace context menus
  • Hide the status bar
  • Change the status bar
  • Change status bar text
  • Change images

If your website relies on any of the functionality listed above, you might want
to consider a redesign. I’m not saying that Firefox is about to take over the world
(though I certainly wouldn’t mind if it did), but I think it’s safe to say that
the trend is toward giving end users more control over their experience. And in
the end, users will simply appreciate your site more if it behaves the way they
want it to rather than the way you want it to.

Extending Google Maps With JavaScript

If you’re into Google Maps, check out Jon
Udell’s screencast
demonstrating the
Google Maps Route Animation
Bookmarklet
. Remarkable stuff. This project (consisting of a single line of
JavaScript code contained in a single bookmarklet) shows some real creativity,
innovation, and just plain smarts. But it also raises some other interesting possibilities.

Right
now, there’s a trend toward application extensibility, usually through web services,
driven by companies like Amazon, eBay, Google, Flickr, etc. But that’s all "server-side
extensibility". Why not client-side extensibility? Are we witnessing the beginning
of a new trend? I’ve experimented with bookmarkelts before, but it’s
fascinating how this one jacks into the existing JavaScript on the page to add
very cool new functionality to the application practically as though it were native
functionality. It’s admittedly sketchy since Google’s code will likely change someday,
swiftly breaking the bookmarklet. But what if it were based on public, published
API rather than some very clever reverse engineering? As applications become
richer, will they start providing JavaScript and ActionScript APIs to allow third-parties
to build simple client-side extensions? Will we start extending RIAs in the same
way we extend Firefox? Man, I hope so!

IE 7 Announcement: A Retrospective

I think it’s been about three days since Microsoft announced that they will release
a new version of IE. The announcement was so thoroughly blogged and discussed that
I didn’t bother blogging it myself (I was too busy reading what others had written),
but now that the dust has settled, I want to offer my two cents.

First, if you haven’t done so already, you might want to check out the official
Microsoft press release
. If you’re in a hurry, I’ll save you the trouble. Here’s
the most relevant excerpt:

Gates announced Internet Explorer 7.0, designed to add new levels of security
to Windows XP SP2 while maintaining the level of extensibility and compatibility
that customers have come to expect.

Next, read the post
on the IEBlog
. Again, I’ll save you the trouble:

…we listened to customers, analysts, and business partners. We heard a clear
message: "Yes, XP SP2 makes the situation better. We want more, sooner. We
want security on top of the compatibility and extensibility IE gives us, and we
want it on XP. Microsoft, show us your commitment."

What I’m hearing loud and clear here is that Microsoft wants to release a new
version of IE for XP, and they want to focus on security. Now read
the comments left in response to the post on IEBlog. They are far too numerous
to even paraphrase here, and it would probably take you all day to read through
them all, but just read a few at random and the message will be clear, which is
that security updates are fine, but what Microsoft really needs to focus on is
standards compliance and rendering. In other words, "maintaining the level of extensibility
and compatibility that customers have come to expect" is not what customers are
expecting.

Microsoft has put itself in an interesting position. They have publicly announced
that they are listening to their customers, and are committed to giving them what
they want, however they have also indicated that their agenda is not consistent
with what it appears their customers want. I will reserve judgment, but one thing
I will say is that it’s not yet clear to me whether Microsoft has created an
opportunity for themselves with this announcement, or for Firefox.