Skip to content

Instantly share code, notes, and snippets.

View chengcyber's full-sized avatar

Cheng Liu chengcyber

153 followers · 133 following
  • TikTok
  • San Jose
View GitHub Profile
@chengcyber
chengcyber / saga.md
Last active February 21, 2017 03:29
[redux-saga]Control entry of worker saga

Well, this can really be solved in numerous ways.

  1. with passing your map into your worker by reference, so it can reset in the end (mutation making this solution not elegant)
function* customTake(pattern, worker, ...args) {
  let currentTasks = {};
  const task = yield fork(function* () {
    while (true) {
      const action = yield take(pattern)
@chengcyber
chengcyber / triangle.md
Last active February 5, 2017 12:41
demos for pure CSS triangle

demo1 - simple triangle

transparent border and colored border-left/top/bottom/right width height 0

<div class="triangle-left"></div>
    .triangle-left {
@chengcyber
chengcyber / createReducer.js
Last active February 4, 2017 14:34
handy sinppet for reducers
// lib/createReducer.js
export default function createReducer(initialState, handlers) {
return function reducer(state = initialState, action) {
if (handlers.hasOwnProperty(action.type)) {
return handlers[action.type](state, action)
} else {
return state
}
}
}
@chengcyber
chengcyber / promise.js
Created February 4, 2017 07:45
Promise of navigator.geolocation.getCurrentPosition()
export const getCoordsCurrent = () => (dispatch, getState) => {
const promise = new Promise(function(resolve, reject) {
navigator.geolocation.getCurrentPosition(
response => {
dispatch({
type: TYPE.FETCH_CUR_POS_SUCCESS,
response
});
resolve();
},
@chengcyber
chengcyber / api.js
Last active May 7, 2018 23:57
window.fetch method on modern browsers
// lib/api.js
class Api {
static headers() {
return {
'Accept': 'application/json',
'Content-Type': 'application/json',
'dataType': 'json',
}
}
@chengcyber
chengcyber / index.html
Created January 30, 2017 13:25
Fix Image Site with background-attachment: fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/styles.css">
<title>Fix Image Site</title>
</head>
<body>
<nav></nav>
@chengcyber
chengcyber / index.html
Created January 30, 2017 13:23
infinite background animation loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
body {
margin: 0px;
background: #000;
}
@chengcyber
chengcyber / index.html
Created January 30, 2017 13:20
Pure CSS nav Silder with label/radio/position/left/[id^="slide"]:checked + .slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="wrap">
@chengcyber
chengcyber / boot-collapse.html
Last active January 30, 2017 03:30
hide navbar when click item in narbar when xs-size window
<script>
$(document).ready(function() {
$('.nav a:not(.dropdown-toggle)').click(function(){
// bootstrap 2.x
$('.nav-collapse').collapse('hide');
// bootstrap 3.x
$('.navbar-collapse.in').collapse('hide');
});
};
</script>
@chengcyber
chengcyber / npm_install.md
Last active January 31, 2017 01:08
Scaffold webpack 
npm install --save react react-dom react-router
npm install --save redux react-redux

npm install --save redux-thunk redux-logger
npm install --save normalizr

npm install --save-dev webpack webpack-dev-server
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader