RT @hackernewsbot: Flotr2 : a library for drawing HTML5 charts and graphs...

Over the last couple years HTML5 and CSS3 have rocked our worlds and the way we approach common website issues. Every few days it seems there is some new fangled snippet or approach that is a game changer. Today might just be another one of those days (kind of).

One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future.

Click on the drop downs above. That’s done all in CSS; no kind of javascript whatsoever. Pretty cool, eh? It’s a fun use of the :active and :hover selectors. You can browse the source code for the demo above here. If you’d like a more in-depth tutorial of how to accomplish this, continue reading.

To be honest, I’ve never really played around with inline-block too much before today, but I’ve been seeing more and more suggestions in the comments that I explore this method as an alternative to floats so I thought I’d take the advice. I was hopeful going into it that it was indeed some magic, no-hassle way around floats, but in truth it really isn’t. There are still several unexpected behaviors that you have to know about and respond to, resulting in some hacky code much like we often see with float clearing fixes.

To be fair though, it is in fact a pretty simple way to accomplish float-like layouts. More importantly, the CSS that you have to implement to make sure it’s cross-browser compatible is briefer than even the popular micro clearfix hack from Nicolas Gallagher. This may make it a better way to go for many projects.

Ultimately, I think I will in fact begin adding this method to my bag of tricks. I suspect that certain times will arise when floats aren’t ideal (example: right floats render everything in reverse) and this will be a great alternative to have in those situations.

What do you think? Is inline-block a good alternative to floats? What situations can you think of where one clearly has an advantage over the other?

A list of questions you can use to help interview potential candidates for a front-end development position.

Some websites now contain 'responsive images'. These scale (or crop) depending upon your screen's viewing area, so the image sizes remain appropriate whether you're looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

The translate attribute is an enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The attribute's keywords are the empty string, yes, and no. The empty string and the yes keyword map to the yes state. The no keyword maps to the no state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS level 3 relating to the hierarchical nesting of style rules. It includes and extends the functionality of CSS level 2 [CSS21], which builds on CSS level 1 [CSS1]. The main extension compared to level 2 is the ability to nest a style rule within another rule, allowing greater modularisation and readibility of CSS documents.

Preventing autocompletion of form fields is incredibly important since we never know where our users are completing them from. They could complete them from a super secure computer or an incredibly public computer. Regardless of security level, some field values should never be remembered, like credit card number, social security number, etc. Preventing autocompletion is as simple as adding one attribute to a FORM tag for individual form fields.

We already have an element for comments and other self-contained document
modules, namely, <article>. The spec in fact specifically calls out an
<article> nested in another <article> as being, by definition, a comment
on the outer <article>.

A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking.

So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

Looking for a way to conditionally load these scripts client-side based on feature detects? See Modernizr. Looking for a guide to writing your own polyfills? See Writing Cross-Browser JavaScript Polyfills.

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

DBi handles all the work of creating an iOS or Safari WebSQL database and manages local/session storages.

DBi creates, tables, indices, triggers & views and populates the tables all from a single JSON file that's outputted from DBi.

LungoJS
HTML5 Mobile Framework, and stuff.

Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attepmpt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project.

Accelerated panning and zooming for HTML and Canvas

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set.

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:

Google launched its Chrome Web browser on September 1, 2008—three years ago today. In the time since its debut, Google's Web browser has attracted a considerable following and influenced other browser vendors. To celebrate the anniversary, Google has published an interactive HTML5 infographic that presents the history of the major Web browsers and Web standards.

Chrome's contributions to the Web and browser design are significant. Google set the pace of development for modern browsers by being the first browser vendor to adopt a radically shorter development cycle and a release management strategy that emphasizes fast-paced incremental improvement. Chrome's transparent update system and channel-based prerelease distribution model are being adopted by Firefox and could eventually be picked up by other browser vendors.

Chrome's distinctive minimalist design has also changed the way that browser vendors think about usability. Chrome's approach to paring down the interface and offering a more streamlined user experience has been embraced by other browsers. Google took the lead on some controversial moves, like not displaying "http" in the location bar.

The technical influence of Chrome can even be felt outside of the browser ecosystem. The performance of Chrome's sophisticated V8 JavaScript engine and the ease with which it can be embedded in other software have led to its adoption in a range of other environments. For example, V8 was used to produce Node.js, a server-side JavaScript runtime that is popularizing the use of JavaScript for backend Web development.

Although Chrome has come a long way, the browser still lags behind its competitors in some key ways. When we first reviewed Chrome in 2008, one of our biggest gripes with the user interface was the lack of tab overflow handling. After three years, this issue still hasn't been fixed. Chrome's user interface for browsing history is another major weak area relative to other browsers. History autocompletion in the Omnibox is also quite limited compared to Firefox's AwesomeBar.

Despite the limitations, Chrome's audience has grown explosively since its 2008 launch. According to statistics from StatCounter, the browser's marketshare hit 10 percent last year and continued growing to 23 percent, as of this month. It's become an important part of Google's product landscape, serving as the central pillar of the company's ambitious Chrome OS operating system.

After three great years of innovation and raising the bar, Chrome's future looks bright.

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

The idea of "CSS Tabs" has been around for a long time. If you Google it, a lot of what you get is styled CSS tabs, but less stuff on the building an actually functional tabbed area. At least, functional in the sense as we think of tabbed areas today: click a tab, see a new content area with no page refresh.

Tackling functional CSS tabs has less of a deep history. Brad Kemper was messing around with it in 2008 trying to utilize the :checked pseudo selector with radio buttons and adjacent sibling combinators. This is a really cool technique that can be utilized to do things like an expand/contract tree style menu or visually replace form elements with graphics (pioneered by Ryan Seddon).

I personally tried messing with functional tabs a while back, and came up with seven different ways to do it. Most of them centered around the use of the :target pseudo class selector and most of those techniques sucked. One was OK. They all had one major flaw and that was that URL hashes needed to be used, which "jumps" the page down to the element with the matching ID, and that is totally unexpected, jerky, and just a bad overall experience.

Working with the radio-button/:checked technique is way better, but there was a long-standing WebKit bug that prevented pseudo class selectors and adjacent sibling combinators from working together. Good news! That's fixed as of stable browser releases Safari 5.1 and Chrome 13.

So let's get this thing done the :checked way, which I think is the cleanest way to do it for now and for the next few years.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Chosen is a library for making long, unwieldy select boxes more friendly.

Turn your checkboxes into iPhone-style binary switches

See exactly which lines of code are not supported in over 24 email clients.
Email designers that are tired of trawling through check lists, this is for you.

Chosen is a library for making long, unwieldy select boxes more friendly.

Mobile Safari, the browser found on iPhones, iPod Touches and the iPad, does not (currently) implement the same label behaviour as other browsers. Clicking on labels doesn’t do anything—possibly, as Ben Darlow suggests, it is because it would interfere with the tap-to-select-text functionality, although personally I think that usability trumps obscure text-selection use cases.

What’s even weirder is that, in over an hour of googling, I couldn’t find a single reference to this issue. Surely someone, somewhere must have noticed that clicking or tapping on labels in forms on iPad doesn’t select the input? I resolved that when I published a fix for the issue, it would include a couple of clunky sentences stuffed with as many keywords related to the tap click form label input select checkbox radio button problem as possible…

Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods.

It's taken 9 desktop clients, 5 mobile handsets, 4 webmail accounts and a solid week of hard labor, but we've finally updated our ever-popular guide to CSS support in email to reflect the email clients that your subscribers are using today. Covering the gamut of CSS selectors and properties as well as some useful tidbits along the way, it's a must read for anyone that's elbows-deep in coding HTML email.

Nathan Smith let me know about this little gem. IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it's a bit tough.

jVectorMap is a jQuery plugin employed to show vector maps and visualize data on HTML pages. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML. Using jVectorMap is pretty simple as for any other jQuery plugin. All you need is to connect JavaScript and CSS files of the plugin:

Turns out our old friend got a huge makeover but many folks are unaware of its new features. XMLHttpRequest Level 2 introduces a slew of new capabilities which put an end to crazy hacks in our web apps; things like cross-origin requests, uploading progress events, and support for uploading/downloading binary data. These allow AJAX to work in concert with many of the bleeding edge HTML5 APIs such as File System API, Web Audio API, and WebGL.

JSColor is a simple & user-friendly color picker for your HTML forms. It extends all desired <input> fields of a color selection dialog.

Html Content / Article Extractor in Java open sourced from Gravity Labs

The <progress> element just landed in Firefox Aurora (to be Firefox 6).

Block level elements are naturally as wide as their parent element. So let's say you put an <h1> in your <body> (and you've used reset CSS so there is no padding on the body) that <h1> is automatically the full width of the browser window. It doesn't need any help.

But it's pretty rare (and stupid) these days to set text at the full browser window width (for desktop/laptop size screens). It's just too wide, the line length is too long to be readable. It's reasonable that we would want an element to stretch the full width of the browser window, for aesthetic reasons, but limit the text inside to a readable width.

I’ve been using this trick for quite a while, but I never thought to blog about it. However, I recently realized that it might not be as common as I thought, so it might be a good idea to document it in a blog post.

If you follow the discussions on www-style, you might have noticed the proposal for a @supports rule to query property and value support. Some people suggested that it should also test for selectors, for example whether a certain pseudo-class is supported. However, you can do that today, albeit in a limited manner (no OR and NOT support).

The main principle that you need to keep in mind is that browsers are expected to drop rules with selectors they don’t understand, even partially. So, if only one selector in a group cannot be parsed, the whole rule will be dropped. This means we can construct selector “tests”, which are use cases of the selector whose support we want to test, that will not match anything, even if the selector is supported. Then, we include that selector in the beginning of our selector group. If all this is unclear, don’t worry, as there’s an example coming next

Welcome to the HTML Email Boilerplate. This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc. While not plug and play (you know, you'll have to do some work ;-), it will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

HTML5 aims to standardize elements on a page and reduce the use of plugins to get the leverage more from the browser. With HTML4 you would always need a plugin, such as Flash or Quicktime, to be able to listen to music and video (think YouTube). HTML5 changes that. In HTML5, you can just put a video inside some ‘video’ tags (as easy as you would put an image inside an ‘img’ tag) and, voila! Instant video action.

In this article, we will give you an overview to the two main media tags that you can use with HTML5: <audio> & <video>

Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.

Although this command works well on most browsers, different browsers implement different subsets of formatting commands, and even common commands often produce varying HTML structures.

There are other APIs that affect selection and cursor movement, or allow querying of the current state, and those, too, are often implemented differently.

Our new test suite tries to capture all currently implemented commands and APIs, and runs them on varying initial HTML content and within various containers. The suite already contains well over 1,000 tests.

jCanvaScript is a javasript library that provides you methods to manage with the content of a HTML5 canvas element.

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. Mobile Boilerplate is not a framework, but works well with projects like jQuery Mobile, Sencha Touch, Phonegap and Appcelerator. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations waiting for you. Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.

We’ve noticed some highly targeted and apparently politically motivated attacks against our users. We believe activists may have been a specific target. We’ve also seen attacks against users of another popular social site. All these attacks abuse a publicly-disclosed MHTML vulnerability for which an exploit was publicly posted in January 2011. Users browsing with the Internet Explorer browser are affected.

For now, we recommend concerned users and corporations seriously consider deploying Microsoft’s temporary Fixit to block this attack until an official patch is available.

To help protect users of our services, we have deployed various server-side defenses to make the MHTML vulnerability harder to exploit. That said, these are not tenable long-term solutions, and we can’t guarantee them to be 100% reliable or comprehensive. We’re working with Microsoft to develop a comprehensive solution for this issue.

The <html> element is the highest level element on any web page. Every other element is within it. If you are making a fluid width site but wish to limit the maximum width it can expand (a good idea), you can do so easily by literally applying a max-width to the html element.

When I started to work on my JavaScript Game Engine back in October 2009, the biggest problems I encountered were with the new HTML5 Audio Element. The Canvas Element already worked nicely in all browsers that supported it at the time, albeit some were a little slow.

Now, in 2011, the rendering performance for Canvas has been improved dramatically, audio however is still broken in large parts. I think it is time for a change in tone. Be warned, there's some profanity ahead because HTML5 Audio is still that fucked up.

HTML5 Video Player Comparison

"Our support for HTML5 is an early experiment, and there are some limitations. HTML5 on YouTube doesn't support videos with ads, captions, or annotations and it requires a browser that supports both the video tag and h.264 encoded video (currently that means Chrome, Safari, and ChromeFrame on Internet Explorer). We will be expanding the capabilities of the player in the future, so get ready for new and improved versions in the months to come."

"What's the HTML5 player, you ask? Simply put, it's an alternative to our current Flash player that looks and works almost exactly the same way. What are the benefits?"

"So we do end up a little bit faster, but not as much as we might expect after reducing our HTTP requests by 91%. Note that even though the two data URI versions are very similar in load time, the second feels faster because of the progressive rendering."

"Of course, there will be some curmudgeons who will bemoan the end of Gears, but Google deserves plaudits for moving to the mainstream standard. Instead of attempting to muscle the market as they wish, Google is playing nice with the market. Apple, Microsoft, and Sony could take a lesson." Awesome.

Simple xhtml/css buttons, no javascript.

"So, yes, generally speaking, it is a bad idea to use regular expressions when parsing HTML. We should be teaching neophyte developers that, absolutely. Even though it's an apparently neverending job. But we should also be teaching them the very real difference between parsing HTML and the simple expedience of processing a few strings. And how to tell which is the right approach for the task at hand."

"What if there was a backwards compatible way to transfer all of the resources that are used on every single page in your site — CSS, JS, images, anything else — in a single HTTP request at the start of the first visit to the page? This is what Resource Package support in browsers will let you do."

"Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed "change view" feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all the information remains easily accessible."

"Floom is a MooTools slideshow plugin that can present images & their captions beautifully."

"This template is a simple one page “Under Construction” template that allows you to keep your users informed,while you work at your website.The template has a jQuery slider containing 3 slides:one with your social pages,like Twitter or Facebook,one with a subscribe-by-mail form and another one with an area for writing what you do.I thing it`s very useful.Now you have to convince yourself of its functionality." Very nice.

"Thank you again, Webmaster, for reminding me why I should be so proud of the work I do. Without you I couldn’t pay for house, cars, and fine wine. Keep up the good work so I can keep up my fine life!"

"So here I am to answer your dreams: A simple straightforward function that sends HTML e-mails with a plain text counterpart for those over 80 and still using AOL 2.5."

"Page navigation (scrolling) and pagination using keyboard shortcuts with micro-formatted html "

"Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. You've spent hours on it, but you just can't seem to get your layout right. I can empathize. I can also help."

"I’ve been looking for a solution to cache heavy pages and just serve a static html version for a little while now, and I’ve found a solution in output buffering."

"Sometimes we want to extract the HTML content of the remote website page, this technique is called as HTML scrapper. This article will discuss on how we can extract the HTML content of the remote webpage."

"Leaving a website untouched after its initial launch is, in many ways, like buying a car and never changing the oil or never filling up on gas — it might run fine for a while, but eventually it will slow down and come to a complete halt, providing no benefit to its owner or passengers. An ongoing routine of regular, scheduled analysis and maintenance using many of the techniques mentioned in this article could prove integral to the success and overall functioning of your website or web application."

"But none of this answers the original question: why do we have an <img> element? Why not an <icon> element? Or an <include> element? Why not a hyperlink with an include attribute, or some combination of rel values? Why an <img> element? Quite simply, because Marc Andreessen shipped one, and shipping code wins."

"PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you."

"Aside is now acceptable to use for secondary content, such as a blogroll, groups of additional navigation and even advertising if that content is related to the page. When used within an article element, the contents should be specifically related to that article, for example a glossary. When using aside, please be aware of these changes of context."

"One particular area of interest to me was the HTML5 <video> tag. The aim of this tag was to provide native video support using a single codec across all browsers without the need for third party plugins like Flash. While the dream of a universal codec appears unlikely, one clever project has surfaced that uses the <video> tag for browsers that support it and falls back on traditional video options for those that don't." Using the HTML5 video tag in emails.

"Anyways, if you do need to print HTML tables here is a little hint. You know how a table will usually have headings on the first page, and then no heading on subsequent ones, forcing you to flip back and forward to see which column is what? Well, you can actually make most browsers to repeat your headings on each printed page using the method below." Neat trick.

"n our recent Webinar, "Using Innovations in Email Creative to Drive Increased Engagement," Aaron Smith and Lisa Harmon of the email creative agency Smith-Harmon outlined a great technique that enables email marketers to use image-based buttons but still convey the CTA if images are blocked." Awesome.

"A few days ago I was implementing breadcrumbs in a website I’m working on. breadcrumbs are not using often but most of the corporate websites are using breadcrumbs. In this tutorial i will learn you how to create nice scalable CSS Based Breadcrumbs. I am using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code."

"After spending about a day and a half in testing I am forced to conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster."

"Technically, this endorsement does not have to say anything about the future prospects of the tags in Microsoft products, let alone the method Microsoft will choose. Most likely, the company will opt to go the Apple way, and use the DirectShow/Media Foundation frameworks." Well some decent news.

Use inline validation and display after the field is completed by the user or "on blur".

"Cats and dogs. Cain and Abel. Designers and developers. These are just a few of the great historical face-offs. Designers and developers often seem to come from different planets and have completely different brains. Developers want a website to work right, designers want it to look right. A few weeks ago, we explored the main pet peeves that web designers have with web developers, and suggested some solutions for them. Today, we will discuss the other side of the coin: the five most common gripes that developers have with designers."