-
Notifications
You must be signed in to change notification settings - Fork 1
/
content.json
1 lines (1 loc) · 34.4 KB
/
content.json
1
{"meta":{"title":"CodePaste","subtitle":null,"description":null,"author":"Joshua Youngjae Ji","url":"https://zirho.github.io"},"pages":[],"posts":[{"title":"Syntax-agnostic snippets for Ultisnips","slug":"vim-ultisnips","date":"2017-07-13T02:01:21.000Z","updated":"2020-01-07T17:09:19.508Z","comments":true,"path":"2017/07/12/vim-ultisnips/","link":"","permalink":"https://zirho.github.io/2017/07/12/vim-ultisnips/","excerpt":"","text":"This post is for users who uses vim or neovim Ultisnips one of plugin managers Motivation When I work on multiple javascript projects such as open-source projects or my own projects, I need to accommodate my editor setup for each different setup and coding style guide with snippet plugins. For example, one of the projects uses style guide which requires a trailing semicolon at the end of statement. On the other hand, other projects prohibits it. Coding style checker for eslint can be setup differently with .eslintrc in root folder of each project, but editors like vim or neovim with plugins are not agnostic enough to accommodate and work according to those styles. So I used to have something like this in my Ultisnip snippet files. With comma, without comma. 123snippet logconsole.log(${1:${VISUAL}})endsnippet 123snippet log;console.log(${1:${VISUAL}});endsnippet This works, but it gets repetitive. So I tried to figure out how I can achieve this easily. It can be done like this. Ultisnip javascript 12345global !pfrom javascript_snippets import ( semi, space_before_function_paren, keyword_spacing )endglobal 123snippet ret "Return statement"return ${VISUAL}$0`!p snip.rv = semi(snip)`endsnippet This happens in this order. Define ultisnip variable in .vimrc. Vim will pick this up. 12345let g:ultisnips_javascript = { \\ 'keyword-spacing': 'always', \\ 'semi': 'never', \\ 'space-before-function-paren': 'always', \\ } Ultisnip plugin picks that options up and has them available in ultisnip files. When snippet is being called, it prints out semicolons based on the option. This looks great but what if I want to set this up differently per project? This is where vim-localrc comes into play. vim-localrc 123456.├── .local.vimrc└── folder1 ├── .local.vimrc └── folder2 └── .local.vimrc If we have this folder structure in the project, the most nested .local.vimrc gets precedence sequentially. So we can put any configs in any level of the folder structure. Here's how you can set it up. Install plugins Add lines in .vimrc 1Bundle 'thinca/vim-localrc' Run below commands to install the plugin in vim. First one applies changes to vim while you are opening .vimrc file. Second does installing plugins. (this may differ by the manager) 12:so %:PluginInstall Configs Put global config ~/.vimrc for vim ~/.config/nvim/init.vim for neovim 12345let g:ultisnips_javascript = { \\ 'keyword-spacing': 'always', \\ 'semi': 'never', \\ 'space-before-function-paren': 'always', \\ } Put local config for the project to use a different setup ${PROJECT_DIR}/.local.vimrc 123let g:ultisnips_javascript = { \\ 'semi': 'always', \\ } Custom snippets my own snippets for javascript it's usually in ~/.vim/UltiSnips/javascript.snippets put this at the top of the file 12345global !pfrom javascript_snippets import ( semi, space_before_function_paren, keyword_spacing)endglobal Use it like this 123snippet logconsole.log(${1:${VISUAL}})`!p snip.rv = semi(snip)`${0}endsnippet Happy coding! 🖥 🍺","categories":[{"name":"Tools","slug":"Tools","permalink":"https://zirho.github.io/categories/Tools/"},{"name":"VIM","slug":"Tools/VIM","permalink":"https://zirho.github.io/categories/Tools/VIM/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"vim","slug":"vim","permalink":"https://zirho.github.io/tags/vim/"},{"name":"Ultisnips","slug":"Ultisnips","permalink":"https://zirho.github.io/tags/Ultisnips/"},{"name":"snippets","slug":"snippets","permalink":"https://zirho.github.io/tags/snippets/"}],"keywords":[{"name":"Tools","slug":"Tools","permalink":"https://zirho.github.io/categories/Tools/"},{"name":"VIM","slug":"Tools/VIM","permalink":"https://zirho.github.io/categories/Tools/VIM/"}]},{"title":"Common Responsive Layout","slug":"responsive-layout","date":"2017-04-18T00:01:33.000Z","updated":"2020-01-07T17:09:19.503Z","comments":true,"path":"2017/04/17/responsive-layout/","link":"","permalink":"https://zirho.github.io/2017/04/17/responsive-layout/","excerpt":"","text":"Responsive Layout Motivation Everytime I start a new side project, there's always a need for layout bootstrapping task. Sometimes I don't want to use anything fancy or heavy to prototype it first. Also, there's always a common layout that I end up with, so I decided to make a generic starting point and share it with people who feel the same. The features that I want to include in this open-sourced repo are Top fixed header Right side fixed sidebar Sticky footer Responsive sidebar Cross browsing support Realtime updates for changes (browser-sync) These features are heavily inspired by YouTube. Hope it helps anyone out there :)","categories":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"OpenSource","slug":"Technology/OpenSource","permalink":"https://zirho.github.io/categories/Technology/OpenSource/"}],"tags":[{"name":"HTML5","slug":"HTML5","permalink":"https://zirho.github.io/tags/HTML5/"},{"name":"CSS3","slug":"CSS3","permalink":"https://zirho.github.io/tags/CSS3/"},{"name":"Cross Browsing","slug":"Cross-Browsing","permalink":"https://zirho.github.io/tags/Cross-Browsing/"},{"name":"Layout","slug":"Layout","permalink":"https://zirho.github.io/tags/Layout/"}],"keywords":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"OpenSource","slug":"Technology/OpenSource","permalink":"https://zirho.github.io/categories/Technology/OpenSource/"}]},{"title":"Firebase Unit Testing","slug":"firebase-unit-test","date":"2017-01-11T18:34:32.000Z","updated":"2020-01-07T17:09:19.493Z","comments":true,"path":"2017/01/11/firebase-unit-test/","link":"","permalink":"https://zirho.github.io/2017/01/11/firebase-unit-test/","excerpt":"","text":"Github: Firebase Unit Test Motivation Firebase is a very powerful tool. When you build apps on firebase, you want to make sure to set up accessibility rules for database correctly. That's why firebase itself has a small UI portion of it for testing it out. A lot of changes may occur in the early phase of project, so you want a way to run many tests automatically to ensure rules are properly set. Also, these tests can be used for changes in the future. Yeah, BDD or TDD on firebase can be enabled on database scope with this approach. My github repo demonstrates how you can accomplish this. Firebase Unit Test Features Authenticated user interactions Authenticated user test Firebase does not run any server side scripts. Instead it has a very interesting way to authorize a certain path based on the user session or any way you like. You can find more details here. Firebase security rules So when you run tests, you want the test runner to act like it's been logged in as a certain user. To achieve that, you want a tool built by firebase team, called firebase-admin. You can login by UID with this tool and run tests with the user session. Unauthenticated user interactions Unauthenticated user test Your app can have multiple instances of firebase. Creating one with another config is very easy. Newly created instance will be unauthenticated, so you can use it to test unauth behaviors. Creating another firebase instance without a user session Conclusion I wrote this repo for testing database rules. But this can be used to solve other various problems, such as database CRUD. I hope this helps anyone interested in running tests on firebase. Enjoy! Github: Firebase Unit Test","categories":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"Firebase","slug":"Technology/Firebase","permalink":"https://zirho.github.io/categories/Technology/Firebase/"},{"name":"Unit testing","slug":"Technology/Firebase/Unit-testing","permalink":"https://zirho.github.io/categories/Technology/Firebase/Unit-testing/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"es2015","slug":"es2015","permalink":"https://zirho.github.io/tags/es2015/"},{"name":"firebase","slug":"firebase","permalink":"https://zirho.github.io/tags/firebase/"},{"name":"unit test","slug":"unit-test","permalink":"https://zirho.github.io/tags/unit-test/"},{"name":"mocha","slug":"mocha","permalink":"https://zirho.github.io/tags/mocha/"}],"keywords":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"Firebase","slug":"Technology/Firebase","permalink":"https://zirho.github.io/categories/Technology/Firebase/"},{"name":"Unit testing","slug":"Technology/Firebase/Unit-testing","permalink":"https://zirho.github.io/categories/Technology/Firebase/Unit-testing/"}]},{"title":"Setup local eslint for JavaScript for VIM with syntastic","slug":"vim-syntastic-local","date":"2016-10-07T01:01:21.000Z","updated":"2020-01-07T17:09:19.506Z","comments":true,"path":"2016/10/06/vim-syntastic-local/","link":"","permalink":"https://zirho.github.io/2016/10/06/vim-syntastic-local/","excerpt":"","text":"Use one of plugin managers Vim-Plug NeoBundle Vundle Pathogen Vim-Addon-Manager Install plugins Add lines in .vimrc 12Plug 'scrooloose/syntastic'Plug 'mtscout6/syntastic-local-eslint.vim' Run below commands to install those two plugins in vim. First one applies changes to vim while you are opening .vimrc file. Second does installing plugins. (this may differ by the manager) 12:so %:PlugInstall Install Eslint as a checker for JavaScript Order matters here. Please make sure remove global eslint first. Install eslint in local repo 1npm i -D eslint Then, install eslint-cli package in global scope. 1npm i -g eslint-cli Make sure that you can still run eslint but it will run local eslint instead. Now let's configure the syntastic in .vimrc There are tons of options in syntastic but this may be a good start. 123456789101112131415161718192021" syntacticset statusline+=%#warningmsg#set statusline+=%{SyntasticStatuslineFlag()}set statusline+=%*let g:syntastic_always_populate_loc_list = 1let g:syntastic_loc_list_height = 5let g:syntastic_auto_loc_list = 1let g:syntastic_check_on_open = 1let g:syntastic_check_on_wq = 1let g:syntastic_javascript_checkers = ['eslint']let g:syntastic_error_symbol = '❌'let g:syntastic_style_error_symbol = '⁉️'let g:syntastic_warning_symbol = '⚠️'let g:syntastic_style_warning_symbol = '💩'highlight link SyntasticErrorSign SignColumnhighlight link SyntasticWarningSign SignColumnhighlight link SyntasticStyleErrorSign SignColumnhighlight link SyntasticStyleWarningSign SignColumn init eslint for repository 1eslint --init Follow the instructions and answer the questions. Now you are all set.","categories":[{"name":"Tools","slug":"Tools","permalink":"https://zirho.github.io/categories/Tools/"},{"name":"VIM","slug":"Tools/VIM","permalink":"https://zirho.github.io/categories/Tools/VIM/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"vim","slug":"vim","permalink":"https://zirho.github.io/tags/vim/"},{"name":"eslint","slug":"eslint","permalink":"https://zirho.github.io/tags/eslint/"},{"name":"syntastic","slug":"syntastic","permalink":"https://zirho.github.io/tags/syntastic/"}],"keywords":[{"name":"Tools","slug":"Tools","permalink":"https://zirho.github.io/categories/Tools/"},{"name":"VIM","slug":"Tools/VIM","permalink":"https://zirho.github.io/categories/Tools/VIM/"}]},{"title":"Refactor legacy code today with webpack!","slug":"webpack-to-legacy","date":"2016-08-14T04:59:01.000Z","updated":"2020-01-07T17:09:19.508Z","comments":true,"path":"2016/08/13/webpack-to-legacy/","link":"","permalink":"https://zirho.github.io/2016/08/13/webpack-to-legacy/","excerpt":"","text":"All codes are on github with different branches associated with process for demonstration Github code https://github.com/zirho/webpack-to-legacy Legacy code I recently started working at SteelHouse. Here, we have several different teams working on different projects. One of the projects is an old and out-dated jquery-based web app backed by php server side process. Very classic. 🌵 It may be incorrect to call it a legacy code, but for me, it's very hard to read and add more functions to it. Some of the JavaScript file contain more than 12,000 lines of code. Mostly, it's not fun working with it. I decided to start to refactor some of codes to ES6 modular approach. Objectives When it comes to refactoring legacy code, one of the most important factors is workflow. I have a couple of side projects in react, redux, and ES6 with webpack and I really like it. Especially, HMR(Hot Module Replacement) has blown my mind. Thanks to contributers to webpack and Dan! 🍻 I knew that this magical thing called HMR can help us make our workflow as smooth as possible. So I decided to incorporate that in our project. Here are my goals. Webpack with HMR Using ES6 Integrating legacy code with ease Preparation setup npm package If you have not initialized your project with npm yet, this is the perfect time to do so. 1$ npm init --y Add few run-scripts to package.json 1234"scripts": { "dev": "webpack-dev-server --inline --hot --config webpack.config.dev.js", "build": "webpack"}, install related packages Install webpack and other stuff for workflow and transpiling. 1$ npm i -D webpack webpack-dev-server path babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 config webpack create webpack.config.dev.js file. below is minimal config for webpack-dev-server. 12345678910111213141516171819202122var webpack = require('webpack')module.exports = { entry: { 'hmr': 'webpack-dev-server/client?http://localhost:8080', 'hmr2': 'webpack/hot/dev-server', 'entryname': './js/entry.js', }, output: { path: path.join(__dirname, 'dist'), filename: './bundle.js', }, module: { loaders: [ { test: /\\.js/, loader: 'babel', include: __dirname + '/src' }, ] },} Integrating with legacy code The most tricky part is that legacy code messes up global scope. And they reference each other for no reason. One of the JS file has been blown up with more than 12,000 lines of plain old JavaScript. So one thing that I had to figure out was this: Everything that I create in new files has to be available in global scope almost automatically. Which can be achieved like the steps below. Let's say we have a file called legacy.js that contains a function called plus and it is being used everywhere in legacy.js I take that function from legacy.js and put it in a newly created file called utils.js and have it exported like below. 123export function add(num1, num2) { return num1 + num2;} Now we want that function in global scope. Let's say webpack will generate the output file bundle.js with the entry file called entry.js. It would look like this: 12345678910111213// Accept hot module reloading// To enable HMR with webpack, you have to make sure to have these lines of code in the entry files to accept hot module reloading.if (process.env.NODE_ENV !== 'production') { if (module.hot) { module.hot.accept() }}// using namespace import to get all exported things from the fileimport * as Utils from './utils'// injecting every function exported from utils.js into global scope(window)Object.assign(window, Utils) And put this output file before the script tag for legacy.js in html. Then, logacy.js will get to access global function add. 12<script type="text/javascript" src="bundle.js"></script><script type="text/javascript" src="legacy.js"></script> Now all the goodies If I have that set in my workflow, I can refactor the extracted function in ES6 syntax like this. 123export const add = (num1, num2) => { return num1 + num2;} I can add as many functions, objects, and variables as I want in utils.js file in ES6 ways, and those will be in global scope automatically. No more refreshing pages everytime you change js files. This is huge for me!! Result 💯 I really enjoy coding in ES6 by-passing legacy code these days. Also, sometimes along the way, some functions are only used in ES6 codes then I can remove it from global scope. That way, it will get cleaner and cleaner. Now the biggest file came down to almost 10,000 lines of codes. This method is looking very positive. Plus, I get to use npm packages and have some unit testability. Maybe I will post something about unit tests on ES6 codes later on. Happy coding! 🖥 🍺 All codes are on github with different branches associated with process for demonstration Github code https://github.com/zirho/webpack-to-legacy","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"https://zirho.github.io/tags/es6/"},{"name":"es2015","slug":"es2015","permalink":"https://zirho.github.io/tags/es2015/"},{"name":"babel","slug":"babel","permalink":"https://zirho.github.io/tags/babel/"},{"name":"webpack","slug":"webpack","permalink":"https://zirho.github.io/tags/webpack/"},{"name":"legacy code","slug":"legacy-code","permalink":"https://zirho.github.io/tags/legacy-code/"},{"name":"refactor","slug":"refactor","permalink":"https://zirho.github.io/tags/refactor/"}],"keywords":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}]},{"title":"Private properties for ES6 JavaScript","slug":"es6-privacy","date":"2016-06-10T21:52:05.000Z","updated":"2020-01-07T17:09:19.492Z","comments":true,"path":"2016/06/10/es6-privacy/","link":"","permalink":"https://zirho.github.io/2016/06/10/es6-privacy/","excerpt":"","text":"In ES5 JavaScript, it is relatively easy to have private properties in prototype definition. It goes like this. 1234567891011121314151617181920212223242526272829303132333435363738394041// es5 constructor(as class) definition // JavaScript is prototype-based languagefunction Person(firstname, lastname) { // public property this.firstname = firstname; this.lastname = lastname; // private property var records = [{type: 'in', amount: 0}]; // public function // it needs to be instance method to access private properties this.addTransaction = function(trans) { if (trans.hasOwnProperty('type') && trans.hasOwnProperty('amount')) { records.push(trans); } } // public function this.getBalance = function() { var total = 0; records.forEach(function(record){ if (record.type === 'in') { total += record.amount; } else { total -= record.amount; } }); return total; }}// Prototype functionPerson.prototype.getFullName = function() { return this.firstname + \" \" + this.lastname;};module.exports = Person; Although, in es6, it is not that easy to achieve and there are many options you can choose. You can find all of those here, Managing private data, JS class definition In my opinion, weekmap method is the best, if you need perfect privacy. Other than that, you could use conventional approach using underscore(_) in front of private property names. But I found most cases can be solved by modularity approach which looks something like the code below. In a file such as person.js 12345678910111213141516171819202122232425262728293031let records = [{type: 'in', amount: 0}];export class Person { constructor(first, last) { this.firstname = first; this.lastname = last; } addTransaction(trans) { if (trans.hasOwnProperty('type') && trans.hasOwnProperty('amount')) { records.push(trans); } } getBalance() { let total = 0; records.forEach(record => { total += record.amount; }); return total; } getFullName() { return `${this.firstname} ${this.lastname}`; }} record property is used as a private data storage and can NOT be accessed out of the modular scope. To use this class, you can just import and use. Below are unit tests that I wrote against to the Person class. 1234567891011121314151617import { Person } from './person.js';describe('Person es6 class', function () { var person; beforeEach(function () { person = new Person('Andrew', 'Lincoln'); }); it('should be initiated with first name and last name', function () { expect(person.getFullName()).toEqual('Andrew Lincoln'); }); it(\"should be initiated with 0 balance\", function() { expect(person.getBalance()).toEqual(0); });}); Hope this helps.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"https://zirho.github.io/tags/es6/"},{"name":"es2015","slug":"es2015","permalink":"https://zirho.github.io/tags/es2015/"},{"name":"private property","slug":"private-property","permalink":"https://zirho.github.io/tags/private-property/"},{"name":"module","slug":"module","permalink":"https://zirho.github.io/tags/module/"}],"keywords":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}]},{"title":"Unit testing JavaScript ES6 code with Karma","slug":"karma-es6","date":"2016-06-06T21:55:52.000Z","updated":"2020-01-07T17:10:33.513Z","comments":true,"path":"2016/06/06/karma-es6/","link":"","permalink":"https://zirho.github.io/2016/06/06/karma-es6/","excerpt":"","text":"This posting is referenced to this post. Unit Testing ES6 codes To run unit tests against ES6 codes, we need a way to transpile the codes before the unit test runner(karma) processes them. Here we use webpack to transpile ES6 codes with babel loader using babel es2015 preset. But the original posting is outdated since babel is now split in serveral modules. We need few of them to get transpiling working. The complete code is on a github repository. Karma for es6 respository Prerequisites Install Node.jsThe best way to install Node.js is with nvm. cURL: $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh Wget: $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh Once nvm is installed, restart the terminal and run the following command to install Node.js. $ nvm install 4 Alternatively, download and run the installer. Create project directory Create a directory. 1$ mkdir karma-testing; cd karma-testing Install related modules Install node modules. 123$ npm init --y$ npm i -D karma karma-phantomjs-launcher phantomjs-prebuilt karma-jasmine jasmine-core babel-core babel-polyfill babel-loader babel-preset-es2015 webpack karma-webpack$ npm i -g karma-cli Add or change npm script attribute to package.json 123\"scripts\": { \"tests\": \"karma start\"}, Generate karma config file karma.conf.js 1$ vi karma.conf.js 123456789101112131415161718192021222324module.exports = function(config) { config.set({ browsers: ['PhantomJS'], files: [ { pattern: 'test-context.js', watched: false } ], frameworks: ['jasmine'], preprocessors: { 'test-context.js': ['webpack'] }, webpack: { module: { loaders: [ { test: /\\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015' } ] }, watch: true }, webpackServer: { noInfo: true } });}; Provide context including testing files The codes below are from this post. test-context.js 1$ vi test-context.js 1234require(\"babel-polyfill\");var context = require.context('./source', true, /-spec\\.js$/);context.keys().forEach(context); source/calculator.js 1$ vi source/calculator.js 12345678export class Calculator{ add(op1,op2){ return op1 + op2; } subtract(op1,op2){ return op1 - op2; }} source/calculator-spec.js 1$ vi source/calculator-spec.js 12345678910111213import {Calculator} from './calculator';describe('Calculator', () => { it('should add two numbers', () => { let calculator = new Calculator(); let sum = calculator.add(1,4); expect(sum).toBe(5); }); it('should subtract two numbers', () => { let calculator = new Calculator(); let sum = calculator.subtract(4,1); expect(sum).toBe(3); });}); Kicking off unit testing 1$ npm run tests Enjoy testing ES6 codes! The complete code is on a github repository. Karma for es6 respository .","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"},{"name":"Node.js","slug":"JavaScript/Node-js","permalink":"https://zirho.github.io/categories/JavaScript/Node-js/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"https://zirho.github.io/tags/es6/"},{"name":"es2015","slug":"es2015","permalink":"https://zirho.github.io/tags/es2015/"},{"name":"karma","slug":"karma","permalink":"https://zirho.github.io/tags/karma/"},{"name":"babel","slug":"babel","permalink":"https://zirho.github.io/tags/babel/"},{"name":"webpack","slug":"webpack","permalink":"https://zirho.github.io/tags/webpack/"},{"name":"Unit Testing","slug":"Unit-Testing","permalink":"https://zirho.github.io/tags/Unit-Testing/"}],"keywords":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"},{"name":"Node.js","slug":"JavaScript/Node-js","permalink":"https://zirho.github.io/categories/JavaScript/Node-js/"}]},{"title":"How to setup a blog on github with Hexo","slug":"hexo","date":"2016-06-04T15:02:12.000Z","updated":"2020-01-07T17:09:19.496Z","comments":true,"path":"2016/06/04/hexo/","link":"","permalink":"https://zirho.github.io/2016/06/04/hexo/","excerpt":"","text":"You can just copy & paste the codes below to setup a blog. Related links Hexo docs Hexo themes github pages Prerequisites Install Git Windows: Download & install git. Mac: Install it with Homebrew, MacPorts or installer. Linux (Ubuntu, Debian): sudo apt-get install git-core Linux (Fedora, Red Hat, CentOS): sudo yum install git-core Install Node.jsThe best way to install Node.js is with nvm. cURL: $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh Wget: $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh Once nvm is installed, restart the terminal and run the following command to install Node.js. $ nvm install 4 Alternatively, download and run the installer. Install HexoOnce all the requirements are installed, you can install Hexo with npm. $ npm install -g hexo-cli Setting up a github repository You should change {blogname} with your desired word. Setup a github repo with the name, {blogname}.github.io ex) zirho.github.io https://github.com/zirho/zirho.github.io Setting up Hexo with Github Setup a blog 1234$ hexo init {blogname}$ cd {blogname}$ npm i$ git init This will generate the {blogname} folder and install dependencies. Install a theme Browse here to find out something cool. Once you decide your mind, fork it to customize it or just get the github repo url from the theme info. ex) https://github.com/ppoffice/hexo-theme-minos 1$ git submodule add {theme-github-url} themes/{theme-name} Copy _config.yml.example to _config.yml 1$ cp themes/{theme-name}/_config.yml.example themes/{theme-name}/_config.yml *Some themes may differ on _config.yml.example file name Refer to the theme docs Update _config.yml to use newly installed theme. (Don't get confused with the theme config file) 1$ vi _config.yml Find theme attribute and change it. ex) theme: hueman 1theme: {theme-name} Setup blog & deploy info Edit _config.yml in root folder. (Don't get confused with the theme config file) 1$ vi _config.yml Update blog info as desired. Below is my own for instance. 123456title: CodePaste subtitle:description:author: Joshua Youngjae Jilanguage: entimezone: America/Los_Angeles Add below code at the bottom of the file for deploy on github repo. 12345deploy: type: git repo: {your github repo url} branch: master message: \"Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}\" Deploy the blog 12$ npm i -S hexo-deployer-git$ hexo deploy At this point, you should be able to see your blog at http://{blogname}.github.io. Add the source to the github repository (optional) To maintain version of the code, you can make another branch and push the commits. 123$ git remote add origin {your-git-repo-url}$ git checkout -b source $ git push origin source Deploy new post Adding a new post 1$ hexo new {postname} Edit the new post file 1$ vi source/_posts/{postname}.md Regenerate files and deploy at once 1$ hexo generate -d Happy posting!","categories":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"Github","slug":"Technology/Github","permalink":"https://zirho.github.io/categories/Technology/Github/"}],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://zirho.github.io/tags/hexo/"},{"name":"blog","slug":"blog","permalink":"https://zirho.github.io/tags/blog/"},{"name":"github","slug":"github","permalink":"https://zirho.github.io/tags/github/"},{"name":"github pages","slug":"github-pages","permalink":"https://zirho.github.io/tags/github-pages/"},{"name":"deploy","slug":"deploy","permalink":"https://zirho.github.io/tags/deploy/"}],"keywords":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"Github","slug":"Technology/Github","permalink":"https://zirho.github.io/categories/Technology/Github/"}]},{"title":"2012 jQuery Conference in SF","slug":"jquery-conf","date":"2012-08-31T08:20:00.000Z","updated":"2020-01-07T17:09:19.496Z","comments":true,"path":"2012/08/31/jquery-conf/","link":"","permalink":"https://zirho.github.io/2012/08/31/jquery-conf/","excerpt":"","text":"While I was staying in Los Angeles, I found that a jQuery Conference was being held in San Francisco. I was very excited about that. It was around $300 for a one day session, but totally worth the money. I drove all the way up to SF from LA. I considered flying but I just got my roadster Z4, so I drove all the way to SF. It was a lot of fun to drive! This was the first time for me to join a tech conference in US. I was kind of worried about fully comprehending it, but Ben was careful enough to talk loud and clear for all international comers. And the slide show definitly helped as well. Ben started the session by giving a basic review of jQuery. All of the attendents nodded along since most of them are aquinted with jQuery and JavaScript. Ben had a good control of speed based on the level of topic so it was very easy for me to follow along. Sharing docs from the conf. I don't think it will be a problem. Docs here You need to install nodejs. And put it in web root folder. I personally want to highlight these. Using namespace to maintain event handlers. Mange handers and objects using event boubling. IIFE Ben emphasised the IIFE part and wanted us to checkout a posting for IIFE later. Here I asked him to take a pic with me :) This was the 4th visit to SF for me there wasn't a lot of new things to do. But it was the first time taking my car so I drove around the city. It gets very cold at night so try to keep yourself warm. I hope I can make it to the next one.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/tags/JavaScript/"},{"name":"jQuery","slug":"jQuery","permalink":"https://zirho.github.io/tags/jQuery/"},{"name":"Conference","slug":"Conference","permalink":"https://zirho.github.io/tags/Conference/"},{"name":"SF","slug":"SF","permalink":"https://zirho.github.io/tags/SF/"}],"keywords":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zirho.github.io/categories/JavaScript/"}]},{"title":"Cloning your web, PipingXE","slug":"piping-xe","date":"2011-02-11T12:46:00.000Z","updated":"2020-01-07T17:09:19.502Z","comments":true,"path":"2011/02/11/piping-xe/","link":"","permalink":"https://zirho.github.io/2011/02/11/piping-xe/","excerpt":"","text":"What is XE? XE stands for XpessEngine. It is an open source CMS such as Wordpress or joomla. Sponsored by NHN in South Korea. Find out more I previously developed a wizard module(WizardXE) for the rapid composition of a website. I was the winner of the first competition. Find out more PipingXE is the second module that I built to deploy or clone a website from a server to another server or just in the same machine for different environment. Cloning? How? I built a module to setup an exposing API for XHR request for a specific website. It gives all setup information for a website as a format of a serialized php object. The receiving part deserializes it and use it to build a website. No more repetitive or redundant processes. Learn more about this. Enjoy cloning websites!","categories":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"OpenSource","slug":"Technology/OpenSource","permalink":"https://zirho.github.io/categories/Technology/OpenSource/"}],"tags":[{"name":"XE","slug":"XE","permalink":"https://zirho.github.io/tags/XE/"},{"name":"Open-source","slug":"Open-source","permalink":"https://zirho.github.io/tags/Open-source/"},{"name":"PHP","slug":"PHP","permalink":"https://zirho.github.io/tags/PHP/"},{"name":"CMS","slug":"CMS","permalink":"https://zirho.github.io/tags/CMS/"},{"name":"contribute","slug":"contribute","permalink":"https://zirho.github.io/tags/contribute/"}],"keywords":[{"name":"Technology","slug":"Technology","permalink":"https://zirho.github.io/categories/Technology/"},{"name":"OpenSource","slug":"Technology/OpenSource","permalink":"https://zirho.github.io/categories/Technology/OpenSource/"}]}]}