design - How prototypal inheritance is practically different from classical inheritance Building a Game with Three.js, React and WebGL — SitePoint I’m making a game titled “Charisma The Chameleon.” It’s built with Three.js, React and WebGL. This is an introduction to how these technologies work together using react-three-renderer (abbreviated R3R). Check out A Beginner’s Guide to WebGL and Getting Started with React and JSX here on SitePoint for introductions to React and WebGL. This article and the accompanying code use ES6 Syntax. How It All Began Some time ago, Pete Hunt made a joke about building a game using React in the #reactjs IRC channel: I bet we could make a first person shooter with React! I laughed. Years later, that’s exactly what I’m doing. Charisma The Chameleon is a game where you collect power-ups that make you shrink to solve an infinite fractal maze. Why React? I know what you’re thinking: why? “Declarative” views let you cleanly separate your scene rendering from your game logic.Design easy to reason about components, like <Player />, <Wall />, <Level />, etc. Recommended Courses Wes Bos React and WebGL Debugging
Private Static Members in Javascript Introduction It was a widely held belief that javascript objects could not have private instance members, that all javascript object properties where public and could be accessed and changed with external code. Douglas Crockford has demonstrated that closures can be used to provide javascript objects with private members. Douglas Crockford describes how the invocation of the constructor forms a closure that allows all of the parameters, local variables and any functions defined as function fncName(){ ... ); within the constructor to remain associated with the object that is constructed as its private members. Public and private are terms directly from class based languages (joined by "package" and "protected" in Java), privileged is a term that I think Mr Crockford coined to describe the special role of the constructor's inner functions assigned to externally accessible instance members. Javascript static members defined as properties of the constructor object are public static members.
5 Must-Reads on JavaScript Inheritance By Karthik Viswanathan Do you know inheritance in JavaScript? Do you truly understand how it works? Are you aware that JavaScript uses a prototypal inheritance scheme that is often disfavored or disliked? Have you used a script on the web to adapt this scheme to classical inheritance? In these past few days, I’ve been writing a jQuery slider plugin with various transition effects. Inheritance in JavaScript has been a controversial subject. 1. This reading isn’t really about inheritance, but it’s an important primer on object-oriented programming in JavaScript which will help give you a deeper understand of what is to come. 2. John Resig, the creator of the jQuery JavaScript library, presents his own take on inheritance. 3. Steffen Rusitschka explains the advantages and disadvantages of prototype-based and closure-based (more classical) inheritance. 4. 5. In this reading, Crockford analyzes his old classical inheritance and realizes the benefits of sticking with the prototypal structure.
Automate Your Development Workflow With GulpJS TL;DR: In this tutorial, I'll introduce you to GulpJS and show you how to set it up in your application for task automation. GulpJS is a JavaScript task runner that lets you automate several tasks during development. These tasks involve minifying JavaScript and CSS files, automatically refreshing the browser once a file has been edited, compiling CSS preprocessors, running tests, compressing images, and several others. "GulpJS solves the problem of repetition." GulpJS is a build tool that helps you as a developer get rid of manually running such tasks as mentioned above during development for every project. GulpJS Requirements In order to use GulpJS, you need to have the following tools installed on your machine. Node.js: Navigate to the Node.js website and install the latest version on your machine.GulpJS: Install Gulp globally in your terminal so that the gulp command can be run from any directory. npm install gulp-cli -g GulpJS Features GulpJS provides a standardized API. Gulp Plugins
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. 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. 3. In the codeblock above, we’re returning from an anonymous function an object with two members. 4.
Simple JavaScript Inheritance I’ve been doing a lot of work, lately, with JavaScript inheritance – namely for my work-in-progress JavaScript book – and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques. Out of all the ones that I’ve looked at I think my favorites were the implementations employed by base2 and Prototype. I wanted to go about extracting the soul of these techniques into a simple, re-usable, form that could be easily understood and didn’t have any dependencies. Additionally I wanted the result to be simple and highly usable. Here’s an example of what you can do with it: A couple things to note about this implementation: Creating a constructor had to be simple (in this case simply providing an init method does the trick).In order to create a new ‘class’ you must extend (sub-class) an existing class.All of the ‘classes’ inherit from a single ancestor: Class. Simple Class Creation and Inheritance Initialization Super Method
Coder's Block Blog / Motion Detection with JavaScript I recently gave a talk at RevolutionConf about writing a motion detecting web app with JavaScript. This is basically that talk, but in blog form. Live demos and all the source code are available at the end of this article. The Premise I wanted to see what my pets do when I’m away. But I didn’t want a continuous live stream, since that would be pretty boring (they sleep a lot). Just for kicks, I decided to do this as a web app, all in JavaScript. Accessing the Webcam The first step is to access the webcam. Anyway, to grab a stream from a webcam, start with a <video> element in your HTML. Then add a bit of JavaScript. This will attempt to grab a 640px by 480px stream from an attached webcam. Grabbing Still Frames We need to capture still frames from the streaming video so that we can do motion detection (more on this later) and potentially upload them as images to Twitter. We start by grabbing the <video> element with the stream on it from the page. Diffing So, what exactly is “motion”? Scoring
Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry The module pattern is a common JavaScript coding pattern. It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We'll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single . (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function. Global Import JavaScript has a feature known as . Luckily, our anonymous function provides an easy alternative. (function ($, YAHOO) { // now have access to globals jQuery (as $) and YAHOO in this code }(jQuery, YAHOO)); Module Export Advanced Patterns Augmentation
What ASP.NET Developers Should Know About JavaScript JavaScript – It's beat up, put down, shrugged off and kicked around. Cursed by the web browser's inconsistency yet blessed by a pervasive ubiquity -it's a technology many try to disregard even when its potential is something few can ignore. If you want to write an interactive application for the web today, then you'll need some JavaScript code on your side. This article approaches JavaScript from the perspective of an ASP.NET developer who is comfortable with the paradigms and patterns of either C# or Visual Basic. The article doesn't look at how to use JavaScript from ASP.NET exactly, but it does look at why JavaScript is so different from the two languages we commonly use with the .NET CLR. The introduction didn't paint a flattering picture of the JavaScript language, but the truth is JavaScript is a good language. The tools The implementations The bad practices JavaScript Tools Most of the tools we use in a Visual Studio environment are geared to languages targeting the CLR. Ubiquity