A tutorial on how to create an animated 3d bar chart using CSS only.

lvi.org

a jQuery slideshow plugin
it's easy
The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis.
it's small
At 15kB for the full version, and a minute 6kB for the hyper-compressed version, and tidy code, this plugin won’t bog down your site
or burn out your users’ browsers, even using it in multiple iterations per page.
it's flexible
With the little markup you need to add to your site, you get a full featureset, like the ability to put whatever data you want within the slide window, even mixed types, a proportionally-correct status display that configures itself, fullscreen display and swipe functionality.
it's neat
Add some slick usability
to your site with a plugin that’s fun and easy to use. And if you have any other questions, I’ll be happy
to help you out.

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

SlidesJS is provided with limited support but if you find a bug please submit an Issue with a brief description of the bug and a link to where it can be reviewed.

For general support please visit the SlidesJS User Group.

SlidesJS is compatible with all modern web browsers and jQuery versions 1.4.4+.

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Linked via: Veerle

Nice collection I put together of sans-serif fonts: Armata, Abel, Varela, Varela Round, Coda, Gruppo

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: SASS

Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

Wheter you're a designer or a hardcore programmer, SimpLESS is perfect for you. It compiles your *.less files into valid CSS.

Alternative to Less.app

Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. Unfortunately, setting these virtual machines up without Microsoft's VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE6, IE7, IE8 and IE9 running in separate virtual machines.

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good.

Press enter! I'm a demo

Download DropKick.js
That's not all! DropKick also degrades gracefully: if the user has javascript disabled everything will continue as normal using your regular <select> elements. Did we mention it works on IE7 and 8?

Our Project Planner will only take five minutes to complete. It's a great starting point for us in terms of beginning to understand your requirements, budget and schedule. Go and stick the kettle on and by the time you're finished here, it should be ready to pour. Milk, no sugar, thanks!

Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.
Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.
Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers.

Its how wishes come true. I love the new "Full Screen API" form HTML5. Just want to share code about how get started using it.

Facebook started using it, you can see a small button on photo lightbox.

Going fullscreen

One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc.


Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)

Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.

And now we can!

Unicode graphic shape.

Linked via CSS-Tricks.com

open source CSS builder for shadows, backgrounds, and borders.

Linked via Veerle

A Responsive Web Design tool for creating grids by Erskine Design.

Via: <http://coding.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/>

Ziptastic is a simple API that allows people to ask which Country,State and City are associated with a Zip Code.

The purpose for this service is to STOP the madness of having to fill those information out on webforms. If you've ever filled out a webform, then you have probably gotten to the address section and simply entered in your street information and then your city, state, country and then your zip code. This has always bothered me because the 3 fields prior to the zip code can be determined from the zip code!

Icon Roundup

"I can’t overstate the value of a good flat, sharp, detailed icon. You can style it any way you please, use it in a variety of projects, and communicate difficult interface concepts in a 16 pixel space. Considering the incredible amount of work that goes into designing each icon, and the quality exhibited below, these sets are scandalously low priced. So get ready to do some serious tax-deductible shopping."

Nice tool to build custom fonts with icons.

"Icon fonts are awesome. They typically come with standard vectors as well if you prefer working with them that way, but these icon projects go the extra mile in offering an @font-face compatible font for web use."

impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Slides.

Linked via Veerle

Paper by FiftyThree is the easiest and most beautiful way to create on the iPad. Sketch, capture and share your ideas across the web. Free on the App Store.

Beautifully designed app and website

Designed Taylorguitars.com, which is REALLY nicely done for a guitar company. Lots of fit and finish.

Taneka Duggan

What you gain is the ability to break your cached versions of files when necessary, but to also set long-term cache times on these assets (while they’re not changing) and expect cache servers between you and your users to properly store these objects.

Useful for LVI

I've posted about doing this previously using the timestamp as part of a query string, but it would appear this method has implications with proxy servers often not caching the files due to the query string. I found that post thanks to the comments to David Walsh's recent post in which he suggests always writing out the timestamp to the Javascript or CSS filename.

The problem with doing that is it will force the browser to always download a copy of those files on every page request which somewhat defeats the purpose of caching. Instead I'll show here how to make the filename unique based on the last time it was modified, and without having to use query strings or rename the file thanks to a little bit of .htaccess magic.

If the stylesheet is css/main.css and the Javascript file js/common.js you can write out the appropriate tags into your page like this:

Useful for LVI

AUTHOR
Ian Coyle / Inquires

ABOUT ISSUE ONE
This inaugural issue is a personal retrospective
on the ideas of exploration and home.

Rubular is a Ruby-based regular expression editor. It's a handy way to test regular expressions as you write them.

To start, enter a regular expression and a test string. Or you can try an example.

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

Nice looking buttons.
Might be useful for LVI.

If you had told Postel that there would be 90 million untrained people, not engineers, creating web sites, and they would be doing all kinds of awful things, and some kind of misguided charity would have caused the early browser makers to accept these errors and display the page anyway, he would have understood that this is the wrong principle, and that, actually, the web standards idealists are right, and the way the web “should have” been built would be to have very, very strict standards and every web browser should be positively obnoxious about pointing them all out to you and web developers that couldn’t figure out how to be “conservative in what they emit” should not be allowed to author pages that appear anywhere until they get their act together.

But, of course, if that had happened, maybe the web would never have taken off like it did, and maybe instead, we’d all be using a gigantic Lotus Notes network operated by AT&T. Shudder.

As usual, the idealists are 100% right in principle and, as usual, the pragmatists are right in practice.

SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web.

In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).
Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

One-sided box-shadow
We all know and love box shadows, but sometimes the typical shadow may not be exactly what we want. For example, sometimes we may be doing a realistic shading of a certain element on our site and want the shadow to appear only one specific side. Or we may be interested in doing a hover element, or a bouncing element and let’s face it—nothing amplifies the beauty in that like a one-sided box shadow.
What we do here is pretty simple actually, we will use negative spread radius to squeeze the box shadow off of one edge. So for instance let’s imagine we have a gray box element and it is set up with a width and height of 40px by 40px. Our CSS would look like:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}
That will give us exactly what we need, and in one simplified line of code at that.  Like I said, if you are using a lighting element (or theme) to shade your site in one specific direction as though it were a painting, this is the perfect solution for you.
Similarly, bouncing or hover:bounce elements are just  perfect for this.  In the latter case, activate the shadow after the bounce has started, and deactivate once it has landed, and then wow seems you are turning into a designer already.

CONTROLLING FRESHNESS WITH THE EXPIRES HTTP HEADER
The Expires HTTP header is a basic means of controlling caches; it tells all caches how long the associated representation is fresh for. After that time, caches will always check back with the origin server to see if a document is changed. Expires headers are supported by practically every cache.

Most Web servers allow you to set Expires response headers in a number of ways. Commonly, they will allow setting an absolute time to expire, a time based on the last time that the client retrieved the representation (last access time), or a time based on the last time the document changed on your server (last modification time).

Expires headers are especially good for making static images (like navigation bars and buttons) cacheable. Because they don’t change much, you can set extremely long expiry time on them, making your site appear much more responsive to your users. They’re also useful for controlling caching of a page that is regularly changed. For instance, if you update a news page once a day at 6am, you can set the representation to expire at that time, so caches will know when to get a fresh copy, without users having to hit ‘reload’.

The only value valid in an Expires header is a HTTP date; anything else will most likely be interpreted as ‘in the past’, so that the representation is uncacheable. Also, remember that the time in a HTTP date is Greenwich Mean Time (GMT), not local time.

For example:

Expires: Fri, 30 Oct 1998 14:19:41 GMT
It’s important to make sure that your Web server’s clock is accurate if you use the Expires header. One way to do this is using the Network Time Protocol (NTP); talk to your local system administrator to find out more.
Although the Expires header is useful, it has some limitations. First, because there’s a date involved, the clocks on the Web server and the cache must be synchronised; if they have a different idea of the time, the intended results won’t be achieved, and caches might wrongly consider stale content as fresh.

Useful for launching sites (LVI, Life Values Inventory)

Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.

It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.

SlideDeck is the web&#039;s most powerful Free jQuery Slideshow, Javascript Slider and WordPress Slider Plugin. Organize content and increase conversions.

First found on OKGO.com

An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.

Linked via Veerle

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

The Emigre Font Library is now available in Web Font format for use in web sites.

Emigre Web Fonts are provided in both WOFF and EOT formats for use with the CSS @font-face rule. The combination of WOFF and EOT formats allows the Web Fonts to function on most currently used browser types.

Emigre Web Fonts are licensed for self hosting, with a choice of a 5 year renewable term, or a one time perpetual term option, giving you full control over server performance, and eliminating monthly or annual subscription fees.

We have optimized our web fonts hinting for screen display. However, as the technology remains in flux, the variables of the different platforms, screens, rasterizers, browser defaults, and user preference settings, sometimes generate inconsistencies beyond our control.

Look for the Emigre Type Director's Picks for Web Fonts that perform best across all browsers and sizes.

Emigre Web Fonts are formatted to function exclusively on web pages and cannot be installed and used like traditional desktop fonts.

About $40/5years (less than $10/year).
Very nice fonts. Linked via Dan Benjamin (Hivelogic, 5by5, Hypercritical)

SpriteRight is capable of taking your websites existing images and converting them into a spritesheet in seconds. Whether you're importing individual images or existing .CSS files, SpriteRight takes care of the hard work for you. Even if you've had no previous experience with spritesheets, SpriteRight's example code generation tool will have you up and running in no time at all.
What else can SpriteRight do?

SpriteRight comes with an intuitive packing algorithm that's capable of arranging your images in the most optimal way possible. The less space a spritesheet takes up, the quicker your website will load and the less bandwidth it will require. SpriteRight also comes with the ability to trim images of unnecessary transparent areas, further reducing filesizes. For more information on exactly what SpriteRight is capable of, why not watch our introductory video?

Linked via CSS-Tricks.com

The Beauty in CSS Design

A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS. Select any design from the list to load it into this page.

So What is This About?

Back in 2003 (that's 8 years ago!) Dave Shea launched the CSS Zen Garden. It showcased what was possible with CSS-based designs, leading to an explosion in the use of CSS on the web. More recently, Peter van der Zee created JS1k, a competition to build cool applications with no more than 1 K of JavaScript.

At lot has happened since the Zen Garden days, and today you can do almost anything with only CSS. As CSS use is growing, so is the average CSS file size. Popular sites have in average 27 K of CSS, but some use up to a megabyte of style sheets!

Do we need that much? CSS1K invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.

with CSS3 Transitions and Animations

Linked via Veerle

It’s like having your own printing press, newspaper and a dog to fetch it for you, all in your front room.

AWESOME design and navigation

With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device* worldwide.

*not yet touch-friendly—I’m working on it.

Develop
While you’re designing, you’re also developing! Patternizer generates code that can be used with patternizer.js to create these patterns on any <canvas> element. See the Demos & Documentation for details.

Patternizer patterns don’t use any images and only require a single tiny script. In many cases patternizer will be smaller than an image-based solution (if it’s even possible with an image!). Attach patternizer.js once and create as many patterns as you want across your entire site.

Who is Patternizer?
Patternizer is maintained by 2 people:

Matthew Lein—most of the things you can see, touch, and play with. @matthewlein
Dave Johnson—most of the things you can’t see, but are still very important.

Linked via Veerle

This is not a team of weaklings! We use our creative strengths against the internets.

I’m a happy camper. I just moved into a new office space that’s directly suited to the way I work, think, and create.
Months ago, I wrote about improving the working environment inside my desktop, and with the move I sought to extend that process to my physical workspace. The plan was to fashion a space that makes my work more active—not simply in regard to my physical well-being, but to lend substance and action to my often intangible work.

Workshops appeal to me. The tools you use aren’t lined up neatly in a dock. Bandsaws, welding stations and workbenches all have their own spaces and  environments conducive to the work at hand. The workbench, with its fairly comfortable stools and extra space, is for tinkering. It says, “Hang out here. Take your time. Do the work right and enjoy it.” The bandsaw across the room is plastered with warning labels, and the loud hum proclaims, “Hey! I’m a f#©kin’ saw, I’m dangerous as hell! Don’t get comfortable with me. Focus.”

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Description

Simple shell utility to convert html to pdf using the webkit rendering engine, and qt.

Introduction
Searching the web, I have found several command line tools that allow you to convert a HTML-document to a PDF-document, however they all seem to use their own, and rather incomplete rendering engine, resulting in poor quality. Recently QT 4.4 was released with a WebKit widget (WebKit is the engine of Apples Safari, which is a fork of the KDE KHtml), and making a good tool became very easy.

Useful for Life Values Inventory (LVI).

...is a good idea, I'm telling you.

I've created this page to attempt to convince you. It shows examples and lists six reasons why it's a good idea and three common arguments against them (some of which I refute).

Don't need convincing? Here's roundup of them from simurai.

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

scalable
perfect for responsive designs with media queriestidy
stop messing around with loads of files or spritescolor-agnostic
you can even use gradients and shadowsquick & easy
works in most browsers – even on mobilenicely aligned
because they all have the same widthsmall
less than 12K when gzipped, in 1 HTTP request
(depending on configuration and browser)

Linked via CSS-Tricks.com

Typography is a very important part of design and choosing the right type for your design can be very challenging. From print to web layouts, typography is the center piece of a good design and today we gathered a few examples of beautiful typeface combinations in web design to inspire you. In web design, typography can be used in different forms, big bold headers, simple and clean menus, explanatory text and so on. Finding a good combination of typeface is more than only good taste, it’s an art.

To discover the fonts used in each design I used the WhatFont tool, which is pretty good (besides Firebug and other tools).

Useful tutorials and resources, all around jQuery, Web Development, Web Design and Programming

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

The long awaited CSS font stack resource.

Free website hosting with FTP access?

In the Spring of 2005, I relocated back to Southern California to start the next chapter
of my career as a freelance concept artist. My client list keeps growing and now
includes Paramount Studios, Universal Pictures, Mattel, Sony Pictures, Blue Sky Studios,
Bay Films, Lightstorm Entertainment, Walt Disney Animation Studios, Dino de Laurentiis
Company, Digital Domain, and Electronic Arts. I have been lending my skills on many
bid projects as well as high profile film projects such as Star Trek (2009),
Transformers 2 (2009), and James Cameron's Avatar (2009).

(Squarespace site)

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Linked via: CSS-Tricks.com

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Linked via Veerle.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Linked via: Veerle
Create custom build or Download on Github

To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.

Test the animations below by clicking on their name. All of the animations demonstrated below last for a duration of 1 second, use a timing-function of "ease", and have a fill-mode of "both". You can use these defaults by adding a class of animated to the desired element.

Most of the web developers that use Apple computers have to somehow test their projects under Microsoft IE7, IE8 and IE9 browsers. Achieving this is possible by using the virtualization software: Wine, Parallels, VMWare Fusion or VirtualBox, with the added cost of a Windows license (or by using the  Adobe BrowserLab, but that’s a different story).

Well, here is a way how to accomplish this totally for free, by using the Oracle’s free VirtualBox and the free Internet Explorer testing virtual machines from Microsoft. The latter need a bit of tinkering to make them work under the VirtualBox, and there is a script to that for you automatically.


4. There is an additional trick to override the Microsoft’s 30 day evaluation limit for the VMs, just select the IE VM, click on the “Snapshots” button and select the first, original snapshot. This reverts back to the original state of the things, giving you the cleanest IE environment you could ever imagine. This way you can use the VM for another 30 days, and repeat the process as many times as you need.

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.
See all features

You can download the free lite branded version for the basic functionality, or the unbranded professional version for extended features.

CloudFlare protects and accelerates any website online. Once your website is a part of the CloudFlare community, its web traffic is routed through our intelligent global network. We automatically optimize the delivery of your web pages so your visitors get the fastest page load times and best performance. We also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources. The result: CloudFlare-powered websites see a significant improvement in performance and a decrease in spam and other attacks.

Used by LovelineTapes.com

I recently read an account of John McElborough’s talk at Brighton SEO 2011, wherein he advocated some ethically questionable SEO (Search Engine Optimisation) tactics involving creating a private network of fake blogs.

I don’t know John or his work, but this entire side of internet marketing and promotion makes me sad - and a bit angry. I fully acknowledge the value of, and need for, actual SEO; I just think that in many cases, the tactics employed under that title would better be described as Search Engine Manipulation or even Abuse.

I periodically check my blog’s referrers, and there are a huge number of sites out there containing duplicate content and links, some of them extremely convincing when viewed in isolation. It’s sleazy, it’s pathetic, and it damages the internet for everyone.

I’m asked sometimes for advice on building an internet presence, and I usually have to fumble for an answer - because I haven’t pursued any particular strategy beyond the glaringly obvious: create original, relevant content repeatedly.

"Samuel L Ipsum is an alternative Lorem Ipsum Generator, it uses quotes from films which Samuel L Jackson has starred in place of the standard ipsum text.

Notable lets you take any webpage screenshot, sketch or wireframe and exchange notes on specific details with your team. You can quickly reply, vote or suggest a better idea. Our goal is to help you arrive at the best solution in the shortest amount of time.

Verify is the fastest way to collect and analyze user feedback on screens or mockups.

See where people click, what they remember, or how they feel.

Might be useful for LifeValuesInventory.org (LVI)

Clue is A fun and easy way to test your site. Made by ZURB.

Might be useful for LifeValuesInventory.org (LVI)

Trajectory is an agile planning tool that helps teams discuss and plan their projects in a realistic, structured way.

Elastislide - A Responsive jQuery Carousel Plugin

Linked via Veerle

Smaller is a powerful HTML, PHP, CSS and JavaScript compressor on Mac OS X which also has the ability to combine several files into one. CSS and JavaScript compression is powered by YUI Compressor while for HTML and PHP compression it uses htmlcompressor. It's definitely a must have for every Mac based web developers.

The most complete WordPress performance framework.

Recommended by web hosts like: MediaTemple, Host Gator, Page.ly and WP Engine and countless more.

Trusted by countless sites like: stevesouders.com, mattcutts.com, mashable.com, smashingmagazine.com, makeuseof.com, yoast.com, kiss925.com, pearsonified.com, lockergnome.com, johnchow.com, ilovetypography.com, webdesignerdepot.com, css-tricks.com and tens of thousands of others.

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

Store your data in Google's cloud
Google Storage for Developers is a RESTful service for storing and accessing your data on Google's infrastructure. The service combines the performance and scalability of Google's cloud with advanced security and sharing capabilities. Highlights include:
Fast, scalable, highly available object store
All data replicated to multiple data centers
Read-your-writes data consistency
Objects can be terabytes in size, with resumable uploads and downloads, and range-GET support
Domain-scoped bucket namespace
Easy, flexible, authentication and sharing
OAuth 2.0 Authentication
Authenticated downloads from a web browser
Individual-, project-, and group-level access controls

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

The goal: a ~5k micro-library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done.

I decided that much of this is redundant and makes too many assumptions about our content. If the amount of content were to grow larger, we would have to update the CSS each time. On most dynamic websites this is not a feasible solution. Also the margin-top and margin-left were to always be exactly half of the height/width so it seemed silly to have to do that math each time the width or height were to change.

An animated CSS activity indicator with VML fallback.

Features

No images, no external CSS
No dependencies (jQuery is supported, but not required)
Highly configurable
Resolution independent
Uses VML as fallback in old IEs
Uses @keyframe animations, falling back to setTimeout()
Works in all major browsers, including IE6
MIT License

Linked via Veerle.

Feedback Army is a cheap website usability testing service built on Mechanical Turk. Submit your questions and get feedback from 10 people for $15.

Usability testing has never been easier. The cheapest, fastest way to find out why visitors leave your website.