developit

An Alias to run Chrome with tracing enabled

For Chrome Canary:

alias hydra='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --no-sandbox --js-flags="--user-data-dir=/tmp/profile --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces"'

For regular ol' Chrome:

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.

cure53

The Scriptless Scriptlet

Or how to execute JavaScript from CSS in MSIE11 without using Scripts

Stop! This text is only interesting for you if you...

• Like popping alerts in weird situations
• Miss CSS expressions as much as we do
• Have an unhealthy obsession for markup porn

Introduction

developit

Simple, unobtrusive add-on to support String refs in Preact, without needing to pull in preact-compat.

Option 1: Add-on

Calling linkRef(componentInstance, refName) returns a "ref proxy" function, which sets this.refs[refName] when called.

import { h, Component } from 'preact';
import linkRef from './linked-ref';

mondain

23.21.150.121:3478
iphone-stun.strato-iphone.de:3478
numb.viagenie.ca:3478
s1.taraba.net:3478
s2.taraba.net:3478
stun.12connect.com:3478
stun.12voip.com:3478
stun.1und1.de:3478
stun.2talk.co.nz:3478
stun.2talk.com:3478

novemberborn

Changes with .dev domains in mind.

Create /etc/pf.anchors/dev, containing:

rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080
rdr pass inet proto tcp from any to any port 443 -> 127.0.0.1 port 8443

novemberborn

Install dnsmasq using Homebrew. Edit the dnsmasq.conf file (Homebrew will tell you where to put it) to contain:

address=/.dev/127.0.0.1
listen-address=127.0.0.1

Then make sure Dnsmasq is running (again follow Homebrew instructions).

Create the /etc/resolver/dev directory (using root) if it doesn't exist yet and create a resolver for .dev:

Ugarz

window.mobileAndTabletcheck = function() {
  var check = false;
  (function(a) {
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) ||
    if (window.mobileAndTabletcheck == true)

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

jlongster

// Have some complicated non-React widgets that manipulate DOM?
// Do they manage a list of DOM elements? Here's how to wrap it
// into a React component so you can "constantly rerender" it.

// A dumb non-react widget that manually manage some DOM node that
// represent a list of items
function NonReactWidget(node) {
  this.node = node;
}