如何在 Koding 匯入 Dropbox 的部落格文章

也是廢話

一直覺得部落格編寫就該像在 WordPress.com 上,使用者只需編寫文章、存檔,之後系統會自動更新部落格。

Hexo 配上 Markdown 雖是我理想的部落格編寫組合,但編寫後仍需手動發布,總覺得還有一點差距。

理想流程是:使用者透過任何 Markdown 編輯器編寫文章、存檔到 Dropbox、Hexo 自動匯入文章後發佈。 使用者只需要寫文章就好,其他的皆由 koding 雲端主機處理。 如此,在旅行搭車候機無聊時,亦可使用平板電腦編寫部落格文章。
(單純理想,實際上我旅行無聊時只會拿平板出來看影片,有網路時只會上 facebook,不可能寫部落格的~)

介紹完HexoKoding後, 這篇文章將介紹把檔案放在 Dropbox 上,如何讓 hexo/hexi 匯入 dropbox 的文章並且自動發布。

Dropbox migrator

有用 Dropbox 的朋友應該都有安裝他的桌面程式,自動將某特定個資料夾保持和 Dropbox 同步。 而在 Koding 上則無法安裝這類的同步程式,需透過第三方程式來讀取 Dropbox 上的檔案。

Hexo Dropbox Migrator 是我寫的 hexo plugin,這個 plugin 可以把 Dropbox 上指定的資料夾內的檔案下載到 hexo 專案資料夾內。所以可以利用這 plugin 來處理 Koding 和 Dropbox 上 hexo 文章的同步。

install dropbox migrator

dropbox migrator 和大部分 hexo plugin 的安裝方式相同,在 hexo 專案目錄下, 透過終端機介面輸入下列指令即可安裝。

1
$ npm install git+https://github.com/kywk/hexo-migrator-dropbox.git --save

因為我尚未將 dropbox migrator 發佈至 npm,故需透過 git 網址的方式安裝這套件。

get dropbox access token

dropbox migrator 需要完成授權並取得授權碼後才可以讀寫 Dropbox 上的檔案,我們必須先完成授權。
請連到這個網址 (http://kywk.github.io/hexo-migrator-dropbox/),在步驟區塊中依序完成授權程序。

  1. 若你有自己的 Dropbox App Key,可在這個步驟輸入你的 App Key,否則直接 Next 即可。
  2. 先按第一個按鈕,會跳出 Dropbox 的授權視窗,按下允許完成授權後關閉授權視窗,再按下一步。
  3. 完成授權後,把授權資訊貼到 _config.yml 裡,可透過 Koding ACE 編輯器來完成。
    記得把 source_dir 改為你在 Dropbox 上放部落格文章的路徑。

using dropbox migrator

完成設定後,可透過下列指令下載 Dropbox 上的部落格文章至 hexo 系統中:

1
$ hexo migrate dropbox

若設定皆正確,此時 migrator 會開始下載檔案,等到檔案下載完成即可。

1
2
3
4
5
6
downloading: _posts/travel/1304_bohol/index_relax-boholiday.md
downloading: _posts/lifehacker/kywk-schdule.md
downloading: _posts/lifehacker/mind_working-skill.md
downloading: _posts/lifehacker/now-or-never.md
downloading: _posts/lifehacker/ted_fang-yi-sheu.md
......

當檔案全數下載完畢,即可生成部落格檔案並發布,和一般操作 hexo 系統一樣。

1
2
$ hexo g 
$ hexo d

Crontab 自動化

目前尚未成功試出在 Koding 上使用 Crontab 的方式,難產中~

…TBC…

相關文章:

Sublime Text: kywk's Packages / Plugins

Package Control

The absolutely necessary package manager for Sublime. This is the optimal way to install all of the plugins and themes listed below.

Go ahead and install that at the package control site.

To Use: ctrl + shift + p Go into the command palette and type install.

Package Control will load all the packages available for install. Take a look at all the great things you can install and find your favorite packages..

edit / coding tools

Alignment

A very simple and easy to use plugin. I’m a very big fan of making your code organized and good looking. It helps tons when you revisit the code later down the road. Alignment helps with that.

To Use: Highlight the lines you want to align and press ctrl + alt + a
Simular packages: Abacus

BracketHighlighter

This plugin provides bracket highlighting for all sorts of brackets.

DocBlockr

A really great way to easily create doc blocks for many languages including JavaScript, PHP, and CoffeeScript. Just type in /** above your function and press tab. Watch the magic as DocBlockr takes the function name and variables and creates your doc block.

SublimeLinter

A framework for interactive code linting in the Sublime Text 3 editor.

SublimeCodeIntel

This plugin reads all your code and is able to code-complete, jump into definitions and function call tooltips.

Although sometimes looks a little buggy, it’s still worth having it around. It’s a huge time saver, especially when you are dealing with other’s people code.

HTML5 editing

Emmet (Zen Coding)

Emmet is an absolute time saver. You can build HTML on the fly easily and quickly.

Check out our Emmet Interactive Guide to learn more and try out Emmet for yourself.

To Use: ctrl + alt + enter and start typing your Emmet styled HTML

JsFormat

To Use: ctrl + alt + f Javascript formatting

Hayaku!

Hayaku gives you a way to write numeric and color values very fast. Just write numbers or colors with hash symbol after the property abbreviation and Hayaku would make everything for you:

Git

git

Git helps you interact with your Git repo. It has support for all sorts of things like init, push, pull, branch, stash, and more.

Git Gutter

To show an icon in the gutter area indicating whether a line has been inserted, modified or deleted.

Sublime GitHub

Provides a number of useful commands for GitHub, including creating and browsing gists, opening and editing files on GitHub, and bringing up the blame and commit history views.

Look & Feel

monokai-extended

Extends Monokai from Soda with new syntax highlighting for Markdown, LESS, and Handlebars and improved syntax highlighting for RegEx, HTML, LESS, CSS, JavaScript and more.

EJS

An EJS syntax definition specifically for sublime text

Handlebars.js

Sublime Text 2 / 3 package for Handlebars.js templates.

Soda

Soda Theme - Dark and light custom UI themes for Sublime Text

reference / resource

Sublime Text: kywk's setting

setting

Settings - User
{
  // Default Look and Feel
  "color_scheme": "Packages/Monokai Extended/Monokai Extended_kywk.tmTheme",
  "theme": "Soda Dark.sublime-theme",
  "soda_classic_tabs": true,
  "soda_folder_icons": true,
  "indent_guide_options": ["draw_normal", "draw_active"],

  // Editor setting
  "word_wrap": false,
  "highlight_line": true,

  // Whitespace - no tabs, trimming, end files with \n
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "ensure_newline_at_eof_on_save": true,
  "trim_trailing_white_space_on_save": true,

  // Sidebar - exclude distracting files and folders
  "file_exclude_patterns":
  [
    ".DS_Store",
    "*.pid",
    "*.pyc"
  ],
  "folder_exclude_patterns":
  [
    ".git",
    "__pycache__",
    "env",
    "env3"
  ],

  "ignored_packages":
  [
    "Vintage"
  ]
}
Key Bindings - Default
//{ "keys": ["ctrl+shift+up"], "command": "select_lines", "args": {"forward": false} },
//{ "keys": ["ctrl+shift+down"], "command": "select_lines", "args": {"forward": true} },
{ "keys": ["alt+up"], "command": "select_lines", "args": {"forward": false} },
{ "keys": ["alt+down"], "command": "select_lines", "args": {"forward": true} },

Key Bindings - User
// Code Reindent
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}
Color schema
    <key>activeGuide</key>
    <string>#00FF00</string>
    <key>stackGuide</key>
    <string>#800000</string>

referrnces / resource

tutorials

trick & tip

JavaScript: survey of 2D physics engines

Preface

This article based on JavaScript Physics Engines Comparison. I take a look at some 2d physis libraries: box2dweb, Turbulenz, PhysisJS… etc. For each one, q quick introduction will be given and then the library be rated basedon ease of use, peformance, and feature set.

Though it is possoble to run any of those libraries without a visual repersentation, that isn’t much fun and doesn’t meet real case. So I set up some small demo to see the simulation runs,

Setup

TBD

box2dweb

box2dweb is a port of the C++ box2d project, actually it generated by an Actionscript 3 to JavaScript compiler. All of its classes are namespaced which can make the code a little hard to read, so it’s recommanded that you create your own local variables for any objects you commonly use. box2dweb has a full constraint system (which it calls joints), contnuous collision detection for more accurate fast-moving bodies, and lots of configuration options both for the whole scene and for individual objects.

Collision detection

Collision detection with box2dweb is easy to do by using b2ContactListener object. You can have separte event handlers for each of the four collision states: BiginContace, EndContace, PreSolve, and PostSolve. You can also detect collisions by iterating over the world’s contact list after each step.

box2dweb collision
1
2
3
4
5
6
var contactListener = new Box2D.Dynamics.b2ContaveListener;
contactListener.BeginContact = function(contact_details) {
  // `contace_details` can be used to determine which two
  // objects collided and in what way
};
world.SetContactListener(contactListener);

Joints

Joints are used to constrain objects in different manners, making objects act as though they are on hings, slide in only one direction, move like they’re attached via a rpoe, and many other configurations. It can take a bit of testing to get a joint working like you eant it, but after a while you start to get the hang of them and adding joints becomes much a much quicker process. As an example let’s create a Revolute Joint - or in normal terms, a hinge. All joints in box2dweb take two bodies and world position, except the firction joint which only needs one body; for more details on available joints and the various configuration options thay have check out the Box2D manual or one of the many online Box2D joint tutorials.

box2dweb joints
1
2
3
4
5
6
7
8
9
10
var body_a = world.CreateBody(bodyDef_A).CreateFixture(fixDef);
var body_b = world.CreateBody(bodyDef_B).CreateFixture(fixDef);
var jointDef = new Box2D.Dynamics.Joings.b2RevoluteJointDef;
jointDef.Initilize(
  body_a.GetBody(),   // Body A
  body_b.GetBody(),   // Body B
  body_b.GetBody().GetWorldCenter() // Anchor location in world coordinates,
                                    // in this case it's the center of body B
);
var joint = world.CreateJoint(jointDef);

Scene updating

Finally a last liece of information before we see the box2dweb demo: how to update your sence after a step in the simulation, such as updating the graphics in a game. The World object has a method name GetBodyList which will return the first body in the scene. You can then interate over the remaining bodies in the scene by continually call body.GetNext() until the GetNext method returns null. As you encounter each body you can update the associated graphics obhect or anything else which needs to be maintained. Custom information can be attached to each body when you create them by using the body definition’s userData property. This userData usually includes a reference to the geometry object which makes updating that geometry’s position and rotation simple.

Overview

  • Performance: I have never seen a box2dweb scene run slowly unless it was set up poorly. Instead, game logic and the actual graphics rendering usually have the biggest impact on FPS.
  • Features: For a 2D library, box2dweb should have everything you need.
  • Usability: Very simple API, although it can be somewhat hard to find objects in the different parts of the namespace. The Box2D manual isn’t too thorough so you may end up looking at the flash port’s documentation and search for specific topics online.
  • Overall: This is a very powerful engine that isn’t hard to set up, and there is no steep learning curve.
  • Browser Support: Chrome, FireFox, IE9, Safari, Opera

JPE

JPE is port of the APE (Actionscript Physics Engine), written by colorhook. JPE is modulazied by SeaJS framework, it uses EaselJS rendering engine.

Read More

kywk's bashrc config

Introduction

I noticed Maximum Awesome by square few days ago. After try Maximun Awesome out, it’s really cool! But I don’t like Solarized color schema, it looks too dark to me. I like dark background with highlight color like Monokai Soda or IR_black. It feels vivid and happy.

My .files has stored on Dropbox for synchronous between MacBook Pro / ubuntu Desktop for a long time, I also using git to manage changes. But in past days, I modified .files for some project needs without commit changes. Last commit is more than years ago. It couse my .files very ugly. There are many temprary setting which doesn’t need anymore, broken path, outdated files.

That’s why I decided to organize my .files and re-initial a new git repos.

bashrc

“30 Handy Bash Shell Aliases” and “What useful things can one add to one’s .bashrc?” provide lots of bashrc snippets example. I pick up lots alias, extend command setting.

powerline.sh

Powerline looks very fancy and much useful, but it’s too powerful for me. I rewite a simple powerline.sh which is not so easy to customize. And I ported magicmonty’s bash-git-prompt in my powerline.sh for display git status.

references

Thanks all, there are many information people shared to help me update my .files.

Biture: single column, minimalist theme for Hexi/Hexo

biture is a single column, widget less, minimalist designed theme for Hexo/Hexi.
It looks almost as same as bitrap which - my first hexo theme.
I rewrite bitrap by replace bootstrap with Pure, which is much lightweight.

Screenshot

biture Features

  • Two dropdown nav menu: config it at theme/biture/_config.yml.
  • Responsive design.
  • Best view at 960px or higher.

You can visit my blog to see how it works, get more information at biture or fork it on github.

note: OpenCL 1.2: High-Level Overview by AJ.Gullon

Basis

  • Use Cases
    • Fast permutations, Data translation, Numerical software
  • Specification
    • Core (FULL_PROFILE)
    • Embedded (EMBEDDED_PROFILE)
    • Extensions
  • Components
    • C Host API
    • OpenCL C
    • Models: Device, Execution, Memory, Host API

Models

Inside the Device

Compute unit

  • Processing Element
    • All instructions are executed on the processing element.
    • PE are contained in CUs.
  • private memory
  • local memory

Memory Models

Memory Models

  • Global Memory
    • shared with all processing elements
    • Host can access this memory too
    • OpenCL ersistent storage
  • Constant Memory
    • shared with all processing elements
    • Read-only memory
    • share data with all device PEs
  • local memory
    • shared with all PEs in a CU
    • share data with all CU PEs
  • private memory
    • No other PE can access this memory

Execution

Kernel Function

  • Kernel functions
  • Kernel Functions
    • OpenCL executs kernel function on the device
    • Ordinary function agrument list
    • external execution parameters that control parallelism
    • Host in Kernal coordinates execution, provide arguments and parameters

NDRange

  • Simple NDRange
    • Lunch foo(1, 2, 3) to run 10 times
      • The argument list is identical
      • Insight: execution parameters provide an index space
        • Each function invocation can access its index
    • A for loop: Fix index
      1
      2
      3
      
      for (size_t i = 0; i < size; i++) {
          foo(a, b, c);
      }
      
    • Work Offset: Global index
      1
      2
      3
      
      for (size_t j = offset; j < (size + offset); ++j) {
          bar(a);
      }
      
  • Index Space
    • Don’t think of for loop. They are inherently sequential.
    • Think of a set of indices
      • Elements are n-element tuples
    • Each invocation pulls a random index from the set
  • Some Definitions
    • Work-item: invocation of the kernel for a particular index
    • Global ID: globally unique id for a work-item
    • Global Work Size: the number of work-items
    • Work Dimension: dimension of the index space

Work-group

  • How device works
    • Partition the global work into smaller pieces, called work-group
      • Execute on compute units
      • Compute unit local memory shared by work-group
      • Work-items in the work-group mapped to CU PEs

  • Conceptual Work-group Lauching
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    // Work-group size
    work_group_size = ...;
    
    // Global work size
    global_work_size = ...;
    
    // Global offset
    offset = ...;
    
    for (size_t group_id = 0; group_id * work_group_size <= global_work_size; ++group_id) {
        void* local_mem = malloc(...);
        for (size_t local_id = 0; local_id < work_group_size; ++local_id) {
            // foo can use local_men
            global_id = offset + group_id * work_group_size + local_id;
            foo(a, b, c);
        }
        free(local_mem);
    }
    
  • Summary of Kernel funcation
    • Host creates an index space to the device
    • Parameters be values or global memory objects

Host API

Host API

  • Platform
    • An implementation of OpenCL, like driver
  • Context
    • Create a context for a particular platform
    • A container of devices and memory
  • Program
    • collections of kernels
    • device specific
  • Asynchronous Device Calls

Summary

  • Host API controls the device
  • Asynchronous execution model
    • important for speen