Skip to content

Instantly share code, notes, and snippets.

View d4rekanguok's full-sized avatar
💭
I may be slow to respond.

Derek Nguyen d4rekanguok

💭
I may be slow to respond.
  • Pen & Pillow
  • Lisbon, PT
View GitHub Profile

Keybase proof

I hereby claim:

  • I am d4rekanguok on github.
  • I am d4rek (https://keybase.io/d4rek) on keybase.
  • I have a public key whose fingerprint is 1973 C35F 82EF DC52 898E 644C 5742 2A02 DDA9 A54B

To claim this, I am signing this object:

#!/bin/bash
# sh /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh
# npm install -g svgo s2v
if [ -z "$1" ]; then
SOURCEDIR=.
else
SOURCEDIR=$1
fi
Layer::chain = (options...) ->
layer = @
options.reduce (promise, option) ->
promise.then () ->
new Promise (resolve) ->
layer.animate option
layer.once Events.AnimationEnd, () ->
resolve()
, Promise.resolve()
@d4rekanguok
d4rekanguok / sortLayerOrderByPosition.js
Created October 11, 2018 04:55
sketch plugin layer sort
var sketch = require('sketch/dom');
var document = sketch.getSelectedDocument();
var selection = document.selectedLayers.layers.slice();
selection
.sort((l1, l2) => {
var l1x = l1.frame.x,
l1y = l1.frame.y,
l2x = l2.frame.x,
l2y = l2.frame.y;
@d4rekanguok
d4rekanguok / scaleIndividually.js
Created October 27, 2018 08:55
Sketch script to scale layers/group individually.
const sketch = require('sketch/dom');
const UI = require('sketch/ui');
const document = sketch.getSelectedDocument();
const selection = document.selectedLayers.layers.slice();
const resize = (layer, options = {}) => {
const { scaleX, scaleY, originX, originY } = Object.assign({
scaleX: 1,
scaleY: 1,
originX: 0,
const Button = styled<IStyle, 'button'>('button')`
display: inline-block;
font-weight: bold;
font-weight: ${getFontWeightFromSize};
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
vertical-align: middle;
padding: ${props => (props.icon ? '0.5em' : '0.5em 1em')};
line-height: ${props => (props.icon ? '0' : '1')};
background: ${props => (props.outline ? 'transparent' : getColor('main'))};
@d4rekanguok
d4rekanguok / Button-reorganized.tsx
Last active January 9, 2019 03:11
Take advantage of CSS's cascading to write manageable css-in-js
const Button = styled<IStyle, 'button'>('button')`
display: inline-block;
vertical-align: middle;
padding: 0.5em 1em;
font-size: ${getFontSize};
font-weight: bold;
font-weight: ${getFontWeightFromSize};
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
@d4rekanguok
d4rekanguok / gulp-modify-json.js
Created January 14, 2019 07:28
Modify json with input from gulp-hashsum
const { src } = require('gulp')
const fs = require('fs')
const path = require('path')
const through = require('through2')
const hashsum = require('gulp-hashsum')
const modifyJson = ({ fileName, src, property }) => through.obj((file, _, cb) => {
const { name } = path.parse(file.path)
if (name !== fileName) return cb(null, file)
import React from 'react'
import rehypeReact from 'rehype-react'
import { Helmet } from 'react-helmet'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'
import NoteBlock from '../components/note-block'
// import '../css/blog-post.css'; // make it pretty!
@d4rekanguok
d4rekanguok / utils.ts
Created July 18, 2019 12:55
custom reorder widget for netlify cms
import differenceBy from 'lodash/differenceBy'
export const hasItem = <T>(data: T[], item: T, key: keyof T): boolean => {
return data.some(datum => datum[key] === item[key])
}
export const removeOutdatedItem = <T>(
data: T[],
outdated: T[],
key: keyof T