Front-end Development

Front-end or client-side development is a relatively obscure Internet discipline. Historically, this role has been known under several aliases, htmler, web designer, coder, frontender and so on, but its core functions remain the same while expanding with the progress of the Internet. It is a hinge role that requires both aesthetic sensitivity and programmatic rigor.To many people, client-side development might be perceived as 'making things pretty' and, while it is a valid comment since we do make things look good, as good-looking things sell better, there are many other technologies that fall within this field that might be usually overlooked.

Standards

W3C

HTML

XHTML

CSS

XML

DOM

XSL

XSLT

XPath

SVG

WOFF

WHATWG

HTML5

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.

HTML5 Element Index

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

Multimedia

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

Storage

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.

Microdata

Offline web applications

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.

Geolocation

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.

WebSockets

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.

Canvas

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.

Web Workers

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.

Ecma International

JavaScript

IETF

JSON

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

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.

Web Community Development

Best Practices

Responsive Web Design

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.

RESS

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.

Media Queries

A collection of sites using media queries.

Pixel Proliferation

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.

Images

Responsive images

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

Adaptive Images

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

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

WAI

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.

Evaluating Web Design Accessibility

Performance

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.

Progressive Enhancement

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.

CSS Sprites

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

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

Spritecow

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

CSS Sprites Revisited

Architecture for CSS

Grid System

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.

Gridpak

The Responsive grid generator

GuideGuide for Photoshop

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

Object-Oriented CSS

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.

OOCSS for Javascript

CSS Test Performance

SMACSS

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

Taking control of the cascade

Isobar

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

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

Wee Nudge

Teach your clients about the mysteries of the web

UX

52 Weeks of UX

A discourse on the process of designing for real people

Patterns

Patternry

UI Patterns

Mobile Patterns

Mobile Design Pattern Gallery

Pears

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.

Graphic Design

The Photoshop Etiquette Manifesto for Web Designers

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.

Pixelapse

Timelapse of your designsVisual version control done right

Email Standards Proyect

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

Microformat

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.

Microformats.org

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

Schema.org

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.

Humans.txt

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.

WebFonts

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

Google Web Fonts

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

Typekit

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.

Font Deck

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

Fonts.com

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

Font Squirrel

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.

The League of Moveable Type

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

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.

Open Typography

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

Cufon

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

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

Tools

Addons

Firebug

The most popular and powerful web development tool

Web Developer

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

HTML5 Outliner

FireQuery

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

HeadingsMap

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.

Live HTTP Headers

View HTTP headers of a page and while browsing.

Dust me selectors

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

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.

CSS Usage

Firebug extension to view which CSS rules are actually used.

Awesome Screenshot

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

Image placeholder

Placehold.it

A quick and simple image placeholder service.

Place Kitten

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.

Lorem Pixum

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.

FlickrBomb

Build super awesome sites quickly, with super awesome images

Flick Holdr

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

Analytics & Optimizer

Google Webmaster Central

Google Analytics

AB Tests

piwik

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.

Google Web Optimizer

Optimizely

HeatMaps

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.

Crazy Egg

heatmaps.js

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.

Click Density

ClickTale

Gather Content

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

Online Editor

jsFiddle

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.

SQL Fiddle

jsBin

CodePad

Ideone

Codeanywhere

PasteBin

Emulator

Browser Stack

IETester

Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10

Opera Mobile

Color Scheme Designer

Calculator

Pixels to EM

EM Calc

Browser Update

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.

JavaScript

Loaders

LABjs

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.

Head.js

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

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

ControlJS is a JavaScript module for making scripts load faster.

EnhanceJS

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

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

JavaScript Library

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.

Games

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.

Isogenic Engine

GameJS

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

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

Crafty

Cocoon JS

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 JS

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

melonJS

A lightweight HTML5 game engine

Graphic & Video

Raphaël

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.

three.js

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

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

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

Popcorn.js

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.

Mobile & Touchscreen

jQuery Mobile

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.

LungoJS

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

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

Zepto.js

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

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.

Desktop

jQuery

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.

jQuery Boilerplate

Jump-starting jQuery plugins development

Visual Cheat Sheet

jQuery UI

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

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

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

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.

Ex Core

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

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.

YUI Library

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

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

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.

Test & Performance

Jasmine

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.

jsPerf

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.

QUnit

An easy-to-use JavaScript Unit Testing framework

Tests Warm

Distributed continuous integration for JavaScript

MVC

Backbone.js

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.

TodoMVC

A common learning application for popular JavaScript MV* frameworks

JavascriptMVC

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.

Derby

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

Hidra.js

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

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.

Server

Node.js

Evented I/O for V8 JavaScript.

Compile to JS

List of languages that compile to JS

CoffeeScript

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

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

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.

Objects

Augment.js

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.

Sugar

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

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.

Best Practice

Idiomatic.js

Principles of Writing Consistent, Idiomatic JavaScript

Beatiful JS

JavaScript that belies the common conception of beauty

Books

Mozilla JavaScript Guide

Essential JavaScript Design Patterns

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

Eloquent JavaScript

jQuery Fundamentals

The Node Beginner Book

JavaScript Garden

JS Wiki

This wiki indexes libraries and resources available for JavaScript.

HTML

IE Hacks

Chrome Frame

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

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.

Template Engine

Jade

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

HAML

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.

HTML5

Modernizr

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.

haz.io

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.

html5shiv

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

Mobile HTML5

Trying to understand HTML5 compatibility on mobile and tablet browsers.

HTML5 Please

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.

HTML5 Outline

HTML 5 Outliner

CSS

CSS3

Modernizr

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.

haz.io

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.

CSS3 Pie

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

CSS3 Please

The Cross-Browser CSS3 Rule Generator

Selectivizr

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.

Preprocessors

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.

Stylus

Expressive, dynamic, robust CSS

XCSS

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

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

CleverCSS

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

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

Compiler

Server

PHP: lessphp

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.

Perl: LESSp

Python

.NET: dotlesscss

Cassete

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.

Java: LESS Servlet

Front

Javascript: less.js

App

Multi Device

Crunch!

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

Simpless

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

Mac

Less.app

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

CodeKit

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.

Mixins

LESS Elements

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

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

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.

Documentation

CSS DOC

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.

Knyle Style Sheets

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

StyleDocco

StyleDocco generates documentation and style guide documents from your stylesheets.

Pears

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.

Style Guide

SurveyMonkey

Pattern Primer

Mail Chimp

Starbucks

Reference

DucHub

Vendor-prefixed

Performance

minify

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.

Reset

Normalize.css

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.

Reset Reloaded

Front-end Frameworks

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.

Responsive Layout

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

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.

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

Semantic.gs

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.

Foundation

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

320 and Up

Columnal

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

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.

BlueCSS

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.

Amazium

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

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:

OOCSS

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

SimpleGrid

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

StackLayout

A flexible width, component based CSS layout system

Static Layout

Blueprint

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.

960 GS

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.

1kB CSS Grid

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?

Baseline

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.

HTML5

52 Framework

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.

HTML5 Boilerplate

A rock-solid default for HTML5 awesome.

Gridless

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

LimeJS

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

G5 Framework

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.

99lime

Mobile & TouchScreen

App

PhoneGap

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.

Titanium

Sencha Touch

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

jQuery Mobile

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.

LungoJS

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

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

HTML5 Boilerplate Mobile

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.

iOS Boiler Plate

Inuit CSS

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

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.

SASS

Golden Grid System

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

Compass is an open-source CSS Authoring Framework.

Stitch CSS

A CSS Pattern Framework for Compass

LESS

Bootstrap (by Twitter)

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.

Wrap Bootstrap

WrapBootstrap is a marketplace for premium Bootstrap themes and templates.

Style Bootstrap

Create unique design with Bootstrap v2

Perkins

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

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.

320 and Up

Learning

Books

Five Simple Steps

A Book Apart

Programming Motherfucker

Rosenfeld

Mozilla Developer Network

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.

Tutorials

Practice

Code Academy

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

Ruby Monk

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

Codesonic

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.

Video

Code School

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

Tuts+ Premium

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

Treehouse

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

Plural Sight

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.

Pragmatic Studio

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.

CMS

Calipso

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

Wordpress

Drupal

Icons

Pictos.cc

Picons.me

Fico

Ico Moon

IDE

Application Craft

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

Cloud9

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.

Curated by @garciaechegaray

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/

Engine

Layout

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.

Trident

Gecko

WebKit

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.

Presto

KHTML

JavaScript

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.

V8

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

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.

Front-end Job InterviewQuestions

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

Selecting a Front-End Solution

You've finished your presentation
Restart
en