NinjaScript and Mizugumo 2011-02-05. Building Apps With the Yeoman Workflow. Trick question. It's not a thing. It's this guy: Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create. As an example, scaffolding a web application would look something like this: The first thing that comes to mind is OMG so dreamy. All we did was tell him what we wanted and he replied with specific questions to give us even more control. Let's go back a step, though. He's a person with feelings and opinions, but he's very easy to work with. Let's take a second to break apart what that yo webapp command, from the previous screenshot really did.
This is an OS X, Linux, and Windows friendly system-wide command that scours your hard drive for any installed "generators," then gives them control based on the next argument: This is actually a separate plug-in, or "generator," called generator-webapp. Something important to take away from this is, it's the generator-webapp module that prompts us with questions. Did it? Color Hex - ColorHexa.com. JavaScript. Help What is repl.it? It is an online environment for interactively exploring programming languages. The name comes from the read-eval-print loop, the interactive toplevel used by languages like Lisp and Python. How do I start? Once you have selected a language, start by typing an expression into the console on the right side of the screen and pressing Enter. Your expression will be evaluated in the selected language and its result will be printed.
Can I use variables or other state? Yes! Can I save my session? Yes! Is repl.it open source? Can I use repl.it on my phone or tablet? Yes! How does repl.it work? All code processed by repl.it runs entirely on your computer, with no server-side evaluation. Enter Evaluate the entered command. Shift+Enter Continue to the next line. Tab Indent. Shift+Tab Unindent. Up Previous history item. Down Next history item. Ctrl+Up Move to the line above the cursor. Ctrl+Down Move to the line below the cursor. Ctrl+E Move to the end of the current line. Ctrl+A Ctrl+K Ctrl+Z Ctrl+L.
Code Style. Rwaldron/idiomatic.js. JavaScript Style Guide | Contribute to jQuery. Use JSHint to detect errors and potential problems. Every jQuery project has a Grunt task for linting all JavaScript files: grunt jshint. The options for JSHint are stored in a .jshintrc file; many repositories will have multiple .jshintrc files based on the type of code in each directory. Each .jshintrc file follows a specific format. All options must be alphabetized and grouped: The following common options must be used in all projects: If the project supports browsers which do not implement ES5, then the es3 option must be included with the repo-specific options. In general, the jQuery style guide encourages liberal spacing for improved human readability.
Indentation with tabs.No whitespace at the end of line or on blank lines.Lines should be no longer than 80 characters, and must not exceed 100 (counting tabs as 4 spaces). Object and array expressions can be on one line if they are short (remember the line length limits). The same applies to AMD wrappers. jQuery uses double quotes. Addyosmani/essential-js-design-patterns. JavaScript Design Patterns.
Design patterns are advanced object-oriented solutions to commonly occurring software problems. Patterns are about reusable designs and interactions of objects. Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions. The 23 Gang of Four (GoF) patterns are generally considered the foundation for all other patterns. They are categorized in three groups: Creational, Structural, and Behavioral (see below for a complete list). In this tutorial we provide JavaScript examples for each of the GoF patterns.
Mostly, they follow the structure and intent of the original pattern designs. These examples demonstrate the principles behind each pattern, but are not optimized for JavaScript. JavaScript-optimized patterns are available in our JavaScript + jQuery Design Pattern Framework 2013, a unique guide for web app developers and architects. Addy Osmani: Plight Of The Butterfly: Object.observe() -- JSConf EU. jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery. The OpenAjax hub. The OpenAjax Hub is a set of standard JavaScript functionality defined by the OpenAjax Alliance that addresses key interoperability issues that arise when multiple Ajax libraries are used within the same web page. A very important part of this specification is the Publish/Subscribe Event Management that founds a framework for building event driven web applications. These services by providing a common and interoperable service for publishing events on a broadcast basis and for script logic to listen (i.e., subscribe) to events fired by other script logic.
An implementation of the OpenAjax hub specification The OpenAjax Alliance has defined a specification called the OpeAjax hub that is a mechnism that enables loose connections between multiple components by using a publish subscribe pattern. A second source implementation is available within the AJAXEngine framework (insinde jcl.js) and as well it is available in a standaline version in AoAoA.js. Using the OpenAjax hub History. Mroderick/PubSubJS. JS Bin - Collaborative JavaScript Debugging. Test-Driven Development with JavaScript. To shorten the development cycle of your Web application you need to start testing it on the early stages of the project. It seems obvious, but many enterprise IT organizations haven’t adopted agile testing methodologies, which costs them dearly.
JavaScript is dynamically typed interpreted language - there is no compiler to help in identifying errors as it’s done in compiled languages like Java. This means that a lot more time should be allocated for testing for JavaScript Web applications. Moreover, a programmer who didn’t introduce testing techniques into his daily routine can’t be 100% sure that his code works properly.
The static code analysis and code quality tools such as Esprima and JSHint will help in reducing the number of syntax errors and improve quality of your code. To switch to a test-driven development mode, make testing a part of your development process in its early stages rather than scheduling testing after the development cycle is complete. Why Test ? Testing Basics <! <! Javascript.
Modern JavaScript Debugging - Ashutosh Sharma. Command Line API Reference - Chrome DevTools. Introduction to Unit Testing | QUnit. You probably know that testing is good, but the first hurdle to overcome when trying to write unit tests for client-side code is the lack of any actual units; JavaScript code is written for each page of a website or each module of an application and is closely intermixed with back-end logic and related HTML. In the worst case, the code is completely mixed with HTML, as inline events handlers.
This is likely the case when no JavaScript library for some DOM abstraction is being used; writing inline event handlers is much easier than using the DOM APIs to bind those events. More and more developers are picking up a library such as jQuery to handle the DOM abstraction, allowing them to move those inline events to distinct scripts, either on the same page or even in a separate JavaScript file. However, putting the code into separate files doesn’t mean that it is ready to be tested as a unit. What is a unit anyway? Building Unit Tests That should be enough theory for now. Make Things Testable. Download and Install. New to PhantomJS? Read and study the Quick Start guide. Windows Download phantomjs-2.1.1-windows.zip (17.4 MB) and extract (unzip) the content.
The executable phantomjs.exe is ready to use. Note: For this static build, the binary is self-contained with no external dependency. It will run on a fresh install of Windows Vista or later versions. Mac OS X Download phantomjs-2.1.1-macosx.zip (16.4 MB) and extract (unzip) the content. Note: For this static build, the binary is self-contained with no external dependency. Linux 64-bit Download phantomjs-2.1.1-linux-x86_64.tar.bz2 (22.3 MB) and extract the content. Note: For this static build, the binary is self-contained. Linux 32-bit Download phantomjs-2.1.1-linux-i686.tar.bz2 (23.0 MB) and extract the content.
Note: For this static build, the binary is self-contained. FreeBSD Binary packages are available via pkg: $ sudo pkg install phantomjs Source Code To get the source code, check the official git repository: github.com/ariya/phantomjs. Checksums. Pre-installed Developer Tools for Faster Cross Browser Testing. Libraries - SourceMap Validator. Introduction to JavaScript Source Maps. Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps. Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files.
When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world So... Potential XSSI issues.
Ajax. SourceMappingURL and sourceURL syntax changed. If you use either sourcemaps or sourceURL (both covered in the HTML5 Rocks Primer on Sourcemaps), then you may see a warning in Chrome console like "/*@ sourceMappingURL=" source mapping URL declaration is deprecated, "/*# sourceMappingURL=" declaration should be used instead. Here's what that's about: Impetus //@ sourceMappingURL was found to have a conflict with IE whenever it was found in the page after //@cc_on was interpreted to turn on conditional compilation in the IE JScript engine.
A legacy version of the HTML5 Shiv is one particular offender here. Spec Change The //@ sourceMappingURL syntax is defined in the Sourcemap V3 spec It was changed there to use //# syntax instead. sourceURL //@ sourceURL is also defined in the spec and was made to match the //# syntax for consistency. Implementation in Browser DevTools = done! Safari Inspector now supports //# for sourceMappingURL and sourceURL Firebug's change has landed for sourceURL. Debugging JavaScript - Chrome DevTools. Testing Clientside JavaScript.
Test Driven JavaScript- Do your JavaScript right. Named function expressions demystified. Introduction Surprisingly, a topic of named function expressions doesn’t seem to be covered well enough on the web. This is probably why there are so many misconceptions floating around. In this article, I’ll try to summarize both — theoretical and practical aspects of these wonderful Javascript constructs; the good, bad and ugly parts of them. In a nutshell, named function expressions are useful for one thing only — descriptive function names in debuggers and profilers. Well, there is also a possibility of using function names for recursion, but you will soon see that this is often impractical nowadays. If you don’t care about debugging experience, you have nothing to worry about.
Otherwise, read on to see some of the cross-browser glitches you would have to deal with and tips on how work around them. I’ll start with a general explanation of what function expressions are how modern debuggers handle them. Function expressions vs. To demonstrate with examples: Function statements Tests. Debugging JavaScript - Chrome DevTools. Debugging JavaScript - Chrome DevTools. JavaScript Cheat Sheet by DaveChild - Cheatography.com. Sublime Text: The text editor you'll fall in love with. JavaScript Regular Expressions patterns. Seven JavaScript Things I Wish I Knew Much Earlier In My Career.
Advertisement I’ve been writing JavaScript code for much longer than I care to remember. I am very excited about the language’s recent success; it’s good to be a part of that success story. I’ve written dozens of articles, book chapters and one full book on the matter, and yet I keep finding new things. Here are some of the “aha!” Shortcut Notations One of the things I love most about JavaScript now is shortcut notations to generate objects and arrays. Var car = new Object(); car.colour = 'red'; car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4; The same can be achieved with: Much shorter, and you don’t need to repeat the name of the object.
The other handy shortcut notation is for arrays. Var moviesThatNeedBetterWriters = new Array( 'Transformers','Transformers2','Avatar','Indiana Jones 4' ); The shorter version of this is: var moviesThatNeedBetterWriters = [ 'Transformers','Transformers2','Avatar','Indiana Jones 4' ]; This is not Sparta; this is madness—don’t bother with this.
Resources. GPN11:Modernes JavaScript – Entropia. Vortrag von Scytale (oqlt, RaumZeitLabor) auf der GPN11. Die meisten von uns kennen JavaScript. Bei vielen hat es den Ruf einer Sprache für Frickler, mit nem Haufen globaler Variablen und keiner vernünftigen Laufzeitumgebung, da jeder Browser Details anders interpretiert. Den Code, den wir schreiben, klauen wir uns aus Schnipseln im Internet zusammen und verstehen nur die Hälfte der Details. Das muss nicht so sein.
JavaScript hat einige Designfehler, aber wenn man sie kennt und vermeidet, verbirgt sich dahinter eine mächtige Sprache mit sehr interessanten Features, mit der man durchaus umfangreiche Projekte umsetzen kann. Und da JavaScript nicht nur im Browser läuft, sondern dank (dem übrigens auch ziemlich sehenswerten) Node.js auch serverseitig, kann man seine JavaScript-Kenntnisse überall anwenden. Der Vortrag zeigt kurz die Grundlagen der Sprache auf und räumt dabei mit einigen der verbreiteten Irrtümern und Unklarheiten auf.