-
Notifications
You must be signed in to change notification settings - Fork 1
/
feed.xml
382 lines (207 loc) · 75.8 KB
/
feed.xml
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>CodePaste</title>
<link href="/feed.xml" rel="self"/>
<link href="https://zirho.github.io/"/>
<updated>2020-01-07T17:09:19.508Z</updated>
<id>https://zirho.github.io/</id>
<author>
<name>Joshua Youngjae Ji</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Syntax-agnostic snippets for Ultisnips</title>
<link href="https://zirho.github.io/2017/07/12/vim-ultisnips/"/>
<id>https://zirho.github.io/2017/07/12/vim-ultisnips/</id>
<published>2017-07-13T02:01:21.000Z</published>
<updated>2020-01-07T17:09:19.508Z</updated>
<content type="html"><![CDATA[<img src="/2017/07/12/vim-ultisnips/title.jpg" title="ultisnips javascript, opting a semicolon"><ul><li>This post is for users who uses<ul><li>vim or neovim</li><li>Ultisnips</li><li>one of plugin managers</li></ul></li></ul><h1>Motivation</h1><p>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.</p><p>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.</p><p>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.</p><p>So I used to have something like this in my Ultisnip snippet files. With comma, without comma.</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">snippet log</span><br><span class="line">console.log(${1:${VISUAL}})</span><br><span class="line">endsnippet</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">snippet log;</span><br><span class="line">console.log(${1:${VISUAL}});</span><br><span class="line">endsnippet</span><br></pre></td></tr></table></figure><p>This works, but it gets repetitive.</p><p>So I tried to figure out how I can achieve this easily.</p><p>It can be done like this.<br><a href="https://github.com/honza/vim-snippets/blob/master/UltiSnips/javascript.snippets#L11-L15" rel="external nofollow noopener noreferrer" target="_blank">Ultisnip javascript</a></p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">global !p</span><br><span class="line">from javascript_snippets import (</span><br><span class="line"> semi, space_before_function_paren, keyword_spacing</span><br><span class="line"> )</span><br><span class="line">endglobal</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">snippet ret "Return statement"</span><br><span class="line">return ${VISUAL}$0`!p snip.rv = semi(snip)`</span><br><span class="line">endsnippet</span><br></pre></td></tr></table></figure><p><strong>This happens in this order.</strong></p><ol><li>Define ultisnip variable in <code>.vimrc</code>. Vim will pick this up.</li></ol> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let g:ultisnips_javascript = {</span><br><span class="line"> \ 'keyword-spacing': 'always',</span><br><span class="line"> \ 'semi': 'never',</span><br><span class="line"> \ 'space-before-function-paren': 'always',</span><br><span class="line"> \ }</span><br></pre></td></tr></table></figure><ol start="2"><li>Ultisnip plugin picks that options up and has them available in ultisnip files.</li><li>When snippet is being called, it prints out semicolons based on the option.</li></ol><p>This looks great but what if I want to set this up differently per project?</p><p>This is where <code>vim-localrc</code> comes into play.</p><p><a href="https://github.com/thinca/vim-localrc" rel="external nofollow noopener noreferrer" target="_blank">vim-localrc</a></p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── .local.vimrc</span><br><span class="line">└── folder1</span><br><span class="line"> ├── .local.vimrc</span><br><span class="line"> └── folder2</span><br><span class="line"> └── .local.vimrc</span><br></pre></td></tr></table></figure><p>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.</p><p>Here's how you can set it up.</p><h1>Install plugins</h1><h3>Add lines in .vimrc</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Bundle 'thinca/vim-localrc'</span><br></pre></td></tr></table></figure><h3>Run below commands to install the plugin in vim.</h3><p>First one applies changes to vim while you are opening .vimrc file.</p><p>Second does installing plugins. (this may differ by the manager)</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">:so %</span><br><span class="line">:PluginInstall</span><br></pre></td></tr></table></figure><h1>Configs</h1><h3>Put global config</h3><p><code>~/.vimrc</code> for vim<code>~/.config/nvim/init.vim</code> for neovim</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let g:ultisnips_javascript = {</span><br><span class="line"> \ 'keyword-spacing': 'always',</span><br><span class="line"> \ 'semi': 'never',</span><br><span class="line"> \ 'space-before-function-paren': 'always',</span><br><span class="line"> \ }</span><br></pre></td></tr></table></figure><h3>Put local config for the project to use a different setup</h3><p><code>${PROJECT_DIR}/.local.vimrc</code></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let g:ultisnips_javascript = {</span><br><span class="line"> \ 'semi': 'always',</span><br><span class="line"> \ }</span><br></pre></td></tr></table></figure><h1>Custom snippets</h1><h3>my own snippets for javascript</h3><ul><li>it's usually in <code>~/.vim/UltiSnips/javascript.snippets</code></li></ul><p>put this at the top of the file</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">global !p</span><br><span class="line">from javascript_snippets import (</span><br><span class="line">semi, space_before_function_paren, keyword_spacing</span><br><span class="line">)</span><br><span class="line">endglobal</span><br></pre></td></tr></table></figure><p>Use it like this</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">snippet log</span><br><span class="line">console.log(${1:${VISUAL}})`!p snip.rv = semi(snip)`${0}</span><br><span class="line">endsnippet</span><br></pre></td></tr></table></figure><p>Happy coding! 🖥 🍺</p>]]></content>
<summary type="html">
<img src="/2017/07/12/vim-ultisnips/title.jpg" title="ultisnips javascript, opting a semicolon">
<ul>
<li>This post is for users who uses
<u
</summary>
<category term="Tools" scheme="https://zirho.github.io/categories/Tools/"/>
<category term="VIM" scheme="https://zirho.github.io/categories/Tools/VIM/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="vim" scheme="https://zirho.github.io/tags/vim/"/>
<category term="Ultisnips" scheme="https://zirho.github.io/tags/Ultisnips/"/>
<category term="snippets" scheme="https://zirho.github.io/tags/snippets/"/>
</entry>
<entry>
<title>Common Responsive Layout</title>
<link href="https://zirho.github.io/2017/04/17/responsive-layout/"/>
<id>https://zirho.github.io/2017/04/17/responsive-layout/</id>
<published>2017-04-18T00:01:33.000Z</published>
<updated>2020-01-07T17:09:19.503Z</updated>
<content type="html"><![CDATA[<img src="/2017/04/17/responsive-layout/layout-title.png" title="Layout"><p><a href="https://github.com/zirho/layout" rel="external nofollow noopener noreferrer" target="_blank">Responsive Layout</a></p><h1>Motivation</h1><p>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.</p><p>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.</p><p>The features that I want to include in this open-sourced repo are</p><ul><li>Top fixed header</li><li>Right side fixed sidebar</li><li>Sticky footer</li><li>Responsive sidebar</li><li>Cross browsing support</li><li>Realtime updates for changes (browser-sync)</li></ul><p>These features are heavily inspired by YouTube.</p><p>Hope it helps anyone out there :)</p>]]></content>
<summary type="html">
<img src="/2017/04/17/responsive-layout/layout-title.png" title="Layout">
<p><a href="https://github.com/zirho/layout" rel="external nofollo
</summary>
<category term="Technology" scheme="https://zirho.github.io/categories/Technology/"/>
<category term="OpenSource" scheme="https://zirho.github.io/categories/Technology/OpenSource/"/>
<category term="HTML5" scheme="https://zirho.github.io/tags/HTML5/"/>
<category term="CSS3" scheme="https://zirho.github.io/tags/CSS3/"/>
<category term="Cross Browsing" scheme="https://zirho.github.io/tags/Cross-Browsing/"/>
<category term="Layout" scheme="https://zirho.github.io/tags/Layout/"/>
</entry>
<entry>
<title>Firebase Unit Testing</title>
<link href="https://zirho.github.io/2017/01/11/firebase-unit-test/"/>
<id>https://zirho.github.io/2017/01/11/firebase-unit-test/</id>
<published>2017-01-11T18:34:32.000Z</published>
<updated>2020-01-07T17:09:19.493Z</updated>
<content type="html"><![CDATA[<img src="/2017/01/11/firebase-unit-test/firebase-title-image.png" title="Firebase with Mocha"><p><a href="https://github.com/zirho/firebase-unit-test" rel="external nofollow noopener noreferrer" target="_blank">Github: Firebase Unit Test</a></p><h1>Motivation</h1><p>Firebase is a very powerful tool.</p><p>When you build apps on firebase, you want to make sure to set up accessibility rules for database correctly.</p><p>That's why firebase itself has a small UI portion of it for testing it out.</p><img src="/2017/01/11/firebase-unit-test/firebase-simulator.png" title="Firebase simulator ui"><p>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.</p><p>Also, these tests can be used for changes in the future.</p><p>Yeah, BDD or TDD on firebase can be enabled on database scope with this approach.</p><p>My github repo demonstrates how you can accomplish this.</p><p><a href="https://github.com/zirho/firebase-unit-test" rel="external nofollow noopener noreferrer" target="_blank">Firebase Unit Test</a></p><h1>Features</h1><h3>Authenticated user interactions</h3><p><a href="https://github.com/zirho/firebase-unit-test/blob/master/src/auth.spec.js" rel="external nofollow noopener noreferrer" target="_blank">Authenticated user test</a></p><p>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.</p><p>You can find more details here.<a href="https://firebase.google.com/docs/database/security/" rel="external nofollow noopener noreferrer" target="_blank">Firebase security rules</a></p><p>So when you run tests, you want the test runner to act like it's been logged in as a certain user.</p><p>To achieve that, you want a tool built by firebase team, called firebase-admin.</p><p>You can login by UID with this tool and run tests with the user session.</p><h3>Unauthenticated user interactions</h3><p><a href="https://github.com/zirho/firebase-unit-test/blob/master/src/unauth.spec.js" rel="external nofollow noopener noreferrer" target="_blank">Unauthenticated user test</a></p><p>Your app can have multiple instances of firebase.</p><p>Creating one with another config is very easy.</p><p>Newly created instance will be unauthenticated, so you can use it to test unauth behaviors.</p><p><a href="https://github.com/zirho/firebase-unit-test/blob/master/src/firebase.js#L8-L12" rel="external nofollow noopener noreferrer" target="_blank">Creating another firebase instance without a user session</a></p><h1>Conclusion</h1><p>I wrote this repo for testing database rules.</p><p>But this can be used to solve other various problems, such as database CRUD.</p><p>I hope this helps anyone interested in running tests on firebase.</p><p>Enjoy!</p><p><a href="https://github.com/zirho/firebase-unit-test" rel="external nofollow noopener noreferrer" target="_blank">Github: Firebase Unit Test</a></p>]]></content>
<summary type="html">
<img src="/2017/01/11/firebase-unit-test/firebase-title-image.png" title="Firebase with Mocha">
<p><a href="https://github.com/zirho/firebas
</summary>
<category term="Technology" scheme="https://zirho.github.io/categories/Technology/"/>
<category term="Firebase" scheme="https://zirho.github.io/categories/Technology/Firebase/"/>
<category term="Unit testing" scheme="https://zirho.github.io/categories/Technology/Firebase/Unit-testing/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="es2015" scheme="https://zirho.github.io/tags/es2015/"/>
<category term="firebase" scheme="https://zirho.github.io/tags/firebase/"/>
<category term="unit test" scheme="https://zirho.github.io/tags/unit-test/"/>
<category term="mocha" scheme="https://zirho.github.io/tags/mocha/"/>
</entry>
<entry>
<title>Setup local eslint for JavaScript for VIM with syntastic</title>
<link href="https://zirho.github.io/2016/10/06/vim-syntastic-local/"/>
<id>https://zirho.github.io/2016/10/06/vim-syntastic-local/</id>
<published>2016-10-07T01:01:21.000Z</published>
<updated>2020-01-07T17:09:19.506Z</updated>
<content type="html"><![CDATA[<img src="/2016/10/06/vim-syntastic-local/title.png" title="Vim + Syntastic + local eslint"><h1>Use one of plugin managers</h1><p><a href="https://github.com/junegunn/vim-plug/" rel="external nofollow noopener noreferrer" target="_blank">Vim-Plug</a> <br><a href="https://github.com/Shougo/neobundle.vim" rel="external nofollow noopener noreferrer" target="_blank">NeoBundle</a> <br><a href="https://github.com/gmarik/Vundle.vim" rel="external nofollow noopener noreferrer" target="_blank">Vundle</a> <br><a href="https://github.com/tpope/vim-pathogen" rel="external nofollow noopener noreferrer" target="_blank">Pathogen</a> <br><a href="https://github.com/MarcWeber/vim-addon-manager" rel="external nofollow noopener noreferrer" target="_blank">Vim-Addon-Manager</a> <br></p><h1>Install plugins</h1><h3>Add lines in .vimrc</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Plug 'scrooloose/syntastic'</span><br><span class="line">Plug 'mtscout6/syntastic-local-eslint.vim'</span><br></pre></td></tr></table></figure><h3>Run below commands to install those two plugins in vim.</h3><p>First one applies changes to vim while you are opening .vimrc file.<br>Second does installing plugins. (this may differ by the manager)</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">:so %</span><br><span class="line">:PlugInstall</span><br></pre></td></tr></table></figure><h1>Install Eslint as a checker for JavaScript</h1><p>Order matters here.</p><p>Please make sure remove global eslint first.</p><p>Install eslint in local repo</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D eslint</span><br></pre></td></tr></table></figure><p>Then, install eslint-cli package in global scope.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g eslint-cli</span><br></pre></td></tr></table></figure><p>Make sure that you can still run <code>eslint</code> but it will run local eslint instead.</p><p>Now let's configure the syntastic in .vimrcThere are tons of options in syntastic but this may be a good start.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">" syntactic</span><br><span class="line">set statusline+=%#warningmsg#</span><br><span class="line">set statusline+=%{SyntasticStatuslineFlag()}</span><br><span class="line">set statusline+=%*</span><br><span class="line"></span><br><span class="line">let g:syntastic_always_populate_loc_list = 1</span><br><span class="line">let g:syntastic_loc_list_height = 5</span><br><span class="line">let g:syntastic_auto_loc_list = 1</span><br><span class="line">let g:syntastic_check_on_open = 1</span><br><span class="line">let g:syntastic_check_on_wq = 1</span><br><span class="line">let g:syntastic_javascript_checkers = ['eslint']</span><br><span class="line"></span><br><span class="line">let g:syntastic_error_symbol = '❌'</span><br><span class="line">let g:syntastic_style_error_symbol = '⁉️'</span><br><span class="line">let g:syntastic_warning_symbol = '⚠️'</span><br><span class="line">let g:syntastic_style_warning_symbol = '💩'</span><br><span class="line"></span><br><span class="line">highlight link SyntasticErrorSign SignColumn</span><br><span class="line">highlight link SyntasticWarningSign SignColumn</span><br><span class="line">highlight link SyntasticStyleErrorSign SignColumn</span><br><span class="line">highlight link SyntasticStyleWarningSign SignColumn</span><br></pre></td></tr></table></figure><h1>init eslint for repository</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">eslint --init</span><br></pre></td></tr></table></figure><p>Follow the instructions and answer the questions.</p><p>Now you are all set.</p><img src="/2016/10/06/vim-syntastic-local/example.png" title="Example for Vim + Syntastic + local eslint">]]></content>
<summary type="html">
<img src="/2016/10/06/vim-syntastic-local/title.png" title="Vim + Syntastic + local eslint">
<h1>Use one of plugin managers</h1>
<p><a href=
</summary>
<category term="Tools" scheme="https://zirho.github.io/categories/Tools/"/>
<category term="VIM" scheme="https://zirho.github.io/categories/Tools/VIM/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="vim" scheme="https://zirho.github.io/tags/vim/"/>
<category term="eslint" scheme="https://zirho.github.io/tags/eslint/"/>
<category term="syntastic" scheme="https://zirho.github.io/tags/syntastic/"/>
</entry>
<entry>
<title>Refactor legacy code today with webpack!</title>
<link href="https://zirho.github.io/2016/08/13/webpack-to-legacy/"/>
<id>https://zirho.github.io/2016/08/13/webpack-to-legacy/</id>
<published>2016-08-14T04:59:01.000Z</published>
<updated>2020-01-07T17:09:19.508Z</updated>
<content type="html"><![CDATA[<p> </p><img src="/2016/08/13/webpack-to-legacy/wtf_reading.jpg" title="WHYYYY?"><p><strong>All codes are on github with different branches associated with process for demonstration</strong></p><p><a href="https://github.com/zirho/webpack-to-legacy" rel="external nofollow noopener noreferrer" target="_blank">Github code</a> <a href="https://github.com/zirho/webpack-to-legacy" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/zirho/webpack-to-legacy</a></p><h1>Legacy code</h1><p>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. 🌵</p><p>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.</p><p>I decided to start to refactor some of codes to ES6 modular approach.</p><hr><h1>Objectives</h1><p>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 <a href="https://github.com/gaearon" rel="external nofollow noopener noreferrer" target="_blank">Dan</a>! 🍻</p><p>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.</p><p>Here are my goals.</p><ol><li>Webpack with HMR</li><li>Using ES6</li><li>Integrating legacy code with ease</li></ol><hr><h1>Preparation</h1><ol><li><p>setup npm package</p><p>If you have not initialized your project with npm yet, this is the perfect time to do so.</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm init --y</span><br></pre></td></tr></table></figure><p>Add few run-scripts to <code>package.json</code></p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">"scripts": {</span><br><span class="line"> "dev": "webpack-dev-server --inline --hot --config webpack.config.dev.js",</span><br><span class="line"> "build": "webpack"</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li><li><p>install related packages</p><p>Install webpack and other stuff for workflow and transpiling.</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm i -D webpack webpack-dev-server path babel-core babel-loader babel-preset-es2015 babel-preset-stage-2</span><br></pre></td></tr></table></figure></li><li><p>config webpack</p><p>create <code>webpack.config.dev.js</code> file. below is minimal config for webpack-dev-server.</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">var webpack = require('webpack')</span><br><span class="line"></span><br><span class="line">module.exports = {</span><br><span class="line"> entry: {</span><br><span class="line"> 'hmr': 'webpack-dev-server/client?http://localhost:8080',</span><br><span class="line"> 'hmr2': 'webpack/hot/dev-server',</span><br><span class="line"> 'entryname': './js/entry.js',</span><br><span class="line"> },</span><br><span class="line"> output: {</span><br><span class="line"> path: path.join(__dirname, 'dist'),</span><br><span class="line"> filename: './bundle.js',</span><br><span class="line"> },</span><br><span class="line"> module: {</span><br><span class="line"> loaders: [</span><br><span class="line"> {</span><br><span class="line"> test: /\.js/,</span><br><span class="line"> loader: 'babel',</span><br><span class="line"> include: __dirname + '/src'</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><hr><h1>Integrating with legacy code</h1><p>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.</p><p>So one thing that I had to figure out was this:</p><blockquote><p>Everything that I create in new files has to be available in global scope <strong>almost</strong> automatically.</p></blockquote><p>Which can be achieved like the steps below.</p><ol><li><p>Let's say we have a file called <code>legacy.js</code> that contains a function called <code>plus</code>and it is being used everywhere in <code>legacy.js</code></p></li><li><p>I take that function from <code>legacy.js</code> and put it in a newly created file called <code>utils.js</code> and have it exported like below.</p></li></ol> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">export function add(num1, num2) {</span><br><span class="line"> return num1 + num2;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="3"><li>Now we want that function in global scope.</li></ol><p>Let's say webpack will generate the output file <code>bundle.js</code> with the entry file called <code>entry.js</code>.It would look like this:</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// Accept hot module reloading</span><br><span class="line">// 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.</span><br><span class="line">if (process.env.NODE_ENV !== 'production') {</span><br><span class="line"> if (module.hot) {</span><br><span class="line"> module.hot.accept()</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// using namespace import to get all exported things from the file</span><br><span class="line">import * as Utils from './utils'</span><br><span class="line"></span><br><span class="line">// injecting every function exported from utils.js into global scope(window)</span><br><span class="line">Object.assign(window, Utils)</span><br></pre></td></tr></table></figure><ol start="4"><li>And put this output file before the script tag for <code>legacy.js</code> in html.</li></ol><p>Then, logacy.js will get to access global function <code>add</code>.</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><script type="text/javascript" src="bundle.js"></script></span><br><span class="line"><script type="text/javascript" src="legacy.js"></script></span><br></pre></td></tr></table></figure><h3>Now all the goodies</h3><p>If I have that set in my workflow,</p><ul><li>I can refactor the extracted function in ES6 syntax like this.</li></ul> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">export const add = (num1, num2) => {</span><br><span class="line"> return num1 + num2;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><p>I can add as many functions, objects, and variables as I want in <code>utils.js</code> file in ES6 ways, and those will be in global scope automatically.</p></li><li><p>No more refreshing pages everytime you change js files. This is huge for me!!</p></li></ul><h1>Result 💯</h1><p>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.</p><p>Now the biggest file came down to almost 10,000 lines of codes.This method is looking very positive.</p><p>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.</p><p>Happy coding! 🖥 🍺</p><p><strong>All codes are on github with different branches associated with process for demonstration</strong></p><p><a href="https://github.com/zirho/webpack-to-legacy" rel="external nofollow noopener noreferrer" target="_blank">Github code</a> <a href="https://github.com/zirho/webpack-to-legacy" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/zirho/webpack-to-legacy</a></p>]]></content>
<summary type="html">
<p> </p>
<img src="/2016/08/13/webpack-to-legacy/wtf_reading.jpg" title="WHYYYY?">
<p><strong>All codes are on github with different branche
</summary>
<category term="JavaScript" scheme="https://zirho.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="es6" scheme="https://zirho.github.io/tags/es6/"/>
<category term="es2015" scheme="https://zirho.github.io/tags/es2015/"/>
<category term="babel" scheme="https://zirho.github.io/tags/babel/"/>
<category term="webpack" scheme="https://zirho.github.io/tags/webpack/"/>
<category term="legacy code" scheme="https://zirho.github.io/tags/legacy-code/"/>
<category term="refactor" scheme="https://zirho.github.io/tags/refactor/"/>
</entry>
<entry>
<title>Private properties for ES6 JavaScript</title>
<link href="https://zirho.github.io/2016/06/10/es6-privacy/"/>
<id>https://zirho.github.io/2016/06/10/es6-privacy/</id>
<published>2016-06-10T21:52:05.000Z</published>
<updated>2020-01-07T17:09:19.492Z</updated>
<content type="html"><![CDATA[<img src="/2016/06/10/es6-privacy/private.png" title="Private Properties in ES6"><p>In ES5 JavaScript, it is relatively easy to have private properties in prototype definition.</p><p>It goes like this.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// es5 constructor(as class) definition </span></span><br><span class="line"><span class="comment">// JavaScript is prototype-based language</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">firstname, lastname</span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="comment">// public property</span></span><br><span class="line"> <span class="keyword">this</span>.firstname = firstname;</span><br><span class="line"> <span class="keyword">this</span>.lastname = lastname;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// private property </span></span><br><span class="line"> <span class="keyword">var</span> records = [{<span class="attr">type</span>: <span class="string">'in'</span>, <span class="attr">amount</span>: <span class="number">0</span>}];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// public function</span></span><br><span class="line"> <span class="comment">// it needs to be instance method to access private properties</span></span><br><span class="line"> <span class="keyword">this</span>.addTransaction = <span class="function"><span class="keyword">function</span>(<span class="params">trans</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (trans.hasOwnProperty(<span class="string">'type'</span>) && trans.hasOwnProperty(<span class="string">'amount'</span>)) {</span><br><span class="line"> records.push(trans);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// public function</span></span><br><span class="line"> <span class="keyword">this</span>.getBalance = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> total = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> records.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">record</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span> (record.type === <span class="string">'in'</span>) {</span><br><span class="line"> total += record.amount;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> total -= record.amount; </span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> total;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Prototype function</span></span><br><span class="line">Person.prototype.getFullName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstname + <span class="string">" "</span> + <span class="keyword">this</span>.lastname;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = Person;</span><br></pre></td></tr></table></figure><p>Although, in es6, it is not that easy to achieve and there are many options you can choose.</p><p>You can find all of those here, <a href="http://www.2ality.com/2016/01/private-data-classes.html" rel="external nofollow noopener noreferrer" target="_blank">Managing private data</a>, <a href="https://curiosity-driven.org/private-properties-in-javascript" rel="external nofollow noopener noreferrer" target="_blank">JS class definition</a></p><p>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.</p><p>But I found most cases can be solved by modularity approach which looks something like the code below.</p><p>In a file such as <strong>person.js</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> records = [{<span class="attr">type</span>: <span class="string">'in'</span>, <span class="attr">amount</span>: <span class="number">0</span>}];</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">constructor</span>(first, last) {</span><br><span class="line"> <span class="keyword">this</span>.firstname = first;</span><br><span class="line"> <span class="keyword">this</span>.lastname = last;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> addTransaction(trans) {</span><br><span class="line"> <span class="keyword">if</span> (trans.hasOwnProperty(<span class="string">'type'</span>) && trans.hasOwnProperty(<span class="string">'amount'</span>)) {</span><br><span class="line"> records.push(trans);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> getBalance() {</span><br><span class="line"> <span class="keyword">let</span> total = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> records.forEach(<span class="function"><span class="params">record</span> =></span> {</span><br><span class="line"> total += record.amount;</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> total;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> getFullName() {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`<span class="subst">${<span class="keyword">this</span>.firstname}</span> <span class="subst">${<span class="keyword">this</span>.lastname}</span>`</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>record</code> property is used as a private data storage and can NOT be accessed out of the modular scope.</p><p>To use this class, you can just import and use.Below are unit tests that I wrote against to the <code>Person</code> class.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { Person } <span class="keyword">from</span> <span class="string">'./person.js'</span>;</span><br><span class="line"></span><br><span class="line">describe(<span class="string">'Person es6 class'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> person;</span><br><span class="line"> beforeEach(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> person = <span class="keyword">new</span> Person(<span class="string">'Andrew'</span>, <span class="string">'Lincoln'</span>);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> it(<span class="string">'should be initiated with first name and last name'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> expect(person.getFullName()).toEqual(<span class="string">'Andrew Lincoln'</span>);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> it(<span class="string">"should be initiated with 0 balance"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> expect(person.getBalance()).toEqual(<span class="number">0</span>);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>Hope this helps.</p>]]></content>
<summary type="html">
<img src="/2016/06/10/es6-privacy/private.png" title="Private Properties in ES6">
<p>In ES5 JavaScript, it is relatively easy to have privat
</summary>
<category term="JavaScript" scheme="https://zirho.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="es6" scheme="https://zirho.github.io/tags/es6/"/>
<category term="es2015" scheme="https://zirho.github.io/tags/es2015/"/>
<category term="private property" scheme="https://zirho.github.io/tags/private-property/"/>
<category term="module" scheme="https://zirho.github.io/tags/module/"/>
</entry>
<entry>
<title>Unit testing JavaScript ES6 code with Karma</title>
<link href="https://zirho.github.io/2016/06/06/karma-es6/"/>
<id>https://zirho.github.io/2016/06/06/karma-es6/</id>
<published>2016-06-06T21:55:52.000Z</published>
<updated>2020-01-07T17:10:33.513Z</updated>
<content type="html"><![CDATA[<p>This posting is referenced to <a href="http://www.syntaxsuccess.com/viewarticle/writing-jasmine-unit-tests-in-es6" rel="external nofollow noopener noreferrer" target="_blank">this post</a>.</p><img src="/2016/06/06/karma-es6/karma.png" title="ECMAScript2015 Unit testing"><h1>Unit Testing ES6 codes</h1><p>To run unit tests against ES6 codes, we need a way to transpile the codes before the unit test runner(karma) processes them.</p><p>Here we use webpack to transpile ES6 codes with babel loader using babel es2015 preset.</p><p>But the original posting is outdated since babel is now split in serveral modules. We need few of them to get transpiling working.</p><p>The complete code is on a github repository.<br><a href="https://github.com/zirho/karma-es6-babel-webpack" rel="external nofollow noopener noreferrer" target="_blank">Karma for es6 respository</a></p><h2>Prerequisites</h2><p></p><h3 id="Install-Node-js" class="article-heading"><a href="#Install-Node-js" class="headerlink" title="Install Node.js"></a>Install Node.js<a class="article-anchor" href="#Install-Node-js" aria-hidden="true"></a></h3><p>The best way to install Node.js is with <a href="https://github.com/creationix/nvm" target="_blank" rel="external nofollow noopener noreferrer">nvm</a>.</p><p></p><p>cURL:</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></tbody></table></figure><p>Wget:</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></tbody></table></figure><p>Once nvm is installed, restart the terminal and run the following command to install Node.js.</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ nvm install 4</span><br></pre></td></tr></tbody></table></figure><p>Alternatively, download and run <a href="http://nodejs.org/" target="_blank" rel="external nofollow noopener noreferrer">the installer</a>.</p><h2>Create project directory</h2><p>Create a directory.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ mkdir karma-testing; <span class="built_in">cd</span> karma-testing</span><br></pre></td></tr></table></figure><h2>Install related modules</h2><p>Install node modules.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ npm init --y</span><br><span class="line">$ 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</span><br><span class="line">$ npm i -g karma-cli</span><br></pre></td></tr></table></figure><p>Add or change npm script attribute to package.json</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"scripts": {</span><br><span class="line"> "tests": "karma start"</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h2>Generate karma config file</h2><p>karma.conf.js</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi karma.conf.js</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">config</span>) </span>{</span><br><span class="line"> config.set({</span><br><span class="line"> browsers: [<span class="string">'PhantomJS'</span>],</span><br><span class="line"> files: [</span><br><span class="line"> { <span class="attr">pattern</span>: <span class="string">'test-context.js'</span>, <span class="attr">watched</span>: <span class="literal">false</span> }</span><br><span class="line"> ],</span><br><span class="line"> frameworks: [<span class="string">'jasmine'</span>],</span><br><span class="line"> preprocessors: {</span><br><span class="line"> <span class="string">'test-context.js'</span>: [<span class="string">'webpack'</span>]</span><br><span class="line"> },</span><br><span class="line"> webpack: {</span><br><span class="line"> <span class="built_in">module</span>: {</span><br><span class="line"> loaders: [</span><br><span class="line"> { <span class="attr">test</span>: <span class="regexp">/\.js$/</span>, <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>, <span class="attr">loader</span>: <span class="string">'babel?presets[]=es2015'</span> }</span><br><span class="line"></span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> watch: <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> webpackServer: {</span><br><span class="line"> noInfo: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2>Provide context including testing files</h2><ul><li><strong>The codes below are from <a href="http://www.syntaxsuccess.com/viewarticle/writing-jasmine-unit-tests-in-es6" rel="external nofollow noopener noreferrer" target="_blank">this post</a>.</strong></li></ul><p>test-context.js</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi <span class="built_in">test</span>-context.js</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">"babel-polyfill"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> context = <span class="built_in">require</span>.context(<span class="string">'./source'</span>, <span class="literal">true</span>, /-spec\.js$/);</span><br><span class="line">context.keys().forEach(context);</span><br></pre></td></tr></table></figure><p>source/calculator.js</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi <span class="built_in">source</span>/calculator.js</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Calculator</span></span>{</span><br><span class="line"> add(op1,op2){</span><br><span class="line"> <span class="keyword">return</span> op1 + op2;</span><br><span class="line"> }</span><br><span class="line"> subtract(op1,op2){</span><br><span class="line"> <span class="keyword">return</span> op1 - op2;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>source/calculator-spec.js</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi <span class="built_in">source</span>/calculator-spec.js</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> {Calculator} <span class="keyword">from</span> <span class="string">'./calculator'</span>;</span><br><span class="line">describe(<span class="string">'Calculator'</span>, () => {</span><br><span class="line"> it(<span class="string">'should add two numbers'</span>, () => {</span><br><span class="line"> <span class="keyword">let</span> calculator = <span class="keyword">new</span> Calculator();</span><br><span class="line"> <span class="keyword">let</span> sum = calculator.add(<span class="number">1</span>,<span class="number">4</span>);</span><br><span class="line"> expect(sum).toBe(<span class="number">5</span>);</span><br><span class="line"> });</span><br><span class="line"> it(<span class="string">'should subtract two numbers'</span>, () => {</span><br><span class="line"> <span class="keyword">let</span> calculator = <span class="keyword">new</span> Calculator();</span><br><span class="line"> <span class="keyword">let</span> sum = calculator.subtract(<span class="number">4</span>,<span class="number">1</span>);</span><br><span class="line"> expect(sum).toBe(<span class="number">3</span>);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2>Kicking off unit testing</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run tests</span><br></pre></td></tr></table></figure><p>Enjoy testing ES6 codes!</p><p>The complete code is on a github repository.<br><a href="https://github.com/zirho/karma-es6-babel-webpack" rel="external nofollow noopener noreferrer" target="_blank">Karma for es6 respository</a></p><p>.</p>]]></content>
<summary type="html">
<p>This posting is referenced to <a href="http://www.syntaxsuccess.com/viewarticle/writing-jasmine-unit-tests-in-es6" rel="external nofollow
</summary>
<category term="JavaScript" scheme="https://zirho.github.io/categories/JavaScript/"/>
<category term="Node.js" scheme="https://zirho.github.io/categories/JavaScript/Node-js/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="es6" scheme="https://zirho.github.io/tags/es6/"/>
<category term="es2015" scheme="https://zirho.github.io/tags/es2015/"/>
<category term="karma" scheme="https://zirho.github.io/tags/karma/"/>
<category term="babel" scheme="https://zirho.github.io/tags/babel/"/>
<category term="webpack" scheme="https://zirho.github.io/tags/webpack/"/>
<category term="Unit Testing" scheme="https://zirho.github.io/tags/Unit-Testing/"/>
</entry>
<entry>
<title>How to setup a blog on github with Hexo</title>
<link href="https://zirho.github.io/2016/06/04/hexo/"/>
<id>https://zirho.github.io/2016/06/04/hexo/</id>
<published>2016-06-04T15:02:12.000Z</published>
<updated>2020-01-07T17:09:19.496Z</updated>
<content type="html"><![CDATA[<img src="/2016/06/04/hexo/hexo.png" title="hexo + github = blog"><p>You can just copy & paste the codes below to setup a blog.</p><p>Related links</p><ul><li><a href="https://hexo.io/docs/" rel="external nofollow noopener noreferrer" target="_blank">Hexo docs</a></li><li><a href="https://hexo.io/themes/" rel="external nofollow noopener noreferrer" target="_blank">Hexo themes</a></li><li><a href="https://pages.github.com/" rel="external nofollow noopener noreferrer" target="_blank">github pages</a></li></ul><h2>Prerequisites</h2><div><h3 id="Install-Git" class="article-heading"><a href="#Install-Git" class="headerlink" title="Install Git"></a>Install Git<a class="article-anchor" href="#Install-Git" aria-hidden="true"></a></h3><ul><li>Windows: Download & install <a href="https://git-scm.com/download/win" target="_blank" rel="external nofollow noopener noreferrer">git</a>.</li><li>Mac: Install it with <a href="http://mxcl.github.com/homebrew/" target="_blank" rel="external nofollow noopener noreferrer">Homebrew</a>, <a href="http://www.macports.org/" target="_blank" rel="external nofollow noopener noreferrer">MacPorts</a> or <a href="http://sourceforge.net/projects/git-osx-installer/" target="_blank" rel="external nofollow noopener noreferrer">installer</a>.</li><li>Linux (Ubuntu, Debian): <code>sudo apt-get install git-core</code></li><li>Linux (Fedora, Red Hat, CentOS): <code>sudo yum install git-core</code></li></ul><h3 id="Install-Node-js" class="article-heading"><a href="#Install-Node-js" class="headerlink" title="Install Node.js"></a>Install Node.js<a class="article-anchor" href="#Install-Node-js" aria-hidden="true"></a></h3><p>The best way to install Node.js is with <a href="https://github.com/creationix/nvm" target="_blank" rel="external nofollow noopener noreferrer">nvm</a>.</p><p>cURL:</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></tbody></table></figure><p>Wget:</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></tbody></table></figure><p>Once nvm is installed, restart the terminal and run the following command to install Node.js.</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ nvm install 4</span><br></pre></td></tr></tbody></table></figure><p>Alternatively, download and run <a href="http://nodejs.org/" target="_blank" rel="external nofollow noopener noreferrer">the installer</a>.</p><h3 id="Install-Hexo" class="article-heading"><a href="#Install-Hexo" class="headerlink" title="Install Hexo"></a>Install Hexo<a class="article-anchor" href="#Install-Hexo" aria-hidden="true"></a></h3><p>Once all the requirements are installed, you can install Hexo with npm.</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">$ npm install -g hexo-cli</span><br></pre></td></tr></tbody></table></figure></div><h4>Setting up a github repository</h4><p>You should change <strong>{blogname}</strong> with your desired word.</p><p>Setup a github repo with the name, <strong>{blogname}</strong>.github.io<br>ex) zirho.github.io<br><a href="https://github.com/zirho/zirho.github.io" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/zirho/zirho.github.io</a></p><h2>Setting up Hexo with Github</h2><h4>Setup a blog</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ hexo init {blogname}</span><br><span class="line">$ cd {blogname}</span><br><span class="line">$ npm i</span><br><span class="line">$ git init</span><br></pre></td></tr></table></figure><p>This will generate the {blogname} folder and install dependencies.</p><h4>Install a theme</h4><p>Browse <a href="https://hexo.io/themes/" rel="external nofollow noopener noreferrer" target="_blank">here</a> to find out something cool.</p><p>Once you decide your mind, fork it to customize it or just get the github repo url from the theme info.</p><p>ex) <a href="https://github.com/ppoffice/hexo-theme-minos" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/ppoffice/hexo-theme-minos</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git submodule add {theme-github-url} themes/{theme-name}</span><br></pre></td></tr></table></figure><p>Copy _config.yml.example to _config.yml</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cp themes/{theme-name}/_config.yml.example themes/{theme-name}/_config.yml</span><br></pre></td></tr></table></figure><p>*<strong>Some themes may differ on _config.yml.example file name</strong><br><strong>Refer to the theme docs</strong></p><p>Update _config.yml to use newly installed theme. (Don't get confused with the theme config file)</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi _config.yml</span><br></pre></td></tr></table></figure><p>Find theme attribute and change it.<br>ex) theme: hueman</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: {theme-name}</span><br></pre></td></tr></table></figure><h4>Setup blog & deploy info</h4><p>Edit _config.yml in root folder. (Don't get confused with the theme config file)</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi _config.yml</span><br></pre></td></tr></table></figure><p>Update blog info as desired.<br>Below is my own for instance.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">title: CodePaste </span><br><span class="line">subtitle:</span><br><span class="line">description:</span><br><span class="line">author: Joshua Youngjae Ji</span><br><span class="line">language: en</span><br><span class="line">timezone: America/Los_Angeles</span><br></pre></td></tr></table></figure><p>Add below code at the bottom of the file for deploy on github repo.</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">{your</span> <span class="string">github</span> <span class="string">repo</span> <span class="string">url}</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">master</span></span><br><span class="line"> <span class="attr">message:</span> <span class="string">"Site updated: <span class="template-variable">{{ now('YYYY-MM-DD HH:mm:ss') }}</span>"</span></span><br></pre></td></tr></table></figure><h4>Deploy the blog</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm i -S hexo-deployer-git</span><br><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>At this point, you should be able to see your blog at http://{blogname}.github.io.</p><h4>Add the source to the github repository (optional)</h4><p>To maintain version of the code, you can make another branch and push the commits.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ git remote add origin {your-git-repo-url}</span><br><span class="line">$ git checkout -b <span class="built_in">source</span> </span><br><span class="line">$ git push origin <span class="built_in">source</span></span><br></pre></td></tr></table></figure><h4>Deploy new post</h4><p>Adding a new post</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new {postname}</span><br></pre></td></tr></table></figure><p>Edit the new post file</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi <span class="built_in">source</span>/_posts/{postname}.md</span><br></pre></td></tr></table></figure><p>Regenerate files and deploy at once</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate -d</span><br></pre></td></tr></table></figure><p>Happy posting!</p>]]></content>
<summary type="html">
<img src="/2016/06/04/hexo/hexo.png" title="hexo + github = blog">
<p>You can just copy &amp; paste the codes below to setup a blog.</p>
<p>
</summary>
<category term="Technology" scheme="https://zirho.github.io/categories/Technology/"/>
<category term="Github" scheme="https://zirho.github.io/categories/Technology/Github/"/>
<category term="hexo" scheme="https://zirho.github.io/tags/hexo/"/>
<category term="blog" scheme="https://zirho.github.io/tags/blog/"/>
<category term="github" scheme="https://zirho.github.io/tags/github/"/>
<category term="github pages" scheme="https://zirho.github.io/tags/github-pages/"/>
<category term="deploy" scheme="https://zirho.github.io/tags/deploy/"/>
</entry>
<entry>
<title>2012 jQuery Conference in SF</title>
<link href="https://zirho.github.io/2012/08/31/jquery-conf/"/>
<id>https://zirho.github.io/2012/08/31/jquery-conf/</id>
<published>2012-08-31T08:20:00.000Z</published>
<updated>2020-01-07T17:09:19.496Z</updated>
<content type="html"><![CDATA[<br><img src="/2012/08/31/jquery-conf/title.png" title="jQuery Conference 2012"><p>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.</p><p>It was around $300 for a one day session, but totally worth the money.</p><p>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!</p><p>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.</p><p>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.</p><p>Sharing docs from the conf. I don't think it will be a problem.<br><a href="https://docs.google.com/open?id=0B5bKzlX6SssEamF3MUl0TDVtXzg" rel="external nofollow noopener noreferrer" target="_blank">Docs here</a><br>You need to install nodejs. And put it in web root folder.</p><p>I personally want to highlight these.</p><ol><li>Using namespace to maintain event handlers.</li><li>Mange handers and objects using event boubling.</li><li>IIFE</li></ol><p>Ben emphasised the IIFE part and wanted us to checkout a posting for IIFE later.<a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/" rel="external nofollow noopener noreferrer" target="_blank">Here</a></p><p>I asked him to take a pic with me :)</p><img src="/2012/08/31/jquery-conf/1.jpg" title="Ben and me"><p>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.</p><p>It gets very cold at night so try to keep yourself warm.<br>I hope I can make it to the next one.</p><img src="/2012/08/31/jquery-conf/4.jpg" title="San Francisco Pier">]]></content>
<summary type="html">
<br>
<img src="/2012/08/31/jquery-conf/title.png" title="jQuery Conference 2012">
<p>While I was staying in Los Angeles, I found that a jQue
</summary>
<category term="JavaScript" scheme="https://zirho.github.io/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://zirho.github.io/tags/JavaScript/"/>
<category term="jQuery" scheme="https://zirho.github.io/tags/jQuery/"/>
<category term="Conference" scheme="https://zirho.github.io/tags/Conference/"/>
<category term="SF" scheme="https://zirho.github.io/tags/SF/"/>
</entry>
<entry>
<title>Cloning your web, PipingXE</title>
<link href="https://zirho.github.io/2011/02/11/piping-xe/"/>
<id>https://zirho.github.io/2011/02/11/piping-xe/</id>
<published>2011-02-11T12:46:00.000Z</published>
<updated>2020-01-07T17:09:19.502Z</updated>
<content type="html"><![CDATA[<br><img src="/2011/02/11/piping-xe/title.gif" title="Piping XE submited to OSS-competition"><h2>What is XE?</h2><p>XE stands for XpessEngine.<br>It is an open source CMS such as Wordpress or joomla. Sponsored by NHN in South Korea.<br><a href="https://www.xpressengine.com/" rel="external nofollow noopener noreferrer" target="_blank">Find out more</a></p><img src="/2011/02/11/piping-xe/1.gif" title="About expressengine"><p>I previously developed a wizard module(WizardXE) for the rapid composition of a website.<br>I was the winner of the first competition.<br><a href="https://www.xpressengine.com/xe_contest_2010" rel="external nofollow noopener noreferrer" target="_blank">Find out more</a></p><p>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.</p><h2>Cloning? How?</h2><p>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.<br>The receiving part deserializes it and use it to build a website.No more repetitive or redundant processes.</p><p><a href="https://www.xpressengine.com/index.php?mid=download&package_id=19325680" rel="external nofollow noopener noreferrer" target="_blank">Learn more about this.</a></p><p>Enjoy cloning websites!</p>]]></content>
<summary type="html">
<br>
<img src="/2011/02/11/piping-xe/title.gif" title="Piping XE submited to OSS-competition">
<h2>What is XE?</h2>
<p>XE stands for XpessEn
</summary>
<category term="Technology" scheme="https://zirho.github.io/categories/Technology/"/>
<category term="OpenSource" scheme="https://zirho.github.io/categories/Technology/OpenSource/"/>
<category term="XE" scheme="https://zirho.github.io/tags/XE/"/>
<category term="Open-source" scheme="https://zirho.github.io/tags/Open-source/"/>
<category term="PHP" scheme="https://zirho.github.io/tags/PHP/"/>
<category term="CMS" scheme="https://zirho.github.io/tags/CMS/"/>
<category term="contribute" scheme="https://zirho.github.io/tags/contribute/"/>
</entry>
</feed>