background preloader

Javascript Adv.

Facebook Twitter

10 Interview Questions Every JavaScript Developer Should Know — JavaScript Scene. Good to hear: Classes: create tight coupling or hierarchies/taxonomies.Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition.

10 Interview Questions Every JavaScript Developer Should Know — JavaScript Scene

Build tools

The JavaScript Minefield. When I was starting out as a programmer, I learned and worked in C++.

The JavaScript Minefield

There weren’t that many options for Mac OS 7 development at the time. I had a copy of MetroWorks CodeWarrior. It sure beat MPW, which was Apple’s own development environment. For languages the choices were pretty much Pascal, C or C++. Perhaps Pascal would have been a better first language to learn, but that’s not what I picked. Common Misconceptions About Inheritance in JavaScript — JavaScript Scene.

Isn’t Classical Inheritance More Idiomatic than Prototypal Inheritance?

Common Misconceptions About Inheritance in JavaScript — JavaScript Scene

No. Every time I hear this misconception I am tempted to say, “do u even JavaScript?” And move on… but I’ll resist the urge and set the record straight, instead. Don’t feel bad if this is your question, too. It’s not your fault. The answer to this question is a big, gigantic Prototypes are the idiomatic inheritance paradigm in JS, and `class` is the marauding invasive species. Appendix F: Monitoring DOM changes - Mozilla. DOM mutation events were introduced to HTML several years ago in order to allow web applications to monitor changes to the DOM by other scripts.

Appendix F: Monitoring DOM changes - Mozilla

Unfortunately, adding listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those listeners. For this reason, it is best to avoid using mutation listeners at all costs, especially from extensions. The Two Pillars of JavaScript — Pt 2: Functional Programming — JavaScript Scene. In the very beginnings of the computing revolution, decades before the invention of the microprocessor, a man named Alonzo Church did groundbreaking work in theoretical computer science.

The Two Pillars of JavaScript — Pt 2: Functional Programming — JavaScript Scene

You may have heard of his student and collaborator, Alan Turing. Together, they created a theory of computable functions called the Church-Turing Thesis, which described the nature of computable functions. Two foundational models of computation emerged from that work. The famous turing machine, and lambda calculus. Today, the turing machine is frequently cited as the baseline of requirements for a modern programming language. Lambda calculus went on to inspire one of the first high-level programming languages, and the second-oldest high-level language in common use today: Lisp.

The Two Pillars of JavaScript — JavaScript Scene. Before we get into this, allow me to introduce myself — you’re probably going to wonder who I think I am before this is over.

The Two Pillars of JavaScript — JavaScript Scene

I’m Eric Elliott, author of “Programming JavaScript Applications” (O’Reilly), host of the feature-length documentary film-in-production, “Programming Literacy”, and creator of the “Learn JavaScript with Eric Elliott” series of online JavaScript courses. I have contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

Functional programming

The anatomy of a simple templating engine. If you’ve never used JavaScript templating before, I’d first check out this blog’s post on templating for a high-level overview and use-cases for using them.

The anatomy of a simple templating engine

If you have used them or at least had exposure to them, you might have used one or more of these: As a note, this post does not demonstrate the complexities and thought that goes into making a production-ready library like the three mentioned above, it simply serves as a rudimentary breakdown of the anatomy of what a templating engine does and how it does it. As a quick recap, the (simplistic) idea of templating is to have a fragment of HTML (sometimes called a partial) like this: <div class="entry"><h1>{{ title }}</h1><div class="body"> {{ body }} </div></div> And to be able to dynamically generate HTML from this template, but with the {{}} placeholders replaced by real values. Usage When creating functionality in development, I always like to start with the desired usage and work backwards.

We want to be able to do the following: Manage Your Client Side Dependencies. Resources for JavaScript and DOM Compatibility Tables. One of the best info-apps to come about in recent years is the well-known and super-practical Can I Use by Alexis Deveria.

Resources for JavaScript and DOM Compatibility Tables

Although Can I Use is great for many cutting-edge features, there’s still a lot of JavaScript and DOM stuff that’s not included in there. So what other options are there for looking up browser support for many different JavaScript and DOM features? I’m always doing research on various front-end technologies, but the one thing I’ve yet to find is a really good one-stop resource that lists browser support for all aspects of JavaScript and the DOM, including the various HTML5 APIs. JavaScript Beyond the Web in 2014. JavaScript has evolved far beyond its role in the DHTML websites of the 90s.

JavaScript Beyond the Web in 2014

Ecmascript 6 (ecmascript harmony)

Fake operator overloading in JavaScript. Update 2012-01-29: The post “What is {} + {} in JavaScript?”

Fake operator overloading in JavaScript

Looks at the addition operator in more detail. This post describes how to do a limited version of operator overloading in JavaScript. With the technique described here, you’ll be able to implement a type StringBuilder that can be used as follows: var sb = new StringBuilder(); sb << add("abc") << add("def"); And a type Point that can be used as follows: var p = new Point(); p._ = new Point(1, 2) + new Point(3, 4) + new Point(5, 6); p._ = new Point(1, 2) * new Point(3, 4) * new Point(5, 6); Letting operators call methods One version of real operator overloading works like this: Given the expression. Understanding Design Patterns in JavaScript. Today, we're going to put on our computer science hats as we learn about some common design patterns.

Design patterns offer developers ways to solve technical problems in a reusable and elegant way. Interested in becoming a better JavaScript developer? Then read on. Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. Solid design patterns are the basic building block for maintainable software applications.

Javascript resources

Chapter 17. Objects and Inheritance. Chapter 17. Objects and Inheritance There are several layers to object-oriented programming (OOP) in JavaScript: Each new layer only depends on prior ones, enabling you to learn JavaScript OOP incrementally. Layers 1 and 2 form a simple core that you can refer back to whenever you are getting confused by the more complicated layers 3 and 4. Grow your expert full-stack JavaScript skills with tagtree screencasts. Promises. Library. Prototypes. Performance. Node js. 8 Useful jQuery Snippets For URL’s & Querystrings. In any web project you will inevitably come across a situation where being able to extract information or use the current page URL would be useful. If server-side code is not available to help we can use javascript to get this information. The following are examples of useful code snippets that can be used – some of the examples use standard javascript functions and are not specific to jQuery: 1.

Get The Current Page URL A very simple snippet, which stores the current page URL in a variable: 2.

Basic Concepts explained in depth

An Extensible Approach to Browser Security Policy. Alex Russell posted some thoughts today about how he wishes the W3C would architect the next version of the Content Security Policy. I agree with Alex that designing CSP as a "library" that uses other browser primitives would increase its long-term utility and make it compose better with other platform features.

Alex is advocating the use of extensible web principles in the design of this API, and I wholeheartedly support his approach. Background You can skip this section if you already understand CSP. For the uninitiated, Content Security Policy is a feature that allows web sites to opt into stricter security than what the web platform offers by default. CoffeeScript vs. TypeScript vs. Dart. Software often requires two or three iterations before you get it right. Backbone.js by example – Part 1. GoGaRuCo 2013 - A tale of two MVC's by Yehuda Katz. Maintainable JavaScript: Don’t modify objects you don’t own. 6 Advanced JavaScript Techniques You Should Know.