Check that Google can correctly parse your structured data markup and display it in search results.

A collection of the best time-saving apps, tools, and widgets from around the web.

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile Wordpress theme, the pictograms stay sharp when used large or small. Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.

Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements.

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don't support canvas or dynamic favicons.

Here at Google, we're constantly pushing the boundaries of what's possible in a mobile web application. Technologies like HTML5 allow us to blur the distinction between web apps and native apps on mobile devices. As part of that effort we've developed a fixed position version of our mobile Gmail application. The mechanisms being used here are similar to the ones used to implement our two pane UI for Gmail on the iPad.

The jQuery plugin for doing cool scrolly stuff

I made CSS3 progress bars for a display of data inside localized leaderboards for the new analytics platform at G5.

This article will show several simple changes that can be made to improve the performance of your Web applications. Areas covered will be ECMAScript - the core language used by JavaScript, DOM, and document loading.

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Wire.js is an Inversion of Control Container for Javascript apps.

With wire.js, you can focus on coding the business logic of your components and let wire.js handle the bootstrapping and the glue that connects them together. You write a simple wiring spec in JSON (or Javascript) that describes how your components should be wired together, and wire will load, configure, and connect those components to create your application, and will clean them up later.

When viewing LCD monitors from an oblique angle, it is not uncommon to witness a dramatic color shift. Occasionally, this can appear as a total color inversion. This is primarily caused by a polarization asymmetry, where light rays passing through the pixel matrix at oblique angles are influenced by the relative orientation of the liquid crystal (see paper for more details).

Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. With this site we want to support the adoption of CORS. [more...]

If you have public content that doesn't use require cookie or session based authentication to see, then please consider opening it up for universal JavaScript/browser access. [more...]

In this high-level talk, I focus on introducing developers to some of the concepts in my article on Large-Scale JavaScript Architecture. Specifically:

Design pattern fundamentals
Three important JavaScript design patterns
Building applications that scale (and are 'future-proofed')

Accelerated panning and zooming for HTML and Canvas

Subtle Patterns is a collection of 88 high quality design patterns for
you to use freely. New patterns added weekly. A project by Atle Mo.

Notificon is a BSD licensed javascript class for providing client-side favicon notifications. Instead of requiring a number of favicons be created and served up to the client, you can specify a label and a favicon (default being the current favicon) and it will generate a favicon notification.

logstash is a tool for managing events and logs. You can use it to collect logs, parse them, and store them for later use (like, for searching). Speaking of searching, logstash comes with a web interface for searching and drilling into all of your logs.

All of your code is written in self contained modules. Modules are small
chunks of your application that serve a specific purpose. How much code
you define in a module is left up to you.

Echo is a platform for building web-based applications that approach the capabilities of rich clients. The applications are developed using a component-oriented and event-driven API, eliminating the need to deal with the "page-based" nature of browsers. To the developer, Echo works just like a user interface toolkit.

After a couple of hours coding with JavaScript, I’ve finally finished porting the XNA 4.0 Platformer game sample to HTML5/Canvas with the help of the EaselJS gaming framework. This article will provide you the game and the story of some of the questions I’ve asked myself while coding it.

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

A framework-agnostic styled alert system for javascript.

The

HTML5 audio and video players in pure HTML and CSS.
Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
Plugins for Wordpress, Drupal, jQuery, and BlogEngine.NET
See the MediaElement.js Github page
Tell some folks:

Chosen is a javsacript plug-in makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

2006-10-13: Although the specification of the HTTP protocol does not specify any maximum length, practical limits are imposed by web browser and server software.

Sorta like a couch except smaller and outside, also, a client side JSON document store. Perfect for webkit mobile apps that need a lightweight, simple and elegant persistence solution.

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Retrieves the relevant favicon for a URL, or returns a default icon should it not be able to find it. Works better than the Google version as it will find favicons specified by an HTML page's

getURLinfo is a webservice that when given a URL retrieves useful and visual information about it.

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.

Embedly is a platform for converting URLs into embeddable content. Build rich and engaging applications through Embedly's APIs. Sites with embeddable media increase time on site by 250 percent. Keep your audience engaged with video, images, audio and more.

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Share button meta and link tags

The following is a list of practical demos on how one might use the W3C's CSS3 Template Layout Module. The rendering is done by a jQuery plug-in, see the blog entry and project page for more information.
Note that these demos are different from less useful technical demos that were originally here. Additional demos and usage information has been made available by Neal Grosskopf.

The jLayout JavaScript library provides layout algorithms for laying out components. A component is an abstraction; it can be implemented in many ways, for example as items in a HTML5 Canvas drawing or as HTML elements. The jLayout library allows you to focus on drawing the individual components instead of on how to arrange them on your screen.

That’s prompted several emails where people have asked me about tradeoffs around using a querystring versus embedding something in the filename. I wasn’t aware of any performance difference, but in a meeting this week a co-worker, Jacob Hoffman-Andrews, mentioned that Squid, a popular proxy, doesn’t cache resources with a querystring. 

Usage: Click the "Add Fonts" button, check the agreement and download your fonts. If you need more fine-grain control, choose the Expert option.

Note: The Generator is processor intensive. Please be kind and don't generate more than a few at a time. Thanks!

Click to select or drag-and-drop multiple files on the upload field:

The code lets you post images from your clipboard directly to the webserver to avoid the need to go through Photoshop or another image application.

Simple & powerful client-side templating for jQuery or Zepto.js

Flask is a microframework, what means that we have more power on customizing the applications, but it is also a little more painful to build an application, because the framework is not a father that does about 10 billion of things for us: it is simple, but still fun! As Flask has no data abstraction layer, we will use the BigTable API directly.

This part of the documentation, which is mostly prose, begins with some background information about Flask, then focuses on step-by-step instructions for web development with Flask.

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Comparison of various scripts that display imagesand other objects in somehow cool CSS popups

The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance.