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. Das muss nicht so sein. Der Vortrag zeigt kurz die Grundlagen der Sprache auf und räumt dabei mit einigen der verbreiteten Irrtümern und Unklarheiten auf. 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.
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. Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world Before you view the following real world implementation of Source Maps make sure you've enabled the source maps feature in either Chrome Canary or WebKit nightly by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option. Firefox 23+ has source maps enabled by default in the built in dev tools. So... Demo: View scripts panel (with source maps) on fontdragr.com Why should I care about source maps? Demo: Write ES6, debug it, view source mapping in action How does the source map work? Potential XSSI issues
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. 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 MD5 Checksums SHA-256 Checksums Acknowledgement
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. What is a unit anyway? Building Unit Tests With that in mind, we can obviously say that starting with unit testing is much easier when starting something from scratch. Make Things Testable Conclusion
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 <! <!
mroderick/PubSubJS 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
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. In this tutorial we provide JavaScript examples for each of the GoF patterns. JavaScript-optimized patterns are available in our JavaScript + jQuery Design Pattern Framework 2013, a unique guide for web app developers and architects.