background preloader

Named function expressions demystified

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. I’ll start with a general explanation of what function expressions are how modern debuggers handle them. Function expressions vs. One of the two most common ways to create a function object in ECMAScript is by means of either Function Expression or Function Declaration. We can see that when identifier is omitted, that “something” can only be an expression. A somewhat less obvious example of function expression is the one where function is wrapped with parenthesis — (function foo(){}). To demonstrate with examples: Tests

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

Getting Out of Binding Situations in JavaScript Most developers don’t know about—or don’t care enough about—binding in JavaScript. Yet this single issue is responsible for a sizeable portion of the questions on most JavaScript-related support channels, and thousands—if not millions—of hairs being tortured away from developer heads every single day. Yet with a little attention to this oft-overlooked subject, you can avoid wasting your time, energy, and patience and move on to more powerful, efficient scripting. Why should we care about binding? Almost no major object-oriented programming (OOP) languages force you to consider binding. PHP and JavaScript do require you to explicitly state which object you’re accessing, even if it’s the current one. Of course, neither PHP nor JavaScript are actually object-oriented in the traditional sense. In JavaScript, binding is always explicit, and can easily be lost, so a method using this will not refer to the proper object in all situations, unless you force it to. Let’s step in it#section2 Ah-ha!

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. JavaScript: la référence - David Flanagan 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 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 (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 (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: 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 <! <!