tag:blogger.com,1999:blog-35553002182962905572024-03-13T06:03:45.021-04:00PURSUING THE TAO OF PROGRAMMINGLearn, Practice, ShareSteve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.comBlogger122125tag:blogger.com,1999:blog-3555300218296290557.post-69912159929253337042016-06-09T11:56:00.001-04:002016-06-09T12:08:20.147-04:00How to write Data Driven tests in JavascriptI know how to write <a href="https://github.com/junit-team/junit4/wiki/Parameterized-tests">"Parameterized tests"</a> in Java and <a href="http://spockframework.github.io/spock/docs/1.0/data_driven_testing.html">Data Driven tests</a> in Groovy using Spock framework. But how to write in JavaScript? Now I try to show how to make it working using mocha framework.<br />
<br />
Data Driven tests in Mocha is called <a href="https://mochajs.org/#dynamically-generating-tests">"Dynamically generated tests"</a>, based on the API documentation, there are 2 steps:<br />
1) Create a test data array;<br />
2) Iterate the test data, generate the test case dynamically, the test case name in "it" block is also generated dynamically, which is quite similar with Spock framework.<br />
<br />
The implementation is pretty straight forward. Here is the example of my implementation in the Tennis Game Kata:<br />
<a href="https://github.com/stevez/TennisGame-solution/blob/master/javascript/test/Tennis-test.js">https://github.com/stevez/TennisGame-solution/blob/master/javascript/test/Tennis-test.js</a><br />
<script src="https://gist.github.com/stevez/7db17b58d4d99b0ec6995cb875fb8feb.js"></script>
The javascript example project is here:<br />
<a href="https://github.com/stevez/TennisGame-solution/tree/master/javascript">https://github.com/stevez/TennisGame-solution/tree/master/javascript</a><br />
<br />
Next step I will look at how to work it using Jasmine framework.<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com19tag:blogger.com,1999:blog-3555300218296290557.post-91409557259900194002016-06-06T21:20:00.002-04:002016-06-06T21:21:23.307-04:00Debug Karma Unit tests using visual Studio code<div style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; padding: 0px;">
Debugging JavaScript is not easy, especially outside the browser.</div>
<div style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin-top: 10px; padding: 0px;">
VS Code is so powerful for JavaScript debugger. I managed to get it working under Jasmine/Karma unit tests.</div>
<div style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin-top: 10px; padding: 0px;">
<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size" style="display: inline-block; max-width: none; position: relative;"><img class="confluence-embedded-image" data-base-url="http://confluence.agile.bns" data-image-src="/download/attachments/3998243/vs_debugger.png?version=1&modificationDate=1464707695000&api=v2" data-linked-resource-container-id="3998243" data-linked-resource-container-version="8" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="vs_debugger.png" data-linked-resource-id="3998226" data-linked-resource-type="attachment" data-linked-resource-version="1" src="http://confluence.agile.bns/download/attachments/3998243/vs_debugger.png?version=1&modificationDate=1464707695000&api=v2" data-unresolved-comment-count="0" height="400" style="border: 0px; cursor: pointer; display: block; margin: 0px 2px; max-width: none; padding: 0px;" /></span></div>
<h3 id="DebugKarmaUnittestsusingvisualStudiocode-Pre-Requisite" style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 30px 0px 0px; padding: 0px;">
Pre-Requisite</h3>
<ul style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 10px 0px 0px;">
<li>Install the karma chrome-launcher to your project</li>
<li>Install the vs code chrome debugger extensions</li>
</ul>
<h3 id="DebugKarmaUnittestsusingvisualStudiocode-Steps" style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 30px 0px 0px; padding: 0px;">
Steps</h3>
<ol style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 10px 0px 0px;">
<li><div style="padding: 0px;">
Config your kama.conf.js, make sure you can launch chrome with remote-debugging-port 9222</div>
<div style="margin-top: 10px; padding: 0px;">
Add the following in to your karma.conf.js</div>
<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" style="border-radius: 3px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; overflow: auto; padding: 0px;">
<div class="codeContent panelContent pdl" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin: 0px; overflow: hidden; padding: 0px;">
<div style="margin: 0px; padding: 0px;">
<div class="syntaxhighlighter sh-confluence js" id="highlighter_944823" style="font-size: 1em; margin: 0px; overflow: auto; padding: 0px; position: relative; width: 710px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 14px; height: auto; left: auto; line-height: 20px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 710px;"><tbody style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<tr style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background: rgb(245, 245, 245); border-radius: 0px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-width: 0px 1px 0px 0px; bottom: auto; box-sizing: content-box; color: #707070; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 0px 15px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
1</div>
<div class="line number2 index1 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
2</div>
<div class="line number3 index2 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
3</div>
<div class="line number4 index3 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
4</div>
<div class="line number5 index4 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
5</div>
<div class="line number6 index5 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
6</div>
</td><td class="code" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 665px;"><div class="container" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 15px 0px 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 15px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;" title="Hint: double-click to select code">
<div class="line number1 index0 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">customLaunchers: {</code></div>
<div class="line number2 index1 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">Chrome_with_debugging: {</code></div>
<div class="line number3 index2 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">base: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'Chrome'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number4 index3 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">flags: [</code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'--remote-debugging-port=9222'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">]</code></div>
<div class="line number5 index4 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
<div class="line number6 index5 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">},</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</li>
<li><div style="padding: 0px;">
Launch the browser custom launcher through gulp task, also we need to disable the JavaScript preprocessors, which purpose is magnifying for the test coverage</div>
<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" style="border-radius: 3px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; overflow: auto; padding: 0px;">
<div class="codeHeader panelHeader pdl" style="background: rgb(245, 245, 245); border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; overflow: hidden; padding: 5px 15px; position: relative;">
<b>gulp script</b></div>
<div class="codeContent panelContent pdl" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin: 0px; overflow: hidden; padding: 0px;">
<div style="margin: 0px; padding: 0px;">
<div class="syntaxhighlighter sh-confluence js" id="highlighter_333462" style="font-size: 1em; margin: 0px; overflow: auto; padding: 0px; position: relative; width: 710px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 14px; height: auto; left: auto; line-height: 20px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 710px;"><tbody style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<tr style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background: rgb(245, 245, 245); border-radius: 0px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-width: 0px 1px 0px 0px; bottom: auto; box-sizing: content-box; color: #707070; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 0px 15px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
1</div>
<div class="line number2 index1 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
2</div>
<div class="line number3 index2 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
3</div>
<div class="line number4 index3 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
4</div>
<div class="line number5 index4 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
5</div>
<div class="line number6 index5 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
6</div>
<div class="line number7 index6 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
7</div>
<div class="line number8 index7 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
8</div>
<div class="line number9 index8 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
9</div>
<div class="line number10 index9 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
10</div>
<div class="line number11 index10 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
11</div>
<div class="line number12 index11 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
12</div>
<div class="line number13 index12 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
13</div>
</td><td class="code" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 657px;"><div class="container" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 15px 0px 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 15px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;" title="Hint: double-click to select code">
<div class="line number1 index0 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">gulp.task(</code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'debug-karma'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">function</code> <code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(done) {</code></div>
<div class="line number2 index1 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">new</code> <code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">Server({</code></div>
<div class="line number3 index2 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">configFile: __dirname + </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'/karma.conf.js'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number4 index3 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">browsers: [</code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'Chrome_with_debugging'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">],</code></div>
<div class="line number5 index4 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">preprocessors: {</code></div>
<div class="line number6 index5 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'components/**/*.js'</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: [],</code></div>
<div class="line number7 index6 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'lib/crl/**/*.js'</code> <code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: [],</code></div>
<div class="line number8 index7 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">'lib/rapidlab/**/*.js'</code> <code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: []</code></div>
<div class="line number9 index8 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">},</code></div>
<div class="line number10 index9 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">singleRun: </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">false</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number11 index10 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">autoWatch: </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">true</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number12 index11 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}, done).start();</code></div>
<div class="line number13 index12 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">});</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</li>
<li><div style="padding: 0px;">
Update launch.json file in the .vscode folder</div>
<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code" style="border-radius: 3px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; overflow: auto; padding: 0px;">
<div class="codeHeader panelHeader pdl" style="background: rgb(245, 245, 245); border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; overflow: hidden; padding: 5px 15px; position: relative;">
<b>launch.json</b></div>
<div class="codeContent panelContent pdl" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin: 0px; overflow: hidden; padding: 0px;">
<div style="margin: 0px; padding: 0px;">
<div class="syntaxhighlighter sh-confluence nogutter js" id="highlighter_688749" style="font-size: 1em; margin: 0px; overflow: auto; padding: 0px; position: relative; width: 710px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 14px; height: auto; left: auto; line-height: 20px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 710px;"><tbody style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<tr style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="code" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 0px 15px; position: static; right: auto; top: auto; vertical-align: baseline; width: 695px;"><div class="container" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 15px 0px 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 0px 15px; position: relative; right: auto; top: auto; vertical-align: baseline; white-space: pre-wrap; width: auto;" title="Hint: double-click to select code">
<div class="line number1 index0 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div>
<div class="line number2 index1 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"version"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"0.2.0"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number3 index2 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"configurations"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: [</code></div>
<div class="line number4 index3 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div>
<div class="line number5 index4 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"name"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"Launch Karma debug page"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number6 index5 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"type"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"chrome"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number7 index6 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"request"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"launch"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number8 index7 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"url"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"<a href="http://localhost:9876/debug.html" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-decoration: none; top: auto; vertical-align: baseline; width: auto;">http://localhost:9876/debug.html"</a></code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number9 index8 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"sourceMaps"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">false</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number10 index9 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"webRoot"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"${workspaceRoot}/src/main/webapp"</code></div>
<div class="line number11 index10 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">},</code></div>
<div class="line number12 index11 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div>
<div class="line number13 index12 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"name"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"Attach without source map"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number14 index13 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"type"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"chrome"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number15 index14 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"request"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"attach"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number16 index15 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"port"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 9222,</code></div>
<div class="line number17 index16 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"sourceMaps"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js keyword" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(51, 102, 153) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold !important; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">false</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code></div>
<div class="line number18 index17 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"webRoot"</code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="js string" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: rgb(0, 51, 102) !important; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"${workspaceRoot}"</code></div>
<div class="line number19 index18 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
<div class="line number20 index19 alt1" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js spaces" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">]</code></div>
<div class="line number21 index20 alt2" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em 0px 0px; position: static; right: auto; top: auto; vertical-align: baseline; white-space: nowrap; width: auto;">
<code class="js plain" style="background: 0px 50%; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</li>
<li>In the IDE, run task debug-karma, make sure the chrome browser is launched.</li>
<li>Click the Debugger button,select Chrome, choose "Attach without source map", click start button</li>
<li><span style="line-height: 1.42857;">Refresh chrome browser, or in the debugger console, type </span><br /><span style="line-height: 1.42857;">location.reload();</span></li>
</ol>
<h2 id="DebugKarmaUnittestsusingvisualStudiocode-SampleProject" style="background-color: white; border-bottom-color: rgb(204, 204, 204); color: #333333; font-family: Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 30px 0px 0px; padding: 0px;">
<span style="line-height: 1.42857;">Sample Project </span></h2>
<div style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin-top: 10px; padding: 0px;">
Please check this sample JavaScript project: <a href="https://github.com/stevez/KataFizzBuzz/tree/master/javascrip">https://github.com/stevez/KataFizzBuzz/tree/master/javascrip</a>t</div>
<div style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin-top: 10px; padding: 0px;">
You can import this project to launch the chrome debugger inside your VS Code IDE.</div>
<h2 id="DebugKarmaUnittestsusingvisualStudiocode-Resources" style="background-color: white; border-bottom-color: rgb(204, 204, 204); color: #333333; font-family: Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 30px 0px 0px; padding: 0px;">
Resources</h2>
<ol style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 10px 0px 0px;">
<li><a class="external-link" href="http://bahmutov.calepin.co/debugging-karma-unit-tests.html" rel="nofollow" style="color: #3572b0; text-decoration: none;">http://bahmutov.calepin.co/debugging-karma-unit-tests.html</a></li>
<li><a class="external-link" href="https://github.com/Microsoft/vscode-chrome-debug" rel="nofollow" style="color: #3572b0; text-decoration: none;">https://github.com/Microsoft/vscode-chrome-debug</a></li>
<li><a class="external-link" href="https://github.com/karma-runner/karma-chrome-launcher" rel="nofollow" style="color: #3572b0; text-decoration: none;">https://github.com/karma-runner/karma-chrome-launcher</a></li>
</ol>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com4tag:blogger.com,1999:blog-3555300218296290557.post-49010955599502751152016-06-03T22:00:00.002-04:002016-06-03T22:05:56.053-04:00Debug Mocha tests using Visual Studio Code IDEIt is amazing that we could easily debug Mocha javascript test code in Visual studio Code IDE.<br />
Here is the launch.json file:<br />
<br />
<script src="https://gist.github.com/stevez/215da1bf346836d93712a2149d6d7068.js"></script>
Click the Debug button, press F5, then you will see the debugger running.<br />
The detail file is also in github:<br />
<a href="https://github.com/stevez/kata-Yatzy-solution/blob/master/javascript/.vscode/launch.json">https://github.com/stevez/kata-Yatzy-solution/blob/master/javascript/.vscode/launch.json</a><br />
<br />
You can check my sample code in github for details:<br />
<a href="https://github.com/stevez/kata-Yatzy-solution/tree/master/javascript">https://github.com/stevez/kata-Yatzy-solution/tree/master/javascript</a><br />
<br />
<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-39701290057855325662016-04-10T23:14:00.000-04:002016-04-10T23:38:06.344-04:00Some thoughts about Toronto Agile Open space 2016Here I just try to write down some of my thoughts about yesterday's Toronto Agile Open Space<br />
1. I did another session: it was about <a href="https://en.wikipedia.org/wiki/Thinking_processes_(theory_of_constraints)">the theory of constraints thinking process</a>, I love it because I believe it will bring Agile community 2 important things: Scientific method and problem solving tools. At the beginning I feel it might be too dry, but Shawn Button and Thanou encouraged me and told me it might be intersting, so I picked one empty space, and lobbied Thanou joined my session, and later 3 more audience showed up (Jim Rootham, Lee from Intelliware and an other TOC guy). I explained them the overview about the 5 thinking process diagram, looked like they got some ideas.<br />
This is the the over view of the TOC thinking process I hand out to the audiences. all my talks are based on it.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu6w4GaFR0EAuqK26_8ol23zHq0xUmNYVVjUrCkPg9iVTi67TL_ICa6zbpsOSr1WDk_HPPVKpMm8yxhqOXvVKxVMgFxHoRkIwA3tJ7iXiQu6pT5JT_5Ig5rLzZj8pJAThw-KyuVKXq7XLU/s1600/toc_tp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu6w4GaFR0EAuqK26_8ol23zHq0xUmNYVVjUrCkPg9iVTi67TL_ICa6zbpsOSr1WDk_HPPVKpMm8yxhqOXvVKxVMgFxHoRkIwA3tJ7iXiQu6pT5JT_5Ig5rLzZj8pJAThw-KyuVKXq7XLU/s400/toc_tp.png" width="350" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFqsZ3rPg2oJwUMrUNqmPKg7B6Gmzkot1mAVafohUDTSAsXApLFk4XLYsY18_Q6JwTeXj8OXXYwSaStIscsUVpqd81k4N4yaOmEM2Hol4U5EsOp32u5akXhNJ9taT4G0bzZtWei3iKkhci/s1600/image2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFqsZ3rPg2oJwUMrUNqmPKg7B6Gmzkot1mAVafohUDTSAsXApLFk4XLYsY18_Q6JwTeXj8OXXYwSaStIscsUVpqd81k4N4yaOmEM2Hol4U5EsOp32u5akXhNJ9taT4G0bzZtWei3iKkhci/s400/image2.JPG" width="300" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjODXDBZAPOcMIzPIUJYSKc1bPfuAqHrzmGgiRh81J0gq4NIIGBsAx9OeW4B4PD2DC0HQJMoV-iiHWKju6VnkkBGU__vPhuP-NWKC-JYTdIxldK4BzFihbqYC8pJMVbDk4VelhfeKJTGgB/s1600/image3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjODXDBZAPOcMIzPIUJYSKc1bPfuAqHrzmGgiRh81J0gq4NIIGBsAx9OeW4B4PD2DC0HQJMoV-iiHWKju6VnkkBGU__vPhuP-NWKC-JYTdIxldK4BzFihbqYC8pJMVbDk4VelhfeKJTGgB/s400/image3.JPG" width="300" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiHbyXZ5VNmLcItLg9K9tRUtoNjCcYTRb2dwsGCQey5zy2JhGV3v0MXYynrtRatrwY8GQYzRty836QiVKvcpxwaaEk5mwB8GcwpLYfGP-5h2Vg1c7RjGpRlbzUj6MV4Q3dfa54jVujQfO/s1600/image4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiHbyXZ5VNmLcItLg9K9tRUtoNjCcYTRb2dwsGCQey5zy2JhGV3v0MXYynrtRatrwY8GQYzRty836QiVKvcpxwaaEk5mwB8GcwpLYfGP-5h2Vg1c7RjGpRlbzUj6MV4Q3dfa54jVujQfO/s400/image4.JPG" width="300" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
What I learned from this is Just Do It - there is no bad topic or good topics, as long as some one attend your talks, then it is a good one.<br />
Next step what I need to work on:<br />
- Trying to practice it in daily work, collect all the scenarios I met and write them down into thinking process diagrams, and hopefully I can give them a name if possible. I assume all the software Scrum team will have similar issues I faced, if I created my diagrams, then it will more likely become a general solutions.<br />
- Share with other Agile coaches.<br />
<br />
2. The most important thing I feel so pleased is there are more topics about technical side, for example: Thanou, Peter Yu, Paul, and Shawn Button all facilitated excellent sessions. I really appreciate them drew so many attentions. Also I was surprised that I met a lot more developers in the conference than before. This is definitely a good sign that technical side of agile is resurrecting.<br />
This finding definitely inspired me to focus on the technical side of Agile. In future I will focus on my work on the growing Agile developers. If I have a chance to bring talks in future, my topics will focus on:<br />
- What are the essential skills for the Agile Developers?<br />
- How to become the a successful Agile developers?<br />
- Transform from geek to technical leader<br />
- Create Developers Guild and mentor ship in Scotia bank.<br />
- Software craftsmanship movement: define the ethics, code of conduct, and disciplines.<br />
- The learning path of a software craftsman<br />
- Mastery: what can we learn from Samaurai, Myamoto Mushashi and Shushi Master?<br />
- Drefus/ Shu-Ha-Ri learning models<br />
<div>
- The strategies for refactoring ( Mikado Method for example)</div>
- How to convince people to practice TDD?<br />
<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-39767287533627502472016-03-06T22:18:00.003-05:002016-03-06T22:21:57.125-05:00Using Jenkins-cli to migrate your Jenkins serverLast week I spent some time to setup a new jenkins server, I need to migrate from the old server to new server, including:<br />
- install all the plugins,<br />
- and import all the jenkins jobs from the old server to the new server.<br />
I found <a href="https://wiki.jenkins-ci.org/display/JENKINS/Jenkins+CLI">jenkins-cli</a> is so powerful and so easy to use, it is a big helper. Now I would like to share how I use this powerful tool.<br />
<br />
<b>Download jenkins-cli</b><br />
You can download the JAR file for the client from the URL "/jnlpJars/jenkins-cli.jar" on your Jenkins server, e.g. http://jenkins.example.com/jnlpJars/jenkins-cli.jar<br />
<br />
<b>List plugins</b><br />
java -jar jenkins-cli.jar -s http://your-jenkins-server/ list-plugins<br />
<br />
<b>Migrate the plugins</b><br />
To install plugins which are installed in the old servers, use the following command:<br />
java -jar jenkins-cli.jar -s http://old-jenkins-server/ list-plugins | awk '{print $1}' | xargs java -jar jenkins-cli.jar -s http://new-jenkins-server/ install-plugin<br />
<b><br /></b>
<b>Migrate the jenkins jobs</b><br />
java -jar jenkins-cli.jar -s http://old-jenkins-server/ get-job "my job" > my_job.xml<br />
java -jar jenkins-cli.jar -s http://new-jenkins-server/ create-job "my job" < my_job.xml<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-35175581799917561232016-02-20T23:24:00.001-05:002016-02-20T23:34:39.068-05:00 Making your calendar half fullDuring last 2 weeks, I found my calendar was really full, many back to back meetings. I feel busy but not productive.<br />
I found the biggest problem is hard to deal with unplanned things: sometime a developer asked for help, but I was not available at that time according to my calendar; sometime when a meeting need to change, but due to hard to find another time, it had to be cancelled or delay to next week; sometime I found an issue and want to discuss with my Product owner, but she was not available, we have to wait until next week to discuss it.<br />
So making my calendar full is really harmful:<br />
<ul>
<li>it is hard to respond to change,</li>
<li>hard to solve the problem quickly,</li>
<li>making co-location less useful if everyone is busy with doing different things.</li>
<li>it focus on activity not outcome, it violates the Scrum's "inspect and adapt" principle.</li>
</ul>
In future I decide to change my strategy, instead of making me busy, I will try to make my calenar half full:<br />
<ul>
<li>only half of my time can be scheduled for meeting in the morning;</li>
<li>only half of my time can be scheduled for meeting in the afternoon;</li>
<li>try not to schedule back to back meetings </li>
</ul>
Also I will encourage other team member doing the same thing, especially product owner and people with shared roles like me.<br />
and also our scrum team can also considering make the board half full.<br />
I hope it will help me:<br />
<ul>
<li>will be more responsive to unexpected situations;</li>
<li>will have less waiting time on fixing the problems;</li>
<li>will be more adaptive and more focused;</li>
<li>will be easier to coordinate with other team members if they are doing the same thing;</li>
<li>improve the collaboration;</li>
<li>help me focus more on effectiveness instead of efficiency;</li>
<li>have more slack time, so I can focus more on learning and researching.</li>
</ul>
<ul>
</ul>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-62490851319721302812016-01-31T23:09:00.001-05:002016-01-31T23:14:36.406-05:00What I learned from the Lean startup trainingEarlier this January Our Agile coach <a href="https://ca.linkedin.com/in/2carlos">Carlos Oliveira</a> did an excellent training session about Lean startup in Scotiabank's Credit Card RapidLab, for me this is eye-opening event, I realize there are so many things needs to digest, to dig deeper. Here I try to capture what I learned.<br />
<br />
<b>About Lean startup</b><br />
Lean startup process is focused on discovery, learning, reducing the uncertainty through the rapid feedback loop. It is more about exploring instead of exploiting; it answers the questions of "Should we build it?" instead of "Can we build it?".<br />
In lean startup, failure is good, failure is valuable, as long as we can learn from the failure; learning itself is valuable, MVP does not have to be valuable to the customer - which means in Scrum, at the end of the Sprint, it is still OK if we delivered something which is only valuable for ourselves learning but no value for customers.<br />
<br />
<b>Learning vs building</b><br />
In lean startup the objective is learning, to learn we need to build first to validate our hypothesis, which is build to learn; in regular development, the objective is building, to build a better software, we need to learn first, which is learn to build. It looks like learning and building can support each other instead of conflict each other if we can embed the lean startup concept into our Scrum process.<br />
<br />
<b>Go out of the building, leave your comfort zone</b><br />
Lean startup encourage us to close to the customer: go out of the building, learn from customer. It means leave your comfort zone, be open minded, leave your predefined opinions, discover different insights and experiences.<br />
For managers, it means manager shouldn't rely on emails, report or spreadsheet, they should go to the team, listen, observe and sense the problem.<br />
For team developers, it means everyone should leave their own familiar domain area, try different tools, lean different languages, take different roles, do it mindfully and deliberately.<br />
<br />
In the book Toyota Way, I know an inspiring story about the improving the Sienna by applying principle of "Go and See", <a href="http://blog.gembaacademy.com/2009/02/13/genchi-genbutsu-do-you-really-understand-it/">this blog post</a> gives you a brief summary.<br />
<br />
<b>How can I apply Lean startup into my daily work</b><br />
As a technical coach, my customer will be the Scrum team members, my job will help the team apply new tools, technical practices which moving toward the journey of continuous delivery. There are lots of uncertainty and concerns, to reduce the resistance, lean startup is a perfect strategy for me:<br />
<br />
<ul>
<li>Close to the team members: sit beside them, observe how they work, listen their conversation, sense their pain, work with them, don't wait for them asking for help; go to other teams to get insights,</li>
<li>Close to the product owners: Attentively participate the Sprint plaining meeting, meet with them regularly, understand their business goals, trying to help solve the product owner's problem first, then ask them to help me.</li>
<li>Doing experiments as strategy, for example for automated functional tests, I will try to offer different solutions, and compare each solution's pro and cons; for reporting tools, I will try different solutions as well.</li>
<li>Instead of doing the whole team wide changes, I will focus on small group of people, each time focus on one single solution, focus on one specific area.</li>
<li>Find early adopters like DevOps Champions within the team to help me.</li>
</ul>
<br />
<b>Some thoughts about learning</b><br />
Learning is my favourite topic, this Lean startup training inspired me to summarize some quotes about learning:<br />
- Software is a discovery process<br />
- Deliberate discovery<br />
- Learning is the first class task for developers<br />
- Learning is the constraint<br />
- Learn early, learn often, learn from failures<br />
<br />
It also remind me Alistair Cockburn's article about <a href="http://alistair.cockburn.us/Disciplined+Learning">"Disciplined Learning"</a>, which is a great reference.<br />
<br />
<b>Resources:</b><br />
- <a href="http://alistair.cockburn.us/Disciplined+Learning">Alistair Cockburn's learning patterns</a><br />
- <a href="http://www.shmula.com/genchi-genbutsu-ethnography/341/">Toyota Sienna's "Go and See" story</a>, and <a href="http://blog.gembaacademy.com/2009/02/13/genchi-genbutsu-do-you-really-understand-it/">this</a>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-72833062113070065892015-06-16T17:03:00.002-04:002015-06-16T17:04:38.216-04:00Fearless change - my presentation in Toronto Agile Open Space 2015On June 6th I participated the Toronto Agile Community's <a href="https://draft.blogger.com/[http://www.torontoagilecommunity.org/display/PUBLIC/Open+Space+2015">open space event</a>. it is a whole day meeting following the format of open space. This is my second time, and I feel more confident to contribute a presentation. My topic is called <b>"Fearless change - how to drive technical changes in large organization"</b>. it covered Linda Rising's book "<a href="http://web.lindarising.info/Fearless_Change.html">Fearless change</a>", and how I get inspired and applied some patterns to guide me build the <a href="http://robotframework.org/">RobotFramework </a>community in TELUS. Now I would like to share my experience of this presentation.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwn1t8kNeCmBIYp_N460Fcf7mf6Aa32a_5o4SC5EqF4ugPCoecr9wDVvHTFUyfy4i0DQKnQyp8pbjYTvaECV2A9CWTf2W8Kx2J1z4TXN4u_SUNS-iex1UofD0sbrpcmw4pGeDNa7AeLlh-/s1600/agile_open_space_2015_2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwn1t8kNeCmBIYp_N460Fcf7mf6Aa32a_5o4SC5EqF4ugPCoecr9wDVvHTFUyfy4i0DQKnQyp8pbjYTvaECV2A9CWTf2W8Kx2J1z4TXN4u_SUNS-iex1UofD0sbrpcmw4pGeDNa7AeLlh-/s320/agile_open_space_2015_2.jpg" width="320" /></a></div>
<b>Preparation</b><br />
I treated it seriously because I feel this is a great opportunity of practicing my public speech. Thanks Toastmasters club gave me the courage.<br />
- A month before the meeting I asked the advice from Joanne Stone, she gave me the positive feedback, also provided some tips. <br />
- On the day before the meeting, I printed out the 10 copies of 48 patterns list, and 10 copies of the colorful <a href="http://web.lindarising.info/uploads/Fearless-Change-Mindmap-by-Mihai-Iancu.jpg">mind maps based on the book</a>.<br />
- I brought the paper book with me.<br />
- I brought the mind map of my presentation note.<br />
- I wrote down the names of the patterns on the Post-It note and brought with me.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<b>Presentation</b><br />
Before the meeting I met Paul and asked him some advice. also I met my colleague Dimitar, I asked him help me facilitate my presentation. It turns out he was one of my best audience.<br />
<br />
During the presentation, I introduced the book of "Fearless change" written by Linda Rising. I tried to provide the answer of this scenario: when you learn a new tool or idea from internet or conference, how you can promote them in your organization, where can you start? The answer is using the 48 patterns in the book, they are easy to follow, very concrete and actionable. I can apply to anybody who aspired to bring changes to the team or organization, especially those are powerless, no official titles. I gave the example how I use some patterns to guide me build the RobotFramework automation testing framework in TELUS. I covered the following patterns:<br />
- Evangelist<br />
- Just Do it<br />
- Connector<br />
- Early Adopter<br />
- Study Group<br />
- Ask for Help<br />
- Involve everyone<br />
- Dedicated Champion<br />
- Do food<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
One of my favorite pattern is <b>"Just Do it</b>" - it means don't wait for permission from your boss, just do it, DON"T LET YOUR BOSS KNOW. when you get experience and successful, then tell your boss. My experience is if you ask permission to your boss first, he will ask you several questions: What is the benefit? Pros and cons? How much time/money it will take? But since it is at the beginning, you will not able to answer those questions, then you boss will likely say NO, once he say NO, then you will not be able to work on it. This is Catch-22 problem, to prove its benefit, you need to do it first; to do it, you need to prove it is valuable. So the solution is "Just Do It"!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIiY9m8l3uPaK9mMH6UH8AaMCiKCE_KhuOittNj-ioRDLGV08uGs4LEMZUMM_XLI_TSx5CbowQJSM5g4PAyuyeDlaJ4tR-QNC0vA3qTEr7kuANjPyL2Ny1hSCt9jvOmttTL-QFPyZu6ZjH/s1600/fearless_change_toront_agile_open_space_2015.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIiY9m8l3uPaK9mMH6UH8AaMCiKCE_KhuOittNj-ioRDLGV08uGs4LEMZUMM_XLI_TSx5CbowQJSM5g4PAyuyeDlaJ4tR-QNC0vA3qTEr7kuANjPyL2Ny1hSCt9jvOmttTL-QFPyZu6ZjH/s320/fearless_change_toront_agile_open_space_2015.jpg" width="320" /></a></div>
<br />
<b>Retrospection</b><br />
The feedback from Dimitar was positive, he likes my topic and hand out of the mind map. I believe I am the only one to prepare the materials hand out to the audience.<br />
I found I can still make it better: firstly I chose the wrong room, which is too far from the main hall, limited my audience; secondly I need to provide more information, like the website of the book, and url of the mind map image, and my personal email address, etc.<br />
<br />
<b>Next Steps</b><br />
I felt very good because I feel I can contribute something to the Agile community. A great starting point. In future I am interested in the following area, and hopefully I will provide more topics for the next year:<br />
- Software Craftsmanship movements and coding dojo<br />
- Self-organizing team, what/why/how<br />
- build learning organization<br />
- build cross functional team<br />
- To sell is human (from Daniel Pink's book)<br />
<br />
<b>Resources</b><br />
1.<a href="http://web.lindarising.info/Fearless_Change.html"> Linda Rising's book page </a><br />
2. <a href="http://web.lindarising.info/uploads/Fearless-Change-Mindmap-by-Mihai-Iancu.jpg">The url of fearless change mind map</a>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-64165707202872727862015-05-08T23:35:00.002-04:002015-05-08T23:38:47.089-04:00How to submit a form using javascript in ATGToday I spent lots of time to figure out how to submit a form in ATG platform. I tired many times and with the help of Google, I finally find the solution,<br />
<br />
1. make sure to set <b>type="hidden"</b> to the input field of the formHandler handleXXX method, like this:<br />
<br />
<dsp:form id="myForm"><br />
....<br />
.....<br />
<dsp:input type="hidden" bean="MyFormHandler.handleMethod" value="" /><br />
<br />
</dsp:form><br />
<br />
<br />
2. in your javascript method, you just need to call:<br />
<br />
$(#myForm).submit();<br />
<br />
<br />
I found when I typed<b> type="submit"</b> for the input field, and the handleXXX method is never called when the form is submitted through the javascript.<br />
<br />
Resources:<br />
1. https://community.oracle.com/thread/2471843<br />
2. http://stackoverflow.com/questions/29300501/atg-formhandlerneed-to-set-some-values-before-calling-the-handle-method<br />
3. http://www.mkthakral.com/j2ee/oracle-atg/atg-formhandler-ajax-call-using-jquery-json/Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-6738733080265338152015-05-06T22:30:00.001-04:002015-05-06T22:32:39.536-04:00How to mock a for loop using mockitoToday when I tried to use mockito to write unit test cases, I found I need to mock the for loop operation. Then I found the solution from <a href="http://stackoverflow.com/questions/6379308/testing-java-enhanced-for-behavior-with-mockito">here in stackoverflow</a>: the basic idea is to mock the <b>iterator </b>class and <b>collection </b>class, and base on your situation, you need to set the expectation of iterator.hasNext() and iterator.next() method.<br />
<br />
The following code is copied from the above link:<br />
<br />
<script src="https://gist.github.com/stevez/991c8685d68fc8af476a.js"></script>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-40942203838540451992015-05-02T23:26:00.001-04:002015-05-02T23:27:42.819-04:00Groovy's powerful collection methodsRecently I just realize Groovy provides some handy methods for collections.<br />
<br />
<b>Permutations</b><br />
<script src="https://gist.github.com/stevez/add3405c5a3266639a15.js"></script><b>
<br/>
Combinations</b>
<script src="https://gist.github.com/stevez/c7e5a68c88f9aaced871.js"></script>
<br />
<b>Subsequences</b>
<script src="https://gist.github.com/stevez/831be46ad4f427d2277c.js"></script>
<br />
<b>Intersect</b>
<script src="https://gist.github.com/stevez/a68815d7e56dad640a9c.js"></script>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-57205724292376907802015-05-01T23:51:00.003-04:002015-05-01T23:59:53.918-04:00Review of the talk: "Complexity is Outside of the Code"<iframe frameborder="0" height="302" scrolling="no" src="http://www.ustream.tv/embed/recorded/61439914?v=3&wmode=direct" style="border: 0px none transparent;" width="480"> </iframe>
<a href="http://www.ustream.tv/" style="font-size: 12px; font-weight: normal; line-height: 20px; text-align: left;" target="_blank">
<br />Broadcast live streaming video on Ustream</a>
<br />
<br />
Yesterday I watched the video: "Complexity is Outside of the Code" by Dan North and Jessica Kerr at craft conference 2015. Here I summarize what I learned.<br />
<br />
<b>Learning</b><br />
<ul>
<li>Learning is a first class task.</li>
<li>Follow the process: explore, evaluate, familiarize, understand and validate</li>
<li>Lean startup's "build-measure-learn" cycle, nothing should be built without any reason.</li>
</ul>
<blockquote class="tr_bq">
business impact <- learn <- measure <- test <- code</blockquote>
Dan uses the Kanban's pull based concept to describe the above concept: for example test pulls the code, business pulls the learn. This drives me to think more about TDD, in TDD we believe we should never start coding without a failing test.<a href="http://butunclebob.com/ArticleS.UncleBob.TheThreeRulesOfTdd)">(Uncle Bob's 3 laws of TDD)</a>, which is quite similar with the lean startup concept: "nothing should be built without any reason", in TDD, the failing test is the only reason for coding, which means the failing tests pulls the code, Bingo! Now I understand why Kent beck said <a href="http://www.threeriversinstitute.org/blog/?p=579">TDD is Kanban for code</a><br />
<br />
<br />
<b>The Goal of software development</b><br />
<blockquote class="tr_bq">
The goal of software development is to sustainably minimize lead time to business impact</blockquote>
<br />
<b>Develop a supportive community</b><br />
<ul>
<li>Nurturing a supporting team is vital within software development</li>
<li>It is OK to point out bad things and not have a solution</li>
<li>Reduce specialist silos, encourage becoming generalist</li>
<li>Developing a supportive community, contribute open source to other teams</li>
</ul>
<b><br /></b>
<b>Resources</b><br />
http://www.ustream.tv/recorded/61439914<br />
http://www.infoq.com/news/2015/04/north-kerr-complexity-code<br />
http://www.slideshare.net/jessitron/complexity-is-outside-the-codeSteve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-89024547435070368362015-04-29T23:10:00.000-04:002015-05-02T22:54:57.278-04:00Regular expression: you should not use dot to match any character in Java/GroovyRecently I just realize that in if you want to match "any character" in Java/Groovy, you should not use dot match (.).<br />
<br />
The reason is: dot match only works for single line text, will not work for line breaks. For the multiple lines text matching, the solution to match any character is using<b> [\s\S].</b><br />
<br />
Please refer<a href="http://www.regular-expressions.info/dot.html"> this article</a> for details.<br />
<br />
For example, following code snippet is used for stripping the javascript code in the text<br />
<br />
Source code:<br />
<br />
<script src="https://gist.github.com/stevez/b44d5fd4d0345fe19823.js"></script>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-35973587394424906672015-04-29T22:34:00.001-04:002015-04-29T22:38:11.350-04:00Learning Scala 1: swap array elementsHere posted my solution for the exercise 2 and 3 of Chapter 3 of page 39, in the book "Scala for the impatient".<br />
<br />
Exercise 2. Write a loop that swaps adjacent elements of an array of integers. For example,<br />
<div class="p2">
Array(1, 2, 3, 4, 5) <span class="s1"> becomes </span>Array(2, 1, 4, 3, 5)<span class="s1"> .</span></div>
<div class="p2">
<br /></div>
<div class="p2">
Solution:</div>
<div class="p2">
<script src="https://gist.github.com/stevez/e0d3906c19ed94e13fdc.js"></script></div>
Exercise 3. Repeat the preceding assignment, but produce a new array with the swapped<br />
<div class="p1">
values. Use <span class="s1">for</span> /<span class="s1">yield.</span></div>
<div class="p1">
<br /></div>
<div class="p1">
Solution:</div>
<script src="https://gist.github.com/stevez/8bdab52680053829c7d5.js"></script>
Note: I realize you can not write java style for yield statement, like if ( i%2 ==0 ) yield s(i+1)
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-15559521765428894892015-04-27T23:37:00.001-04:002015-05-02T23:35:18.557-04:00What I learned from Agile Engineering trainingLast week I took the 3-day "Agile Engineering Training" in TELUS, thanks a lot to our trainers from LeanIntuIt - Shawn Button and Declan Whelan. I learned a lot from them. The course covers TDD, Simple Design, SOLID principles, refactoring and dealing with legacy code. The fun part is there are a lots of coding Kata, like Bowling Game, Gilded Rose, etc. I am so glad to have an opportunity to learn those stuff, even actually I learned them since 10 years ago, this time I feel this training is a kind of a review of what I learned since I decided to be a software craftsman.<br />
<br />
Here is the mind map summarized of what I learned.<br />
<br />
<iframe frameborder="0" height="360px" id="xmindshare_embedviewer" scrolling="no" src="http://www.xmind.net/embed/6uY7?size=small" width="600px"></iframe><br />
Add some thoughts:
<br />
<ol>
<li>TDD/SOLID principles/Refactoring skills become more critical and in an Agile/Scrum team, you have to be great, to be better so that you can deliver faster, your code will be easier to change, easier to maintain;</li>
<li>Simple Design - it is summarized by only 2 points: fixing names and removing duplication. Combining with TDD's Red/Green/Refactoring cycle, it means just repeating this 2 things with test cases, your complex code logic design phase will turn into many tiny steps which just renaming and removing duplication; if you can do it fluently, the effort of thinking hard before hand becomes simple physical typing movements - which means you can design the code without thinking too much. This conclusion is so striking.</li>
<li>Refactoring - When I tried the <a href="https://github.com/emilybache/GildedRose-Refactoring-Kata/tree/master/Java">Kata Gilded Rose</a> (a simpler version which have all the tests before), I really sense the power of simple design - refactoring by doing renaming and extract methods, then the business logic gradually emerged, and design pattern is emerged. For me it means as long as you have all the test cases, then you can refactoring the code without need to understand the business logic, and business logic will be more clear after you refactored. That is another aha moment for me. Looks like code quality is a separate attribute beside the domain knowledge. If we apply this to code review, it means the good code should be enough understandable without understanding the business background first.</li>
</ol>
<br />
Resources:
<br />
<ol>
<li><a href="http://the%20four%20elements%20of%20simple%20design/">Four Elements of Simple Design</a>, by JBrain</li>
<li><a href="https://github.com/emilybache/GildedRose-Refactoring-Kata">Kata: Gilded Rose</a>, this is a great Kata about refactoring, it worth trying more times</li>
</ol>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-54880972991202980132015-03-19T23:50:00.003-04:002015-03-20T20:19:03.318-04:00Example to execute RobotFramework test cases using maven plugin <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
I spent some time using maven plugin to run the RobotFramework tests. It is OK, run as expected.<br />
But I feel it is a kind of restrictive.<br />
<br />
Here I post my one maven pom.xml example.<br />
<br />
For details, please check my github source code:<br />
1.<a href="https://github.com/stevez/robotframework-maven-plugin-example"> https://github.com/stevez/robotframework-maven-plugin-example</a><br />
2. <a href="https://github.com/stevez/robotframework-java-keyword">https://github.com/stevez/robotframework-java-keyword</a><br />
<br />
<br />
pom.xml
<script src="https://gist.github.com/stevez/cfe48ae386ebdebcca17.js"></script>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-2765349086944127062015-03-19T23:23:00.001-04:002015-03-19T23:59:08.186-04:00Execute RobotFramework test cases using Gradle script<br />
I did some research for RobotFramework using maven plugin. But I don't like it. it is too restrictive.Today I tried to implement a Gradle script, it is working, surprising easy. Here is the code sample.<br />
<br />
For details please refer my <a href="https://github.com/stevez/robotframework-gradle-script">github repository</a>.<br />
<br />
build.gradle<br />
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
<script src="https://gist.github.com/stevez/4ad40e28261569da15dc.js"></script>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-78036108140479738142015-02-07T20:20:00.001-05:002015-02-07T20:29:42.537-05:00Run soapUI project using ANT script<br />
<br />
Following is the sample ANT script to run soapUI project. To run it, you need to copy all the jar files from soapUI installation folder and also add soapUI-xxx.jar from bin folder, and put them in the lib folder and add it to ant classpath.<br />
<br />
This ant script support:<br />
1. you can run test by specifying the paramters like suite name, url, user name, password etc.<br />
2. by default it will run all the test cases in the project.<br />
3. it will generate JUnit compatible report.<br />
<br />
Please refer my <a href="https://github.com/stevez/soapui-ant">github reporitory</a> for the whole sample code.<br />
<br />
<project name="WS-Test" default="test" ><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><property file="build.properties"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><property name="test.dir" value="test-results"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><property name="project.dir" location="project"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="clean"><br />
<delete dir="${test.dir}"/><br />
</target><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="init"><br />
<mkdir dir="${test.dir}"/><br />
</target><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="test-with-properties" depends="init"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><java classname="com.eviware.soapui.tools.SoapUITestCaseRunner" errorproperty="tests-failed" fork="yes" dir="${test.dir}"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg line="-j -M -r -a -f${basedir}/${test.dir}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="-e${wsdl.url}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="-s${soapui.testsuite}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="${project.dir}/${soapui.project}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="-x${user.name}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="-x${user.password}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><fileset dir="lib" includes="*.jar"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></java><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></target><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="test" depends="init"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><java classname="com.eviware.soapui.tools.SoapUITestCaseRunner" errorproperty="tests-failed" fork="yes" dir="${test.dir}"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg line="-j -M -r -a -f${basedir}/${test.dir}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="${project.dir}/${soapui.project}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><fileset dir="lib" includes="*.jar"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></java><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></target><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="test-single-project" depends="init"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><antcall target="run-single-test"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <param name="project" value="${project.dir}/${soapui.project}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></antcall><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></target><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="run-single-test"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <java classname="com.eviware.soapui.tools.SoapUITestCaseRunner" errorproperty="tests-failed" fork="yes" dir="${test.dir}"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg line="-j -M -r -a -f${basedir}/${test.dir}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <arg value="${project}"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><fileset dir="lib" includes="*.jar"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </classpath><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></java><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></target><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><target name="report"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><junitreport todir="${test.dir}"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <fileset dir="${test.dir}"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><include name="TEST-*.xml"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </fileset><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <report format="frames" todir="${test.dir}/reports/html"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></junitreport><br />
</target><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
</project><br />
<br />
<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-2549952827410929972015-02-03T21:31:00.003-05:002015-02-03T21:33:31.259-05:00RobotFramework tools installation guideI used <a href="http://robotframework.org/">RobotFramework </a>for more than half a year, I really love it.<br />
Now I shared my installation guide.<br />
<br />
Hope this will be helpful for any Developers who are interested in RobotFramework, but don't have Python experiences.<br />
<br />
<b>Set up Robot framework Tool Chai</b><br />
<br />
1. Install python<br />
download python 2.7.6<br />
https://www.python.org/downloads/<br />
<br />
add the python installation folder to the windows PATH environment variable, for example<br />
C:\dev_software\Python27;<br />
<br />
2. Install pip<br />
http://pip.readthedocs.org/en/latest/installing.html<br />
download get-pip.py via https://bootstrap.pypa.io/get-pip.py<br />
open a command window via "run as admin", type:<br />
python get-pip.py<br />
<br />
Add following into windows PATH environment variable:<br />
C:\dev_software\Python27\Scripts;<br />
<br />
<br />
3. Install robot framework<br />
pip install robotframework<br />
<br />
4. Install selenium2library<br />
pip install robotframework-selenium2library<br />
<br />
<br />
5. Install RIDE<br />
<br />
install wxPython wxPython 2.8.12.1<br />
http://sourceforge.net/projects/wxpython/files/wxPython/2.8.12.1/wxPython2.8-win32-unicode-2.8.12.1-py27.exe/download<br />
<br />
install through windows ride package win32 version<br />
https://code.google.com/p/robotframework-ride/downloads/detail?name=robotframework-ride-1.2.3.win32.exe<br />
<br />
Or install using pip<br />
pip install robotframework-ride<br />
<br />
6. Install selenium webdriver client<br />
<br />
chrome driver: http://chromedriver.storage.googleapis.com/2.10/chromedriver_win32.zip<br />
<br />
IE driver<br />
http://selenium-release.storage.googleapis.com/2.42/IEDriverServer_Win32_2.42.0.zip<br />
<br />
unzip them and copy the exe files in c:\webdriver directory <br />
set them to windows path<br />
<br />
C:\dev_software\webdriver<br />
<br />
<br />
<br />
7. Test<br />
run pip list, then you should see following:<br />
<br />
decorator (3.4.0)<br />
docutils (0.11)<br />
pip (1.5.6)<br />
robotframework (2.8.5)<br />
robotframework-ride (1.3)<br />
robotframework-selenium2library (1.5.0)<br />
selenium (2.42.1)<br />
setuptools (5.1)<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br />
- open dos command, type<br />
pybot<br />
<br />
then it will shows:<br />
[ ERROR ] Expected at least 1 argument, got 0.<br />
Try --help for usage information.<br />
<br />
<br />
<b>Documents:</b><br />
- RobotFramework installation doc<br />
https://code.google.com/p/robotframework/wiki/Installation#Python_package_managers<br />
<br />
- RobotFramework Selenium2Library installation guide<br />
https://github.com/rtomac/robotframework-selenium2library<br />
<br />
- RIDE installation instructions:<br />
https://github.com/robotframework/RIDE/wiki/Installation-Instructions <br />
<br />
- selenium2library keywords doc<br />
http://rtomac.github.io/robotframework-selenium2library/doc/Selenium2Library.html Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-49791806490609566012014-07-10T00:13:00.002-04:002014-07-10T00:14:26.071-04:00Using Groovy MarkupBuilder to generate XML Declaration and DOCTYPEI found Groovy MarkupBuilder can also generate xml declaraion and doctype, with the help of <b><a href="http://groovy.codehaus.org/api/groovy/xml/MarkupBuilderHelper.html">groovy.xml.MarkupBuilderHelper</a></b> class. Following is the example<br />
<br />
def sw = new StringWriter()<br />
def xml = new groovy.xml.MarkupBuilder(sw)<br />
<br />
def helper = new groovy.xml.MarkupBuilderHelper(xml)<br />
helper.xmlDeclaration([version:'1.0', encoding:'UTF-8', standalone:'no'])<br />
helper.yieldUnescaped """<!DOCTYPE note SYSTEM "note.dtd"><br />
"""<br />
<br />
xml.person{<br />
firstname("Steve")<br />
lastname("Zhang")<br />
country("Canada")<br />
city("Toronto")<br />
}<br />
<br />
println sw.toString()<br />
<br />
<br />
And the result:<br />
<br />
<?xml version="1.0" encoding="UTF-8" standalone="no"?><br />
<!DOCTYPE note SYSTEM "note.dtd"><br />
<person><br />
<firstname>Steve</firstname><br />
<lastname>Zhang</lastname><br />
<country>Canada</country><br />
<city>Toronto</city><br />
</person><br />
<div>
<br /></div>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-66299152343897960552013-11-02T20:08:00.000-04:002013-11-02T20:08:00.028-04:00Crazy English - My Toastmaster CC #4 speechI finally finished my CC#4 speech this week. It is almost been a year since my last speech, I feel a kind of awkward.<br />
Actually last week I went to my mentor Robert Fox's club in Richmond Hill did the exact same speech, so this is my second time,<br />
Doing a speech in the second time is a kind of weird feeling.<br />
<br />
My speech is about my experiences of learning English, and I got many positive feedbacks, the audiences seemed like my speech, especially I put some humour.<br />
I realized my main problem is the pace, I spoke too fast, need to slow down, need to add more pause. I am not sure if it is because I practiced too much. And when I looked my video, I realized I have so many unnecessary movements,I definitely need to work on it.<br />
<br />
Following is the script of my CC#4 speech.<br />
<br />
<br />
<b>Crazy English</b><br />
<br />
"If you like him, let him learn English, because it is heaven; if you hate him, let him learn English, because it is hell."<br />
Learning English for me is more like going to the hell.<br />
<br />
Mr toastmaster, fellow toastmaster and welcome guests, I would like to share my crazy English learning experiences.<br />
<br />
I came from China, English is my second language. I started learning English at the age of 9, until I graduated from university when I was 22. After I graduated, I found I got an issue - we call it 'dumb English', it means I could read in English, but I couldn't speak. The reason is we focused more on 'learning' instead of 'practicing'. We had a crazy environment: on one hand, We don't have enough good English teachers, we don't have enough chance to practice speaking, we just focused on grammar, vocabulary,grammar and reading; on the other hand, the whole country is so crazy about the English, not because it is useful in daily life, but because the students have to deal with lots of English tests: when we go to university, when we get degree and when we apply for jobs. So the main reason of learning English is to pass the tests, there is no more time to improve our real English skills.<br />
<br />
One of the craziest test I ever had is TOEFL test. TOEFL stands for 'test of English as a foreign language'. It is very popular for the Chinese students, because this is the test you have to pass if English is your second language and you want to apply for an university in North America. To prepare my TOEFL test, I went to an English school in Beijing, That schools is famous for improving your TOEFL score in a short time. they didn't teach your the real English skills, instead they gave your tips. Those tips will help you provide the correct answer even if you don't fully understand the question.For example: in listening part, when you heard a conversation between a boy student and a girl student, the correct answer would be always the girl is better than the boy, because in TOEFL test, the girls are always smarter, working harder, keep the rooms cleaner; while the boys are always silly, lazy and make their room messy.I learned lots of this kind of tips, the thing is to master those tips, I have to do large amount of exercises, I finished 30 - 40 hour audio tapes within 3 months. Unfortunately those tips are useless in reality.<br />
<br />
TOEFL didn't help me, I have to try another way: I remembered that was one day in 2001, by chance I heard of an approach, it was so simple but really hard - I called it crazy dictation: when you listen to an article, try to write down every word you heard, leave the blank if you don't know, then repeat listening again and again, until you fill all the blanks. After I gave a try, I realize this is the right way for me, since those blanks gave me the real feedback, once I solved them, then they became my real improvements, no cheating any more. Since then I started the dictation, I listened for 2 years, everyday I spent 2 hours at least. I really enjoy the learning process, because every day I could see my listening skills improving. The dictation was really fun, since when I finally figured out a word after I listened to it for 10 times,15 times and even more, I felt like solving a puzzle game. After 2 years, I finished 20 hours audio tapes. The dictation gave me the break thorough, both my listening and speaking skills got improved, I became more confident, I felt finally I climbed out of the English hell.<br />
<br />
This is my crazy stories of learning English, what I learned from it would be follow the basic, step by step, and be patient, working slowly will actually makes you faster. Now I face another challenge - my Toastmaster cc manual! I am going to attack this challenge by using these principles, I hope this time it will lead me to the heaven.<br />
<br />
Mr. toastmaster.<br />
<div>
<br /></div>
Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-32390814913185973282013-07-27T17:26:00.000-04:002013-07-27T17:51:58.812-04:00Building my Raspberry Pi - Hardware partI've been working on my<a href="http://www.raspberrypi.org/"> Raspberry Pi</a> for 3 months, I got the Model B board from my former colleague Yuriy as a gift when I left the company, I really appreciate Yuriy give me a chance to play with this tiny toy.<br />
Now I will share the hardware I used to build my raspberry Pi.<br />
<br />
1. Wifi Adapter, <a href="http://www.amazon.ca/Axpertec-Inc-Wireless-Adapter-EW-7811Un/dp/B003MTTJOY/ref=pd_cp_ce_0">Edimax 150Mpbs</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ecx.images-amazon.com/images/I/31DpcF4He7L._SL500_AA300_.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://ecx.images-amazon.com/images/I/31DpcF4He7L._SL500_AA300_.jpg" width="200" /></a></div>
It works perfectly in my Raspberry Pi,no driver installation needed, the only thing I would complain is it only support 2.4G, no support for 5.8G<br />
<br />
2. Keyborad/mouse, <a href="http://www.amazon.com/Logitech-mk360-Keyboard-Wireless-Mouse/dp/B006GMLD7A">Logitech mk360 combo</a>,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ecx.images-amazon.com/images/I/31uu2d-d8uL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://ecx.images-amazon.com/images/I/31uu2d-d8uL.jpg" width="200" /></a></div>
I bought it from costco for $30, no driver needed, works by just pluggin in.<br />
<br />
3. Cable<br />
I bought this <a href="http://www.amazon.ca/gp/product/B001VOD6Q4/ref=oh_details_o01_s00_i00?ie=UTF8&psc=1">HDMI to DVI adapter</a> on amazon.ca for less than $2.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ecx.images-amazon.com/images/I/41LMnc0XV1L._SL500_.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://ecx.images-amazon.com/images/I/41LMnc0XV1L._SL500_.jpg" width="200" /></a></div>
4. SDcard<br />
I used my old Sandisk Ultra II 4.0GB, I think it is class 4, and a Trascend 8.0GB class 10 for using raspbmc media center<br />
<br />
5. Case, I bought it from<a href="http://www.sayal.com/zinc/zinc_SEARCH.asp?txtSEARCH=233570"> </a><span id="goog_999397875"></span><a href="http://www.sayal.com/zinc/zinc_SEARCH.asp?txtSEARCH=233570">Sayal</a><span id="goog_999397876"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.sayal.com/images_c/2011-GB4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://www.sayal.com/images_c/2011-GB4.JPG" width="320" /></a></div>
<br />
I like the design, transparent, the thing is once you installed your Raspberry Pi board, it is hard to take out. Besides that no complain.<br />
<br />
6. Power adapter<br />
Following works:<br />
LG phone power adapter, Samsung Note II power adapter, and Kindle power adapter.<br />
<br />
7. Display<br />
I used Samsung LCD 22-inch (DVI) and 24-inch B2430, both works perfectly.<br />
<br />
8. Blue tooth adapter, <a href="http://www.canadacomputers.com/product_info.php?cPath=27_1048_715&item_id=NV8359">IOGEAR GBU521</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://content.etilize.com/225/1021985257.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://content.etilize.com/225/1021985257.jpg" width="200" /></a></div>
<br />
It works on Raspberry Pi, and could pair with my mac wireless keyboard and mouse, but it takes long process to install the bluetooth package, and I seldom use it<br />
any more, I would not recommend it.<br />
<br />
Totally I spent another $50 - $70 to build this tiny computer, it is still a lot cheaper than building a regular one. I really love this toy.<br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0tag:blogger.com,1999:blog-3555300218296290557.post-47410952148431610512013-06-05T16:17:00.000-04:002013-06-05T16:26:47.946-04:00Attacking the legacy code:Buiding weblogic beehive application using ANTRecently I started to investigate on writing an Ant script to build our J2EE web application. Right now we just export the WAR file using Eclipse IDE, but we plan to adopt Jenkins for the build automation, then we got a problem. I tried Eclipse Headless build, it did not working. So I decided to use Ant script to build our J2EE web application. Our application is based on Weblogic 10.3, it uses lots of weblogic portal library, netUI, and page flow. Through several times trial and error, finally I got my ant script works. It is a kind of tricky, here I would like to share my experience, show you how to write an ANT script to build the Weblogic beehive application.<br />
<br />
1. <b>Setup the environment variables in your ANT script file</b><br />
You need to setup following environment variables: <b>WL_HOME, WORKSHOP_HOME, and BEA_HOME</b>.<br />
In my computer weblogic was installed under C:\Oracle\Middleware, so these environment variables will look like this in my build.xml:<br />
<br />
<b><property environment="env"/></b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span><property name="env.WL_HOME" value="C:/Oracle/Middleware/wlserver_10.3"/></b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span><property name="env.WORKSHOP_HOME" value="C:/Oracle/Middleware/wlportal_10.3/workshop" /></b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span><property name="env.BEA_HOME" value="C:/Oracle/Middleware" /></b><br />
<br />
2. <b>Import weblogic Ant task files into build.xml</b><br />
<b> </b> Based on this <a href="http://docs.oracle.com/cd/E13222_01/wls/docs92/beehive/building_beehive.html">article</a>, WebLogic Server ships with the following Ant files for building and deploying Beehive applications:<br />
<WL_HOME>\workshop\weblogic-beehive\ant\weblogic-beehive-buildmodules.xml<br />
<WL_HOME>\workshop\weblogic-beehive\ant\weblogic-beehive-tools.xml<br />
<WL_HOME>\workshop\weblogic-beehive\ant\weblogic-beehive-imports.xml<br />
<br />
In my computer, the ant script folder will be: C:\Oracle\Middleware\wlportal_10.3\workshop\weblogic-beehive\ant<br />
<br />
I found a bug, in weblogic-beehive-imports.xml:<br />
<br />
<b><property name="apache.xbean.jar" value="${env.BEA_HOME}/modules/com.bea.core.xml.xmlbeans_1.0.0.0_2-4-1.jar"/></b><br />
<b> <property name="bea.xbean.jar" value="${env.BEA_HOME}/modules/com.bea.core.xml.beaxmlbeans_1.0.0.0_2-4-1.jar"/></b><br />
<br />
should be changed to:<br />
<br />
<b><property name="apache.xbean.jar" value="${env.BEA_HOME}/modules/com.bea.core.xml.xmlbeans_1.1.0.0_2-4-1.jar"/></b><br />
<b> <property name="bea.xbean.jar" value="${env.BEA_HOME}/modules/com.bea.core.xml.beaxmlbeans_1.1.0.0_2-4-1.jar"/></b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
I just copied those 3 xml file into my project folder, so in my build.xml, add following after the property definition:<br />
<br />
<import file="weblogic-beehive-imports.xml"/><br />
<import file="weblogic-beehive-tools.xml"/><br />
<import file="weblogic-beehive-buildmodules.xml"/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
3.<b> Write ant target to build web application</b><br />
Use weblogic "build-webapp" ant task, it will compile the source code, and it will generate the page flow xml<b>, </b>specifically it will generate those xml files under WEB-INF\classes\_pageflow folder, which took me a long time to figure out.<br />
<b>Please note: to build successfully, you need to put the source code under the WEB-INF\src folder.</b><br />
<br />
The ant target will look like this:<br />
<br />
<b> <target name="build-web" depends="init"></b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span><build-webapp</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span> webapp.src.dir="${build.dir}"</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span> webapp.build.dir="${build.dir}"</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span> app.build.classpath="webapp.classpath"/></b><br />
<b> </target> </b><br />
<br />
4.<b> "Error running apt compiler" issue</b><br />
At first the ant script works in my local machine, but under windows server it failed with "Error running apt compiler", and the detailed error is like "CreateProcess error=87". After Google <a href="http://stackoverflow.com/questions/9834627/build-xml-gives-issue-createprocess-error-87-the-parameter-is-incorrect">this erro</a>r, and found out it is because the classpath is too long.<br />
To fix this, I checked my classpath library, and removed all the unnecessary files, and finally it is working.<br />
<br />
<b>Resource</b><br />
1. <a href="http://docs.oracle.com/cd/E13222_01/wls/docs92/beehive/building_beehive.html">Building Beehive Applications</a><br />
<br />Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com2tag:blogger.com,1999:blog-3555300218296290557.post-34918964723830666292013-06-04T00:16:00.005-04:002013-06-04T00:34:54.189-04:00My Toastmaster Sergeant-At-Arms debriefNow it comes to the toastmaster year end, and my role as SAA is almost finished. It is time for me have a debrief.<br />
<br />
<b>WHY I picked the Role of SAA</b><br />
Last year of this time, I just joined the Markham Toastmasters club for a couple month, I was very impressed by the highly structured meeting, I was really curious about what is the behind scene; and as a software developer I am very interested in self-organized team, toastmaster club is a good example of self-organized team, I really want to know more about it; the third reason is I thought SAA is the easiest job, if you can arrive earlier each time, then it is not a problem. Considering these reasons, which droves me to attend the executive team, take the role of SAA.<br />
<br />
<b>HOW I did my jobs and my achievements</b><br />
When I started working, I realized I was wrong, there are lots of work - both visible and invisible jobs. At the beginning, I feel a kind of stressed, and even more the past SAA Hitesh did such a great job, he raised the bar, which made me nervous, how can I match that? My mentor Robert suggested me that just try my best, I will say I did that. I have a passion to do a better job, always try to come to the meeting at 6:30PM, this job needs focus on details, since any small mistake will cause the problem; and you have to keep multi-tasking, which means I need to do some sacrifice, focus on helping others without pay attention to the meeting. I keep asking for help, Hitesh give me lots of tips, I really appreciate this guy.<br />
<br />
What I am proud of myself is I applied what I learned from my career to the SAA role, for example, from Lean I learned value added system and eliminate waste - when I do my job of SAA, I keep asking my self, how can I add more value to the club? how to make it better? From Kanban, I create a Kanban board to visualize the guest list; From continuous improvement philosophy, I keep asking myself, how can I improve the process, make the process better? And from Scrum/Agile, I learned the concept of Servant leadership, which means a good leader is helping other better, removing the impediments which hold them back; all these helped me a lot to do my job.<br />
<br />
Overall beside I did my job, I make the following achievements which I believe added the value to the club:<br />
- Created a Kanban board using a software called Trello, which is lot easier to tracking the guest list and collaborate around the executive team;<br />
- We stared recording video for speakers since February this year;<br />
- Setup a facebook group for the club, trying to bring social media into club<br />
<br />
Those are nobody asked you to do it, and neither will create benefit to myself, I don't even think about adding them to my CL manual, but I still want to do them? Why? because based on the lean thinking, they definitely add value to the customer - our club members, our job is delight customer, make them happy.<br />
<br />
Overall I got positive feedback so far, which means my hard work was recognized.<br />
<br />
<b>The Benefit I got</b><br />
I will say this is a great experience to me, the work itself is a reward. I can apply what I learned to the club, I had the autonomy to make changes, make improvement, and especially when you see your efforts can help others and make some influence, this is a great joy. I really appreciate I have this opportunity to bring my contribution and make our club better. Another great benefit is I have a chance to make friends, they inspire me and help me a lot, which is a great asset and will definitely help me in future.<br />
<br />
<b>Something BAD</b><br />
The only BAD thing to me is I only make one speech this year, and my table topic skills is still not improved. Comparing to other executive members, I fell behind.<br />
The reason is one: SAA job do take more time than I thought, and it will take me lots of time to prepare my speech, there is a conflict between these 2 things, I really admire other executive members, how can they finish 2 things at the same time?<br />
<br />
<br />
<b>Next step</b><br />
Next year, I will focus on my speech, trying to finish my CC ASAP! I fell far behind with my fellow members, I need to catch up. I have bigger plans, but I realize the road block is my CC manual, it is the impediment to reach my goals. I really need help, I need mentor, I would really appreciate if anybody can help me.Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com1tag:blogger.com,1999:blog-3555300218296290557.post-73437096224206798852013-05-27T23:56:00.000-04:002013-05-28T00:14:08.303-04:00Workshop notes of "3 Secrets to better Public speakingLast Saturday on May 25th, I participated the Toastmaster Division A education workshop at York Regional Police Station(Yonge/Major Mackenzie). 2 hour-session only costs me $5. Now I share the note of the first session - <b>3 Secrets to better public speaking.</b><br />
The speaker is Mr. Jacques Brunet, I like his speech, and was really impressed the way he delivered the message. Like what he said, all the tips he told are common sense, but they are forgotten truth, we just don't aware them. Tonight I spent some time to review my notes, and put them in the mind map using XMIND, and share it with you. hope it will be helpful.<br />
<br />
<iframe frameborder="0" height="360px" id="xmindshare_embedviewer" scrolling="no" src="http://www.xmind.net/embed/2ESL?size=small" width="600px"></iframe>
<br />
Here is the URL to the mind map of this workshop note.<span id="goog_1112883804"></span> <a href="http://www.xmind.net/m/2ESL/">http://www.xmind.net/m/2ESL/</a><span id="goog_1112883805"></span>Steve Zhanghttp://www.blogger.com/profile/11521569965417254322noreply@blogger.com0