Let’s say you are working on a project about article writing and now you are about to write actions to create and update articles.
To create an article, you would need an action creator like this.

1
2
3
4
5
6
7

export const createArticle = title => {
    return {
        type: ARTICLE,
        operation: CREATE,
        title
    }
}

When it comes to article updating, you need another action creator.

1
2
3
4
5
6
7
8

export const updateArticle = ( newTitle, title) => {
    return {
        type: ARTICLE,
        operation: UPDATE,
        title,
        newTitle
    }
}

These two functions looks like each other very much.
Tasks like these are tedious and you may wonder if there is a way to get rid of these repetitive jobs.

Of course yes, but you need some extra help.
I highly recommend you to read the wiki page of functional programming if it’s new to you.
Otherwise the following snippets may be very strange to you.

To do functional programming, you may need some help of libraries such as Ramda.

1
2
3
4
5
6
7

const R = require("ramda");
const actionArg = R.curry((type, operation, newTitle, title)=> (
  {
    type, operation, title, newTitle
  }
));
export const actionOfArticle = actionArg(ARTICLE);

With the above snippet, basically you are defining a function called actionArg that would return another function.
The function returned by actionArg would return an object describing the action you are creating.
At the last line you are making an action to deal with all the article related stuff.

Here comes the magic.
Now, to create an article, you just need to define an one line function.

1

export const createArticle = actionOfArticle(CREATE,0,R.__)

Also it becomes easier if you want to update the title of an existing article.

1

export const updateArticle = actionOfArticle(UPDATE,R.__,R.__)

This may not seem to be useful when you are only dealing with simple actions.
However when actions become complex, you can save a lot of time by writing actions in this way.

Drag gesture, like the image above, is a very good interaction model for touch devices.
This article is about the implementation of drag gesture on mobile browsers.

I use react to simplify the code. However you can accomplish it without any framework.

The basic idea is to make a scrollable widget comprised by two component.
The first component is always visible while the second one(named drag-btn in this article) can only be seen after scrolling.

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

<li
  onClick = {this.props.click.bind(this)}
  ref = {e=> {
    this.li = e;
  }}
  className = {"menu__item"}
  onScroll = {this.onScroll}
>
  <div
    className = {"text"}
  >
    <text >
      {this.props.text}
    </text>
  </div>
  <div
    ref = {e=> {
      this.dragBtn = e;
    }}
    className = {`drag-btn ${this.props.dragClass[0]}`}
  >
    <text>
      drag
    </text>
  </div>
</li>

We use onscroll to monitor the scrolling.

1
2
3
4
5
6
7
8

onScroll:function() {
    this.scroll = true;
    if (this.li.scrollLeft > this.scrollThreshhold) {
      this.dragBtn.className = `drag-btn ${this.props.dragClass[1]}`;
    } else {
      this.dragBtn.className = `drag-btn ${this.props.dragClass[0]}`;
    }
  },

When the user scrolls to certain position, we have to tell the user that the drag action is about to be triggered.This is fulfilled by adding another class to drag-btn component to change its color.

When the user stops scrolling, a touchend event is emitted which can be utilized to check if drag action should be executed.

1
2
3
4
5
6
7
8
9
10

onTouchEnd:function() {
  if (this.scroll) {
    if (this.li.scrollLeft > this.scrollThreshhold) {
      this.props.drag.bind(this)();
    }

    this.li.scrollLeft = 0;
    this.scroll = false;
  }
},

In order to keep it concise, only the most pertinent code was demonstrated in this article.
For more details, check this repo.

We all know that installing operation system is a toil.
So let’s say no to restinalling OS.
Recently, I bought a larger SSD and intended to use it to replace the older one.
In order to circumvent all the dull jobs I have to do with the reinstalling thing, I decided to clone the existing Ubuntu Mate 14.04 from my older SSD to the newly bought one.
Luckily I succeeded.

Meteor Already has a built-in password reset mechanism.
Normally, you would use it with the accounts-ui package.
But things become tricky when you want to customize the password resetting page.
In this article, I will walk you through on how to implement your own password resetting page in Meteor.