Pedalboard.js by dashersw - Open-source JavaScript framework for developing audio effects for guitars
Check out pedals.io! It's pedalboard.js packaged as a product you can really use. Introduction Ever wanted to have your pedal stack in the cloud, available anywhere you go without any hardware? Pedalboard.js is a ground-breaking, first of its kind, novel open-source JavaScript framework for developing audio effects and applying them to sound sources–and it's particularly good at guitar effects. The API and all the abstraction is built around the concept of guitar effects — pedals and stomp boxes, pots and switches. You design your pedal with the powerful Web Audio API, attach pots and switches to it, style it via CSS3 and voila. Bring multiple pedals together to create a pedal board, easily adjust their settings and routing. Finally, a complete guitar effects stack, completely customizable, in your hands. Motivation What's worse, now that the freemium model is very popular, what looks like an easy initial buy turns into a small fortune when you'd like to buy the effects you wanted. Audio Nodes
DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM
felixge/faster-than-c
reveal.js - The HTML Presentation Framework
HTML Presentations Made Easy Created by Hakim El Hattab / @hakimel Heads Up reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory. Vertical Slides Slides can be nested inside of other slides, try pressing . Basement Level 1 Press down or up to navigate. Basement Level 2 Cornify Basement Level 3 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Works in Mobile Safari Try it out! Marvelous Unordered List No order here Or here Or here Or here Fantastic Ordered List One is smaller than... Markdown support For those of you who like that sort of thing. <section data-markdown> For those of you who like that sort of thing. Transition Styles You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default Themes Global State Custom Events
Limiting Function calls
I’m frequently in a situation where I want to prevent a function from being called too quickly - for instance, when I want to run an expensive validation function on some input, but don’t want to run the function on every keyup. Most recently, I needed to prevent both ontouchdown and onclick from being called nearly simultaneously. A nice way to deal with this is to write a function that constructs functions that can only be called every n milliseconds. function trickle( fun , waitLength ) { var lastCalledAt = 0, context = this; return function(){ var now = (new Date()).getTime(); if (now > lastCalledAt + waitLength ) { lastCalledAt = now; fun.apply(context, arguments); } } } Now by passing a function into trickle(), I can easily prevent a function from being called too frequently, potentially significantly improving performance. Update:
DataGen: Generate Large Test Data Files – Like A Boss « Blog
A couple of months ago I was doing some volume and performance testing against an application that was expecting a 500% data growth, which meant I had to generate lots and lots of dummy data to test whether the storage would hold up and whether the application itself would still perform well. I quickly came up with a script that loops through N times, generates dummy data, and creates an XML file. I left the script running while working on something else in parallel, and at the end the script finished after about a couple of hours. There were 3 issues with this approach: 1) It sure wasn’t going to be the last time I had to generate large test data. That’s why I wrote DataGen. Use npm to install: npm install -g datagen Ease of use You don’t need to know any scripting language, you only need to create templates to construct your test data in this structure: Start by creating example header, segment, and footer templates: datagen init Example header: Example segment: Example footer:
Working with Transitions
D3’s selection.transition method makes it easy to animate transitions when changing the DOM. For example, to change the text color to red instantaneously, you can select the body element and set the color style: d3.select("body").style("color", "red"); To instead animate the change over time, derive a transition: d3.select("body").transition().style("color", "red"); This ease-of-use comes from D3’s transition interface mirroring the selection interface: nearly everything you can do to a selection of elements, you can also do to a transition, causing the change to be animated over time rather than instantaneous. Yet looks can be deceiving because selections and transitions are not perfectly equivalent: transitions provide only a subset of selection functionality. Note: This article discusses transitions as implemented in version 3.0, which was released in December 2012. #Transitions Are a Form of Animation Look again at this example transition: #Transitions Interpolate Values over Time
jQuery Fundamentals :: A guide to the basics of jQuery
Unit Testing Backbone.js Apps With QUnit And SinonJS
This article will be appearing in my forthcoming book on Backbone.js and continues the section on unit testing. We previously looked at Jasmine and will now look at QUnit and SinonJS. QUnit is a powerful JavaScript test suite written by jQuery team member Jörn Zaefferer and used by many large open-source projects (such as jQuery and Backbone.js) to test their code. It’s both capable of testing standard JavaScript code in the browser as well as code on the server-side (where environments supported include Rhino, V8 and SpiderMonkey). Quite a few Backbone.js contributors feel that QUnit is a better introductory framework for testing if you don’t wish to start off with Jasmine and BDD right away. My personal recommendation is that it’s worth comparing both frameworks and opting for the solution that you feel the most comfortable with. Getting Setup Luckily, getting QUnit setup is a fairly straight-forward process that will take less than 5 minutes. Sample HTML with QUnit-compatible markup: App
Examples and documentation on grumble.js
Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. grumble.js is currently written as a jquery plugin and can be found on Github Examples The following code animates a set of grumbles, click here to see it in action. No textDifferent styleWith close buttonEnlarged for text Can I haz callbacks? The darkside of grumble.js grumble.js exposes three methods, 'show', 'hide' and 'adjust'. Warning: Clicking on this link may damage your UX. What is this magic? grumble.js uses buzzwords like CSS3 and 'maths' to position itself exactly where you want it. Credit due Big thanks to everyone involved in creating the idea and design of grumble.js (aka.
