background preloader

Learning Javascript with Object Graphs

Learning Javascript with Object Graphs
HEADS UP! This article was written for an older version of node. More up-to-date information may be available elsewhere. One of the secrets to being a super effective JavaScript developer is to truly understand the semantics of the language. References Everywhere A variable in JavaScript is simply a label that references a value in memory somewhere. Local Variables In the following example, we will create four local variables in the top-level scope and point them to some primitive values: variables.js // Let's create some local variables in the top scopevar name = "Tim Caswell";var age = 28;var isProgrammer = true;var likesJavaScript = true;// Test to see if the two variables reference the same valueisProgrammer === likesJavaScript; Notice that the two boolean variables point to the same value in memory. In the code snippet we checked to see if the two references pointed to the same value using === and the result was true. The outer box represents the outermost closure scope. objects.js

Waterbear - a visual language for Javacript Waterbear, a new "Scratch- like" visual programming language made its debut at a JavaScript conference this week. Waterbear is the brainchild of Dethe Elza who presented it at the JSConf held in Portland on 2-3 May 2011. Inspired by Alan Kay's Squeak language and Semour Papert's Mindstorms he hope it will introduce programming concepts to learners, including children. This news item is a lot easier to understand if you already know about the Scratch programming language. Scratch isn't the only language to take the visual approach. As the whole thing runs in a web page the JavaScript it creates already has an environment to run in and you can create and test a program without having to install anything additional - this is also one of the first fully web hosted development systems. As well as a really interesting educational tool you can't help but speculate on its use as a real HTML5 based app. More Information Easy Android Apps

JavaScript from Null: Chapter 4 JavaScript University continues today as we learn about methods of the Array object, how to return values from functions, scope, and even your first animation. Remember - though each new chapter builds upon the previous ones, you can still follow along perfectly well if you haven't watched the other entries in the series! In this Screencast, you'll Learn: Methods of the Array object: push, pop, unshift, shift Pull values outside of functions Reducing your "global footprint" by creating an object SetInterval Create your first animation Methods of the String object. Chapter 4: Arrays, Functions, and your First Animation Other Viewing Options

Essential JavaScript Design Patterns For Beginners I would like to thank Rebecca Murphey for inspiring me to open-source this mini-book and release it for free download and distribution - making knowledge both open and easily available is something we should all strive for where possible. I would also like to extend my thanks to the very talented Alex Sexton who was kind enough to be the technical reviewer for this publication. I hope that it helps you learn more about design patterns and the usefulness of their application to JavaScript. Volume 2 of Essential JavaScript Design Patterns is currently being written and will be more detailed than this first edition. 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. One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. You may ask why it’s important to understand patterns and be familiar with them.

James Carr » Blog Archive » Lessons Learned With My Recent Node.js App Recently I created a little web app for a friend’s conference to accept talk submissions and gather votes on those submissions to rank the top ones. For this task I used heroku’s node.js beta preview to host the application and a free couchone instance for the data store. Things were a bit rocky but I learned some important lessons that I thought I’d share. Tag your last successful heroku deployment While adding one additional feature for the site I reached a point where the app worked fine on my laptop but for reasons I couldn’t figure out for quite sometime it failed on heroku. Create a Staging Heroku Instance This helps catch errors arising from differences that might exist between your local machine and heroku. heroku config:add NODE_ENV=production This has become something that should go into every app now imho. Replicate Your CouchOne Instance In the 11th hour my main couchone instance crashed. As a node.js hosting platform, I still think Heroku is just kinda okay.

Protovis Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates June 28, 2011 - Protovis is no longer under active development. September 17, 2010 - Release 3.3 is available on GitHub. May 28, 2010 - ZOMG! Getting Started

curl.js – yet another AMD loader [updated] Over the past several weeks, I’ve been writing an AMD-compatible javascript loader called curl.js. AMD stands for Asynchronous Module Definition and is a CommonJS proposed standard for writing javascript modules. The module format closely follows the proposed migration path set out by ECMA’s proposed ES-Harmony javascript modules. curl stands for Cujo Resource Loader since it’s an integral part of the re-engineering of cujo.js. An AMD-compatible javascript loader is (surprise, surprise) an asynchronous javascript loader that is savvy about AMD-formatted javascript modules. [update] Version 0.3.2 is out! Web apps, especially large ones, require many modules and resources. The traditional way to load javascript modules is via a <SCRIPT> element in an HTML page. The problem with <SCRIPT> and <LINK> elements is that a browser must execute them sequentially since it has no idea if one may depend on another. curl.js has lots of company. (a more complete list can be found here)

Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! I need ... a base framework. a DOM utility. templating. CSS animation. JavaScript animation. a CSS selector engine. data manipulation. a Class system. functional programming. a JavaScript loader. to test stuff (e.g. unit testing). to validate stuff. to write a game. to do CANVAS/2D graphics! to convert colors. to create searchable & sortable lists. single page apps. persistent storage. client-side MVC. feature/browser detection. events! WebKit-specific libraries. mobile-specific libraries. libraries for responsive designs. polyfills. analytics. hyphenation. asynchronous programming to compose my own framework! to code a site listing micro-frameworks! Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! How much library code do you really need — 50K? Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. Want to add your own? Can't get enough?

The Best Way to Learn JavaScript Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! JavaScript is the language of the browser. Before you actually begin learning JavaScript, take a minute to understand what it is and does. JavaScript is not jQuery, Flash, or Java. JavaScript is the language of the browser (not exclusively these days, though). One more note: you’ve heard about jQuery, which is probably the most widely-used JavaScript library. You might even have heard someone say that you should start with jQuery (or another library) and learn JavaScript after. Codecademy is a relatively new website that bills itself as “the easiest way to learn how to code.” The folks at appendTo have a fantastic set of screencasts geared specifically for beginners.

Node.js: A Beginner’s Perspective I’d been curious about node.js for a while. Finding Twitter all atwitter about it at any particular moment isn’t difficult. People are experimenting with it and other JavaScript technologies, like WebSockets. Yahoo even showcased a multi-core HTTP server written in it a few months back. I already had a decent working knowledge of JavaScript. Have at least a basic working knowledge of git. Look around for existing solutions. Seek out good resources. Don’t forget what language you’re using. Most people know me as being a PHP developer. If you’ve used node.js, please post a comment. (Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

prefuse | interactive information visualization toolkit traits.js - Traits for Javascript traits.js is a minimal, standards-compliant trait composition library for Javascript. Here is the latest development version.traits.js is also available as an npm package named 'traits' (thanks to Nathan Stott). Why traits? Why traits.js? Because it's minimal, easy to understand and because it plays nicely with the new object-manipulation API defined on Object in Ecmascript 5th edition. traits.js introduces traits without also introducing classes. What about the roles of classes not normally supported by traits, such as instance-private state and constructors to initialize that state? Compatibility traits.js is designed to work with the new object manipulation API defined in Ecmascript-262, Edition 5.

BigText Makes Text Big 11 January 2011Read this in about 3 minutes. *I like shortcuts: Fork BigText on Github or Check out the BigText Demo Wizard It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. <div id="bigtext" style="width: 300px"><div>The elusive</div><div>BIGTEXT</div><div>plugin exclusively</div><div>captured on film</div></div> $('#bigtext').bigtext(); Implementation Details The plugin itself is more than just a simple font-size incrementer. The BigText Demo Wizard This is where the magic happens. Editable text (contenteditable), and BigText will run on every keyup event to resize what you’re typing.Dynamic horizontal and vertical centering using Alex Russell’s Flex Box CSS classes (This is easy now, hooray!)

Learning Javascript with Object Graphs (Part II) Static Version The first article using graphs to describe JavaScript semantics was so popular that I've decided to try the technique with some more advanced ideas. In this article I'll explain three common techniques for creating objects. My goal is that this will help people understand the strengths and weaknesses of each technique and understand what's really going on. Classical JavaScript Constructors First let's create a simple constructor function with a prototype. classical.js#rectangle function Rectangle(width, height) { this.width = width; this.height = height;}Rectangle.prototype.getArea = function getArea() { return this.width * this.height;};Rectangle.prototype.getPerimeter = function getPerimeter() { return 2 * (this.width + this.height);};Rectangle.prototype.toString = function toString() { return + " a=" + this.getArea() + " p=" + this.getPerimeter();}; Now let's define a new class of objects called Squares that inherit from Rectangles. classical.js#test

JSAN - JooseX.CPS 0.11 JooseX.CPS - Implementation of the Continuation Passing Style 1 for JavaScript, plus some syntax sugar, simplifying its usage in Joose methods and method modifiers Stand-alone usage: The same in OOP: JooseX.CPS is a trait for meta-classes, which enables "Continuation passing style" in Joose methods and method modifiers. JooseX.CPS allows you to define special "continued" methods and method modifiers, which forms the asynchronous interface of your class, and behave just like ordinary methods - can be inherited, composed from Role, etc. This module can be used on its own, completely separately from Joose. JooseX.CPS.Continuation TRY(Function func, Object scope? For the complete list of the available methods please refer to the link, in the meantime, take a look on the example below to see the main idea: As you can see, the control flow of the functions, wrapped with TRY/CATCH/FINALLY isn't managed by the standard return statement or explicit function end. Features Activation Nesting Exceptions

Related:  Learning Code/ProgrammingJavascriptundeclaredAdvancedhatadu