Skip to content

Instantly share code, notes, and snippets.

View navdeepsingh's full-sized avatar
🎯
Focusing

Navdeep Singh navdeepsingh

🎯
Focusing
49 followers · 88 following
View GitHub Profile
@navdeepsingh
navdeepsingh / refactored-gpix.js
Created July 24, 2018 04:40 — forked from rayinla/refactored-gpix.js
let $photoInput = document.getElementById("input");
let image = new Image();
let $editor = document.getElementById("editor");
let $editorCtx = $editor.getContext("2d");
function opacitor(op) {
let imgData = $editorCtx.getImageData(0, 0, $editor.width, $editor.height);
for (let x = 0; x < image.width; x++) {
for (let y = 0; y < image.height; y++) {
let index = (x + y * image.width) * 4;
@navdeepsingh
navdeepsingh / trim-cache.js
Created June 25, 2018 10:21
trim-cache.js
function trimCache(cacheName, maxItems) {
cacheName.open( cache => {
cache.keys()
.then( items => {
if (items.length > maxItems) {
cache.delete(items[0])
.then(
trimCache(cacheName, maxItems)
); // end delete then
} // end if
@navdeepsingh
navdeepsingh / serviceworker-v1.js
Last active June 21, 2018 08:17
Fetch Event for HTML/ Images/ all files
/*
1) When the user requests an HTML file,
a) fetch that page from the network;
i) and put a copy in the cache;
b) otherwise look for a cached version of the page;
c) otherwise show the fallback page.
2) When the user requests an image,
a) look for a cached version of the image;
i) fetch a fresh version from the network
(1) and update the cache;
@navdeepsingh
navdeepsingh / ajax.js
Created June 5, 2018 08:19
XMLHttpRequest aka XHR
// Creating a XHR request
// Create new XHR Object
const xhrObject = new XMLHttpRequest();
xhrObject.open('GET', 'https://api.unsplash.com/search/photos/?page=1&query=nature');
xhrObject.setRequestHeader('Authorization', 'Client-ID xxxxx');
// Handle resposne
xhrObject.onload(handleResponse);
@navdeepsingh
navdeepsingh / serviceworker.js
Last active May 11, 2018 05:27
Service Worker Script
// At index.html
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js')
}
// Main file serviceworker.js
const staticCacheName = 'cacheFile-v.0';
self.addEventListener('install', installEvent => {
installEvent.waitUntil(
caches.open(staticCacheName)
@navdeepsingh
navdeepsingh / modal.js
Last active April 19, 2022 11:50
Simple Modal JS
// Will hold previously focused element
var focusedElementBeforeModal;
// Find the modal and its overlay
var modal = document.querySelector('.modal');
var modalOverlay = document.querySelector('.modal-overlay');
var modalToggle = document.querySelector('.modal-toggle');
modalToggle.addEventListener('click', openModal);
@navdeepsingh
navdeepsingh / index.html
Last active December 6, 2017 07:49
HTML5 PWA Template Ref: https://paymentrequest.show/
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A site that demonstrates the Payment Request API.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Payment Request API | Demo &amp; Info</title>
<link rel="manifest" href="/manifest.json">
@navdeepsingh
navdeepsingh / countries.json
Last active August 22, 2017 05:27
Countries Data
[
{
"name": "Afghanistan",
"code": "AF"
},
{
"name": "Åland Islands",
"code": "AX"
},
{
@navdeepsingh
navdeepsingh / d3-LineChart.js
Last active March 24, 2017 12:24
D3-LineChart
var w = 350;
var h = 200;
var monthlySales = [
{ 'month': 10, 'sales': 12 },
{ 'month': 20, 'sales': 8 },
{ 'month': 30, 'sales': 85 },
{ 'month': 40, 'sales': 10 },
{ 'month': 50, 'sales': 23 },
{ 'month': 60, 'sales': 85 },
@navdeepsingh
navdeepsingh / d3-barChart.js
Last active March 24, 2017 10:10
D3 : Basic start with Bar Chart
var w = 300;
var h = 250;
var padding = 5;
var dataset = [5, 10, 15, 20, 25,
11, 45, 21, 3, 21];
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
function colorPicker(v) {