Peter Gfader's brain noise
Do you know where to get inspiration as a frontend web developer?

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

http://codepen.io/

On Hugo Giraudel’s blog you can find a comparison to other CSS Playgrounds like JsFiddle.
http://hugogiraudel.com/2012/11/19/css-playgrounds/ 

Do you use AngularJS directives?

From Joel Hooks 1 year experience report:
http://joelhooks.com/blog/2013/05/22/lessons-learned-kicking-off-an-angularjs-project/

  • Directives are the killer feature of AngularJS
  • put some serious thought into organizing Directives as visual components and behaviors

My new rule is that if you hear yourself humming the ABCs in your mind in order to find a specific file, your folders probably have too many files.

Nice rule!

Documentation on directives in AngularJS

Directives are a way to teach HTML new tricks.
During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

http://docs.angularjs.org/guide/directive

Angular: nice and clean readable source code
Read it now!
https://github.com/angular/angular.js/tree/master/src

use coffeescript for any non-trivial amounts of javascript via @martinfowler

I don’t have any experience with CoffeeScript, but from just looking at it and reading blog posts I like the syntax.

My concern: “Debugging might be hard” is resolved by Martin

If I need to debug in that code, I can easily see how it matches up to the source CoffeeScript.

Full article
http://martinfowler.com/bliki/TransparentCompilation.html

Client-Side MVC Roundup

Hei Internetz, I was away a couple of weeks and you guys created even more JS frameworks. #help

Nice recap of the major distinctions of JS MVC frameworks like angular, backbone, sammy, batman, knockout, … 
using the list from http://todomvc.com/

http://paulhammant.com/2013/01/18/client-side-mvc-roundup/

JavaScript editing in the browser - Marijn Haverbeke @marijnjh CodeMirror #gotoAar

Marijn showed how he “extended” a HTML textarea to a full functional editor

Nice features of codemirror like:
-Integration of JSLint
-syntax highlighting
-line numbers
-Search and Replace

How was it built:
-The cursor is a lie
separate div
-Scrollbars not real either
only the visible part is in the DOM
-dont be afraid of big files
B-Trees to the rescue

nice
“If you lie to the user once you need to lie more and more”

More features
-Spotting local variables in JavaScript via Syntax Highlighting
-Mode composition: Multiple syntax in 1 editor (HTML, CSS, JavaScript)

Future:
-Mobile support

Amazed how much work happens behind the scene, by something that seems so
simple.

Links
http://codemirror.net/
https://github.com/ajaxorg/ace
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

JavaScript SmackDown: AngularJS, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine

Nice ThroneJS conference report. 

  • Agreement: Data binding is good
    All except Backbone and Spine have a built-in notion of declarative data binding in their views
  • IE6 is dead
  • Agreement: Model-View-* all the way

Great to get an overview of the different frameworks!

Rich JavaScript Applications – the Seven Frameworks
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

5 little JavaScript performance tips
  • Profile your JavaScript
  • Access the DOM once and in one big hit
  • Use Local versus Global variables
  • Avoid string.join
  • Access arrays objects once, if used multiple times

All the tips here

http://www.netmagazine.com/tutorials/optimise-your-javascript

Do you know how to find out about JavaScript performance?

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Great idea!
http://jsperf.com/

Do you know which MV* Javascript framework to use and choose?

TodoMVC — a project which offers the same Todo application implemented in most of the popular JavaScript MV* frameworks of today — think of it as speed dating for frameworks.

Solutions look and feel the same, have a common feature set, and make it easy for us to compare the syntax and structure of different frameworks, so we can select the one we feel the most comfortable with or at least, narrow down our choices.

Great stuff!!
http://todomvc.com/

And here is the intro article from Addy Osmani
Journey Through The JavaScript MVC Jungle
http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
  

10 things you didn’t know JavaScript could do
#webmonday Native vs. Hybrid vs. Web Apps

Recap talks @ HP Zürich #MobileMondays and #WebMondays night

# Markus Leutwyler, HP: Web vs Native Apps

History of the web and mobile is repeating

  • 10 years ago: Web: hobby programmers make web 
  • Now: Apps: lots of hobbists make apps?

Reasons for native:

  • Performance
  • Offline mode
  • Findability (Discoverability)
    AppStore is less cluttered than Google?
  • Device integration
  • Monetization
  • Experience

Reasons for hybrid apps:

  • Code reuse
  • A common set of technologies
  • Low barrier of entry
  • Cross platform reach
  • Familiar tools and techniques
  • Not tied to an vendor market place (AppStore,…)
  • Start an app from a URL (potentially)

Hybrid options

  • PhoneGap: Package website as an application
  • MonoTouch

The OS is the browser!?
ChromeOS, HP webOS, boot2Gecko (FireFox)



# Colin Frei, Liip AG

works at LIIP, php in the backend, HTML+CSS 

NIWEA.ch   native interoperable web application

Other containers for hybrid apps

  • GameCloser
  • Cocoon JS
  • PhoneGap

A container gives you access (JavaScript) to some device API

PhoneGap is for: iOS, Android, WinPhone, BlackBerry (RIM)

Advantages of Hybrid

  • Knowledge: lots of devs out there, heaps of knowledge
  • 1 team that works on 1 code base
    Instead of 1 guy that knows the iPhone app
  • Portability: code can be easilty ported to different platforms
  • Reusability: code can be reused 
  • COST?

Disadvantages

  • Not everything is supported
    You have device specific code
  • Performance

PhoneGap to wrap HTML+JS up and submit it to the AppStore

  • In-App purchases: PhoneGap has a feature for that
  • Notification service by PhoneGap


Good experience overall from Colin

  • Submitting to Apple takes time to get used to
  • Not many bugs.. released months ago
  • HTML5: more and more functionality is going into the device




# Vikram Kriplaney: Founder of mobile @ local.ch

Reasons for going native

  • Go beyond the standard usage
    Use the whole native possibilities
  • Be aware of Leaky abstractions:
    "All non-trivial abstractions, to some degree, are leaky."(Joel Spolsky)

Goal: The more audience the more effort to put in

How do you test a mobile application?

  • Manual? How can you automatically test on every change?
    Automation and Manual and Internal Dogfooding 

Do you measure feature usage per platform?

  • Yes per platfrom with Google Analytics etc…


My 2c to this discussion

#1 Is it better to have a Porsche UI and a VW engine
than a VW UI and a Porsche engine.
Of course you want a Porsche UI and a Porsche engine, but

#2 The first impression is important! 
You only get one shot. Or maybe 2

#3 A potential approach

  1. Start with a hybrid 
    Leverage 1 of those great frameworks to get something up and running quickly
  2. Measure (usage, performance, ..)
  3. If you need native (see measurements), go native
  4. Rinse and repeat


Great explanation about hoisting and how you should code for it: One “var” at the top of scope.

Awesome that JSLint can spot this.

Nice article from Maurice de Beijer that describes the evolution of JavaScript client side templating and shows knockout.js

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are

Websocket support is still not fully supported :-(