Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
Block or report user

Report or block addyosmani

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@krisselden
krisselden / index.js
Created Apr 3, 2017
Chrome Code Coverage Automation
View index.js
import * as fs from "fs";
import { createSession } from "chrome-debugging-client";
createSession(async (session) => {
let browser = await session.spawnBrowser("canary");
let api = await session.createAPIClient("localhost", browser.remoteDebuggingPort);
let tabs = await api.listTabs();
let tab = tabs[0];
let client = await session.openDebuggingProtocol(tab.webSocketDebuggerUrl);
await client.send("Profiler.enable");
@Rich-Harris
Rich-Harris / module-loading.md
Last active Feb 22, 2019
Dynamic module loading done right
View module-loading.md

Dynamic module loading done right

Follow-up to Top-level await is a footgun – maybe read that first

Here are some things I believe to be true:

  1. Static module syntax is beneficial in lots of ways – code is easier to write (you get better linting etc) and easier to optimise (tree-shaking and other things that are only really possible with static syntax), and most importantly, faster to load (it's trivial for a module loader to load multiple dependencies concurrently when they're declared with a static syntax – not so with imperative statements like require(...) or await import(...)).
  2. App startup time is perhaps when performance is most critical. (You already know this, I don't need to cite the studies.)
  3. If you're in favour of constructs that jeopardise app startup time, you are anti-user. Top-level await is such a construct.
@ebidel
ebidel / polymer-perf-bookmarklet.js
Last active Mar 8, 2019
Polymer performance numbers bookmarklet
View polymer-perf-bookmarklet.js
javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var
@jmiserez
jmiserez / export_google_music.js
Last active Jun 7, 2019
(fixed/updated 2016-05-10) Export your Google Music Library and Playlists (Google Play Music All Access) (see http://webapps.stackexchange.com/questions/50311/print-playlist-from-google-play-music for more)
View export_google_music.js
// Copyright 2016 Jeremie Miserez <jeremie@miserez.org>
//
// MIT License
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF O
@bmeck
bmeck / partial_application.js
Last active Aug 29, 2015
simple tagged template functions
View partial_application.js
let tee = (a) => {console.log(String(a)); return a}
// our applicator
let $_ = (n) => {
let args = new Array(n);
for (let i = 1; i <= n; i++) {
args[i-1] = `$${i}`
}
return (raw, ...values) =>
Function(...args.concat(tee('return ' + raw.reduce(
@sindresorhus
sindresorhus / np.sh
Last active Nov 30, 2018
shell function for publishing node modules with some goodies
View np.sh
# npm publish with goodies
# prerequisite: `npm install -g trash`
# `np` with an optional argument `patch`/`minor`/`major`/`<version>`
# defaults to `patch`
np() {
trash node_modules &>/dev/null;
git pull --rebase &&
npm install &&
npm test &&
npm version ${1:-patch} &&
@peterc
peterc / domains.txt
Created Aug 20, 2013
Most linked domains from 4004 links in JavaScript Weekly from issue #1 through #143
View domains.txt
"github.com" => 551,
"youtube.com" => 84,
"blog.jquery.com" => 60,
"blog.nodejs.org" => 50,
"addyosmani.com" => 47,
"net.tutsplus.com" => 45,
"cooperpress.com" => 36,
"vimeo.com" => 28,
"2ality.com" => 28,
"dailyjs.com" => 25,
@Integralist
Integralist / Description.md
Last active Mar 15, 2018
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.
View Description.md

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@mikemurray
mikemurray / Gruntfile.js
Created Jul 26, 2013
Gruntfile for PHP and LESS with livereloading
View Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
php: {
dev: {
options: {
hostname: '127.0.0.1',
@mklabs
mklabs / Gruntfile.js
Last active Dec 10, 2015
A simple example of using yeoman on an express app
View Gruntfile.js
module.exports = function(grunt) {
function noop() {}
grunt.initConfig({
watch: {
reload: {
files: ['public/**', 'views/**'],
tasks: 'reload'
}
You can’t perform that action at this time.