Skip to content

Instantly share code, notes, and snippets.

@Rich-Harris
Rich-Harris / service-workers.md
Last active September 11, 2024 07:28
Stuff I wish I'd known sooner about service workers

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.

@paulirish
paulirish / what-forces-layout.md
Last active September 23, 2024 11:37
What forces layout/reflow. The comprehensive list.

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
@ericelliott
ericelliott / essential-javascript-links.md
Last active September 9, 2024 15:49
Essential JavaScript Links
@AliMD
AliMD / console log style trick.js
Created May 9, 2013 23:18
Console log trick !
for(var i=0;i<20;i++) console.log('%c Hello !','padding:3px;color:hsl('+(Math.random()*360)+',50%,50%);font-size:'+(i*3+16)+'px;font-weight:bold');
@AliMD
AliMD / ThemeForest Total Sale Calculator.md
Last active December 14, 2015 15:39
ThemeForest Total Sale and Sale/Month Calculator and Convert to Iranian Rial ;)

ThemeForest Total Sale Calculator

Create a bookmark in your broser and copy pase calc.min.js content in url.
Now you can go to the a themeforest page and click on that bookmark.
You can set window.dollarInToman=5000 in js console.
If you want to make money in themeforest like us cotact me ;)

@greypants
greypants / timeBasedAnimationPattern.js
Created September 17, 2012 18:48
JS: Time-based animation pattern
// Full Blog Post: http://viget.com/extend/time-based-animation
// requestAnimationFrame() polyfill: https://gist.github.com/1579671
window.APP = window.APP || {};
APP.pause = function() {
window.cancelAnimationFrame(APP.core.animationFrame);
};
APP.play = function() {
@paulirish
paulirish / rAF.js
Last active August 19, 2024 08:39
requestAnimationFrame polyfill
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];