Skip navigation
Help

Front Page

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Node.js employs an event-driven architecture and a non-blocking I/O model, and it provides some blindingly fast performance to some types of data-intensive Web apps. It is about JavaScript on the server side. LinkedIn, Yahoo and eBay are among ardent Node.js users, and none other than Microsoft has discussed end-to-end JavaScript coverage on its Azure cloud. The objective is absolutely fast I/O.

This article features Joyent CTO and co-founder Jason Hoffman, who discusses the roots and reason of node.js. He said:

“Why we did it is, at Joyent we have a lot of servers, more than most companies in the Fortune500 and we write in C, in a compiled language. We needed to write servers in a dynamic language for talking to certain protocols. Basically, we had to write service endpoints. The Node part of Node.js is separate. It is designed so that it can handle a lot endpoints – on the order of a million. Most things written for the [Java Virtual Machine] can only handle 20,000 [endpoints]. Node is meant to handle a lot of I/O. So we took the node part and married that with V8 [the JavaScript virtual machine from Google].”

0
Your rating: None

As part of our Doob-a-thon today, we have a Web Ninja Interview with Mr. Doob. The Web Ninja Interview series focuses on people doing amazing and interesting work using JavaScript, CSS, HTML, SVG, WebGL, and more.

Mr. Doob has delighted us with many awesome visualization and demos, including the recent Wilderness Downtown project. He is one of a crop of JS wizards that are taking advantage of new tools like Canvas, CSS3, SVG, and WebGL. Let's get started.

Brad Neuberg: First things first, the most important question is where the name Mr. Doob comes from?

Mr. Doob: I've always been very dependent on wearing headphones in order to get some level of concentration. Because of that I started using combinations like do_ob, dõ_õb, dò_ób, dê_êb, d=_=b, ... as IM nicknames. One day a friend greeted me as Mr.doob and the name somehow stuck. It was also easier for my coworkers to pronounce than my real name.

Brad Neuberg: Now that we have that out of the way, tell us a bit about yourself, where you're from, your background, interests, and some projects you have worked on (don't be humble!)

Mr. Doob: I'm originally from Barcelona (Spain). After primary school I studied Electronics and later Arts. From the early days I was very involved in this thing called Demoscene. Always attracted to anything computer graphics but, although I tried to learn code my mind wasn't ready yet and focused on design and editing. Because I felt I was learning way more from doing demos than attending college I stopped my education and looked for a job where I could develop my interests and ended up working as a HTML developer. Since then I've been alternating the coder and designer roles in every company.

Most of the projects I've worked on have been about creating the ID or online presence for small companies. It wasn't until I joined Hi-ReS! that I worked for bigger brands such as Sony, Nokia, Sprint, Jägermeister, Chanel, Dolce&Gabanna, ...

By that time I started experimenting with Actionscript and uploading the results to my site. Unexpectedly the site started to attract production companies and studios that were looking for some experimental effects and/or interactions.

Brad Neuberg: You recently worked with Google on The Wilderness Downtown. Tell us a bit about the project and what you did, including some technical details on how you built things.

Mr. Doob: Probably the project in which I've been able to apply most of what I've learned until now. There are some pieces of code reused in the project like three.js, the Sequencer code or the Harmony base code but my main tasks were working in the Street View shots and the birds. The Street View being by far the most challenging for performance reasons. We intended to directly use the Google StreetView Javascript Embed but it performed very slowly. A custom Street View Data viewer had to be done by drawing sinusoidally distorted columns of crops from the panorama texture. The effect isn't 100% how it should be but it's very similar and fast. After that there was the challenge of finding out where in the panorama was the user’s home so we could use the right point of view for some shots. I couldn't find much documentation about that, but just when I had a desperate email ready for the Google Maps guys I came up with idea of getting the vector from the lat/lng of the house and the lat/lng of the panorama data. It's now obvious but there was so much data around to assimilate and the deadline was approaching fast.

Brad Neuberg: Tell us about a hobby, interest, or something in your background that most people wouldn't expect or know about.

Mr. Doob: Hmm... not that it’s too interesting but... I used to be fairly good at football. At some point I had to decide whether to join a football team or joining a comic school. Some times I regret I didn't do the former. Something tells me I'll go back to that eventually...

Brad Neuberg: What is a clever hack, trick, or elegant turn of code you've discovered or created while working with JavaScript, HTML, CSS, etc. Give good details, and don't be afraid to be technical :)

Mr. Doob: It's not much of a trick or a hack, but I've always found very beneficial to avoid using libraries such as jQuery. I guess such libraries are helpful for cases where IE6+ support is required, but otherwise I think that, ironically, it over complicates things. The more control you have over your code the better.

Also, I’m still learning JavaScript and I don’t know the reason behind some objects. As an example, I recently stopped using new Image() and started using document.createElement( ‘img’ ) for consistency reasons.

Brad Neuberg: Where do you see HTML5, CSS3, SVG, (i.e. the new stuff on the web) going in the next year? How about the next 3 years?

Mr. Doob: They’ll continue evolving at a nice pace. And browsers will have to keep up to date or they’ll lose their user base.

In 3 years I think it’s all going to be WebGL though. I think it’s easy to imagine videogames moving from native applications to web applications. Windows/MacOS/Linux compatibility comes for free, the downloading/installing process won’t be needed and, if done right, the experience starts instantly. At this point Windows/MacOS/Linux as OS becomes irrelevant for most of the people.

It scares me that people browse the internet more and more from devices that can’t be used for authoring but, on the bright side, I like the fact that with Javascript nothing gets compiled and kids will be able to right click any page and see directly the code.

Brad Neuberg: What excites you the most about what is happening on the web today? What still frustrates you?

Mr. Doob: The competition between browser vendors. That competition is making the platform improve at a rate I wish the Flash platform would have been while I was into that.

This new trend of serving results in realtime and realtime interactions is also exciting. The internet is evolving very quickly.

What still frustrates me are usually stupid politics-based decisions like Safari and Internet Explorer not supporting Vorbis in <audio>, Safari only playing iTunes rendered h264 .mp4, ... And other than that I just can’t understand why ‘darker’ is being removed from context.globalCompositeOperation in the WHATWG specs.

Brad Neuberg: For folks that want to do the kinds of cutting edge things you've been doing, what advice or resources would you give or point them to?

Mr. Doob: Just look at the past. I’m not doing much else than combining old Amiga/DOS techniques with what the web has to offer. Thanks to the recent JS1k contest we now have lots of code to learn from and experiment.

Thanks Mr. Doob! What questions do you have for Mr. Doob? Ask them below!

We end with a presentation Mr. Doob gave recently at ARTtech 2010 on Laziness, Creativity, and Code:

ARTtech 2010: Laziness, Creativity and Code from AssemblyTV on Vimeo.

0
Your rating: None

The Google I/O sessions are now live. I/O was a big event this year, and the press liked to focus on the splashy double headed keynotes (day 1: go web!, day 2: go Android :/).

The bulk of the real content from Google engineers was very solid indeed, and there are gems for Web developers out there.

I wanted to highlight a slew of these:

GWT + HTML5 can do what?!

Remember the GWT Quake goodness from April 1st? The crew behind it are back giving a talk about the tech behind it. There are many gems in here, such as the image library by Ray Cromwell that has software and hardware back ends (WebGL). Watching the photoshop-esque filters running via WebGL makes you drool.

There were other GWT sessions:

HTML5 and Chrome

Google used the "HTML5" word a loooot that week. Here is a blending of talks, part open Web, part Chrome itself.

Ian Fette kicks off a session on HTML5 support:

Oh, and have some fun with Ignite:

0
Your rating: None

csstransformsslide

@edr is the man. He did amazing things at Yahoo! and now at his new role at Google he continues in the same vein. This time he has created the coolest set of HTML5 slides ever, using the technology inline.

Take a walk through the woods and learn about all things HTML5. Starting with the JS APIS (selector API, storage, appcache, web workers, web sockets, notifications, drag and drop, and geolocation).

Then delve into the new HTML semantic tags, link relations, micro data, ARIA, forms, audio and video, Canvas, and WebGL.

Finally, the holy trinity finishes with CSS and selectors, fonts, text, columns, stroking, opacity, HSL, rounded corners, gradients, shadows, backgrounds, transitions, transforms, and animations.

Top draw Ernest. Top draw (he based his work on a presentation from Marcin Wichary).

0
Your rating: None

Bass Schouten is a cool name, and the Mozillan has presented Direct2D hardware acceleration.

You have to grab Firefox nightly, do the about:config / gfx.font_rendering.directwrite.enabled game, but then you get to see it in action.

IE9 showed off how they will support hardware rendering, and I am sure we will see more at MIX, but it is very cool to see this across the board.

CSS Transforms/Transitions/Animations are going to feel like butter in 2010!

0
Your rating: None

Steve Souders

Our favorite ex-Yahoo at-Google web performance fast-driving all-around guru Steve Souders took a look at @font-face performance recently:

There have been a number of great posts about @font-face performance issues:

* Paul Irish: Fighting the @font-face FOUT
* Stoyan Stefanov: Gzip your @font-face files
* Zoltan Hawryluk (again): More @font-face fun

This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own.

Among these discoveries is:

* IE doesn’t render anything in the page until the font file is done downloading.
* In all major browsers, ...no files were blocked [by font downloads].
* Busy indicators... are triggered [differently in each] browser

Steve also found that IE and Chrome didn't time out in their attempts to download a font, meaning in the case of the former that the page never displays while waiting for the font, and in the latter that the text doesn't display.

Steve's conclusions are interesting:

* Only use @font-face is you’re absolutely certain you need it.
* If you have multiple font files, consider sharding them across multiple domains.
* Don’t include unused @font-face declarations - IE will download them whether they’re used or not.
* Gzip the font files and give them a future Expires header.
* Consider lazy loading the font files, at least in IE.

0
Your rating: None

Following the bombshell of Adobe announcing that Flash 10 will not support unsolicited clipboard access from Flash and JavaScript as malicious flash ads flooded clipboards a lot of developers were wondering how to make the "copy to clipboard" still work without having to do it in Flash itself.

An interesting and also slightly creepy approach to the problem is the JavaScript library Zero Clipboard:

The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

So in other words, zero clipboard is a legitimate use of the clickjacking trick to cover an element with a transparent element that provides another functionality.

There are detailed instructions how to use the library on the homepage.

I don't know about you, but somehow "copy to clipboard" buttons seem a bit redundant to me and by keeping this functionality working cause more security holes than usability benefits.

0
Your rating: None

Noupe keeps the roundups going with Most Wanted Ajax Techniques: 50+ Examples and Tutorials that consists of a lot of projects we have covered over time, but some new ones, and the added touch of putting it together in one place.

Ajax Forms

ShoutBox

Validate a Username AJAX

Ajax Instant Messenger

Ajax Tabs Content

Ajax Shopping Carts

Ajax Star Ratings

Ajax Inline Edit

Ajax Progress Bar

Ajax Pagination

Ajax File Browser & Manager

Ajax Calendar

Ajax Photo Manipulation

Ajax Dynamic Image Gallery and Slideshows

Ajax File Upload

Ajax AutoCompleter

CMS

Polls

Tabular data manipulations

Miscellaneous

0
Your rating: None

An interesting top 12 list has been published, on using Javascript to fix 12 common browser headaches:

  1. Setting Equal Heights (jQuery example: $("#col1, #col2").equalizeCols();)
  2. IE6 PNG Alpha Transperancy support
  3. Changing CSS Classes in JavaScript
  4. Browser selectors in CSS ($('html').addClass($.browser);)
  5. min-/max- height & width support
  6. Center Elements Vertically / Horizontally
  7. Display Q tags in Internet Explorer
  8. Increase the size of click targets and get more call-to-action conversions
  9. Lazy loader
  10. bgiframe: Helps ease the pain when having to deal with IE z-index issues.
  11. ieFixButtons: fixes the buggy behavior of the element in Internet Explorer 6 and 7
  12. Fix Overflow

As you will see, most of the solutions are jQuery plugins, but you could roll your own.

0
Your rating: None