Skip to content

Instantly share code, notes, and snippets.

Avatar

Gokulakrishnan Kalaikovan gokulkrishh

View GitHub Profile
View how to screencapture and make animated gifs or whathaveyou.md

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

View history_navigation.js
/*
* Lets you use your browser's back/forward buttons for in-page navigation by
* adding custom 'next' and 'previous' events to the window object.
*
* Copyright (c) 2011 Tobias Schneider <schneider@jancona.com>
* This script is freely distributable under the terms of the MIT license.
*
* Example:
*
* window.addEventListener('next', function(){
@gokulkrishh
gokulkrishh / objectObserve.js
Created Nov 3, 2015
Use Object.observe with polyfill
View objectObserve.js
/*
Example for Object.observe
Polyfill: https://github.com/MaxArt2501/object-observe
Detects: Add, Update, Delete properties
Supported Browser: http://caniuse.com/object-observe
@gokulkrishh
gokulkrishh / Atom Editor Config
Last active Nov 18, 2015
Atom editor config
View Atom Editor Config
3dd2222c-c7ea-ebf2-c4fb-86c36ffbe4ed
"*":
"exception-reporting":
userId: "3dd2222c-c7ea-ebf2-c4fb-86c36ffbe4ed"
welcome:
showOnStartup: false
core:
themes: [
@gokulkrishh
gokulkrishh / sublime user.json
Last active Nov 19, 2015
Sublime user configuration for dotfile
View sublime user.json
{
"auto_complete": true,
"bold_folder_labels": true,
"caret_extra_width": 2,
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
@gokulkrishh
gokulkrishh / Atom Config.cson
Created Nov 19, 2015
Atom Editor configuration
View Atom Config.cson
"*":
welcome:
showOnStartup: false
core:
themes: [
"atom-dark-ui"
"one-dark-syntax"
]
editor:
invisibles: {}
@gokulkrishh
gokulkrishh / Align an element horizontally & vertically center in css.markdown
Created Jan 7, 2016
Align an element horizontally & vertically center in css
View Align an element horizontally & vertically center in css.markdown
@gokulkrishh
gokulkrishh / sw.js
Last active Feb 11, 2016
Service worker installation steps
View sw.js
//Cache polyfil to support cacheAPI in browsers
importScripts('/cache-polyfill.js');
//Cache name
var staticCache = "my-static-files";
//Files to cache
var filesToCache = [
"/",
"images/logo.jpg",
@gokulkrishh
gokulkrishh / sw.js
Last active Feb 11, 2016
Service worker activate event
View sw.js
//Activate event will be triggered once after registering, also used to clean up caches
self.addEventListener("activate", function (event) {
var cacheWhitelist = ['my-static-files'];
event.waitUntil(
caches.keys()
.then(function (allCaches) {
//Check all caches and delete old caches here
allCaches.map(function (cacheName) {