Skip to content

Instantly share code, notes, and snippets.

View yongjun21's full-sized avatar

Yong Jun yongjun21

  • Singapore
  • 07:12 (UTC +08:00)
View GitHub Profile
@yongjun21
yongjun21 / lambda-order-statistic-tree.js
Last active February 16, 2019 10:38
Order Statistic Tree implementation with DynamoDB
const AWS = require('aws-sdk')
const db = new AWS.DynamoDB({apiVersion: '2012-08-10', region: 'ap-southeast-1'})
exports.handler = function (event, context, callback) {
const TABLE = (event.stageVariables && event.stageVariables.env === 'production')
? 'find-wally-ranking-tree'
: 'find-wally-ranking-tree-dev'
const q = event.queryStringParameters
const score = +q.score
@yongjun21
yongjun21 / StScrolly.vue
Last active June 10, 2019 14:55
Vue scrolly component
<template>
<div class="st-scrolly" :class="{active}">
<div class="background-container">
<div class="background" :style="stickyStyle">
<slot name="background" v-bind="exposedScope"></slot>
</div>
</div>
<div ref="slides" class="slide-container">
<slot v-bind="exposedScope"></slot>
@yongjun21
yongjun21 / v-animated.js
Last active February 16, 2019 01:58
Directive to animate SVG element in Vue
/*
Example usage:
<rect v-for="bar in bars" :key="bar.key" v-animated="bar.attrs"></rect>
*/
import {TweenMax} from 'gsap/TweenMax'
const currentAnimations = {}
export default {
@yongjun21
yongjun21 / v-animated.js
Last active May 10, 2019 04:48
Directive to animate SVG element in Vue (Final Version)
/*
This version works better than the previous one because it supports animating computed properties.
i.e. attribute can be a function
This is useful for attributes like `transform` or non-linear tween
*/
import TweenLite from 'gsap/TweenLite'
const currentAnimations = {}
@yongjun21
yongjun21 / TransformHelper.js
Last active May 9, 2019 09:11
Helper `transform` object for chaining SVG transformations
const IDENTITY = {
a: 1,
b: 0,
c: 0,
d: 1,
e: 0,
f: 0
}
const epsilon = 0.00001
@yongjun21
yongjun21 / Promise.js
Last active June 28, 2022 11:56
Implement bluebird's Promise.map & Promise.filter with native Promise
Promise.map = function (iterable, mapper, options) {
options = options || {}
let concurrency = options.concurrency || Infinity
let index = 0
const results = []
const iterator = iterable[Symbol.iterator]()
const promises = []
while (concurrency-- > 0) {
@yongjun21
yongjun21 / v-draw.js
Last active May 9, 2019 09:06
Directive to turn any create self-drawing lines in Vue
import TweenLite from 'gsap/TweenLite'
import {_ANIMATE_, currentAnimations, defaultConfig} from '../shared'
export default {
bind (el, binding) {
if (typeof el.getTotalLength !== 'function') {
return console.warn('Using directive `v-draw` on unsupported element')
}
el.classList.add('vg-animated')
@yongjun21
yongjun21 / makeAnimated.js
Last active May 10, 2019 04:49
Turn any Vue component into an animated component
import TweenLite from 'gsap/TweenLite'
import {_ANIMATE_, currentAnimations, defaultConfig} from './shared'
export default function (Target, animatedProps = []) {
if (animatedProps.length === 0) return Target
const props = {
animation: Object
}
animatedProps.forEach(prop => { props[prop] = null })
@yongjun21
yongjun21 / Promise.js
Last active May 17, 2019 07:37
Light weight Promise polyfill
const Promise = window.Promise || (function () {
function PromiseLike (init) {
let state = 'pending'
let resolved, error
const pendingResolve = []
const pendingReject = []
function resolve (value) {
state = 'resolved'
resolved = value
pendingResolve.forEach(function (fn) { fn(value) })
@yongjun21
yongjun21 / ObjectFitVideo.vue
Created May 28, 2019 09:04
Vue component to polyfill object-fit CSS property on videos
<template>
<video class="object-fit-video" v-bind="$attrs" v-on="$listeners" :style="videoStyle">
<slot></slot>
</video>
</template>
<script>
const supportsObjectFit = window.CSS && window.CSS.supports &&
window.CSS.supports('object-fit', 'cover') &&
!/Edge/.test(window.navigator.userAgent)