Tutorial: Controlling Processing.js with jQuery UI « Joseph Harrington Years ago when I was first learning to code, I stumbled upon Processing and we quickly became great friends. As it often goes though, the years went by and I started hanging out with bigger and more dangerous languages, and Processing and I drifted apart. Every so often I would think back on the good times we had and wonder what he was up to. But recently we bumped into each other on the street! Gladly those days are over with the Javascript- and HTML5-based port of the original language. “But wait!” And the answer is yes. Check out this demo in which I may or may not have gone a bit overboard with sliders… I hope you wasted as much time playing with that as I have. Anyway, enough gushing. Let’s try something a bit simpler and more focused than that kaleidoscopic nonsense up there. Let’s say you want to create some kind of dynamic text visualization. The UI components that will interact with the sketch will be a textbox and a slider. We can break this down into three parts: Alright!
Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael Advertisement Before drawing anything in a browser, ask yourself three questions: Do you need to support older browsers? Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. Choosing the right framework will determine the success of your project. All of the code in this article is open source and can be run on the demo page that accompanies this article. Overview It’s all JavaScript once the page runs, but the frameworks take different paths to get there. PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. Using all three libraries is easy if you have some familiarity with JavaScript. Getting Started Start by importing each library. Setting Up Paper.js Paper.js specifies a script type of text/paperscript and the ID of the canvas tag that you’ll draw on. Setting Up Processing.js Paper.js: (al)
Loosely Coupled, Reusable UI Components in Backbone.js | Azavea Labs This article assumes a fairly good understanding of the Backbone.js MV* library. There is a lot of good material on the web for learning Backbone, including the Backbone home page at backbonejs.org. Intro One of the things that differentiates Backbone from other frameworks is that it is extremely lightweight. It specifies the framework for doing complex things, including making complex interactive user interfaces, but it doesn’t come with any usable UI widgets. A typical pattern, tight view and model binding: In a recent application, I added UI to modify the opacity and color ramp palette in a map raster layer. I am wary of trivial Backbone examples, but a simplified example is an opacity control in some sort of image editing app: When the user slides the slider in the opacity view, it sets the opacity attribute of the image model. So as a first shot at generalizing this interface, perhaps we could -parameterize- the Opacity Controller View. The Solution So what you end up with is Conclusion
Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday
Developer Guide: Developer Guide Loading... On this page, you will find a list of official AngularJS resources on various topics. Just starting out with AngularJS? Try working through our step by step tutorial or try building on our seed project. Ready to find out more about AngularJS? Core Concepts Templates In AngularJS applications, you move the job of filling page templates with data from the server to the client. Application Structure Other Features Testing Community Resources We have set up a guide to many resources provided by the community, where you can find lots of additional information and material on these topics, a list of complimentary libraries, and much more. External AngularJS resources Getting Help The recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on Plunker, JSFiddle, or similar site and then post to one of the following: Official Communications Official announcements, news and releases are posted to our blog, G+ and Twitter:
Into the Land of Functional Programming with JavaScript | Something Somewhere Enter JavaScript…Running examplesFunctions are “first-class citizens”Closures and scopesPartial ApplicationMemoizationLazy evaluationNot a functional language but Enter JavaScript… JavaScript is an interesting language. Syntactically it resembles C, C++ and Java, but it was also inspired by a functional language: Scheme, which is a dialect of Lisp. That JavaScript has a C-like syntax is largely due to the hype around Java at the time JavaScript was introduced. The language was rushed to the market, leaving in it a few bad design decisions like global variables, ‘with’ construct, etc. JavaScript still has somewhat bad reputation with some people who do not know the language well, but encountered a few problems when programming for the browser or heard some unfavorable opinions from the people who did so. Contrary to the popular misconception JavaScript is not used only in browser, it became quite popular recently on the server-side. Running examples Functions are “first-class citizens”
The top 5 JavaScript templating engines When you build a JavaScript application, you'll almost certainly use some JavaScript templates. Rather than use a library like jQuery (or vanilla JavaScript) to update your HTML when values update, you can use templates, which cleans up your code hugely. In this article, we'll look at some popular templating libraries. 01. Mustache Mustache is often considered the base for JavaScript templating. Once Mustache is included on your page, you have access to the global 'Mustache' object. In the above example, you can see I've referenced '{{name}}'. Here I've passed in the template as a string, but if you had a more complex template, you might not like to do it this way. <script type="text/x-mustache" id="template"> <p>Hello, {{name}}</p> </script> We can then access the contents of that script tag. By giving the 'script' tag a 'type' attribute of something the browser doesn't understand, it will ignore the contents, so it doesn't try to execute it as JavaScript. {{#people}} {{name}} {{/people}}
Chart.js Documentation Chart.js provides a number of options for changing the behaviour of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point. Chart Data To display data, the chart must be passed a data object that contains all of the information needed by the chart. Creating a Chart with Options To create a chart with configuration options, simply pass an object containing your configuration to the constructor. Global Configuration This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. Example Usage
EJS TreeGrid