Tutorial Part 3 of Dapp

Parity Bonds

It’s time to get down and dirty with the blockchain.

Read More

Tutorial Part 2 of Dapp

oo7 Bonds

Now we have our basic dapp harness, we can start introducing more interesting functionality. Without too much ado, let’s get started. Head in to src/client/scripts/app.jsx. You will see our basic file:

Read More

Tutorial Part 1 of Dapp

Spawning a new Dapp

The dapp will use modern JS technologies: NPM, Webpack2, React, Babel, ES6, JSX and oo7.

Read More

D3-Scale

Read More

D3-Shape

d3.shape

Visualization typically consist of discrete graphical marks, such as Symbols, arcs, lines and areas. While the ractangles of a bar chart may be easy enough to generate directly using SVG or Canvas, other shapes are complex, such as roudned annular sectors and centripetal Catmull-Rom splines. This module provides a variety of shape generators for your convenience.

Read More

d3.range

1
d3.range([start, ]stop[, step])

Read More

Quick Reference of D3

Selections

d3.select()

Returns a reference to the first element found.

Read More

Simple Api of Mongoose

Two methods to connect to Mongo DB

    Read More

    Notes on Interactive Data Visualization for the Web

    Introducing D3

    D3 – also referred to as d3.js – is a JavaScript library for creating data visualization. But that kind of undersell it.

    Read More

    Simple Usage of SW

    Register

    1
    2
    3
    4
    5
    6
    navigator.serviceWorker.register('your_service_worker,js', { scope: 'your_path_name' })
    .then((worker) => {
    console.log('[SW] Registration succeeded.')
    }).catch((err) => {
    console.log('[SW] Registration failed with ' + err)
    })

    Read More

    Glossary of Terms on InfluxDB

    aggregation

    An InfluxQL function that returns an aggregated value across a set of points

    Read More

    APIs of InfluxDB

    The InfluxDB API provides a simple way interact with the database. It uses HTTP response codes, HTTP authentication, JWT Token, and basic authentication and responses are returned in JSON.

    Read More

    Writing Data in InfluxDB With HTTP API

    Create a database using the HTTP API

    To create a database send a POST request to the /query endpoint and set the URL parameter q to CREATE DATABASE <new_database_name>. The example below sends a request to InfluxDB running on locahost and create the database mydb.

    Read More

    Querying InfluxDB With the HTTP API

    The HTTP API is the primary means for querying data in InfluxDB.

    To perform a query send a GET request to the /query endpoint, set the URL parameter db as the target database, and set the URL parameter q as your query.

    Read More

    Simple About InfluxDB

    Install InfluxDB on MacOS

    1
    2
    brew update
    brew install influxdb

    Read More

    Usage of Node-Influx

    Introduction

    InfluxDB is a time series database, so it would make sense that the concept of time is moderately important when dealing with it.

    Read More

    Example of Node-Influx

    Express Response Times Example

    In this example we’ll create a server which has an index page that prints out ‘hello world’, and a page

    Read More

    Snippets of Koa Middlewares

    koa-compress

    Compress middleware for Koa

    Example

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const compress = require('koa-compress')
    const Koa = require('koa')

    const app = new Koa()
    app.use(compress({
    filter: (content_type) => /text/i.test(content_type),
    threshold: 2048,
    flush: require('zlib').Z_SYNC_FLUSH,
    }))

    Read More

    Git Merge and Rebase

    Conceptual Overview

    The first thing to understand about git rebase is that it solves the same problem as git merge. Both of these commands are designed to integrate changes from one branch into another branch – they just do it in very different ways.

    Read More

    Type Compatibility in TypeScript

    Type Compaibility in TypeScript is based on Structural Subtyping. Structural Typing is a way of relating types based solely on their members. This is in contrast with nominal typing. Consider the following code:

    Read More

    Mannual of Ownership in Rust

    Ownership is Rust’s most unique feature, and it enables Rust to make memory safety guarantees without needing a garbage collector. Therefore, it’s important to understand how ownership works in Rust. In this chapter we’ll talk about ownership as well as several related features: borrowing, slices, and how Rust lays data out in memory.

    Read More

    Basic Info of Web Worker

    1
    2
    3
    // index.js
    var worker = new Worker ('worker.js')
    worker.postMessage() // start the worker

    Read More

    Deep in Viewport

    vw(viewport width) and vh(viewport height) are legnth units that represent exactly 1% of the size of any given viewport, regardless of its measurements. rem(short for root em) is also similar in its functionality, although it deals specifically with font sizes, and derives its name from the value fo the font size of the root element – which should default to 16 pixels on most browsers.

    Read More

    Utils in Axios

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    // global toString
    var toString = Object.prototype.toString

    // isArray
    function isArray (val) {
    return toString.call(val) === '[object Array]'
    }

    // isArrayBuffer
    function isArrayBuffer (val) {
    return toString.call(val) === '[object arrayBuffer]'
    }

    // isFormData
    function isFormData (val) {
    return (typeof FormData !== 'undefined' && (val instanceof FormData))
    }

    // isString
    function isString (val) {
    return typeof val === 'string'
    }

    // isNumber
    function isNumber (val) {
    return typeof val === 'number'
    }

    // isUndefinded
    function isUndefined (val) {
    return typeof val === 'undefined'
    }

    // isObject
    function isObject (val) {
    return val !== null && typeof val === 'object'
    }

    // isDate
    function isDate (val) {
    return toString.call(val) === '[object Date]'
    }

    // isFile
    function isFile (val) {
    return toString.call(val) === '[object File]'
    }

    // isBlob
    function isBlob (val) {
    return toString.call(val) === '[object Blob]'
    }

    // isFunction
    function isFunction (val) {
    return toString.call(val) === '[object Function]'
    }

    // isStream
    function isStream (val) {
    return isObject(val) && isFunction(val.pipe)
    }

    // isURLSearchParams
    function isURLSearchParams (val) {
    return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
    }

    // trim
    function trim (val) {
    return str.replace(/^\s*/, '').replace(/\s*$/, '')
    }

    // isStandardBrowserEnv
    function isStandardBrowserEnv () {
    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
    return false
    }
    return {
    typeof window !== 'undefined'
    && typeof document !== 'undefined'
    }
    }

    /**
    * Iterate over an Array or an Object invoking a function for each item
    */

    function forEach (obj, fn) {
    if (obj === null || typeof obj === 'undefined') {
    return
    }
    if (typeof obj !== 'object' && !isArray(obj)) {
    obj = [obj]
    }
    if (isArray(obj)) {
    for (let i = 0, l = obj.length; i < l; i++) {
    fn.call(null, obj[i], i, obj)
    }
    } else {
    for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
    fn.call(null, obj[key], key, obj)
    }
    }
    }
    }

    Read More

    Concept of PWA

    Advantages of Progressive Web Apps:

      Read More

      Simple Guide of Jest

      Install

      1
      yarn add --dev jest

      Read More

      Webpack Code Splitting - Async

      Currently a ‘function-like’ import() module loading syntax proposal is on the way into ECMAScript.

      The ES6 Defines import() as method to load ES6 modules dynamically onruntime.

      Read More

      Mongodb Simple Guide

      • yarn add mongoose

      • import mongoose from 'mongoose'

      Read More

      TypeScript With Node

      Configuring TypeScript Compilation

      TypeScript uses the file tsconfig.json to adjust project compile options

      Read More

      Drag, Upload and Progress

      Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration, which consists of:

        Read More

        Simple Usage of flatMap

        origin

        Both map() and flatMap() take a function f as a parameter that controls how an input Array is translated to an output Array:

        Read More

        New Babel Preset - Env

        babel-preset-env is a new preset which let you specify an environment and automatically enables the necessary plugins.

        At the moment, several presets let you determine what features Babel should support:

        Read More

        Babel-Polyfill or Babel-Runtime

        The babel-polyfill and babel-runtime modules are sued to serve the same function in two different ways. Both modules ultimately serve to emulate an ES6 environment.

        Read More

        Deep in Runtime-Transform

        This plugin is recommended in a library/tool

        Note: Instance methods such as 'foobar'.includes('foo') will not work since that would require modification of existing built-ins(Use babel-polyfill for that)

        Read More

        More Faster React Functional Component

        origin

        An basic Avatar Component:

        Read More

        Css Shorthand Collection

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        body {
        background:
        url(...) /* image */
        top center / 200px 200px /* position / size */
        no-repeat /* repeat */
        fixed /* attachment */
        padding-box /* origin */
        content-box /* clip */
        red; /* color */
        }

        Read More

        Usage of Grid in Css

        origin

        Introduction

        CSS Grid Layout (aka ‘Grid’), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

        Read More

        Simple Usage of Scp

        origin

        Basic Syntax of SCP

        1
        scp source_file_name username@destination_host:destination_folder

        Read More

        Rxjs API

        Create

        You can create an Observable from scratch by using the Create operator. You pass this operator a function that accepts the observer as its parameter. Write this function so that it behaves as an Observable – by calling the observer’s onNext, onError, and onCompleted methods appropraitely.

        Read More

        Detail of Node Cluster

        Cluster

        A single instance of Node.js runs in a single tread. To take advantage of multi-core systems the user will sometimes want to launch a cluster of Node.js processes to handle the load.

        Read More

        Api of Axios

        alias

        axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

        Read More

        webpackDevServer Proxy

        devServer.proxy: object

        Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

        Read More

        Notes in Migrating From React-Router-3 to React-Router-4

        HashRouter

        Version 4 of React-Router seperate top level router element for the different history type. If you’re using version 4 you should be able to replace <Router hisotry={hashHistory}> with <HashRouter>

        Read More

        Learning D3

        d3-array

        array methods built-in to JavaScript

          Read More

          Node-Inspector's Crash

          I had encountered a problem using node-inspector with info

          cb(error, NM[0].ref); Cannot read property ‘ref’ of undefined

          Read More

          Usage of Chai

          Chains

          • to
          • be
          • been
          • is

          Read More

          AVA Usage

          测试语法

          ` import test from ‘ava’

          Read More

          Usage

          Read More

          用 Javascript 实现选中粘贴

          为了对付单位愚蠢的每日工作总结的要求, 写了一个小脚本来导出任务管理器里的内容到剪贴板, 于是接触了一下纯 javascript 实现复制到剪贴板功能

          代码先行贴出

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          (function() {
          'use strict';
          if ('your_url'){
          var issueList = document.querySelectorAll('.issue-list li');
          var taskList = [];
          for(var i = 0, len = issueList.length; i < len; i++){
          var key = issueList[i].getAttribute('data-key');
          var title = issueList[i].getAttribute('title');
          var task = '已完成: '+key+'-'+title;
          taskList.push(task);
          }
          var text = taskList.join('\n');
          var clipboard = document.createElement('textarea');
          clipboard.style.width = '100%';
          clipboard.style.height = '300px';
          clipboard.value = text;
          var listPanel = document.getElementsByClassName('list-panel')[0];
          listPanel.appendChild(clipboard);
          var today = document.createElement('button');
          today.style.width = '100%';
          today.innerText = 'Today';
          listPanel.appendChild(today);
          today.addEventListener('click', function () {
          window.location.href = 'url_to_today';
          });
          var button = document.createElement('button');
          button.style.width = '100%';
          button.innerText = 'copy to clipboard';
          listPanel.appendChild(button);
          button.addEventListener('click', function() {
          clipboard.select();
          document.execCommand('copy');
          clipboard.blur();
          });
          }
          })()

          Read More

          Baisc Usage of Redux-Observable

          First of All

          createEpicMiddleware(rootEpic)

          createEpicMiddleware is used to create an instance of the actual redux-observable middleware, and you should provide a single, root Epic

          Read More