Skip to content

Instantly share code, notes, and snippets.

Avatar
🐳

JiHan Kim laziel

🐳
View GitHub Profile
@laziel
laziel / image-orientation.css
Last active Jun 30, 2020
Get image orientation from EXIF header
View image-orientation.css
/*
JPEG orientation transform
See https://magnushoff.com/jpeg-orientation.html
*/
img[data-orientation="2"] {
transform: rotateY(180deg);
}
img[data-orientation="3"] {
transform: rotate(180deg);
@laziel
laziel / color-comparison.js
Last active Oct 11, 2019
Color comparison function for RGB (isLighterThan, isDarkerThan)
View color-comparison.js
/** Extracted from https://gist.github.com/alexandrudima/bda598fbed179a581986b634cc94ab8d */
/**
* Returns the number in the set [0, 1].
* - O => Darkest Black.
* - 1 => Lightest white.
* @see http://www.w3.org/TR/WCAG20/#relativeluminancedef
*
* @param {Object} color
* @param {Number} color.r
@laziel
laziel / exif-orientation.js
Created May 16, 2019
EXIF image orientation
View exif-orientation.js
/**
* Get image orientation from EXIF header
*
* Referenced:
* - https://gist.github.com/nezed/d536ccdace84c6f2ef13da47a8fd6bdb
* - https://gist.github.com/wonnage/9d2e73d9228f5a0b300d75babe2c3796
* - https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-meta.js
*
* @param {String} imageUrl
* @return {Promise}
@laziel
laziel / youtube.js
Created Nov 17, 2018 — forked from max-te/youtube.js
Download Youtube-Video in node.js
View youtube.js
var http = require('http')
var fs = require('fs')
var argv = require('optimist').argv
var rxVideoID = /v=([\]\[!"#$%'()*+,.\/:;<=>?@\^_`{|}~-\w]*)/
var link = argv._.toString()
var videoID = link.match(rxVideoID)[1]
http.get("http://www.youtube.com/get_video_info?video_id="+videoID, function(res) {
var chunks = []
@laziel
laziel / draggable.js
Created Jul 3, 2018
Pure JavaScript Draggable
View draggable.js
(function () {
const wrapper = document.querySelector(`#test`);
const pos = {};
const moveDrag = evt => {
// const { scrollLeft, scrollTop } = document.scrollingElement;
const o = {
top: wrapper.offsetTop - (pos.clientY - evt.clientY),
left: wrapper.offsetLeft - (pos.clientX - evt.clientX)
@laziel
laziel / water_ripple_canvas.js
Created May 3, 2017 — forked from StuPig/water_ripple_canvas.js
Use JavaScript and canvas to create water ripple effect
View water_ripple_canvas.js
/*
* Water Canvas by Almer Thie (http://code.almeros.com).
* Description: A realtime water ripple effect on an HTML5 canvas.
* Copyright 2010 Almer Thie. All rights reserved.
*
* Example: http://code.almeros.com/code-examples/water-effect-canvas/
* Tutorial: http://code.almeros.com/water-ripple-canvas-and-javascript
*/
@laziel
laziel / 094607.md
Created Apr 6, 2016 — forked from marocchino/094607.md
ES6시대의 JavaScript
View 094607.md

ES6시대의 JavaScript

안녕하세요. 사원사업부의 마루야마@h13i32maru입니다. 최근의 Web 프론트엔드의 변화는 매우 격렬해서, 조금 눈을 땐 사이에 점점 새로운 것이 나오고 있더라구요. 그런 격렬한 변화중 하나가 ES6이라는 차세대 JavaScript의 사양입니다. 이 ES6는 현재 재정중으로 집필시점에서는 Draft Rev31이 공개되어있습니다.

JavaScript는 ECMAScript(ECMA262)라는 사양을 기반으로 구현되어있습니다. 현재 모던한 Web 브라우저는 ECMAScript 5.1th Edition을 기반으로 한 JavaScript실행 엔진을 탑재하고 있습니다. 그리고 다음 버전인 ECMAScript 6th Edition이 현재 재정중으로, 약칭으로 ES6이라는 명칭이 사용되고 있습니다.

View login-check.js
(function(){
var networks = [{
url: "https://squareup.com/login?return_to=%2Ffavicon.ico",
name: "Square"
}, {
url: "https://www.instagram.com/accounts/login/?next=%2Ffavicon.ico",
name: "Instagram"
}, {
url: "https://twitter.com/login?redirect_after_login=%2Ffavicon.ico",
name: "Twitter"
View leftpad.js
module.exports = leftpad;
function leftpad (str, len, ch) {
str = String(str);
var i = -1;
if (!ch && ch !== 0)
ch = ' ';
len = len - str.length;
while (++i < len) {
str = ch + str;
}
View github-corner.html
<a href="http://your-url" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9
You can’t perform that action at this time.