Skip to content

Instantly share code, notes, and snippets.

View yidea's full-sized avatar
☘️
lucky

Vincent Cao yidea

☘️
lucky
  • Linkedin
  • Mountain View, CA
View GitHub Profile
@yidea
yidea / protractorAPICheatsheet.md
Created September 25, 2019 00:36 — forked from javierarques/protractorAPICheatsheet.md
Protractor API Cheatsheet
@yidea
yidea / cloudSettings
Last active August 6, 2019 20:51
Visual Studio Code Settings Sync Gist
{"lastUpload":"2019-07-01T20:30:44.271Z","extensionVersion":"v3.2.9"}
@yidea
yidea / fetch-timeout.js
Created April 13, 2019 08:41 — forked from davej/fetch-timeout.js
Add a pseudo timeout/deadline to a request using the ES6 fetch api
Promise.race([
fetch('/foo'),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), 7000)
)
]);

Monolithic Components, Composable Components

Introduction

Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.

To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. Our Tags component will take care of managing and displaying tags.

The following examples are all built with Tachyons and React, but these ideas apply to any UI component and any general styling approach.

@yidea
yidea / s3-img-optimze.js
Last active December 14, 2017 03:57
image optimize w imagemagic and upload to aws s3 script
/**
* image optimize w imagemagic and upload to aws s3
*/
const spawn = require('child_process').spawn;
const Buffers = require('buffers');
const mime = require('mime');
const http = require('http');
const https = require('https');
const fs = require('fs');
@yidea
yidea / p4merge4git.md
Created April 20, 2017 21:51 — forked from tony4d/p4merge4git.md
Setup p4merge as a visual diff and merge tool for git
@yidea
yidea / sm-annotated.html
Created October 16, 2015 03:49 — forked from hdragomir/sm-annotated.html
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
//PROD
var Path = require("path");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DEBUG = false;
// Autoprefixer browsers
var autoprefixerBrowsers = ["last 2 versions"];
@yidea
yidea / promise_async.js
Last active September 2, 2015 01:25
es6 promise vs. es7 async/await usage
import request from "request";
// promise returning function
function get (url){
return new Promise(function(resolve, reject){
request({
method: 'GET',
url: url,
json: true,
headers: {
-- @Show-Hide-Chrome.scpt
-- assign the applescript to a global shortcut va automater or bettertouchtool
-- it saved my life as a coder w all my tears
set theApp to "Google Chrome"
if isAppActive(theApp) then
hideApp(theApp)
else
activateApp(theApp)
end if