Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

adamwathan

<?php

Collection::macro('maxBy', function ($callback) {
    $callback = $this->valueRetriever($callback);

    return $this->reduce(function ($result, $item) use ($callback) {
        if ($result === null) {
            return $item;
        }
        return $callback($item) > $callback($result) ? $item : $result;

markerikson

class ParentComponent extends Component {
    constructor() {
        super();
        
        this.state = {
            data : [
                {id : 1, date : "2014-04-18", total : 121.0, status : "Shipped", name : "A", points: 5, percent : 50},
                {id : 2, date : "2014-04-21", total : 121.0, status : "Not Shipped", name : "B", points: 10, percent: 60},
                {id : 3, date : "2014-08-09", total : 121.0, status : "Not Shipped", name : "C", points: 15, percent: 70},
                {id : 4, date : "2014-04-24", total : 121.0, status : "Shipped", name : "D", points: 20, percent : 80},

rssilva

const istanbul = require( 'browserify-istanbul' )

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['browserify', 'jasmine'],
    files: [
      // 'js/**/*.js',
      'js/utils/**/*.js',
      'test/spec/*.js'

croepha

// This will open up a prompt for text to send to a console session on digital ocean
//  Useful for long passwords
(function () {        
        var t = prompt("Enter text to be sent to console, (This wont send the enter keystroke)").split("");
        function f() {
                
                var character = t.shift();
                var i=[];
                var code = character.charCodeAt();
                var needs_shift = "!@#$%^&*()_+{}:\"<>?~|".indexOf(character) !== -1

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

therealklanni

Supercharge your git hooks with gulp

Introducing git-guppy

Automate your developer workflow with git-guppy. git-guppy allows you to add git-hooks to your project repository that are automatically installed when users clone and install your repository, so you won't have to worry about developers skipping essential workflow steps and bypassing your project guidelines.

Getting Started

So let's use a unit test scenario to illustrate an example. We're going to run unit tests before every commit (pre-commit hook) and reject the commit if the tests fail (giving the developer a chance to fix their tests before committing broken code).

rap2hpoutre

# stop script on error signal
set -e

# remove old deployment folders
if [ -d "/home/forge/deploy" ]; then
  rm -R /home/forge/deploy
fi
if [ -d "/home/forge/backup" ]; then
  rm -R /home/forge/backup
fi

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

niallobrien

  function equalizeHeight(watch, target) {
    var maxHeight = -1;
    $(watch).each(function () {
      maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight();
    });
    $(target).each(function () {
      $(this).outerHeight(maxHeight);
    });
  }