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

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.

A Book Apart Brief books for people who make websites.

Web design is about multi-disciplinary mastery and laser focus, and that’s the thinking behind our brief books for people who make websites. We cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity—because working designer-developers can’t afford to waste time.

A Book Apart publishes highly detailed and meticulously edited examinations of single topics. We produce brief books of about 100 pages—the perfect size in terms of subject depth and coverage for topics like HTML5, CSS3, content strategy, responsive web design, and more.

The goal of every title in our catalog is to shed clear light on a tricky subject, and do it fast, so you can get back to work. Thank you for supporting our mission to provide professionals with the tools they need to move the web forward. Let us know what you think about our books.

The responsinator is designed to test responsive websites on different device resolutions.

Converting Any WordPress Theme Into Responsive Theme.

find that tricky breakpoint.
Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

A collection of inspirational websites using media queries and responsive web design.

What is Media Queries?
Media Queries is a W3C Candidate Recommendation—a widely reviewed document which is ready for implementation by browser vendors.

It's an extension of media dependent stylesheets tailored for different media types (i.e. screen and print) found in CSS2.

In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.

By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.

What is Responsive Web Design?
The term Responsive Web Design was coined by Ethan Marcotte and is the practice of using fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts.

What screen resolutions do you use while taking screenshots?
Smartphone
320px
Tablet
768px
Netbook
1024px
Desktop
1600px

Where BBC News developers blog about responsive design. Opinions expressed on this blog are those of a specific product team, and are not necessarily those of the BBC as a whole.

Use the new and shiny responsibly.

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

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

A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery and that all the images are same size.

Biggest difference to other responsive slideshow plugins is the file size (~1kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.

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 !! ;)

A quick reference for HTML entities. View all the entities and their codes in one of 24 typefaces. Then click - or tap - to compare how a single entity looks in every typeface at once.

a responsive flickr viewer single page application created in Javascript and CSS3. Browse your gallery flickr from your smartphone, tablet or desktop.