michsch / Frontenddevelopment-Resources

Frontend Development Resources

Documentations and specifications

• DocHub - Fast search inside of documentations: PHP, Python, jQuery and MDN for JavaScript, CSS and HTML
• HTML5 Web Developer Edition
• The Web platform: Browser technologies - huge linklist for all modern webtechniques
• Übersicht über HTML5-Spezifikationen und -Literatur - German
• Annotated ECMAScript 5.1
• HTML5Doctor - Element index
• CSS3-Files
• The Current State of HTML5-Forms - All new form-types and attributes are documented and constantly tested in the browsers if and why the new techniques are implemented.
• HTML5Doctor
• HTML5rocks

Basic infos about CSS and HTML

• The Shapes of CSS - Build hearts and other shapes only with CSS.
• CSS-101 Basic informations about CSS with little tests.
• CSS-Discuss Wiki - Wiki of the internationally used mailing-list "css-discuss".
• Reine Formsache - German - Umfangreiche Darstellung über die wichtigsten Aspekte der Erstellung und Gestaltung von Formularen
• All about floats
• HTML5 & CSS3 Fundamentals: Development for Absolute Beginners - 21 videos from Microsoft about frontend development.
• Learn CSS Layout
• Web Do's and Don'ts
• An Advanced Guide to HTML & CSS

Basics about JavaScript

• Eloquent JavaScript
• Einführung in JavaScript - German
• Die Grundlagen von JavaScript - German
• Learning JavaScript Design Patterns
• JavaScript For Cats
• JavaScript Guide - Basic tutorials by Mozilla.
• Javascript Fundamentals: Development for Absolute Beginners - 21 tutorial videos by Microsoft.

JavaScript libraries

• html5shiv - Enables the new HTML5 elements in IE < 9
• Prefix Free - Automatic vendor prefixes for CSS3
• HTML5 Cross Browser Polyfills
• JSWiki - huge linklist

jQuery

• jQuery Fundamentals
• jQuery Selectors - test all the possible jQuery selectors on one page
• jQAPI - Alternative jQuery Documentation
• Commonly Confused Bits Of jQuery

Accessibility

• Yahoo! Accessibiliy Blog
• Yahoo! Accessibility Library
• WCAG 2.0
• WCAG2 Techniques
• Using WAI-ARIA in HTML
• The Accessibility Project
• WCAG Cheat Sheet
• WCAG 2 Quick Reference
• HTML5Accessibility

German Accessibility Ressources

• WCAG 2.0
• WCAG2 Techniken
• WCAG 2.0 im Überblick

Responsive Webdesign

• This is responsive - patterns, resources, news
• MQtest.io - A simple tool to help identify which media queries your device responds to.
• Palm Reader - Showing what @media features your device can and can't see
• Device pixel density tests

Browser-specific informations

• Introduction to Filters and Transitions - Dive into the early ideas of CSS3, as they still were IE-specific filters. They can help you mimic CSS3 for oldIE
• Webkit CSS properties - all webkit-specific CSS-properties with explanatory pages
• Webkit Extensions - all webkit-specific CSS-properties with explanatory pages
• Mozilla CSS Extensions - all Mozilla-specific CSS-properties with explanations
• CSS Compatibility and Internet Explorer - Which properties does IE support since which version? First-hand informations from Microsoft
• webbrowsercompatibility.com - Compatibility tables showing support for front-end technologies in web browsers
• Browserhacks.com - extensive list of hacks and filters to separate browsers regarding version numbers

Single articles of importance

• New form features in HTML5
• Profiling CSS for fun and profit - Detailed analysis of the performance aspects of CSS3-properties.
• What the Heck is Shadow DOM?
• @font-face gotchas

Blogs

• CSS-Tricks
• Smashingmagazine
• Peter Kröner - German

Compatibility tables

• When can I use... - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• The Current State of HTML5 Forms - Browser support for the different features of HTML5 forms
• ECMAScript 5 compatibility table
• CSS3 Click-chart
• HTML5please
• MobileHTML5.org - Which feature is supported from which mobile device?

Cheat sheets

• HTML5 Security Cheatsheet
• HTML5 Canvas Cheat Sheet
• Animatable Properties - Which properties can be animated with CSS3?

CSS3 click & run

• css3.mikeplate.com - border-radius, box-shadow, text-shadow, transforms, columns, gradients, border, outline, multiple backgrounds
• CSS3Maker - border-radius, gradients, transforms, animations, transition, rgba, text-shadow, box-shadow, text-rotation, @font-face
• CSS3 Animations
• Colorzilla Gradient Editor - Create your gradients just like your browser and grab the code. The tool produces the final W3C-syntax and can create filters for the older IE and an SVG for IE9.
• i2Style - create buttons with CSS3 inside your browser with ease

Tools

• jsFiddle - CSS-/JS-sandbox

• Dabblet - CSS-sandbox

• JSBin - CSS-/JS-sandbox - livecoding

• Codepen - CSS-/JS-sandbox - livecoding

• CSS-Selectors - test the new CSS3-selectors with an example-text

• CSS3 structural pseudo-class selector tester - testing the new pseudoclasses :nth-child, :nth-last-child, :nth-of-type and :nth-last-of-type

• DataURI-converter - Drag an image inside your browser and grab the data-uri. Unfortunataly this technique doesn't work in IE preceding version 8.

• rgab-argb-converter - Convert rgba to a hex-color that you can insert into an IE-filter.

• htaccess-editor

• Table styler

• Nice Entity - Quick References of Most Common Entities

• csscss - find redundant rules in your CSS

• Emmet - the former zen-coding helps you coding faster in your editor or IDE

Guides and coding standards

• Principles of writing consistent, idiomatic JavaScript
• Principles of writing consistent, idiomatic CSS
• Front-end Code Standards & Best Practices
• Front end styleguides and pattern libraries - very extensive list

Demos and experiments

• HTML 5 Demos and Examples
• HTML5 - Information and samples for HTML5 and related APIs
• CSS3 - Information and samples
• DOCTYPEhtml.net HTML5- and CSS3-Demos
• isithackday (experiments by Chris Heilmann)
• Demos and Experiments by Mozilla
• ZURB Playground
• The Web rocks! - Demos made by Chris Heilmann
• html5-demos.appspot.com

Performance

• Book of speed
• Faster Websites: Crash Course on Web Performance
• Web Performance 101: An opinionated guide to the 22 links every developer should read
• 14 Rules for Faster-Loading Web Sites
• Ladezeitenoptimierung - German

Sass and Compass

• Sass - project page
• Compass - project page
• Compass Reference Browser
• Better Sass Docs
• Stitch - a CSS pattern framework for Compass
• Bourbon - collection of mixins
• Zocial - CSS3 buttons
• Sassy buttons
• Font-icons - Compass font-icons generator
• Sassmeister - convert Sass into CSS online for demo purposes
• Presentation of Chris Eppstein about technical details of Sass and Compass

Webfonts and Iconfonts

• We love Iconfonts
• Font Custom - Generate custom icon webfonts from the comfort of the command line.
• Fontello - icon fonts generator
• FontSquirrel
• The League of Moveable Type
• IcoMoon - Browse and select icons to download them or make a font. You may import SVG images or fonts too.