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: Set timestamps in code with Performance marks. React also recommends using dev tools to profile components. Send (performance?) statistics to the server when the browser is idle using navigator.sendBeacon. To see …
Author Archives: Tom
Testing contrast colors
A very nice, little tool to check the text contrast colors, created by Lea Verou is Contrast Ratio.
Debouncing in React
If you want to control how often a certain function is being called, you can use debounce ( a small lodash utility). In this small video Elijah Manor explains the use and the caveats of debounce in React components: Debouncing events
Using HOC withRouter with React Router 4
I didn’t know that when a component is not being rendered by your router, it still can use the router properties history, match and location when you wrap it in the withRouter HOC: import { withRouter } from ‘react-router-dom’ … this.props.history.push(‘/some-route’) … export default withRouter(ThisComponent) See: Programmatically navigate with React Router.
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 Optimizing web performance – Dave Olsen A very interesting presentation with lots of …
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. Daniel Espeset had an interesting talk on the frontend architecture at Etsy. He was absolutely …
Let Sublime Text check your JavaScript and JSON files
To show errors in the gutter of Sublime Text 3, do the following: Make sure that Nodejs is installed. Install jshint via Nodejs: npm install -g jshint (or “sudo npm install -g jshint” if that doesn’t work) Install the Sublime Package Manager (in case you haven’t done this before, because Sublime is quite useless without …
Continue reading “Let Sublime Text check your JavaScript and JSON files”
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 …
Continue reading “Timing errors with Angular Protractor e2e 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: …
Continue reading “Run both Grunt and Codeception in a Laravel project”
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 …