19: Node.js Application Security

Chetan Karande (@karande_c), talks about Node.js App security and ways developers can prevent attacks. He goes into detail about working with Express.js in particular, NodeGoat, & his work with OWASP. Chetan is a team lead and senior software engineer at Omgeo and frequently speaks at conferences about JavaScript, Front End Technologies, Java, & Node.js.

Resources:

 

Direct download: episode-19_nodejs-application-security.mp3
Category:nodejs -- posted at: 3:59pm EDT
Comments[0]

18: ORTC & WebRTC Deep Dive with Tsahi Levent-Levi

We covered the basics of WebRTC (Web Real Time Communication) & Real Time Application Development in episode 7 of the podcast with Agility Feat and now, with the recent news that Microsoft has decided to start implementing ORTC (Object Real Time Communication), we felt it was time to get a closer look at this ‘peer-to-peer’ technology and how we can start using it today. ORTC is an ‘evolution’ of WebRTC (AKA Web RTC 1.1) and it changes a few things to the underlying way Web RTC works. Despite this, ORTC seems to retain all of its previous API’s and functionality.

 

Our guest Tsahi Levent-Levi (@tsahil) goes through the API's associated with ORTC, sharing his experiences with each piece of the technology. He takes us through possible client strategies ,deployment 'gotchas', what is relevant and working today, the misconceptions, and the power of peer-to-peer communication & media interactivity.   

 

Resources

 

Direct download: episode-18_ortc-and-webrtc_deep-dive-with-tsahil-levent-levi.mp3
Category:realtime -- posted at: 8:19am EDT
Comments[0]

17: The Famo.us vision of "Mobile First"

Defender of Magic, wizardry and the web, and CEO of Famo.us, Steve Newcomb (@stevenewcomb), walks us through the current state of Famo.us. Steve talks about how they are innovating the web and what we can expect in the future of “mobile first” web development from Famo.us.

 

Famo.us utilizes the power of a Virtual DOM combined with several engines that optimize the power of “cpu bound” performance. Famo.us claims to have mobile performance improvements that eliminate ‘janky’ animations and blur the lines between native device apps and mobile web apps.

 

Steve goes on to talk about how in April Famo.us will be releasing several features that will enable designers to easily pair with developers and also a new way of building with the framework that will “marry” native and web technology. “Mixed Mode” is a breakthrough for the team and apps built with this new feature will likely have native or even better than native UX & performance.

Resources

 

Direct download: episode-17_the-famous-vision-of-mobile-first.mp3
Category:JavaScript -- posted at: 9:59am EDT
Comments[1]

16: Measures of Success in Pair Programming

Pair Programming is an agile software development technique in which two programmers work together on the same development work at the same time. Many variants exist for this practice, each having there own merits and drawbacks.

 

From a business perspective, many companies are skeptical and critical of this practice because it incurs cost. Whether that cost is measured by time or by labor hours, determining a measure of success for pair programming is not an easy thing to do. In a world where metrics and numbers define ‘the bottom line’ it is no surprise that pair programming is not used everywhere.

 

What does it provide for the business of product & software development? The benefits definitely outweigh the drawbacks from a developer perspective. Our Evan Light talks about the aspects of testing practices in pairing, tools, and many other secrets to unlocking the power pairing.

 

Evan Light (@elight) is a software developer with nearly 20 years of professional experience. Having a passion for community service, Evan has spent several years as a volunteer EMT. In 2008 Evan founded the Ruby DCamp “unconference” which he continues to organize and run each year. He is a respected member of the Ruby programming community and has spoken at several Ruby-related conferences over the years.

 

Evan has an extensive background in remote pair programming and recently spoke at RubyNation in Silver Springs, Maryland on the subject. Evan’s talk was titled “Remote Pairing From the Comfort of Your Own Shell” where he spoke about his challenges & experiences in pair programming over the years and what has tools he uses today.

Resources

eXtreme Programming Explained - http://www.amazon.com/Extreme-Programming-Explained-Embrace-Change/dp/0201616416

Pomodoro technique -

Agile Definition of Pair Programming -  http://en.wikipedia.org/wiki/Pair_programming

#PairWithMe - http://www.pairprogramwith.me/

Ruby DCamp - http://rubydcamp.org and http://evan.tiggerpalace.com/articles/2012/10/06/the-dcamp-manifesto/

Vagrant - https://www.vagrantup.com/

Tmux - http://tmux.sourceforge.net/

Tmate - http://tmate.io/

Vimux - https://github.com/benmills/vimux

My .emacs.d - https://github.com/elight/.emacs.d

Pomodoro Technique - http://en.wikipedia.org/wiki/Pomodoro_Technique

RubyMine - https://www.jetbrains.com/ruby/

Readme Driven Development - https://oncletom.io/talks/2014/okfestival/#/

J.B. Rainsberger “Integration Tests are a Scam” - http://vimeo.com/80533536

nitrous.io - https://www.nitrous.io/

Screen Hero - https://screenhero.com/

RubyNaition - http://www.rubynation.org/schedule/index

Pairing Staircase - http://itnaut.com/pairing_staircase

Evan on Twitter - https://twitter.com/elight: @elight

 

Evan’s Site - http://tripledogdare.net or http://evan.tiggerpalace.com

 

Direct download: episode-16_measures-of-success-in-pair-programing.mp3
Category:pair-programming -- posted at: 12:35am EDT
Comments[0]

15: Functional Programming with Elm, ClojureScript, Om, and React

Episode 15 deep dives into the programming experiences of Adam Solove (@asolove), Head of Engineering at Pagemodo. Adam has spent the last ten years building web interfaces various technologies such as CGI, Flash, DHTML, RJS, jQuery, and many MVC JavaScript frameworks. Adam has found over his career that working with a more functional style of programming is much more rewarding in many ways.

 

Functional programming and FRP (Functional Reactive Programming) provides improvements in performance and purposely avoids changing-state and mutable data. This can be an extremely effective technique in web application development because of the stateful nature of DOM (Document Object Model) implementations in the browser. Adam evangelizes and works with several languages and tools to provide incredible functional style applications including, but not limited to, Elm, ClojureScript, OM, & React.js.

 

Facebook’s React.js, met with mixed reviews when it was first released in 2013.  Since then it has been stirring up support in droves within the JavaScript development community do to it’s high UI performance output in browsers. It’s Virtual DOM and ways of solving data & DOM performance problems have been highly criticized but hard to ignore. React has an effective unorthodox way of thinking about UI.

 

Elm, a functional reactive language for interactive applications, combines core features of functional languages like immutability & type inference with FRP to Create highly interactive applications without callbacks or shared state. Elm is similar in syntax to Haskell and it compiles to HTML, CSS, and JavaScript that uses a Virtual DOM model similar in concepts to that of react.js. According to Elm’s internal benchmarks, using it’s compiled JavaScript code is actually faster than any JavaScript framework tested by a extreme margin.  

 

ClojureScript, is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler. David Nolen, has taken ClojureScript and created an interface for react.js called OM. Om allows for simple represention of Web Application User Interfaces as an EDN. ClojureScript data is immutable data, which means that Om can always rapidly re-render the UI from the root.  According to the project description, UIs created with Om are inherently able to create & manage historical snapshots with no implementation complexity and little overhead.

 

Resources

Elm

ClojureScript & OM

React.js

 

Comments[0]

14: Web Components Interop and Polymer

Today, Web Components have emerged from cutting edge technologies to technologies we can implement in our small scale production. It won’t be long before we are building large scale applications with Custom Elements, HTML Imports, Template Tags, and the infamous Shadow DOM. In embracing this type of developer environment, with it’s flexibility and compositional nature, consider interoperabilty as a core concept.

 

If you need a custom element for a card layout, as an example, you should be able to use any Web Component out there in the ecosystem regardless of which library or toolchain it comes from. If the component provides the desired functionality and styling you would require it should work seamlessly in your application. Furthermore, toolsets should not limit the the extending and composition of these custom elements. In practice, this may or may not always be the case and library & toolchain creators will need to be aware of these concerns.

 

Rob Dodson (@rob_dodson), Developer Advocate on the Google Chrome team, talks about his thoughts on the subject. Rob is helping to educate developers, not just about Google’s Polymer Library built on top of Web Components, but across the entire Web Components community.

 

Rob goes through many of the changes made to Polymer 0.4.2, including accessibility and performance that help in making applications more integrated and how Google is working to share what the Blink Team has learned from implementing Web Components in Chrome with other browser vendors and developers.

 

Working closely with Mozilla developers on his SFHTML 5 Meetup talk on Web Components Mashups, Rob was able to collaborate and share ideas so that Web Components could alleviate many of the concerns we had when migrating from one JavaScript library to another. It is painful for developers to have to remake components every time they switch libraries or frameworks. Web Components aims to make that a thing of the past and Rob has done much more on this topic since that talk. Have a listen and hear what he has to say.

Resources

Rob’s Blog - http://robdodson.me/

I/O Presentation - http://webcomponents.org/presentations/unlock-the-next-era-of-ui-development-with-polymer-at-io/

Accessible Web Components Part 1 -https://www.polymer-project.org/articles/accessible-web-components.html

SFHTML Mashup Video -https://www.youtube.com/watch?v=75EuHl6CSTo

The Web Platform Status for IE - https://status.modern.ie/

IE Beta Channel - http://www.microsoft.com/en-us/download/details.aspx?id=43360

Polytechnic Events - http://itshackademic.com/

Polycast Playlist - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

Custom Elements on GitHub - https://twitter.com/polymer/status/464103568392200193

IE Platform Voting -https://wpdev.uservoice.com/forums/257854-internet-explorer-platform

customelements.io - http://customelements.io/

Webcomponents.org -http://webcomponents.org/

Bosonic Shadow DOM Issue (#4) - https://github.com/bosonic/bosonic/issues/4

The Bower Package Manager - http://bower.io/

Divshot - http://divshot.io

Divshot Blog - https://divshot.com/blog/

BuiltWithPolymer - http://builtwithpolymer.org/

Divshot’s Web Component Playground - https://ele.io/

Angular 2 Web Components Data Binding Document - https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit?hl=en&forcehl=1&pli=1#heading=h.xgjl2srtytjt

ReadTheSource - http://hangouts.readthesource.io/hangouts/divshot-superstatic/

RailsCasts -http://railscasts.com/

PhantomJS -https://github.com/ariya/phantomjs/wiki/PhantomJS-2

saucelabs -https://saucelabs.com/

People

Alex Russel -https://twitter.com/slightlylate

Alice Boxhall -https://twitter.com/sundress

Raphael Rugeron - https://twitter.com/goldoraf

Jonathon Sampson  -https://twitter.com/jonathansampson

Arron Schaar - https://github.com/pennyfx

Michael Bleigh - https://twitter.com/mbleigh

Scott Corgan - https://twitter.com/scottcorgan

Projects

Reactive Elements -https://github.com/PixelsCommander/ReactiveElements

X-Tags Imports - https://github.com/x-tag/x-tag-imports

Enyo -http://enyojs.com/

React.js -http://facebook.github.io/react/

Famo.us -http://famo.us/

Chromium Blink -http://www.chromium.org/blink

Polymer 0.4.2 -https://github.com/Polymer/polymer/releases/tag/0.4.2

Brick 2.0 -http://brick.mozilla.io/

X-Tags -http://www.x-tags.org/

Polymer -https://www.polymer-project.org/

Bosonic -https://bosonic.github.io/

Vulcanize - https://github.com/polymer/vulcanize

generator-element -https://github.com/webcomponents/generator-element

Firefox OS - https://www.mozilla.org/en-US/firefox/os/

web-component-tester -https://github.com/Polymer/web-component-tester

Topeka -https://github.com/polymer/topeka

Jquery UI -http://jqueryui.com/

Components

core-a11ykeys -https://github.com/Polymer/core-a11y-keys

core-list -https://github.com/Polymer/core-list

core-animated-pages -https://github.com/Polymer/core-animated-pages

Brick Components -http://brick.mozilla.io/v2.0/docs

WinJS Polymer Samples -https://github.com/banguero/winjs-polymer-samples

core-ajax - https://github.com/polymer/core-ajax

google-map - https://github.com/GoogleWebComponents/google-map

core-shared-lib - https://github.com/Polymer/core-shared-lib

google-apis - https://github.com/GoogleWebComponents/google-apis

core-selector - https://github.com/polymer/core-selector

paper-menu-button - https://github.com/Polymer/paper-menu-button

paper-tabs - https://github.com/Polymer/paper-tabs

paper-elements - https://www.polymer-project.org/docs/elements/paper-elements.html

core-signals -https://github.com/Polymer/core-signals

Direct download: episode-14_web-components-interop-and-polymer.mp3
Category:web-components -- posted at: 11:44am EDT
Comments[2]

13: MeshBlu, NPM, and The Internet of Everywhere

Connectivity and ubiquity will play a huge role in how web development for connected devices evolves. The rise of makers & builders in the development community is sparking innovation as well as curiosity in the business world. From connected cars & living spaces to fashion and novelty, The Internet of Things (#IoT) stretches far and wide. We are seeing more and more that our clients and users are demanding applications that integrate seamlessly not just w/ their phones, tablets, and computers but with their tv’s, security systems. Many companies are now seeing the viability & market for connected IoT. Many of these companies want to unify product experiences and blur the lines between the physical and digital worlds. With that said, how can we start building our skills and becoming the experts in this development arena?

 

Whether you are interested in building assembly line robotics, medical technology solutions, or even a simple product with blinking LED’s, developers will need to know many things. The security, product development cycles, how to connect devices to together, & how to share and assimilate firmware & software packages are very important. Standardization and assimilation of devices in a secure manner is critical for businesses.

 

JavaScript’s ubiquity & evented I/O model lends itself well to easily build IoT devices. Other languages are just as viable and debatably better at many aspects of IoT but JavaScript makes it easier, approachable, and portable.

 

NPM (@npmjs), the Node Package Manager, is used across the world as the standard JavaScript package manager for Node.js JavaScript primarily for the web. NPM, Inc. aims to change that and be more than a web tool. I aims to be the JavaScript ecosystem package manager for all development platforms from front end development to IoT and more. Raquel Velez (@rockbot), Software Engineer at NPM, Inc., speaks to this, the impact of NodeBots on the development community, education of IoT, and robotics & web technologies in IoT.

Chris Matthieu (@chrismatthieu), Co-founder & CTO of Octoblu (@Octoblu), discusses Octoblu’s platform and specifically #MeshBlu (AKA SkyNet.im), the scalable & universal cloud-based MQTT & CoAP-powered network for smart devices, sensors, cloud resources, drones, Arduinos, Raspberry Pis, and more.

 

Mike Schwartz(@nynymike), CEO of Gluu, shares his feelings on IoT security, open security standards, development practices and the pitfalls of a connected platform for IoT devices.  

 

Kenal Shah (@KenalShah), Product Manager at 3Pillar Global, talks to the product side of IoT and how the business side of developing for connected devices impacts the development practices.

 

Standards are constantly debated and the rise of the machines is upon us. We need to decide as a community what these standards are so our clients can trust us to develop their IoT integration products. It is “The Wild Wild West” of IoT yet production and shipping capablities are here with tools like Node.js, NPM, and Octoblu. Once we solidify the standards, will you be ready to deliver?

 

https://twitter.com/chrismatthieu/status/458381648816377857

 

Upcoming Related Events

http://hangouts.readthesource.io/hangouts/octoblu-meshblu/

 

Resources

http://www.smartthings.com/

http://openinterconnect.org/

http://2014.robotsconf.com/

https://www.docker.com/

http://iot.sys-con.com/node/3178979

http://webrtc.sys-con.com/node/3123286

https://allseenalliance.org/sites/default/files/AllSeen-Alliance-DataSheet-09092014-8x11.pdf

https://allseenalliance.org/developer-resources/alljoyn-open-source-project

https://localmotors.com/awest/connected-car-project-internet-of-things/

http://javascriptjabber.com/103-jsj-robots-with-raquel-velez/

https://www.spark.io/

https://tessel.io/

http://www.arduino.cc/

http://www.raspberrypi.org/

http://www.intel.com/content/www/us/en/intelligent-systems/alliance-overview.html

http://nodebots.io/

http://www.3pillarglobal.com/

 

All Seen Alliance

https://allseenalliance.org/

 

NPM

http://rckbt.me/

https://twitter.com/rockbot

https://www.npmjs.org/

 

Octoblu

http://chrismatthieu.com

https://twitter.com/chrismatthieu

https://github.com/chrismatthieu

http://www.octoblu.com/

https://twitter.com/octoblu

https://github.com/octoblu

https://developer.octoblu.com/

https://plus.google.com/u/0/+ChrisMatthieu

https://github.com/octoblu/meshblu

https://itunes.apple.com/us/app/mobiblu/id915566405?mt=8

 

Gluu

http://www.gluu.org/blog/

http://www.gluu.org/blog/nstic-announce/

http://www.gluu.org/gluu-server/overview/

 

Direct download: episode-13_meshblu-npm-and-the_internet-of-everywhere.mp3
Category:IoT -- posted at: 9:31am EDT
Comments[1]

12: Flux Application Architecture & React

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.” - Facebook’s Flux Architecture Home Page -

 

Bill Fisher (@fisherwebdev), Facebook Software Engineer & Lead Developer of the Flux Documentation, joins The Web Platform Podcast for ‘Episode 12:  Flux Application Architecture & ReactJS.’

 

Bill talks with hosts Nick Niemeir (@nickniemeir) & Erik Isaksen (@eisaksen) about Flux, an application architecture similar in ideas to CQRS & Data Flow Programming. It was created to alleviate the performance & scalability problems that Facebook encountered in building Facebook Messenger (Watch Hacker Way: Rethinking Web App Development at Facebook’ - a presentation by Jing Chen, Software Engineer at Facebook, for further information). Flux promotes a unidirectional data flow model through an application. In contrast to MVC, Flux mainly consists of Stores, a central Dispatcher, and Controller-Views.

Facebook has React.js as its view layer and and Flux is quickly becoming the architectural design of choice for many of its other web applications. The support, power, and marketing behind the Angular.js and Ember.js frameworks is undeniable and when Facebook released React.js many developers misunderstood its Virtual DOM approach because it was not like the frameworks developers are used too. Despite that, Facebook has proved itself a ‘contender’ in the eyes of many in the development community and many developers and engineering teams are switching their ‘framework of choice’ to React.js.

 

Flux combined with React.js offers many appealing possibilities but it is not limited to use with just React.js. Flux is an application architecture and it can be used as a pattern in almost any technology stack for web application development.

 

Flux & React Resources

 

Flux Projects In Progress

 

Flux Implementations

 

React Channels

 

Direct download: episode-12_flux-application-architecture-and-react.mp3
Category:React-Flux -- posted at: 2:36pm EDT
Comments[2]

11: The Bosonic Project

Raphael Rougeron joins us from Toulouse, France to talk about The Bosonic Project.  Raphael and his team of developers mostly focus their development efforts working in the Financial Industry, building out secure and robust applications as well as intricate cross browser UI Components. The UI components part of his work is especially interesting in that it led him to create The Bosonic Project.

 

Raphael was frustrated, like most of us, with having to constantly rewrite all of his components every time his team shifted technologies so he created The Bosonic Project. Bosonic, deriving its name from the word Boson, which is a subatomic particle that has zero or integral spin, is a philosophy and supporting tool chain to assist in building better UI components as the standardized Web Component specs (Custom Elements, HTML Imports, Shadow DOM, Templates, and CSS Decorators) describe them. This approach shields components against potential spec changes and provides support for “not-so-modern” browsers like Internet Explorer 9 (IE9).

 

Resources

https://bosonic.github.io/

https://github.com/bosonic/grunt-bosonic

https://github.com/bosonic/bosonic

https://bosonic.github.io/getting-started.html

https://raw.githubusercontent.com/bosonic/bosonic/master/dist/bosonic-polyfills.js

https://github.com/bosonic/transpiler

http://blog.raphael-rougeron.com/

https://twitter.com/goldoraf

Direct download: episode-11_the-bosonic-project.mp3
Category:web-components -- posted at: 7:57am EDT
Comments[0]

10: Mathematics & Dynamic CSS Visualizations

In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don’t Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it’s containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.

 

It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management.


Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc’ give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform’ rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript.

Resources

http://davidwalsh.name

http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24

http://davidwalsh.name/css-supports

http://www.w3.org/TR/css3-values/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

http://css-tricks.com/five-questions-with-david-walsh/

http://codepen.io/collection/wHune/

http://codepen.io/thebabydino/pen/jgtof

http://codepen.io/thebabydino/

http://techblog.rga.com/math-driven-css/

http://davidwalsh.name/css-flip

http://css-tricks.com/a-couple-of-use-cases-for-calc/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://stackoverflow.com/users/1397351/ana

http://davidwalsh.name/svg-animation

http://stackoverflow.com/users/1397351/ana

http://stackoverflow.com/help/badges/17/necromancer?userid=1878132

http://sass-lang.com/

http://www.myth.io/

http://dev.w3.org/csswg/css-extensions/

http://sarasoueidan.com/

http://shoptalkshow.com/episodes/129-sara-soueidan/

http://5by5.tv/webahead/81

http://www.sitepoint.com/css-variables-can-preprocessors-cant/

http://codepen.io/shankarcabus/pen/jcyDA

http://daneden.github.io/animate.css/

http://codepen.io/thebabydino/tag/calc()/

http://figures.spec.whatwg.org/

Direct download: episode-10_mathematics-and-dynamic-css-visualizations.mp3
Category:CSS -- posted at: 9:19am EDT
Comments[1]