Javascript: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 48: | Zeile 48: | ||
** [http://www.speedawarenessmonth.com/the-non-blocking-script-loader-pattern/ The non-blocking script loader pattern] | ** [http://www.speedawarenessmonth.com/the-non-blocking-script-loader-pattern/ The non-blocking script loader pattern] | ||
* [http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas 10 Javascript Performance Boosting Tips from Nicholas Zakas] | * [http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas 10 Javascript Performance Boosting Tips from Nicholas Zakas] | ||
+ | * [http://github.e-sites.nl/perimeter.js/ Perimeter.js] - creates an invisible perimeter around a target element and monitors mouse breaches. | ||
==Quality== | ==Quality== | ||
Zeile 70: | Zeile 71: | ||
===Visualization=== | ===Visualization=== | ||
+ | * [http://www.chartjs.org/ Chart.js] - Easy, object oriented client side graphs for designers and developers. ([https://github.com/nnnick/Chart.js GitHub]) | ||
* [https://github.com/mbostock/d3/wiki/Gallery D3 Gallery] - data visualization - in a lot of ways. xCharts builds upon it. | * [https://github.com/mbostock/d3/wiki/Gallery D3 Gallery] - data visualization - in a lot of ways. xCharts builds upon it. | ||
+ | * [http://humblesoftware.com/flotr2/# Flotr2] - ([https://github.com/HumbleSoftware/Flotr2 GitHub]) | ||
* [http://timeline.verite.co/ Timeline JS] - Beautifully crafted timelines that are easy, and intuitive to use. | * [http://timeline.verite.co/ Timeline JS] - Beautifully crafted timelines that are easy, and intuitive to use. | ||
− | |||
===Search=== | ===Search=== | ||
Zeile 89: | Zeile 91: | ||
===Markdown=== | ===Markdown=== | ||
* [https://github.com/chjj/marked marked] - a markdown parser and compiler. Built for speed. | * [https://github.com/chjj/marked marked] - a markdown parser and compiler. Built for speed. | ||
+ | * [http://epiceditor.com/ EpicEditor] - an embeddable JavaScript Markdown Editor. | ||
+ | |||
+ | ===Contenteditable=== | ||
+ | * [https://github.com/NYTimes/ice ice.js] - track changes implementation for anything that is contenteditable. | ||
==Deliver== | ==Deliver== | ||
Zeile 99: | Zeile 105: | ||
==jQuery== | ==jQuery== | ||
* [http://www.jqueryscript.net/ jQuery Plugins] | * [http://www.jqueryscript.net/ jQuery Plugins] | ||
+ | |||
+ | ==HTML5== | ||
+ | ===localStorage=== | ||
+ | * [http://pieroxy.net/blog/pages/lz-string/index.html lz-string] - compress JS strings. | ||
==Node.js== | ==Node.js== | ||
Zeile 114: | Zeile 124: | ||
* [http://javascript.crockford.com/code.html Code Conventions for the JavaScript Programming Language] | * [http://javascript.crockford.com/code.html Code Conventions for the JavaScript Programming Language] | ||
* [https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guide] | * [https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guide] | ||
+ | |||
+ | ==Decoupling== | ||
+ | * [http://philipwalton.com/articles/decoupling-html-css-and-javascript/ Decoupling Your HTML, CSS, and JavaScript] | ||
==Deploy== | ==Deploy== |
Aktuelle Version vom 4. September 2013, 18:06 Uhr
Learn
- 125 CSS and JavaScript tutorials to power up your skills
- JavaScript-Garden - growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.
- http://javascriptissexy.com/ - JavaScript is Sexy
- Object Playground: The Definitive Guide to Object-Oriented JavaScript - with Video.
- JavaScript in one page
- Superhero.js - Collection of the best articles, videos and presentations on creating, testing and maintaining a large JavaScript code base.
Writing
Javascript Development Workflow
Siehe Web Development Workflow
Keyboard
- Mousetrap - A simple library for handling keyboard shortcuts in Javascript.
Numbers
Templates
List of JavaScript templates from Mozilla.
- mustache.js - minimal templating in JavaScript. Compatible with http://handlebarsjs.com/.
- hogan.js - 2.5k JS compiler for the Mustache templating language.
- doT.js - the fastest + concise javascript template engine for Node.js and browsers.
- dustjs - аsynchronous templates for the browser and node.js (demo).
- LinkedIn's dustjs, GitHub, Tutorial ({$idx}), Leaving JSPs in the dust, Dustjs Helpers (bower: dustjs-linkedin-helpers)
- JavaScript Templates - < 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies.
- pure - Simple and ultra-fast templating tool to generate HTML from JSON data. Keep your HTML clean of any logic using JSON and Javascript only
- EJS - EJS cleans the HTML out of your JavaScript with client side templates.
- JsViews - the JsViews framework brings declarative data-binding to JsRender templates, supports MVVM and MVP (custom tag controls), and much more...
- JSON Template -
- jQuery_HandlebarsJS - jQuery plugin for use http://handlebarsjs.com/
Testing
Design Patterns
Performance
- JavaScript Performance Best Practices, Nokia - very extensive!
- Javascript optimization and css transforms - minimit.com
- Speed Awareness Month
- 10 Javascript Performance Boosting Tips from Nicholas Zakas
- Perimeter.js - creates an invisible perimeter around a target element and monitors mouse breaches.
Quality
Libraries
- xCharts: building beautiful and custom data-driven chart visualizations for the web
- typeahead.js - Autocomplete
- jsPDF - generate PDFs from Javascript.
- Knockout JS - Databinding.
- Reactive.js - Next-generation DOM manipulation
- Simple Slide View - Demo 1, Demo 2
- Hashids - Generate short hashes from numbers (like YouTube and Bitly).
- Intro.js - better introductions for websites and features with a step-by-step guide for your projects.
- FlowType.JS - responsive web typography at its finest: font-size and line-height based on element width
Transitions
- Flipload.js - flipping HTML elements to show a loading indicator easily.
- Hopscotch - Multi-page tours
Visualization
- Chart.js - Easy, object oriented client side graphs for designers and developers. (GitHub)
- D3 Gallery - data visualization - in a lot of ways. xCharts builds upon it.
- Flotr2 - (GitHub)
- Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use.
Search
- sifter.js - client and server-side library (via UMD) for textually searching arrays and hashes of objects by property – or multiple properties. It's designed specifically for autocomplete.
Frameworks
- AngularJS - JavaScript MVW Framework
- Bone.io - lightweight framework for building high performance Realtime Single Page HTML5 Apps
- Durandal - Durandal is built on libs you know and love like jQuery, Knockout and RequireJS. There's little to learn and building apps feels comfortable and familiar. (YouTube Videos)
- Ground - logical and light-weight framework. Built to provide seamless realtime client-server synchronization and complete offline support.
- Sails.js - easy to build custom, enterprise-grade Node.js apps. It is designed to mimic the MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with scalable, service-oriented architecture
- scalaApp - tiny JavaScript framework for scalable One-Page-Applications / Single-Page-Applications. The framework allows you to easily create complex web applications.
- Meteor - open-source platform for building top-quality web apps in a fraction of the time. Syncs automatically client and server models.
Editors
Markdown
- marked - a markdown parser and compiler. Built for speed.
- EpicEditor - an embeddable JavaScript Markdown Editor.
Contenteditable
- ice.js - track changes implementation for anything that is contenteditable.
Deliver
Shortcuts
jQuery
HTML5
localStorage
- lz-string - compress JS strings.
Node.js
Real-Time
- Talky - Truly simple video chat and screen sharing for groups. No plugins. No signup or payment required. Anonymous. Peer-to-peer.
Code Styles
- Brackets Coding Conventions
- Pragmatic.js code style guidelines
- Javascript Best Practices Part 1
- Front-end Code Standards & Best Practices
- Code Conventions for the JavaScript Programming Language
- Google JavaScript Style Guide