Dev tools workshop – additional notes

So today I attended Umar Hansa’s workshop on Chrome dev tools. Although his hand-outs contain lots of information, I made the following extra notes:

 

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:

Looking into Git Stash entries

(For git stash basics have a look at Using the Stash.)

It’s possible to do a diff inside a stash entry:

$ git stash show stash@{0} -u

Shorthand for the latest stashed entry:

$ git stash show -u

To get a list of filenames in a stash entry:

$ git stash show stash@{0} --name-only

Get only a certain file from stash:

$ git checkout stash@{0} --

Rename file in stash entry:

$ git show stash@{0}: >