Javascript: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(60 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 2: | Zeile 2: | ||
==Learn== | ==Learn== | ||
* [http://www.creativebloq.com/web-design-tips/css-and-javascript-1233101 125 CSS and JavaScript tutorials to power up your skills] | * [http://www.creativebloq.com/web-design-tips/css-and-javascript-1233101 125 CSS and JavaScript tutorials to power up your skills] | ||
+ | * [http://bonsaiden.github.io/JavaScript-Garden/ 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 | ||
+ | ** [http://javascriptissexy.com/javascript-objects-in-detail/ JavaScript objects in detail] | ||
+ | * [http://www.objectplayground.com/ Object Playground: The Definitive Guide to Object-Oriented JavaScript] - with Video. | ||
+ | * [http://www.javascript.su/ JavaScript in one page] | ||
+ | * [http://superherojs.com/ Superhero.js] - Collection of the best articles, videos and presentations on creating, testing and maintaining a large JavaScript code base. | ||
==Writing== | ==Writing== | ||
Zeile 17: | Zeile 23: | ||
==Templates== | ==Templates== | ||
[https://developer.mozilla.org/en-US/docs/JavaScript_templates List of JavaScript templates from Mozilla]. | [https://developer.mozilla.org/en-US/docs/JavaScript_templates List of JavaScript templates from Mozilla]. | ||
− | * [https://github.com/janl/mustache.js mustache.js] - minimal templating in JavaScript. Compatible with http://handlebarsjs.com/ | + | * [https://github.com/janl/mustache.js mustache.js] - minimal templating in JavaScript. Compatible with http://handlebarsjs.com/. |
+ | * [https://github.com/twitter/hogan.js hogan.js] - 2.5k JS compiler for the Mustache templating language. | ||
+ | * [http://olado.github.io/doT/ doT.js] - the fastest + concise javascript template engine for Node.js and browsers. | ||
+ | * [https://github.com/akdubya/dustjs dustjs] - аsynchronous templates for the browser and node.js ([http://akdubya.github.io/dustjs/ demo]). | ||
+ | ** [http://linkedin.github.io/dustjs/ LinkedIn's dustjs], [https://github.com/linkedin/dustjs GitHub], [https://github.com/linkedin/dustjs/wiki/Dust-Tutorial Tutorial] ({$idx}), [http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates Leaving JSPs in the dust], [https://github.com/linkedin/dustjs-helpers Dustjs Helpers] (bower: dustjs-linkedin-helpers) | ||
+ | * [http://blueimp.github.io/JavaScript-Templates/ JavaScript Templates] - < 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. | ||
* [http://beebole.com/pure/ 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 | * [http://beebole.com/pure/ 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 | ||
* [http://embeddedjs.com/ EJS] - EJS cleans the HTML out of your JavaScript with client side templates. | * [http://embeddedjs.com/ EJS] - EJS cleans the HTML out of your JavaScript with client side templates. | ||
Zeile 23: | Zeile 34: | ||
* [https://code.google.com/p/json-template/ JSON Template] - | * [https://code.google.com/p/json-template/ JSON Template] - | ||
* [https://github.com/CKGrafico/jQuery_HandlebarsJS/ jQuery_HandlebarsJS] - jQuery plugin for use http://handlebarsjs.com/ | * [https://github.com/CKGrafico/jQuery_HandlebarsJS/ jQuery_HandlebarsJS] - jQuery plugin for use http://handlebarsjs.com/ | ||
+ | [http://garann.github.io/template-chooser/ Template-Engine-Chooser] | ||
==Testing== | ==Testing== | ||
Zeile 31: | Zeile 43: | ||
==Performance== | ==Performance== | ||
+ | * [http://developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices JavaScript Performance Best Practices, Nokia] - very extensive! | ||
* [http://www.minimit.com/articles/code-tips/javascript-optimization-and-css-transforms Javascript optimization and css transforms - minimit.com] | * [http://www.minimit.com/articles/code-tips/javascript-optimization-and-css-transforms Javascript optimization and css transforms - minimit.com] | ||
+ | * [http://www.speedawarenessmonth.com/ Speed Awareness Month] | ||
+ | ** [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://github.e-sites.nl/perimeter.js/ Perimeter.js] - creates an invisible perimeter around a target element and monitors mouse breaches. | ||
+ | |||
+ | ==Quality== | ||
+ | * [http://de.slideshare.net/denodell/highquality-javascript-code High-Quality JavaScript Code] | ||
==Libraries== | ==Libraries== | ||
* [http://tenxer.github.com/xcharts/ xCharts]: building beautiful and custom data-driven chart visualizations for the web | * [http://tenxer.github.com/xcharts/ xCharts]: building beautiful and custom data-driven chart visualizations for the web | ||
− | |||
* [http://twitter.github.com/typeahead.js/ typeahead.js] - Autocomplete | * [http://twitter.github.com/typeahead.js/ typeahead.js] - Autocomplete | ||
+ | * [http://parall.ax/products/jspdf jsPDF] - generate PDFs from Javascript. | ||
* [http://knockoutjs.com/ Knockout JS] - Databinding. | * [http://knockoutjs.com/ Knockout JS] - Databinding. | ||
+ | * [http://www.ractivejs.org/ Reactive.js] - Next-generation DOM manipulation | ||
+ | * [https://github.com/cloudfour/SimpleSlideView Simple Slide View] - [http://cloudfour.github.io/SimpleSlideView/ Demo 1], [http://cloudfour.github.io/SimpleSlideView/responsive.html Demo 2] | ||
+ | * [http://www.hashids.org/node-js/ Hashids] - Generate short hashes from numbers (like YouTube and Bitly). | ||
+ | * [http://usablica.github.io/intro.js/ Intro.js] - better introductions for websites and features with a step-by-step guide for your projects. | ||
+ | * [http://simplefocus.com/flowtype/ FlowType.JS] - responsive web typography at its finest: font-size and line-height based on element width | ||
+ | |||
+ | ===Transitions=== | ||
+ | * [http://pazguille.github.io/flipload/ Flipload.js] - flipping HTML elements to show a loading indicator easily. | ||
+ | |||
+ | ===Navigation=== | ||
+ | * [http://linkedin.github.io/hopscotch/ Hopscotch] - Multi-page tours | ||
+ | |||
+ | ===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. | ||
+ | * [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. | ||
+ | |||
+ | ===Search=== | ||
+ | * [https://github.com/brianreavis/sifter.js 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== | ==Frameworks== | ||
− | * [http://durandaljs.com/ 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 | + | * [[AngularJS]] - JavaScript MVW Framework |
+ | * [http://bone.io/ Bone.io] - lightweight framework for building high performance Realtime Single Page HTML5 Apps | ||
+ | * [http://durandaljs.com/ 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. ([https://www.youtube.com/user/RyanKeeter/videos YouTube Videos]) | ||
+ | * [http://gnd.io/ Ground] - logical and light-weight framework. Built to provide seamless realtime client-server synchronization and complete offline support. | ||
* [http://sailsjs.org/# 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 | * [http://sailsjs.org/# 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 | ||
+ | * [http://www.scaleapp.org/ 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=== | ||
+ | * [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 49: | Zeile 102: | ||
* https://github.com/ccampbell/mousetrap | * https://github.com/ccampbell/mousetrap | ||
** http://davidwalsh.name/keyboard-shortcuts?utm_source=javascriptweekly&utm_medium=email | ** http://davidwalsh.name/keyboard-shortcuts?utm_source=javascriptweekly&utm_medium=email | ||
+ | |||
+ | ==jQuery== | ||
+ | * [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== | ||
* [http://joyent.com/blog/installing-node-and-npm/ Installing Node and npm] | * [http://joyent.com/blog/installing-node-and-npm/ Installing Node and npm] | ||
** https://gist.github.com/isaacs/579814 | ** https://gist.github.com/isaacs/579814 | ||
+ | |||
+ | ==Real-Time== | ||
+ | * [https://talky.io/ Talky] - Truly simple video chat and screen sharing for groups. No plugins. No signup or payment required. Anonymous. Peer-to-peer. | ||
+ | |||
+ | ==Code Styles== | ||
+ | * [https://github.com/adobe/brackets/wiki/Brackets-Coding-Conventions Brackets Coding Conventions] | ||
+ | * [https://github.com/madrobby/pragmatic.js Pragmatic.js code style guidelines] | ||
+ | * [http://www.thinkful.com/learn/javascript-best-practices-1/ Javascript Best Practices Part 1] | ||
+ | * [http://isobar-idev.github.io/code-standards/ Front-end Code Standards & Best Practices] | ||
+ | * [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] | ||
+ | |||
+ | ==Decoupling== | ||
+ | * [http://philipwalton.com/articles/decoupling-html-css-and-javascript/ Decoupling Your HTML, CSS, and JavaScript] | ||
+ | |||
+ | ==Deploy== | ||
+ | * [http://alexsexton.com/blog/2013/03/deploying-javascript-applications/ Deploying JavaScript Applications] | ||
+ | |||
+ | ==Follow== | ||
+ | * http://net.tutsplus.com/tutorials/javascript-ajax/required-javascript-reading/ | ||
[[Category: Software]] | [[Category: Software]] |
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