por Bruno García Echegaray hace 12 años
67973
Ver más
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.
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).
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.
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.
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.
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.
Any suggestions or comments, please contact me at:
Web: http://bruno.garciaechegaray.com
Twitter: http://twitter.com/garciaechegaray
Tumblr: http://brunogarciaechegaray.tumblr.com
Wiki: https://github.com/brunogarcia/Front-end-Wiki/
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.
The only 100% Cloud based development environment
for Mobile, Tablet and Desktop
Free. Powerful. Completely uncompromising.
Calipso is a simple content management system, built along similar themes to Drupal and Wordpress, that is designed to be fast, flexible and simple.
Video
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.
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.
Treehouse
Treehouse is the best way to learn how to design and develop for the web and iOS.
Tuts+ Premium
The best way to learn creative and technical skills like design, web development (and lots more).
Code School
Join the thousands of web professionals who are learning by doing through interactive video + coding in the browser.
Practice
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.
Ruby Monk
The Ruby Primer is a free interactive book that helps you learn Ruby.
Code Academy
Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends.
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.
Rosenfeld
Programming Motherfucker
A Book Apart
Five Simple Steps
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.
Perkins
I am a Framework thought to make the life of designers and developers a bit easier
I 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.
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.
Style Bootstrap
Create unique design with Bootstrap v2
Wrap Bootstrap
WrapBootstrap is a marketplace for premium Bootstrap themes and templates.
Compass
Compass is an open-source CSS Authoring Framework.
Stitch CSS
A CSS Pattern Framework for Compass
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.
iOS Boiler Plate
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.
Laker
Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5
Titanium
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.
99lime
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.
Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
HTML5 Boilerplate
A rock-solid default for HTML5 awesome.
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.
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.
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?
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.
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.
StackLayout
A flexible width, component based CSS layout system
SimpleGrid
Responsive. Infinite nesting. One class per element. Simple.
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.)
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:
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..!
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.
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.
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.
320 and Up
Foundation
An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device. Start here, build everywhere.
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.
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.
Less Framework
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
Reset Reloaded
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.
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.
Vendor-prefixed
DucHub
Starbucks
Mail Chimp
Pattern Primer
SurveyMonkey
StyleDocco
StyleDocco generates documentation and style guide documents from your stylesheets.
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.
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.
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.
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.
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
Mixins
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.
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.
Compiler
App
Mac
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.
Less.app
This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.
Mac only.
Multi Device
Simpless
It compiles your *.less files into valid CSS.
Available for free for mac, linux and pc.
Crunch!
The LESS editor and compiler that almost makes it too easy.
Front
Javascript: less.js
Java: LESS Servlet
.NET: dotlesscss
Cassete
Asset bundling for .NET web apps
Dumping 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.
Python
Perl: LESSp
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.
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.
HSS
HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks.
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.
Stylus
Expressive, dynamic, robust CSS
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.
CSS3 Please
The Cross-Browser CSS3 Rule Generator
CSS3 Pie
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
HTML5 Outline
HTML 5 Outliner
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 more
When 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.
Mobile HTML5
Trying to understand HTML5 compatibility on mobile and tablet browsers.
html5shiv
HTML5 IE enabling script
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Modernizr
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
OR
A 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.
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.
Jade
Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.
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.
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.
This wiki indexes libraries and resources available for JavaScript.
JavaScript Garden
The Node Beginner Book
jQuery Fundamentals
Eloquent JavaScript
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.
Mozilla JavaScript Guide
Beatiful JS
JavaScript that belies the common conception of beauty
Idiomatic.js
Principles of Writing Consistent, Idiomatic JavaScript
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.
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.
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.
List of languages that compile to JS
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.
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.
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
Node.js
Evented I/O for V8 JavaScript.
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.
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>
Derby
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.
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.
TodoMVC
A common learning application for popular JavaScript MV* frameworks
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.
Tests Warm
Distributed continuous integration for JavaScript
QUnit
An easy-to-use JavaScript Unit Testing framework
jsPerf
JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
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.
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.
Desktop
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.
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.
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.
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.
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.
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 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.
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.
Visual Cheat Sheet
jQuery Boilerplate
Jump-starting jQuery plugins development
Mobile & Touchscreen
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.
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.
Sencha Touch
Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.
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.
jQuery Mobile
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A 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.
Graphic & Video
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.
SWFObject
SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file
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.
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.
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.
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.
melonJS
A lightweight HTML5 game engine
Impact JS
Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.
Cocoon JS
Javascript on native environments at zero coding cost
Cocoon 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.
Crafty
LimeJS
LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.
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.
Isogenic Engine
YepNope
yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.
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.
ControlJS
ControlJS is a JavaScript module for making scripts load faster.
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.
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.
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.
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.
EM Calc
Pixels to EM
Opera Mobile
IETester
Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10
Browser Stack
PasteBin
Codeanywhere
Ideone
CodePad
jsBin
SQL Fiddle
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.
Get website content painlessly.
Take away the headache of collecting, organising and approving client content.
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.
ClickTale
Click Density
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.
Crazy Egg
Optimizely
Google Web Optimizer
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 Analytics
AB Tests
Google Webmaster Central
Flick Holdr
Get placeholders related to the site you are developing, by pulling images from flickr based on tags
FlickrBomb
Build super awesome sites quickly, with super awesome images
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.
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.
Placehold.it
A quick and simple image placeholder service.
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.
CSS Usage
Firebug extension to view which CSS rules are actually used.
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.
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.
Live HTTP Headers
View HTTP headers of a page and while browsing.
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.
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
HTML5 Outliner
Web Developer
The Web Developer extension adds various web developer tools to a browser.
Firebug
The most popular and powerful web development tool
There’s life after Georgia and Verdana. Using standard CSS @font-face to embed licensed fonts on your website.
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.
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.
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.
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.
Pixelapse
Timelapse of your designs
Visual version control done right
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.
Patterns
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.
Mobile Design Pattern Gallery
Mobile Patterns
UI Patterns
Patternry
52 Weeks of UX
A discourse on the process of designing for real people
Teach your clients about the mysteries of the web
BEM
BEM is an approach to front-end development designed with flexibility and ease of modification in mind.
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.
Taking control of the cascade
SMACSS
Scalable and Modular Architecture for CSS.
An evolving guide to CSS architecture for sites small and large.
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.
CSS Test Performance
OOCSS for Javascript
Grid System
The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice.
GuideGuide for Photoshop
I give you GuideGuide: a columns, rows and midpoints panel for Photoshop CS4 & CS5
Gridpak
The Responsive grid generator
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.
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.
CSS Sprites Revisited
Spritecow
Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
Glue
Glue is a simple command line tool to generate CSS sprites.
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.
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
Content strategy plans for the creation, publication, and governance of useful, usable content.
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.
Images
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.
Responsive images
An Experiment with Mobile-First Images that Scale Responsively & Responsibly
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.
Media Queries
A collection of sites using media queries.
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.
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 Binary JSON, is a binary-encoded serialization of JSON-like documents. Like JSON, BSON supports the embedding of documents and arrays within other documents and arrays. BSON also contains extensions that allow representation of data types that are not part of the JSON spec. For example, BSON has a Date type and a BinData type.
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.
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.
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.
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.
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.
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.
Microdata
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.
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).
HTML5 Element Index
This is a quick reference of elements that are new or have been redefined in HTML5.
XPath
XSLT
XHTML
