Nyan Cat, now in 3D - built in WebGL using Three.js

Tetris in 73 lines of Python.

Understanding Model View View Model, a guide for JavaScript developers.

How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week.

UX Myths, debunking user experience misconceptions.

Websites to help you learn AJAX.

Single element pure CSS animated sprite.

10 mobile web development frameworks.

Some practical guidelines for writing CSS.

Nook and Emscripten: A technical look at C++ gamedev in the browser.

Cube, a game about Google maps.

How to turn any site into a responsive site.

gzipWTF, the easiest way to check for gzip and more.

An awesome WebGL demo of the famous game Jenga.

What can you do with Paper.js?

Google's Mobile Playbook - The Busy Executive’s Guide to Winning with Mobile.

Decoding jQuery - domManip: DOM Manipulation.

Building your first Node.js application.

We invite you to join the Yahoo! Connected TV team in Sunnyvale, to learn about some exciting new capabilities we are making available at the event. We will show you how to leverage your existing mobile and tablet apps to create 2nd screen interactive TV experiences that are engaging and monetizable.

Learn how to enable your current mobile apps to communicate with Yahoo! Connected TV using our Device Communication protocol. This communication platform supports two-way message-passing between tablets, smart phones and Yahoo! Connected TV. Content sharing, keyboard, navigation, and application-specific messages can be communicated through our protocol over a local network.

• Share videos from a mobile device to the TV

• Send web page URLs from the TV to your phone’s web browser

• Utilize gestures and touch to accelerate discovery, launch and navigation of TV Apps

• Create 2nd screen Interactive apps for entertainment, games, social, sports and shopping

For more info go to the event registration page: http://yahooconnectedtv.eventbrite.com/

The larger story here is that Yahoo! is investing in this community, sharing our ideas and code to help many Open Source projects around Node.JS. We are excited to see Node.JS grow. We found a way to make developing in Node.JS even better by adding this MVC framework to it, and connecting it with our other Cocktails applications. We know you find this valuable, since we’ve already proven its value at huge scale and complexity.

Yahoo! has a history of contributing code to the developer community. Hadoop is a de facto standard technology for Big Data computation, and Yahoo! did the elephant’s share of work bringing this technology to the world and helping it mature. YUI, another Open Source project of ours, is a well-adopted user-interface library. And we have published many other projects related to machine learning, network management, and performance technologies. We plan to continue to publish code to the Open Source community.

We used the BSD license, which means that we give you permission to do things with the code with very few restrictions. Many Node.JS projects are MIT licensed, and the two licenses are very similar and compatible. You can create your own projects with this code, even commercially licensed projects if you wish. We hope that you’ll share your code changes with us, and make Mojito better, but you are not obligated to do so. Much like many professional Open Source projects (including Node.JS itself), we'll ask contributors to sign a Contributor License Agreement (CLA). We use the same CLA for YUI and it is based on the well-known Apache CLA. This helps us make sure your contributions to this project are protected from copyright disputes.

We hope hobbyists and startup companies use Mojito when they build user experiences, since we expect you’ll stretch its capabilities. We hope application developers at large use Mojito and see how they can make powerful experiences that deploy to many device types. We plan to continue to innovate in this space, investing in scalability, performance, ease-of-use, and other issues that come up when you battle-test technology at internet-scale. So fork the code at http://github.com/yahoo/mojito. Build stuff, find bugs, suggest enhancements, and keep watching this space to see what we can do together to build the next generation of cross-device, Javascript-based apps."

The event was inaugurated by Prof. Krishna Sivalingam of IIT Madras. Jeyandran Venugopal and Sudhir Anandrao from the Cloud Platforms Group, delivered an interesting keynote and talked about some of the key issues on the web where deep science and research can add a lot of value. Prof.P.Sreenivasa Kumar was so impressed by the session that he talked Jeyandran into providing a guest lecture on the semantic web and information / knowledge extraction to his students.

This followed by talks on various Yahoo! technologies and a primer on some basics to get the students started. We were surprised at a low turnout of students for some of the talks. But later realized that thanks to frequent visits to the campus, most of the students had a good understanding of the technologies and were already busy planning for their hacks.

The 24 hour countdown began at 1:00pm on 31st and the labs were buzzing with action. We also had a few teams from the nearby College of Engineering, Guindy and a few teams traveling all the way from IIT Hyderabad to participate in the event.

The hacks were judged by Prof. Ranjani Parthasarathy of CEG, Prof. Ravindran of IITM and Yahoos Thiru and Rajiv. Overall, there were 25 hacks that were demoed and the following took the top honours:

• Andro-Remote - For its X-factor / coolnes in controlling a system remotely using it as a keyboard / mouse for easy accessibility and as a game controller.

• Find Me Jars - A Developer Hack using an eclipse plugin to automatically identify dependencies during development.

• Android P2P Collaborator - Campus Cost Saver, where users can switch seamlessly between SIP / telecom networks.

• Heaven on Earth - Using virtual data to provide real recommendations on a place to live.

• Bloggezzia - A Science Hack that recommends tags for a blog post based on text similarity.

• Remind Me - The Crew's favorite use of Yahoo! technologies.

• Event Lost - Honorable mention for the herculean effort by this one man team.

The list of hacks are available on the hack tracker. Photos from the events are on Flickr. Slides from the various talks are on Slide Share.

A shout to the crew comprising of Anshu, Arun, Chelliah, Pradeep, Jayasurian, Siju, Sudhir, Sunil, for their all around help. Until the next event, Adieu.

Notebook lined paper in pure CSS.

HTML5 drag and drop tutorial, sorting photos into albums.

Nickelodeon iOS app case study, How Fi and Nickelodeon Brought the Choice to the Kids.

An extensive tutorial on how to create interesting QR codes.

Real-time games using HTML5, WebSockets, nodejs and socket.io.

Tips, tricks, tutorials & screencasts to help you improve your JavaScript.

Gorgeous particle animation experiments using HTML5 Canvas.

A baseline for Front-End Developers.

Build smarter forms with Ziptastic, an API that takes in zip codes and returns values for Country, State, & City.

Sanity check your JavaScript with TypedJS.

Daft Punk music with WebGL effects.

A beginners guide to HTML & CSS.

iPhone and Android web based simulator.

HTML5 game collection site.

The Milky Way in HTML5.

Boulder Dash in JavaScript.

7 Facts and Myths of HTML5.

Introduction to OAuth in Plain English.

We just wrapped up another great Hack U at IIT Kharagpur. Yahoos were out there from March 22nd to 25th. HackU kicked off on Thursday evening with an inauguration from Prof. Jayantha Mukhopadhya, IIT Kharagpur - Head, CSE Department. It was then followed by an introduction to hacking and tech talks on YQL, a front-end web primer, YUI, BOSS, geo technologies and PHP over two days.

Hacking officially began at 9 am on Saturday. Around 100 hackers stayed up all night producing some amazing hacks! Overall 40 ideas were submitted. On Sunday afternoon, Prof. Pabitra Mitra and Prof. Animesh Mukherjee joined us for judging. There were a number of impressive hacks which got our attention.

The winners

• YouPlayer by Kaushik, Anjani, Saurabh and Sumit: Play the music you like with YouPlayer. It automatically creates playlists for you based on your likes and interests. Recommended music and videos are played via the Yahoo! web player.
• RailConnect by Rahul, Subhro, Sanket and Amit: Find connecting trains between any two stations in India. You can set the min and max amount of buffer time and more.
• QuickTweet-n-Mail by Vishwas, Tabassum, Debajit and Amit: Tweeting and mailing a piece of text or a picture is just a right click away with this extension! Grab it here.
• HackingFood by Mogili, Mahesh, Maila and Bipin: Find recipes based on the food ingredients you have!

Honorable mentions

• CompareHatke by Prashant, Shirkanth and Gaurav: A comparison shopping search enabling customers to find and discover products from various India online retailers.
• Ticket Reminder by Sri Krishna, Anuj, Bibhas and Kishen: Get reminder for booking tickets in Indian trains before seats are filled.
• FB Metro by Salil and Aakash: Your top facebook photos, videos and link feed in a shiny interface.
• Movie Buff by Anusha, Sonam and Sunandita: Get notified about latest bollywood music and movie releases.
• My Path by Shambhu and Shashwat: Find directions to your destination avoiding the joints you want to avoid.
• College Network by Devender, Vipul, Saurabh and Nadeem: Connects college students who are travelling for internships, entrance exams, fest, etc. It helps them save money by pooling accommodation, travel and more.

See the full list of hacks submitted.

Congrats to the winners and everyone else who attended the event. Special thanks to the professors and students for being fantastic hosts. A big shout out to Pradeep, Sumana, Durga, Tom and Rohit for delivering tech talks and helping students with the hacks. Also, huge props to Chelliah, Roopal and Cheryl for managing all the logistics. Not to forget Bimala Sweets for the sweet rôshogollas they served!

Check out more photos from the event on Flickr.

An introduction to parallax scrolling.

How to develop scalable and maintainable CSS.

What happens in an internet minute?

Create an interactive liquid metal ball with WebGL.

A (very entertaining) history of Unicode.

User Experience tools from Nokia.

Pretty cool Tower Defence game on Google Maps.

Paperfold CSS, fold divs like a paper.

The price of developer happiness, a case study of workspaces at Fog Creek Software.

I'm psyched to announce today the availability of Yahoo!’s Mojito in open source, a ground-breaking JavaScript framework developed by Yahoo! for Web developers. Mojito is one of the Yahoo! Cocktails, our JavaScript-centric presentation platform for connected devices.

Notice how I said Mojito is targeted at Web developers. Why? Because we strongly believe in an open, unencumbered Web at Yahoo!. The ubiquitous World Wide Web that is present anywhere, and accessible everywhere. By releasing Mojito to the developer community we are looking to enable digital media developers to build higher-end mobile experiences faster – leading to better consumer engagement and better advertising impact to unlock more market opportunities.

Tough Choices

If you want to build apps that reach all your customers, anywhere and everywhere, this might ring a bell. Today you have to make hard choices, mutex choices – I hate those. Build a desktop Web site? Build a mobile Web site? Build an app? Translation: an iOS app? Or an Android app?

Mmmmh. Must I pick one?

Here’s an idea: build a standards-based application, and tailor it to the device it runs on. Make it degrade nicely, on all the devices. Easier said than done, for sure, but having a solid framework in place helps a lot. That’s Mojito (and YUI3). We’ve been working with Mojito for a while internally, building hybrid apps like Yahoo! Livestand. Or Fantasy Finance, a Web site. Or Fantasy Premier League Football, a mobile Web app. All three are built using Mojito because it lets you develop one codebase for any type of device. Think of the reduced effort!

I had a dream: a client+server framework

JavaScript frameworks are nothing new. We know there are already a number of them out there. However, Mojito brings something new and unique to the table.

• Mojito is all JavaScript, that's good. JavaScript is the single most widely available programming language today, and that's something worth taking advantage of.
• Mojito is a true MVC framework, that's better! MVC is a battle-tested design pattern, having proven its usefulness in desktop apps, in server-side apps, in, today, rich client-side applications. Those who ignore MVC... often reinvent it.
• But the best part of Mojito is its ability to "blur" the client/server boundary, to let you write code that runs on the client, or the server. Or both.

Huh?! I hear you say. Hear me out: Mojito apps run on the client, using the client's embedded JavaScript engine. But Mojito also runs on the server, on NodeJS. Node is great, and we love it. Node’s focus is on efficient low-level constructs for I/O, while Mojito is about providing application patterns to help you structure your code, to make it more modular, more concise, and perform better. Cool stuff, right? But we have a grander vision for Mojito. Think about it: having the ability to run JavaScript code on either end, we’ve built a framework for both. A framework that hides (a little, not too much) the execution site. A framework that lets you assemble and render data on the server, or, well, on the client too!

I really like this post by Eric Florenzano because it exemplifies the potential of what we’re doing: What “if we wrote our JS libraries so that they could run either on the server or on the client, and they did so in a transparent way”?

“Imagine a framework where the first page-load was always rendered server-side,” and desktop browsers subsequently “just made calls to API endpoints returning JSON or XML, and the client only rendered the changed portions of the page.” Mobile browsers with less power render on the server. And imagine that the app could “dynamically switch between rendering on the server and client, based on server load, or client speed”.

Pretty nifty, huh. This is what Mojito is built for.

Something else we've been thinking a lot about at Yahoo! is the notion of runtime context. The runtime context is e.g. the data connection available to your application, its speed and bandwidth. On Wifi you can do a lot... But if your user walks out to the parking lot, how's your app going to react?

Peak mitigation is another example of this: how do you degrade nicely in the face of spikey traffic? Or what to do if the device your app is running on is nearly out of power? How about shifting some of the power-hungry operations to the server, to save a precious few minutes of battery life? Bet that would make your user happy.

Interesting problems!

Control Tower to Mojito: Time to Land

To be fair: Mojito doesn’t do all of that today. That’s why we decided to open source Mojito. We want to help develop better standards for high performance Web apps, and mitigate partial connectivity issues using a – this is the most important part – non-proprietary solution.

To get there we need your help! Go to GitHub today and experiment with manually specifying which parts of your Web app run where (we call it the affinity: client or server or both).

To recap: you want to write an app for the largest audience, wherever they are. Using Mojito, you can write an app that adapts to different devices. Not only in terms of presentation, but also in terms of computation, i.e. some processing can be done on the server, or the client, up to you.

I had a glimpse of the future, and it had a minty taste: learn more about Yahoo!’s Mojito and join us on GitHub to make it do more.