Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.

You want the icon to enhance a word
You want the icon to stand alone but still be functional or informational

And our major goals here are:

As good of semantics as we can get
As little awkwardness for screen readers as possible

This ground has been treaded before, but I think the following techniques are a small step forward.

-One newsfeed for all your productivity apps.
-See what's happening and react instantly.
-Discuss your work in private workspaces.
-Apps for web, iPhone/iPad and Android.

Code intelligence plugin ported from Open Komodo Editor to Sublime Text 2. Supports all the languages Komodo Editor supports for Code Intelligence (CIX, CodeIntel2):
PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.

Provides the following features:
* Jump to Symbol Definition - Jump to the file and line of the definition of a symbol.
* Imports autocomplete - Shows autocomplete with the available modules/symbols in real time.
* Function Call tooltips - Displays information in the status bar about the working function.

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

Backup and restore your gmail account at will.

Liberate your emails and never lose that part of your life.

A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity. Brunch is an assembler for HTML5 applications. It's agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology. To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in require.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.

Say goodbye to banding. This is a very simple technique packaged into a single action. Simply select the action and press play. Your document will be converted into a 16-bit document and a new layer applied to the top of your group/document fixing all the banding in that document. Unfortunately, this will increase the document’s size dramatically. When exporting assets, copy merge and export to a new, 8-bit document. This will reduce the size while keeping the beautiful gradients. Note: You must apply this action inside every smart object.

generates the css code for making arrows completely with css.... no images.

Let's form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new features of CSS (and in general too) and they'll start making more use of it in their projects :)

Today we’ll be taking Orman’s Popup Modal Window and recreating it with HTML and CSS. We’ll then make use of the jQuery Reveal plugin to give it full functionality. We’ll even take things a step further and add some CSS3 Media Queries to make it adjust for mobile usage. Let’s dig in!

The RSS search engine will help you discover the most popular feeds on the web around your favorite topics.

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you!

Create a complete, secure, up-to-date
Address Book in less than a minute.

Welcome to Android Design, your place for learning how to design exceptional Android apps.

Docracy's mission is to help take the mystery and fear out of legal agreements.

Entypo is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. All released for free under the Creative Commons license CC BY-SA.

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

Pattern Tap aims to be the best resource for examples of specific design and user experience patterns on the web. The examples should provide an education in what is working well on the web and why. It is a communal effort toward a common goal of improving the intelligence of our interaction design industry.

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Learn HTML & CSS in one easy to use guide. A Beginners Guide to HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.

Bless provides an elegant solution to a lesser-known bug in Internet Explorer which causes CSS to be completely ignored. It runs server-side and on your local machine with Node.js IE versions 6, 7, 8 & 9 all have a limit on the number of selectors allowed in a single CSS file. Once the limit is reached, IE silently fails and just ignores any further CSS in the file leaving parts of your site totally unstyled. File size, number of lines or amount of whitespace are irrelevant. Minifying CSS will not help you here.

HTML5 Web Camp is an opportunity to connect with designers and developers and show you what's possible, and how you can start using and applying HTML5 today. Check out our last live event to learn more!

One of the most frequent questions I get asked about the mobile web is “Where do I go to learn about all this stuff?” So here’s an extensive list of helpful tools and resources that can help you create great mobile web experiences.

Helping you build a solid stylesheet foundation based on your markup. Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Chartwell is a tool for easily creating graphs in both web and print environments. In the format of a font, it utilizes OpenType to interpret and visualize the data. The data also remains editable, allowing for painless updates.

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).

This article is to serve as a guide for best practices when using icon fonts on the web. Because icon fonts are still in their infancy, browser support and new technologies are constantly being developed. Be sure to check back often for updated information. If you have any knowledge or experience to contribute, please tweet to @pictos or email drew@pictos.cc to have it included in this article.

This was inspired by, and based on @lensco's excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original post, I thought I'd expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you're interested in.

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

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.

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Skale Tracker is a music tracker developed by Ruben Ramos Salvador (baktery) in the year 1998. The first version was released for Windows, later a Linux version was presented and now a web version is here.

An open source icon set that’s a lot more than just icons. Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.

Follow this step by step tutorial to create a realistic pewter style metal text effect in Photoshop. The best part is it’s really easy! Just a couple of Photoshop layer styles is all it takes to create the basic effect, with a subtle tweak or two to perfect the lighting to maximise the realism.

Dealing with grids in Photoshop is a pain With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements. Best of all it’s free.

At Programr you can code, compile & run your programs directly in the browser. Supported platforms include C++, Java, PHP, C#, Flex, J2EE, Objective-C and many others. Programr is the fastest way to become a programming guru!

Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others. Follow @dabblet on twitter

It currently only supports modern versions of Chrome, Safari and Firefox but I'm hoping to expand browser support soon.

It’s handcoded by Lea Verou with care but some other nice folks helped too.

Html5CanvasTutorials.com is dedicated to everything you need to know about HTML5 Canvas by providing tutorials, labs, and showcases.

All of the tutorials on Html5CanvasTutorials.com are organized by chapters and sections and are accompanied by live demos and working code. You can use this site to learn about HTML5 Canvas for the first time, as an HTML5 Canvas reference, or as inspiration for your HTML5 Canvas projects.

The Tutorials tab contains basic and advanced tutorials for the 2d context and Three.js tutorials for WebGL (3d context). The Labs tab contains cool HTML5 Canvas experiments and the Showcase tab contains HTML5 applications and demos from the community.

Save yourself money and a trip to the store! Print graph paper free from your computer. This site is perfect for science and math homework, craft projects and other graph paper needs. All graph paper files are optimized PDF documents requiring Adobe Reader for viewing.

Take advantage of your printing flexibility; print on transparency film for sharp graph paper overheads, or waterproof paper for field data-collecting.