- HTML 40.7%
- JavaScript 38.6%
- CSS 17.3%
- Less 2.2%
- Gherkin 0.6%
- Other 0.6%
| ajax | clean stale spaces | |
| css | clean stale spaces | |
| db/mongodb | first commit | |
| html | clean stale spaces | |
| js | clean stale spaces | |
| server | clean stale spaces | |
| webcomponents | first commit | |
| websocket | first commit | |
| xslt | first commit | |
| .gitignore | first commit | |
| AUTHORS | update email | |
| icon.png | first commit | |
| LICENSE | first commit | |
| README.md | Move readme | |
Notes on Client Side Web Development
A bunch of resources for client side Web application development
Links
Development vs Design
Design
Design Guides and Tips
- Original Design Overview
- Designing for the Web
- A Guide in Making a Web Design Workflow
- Mathematics and Web Design: A Close Relationship
- 10 Basic Principles of Visual Design
- Top 10 Mistakes in Web Design
- Abduzeedo
- Design You Trust
- Web Creme
- WebDesign Inspiration
- Learn FrontEnt Testing
- FrontEnd Developer Questions
- FrontEnd Testing
Mockups and wireframes
Resources
- All-Shilhouettes
- CoolVectors
- [Designers](Revolution http://www.designers-revolution.com/portfolios/free-vectors/)
- Dezignus
- Flaticon
- FreeIconsWeb
- Free Logo Types
- FreeVectors
- FreeVectors
- Free vector packs
- Logo Templater
- QVectors
- Snap2objects
- Spoon Graphics
- Vecteezy
- Vector4Free
- Vector Portal
- Vector Valley
- Vector Vault
Templates
- 960 Grid System
- A detailed look at the 960GS framework
- CSS Zen Garden
- Free CSS Templates
- Standard Screen Patterns
- Templatemo
Colors
- Colour Loves
- Colour Palettes
- Color Schemer
- Colorzilla
- HSL Picker
- Paletton
- On-line color test challenge
Text and Fonts
- Blind Text Generator
- Fillerati
- Lorem Ipsum
- Choosing web fonts
- 50 best free fonts for designers
- 10 Web Typography Rules Every Designer Should Know
- 1001 Free Fonts
- DaFont
- Font Fabric
- Font Squirrel
- Google Fonts
- The Leage of Moveable Type
- Pixels to EMs
- Fontello
- MyScriptFont
- YourFonts
Standards and Protocols
Standards
- CGI 1.1
- CGI 101
- CSS
- HTML
- HTML5
- HTML
- JSON
- MathML
- Multimedia over IP
- SVG
- The JSON Data Interchange Format (ECMA-404)
- URI. Generic syntax
- WAI
- WCAG
- WebGL
- XML 1.1
Protocols
- HTTP State Management Mechanism
- HTTP/1.1
- HTTP/2
- Real Time Streaming Protocol
- Websockets
- WebSockets Basics
- websockets (MDN)
- websocket.org
HTTP Cookies and Data Protection Regulation
- Document Cookies
- Directive 2002/58/EC
- The Cookie Law explained
- The stupid cookie law in 21⁄2 minutes
- EU General Data Protection Regulation (GDPR)
HTML & HTML5
Reference
- A history of HTML
- Document Type Declarations
- Dive Into HTML5
- HTML5 Doctor
- Element index
- HTML Elements
- HTML5 Boilerplate
Support
APIs
- Media Events en HTML5
- HTMLMediaElement
- getUserMedia API
- Canvas API
- Web Audio API
- Demos of HTML5 tecnologies
Polyfills
Quirks mode
Tables
Forms
- button label
- datalist label
- form label
- fieldset label
- input label
- label label
- legend label
- option label
- optgroup label
- output label
- select label
- textarea label
- 20+ HTML Forms Best Practices
- CSS3 Pseudo-Classes and HTML5 forms
- Making forms fabulous with HTML5
Validation
- W3C Markup Validation Service
- Validator.nu Living Validator
- WDG HTML Validator
- http://tidy.sourceforge.net/
Dataset attributes
Web Components
Microdata
- schema.org
- microformats.org
- hCalendar
- hCard
- Microdata standard
- schema.org using microdata
- RDFa
- HTML+RDFa
- JSON-LD
- Microdata generator
- Schema creator
- The Ultimate Microdata Generator
CSS
Reference
- MDN CSS Reference
- CSS Reference (DevDocs)
- The link element
- link vs import
- Cascading and Inheritance
- CSS Specifity, things you should know
- Selectors Level 4
- SMACSS
- Colours
CSS Reset
Preprocessors
PolyFills
Positioning
- The mystery of the float property
- What's the deal with display: inline-block?
- Learn CSS Layout
- Learn CSS Positioning in Ten Steps
- Units
- Modal CSS
Transforms
- CSS transform property
- CSS 3D Transforms
- Matrix construction set
- The Shapes of CSS
- Vertical align usign transforms
Tools
- CSS Validator
- SelectorGadget
- CleanCSS
- CSS Compressor
- CSSmatic
- CSS Text Wrapper
- CSSTidy
- List-o-matic
- Test de selectores CSS3
- The Zen of just writing CSS
- [https://uncss-online.com/](UCSS online)
Resources
- -prefix-free
- 20 CSS tips & tricks
- 20 Useful CSS Tips For Beginners
- CSS Background Image Hacks
- CSS Layout Generator
- CSS play
- CSS Triangle
- CSS-Tricks
- Auto Reload
- Style Master
- Espresso
Frameworks and repositories
- Wikipedia article
- Blueprint
- Bulma
- Compass
- mini.css
- [Kube](http://imperavi.com/kube/]
- Picnic CSS
- MontageJS
- Pure.css
- Semantic UI
- Sizzle
- Susy
- Unsemantic
- Formalize CSS
User agents
Internet Suites
Web Browsers
Graphical
- Arora
- Avant
- Chromium
- Comodo Dragon
- Dillo
- Dolphin
- Google Chrome
- GNU IceCat
- Internet Explorer
- K-Meleon
- Konqueror
- Lunascape
- Maxthon
- Microsoft Edge
- Midori
- Mozilla Firefox
- Opera
- Safari
Text
Headless
Technology support
Rendering engines and modes
- Blink
- EdgeHTML
- Gecko
- Servo
- Trident - MSHTML
- Webkit
- Picking a rendering mode
- Quirks mode and standard mode
Aplication execution
DOM
Events and processes
- UI Events
- Custom Events
- Event Interface
- Event order, Capturing and Bubbling
- Event Reference
- Web Workers
- Notifications API
- WindowTimers
- Parallel.js
- WebHamsters
- Progress Events
- Preloaders
- spin.js
Local Storage
Multimedia
Pictures and Images
Tools
- Raster Graphics Editors
- ConvertICO
- Free Online Photo Editor
- Gimp
- Liquid Rescale Gimp Plugin
- NoJPEG
- Placehold.it
- Progressive image renderings
- The data URL scheme
- 21 Canvas experiments
- Core HTML5 Canvas examples
Libraries
- holder.js
- Fotorama
- jCarousel
- jMyCarousel
- Lightbox
- ResponsiveSlides.js
- D3
- Fabric.js
- GFX
- GoJS
- oCanvas
- p5*js
- Paper.js
- planck.js
- Processing.js
- Raphaël
- Zebra
- explorercanvas
Presentations
Tools
Animations, Transitions and Sprites
Tools
- CSS Animations
- CSS Transitions
- All about CSS Transitions
- All about CSS Animations
- 3D Flip cards
- CSS3 Animations CheatSheet
- Cubic-bezier
- SpinKit
- Picasion
- GIF Maker
- CSS Sprite Generator
- Grumpicon
- Sprite Cow
- SpriteMe
- Spriting with Compass
Libraries
Audio & Video
Tools
- Audio Editors
- Web audio examples
- Getting started with Web Audio API
- aTube Catcher
- FFmpeg
- MiroVideoConverter
- Download videos
- videoconverter.js
- Free Studio
Libraries
- Acorn Media Player
- CreateJS
- audio.js
- Buzz!
- MediaElement.js
- jPlayer
- Simple HTML5 Audio Player
- video.js
3D
Tools
Libraries
Games
Repositories
- everystockphoto
- Flickr
- FreeDigitalPhotos
- FreePhotosBank
- FreeStockPhotography
- IgniteMotion
- morgueFile
- PickFindr
- PIXSY
- SoundBible
- stockvault.net
- freeimages
- Wikimedia Commons
Usability
Usability related sites
Standards
Test and Analysis
Polyfills
Responsive Web Design
Frameworks
- Adapt.js
- 960 grid system
- Bootstrap
- Foundation
- GroundworkCSS
- HTML KickStart
- Kube
- Pure
- Responsive Grid System
- Sapper
- Skeleton
- SproutCore
- Toast
Fonts
Images
- Adaptive Images
- How to build Responsive Images with srcset
- Responsive images in practice
- Retina images
Testing
- Adobe Edge Inspect CC
- Browsershots
- Browserstack
- Demonstrating Responsive Design
- MobiReady
- netrenderer
- resizeMyBrowser
- Resizer
- Responsinator
- Screenfly
- ScreenQueries
- Viewport Resizer
- W3C MobileOK Checker
Accesibility
Tips
Evaluation and Testing Tools
- Accessibility Evaluation Toolbar
- Accessibility Features in Firefox
- Fangs Screen Reader Emulator
- Accesibility Developer Tools
- Web Accesibility Toolbar for IE
- Hera
- Taw
- WebAIM's WCAG 2.0 Checklist for HTML documents
Support Technologies
Development tools and platforms
IaaS and PaaS
Text Editors and IDE
- Amaya
- Atom
- Brackets
- Bluefish
- CodeMirror
- Geany
- gedit
- GNU Emacs
- jEdit
- Komodo Edit
- Light Table
- Notepad++
- Sublime Text
- textmate
- Vim
- EditorConfig
- Emmet
- Tern
- Zen-coding
- Aptana
- Coding Ground
- Eclipse
- IntelliJ IDEA
- Komodo IDE
- NetBeans
- Microsoft VisualStudio
- Oracle jDeveloper
- WebStorm
Packet Managers
Pastes
Task Runners
SCM
- Semantic Versioning
- Apache Subversion
- BitKeeper
- CVS
- Darcs
- Fossil
- Gerrit Code Review
- GNU Bazaar
- GNU RCS
- Mercurial
- Learn & practice Git
Agile Development
BDD & TDD Frameworks
- *localtest.me
- Buster.js
- Cucumber-js
- Istanbul
- Jasmine
- Jstest
- Mocha
- Nodeunit
- QUnit
- Sinon.js
- YUI Test
- Zombieexpect.js
Assertion Libraries
Test automation
Continous Integration
Documentation
QA Tools
Optimization, Compression, Obfuscation and Code Cleaners
- Closure Tools
- HexDecoder
- JavaScript Obfuscator
- JavaScript SourceMaps
- JSBeautifier
- JSMin
- UglifyJS
- YUI Compressor
Bug trackers
Code generators
JavaScript
Reference
- Douglas Crockford: The JavaScript Programming Language
- Douglas Crockford’s Function Challenges
- JavaScript Garden
- Perfection Kills
- Functional JavaScript Workshop
- What the fuck JavaScript
- JavaScript Reference (MDN)
- JavaScript Reference (DevDocs)
ECMAScript
- The World of ECMAScript
- ECMA-262 - ECMAScript 2015
- ECMAScript6 compatibility table
- ECMAScript 6 support in Mozilla
Engines and Execution Environments
- Rhino
- V8
- Browserify
- JSC
- Node.js
- Node OS
- NW.js
- Writing for node and the browser
- How to enable JavaScript in your browser
- Wirting JavaSCript for XHTML
Transports and Document Origin Policies
- SOP
- CORS
- Remote JSON - JSONP
- Web Bug
- XSS Prevention Cheatsheet
- Web Messaging
- CSRF Prevention Cheatsheet
Asynchronous Execution
Pull (Ajax)
- Article
- Why Ajax isn't enough
- jQuery API for Ajax
- jQuery Ajax
- lleval Ajax service
- XMLHttpRequest - Level 1
- RestClient for Mozilla Firefox
Push (Comet)
Compilation to JavaScript
Polyfills
Best Practices and Coding Styles
- W3C JavaScript Best Practices
- 15+ Best Practices for writing code
- Code Conventions for the JavaScript Programming Language
- Dojo Style Guide
- Google JavaScript Style Guide
- Idiomatic.js
- jQuery JavaScript Style Guide
- Project guidelines
Predefined Objects
- Array (MDN)
- Working with objects
- Object (MDN)
- Classes (ES6)
- ObjectPlayground
- Iterators and Generators (MDN)
Regular Expresions
JSON & BSON
Functional Programming
- 11 ways to invoke a function in JavaScript
- Don't be scared of functional programming
- Functional JavaScript Workshop
Libraries
- Wikipedia article
- Animate Plus
- AR.js
- AmplifyJS
- CocoonJS
- jSchema
- Processing.js
- ReactXP
- React
- ReactiveX
- Sizzle
- Sugar
- Uize
- Vanilla JS
- Yui
- script.aculo.us
DOM
jQuery
- API
- jQuery Plugins
- jQuery Mobile
- jQuery UI
- jQuery exercise
- jQuery Learning Center
- Try jQuery
- FireQuery
- jQuery bookmarklet
- jquery-injector
Modular Programming
Communications
Functional Programming
Stacks and Frameworks
DOM
MVC
- Wikipedia Article
- 10 JavaScript MVC Frameworks
- TodoMVC
- Agility.js
- AngularJS
- Backbone.js
- Derby
- Ember
- doneJS
- Mithril
- Spine
- Vue.js
- Yahoo Mojito
MVVM
Stacks
CDN
Advanced
Miscellaneous
Components
Geolocalization
Avatars
Sign-in
Social Networks
- Facebook for developers
- GitHub for developers
- Google for developers
- Gravatar for developers
- LinkedIn for developers
- Twitter for developers
Benchmarking
Antibots, antispam
Miscellaneous
Books
People
Quotes
"A picture is worth a thousand words. An interface is worth a thousand pictures." Ben Shneiderman
"A user interface is like a joke. If you have to explain it, it's not that good."
"Programs are meant to be read by humans and only incidentally for computers to execute." Abelson & Sussman (Structure and Interpretation of Computer Programs)
"Basically, perfect development is impossible. Development can be fast, good, and cheap. Pick two." Larry Wall
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan (The C Programming Language)
"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies." C.A.R. Hoare
"A bug is not an error in logic, it is a test that was not written." Agile Methods
"A well-written program is its own Heaven; a poorly-written program is its own Hell." Tao of Programming
"Though a program be but three lines long, someday it will have to be maintained." Tao of Programming
"The only thing more expensive than writing software is writing bad software." Alan Cooper
"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Kyle Ritcher
"The ultimate unit test is whether or not users want to use your application. All the other tests you write are totally irrelevant until you can get that one to pass." Jeff Atwood
Links (Spanish)
- Cómo equilibrar una composición
- ¿Qué es la IPO?
- Asociación Interacción Persona-Ordenador
- Accesibilidad: Discapacidad en la Web - Parte 1
- Accesibilidad: Discapacidad en la Web - Parte 2
- Referencia de HTML en DevDocs
- Historia de HTML
- No Solo Usabilidad
- [https://www.youtube.com/watch?v=AQn22gjtSWQ&index=2&list=PLI7nHlOIIPOJtTDs1HVJABswW-xJcA7_o](Curso de JavaScript)
- Introducción a CSS
- CSS avanzado
- Curso de CSS de la W3C
- Exposición del framework 960GS
- Maquetación CSS con 960GS
- Introducción a Canvas
- Lista de editores de vídeo
- Ejercicios con jQuery
- Manual de Bootstrap 3
- Expresiones regulares: Conceptos básicos
- Expresiones regulares: sintaxis Perl/PCRE
- Introducción a Ajax
- Real Decreto-ley 13/2012
- Frontazo
- Ejercicios sobre el DOM
- Diseño Web centrado en el usuario
- Galería de Media Queries
- Accesibilidad en la Web
- Accesibilidad web
- Accesibilidad web: Legislación en España
- Norma UNE 139803:2012
- Sid@r
- Historia y Sintaxis básica
- Hipster Coding #2: Haciendo Tostadas con Yeoman, Gulp y Bower - Blog de Sergio Gordillo