Web Lab. A series of interactive Chrome Experiments made by Google. See the magic of the web brought to life. Open to the world online. Live from the Science Museum, London. Enter the Lab.

The internet is incredible. It powers our lives everyday. It allows us to explore the world without leaving our homes. It gives us access to infinite information. But all this magic is invisible to us. Until now.

The web has evolved from simple text pages to rich, interactive applications. Google developed Chrome from the ground up as a browser for this modern web. An intelligent platform perfect for today’s complex web pages and applications. Chrome’s aim is to spur on innovation amongst all browsers allowing everybody to experience the full potential of the web.

Through 5 interactive Chrome Experiments, Web Lab explores the extraordinary workings of the internet. Each experiment explores and demonstrates a different web theme. Worldwide visitors both online and offline will be able to play live music together, launch data into cyberspace and trace where images on the web actually live, see how robots can see people, and get teleported to unexpected places all over the world.

This Exquisite Forest is an online collaborative art project that lets users create short animations that build off one another as they explore a specific theme. The result is a collection of branching narratives resembling trees.

The project was conceived by Chris Milk and Aaron Koblin, and produced by Google and Tate. It makes extensive use of Google Chrome’s HTML5 and JavaScript support, as well as Google App Engine and Google Cloud Storage.

A physical installation is located in the collection galleries on Level 3 at Tate Modern, and will be open for approximately 6 months beginning on July 23, 2012.

Search Less,Play More : An extensive and visual collection of jquery plugins listed according to its category.

CodePen is all about front end code inspiration and education through sharing. In the editor, enter HTML, CSS, and JavaScript and the combined result is displayed below. Save your Pen, share it, and explore others. This is extremely useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.

CSSDeck is a collection of CSS Creations.

Everything is pretty straightforward and simple on CSSDeck. We're trying to form a big collection of CSS resources purely for educational, inspirational and fun purpose that can also be applied to your projects to certain extent!

IconHot is a useful site for developer of web and application. It containing 60,000+ high-quality icons, each icon has PNG, ICO and ICNS three formats available for download to used in Linux, Windows and Mac systems. Note that you should reading the license of icons before using them in your application.

a directory of useful single-page sites and apps.
Animation, Bookmarklets, Colors, CSS, Date & Time, Editors, Grids, Icons, Images, Javascript, Lorem Ipsum, Markup, Math, Misc, Patterns, Photoshop, Reference, Regular Expressions, Responsive Design, Search, Sprites, Starter Kits, Typography, Unicode, Web Performance.

Search beyond Twitter’s history.

Search Twitter's 10 day search limit. Note: snapbird does *not* write to your twitter stream. It requires DM access to perform search. You do not need to authenticate to search your own timeline.

Grow your Twitter network with twiends, the leading directory of Twitter Users, Apps and Twitter followers.
A community site for finding friends with common interests.

Illuum is a new web app to track, study and improve your happiness.
It gets you out of your head and shows you things you never knew about yourself. All for the low low price of whatever you feel happy paying!

Galaxicons v.1 includes 200 icons in 32px and 170 icons in 16px perfect for use in webdesigns, webapps, desktop apps and mobile apps.

Acid3 Browser Test

Acid3 is the third in a series of test pages written to help browser vendors ensure proper support for web standards in their products.

Acid3 is primarily testing specifications for “Web 2.0″ dynamic Web applications. Also there are some visual rendering tests, including webfonts. Here is the list of specifications tested:

• DOM2 Core
• DOM2 Events
• DOM2 HTML
• DOM2 Range
• DOM2 Style (getComputedStyle, …)
• DOM2 Traversal (NodeIterator, TreeWalker)
• DOM2 Views (defaultView)
• ECMAScript
• HTML4 (<object>, <iframe>, …)
• HTTP (Content-Type, 404, …)
• Media Queries
• Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
• XHTML 1.0
• CSS2 (@font-face)
• CSS2.1 (‘inline-block’, ‘pre-wrap’, parsing…)
• CSS3 Color (rgba(), hsla(), …)
• CSS3 UI (‘cursor’)
• data: URIs
• SVG (SVG Animation, SVG Fonts, …)

Canvas is a place to share and play with images.

Blend, morph, and mash any two faces you want in seconds! Download Face Switch to see what you and your partner’s child might look like, check out yourself with a new haircut, or just mash together random faces into a mix of the two for hilariously entertaining results today!

Morphing unleashed
Morph WHO you want the WAY you want. No more limited morphing templates !
Face Switch gives you so much artistic freedom without any limitations!

Gallery and More
Check out our fantastic gallery or load picture from wherever you want.

Share with friends
Share with everyone - instantly!
You can share your work over Facebook, Twitter and e-mail, save it for later fun or post it in our web site gallery.

Go wild
Explore the possibilities, use your imagination and keep morphing.

Automatic face recognition
Let us handle face recognition, tedious scaling & positioning!

Get it precise
If you think that automatic recognition is not enough you can always edit the position of your eyes!

Face switch
Flip faces with just one touch!

Easily create and share your favourite video playlists. Using YouTube API for HTML5 videos and player, Bitly API for url shortening. Instant search for videos, add them to the playlist, enjoy and share... that's all!

HTML5 App that calculates responsive values using Ethan Marcotte's (@beep) Formula: Target ÷ context = Results

As some people that have been following me for a while know, the 140 character limit on twitter bugs me a lot sometimes, and I’ve tried to find a way to overcome it previously as well. The most common ways these days seems to be either cutting down the long tweet into multiple pieces (yuck) or using a service to host the longer tweet and post a summary with a link to it.

The latter isn’t an entirely horrible option. However, I see 3 big downsides:

1. I’m not very comfortable with the idea of some external service hosting my content which could close down any time due to failure to monetize their website. In that case, I’d be left with some dead links that are of no value and my content would be lost forever. Yes, they usually warn you in advance in such cases, but such news could be missed for a number of reasons.
2. People (including yours truly) don’t plan those things in advance. They just seek services like that at the exact moment when they want to post a long tweet. Being greeted with a prompt to use Twitter Connect is NOT nice. For starters, it slows me down. Also, I don’t want to give permission to every website on the effing interwebs to post on my twitter timeline. I owe it to my followers to be responsible and not risk filling their timelines with crap.
3. Most of these websites look like someone puked and what came out happened to be HTML and CSS. The only exception I’ve found is twtmore, but it still suffers from #1 and #2.

twee+? Seriously?

Yes, I like it. The plus means “more”, which is fitting and + kinda looks like a t, so it could be read as “tweet” as well. Yes, I know that the word “twee” has some negative connotations, but oh well, I still like the name. Whoever doesn’t can just not use it, I won’t get depressed, I promise.

Geeky stuff

How it works

• A relatively new feature, Twitter automatically wraps URLs in t.co links, making them only 20 characters long.
• All the text of the tweet is stored in the URL hash (query string will also work, although the output uses a hash). Some research revealed that actually browsers can handle surprisingly long URLs. Essentially, the only limit (2083 characters) is enforced by Internet Explorer. I decided to limit tweets to 2000 characters (encoded length), not only because of the IE limit, but also because I wouldn’t like people to post whole books in t.co links. We don’t want Twitter to start taking measures against this, do we?
• A hard part was deciding which encoding to use (twitter is quite limited in the characters it parses as part of a URL).
  • My first thought was base64, but I quickly realized this was not a very good idea:
    • The encoding & decoding functions (btoa() and atob() respectively) are relatively new and therefore not supported by older browsers. I’m fine with the app hardly working in old browsers, but existing links must as a minimum be readable.
    • It uses approximately 1.34 characters per ASCII character. Unicode characters need to be URL-encoded first, otherwise an Exception is thrown. URL-encoding them uses 6 characters, which would result in 8 characters when they’re base64 encoded.
  • Then I thought of using URL-encoding for the whole thing. The good thing with it is that for latin alphanumeric characters (which are the most) it doesn’t increase the string length at all. For non-alphanumeric characters it takes up 3 characters and 6 characters for Unicode ones. Also, it’s much more readable.
  • Still, implementing it was tricky. It doesn’t encode some characters (like the dot), even though twitter doesn’t accept them as part of a URL. Also, escape() and encodeURI() behave differently and the Unicode encoding returned by the former isn’t accepted by Twitter. So I had to combine the two and do some substitutions manually.
• When the textarea changes, the hash does too. The whole thing is a form with action=”http://twitter.com/intent/tweet”, so submitting it does the right thing naturally. I keep a hidden input with the tweet and the textarea has no name, so it doesn’t get submitted.
• Usernames, hashtags and URLs get extracted and linkified. Usernames also get an avatar (it’s dead easy: Just use twitter.com/api/users/profile_image?screen_name={username} where {username} is the user’s username)
• Internal “pages” (like “About” or “Browser support”) are essentially long “tweets” too.
• A little easter egg is that if the browser supports radial gradients, the gradient follows the mouse, creating a spotlight effect. This looks nice on Chrome and Firefox, and really shitty on IE10, probably due to bugs in the gradient implementation (which I have to reduce & report sometime).

Buzzword compliance

This little app demonstrates quite a lot new open web technologies (HTML5, CSS3 etc), such as:

• textarea maxlength
• placeholder
• autofocus (edit: I had to remove it cause it triggered a Webkit bug in Safari)
• required inputs
• New input types (url)
• History API
• oninput event (with keyup fallback)
• hashchange event
• SVG
• Common CSS3 (border-radius, shadows, transitions, rgba, media queries)
• CSS3 gradients
• CSS3 animations
• CSS3 resize
• :empty

Oh yeah, I did forget something. There it is: TWEE+

Source

Discover new music. Uses last.fm API to discover similar artists and bands.

A Pocket Dribbble Colour Browser.
Colourrrs allows you to explore Dribbble through random colour selection.

This little application will help you for the minification of CSS files. All you have to do is to drop the files one by one on the page, you can edit the content of the files if you want by clicking on their names and begin the minification by clicking "Compress". This app uses HTML5 elements, pure javascript and an offline manifest so you can use it even when you are disconnected from Internet. I hope this will be useful to some of you !! ;)