Skip to content

Instantly share code, notes, and snippets.

View bittu's full-sized avatar
🎯
Thinking...

Sandeep Kumar Vemula bittu

🎯
Thinking...
4 followers · 0 following
View GitHub Profile
@bittu
bittu / img-to-base64.js
Created July 26, 2016 11:59
Javascript: Image to base64 data URL
function toDataUrl(src, type, callback) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
callback(canvas.toDataURL(type));
@bittu
bittu / img-to-base64_webworkers.js
Last active August 4, 2019 17:14
Javascript Web Workers to process images to base64 data url without canvas using ES2015 Promises
let imgs = ['image1.jpg', 'image2.jpg']
let convertedImages = [];
let worker = new Worker('worker.js');
worker.addEventListener('message', function(event) {
convertedImages = event.data;
})
@bittu
bittu / animate-body-vertical-scroll.js
Last active October 16, 2017 08:47
Scroll document to any vertical position with smooth animation without any library.
const easeInQuad = (t, b, c, d) => {
return c * (t /= d) * t + b;
}
const requestAnimFrame = (() => {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
export const scrollBodyTo = (to, duration = 400, callback) => {
const move = (amount) => {
@bittu
bittu / animate-elem-horizontal-scroll.js
Last active November 17, 2017 10:03
Scroll any element horizontally with smooth animation without any library.
const easeInQuad = (t, b, c, d) => {
return c * (t /= d) * t + b;
}
const requestAnimFrame = (() => {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
export const scrollElementLeftTo = (element, to, duration = 400, callback) => {
const move = (amount) => {
@bittu
bittu / fireEvent.js
Created September 19, 2019 14:24
Programatically fire events on DOM elements
/**
* Function to fire events programatically
* on DOM elements
*
* Example:
* var domEl = document.getElementById('elementId')
* fireEvent(domEl, 'mouseover')
*
* @param {Node} el DOM element
* @param {String} Event name as String
@bittu
bittu / designtips.md
Last active October 1, 2019 15:40
RefactoringUI design tips
@bittu
bittu / areObjectsEqual.js
Created October 4, 2019 16:18
Simple deep object comparision
var equalityCheck = function(a, b) {
if (typeof a === 'object' && typeof b === 'object') {
if (!compareObjects(a, b)) {
return false;
}
} else if (a !== b) {
return false;
}
return true;
};
@bittu
bittu / useForceUpdateHook.js
Created October 22, 2019 09:46
`forceUpdate` hook for React functional components
import { useState, useCallback } from 'react'
export default function useForceUpdate() {
const [, dispatch] = useState({})
return useCallback(() => dispatch({}), [])
}
/**
* Usage:
*
@bittu
bittu / cursor.html
Created October 25, 2019 16:54
Custom mouse move cursor (test link: https://output.jsbin.com/folosavuqa)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Custom mouse move cursor">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom mouse move cursor</title>
<style>
.cursor {
position: absolute;
@bittu
bittu / uniqId.js
Created November 6, 2019 17:33
Simple javascript unique Id generator
const uniqId = () => (Date.now() * Math.random()).toString(36)
// Generates uniqId as
// coyppu5a.lan
// b3v7gp76.lif
// If '.' wants to be removed remove then use replace or Math.ceil