New York Tech Journal
Tech news from the Big Apple

Harness the power of #Web #Audio

Posted on April 20th, 2016

Nyc.js

04/20/2016 @TechStars, 1407 Broadway, NY

20160420_192722[1] 20160420_193308[1]

Titus Blair @Dolby demonstrated the importance of sound in the mood and usability of a web page. He then showed the audience how to incorporate higher quality audio into a web site.

He first showed a video of a beach scene. Different audio tracks changed the mood from excitement to mystery to romantic to suspenseful to tropical.

By sending a wav file to the Dolby development site one creates a high quality audio file in mp4 format which can be downloaded and played through selected browser (currently including Echo and Safari).

Titus then showed two examples, a #video game and a frequency spectrum display, and walked the audience through the code needed to play audio file.

  1. A #Javascript file, dolby.min.js, needs to be sourced (available on github)
  2. Web code needs to test if the browser can handle the Dolby digital plus file
  3. Parameters in the backgroundSound variable adjust the playback rate and other qualities
  4. To get frequency spectrum, an audiocontext variable does an fft which can be plotted

Finally, Titus illustrated our sensitivity to sound by playing the video “How to make someone sound like an idiot”.

Slides for this presentation are available on http://Bit.ly/dolbynycjs

posted in:  javaScript, NYC JS, Programming, UX, video    / leave comments:   No comments yet

#Flux as a #StateSpaceModel of user interactions and #LocalStorage options for #WebBrowsers

Posted on August 11th, 2015

NYCHTML5

08/11/2015 @Goldman Sachs, 200 West St. NY
Taylor Hakes spoke about Flux and Geraldina Alvarez Garcia spoke about local browser storage.
20150811_194542[1] 20150811_194803[1]

In the first talk, Taylor Hakes gave an introduction to Flux, an approach to organizing web development. Taylor spoke about the problems of purely programming the dom. One is that user interactions can be conceptualized by creating models in the virtual dom,  but the two-way interactions between models and the UI offers little structure and the possibility of a complex web of interactions.  For example, a user input can trigger many outcomes that may be hard to conceptualize or debug.

He then offered a view in which user interactions flow through a single dispatcher that coordinates all action requests, updates a state space, which in turn drives views. User interactions are routed through action requests, which then restart the state space update process coordinated by the dispatcher.

Taylor presented code examples showing that

  1. Actions are now functions
  2. The history of interactions is stored in state variables
  3. Debugging is easier since the state variables can be monitored vs. the user actions
  4. Flux is verbose, but useful when the logic is complex, but the number of states is manageable
  5. React complements Flux

To learn more, Taylor recommended the book: Evaluation of Flux Frameworks – by Dan Abramov


20150811_202603[1]

In the second talk, Geraldina Alvarez Garcia @Kickstarter discussed methods for storing data from a web browser on the local computer. The four methods are

  1. Cookies
  2. Local key-value store
  3. Session storage
  4. indexDB

Cookies are the most prevalent form of local storages, but they are limited to 4k of information. Geraldina talked about an application needing more storage and showed a code snippet implementing a key-value store. It can store up to 5MB of data, but cannot transfer the data directly to a server and is a synchronous operation which may interfere with other operations such as real-time interactive video.

posted in:  Html5 NYC, javaScript, NYCHTML5, Programming    / leave comments:   No comments yet

HTML5: #tools for web developers and using #Ajax for real-time updates

Posted on June 2nd, 2015

NYCHTML5

06/02/2015 @Lab49, 1345 Ave of the Americas, NY

20150602_195448[1] 20150602_201821[1]

Three speakers talked about a variety of tools for developers.

Live updating DOM elements without a framework – Rose Weixel

React and React Native – Mayank Patel

Markup workflow and snippets- Kirill Cherkashin

The first speaker, Rose Weixel, spoke about using Ruby and #Ajax to provide real-time web updates. Her nail-polish sharing site (www.lacquerlove.com) requires updates whenever anyone in one’s network updated their status. This means, that unlike in many examples, the user does not initiate the update, so updates of the back end information signal a need to update the display since the trigger event is on another client.

Read more…

posted in:  javaScript, NYCHTML5    / leave comments:   No comments yet

JerseyScript: hacking your car plus understanding and using the magic of #react.js

Posted on January 29th, 2015

@JerseyScriptUSA on twitter

01/28/2015 @Indie Grove, 121 Newark Ave, Jersey City, NJ

After Jenn updated the audience on upcoming #JavaScript events, three speakers gave lightning talks

20150128_194551

In the first, John Feminella @jxxf spoke about JavaScript under the Hood (or ruining your car with JavaScript). John gave a short history of how Federal air pollution standards stimulated development of computer monitoring of all functions in your car. The #OBD interface is a portal to error diagnostics and sensors.

Every recent car has a port near the driver’s steering wheel into which a reader can be attached. Using a BLE adapter and the Torque app, one can monitor car functions.

Using the 5 character diagnostic and sensor codes one can interpret the shared coded for 9 of the 16 pins in the interface such as is the gas cap open to what is the motor speed. It’s enough to make driving my car a spectator sport.

Other useful links are:

https://www.npmjs.com/package/bluetooth-obd

torque: http://torque-bhp.com/

The next two talks were about react.js. Bert Muthalaly @stijlist spoke about the motivation for using react.js and how it does it magic React js is a library for building the user interface. What distinguishes it is it’s ability to speed up the interface. How does it do it?

To explain this, we first need to consider when the domain object model (dom) is slow. This can happen when we are making changes to the display within a tight video loop. In this case, we make the change and the dom needs to update every detail within knowing what has been changed.

React.js speeds this update since we dictate to a virtual dom what has been changed, so the dom only needs to update what has changed. This process is accomplished by organizing the display into a tree data structure, so the changed branches can be quickly identified.

The links below provide further information:

jankfree.org also react.js, immutable.js

Lastly, Justin Falcone @modernserf showed the speed and design advantages of using react.js by creating a whimsical create-your-own-breakfast site. Here he showed how one can easily create a graphical interface to select and place eggs, tortilla, cheese, salsa, etc. on your virtual plate. The code uses svg graphics and is compact and modular as well as fast.

To get the code go to modernserf/huevos-rancheros

posted in:  javaScript, JerseyScript    / leave comments:   No comments yet

Html5NYC: #FunctionalProgramming, #GeneticAlgorithms, #Geolocation in #HTML5

Posted on November 12th, 2014

@HTML5NYC

10/12/2014 @CondeNast, 4 Times Square, NY

Three presentations on things #JavaScript.

20141112_192431[1]

In the first presentation, Nathaniel K Lee talked about how functional programming differs from many of the standard programming paradigms in a language such as JavaScript.

He talked about how functional programming emphasizes nesting of function calls in preference to loops, reusability of functions, avoiding use of global variables within functions, passing functions as function arguments, and returning functions as function outputs.

Two examples of the efficiency of functional programming are in a recursive calculation of factorial and a recursive solution to the Tower of Hanoi problem.

He talked about some of the challenges in incorporating these concepts into JS due to calls by reference when passing objects to a function. He showed how looping through a list can be replaced by recursive calls to process the first item of a list.

He said the main challenges were adopting a new mindset when programming and developing methods to handle a larger number of user-defined functions.

As an aside, those who are familiar with R will recognize the difference between using ‘for’ loops and applying the apply(), sapply() and aggregate() functions. In the case of R, these functions provide a massive speedup in execution.

20141112_195633[1]

In the second presentation, Kirill Cherkashin talked about genetic algorithms by showing how

  1. The Mona Lisa can be reproduced by randomly generated triangles alterdqualia.com
  2. http://rednuht.org/genetic_cars_2/incrementally improved the design of schematic cars by randomly mutating the shape, the wheels, and the weight of cars
  3. Google’s use of random search to find an optimal path between two points

Finally, Scott Luptowski @Handy described the HTML5 geolocation API. The API is locationed in window.navigator.geolocation (referred to here as ‘geo’)

Geo.getCurrentPosition() is the function which will ask you if the program can use your location and does the initial setup. The API returns accuracy, longitude and latitude with altitude and other returns optional. Scott said that even though the locations were coded using 12 digits, 5 seemed sufficient as they gave an accuracy of 1 meter (GPS is accurate to within 10 meters).

He recommended coding for the three error cases: 1. Permission denied 2. Timeout, 3. Position unavailable (unlikely).  There are few callbacks in the API, the most important is geo.watchCurrentPositon, which indicates the position has changed since the last report.

posted in:  Html5 NYC, javaScript, NYCHTML5    / leave comments:   No comments yet

JerseyScript: #JavaScript to automate apps on the #Mac OS X, #Touch methods for automating the @NYTimes recipe pages, How not to run a #web development shop

Posted on November 11th, 2014

@jerseyScriptUSA

11/11/2014 IndieGrove, 121 Newark Ave, Jersey City, NJ

If you are interested in spend an hour teaching students how to code, check out @Openjerseycity.org. They will be teaching students in Jersey City on Dec 11 as part of Code for America.

Of the three presentations, the first two were about writing applications in JavaScript.

20141111_200847[1]

Tyler @Groundwork talked about creating OS X apps for the Mac using JavaScript accessing the UI and systems routines using the objective-C bridge. This replaces AppleScript and uses the Script Editor on OS X to compile the JS.

The code Tyler showed illustrated how the ‘$’ literal was used to access Objective-C methods. (not to be confused with j_Query).

He also mentioned that it is unclear how this JS tool will evolve when Swift replaces objective-C.

20141111_202019[1] 20141111_202605[1] 20141111_202615[1] 20141111_202735[1]

In the second presentation, Douglas Back @ NYTimes talked about updating the Cooking.nytimes-recipe.box page to encourage users to save a list of their favorite recipes. Initially, most users were unaware of the ability to save recipes so the interface was updated to include a left-right swipe selection (a la Tinder).

Doug talked about how he implemented the 4 touch events: start, move, end, and cancel in JS. Tips included adjusting for older mobile hardware by throttling transactions to a min of 1/10 a second and animating with transforms. He also recommended using clientX and clientY coordinates to identify the touch locations across many different platforms.

He also spoke about using SASS to handle media queries and how compiling and using gzip makes even a large, complex set of media queries quick to load and execute.

Alpesh Shah @revsystems.com talked about his hard-won wisdom on running a web development agency. Tips included

  1. Must understand scope creep and other contracting pitfalls
  2. Don’t partner with your best friend (unless you want to make him/her your former best friend).
  3. Don’t limit your pool of hires to your friends – need diversity
  4. Take on clients your want, not just those you can get
  5. Continue to code. Don’t become just a manager – you will fall behind in technology
  6. Don’t let the inertia carry you nowhere as it masks the problems

 

The key is to keep your interest in the application development and to stay current with the changing technology.

 

posted in:  javaScript, JerseyScript, UX    / leave comments:   No comments yet

Everyone likes Brisket, rJS a love story, Google Closure

Posted on October 16th, 2014

NYCHTML5, #nychtml5

10/15/2014 @ Conde Nast, 4 Times Square, NY

Three presentations on tools for web development using #JavaScript

20141015_193047[1]

Google Closure: an overview – Erik Schmidt – @3rikschmidt

Erik described Google Closure (http://Developer.google.com/closure) a set of #JavaScript tools that optimize performance, improve the appearance of pages etc. The library is open source and used in Google products. Erik showed how sample code is compiled into JavaScript code.

r.js A love story – Joel Kemp @mrjoelkemp at @Behance:

Joel described how Behance/Adobe developed tools and procedures to speed the building of web pages. Behance uses RequireJS + Grunt. The goal was to speed JavaScript builds which original took 2 ½ minutes. The JS code was grouped in 75 bundles so each page need only load the code needed rather than the entire suite of code. However, a single piece of code is often contained within multiple bundles each of which need to be Uglified.

The process was sped up by uglifying the code chunks first and then loading the compiled chunks into the 75 bundles. Further speed ups were obtained by not only compiling vendor code when new versions were used. Eventually the bundle creation process will be designed so bundles are only reassembled when new code has been updated.

20141015_202821[1]

Everyone likes Brisket – Wayne Warner @wawjr3d

Brisket is isomorphic framework that works like backbone. It is used to power new Bloomberg websites. Perceived loading speed is it’s key advantage. Brisket optimizes its perceived loading speed using several techniques including the ability of user’s to see images and click on links before JS is fully loaded and the duplication of execution by the server and clients sides.

posted in:  javaScript, NYCHTML5    / leave comments:   No comments yet

JerseyScript and the Goblet of Fire

Posted on July 29th, 2014

JerseyScript and the Goblet of Fire

 Jersey Script  #BostonJs #javaScript #js

Atul Varma (toolness.com / @toolness) , Sean West (github.com/seanewest), John Feminella  (http://jxf.me, @jxxf on Twitter, @fj on GitHub) 

7/29/2014 Indiegrove – Coworking Space, 121 Newark Ave, 5th Floor, Jersey City, NJ 

Three talks presented two tools and some whimsy.

Sean asked why we need to store files on our local computer before we need them and why we need to have a separate download and install process before running a program. For Linux and Apple, FUSE avoids this using a foundational concept from, the original Unix: all communications are treated as accessing a file. In Fuse, external files are treated as local files and only imported when needed. Google has developed Fuse for Windows.

Atul presented minigames as entertainment and a tool to teach programing. Minigames run on the web and take seconds to play. Classic minigames include ‘dumb ways to die’ – (what not to do in the Melbourne subway) and warioware microgames games. Minigames have been developed using a wide range of tools include scratch, waterbear, thimble, impact, elm, unity, haxe, emscripten. In addition, http://minica.de has a javascript library, Tinygame.js  (see http://minica.,de/docs for documentation).  There are many advantages in using minigames as a teaching tool: short programs, simple structure, failure does not affect other programs.

John described the pitfalls in naïve use of the date and time functions. These include missing shifts from standard/daylight time, changes in offsets from UTC time and changes in the calendar by governing bodies.

He showed pitfalls of naively converting from UTC to local time and recommended using frameworks such as moment.js or XDate (faster, but misses some corner cases).

posted in:  applications, javaScript, JerseyScript, Programming    / leave comments:   No comments yet