Skip to content

Instantly share code, notes, and snippets.

Avatar

Parashuram N axemclion

View GitHub Profile
@axemclion
axemclion / linkify.user.js
Created Nov 25, 2008
Linkify - Ubiquity Command
View linkify.user.js
/*
This is a command to linkify the selected text with search results in Google
Particularily useful to insert links while blogging
*/
CmdUtils.CreateCommand(
{
name: ["linkify"],
icon: "http://axemclion.github.com/favicon.ico",
author:
{
@axemclion
axemclion / Performance.md
Last active Mar 7, 2017
Performance Data using browser-perf for old and new versions of http://www.html5rocks.com
View Performance.md
View RN-debug.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@axemclion
axemclion / client.bundle.js
Last active Feb 6, 2017
ReactVR-DBMonster
View client.bundle.js
This file has been truncated, but you can view the full file.
(function(global) {
global.__DEV__=true;
global.__BUNDLE_START_TIME__=Date.now();
})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
(function(global) {
@axemclion
axemclion / IndexedDB.setVersionShim.js
Created May 11, 2012
Shim that converts Chrome's SetVersion to the standard IndexedDB onupgradeneeded events
View IndexedDB.setVersionShim.js
////////////////////////////////////////////////////////////////////////////////////////////////////
var openReqShim = function(dbName, version){
var me = this;
var IDBRequest = function(){
this.onsuccess = this.onerror = this.onblocked = this.onupgradeneeded = null;
};
function copyReq(req){
req = req || dbOpenReq;
@axemclion
axemclion / react-event-mirror.js
Created Aug 29, 2016
ReactNative EventMirroring
View react-event-mirror.js
const EventPluginRegistry = require('react/lib/EventPluginRegistry');
import ReactNativeEventEmitter from 'react/lib/ReactNativeEventEmitter';
export default class Plugin {
extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
if (!nativeEvent.isMirrored) {
// TODO send this to a socket server so that it is propogated to other servers
console.log('MirrorEventPlugin:', topLevelType, targetInst, nativeEvent, nativeEventTarget);
nativeEvent.isMirrored = true;
@axemclion
axemclion / ABSTRACT.md
Created Mar 12, 2016
Rise of the Web Workers
View ABSTRACT.md

Modern web applications are awesome. And complicated. The Javascript libraries that power them today do a lot of work to abstract out the hard parts. Whether using constructs like Virtual DOM, or fancy change detection algorithms, the amount of work that the Javascript library does is only increasing.

Unfortunately, all this work now competes for the same resources that the browser needs, to do things like render a page, or apply styles. In many cases, this makes the browser slow, preventing the web application from attaining its full, smooth experience.

Web workers have been in the browser for a while, but they have mostly been used for engaging demos like adding mustaches in a cat video :)

In this talk, we will explore how mainstream Javascript libraries like React or Angular use Web Workers to get great performance. We will look at quantitative numbers from hundreds of test runs that conclusively show how Web Workers can make apps faster. Finally, we will also look at practical examples to convert exi

@axemclion
axemclion / React-Worker-Latency.js
Last active Feb 11, 2016
Latency Performance calculations for React-Worker-DOM
View React-Worker-Latency.js
var start, results = [];
var ITERATIONS = 100;
var addButton = document.querySelectorAll('.btn.btn-primary')[0];
var addItem = function() {
if (results.length < ITERATIONS) {
start = performance.now();
addButton.click();
} else {
console.log('Testing done, average is %s milliseconds, all data is', results.reduce(function(a, b) {
return a + b;
@axemclion
axemclion / index.android.js
Last active Jan 20, 2016
Cordova Plugins in React native
View index.android.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules,
TouchableHighlight,
@axemclion
axemclion / article.md
Last active Jan 4, 2016
Article for HTML5rocks.com
View article.md

Automating Web Rendering Performance Measurement

Ensuring that your web pages are delivered to the user as quickly as possible, results in a great user experience. However, users spend more time interacting with the page than waiting for it to download. This makes the smoothness and responsiveness of the site even more critical. Janky page scrolls, disjointed animations or delayed visual cues in a page are just as bad as a site that takes time to load.

Most modern web browsers have tools that can help determine the various performance bottlenecks during typical user interactions. Excellent tutorials have also been written about performance workflows. Despite this, rapid development and deploy cycles make it hard to implement regular performance audits. Tools like [PageSpeed Insights](http://updates.html5rocks.com/201