Front-end Development

HTML5 is more a movement (or maybe it's more appropriate to call it a "brand") than it is a technology. It says "more power to the browser" and mostly means "more power to the browser as a programming platform". Given this focus of HTML5, it is surprisingly hard to find a good place where all the APIs under development are listed. This page is an attempt to collect that information in one place.

This is a quick reference of elements that are new or have been redefined in HTML5.

Audio and Video became first-class citizens on the Web with HTML5 the same way that other media types like images did in the past. Through their new APIs you can access, control and manipulate timeline data and network states of the files. With the coming additions to the APIs you will be able to read and write raw data to audio files (Audio Data API) or manipulate captions in videos (Timed Track API).

In practice, "client-side storage" means data is passed to the browser's storage API, which saves it on the local device in the same area as it stores other user-specific information, e.g. preferences and cache. Beyond saving data, the APIs let you retrieve data, and in some cases, perform searches and batch manipulations.

An offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When the time comes that you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.

The Geolocation API lets you find out where the user is and keep tabs on them as they move around, always with the user's consent. This functionality could be used as part of user queries, e.g. to guide someone to a destination point. It could also be used for "geo-tagging" some content the user has created, e.g. to mark where a photo was taken.

The WebSockets specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an open connection between the client and the server and both parties can start sending data at any time.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions. They're going to help put and end to that nasty 'unresponsive script' dialog that we've all come to love.Workers utilize thread-like message passing to achieve parallelism. They're perfect for keeping your UI refresh, performant, and responsive for users.

JSON or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects.Despite its relationship to JavaScript, it is language-independent, with parsers available for most languages.

BSON [bee · sahn], short for Bin­ary JSON, is a bin­ary-en­coded seri­al­iz­a­tion of JSON-like doc­u­ments. Like JSON, BSON sup­ports the em­bed­ding of doc­u­ments and ar­rays with­in oth­er doc­u­ments and ar­rays. BSON also con­tains ex­ten­sions that al­low rep­res­ent­a­tion of data types that are not part of the JSON spec. For ex­ample, BSON has a Date type and a BinData type.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

There's no shortage of debate about the best way to develop Web sites that work well across many networked devices. Some teams favor a client-side approach while others lean towards server-side solutions. But I'm increasingly interested in solutions that try to bring together the best of both worlds. RESS (Responsive Web Design + Server Side Components) is one such proposal.

A collection of sites using media queries.

Change is a constant. The device landscape is always changing and the device types are proliferating. With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So we have packaged up our set of tools that help us stay current and we are offering it for download.

An Experiment with Mobile-First Images that Scale Responsively & Responsibly

Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Content strategy plans for the creation, publication, and governance of useful, usable content.

The Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities. Please look around the WAI website and let us know if you can't find what you're looking for or have any suggestions.

This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.

In its simplest conceptualization, progressive enhancement is the separation of HTML, CSS and JavaScript. That’s it, really. If you had to remember one thing about progressive enhancement, it should be that.Think of these web technologies as being in layers, with HTML as the first layer, CSS being the second, and JavaScript (and other client-side technologies that deal with site interactivity, such as Flash or Java applets) as being the third.

We’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

Glue is a simple command line tool to generate CSS sprites.

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

The grid system is an aid, not a guarantee.It permits a number of possible uses and eachdesigner can look for a solution appropriate to hispersonal style. But one must learn how to use thegrid; it is an art that requires practice.

The Responsive grid generator

I give you GuideGuide: a columns, rows and midpoints panel for Photoshop CS4 & CS5

How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

Scalable and Modular Architecture for CSS.An evolving guide to CSS architecture for sites small and large.

This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar US. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. This document's primary motivation is two- fold: 1) code consistency 2) best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code.

BEM is an approach to front-end development designed with flexibility and ease of modification in mind.

Teach your clients about the mysteries of the web

A discourse on the process of designing for real people

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.

The Photoshop Etiquette Manifesto for Web Designers is a collection of ways to improve the clarity of a PSD when transferred. You stay organized, your developer stays happy. Fist bumps all around.

Timelapse of your designsVisual version control done right

The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.

A microformat is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages and other contexts that support (X)HTML, such as RSS. This approach allows software to process information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) automatically.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Many sites are generated from structured data, which is often stored in databases. When this data is formatted into HTML, it becomes very difficult to recover the original structured data. Many applications, especially search engines, can benefit greatly from direct access to this structured data. On-page markup enables search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web. Markup can also enable new tools and applications that make use of the structure.

It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website.

There’s life after Georgia and Verdana. Using standard CSS @font-face to embed licensed fonts on your website.

Hundreds of free, open-source fonts optimized for the web

This will change the way you design websites.Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

The professional web font solution.- Preview fonts on your site for free- Pay only for the fonts you need- Get up and running in 60 seconds- International character support- Fast, reliable and easy to use

Add great looking fonts to your website in a few easy steps. Widest selection of high quality Web fontsOver 12,000 Web fonts from Monotype®, Linotype®, ITC® and othersExclusive home to Helvetica®, Frutiger®, Univers® and other celebrated fontsDiverse styles to support any projectSupport for over 40 languagesLatin, Cyrillic, Greek, Simplified and Traditional Chinese, Japanese, Korean, Thai, Arabic, Hebrew, and Devanagari fonts

Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.

We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts.Like any revolution, we aim to make progress, and we need help. If you want to be a part of this free, open-source type movement, you should join us and contribute. If you have any questions about The League or the movement, get in touch.

WebINK is a service that lets you put professional-quality fonts on your web site. The WebINK service delivers these fonts to each visitor’s browser—in the WINK of an eye.

OpenTypography is an open source project with the goal of bringing better typography to every type of digital screen.

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS.

The most popular and powerful web development tool

The Web Developer extension adds various web developer tools to a browser.

FireQuery is a collection of Firebug enhancements for jQuery. Requires Firebug 1.3 or greater.Features:* jQuery expressions are intelligently presented in Firebug Console and DOM inspector* attached jQuery data are first class citizens* elements in jQuery collections are highlighted on hover* jQuerify: enables you to inject jQuery into any page

The extension generates an index (or map) of any web document structured with headings. There are some differences from other, for example:* It shows the headings structure of the main content and of other document embedded through IFRAME element or those which are part of a series of FRAMES (FRAMESET).* It shows the level of the headings and the errors in the structure (for example, incorrect levels).So this is useful not only to facilitate navigation to anyone, but also to help webdevelopers, consultants and auditors.

View HTTP headers of a page and while browsing.

It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere.

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights: Grades web page based on one of three predefined ruleset or a user-defined ruleset; It offers suggestions for improving the page's performance; Summarizes the page's components; Displays statistics about the page; Provides tools for performance analysis, including Smush.it™ and JSLint.

Firebug extension to view which CSS rules are actually used.

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click upload to share.

A quick and simple image placeholder service.

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you'll get a placeholder.

Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:<img src="http://lorempixum.com/400/200" />to get your FPO / dummy image.

Build super awesome sites quickly, with super awesome images

Get placeholders related to the site you are developing, by pulling images from flickr based on tags

Piwik is a downloadable, open source (GPL licensed) real time web analytics software program. It provides you with detailed reports on your website visitors: the search engines and keywords they used, the language they speak, your popular pages… and so much more.

A heatmap is a graphical representation of datapoints with different frequency, usually red spots on a heatmap are highly frequent spots and blue ones are less frequent spots.

heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you're adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. The heatmaps are fully customizable - you're welcome to choose your own color gradient, change its opacity, datapoint radius and many more.

Get website content painlessly.Take away the headache of collecting, organising and approving client content.

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript.The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10

This service is an opportunity to inform your visitors unobtrusively to switch to a newer browser.Many internet users are still using very old, out-dated browsers – most of them for no actual reason. Switching to an newer browser is better for them and for you as a webdesigner.

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. 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.

Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues.

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.

ControlJS is a JavaScript module for making scripts load faster.

A JavaScript framework designed to improve the application of Progressive Enhancement by first testing browser capabilities for key Javascript and CSS support before applying advanced styles and scripts to the page.

yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.

A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.

List of JS game engines. You can find a wikified version at https://github.com/bebraw/jswiki/wiki/Game-Engines. Feel free to modify that. I sync it here every once in a while.

GameJs is a thin library on top of the HTML canvas element. The GameJs API is a port of the popular PyGame to JavaScript.

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

Javascript on native environments at zero coding costCocoon is a framework for developing cross-platform native applications in C / C++. Successful games such as iBasket, SlideSoccer, or VideoPuzzle have been developed with this technology.Cocoon is based on interoperable services whereby you can integrate even native elements such as advertising, tracking and analytics systems, connectivity, etc. Indeed, one of these services is CocoonJS, which lets you run HTML5 applications in JavaScript.

Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

A lightweight HTML5 game engine

Raphaël is a cross-browser JavaScript library that draws vector graphics for web sites. It will use SVG for most browsers, but will use VML for older versions of Internet Explorer.

The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

Processing.js is a JavaScript port of Processing, a programming language designed to write visualizations, images, and interactive content. It allows web browsers to display animations, visual applications, games and other graphical rich content without the need for a Java Applet or Flash plugin.

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Popcorn.js is an event framework for HTML5 media. Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & TabletsA unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well organized CSS and ending with the JavaScript API. Lungo offers a great facility when prototyping applications, and will not need to enter any lines of code (JavaScript) to visualize how it will behave our application.

Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

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.

Dojo Mobile is a world class HTML5 mobile JavaScript framework that enables rapid development of mobile web applications with a native look and feel on modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android and RIM smartphones and tablets.Dojo mobile is completely free with no-hassle liberal licensing under either the NewBSD and AFL open source licenses.

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

Jump-starting jQuery plugins development

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

jQuery Lint is a simple script you can download and use with jQuery. It works over the top of jQuery and diligently reports errors and any incorrect usage of jQuery. It will also, to some extent, offer guidance on best practices and performance concerns.

FireQuery is a collection of Firebug enhancements for jQuery. Requires Firebug 1.3 or greater.Features:* jQuery expressions are intelligently presented in Firebug Console and DOM inspector* attached jQuery data are first class citizens* elements in jQuery collections are highlighted on hover* jQuerify: enables you to inject jQuery into any page

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo.Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Ext Core is a cross-browser JavaScript library for building dynamic web pages. Ext Core provides basic cross-browser abstractions for DOM querying, element selection and more.

Ext JS 4 is a major step forward for web frameworks. Building on Ext JS 3.3, our latest release adds over 350 new APIs, 50 new classes, and 65% more documentation. Ext JS 4 also brings an entirely new data package that enables developers to use a model-view-controller architecture when building their app. The new MVC enables apps to leverage features like Infinite Scrolling a Grid to build an entirely new level of interactivity in to web apps.

The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it's an industrial-strength JavaScript library for professionals who love JavaScript.

Dojo Toolkit is an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites.

MooTools (My Object-Oriented Tools) is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License. It is used on more than 5% of all websites, and is one of the most popular JavaScript libraries.

Jasmine is a behavior-driven development framework for testing your JavaScript code.It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

JavaScript performance playgroundjsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

An easy-to-use JavaScript Unit Testing framework

Distributed continuous integration for JavaScript

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.

A common learning application for popular JavaScript MV* frameworks

JavaScriptMVC is an open-source framework containing the best ideas in jQuery development.It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.

Description:A website without a modular system is prone to failure.Hydra.js has come to solve this problem!Designed to: * Avoid failing your full application for some little error. * Be extended. * Be framework agnostic. * Create a scalable, maintainable and module oriented system.Install:<script type="text/javascript" src="/path/to/Hydra.js"></script>

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.

Evented I/O for V8 JavaScript.

List of languages that compile to JS

CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. http://speakerdeck.com/u/sstephenson/p/coffeescript-is-beautiful-i-never-want-to-write-plain-javascript-again

Dart is a new class-based programming language for creating structured web applications. Developed with the goals of simplicity, efficiency, and scalability, the Dart language combines powerful new language features with familiar language constructs into a clear, readable syntax.

ClojureScript is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods.Never overrides any native implementations; it only adds what is missing.

What is Sugar?Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.What is Sugar not?Sugar is a not a framework for AJAX, animation, or DOM manipulation. In fact, Sugar is not tied to the browser in any way.

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.

Principles of Writing Consistent, Idiomatic JavaScript

JavaScript that belies the common conception of beauty

I hope this book helps on your journey to improving your knowledge of design patterns and the usefulness of their application to JavaScript.

This wiki indexes libraries and resources available for JavaScript.

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can:- Start using open web technologies—such as the HTML5 canvas tag—right away, even technologies that aren't yet supported in Internet Explorer 6, 7, 8, or 9.- Take advantage of JavaScript performance improvements to make your apps faster and more responsive.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.

Haml takes your gross, ugly templates and replaces them with veritable Haiku.Haml is the next step in generating views in your Rails application. Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to.

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.ORA JavaScript shim that replicates the standard API for older browsers.

With the help of the awesome Modernizr library, haz.io gives you a quick overview of your browser’s support for recent technologies in the world of HTML, CSS and Javascript.

HTML5 IE enabling script<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Trying to understand HTML5 compatibility on mobile and tablet browsers.

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. tell me moreWhen Can I Use tells you the browser support story, while Modernizr gives you the power of feature detection. HTML5 Please helps you out with recommendations for polyfills and implementation so you can decide if and how to put each of these features to use.The recommendations below represent the collective knowledge of developers who have been deep in the HTML5 trenches. We hope they serve you well.

HTML 5 Outliner

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.ORA JavaScript shim that replicates the standard API for older browsers.

With the help of the awesome Modernizr library, haz.io gives you a quick overview of your browser’s support for recent technologies in the world of HTML, CSS and Javascript.

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

The Cross-Browser CSS3 Rule Generator

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.

CSS allow you to do lots of things, but some features are missing to developers. What about variable, constants, and general faster syntax? As normal CSS can’t do that, people created preprocessors to allow the use of variables on CSS files and then parse it to regular stylesheets.

Expressive, dynamic, robust CSS

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But, most frameworks are bulky and inflexible, aren't they? Not xCSS! It's lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks.

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it's cleaner and more powerful than CSS2 is.The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it's nonetheless a good idea for structural styles.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js

lessphp is a compiler for LESS written in PHP.The entire compiler comes in a single includable class, but an additional command line interface to the compiler is included. See the quick start for basic usage.

Asset bundling for .NET web appsDumping your scripts into a folder is no way to manage your client-side code!Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.It's flexible, extensible and optimized for developer happiness.

The LESS editor and compiler that almost makes it too easy.

It compiles your *.less files into valid CSS.Available for free for mac, linux and pc.

This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.Mac only.

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects.

LESS Elements is a set of useful mixins for the LESS CSS pre-processor to help you cut down the size of your stylesheets.

Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

CSSDOC is a convention to comment Cascading Style Sheets (CSS) to help individuals and teams to improve writing/coding/styling/managing CSS files. It is an adoption of the well known JavaDoc / DocBlock based way of commenting source-code. That's putting style, docblocks and tags together.

KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format.

StyleDocco generates documentation and style guide documents from your stylesheets.

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.

Minify is a PHP5 app that helps you follow several rules for client-side performance. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML <head>. They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.All without any .grid_x classes in your markup. Oh, and did we mention it's responsive?Runs on LESS, SCSS, or Stylus. Read up on Smashing Mag.

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device. Start here, build everywhere.

Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.If the browser gets thin enough, the site will change to a mobile-friendly layout.

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you're working on your next project, you don't have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

So what is Amazium I hear you ask, well you may have been hearing the term "Responsive Web Design" being thrown around the past few months, which simple means a website that can adjust to your screen size without having to make a separate website!This came about from the simple fact that a lot of people have been making demos of this responsive web design but none seem to be using 960 grid system with 12 columns, and because of this I was forced to make my own..!

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

This Github project is for the OOCSS framework—a collection of code that’s built using the OOCSS approach and is meant to help you get started. However, the framework is not the same thing as the OOCSS idea. (Confusingly though, they have the same name…that’ll probably change.)

Responsive. Infinite nesting. One class per element. Simple.

A flexible width, component based CSS layout system

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD?

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

The 52 Framework is a new, and very much under construction, framework built specifically for utilizing HTML5 and CSS3 in a cross-browser, standards-compliant manner.

A rock-solid default for HTML5 awesome.

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & TabletsA unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well organized CSS and ending with the JavaScript API. Lungo offers a great facility when prototyping applications, and will not need to enter any lines of code (JavaScript) to visualize how it will behave our application.

Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5

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

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effor.

Dojo Mobile is a world class HTML5 mobile JavaScript framework that enables rapid development of mobile web applications with a native look and feel on modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android and RIM smartphones and tablets.Dojo mobile is completely free with no-hassle liberal licensing under either the NewBSD and AFL open source licenses.

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Compass is an open-source CSS Authoring Framework.

A CSS Pattern Framework for Compass

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.

WrapBootstrap is a marketplace for premium Bootstrap themes and templates.

Create unique design with Bootstrap v2

I am a Framework thought to make the life of designers and developers a bit easierI use the latest Web standards, also known as HTML5 and CSS3. To take more advantage and allow you not to repeat yourself, I am based in LESS.js, which means that you can forget some of the proprietary browser prefixes. Also, I carry a number of preloaded basic styles, mixins, helpers, transparent textures and a @font-face driven icon set.

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Welcome to the Mozilla Developer Network.We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends.

The Ruby Primer is a free interactive book that helps you learn Ruby.

Learn programming languages & frameworks - Fast The fastest way to become an expert programmer.Codesonic won't teach you how to program. Codesonic will turn you into a faster, smarter, more knowledgeable programmer. It drills you on the syntax, classes and methods of your favorite languages and frameworks so you remember them forever.

Join the thousands of web professionals who are learning by doing through interactive video + coding in the browser.

The best way to learn creative and technical skills like design, web development (and lots more).

Treehouse is the best way to learn how to design and develop for the web and iOS.

Our training videos feature the most current technology. Now is a good time to hit F5.Technology isn’t slowing down. No wonder our library keeps growing. And because your work demands the newest technology, we often have new videos out before many realize they need it. In fact, we average 2-3 new training videos per week. At that speed to market, you can only imagine the wealth of valuable content we are constantly creating. You can see why it’s worth visiting us often.

We help programmers continually improve their skills and their careers through hands-on training courses. Since 2005, we've put on over 95 public classes, and just as many private classes at a variety of companies. By attending a Studio, you'll get the most up-to-date and authoritative developer training around.

Calipso is a simple content management system, built along similar themes to Drupal and Wordpress, that is designed to be fast, flexible and simple.

The only 100% Cloud based development environmentfor Mobile, Tablet and DesktopFree. Powerful. Completely uncompromising.

Cloud9 IDE supports several languages with Javascript and HTML/CSS currently being the core ones. We also support Coffeescript, Ruby, PHP and many others with syntax highlighting with more to follow.

Any suggestions or comments, please contact me at:Web: http://bruno.garciaechegaray.comTwitter: http://twitter.com/garciaechegarayTumblr: http://brunogarciaechegaray.tumblr.comWiki: https://github.com/brunogarcia/Front-end-Wiki/

A web browser engine, (sometimes called layout engine or rendering engine), is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer. A web browser engine is typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content.

WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari, which by August 2011 held nearly 30% of desktop browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook reader, as well as the default browser in the iOS and Android mobile operating systems. The WebKit engine provides a set of classes to display web content in windows, and implements browser features such as following links when clicked by the user, managing a back-forward list, and managing a history of pages recently visited.

A JavaScript engine is specialized computer software which interprets and executes JavaScript (or ECMAScript). Although there are several uses for a JavaScript engine, it is most commonly used in web browsers.

The Google V8 JavaScript Engine is an open source JavaScript engine developed by Google and ships with the Google Chrome web browser.[2] Lars Bak is the head programmer.V8 increases performance by compiling JavaScript to native machine code before executing it, rather than to execute bytecode or interpreting it. Further performance increases are achieved by employing optimization techniques such as inline caching. With these features, JavaScript applications running within V8 have an effective speed comparable to a compiled binary.

Rhino is an open source JavaScript engine. It is developed entirely in Java and managed by the Mozilla Foundation. The Foundation also provides another implementation of JavaScript engine written in C known as SpiderMonkey.

A while ago, a group of very intelligent and experienced Front-end Developers got together and created a list of great Front-end focused job interview questions. This group consisted of @bentruyman,@ajpiano, @paul_irish, @SlexAxton, @boazsender, @miketaylr, @iansym, @vladikoff and @gf3. Since it’s creation, I’ve expanded to this list and happen to use it to help friends prepare for interviews (like my good friend Wes Bos / @wesbos) or to interview developers myself.To note, I think that it’s only necessary to choose a handfull of questions from this list to get a good sense of a candidates capabilities and fit. The most telling questions often relate to what a person does in their free time. Asking about Twitter & Github Accounts, RSS feeds, Personal Blogs and general community involvement will tell you a lot about whether or not this person will stay up-to-date and is passionate about their work. The last group of questions will definitely let you know if the person’s got a sense of humour.Hope this list helps some people and, if you do use it, make sure to give credit to the folks that contributed (listed above).