hrishikeshs

/*
This function takes a valid json object and produces html so that a browser can render it pretty-ly.
example: if it is passed: {"hello":"world","foo":"bar"}, it will be displayed as:
{
  
  hello: "world",
  foo: "bar"
}
Usage: do '<pre>'  + prettyPrint(json)  + '</pre>' in your JavaScript and insert the resulting string into the dom.
*/

hrishikeshs

function deepEquals(x, y) {
  if (x === y)               return true;
  if (x !== x)               return y !== y;
  if (typeof x !== typeof y) return false;
  if (typeof x !== 'object') return false;

  var typeX = getType(x);
  var typeY = getType(y);

  if (typeX !== typeY)       return false;

hrishikeshs

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

hrishikeshs

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

hrishikeshs

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.

hrishikeshs

javascript:(function(){  var videos = document.getElementsByTagName('video');  var iframes = document.querySelectorAll('iframe');  for(var j = 0; j < iframes.length; j++) {     iframes[j].src = null;  }  for (var i = 0; i < videos.length; i++) {  videos[i].src = null;  videos[i].setAttribute('style', 'display:none !important');  }}())

hrishikeshs

function checkEquality(arg1, arg2) {
    if(arg1 === arg2) {    
        return true;
    } else if(Number.isNaN(arg1) && Number.isNaN(arg2)) {     
         return true;    
    } else if(typeof(arg1) === 'object' && typeof(arg2) === 'object') {
            if(arg1.constructor.name === 'RegExp' && arg2.constructor.name === 'RegExp') {  
                   if(arg1.toString() !== arg2.toString()) {
                       return false;
                   }

hrishikeshs

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Component.extend({
 channels: ['california', 'bangalore'],
  
  exampleCP: computed('record.propertyThatDoesntExistYet', function() {
    return this.record.propertyThatDoesntExistYet ? 'foo' : 'bar';
  }),
  

hrishikeshs

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Component.extend({
  accounts: null,
  searchString: '',
  sortOrder: true,
  status: 'seen',
  filteredAccounts: computed('searchString', 'sortOrder', 'status', function() {
    const sortOrder = this.get('sortOrder');

hrishikeshs

import Ember from 'ember';
import { task } from 'ember-concurrency';

export default Ember.Component.extend({

  rejectPromise() {
    const promise = Promise.resolve('resolved');
    return promise.then(Promise.resolve.bind(Promise), err => {
       console.log("Error!!! " + err);
       throw err;