toDataURL, Canvas, and SVG Monday, October 5th, 2009 <p>I’m a fan of all the new ways of drawing on the web. I consider myself a Canvas evangelist, an SVG evangelist, and an evangelist for the new CSS Animation work going on. When asked “SVG or Canvas” I’ve long felt the right answer is: “Yes” :) Canvas is great at pixels, SVG is great at vectors, ’nuff said. Give me my scriptable image tag (Canvas) AND my easy scene graph (SVG). Along these lines, I was delighted to attend a recent presentation by Samuli Kaipiainen and Matti Paksula from the University of Helsinki at SVG Open 2009. First, they showed apps built with SVG that should have used Canvas and vice versa to identify when to use one or the other. They then showed a Space Invaders game written with SVG that obviously should have used Canvas instead: there’s no mouse interaction, it’s keyboard driven, and it needs rapid pixel-based updates since it’s a game: Samuli and Matti end their paper with the following quote:
Essential JavaScript Design Patterns For Beginners I hope this book helps on your journey to improving your knowledge of design patterns and the usefulness of their application to JavaScript. Before we get started, I would like to thank Rebecca Murphey for inspiring me to write the original version of this online book and more importantly, open-source it. I believe educational material should be freely available for anyone to use, access and improve where possible and hope that efforts such as this inspire other authors. I would also like to extend my thanks to the always brilliant Alex Sexton who was kind enough to be the technical reviewer for the first edition of this work. Finally, I would like to thank my wonderful wife Elle for putting up with my obsession for technical writing over the years. At the beginning of this book I will be focusing on a discussion about the importance and history of design patterns in any programming language. You may ask why it’s important to understand patterns and be familiar with them.
A JavaScript Module Pattern Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2.
PythonBooks - Learn Python the easy way ! From AS3 to TypeScript | Jesse Freeman Last week, I decided to port over one of my favorite AS3 projects, F*Rogue, to TypeScript. I decided to call this new project RogueTS (project source code), and it was my first attempt at using TypeScript for a real JavaScript project. After a few hours of hacking around, I decided to port over the entire AS3 codebase in two nights. I figured I would put together some notes on how I did it and talk about the similarities and differences between ActionScript and TypeScript. Code Organization Perhaps the biggest advantage of languages like C#, Java, and AS3 is their ability to cleanly organize your code into packages, classes, and interfaces. In F*Rogue, I had set up a package structure com.gamecook.frogue.*, but in RogueTS I decided to go with something a little simpler rogue.*. Likewise, you can add classes into your modules. Notice how this class has a constructor defined? Now I can create a new Rectangle class by simply writing the following: Typing TypeScript-Specific Additions
Asynchronous CommonJS Modules for the Browser (and Introducing Transporter) | SitePen Blog Modules are an integral architectural piece of robust application development since they allow individual components to be developed with proper dependency management. Modules can specify dependencies and these can be automatically resolved and loaded to bring various pieces together automatically. In application development this is vastly more scalable and easier than having to track all the different dependencies and manually load modules or insert script tags. The CommonJS module format is increasingly ubiquitous as the de facto module format for JavaScript. However, if CommonJS modules, by themselves, are directly executed, they require synchronous loading of modules. Synchronous loading is known to be very problematic in the browser since it locks the browser user interface, requires eval-based compilation of scripts which confuses debuggers, and is less efficient than using standard script tags. Automated Module Wrapping Dojo, RequireJS, CommonJS
Objectifying JavaScript The web professional's online magazine of choice. In: Columns > Behind the Curtain By Jonathan Snook Published on September 18, 2006 When I first began programming with JavaScript, I created my variables and then encapsulated any functionality I needed to reuse into a function. In JavaScript, a function is an object; creating a function creates an object. As scripts get larger, functions become more interrelated. In a true object-oriented sense, an object represents a thing. The important idea here is simply that objects encapsulate related functionality. In JavaScript, we often perform a series of tasks on existing objects. We’ve established that objects are good and useful, but how do we go about creating them? using the object literalusing the new keyword with a function Let’s shed some light on these options, and the advantages and disadvantages of each. Using the Object Literal Creating a new object using the object literal syntax is very straightforward. Example: Creating Objects Prototype
The Module Pattern, A Little More Detail - macwright.org Once you’ve read this, read the update which has more detailed information about the module pattern’s performance profile! This is an article on the module pattern for Javascript, and some of its neat properties when used for instances. I’ve been using it recently for projects like mapbox.js, and think it’s a neat way to structure code and avoid some of the less likable parts of the language. For those already doing Javascript: here’s why you should care. You can mostly avoid the problem of tracking the meaning of Javascript’s pesky this keyword, and the associated problem of rebinding functions to another this value.You can keep truly internal ‘states’ of your code private while exposing minimal APIs that you know will stay stable.Often this yields code that’s more friendly to Javascript compression, like I wrote about in Writing Javascript For SizeYou can avoid the sneaky problems of users forgetting the new keyword, and the workarounds people use to dodge them Let’s Begin A Quick Summary
Self-referencing many-to-many through Django's ManyToMany through attribute allows you to describe relationships between objects. I've written a post about this - (Describing Relationships, Django's ManyToMany Through) - and so I won't cover here the details of its implementation or usage. What I want to talk about in this post is how to create ManyToMany relationships between objects of the same kind, and more than that, to show how those relationships can be described using through models. Asymmetrical Relationships - the Twitter model As we all know by now, on twitter you follow people. So how do you model something like this in Django? So, taking a look at the models, what's important to note is that on the Person model I've created a ManyToMany to 'self' through 'Relationship'. Adding and removing relationships are pretty straightforward - we can deal directly with the Relationship model and create or delete instances of it. Looking at this at a SQL level might make it more clear. Using it in the admin Relationships App
Currying Motivation[edit] Currying is similar to the process of calculating a function of multiple variables for some given values on paper. For example, given the function f(x,y) = y / x: To evaluate f(2,3), first replace x with 2. Since the result is a function of y, this function g(y) can be defined as g(y) = f(2,y) = y/2. Next, replace the y argument with 3, producing g(3) = f(2,3) = 3/2. On paper, using classical notation, this is usually done all in one step. If we let f be a function then the function h where is a curried version of . is the curried equivalent of the example above. Definition[edit] Given a function f of type , currying it makes a function . takes an argument of type and returns a function of type . The → operator is often considered right-associative, so the curried function type is often written as . is equivalent to Mathematical view[edit] In a set-theoretic paradigm, currying is the natural correspondence between the set of functions from to , and the set to the set of functions from . . .