CollegeStash

September 10, 2019September 10, 2019

CSS animation – Card Slide-In

Using CSS @keyframes you can animate cards from left to right in the following way. This works on almost all major modern browsers.

Demo

Card 1

Card 2

<style>

.card {

height: 100px;

width: 250px;

background: white;

border-radius: 8px;

border: 1px solid #999;

box-shadow: 5px 5px 5px #999;

animation: slidein 5s;

animation-fill-mode: forwards;

margin-right: 16px;

transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

}

@keyframes slidein {

from {

transform: translateX(-100%);

}

to {

transform: translateX(100%);

}

</style>

</div>

</div>

</div>

August 3, 2019August 3, 2019

Currying

Breaking down a function into a series of function calls with an argument. The following is an Javascript ES6 example of a sum function that returns the sum of the calls until no argument is passed.

Code

const add = (num) => {

if (!num)

return 0;

let sum = 0 + num;

const ret = (x) => {

if (!x) {

return sum;

} else {

sum += x;

return ret;

}

};

return ret;

};

alert(add(5)(6)(7)());

Demo

July 31, 2019July 31, 2019

Copy to clipboard ES6 + Deselect

Code

const copy = () => {

const elem = document.getElementById('demo');

elem.select();

document.execCommand('copy');

elem.blur();

}

</script>

Copy

</button>

Demo

July 31, 2019July 31, 2019

Throttling (ES6)

Sometimes, we need to limit the number of method calls based on time. A throttling method is the way to go.

Code

const throttle = (fn, delay) => {

let timeout = false;

return (...rest) => {

if (!timeout) {

timeout = true;

fn.apply(this, rest);

setTimeout(() => {

timeout = false;

}, delay);

}

const logger = (inp) => console.log(inp);

const throttledMethod = throttle(logger, 1000);

const button = document.createElement('button');

document.body.appendChild(button);

button.addEventListener('click', () => throttledMethod('Hello World!'));

Demo

May 27, 2019June 7, 2019

Range Sum Query 2D Mutable – Java

We can use a 2D Binary Indexed Tree (Fenwick Tree) to efficiently calculate sum in a rectangular area in a mutable 2D matrix.

public void rangeSum(int[][] inp) {

int[][] bit = new int[inp.length + 1][inp[0].length + 1];

for (int i = 0; i < inp.length; i++)

for (int j = 0; j < inp[0].length; j++)

update(i, j, inp[i][j], bit);

}

public void update(int i, int j, val, int[][] bit) {

int diff = val - inp[i][j];

for (int row = i + 1; row < inp.length; row += row & (-row))

for (int col = j + 1; col < inp[0].length; col += col & (-col))

bit[row][col] += diff;

inp[i][j] = val;

}

public int calcSum(int i, int j) {

int sum = 0;

for (int row = i + 1; row > 0; row -= row & (-row))

for (int col = j + 1; col > 0; col -= col & (-col))

sum += bit[row][col];

return sum;

}

public int getSum(int row1, int col1, int row2, int col2) {

return calcSum(row2, col2) - calcSum(row1 - 1, col2) - calcSum(row2, col1 - 1) + calcSum(row1 - 1, col1 - 1);

}