Braindump Fronteers 2014 – Day 2

Nicholas Gallagher – Making Twitter UI infrastructure

  • Consistency scales
  • Modules are working units and contain serverside code too
  • OWNERS are maintained in an OWNERS file and own the module. They sign off (review) changes.
  • Webdriver has an iOS driver
  • Webpack module bundler

IMG_3680

Optimizing web performance – Dave Olsen

A very interesting presentation with lots of practical information on web performance.IMG_3682

Animating SVGs with CSS and SMIL – Sara Soueidan

External stylesheet can be linked to in xml. This presentation was full of practical advices.

This is the web platform – Paul Kinlan

Appcache is dood -> service worker
Service workers can make browsers superflous in the end. Kinlan calls this The Headless web.

Learn by heart: https://developers.google.com/web/fundamentals/

Using agile to bake in accessibility – Meri Williams

  • Offline and accessibility requirements should be stated in DoD

Choose your own JS adventure – Kyle Simpson

  • Sweetjs.org macros in JS
  • Tooling: see links in presentation

Scaling up and down: evolving your testing strategies – Pete Hunt

  • Unit testing in prototype phase is too eraly and causes unnecessary overhead.
  • Integration tests are a burden when a project is scaled up.
  • Test image diffs.
  • TDD does not work well when the UI is not definite.

Dream big. Think small – Petro Salema

  • Hit statistics of RAF planes revealed the counter-intuitive world.
  • M-pesa: money transfer with mobile phone
  • Beeping: signaling with mobile without answering a call.

Braindump Fronteers 2014 – Day 1

Getting nowhere with CSS “best practices”

Heydon Pickering thinks we could almost do without CSS-classes for styling. If we more often would use semantic HTML and Aria roles, a lot of classes become obsolete.

See also: WAI Aria authoring practices.

IMG_3668

Daniel Espeset had an interesting talk on the frontend architecture at Etsy. He was absolutely right when he said that we need a strategy on the disposability of unused code. How can we safely throw code away?

IMG_3671

Nathan Ford recommended the book Where do good ideas come from by Stephen Johnson. I found this interesting TED-talk by Johnson:

Arnout Kazemier did extensive research on the real-time web. If I ever need to implement web sockets I’ll have to watch his talk again, because it’s an enormous struggle with a shitload of bugs and issues. What I remembered was that in the end it’s easier to implement Server Sent Events than to use Websockets.

The game presentations were awesome, especially the one by Dominic Szablewski:

IMG_3677

Also I definitely need to check out the one-game-per-week challenge on lessmilk.com!

Shwetank Dixit encouraged me to explore navigator.getUserMedia(). So much of it can already used today!

Speech Sphinx: voice recognition tool.

Excellent talk by Alex Feyerke. His concept of offline first is challenging, but it looks like a necessity to me. Online photo editing tool Polarr is a good example of how to do it right.

Let Sublime Text check your JavaScript and JSON files

To show errors in the gutter of Sublime Text 3, do the following:

  1. Make sure that Nodejs is installed.
  2. Install jshint via Nodejs:
    npm install -g jshint

    (or “sudo npm install -g jshint” if that doesn’t work)

  3. Install the Sublime Package Manager (in case you haven’t done this before, because Sublime is quite useless without it).
  4. Install “SublimeLinter” via the Sublime Package Manager.
  5. Install the Sublimelinter JSHint plugin via the Sublime Package Manager. Sublimelinter reads the .jshintrc settings of your project and falls back to the default settings of the plugin. The plugin settings can be overridden.
  6. Install the Sublimelinter JSON plugin via the Sublime Package Manager.

Sublimelinter shows JavaScript errors in the gutter of Sublime Text. If you have some kind of error please refer to the troubleshooting documentation.

Timing errors with Angular Protractor e2e testing

I had this nasty error in my Protractor tests:

Error while waiting for Protractor to sync with the page: {}

My tests were kicked off too early and didn’t seem to wait for the angular library to load.

I added the following solution to my specs, but was far from confident, because other timing issues arised:

// Don't do this!
browser.ignoreSynchronization = true;

With help of Angular-contributor Shyam Seshadri I found out that the issue had it’s origin in my protractor config file!

By default Protractor assumes that the ng-app declaration sits on the BODY-element. However, in my case it was defined on a DIV lower in the DOM. I had to assign the selector of that element to the rootElement property:

  // rootElement: 'body', // default, but does not work in my case
  rootElement: '.my-app', // or whatever selector the ng-app element has

Corresponding HTML:

<div ng-app="myApp" class="my-app">

Happy testing!

Run both Grunt and Codeception in a Laravel project

In my Laravel project I use Grunt for testing and building client-side code and Codeception to run my acceptance tests. It might be possible to trigger Grunt from Codeception, but I don’t know how. However, to run Codeception from Grunt you should just install the grunt-shell plugin and add the following lines to your Gruntfile.js:

shell: {
  codeCeption: {
    options: {
      stdout: true
    },
    command: 'php codecept.phar run'
  }
 }
 

See also:

Don’t FTP the Git Shit

I didn’t even realize I was pushing all my (uncountable) git directories when FTP’ing. But Filezilla appears not to have a default filter for git directories. Luckily it’s easy to create one:

In Filezilla 3.5.3 go to View > Filename filters… and add a filter with the following settings:

filezilla-filters

Done, happy FTP’ing!

A front-end build with Grunt 0.4

Update February 22, 2013:
Grunt 0.4 is officially released. Please take that into account when following the instructions below.

grunt-logoAddy Osmani’s talk on the developer toolbelt at Fronteers 2012 inspired me to have a closer look at Grunt. Especially for front-end or JavaScript driven projects, Grunt looks like a promising alternative to the Ant or Maven build systems.

Note: this is not a tutorial on Grunt or build systems in general. If you’re new to building read the Grunt introduction on Nettuts. This article aims to overcome the pitfalls when setting up a build with Grunt 0.4. Grunt version 0.4 differs a lot from 0.3, but unfortunately both the Grunt documentation as well as a lot of plugin documentation have shortcomings regarding which Grunt version is supported.

Continue reading