kosamari

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

cem2ran

import React from 'react'
import ReactDOM from 'react-dom'

const Hello = ({name}) => <h1>Hello {name}!</h1>

ReactDOM.render(
  <Hello name={"vjeux"}/>,
  document.body.appendChild(document.createElement("div"))
)

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

airportyh

JSConf Slides, Codes and Notes

These are all the JSConf 2014 slides, codes, and notes I was able to cull together from twitter. Thanks to the speakers who posted them and thanks to @chantastic for posting his wonderful notes.

Modular frontend with NPM - Jake Verbaten (@Raynos)

• tweet
• slides and code

raydog

var E_PREFIX_RATE = 0.25;

// All of our word lists:
var _word_lists = {
  
  verb : [
    "implement", "utilize", "integrate", "streamline", "optimize", "evolve", "transform", "embrace",
    "enable", "orchestrate", "leverage", "reinvent", "aggregate", "architect", "enhance", "incentivize",
    "morph", "empower", "envisioneer", "monetize", "harness", "facilitate", "seize", "disintermediate",

cowboy

// When a jQuery deferred is resolved with a single value, the arguments to
// the .then callback are the same as when .then is called directly on the
// deferred or on $.when(deferred) AND ALSO $.when(deferred, deferred).
var dfd = $.Deferred().resolve([1, 2, 3]);
dfd.then(function(a) {
  console.log('[1a]', a); // [1, 2, 3]
});
$.when(dfd).then(function(a) {
  console.log('[2a]', a); // [1, 2, 3]
});

tbranyen

// Use an AMD package here to gain access to nested internal modules.
require.config({
  packages: [{
    name: "jquery",
    location: "vendor/jquery/src",
    main: "index.js"
  }]
});

// If we are using AMD, we don't care about core.

davearel

define([

  // jquery core is always required
  'jquery/core',

  // jquery utilities
  'jquery/ajax',
  'jquery/data'

], function(jq, ajax, data) {

desandro

Re: On layout & web performance by Kelly Norton

#lazyweb Is there any documentation about which jQuery functions/effects trigger layout? re: kellegous.com/j/2013/01/26/l…

— Dave Rupert (@davatron5000) January 28, 2013

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

getWidthOrHeight() used in jQuery.fn.width/height

clientLeft

• 3180 jQuery.event.mousehooks.filter