tag:blogger.com,1999:blog-52091120713912338862024-03-08T16:02:38.868-08:00A day in the programmer's lifePetar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.comBlogger14125tag:blogger.com,1999:blog-5209112071391233886.post-18126609877891729502013-06-23T09:41:00.001-07:002013-06-23T09:41:52.485-07:00AngularJS Step By Step TutorialsI have been developing with <a href="http://angularjs.org/">AngularJS</a> lately and I am starting step by step tutorials in my blog.<br />
<br />
Here is the first article from the series:<br />
<br />
<h2>
Hello AngularJS</h2>
<b>AngularJS </b>is a client-side JavaScript framework by Google. It helps you to write organized and testable code on the client side. AngularJS shines particularly in the so called single page applications (SPA). If you are curious why it is called AngularJS - it is because the expressions in AngularJS are surrounded by brackets - <b>{{ expressionHere }}</b><br />
<br />
All you need to start using <b>AngularJS </b>is to include the library .js file in your html page.<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code><html ng-app>
<head>
<title>AngularJS is cool</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<head>
<body>
{{'Hello AngularJS'}}
<br/>
{{ 7 + 9 }}
</body>
</html>
</code></pre>
<br />
As you may have guessed this example prints <b>Hello AngularJS</b> and <b>16</b> in your page.<br />
<br />
You learned three important things about AngularJS from this simple example:
<br />
<ol>
<li>You must include the AngularJS library through the script tag.</li>
<li>Expressions in AngularJS are surrounded by <b>{{ }}</b></li>
<li>You must use the <b>ng-app</b> directive to bootstrap your application. A directive in AngularJS is a custom component - extension to the standard HTML. <b>ng-app</b> is a built-in directive in AngularJS. You can create your own custom components, i.e. directives. But this will be a topic of another tutorial.</li>
</ol>
<h2>
Simple Calculator</h2>
<div>
Now let's create something more useful - a simple calculator. You enter two numbers and an operator and our program will calculate the result.</div>
<div>
<br /></div>
<div>
Your business logic in AngularJS is done in the so called <b>controllers</b>. You declare variables and methods in controllers. Controllers are created in separate js files which you include in the page. From the html view the controller is used with the help of the <b>ng-controller</b> built-in directive.</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code><html ng-app>
<head>
<title>AngularJS Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<script src="calc-controller.js"></script>
<head>
<body>
<div ng-controller="Calculator">
<label>A:</label>
<input ng-model="firstNumber" type="text"> <br/>
<label>Operator:</label>
<select ng-model="selectedOperator"
ng-options="operator for operator in operators"></select> <br/>
<label>B:</label>
<input ng-model="secondNumber" type="text"> <br/>
<button ng-click="calculate()">Calculate</button> <br/>
Result: {{result}}
</div>
</body>
</html>
</code></pre>
</div>
<div>
<br /></div>
</div>
Here is our controller declared in the <b>calc-controller.js</b>:<br />
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>function Calculator($scope) {
$scope.operators = ['+', '-', '*', '/'];
$scope.selectedOperator = $scope.operators[0];
$scope.calculate = function() {
var A = parseInt($scope.firstNumber);
var B = parseInt($scope.secondNumber);
var C = 0;
switch ($scope.selectedOperator) {
case '+':
C = A + B;
break;
case '-':
C = A - B;
break;
case '*':
C = A * B;
break;
case '/':
C = A / B;
break;
}
$scope.result = C;
};
}
</code></pre>
<br />
We specified the controller name using the <b>ng-controller</b> directive:<br />
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><div ng-controller="Calculator"></span><br />
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><br /></span>
The controller name must match the name of the function - <span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;">function Calculator($scope)</span><br />
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><br /></span>
For each controller a local <b>$scope</b> is created. You can access the information in the page and also modify it through the <b>$scope</b>. You can also declare methods in the scope. All things you declare in the <b>$scope</b> are accessible only in the part of the html page where the <b>ng-controller</b> directive is specified.<br />
<br />
Using the <b>ng-model</b> directive you bind the input information (the numbers and the operator) to the <b>$scope</b>. Then the controller can access the input information through the <b>$scope </b>parameter variable.<br />
<br />
Using the <b>ng-options </b>directive we populate the select combobox with data from the controller.<br />
<br />
Using the<b> ng-click</b> directive, the <b>calculate(</b>) method in the controller is called, when the button is clicked:<br />
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><button ng-click="calculate()">Calculate</button></span><br />
<br />
Now look really carefully at this line in the controller:<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 653px;"><code>$scope.result = C;</code></pre>
<br />
After it is executed, AngularJS will automatically update the <b>{{result}}</b> expression in the UI. This automatical bidirectional binding between the <b>UI </b>and the <b>scope </b>is really powerful and makes your life easier.<br />
<br />
I hope this introductory article was useful to you. You learned that <b>controllers </b>and <b>directives </b>are a key part from <b>AngularJS</b> and created a simple calculator.<br />
<br />
In the next article we will tackle the next important part - the AngularJS <b>filters</b>, which are used to format your data in the UI.<br />
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><br /></span>
<span style="background-color: #eeeeee; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px;"><br /></span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-72564601008188526852013-05-19T04:10:00.001-07:002013-05-19T04:10:29.610-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Sorry for skipping one week!</span><br />
<br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the previous puzzle is <b>Qf4</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>exf4</b></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> white mate with <b>Bg4!, </b>otherwise white mate with <b>Qf7!</b></span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="3n4/P1R5/6kp/7p/7R/8/6K1/1n2BQ1B w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A_n__BQ_B______K________________R_______p______kpP_R________n____0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-84366904247412871792013-05-05T04:02:00.001-07:002013-05-05T04:02:25.872-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Qe8</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>Rxe8</b></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> white mate with <b>Nf5!, </b>otherwise white mate with <b>Qd7!</b></span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="8/R5p1/3pk3/3pp3/Q7/8/1B3K1R/3B4 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A___B_____B___K_R________Q__________pp______pk___R_____p_________0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-81359820560046150522013-04-28T08:06:00.002-07:002013-04-28T08:06:25.996-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">I skipped one week, because I was very busy. Neverthless here is the new puzzle.</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Qc3</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>dxc3</b></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> white mate with <b>Ld6!, </b>otherwise white mate with <b>Qd4!</b></span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="2B2rb1/P7/Nppk2n1/3p4/3B4/6NP/2R1Q1PK/3R4 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A___R______R_Q_PK______NP___B_______p____Nppk__n_P_________B__rb_0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-51281131256640308642013-04-14T04:20:00.002-07:002013-04-14T04:20:32.573-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Re3</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>fxe3</b></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> white mate with <b>Qg4, </b>otherwise white mate with <b>Re5!</b></span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="8/2P2P2/p3pb2/P3kp2/3p4/BP6/2Q2N1P/3R3K w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A___R___K__Q__N_PBP_________p____P___kp__p___pb____P__P__________0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-16621520734214712152013-04-07T03:28:00.000-07:002013-04-07T03:28:02.060-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Rf3</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>d4</b></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">, white mate with <b>Rxf4!</b></span><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></b><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<br />
<img alt="1Bbb2N1/8/6P1/2P2k2/3p1p2/1R6/6R1/3Q2K1 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A___Q__K_______R__R_________p_p____P__k________P__________Bbb__N_0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-64762250145225251032013-03-31T05:07:00.002-07:002013-03-31T05:07:35.241-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Qxa8</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>R</b></span><b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">xa8</b><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">, white mate with <b>Rxh4</b></span><b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">, </b><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">otherwise they mate with</span><b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> Qa4!</b><br />
<b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></b>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="5N2/2p5/2k5/P2p3P/5p2/Q1P4R/6B1/1R4K1 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A_R____K_______B_Q_P____R_____p__P__p___P__k_______p__________N__0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-18676128606887573712013-03-24T03:46:00.001-07:002013-03-24T03:54:08.656-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>Ne5</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">!</b><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">When black respond <b>fxe5</b>, white mates with <b>Rd6, </b>otherwise they mate with<b> Qc4!</b></span><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></b>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Congratulations to <b>Dimitar Raev</b> for solving it!</span><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></b>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="b2rB3/2N3PR/8/2p5/2k4p/2p2Q1P/P1P1P1PK/3R4 w - - 0 1" span="" src="http://www.apronus.com/chess/stilldiagram.php?d=A___R____P_P_P_PK__p__Q_P__k____p__p_______________N___PRb__rB___0&w=8&h=8" style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-60103778418238263492013-03-17T04:19:00.003-07:002013-03-19T03:03:54.680-07:00<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">The solution for the puzzle from the previous week is <b>B</b></span><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">d4!</b><br />
<br style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Here is the puzzle for this week:</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<img alt="1B4n1/8/1P3pNR/5Pbn/3k4/p4PPN/2Q2PB1/R2K3b w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=AR__K___b__Q__PB_p____PPN___k_________Pbn_P___pNR_________B____n_0&w=8&h=8" style="border: 1px solid black;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><a href="http://www.blogger.com/"></a><span id="goog_1839945005"></span><span id="goog_1839945006"></span><a href="http://www.blogger.com/"></a><span id="goog_1839945013"></span><span id="goog_1839945014"></span><br /></span><span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">White to move, mate in two</span><br />
<br style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Happy solving!</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">People who solved it correctly (received email from them):</span><br />
<span style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">1. <b>Dimitar Raev</b></span>Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com2tag:blogger.com,1999:blog-5209112071391233886.post-21902280774444921452013-03-10T05:04:00.001-07:002013-03-10T06:41:00.780-07:00The solution for the puzzle from the previous week is <b>Qd4!</b><br />
<br />
Here is the puzzle for this week:<br />
<br />
<img alt="nN6/4Q3/4pB2/3k4/2p1p3/2R1R3/8/3K4 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A___K______________R_R_____p_p______k________pB______Q___nN______0&w=8&h=8" style="border: 1px solid black;" /><br />
<br />
White to move, mate in two<br />
<br />
Happy solving!Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-7003017235449308852013-03-03T03:38:00.000-08:002013-03-03T04:04:26.871-08:00Weekly Chess PuzzleOne of my hobbies is chess. I started playing at an early age, but then I oriented to programming.<br />
<br />
I started creating chess puzzles as a hobby a few weeks ago. Feel free to comment if you like my chess puzzles or not!<br />
<br />
I will post every Sunday my new chess puzzle, and will tell you the solution the next Sunday.<br />
Write me your solution at <b>petar.minchev (at) gmail.com</b> and I will keep a ranklist how many puzzles each person solved.<br />
<br />
So here is the puzzle for this week:<br />
<br />
<img alt="7B/1P5N/p1P1k1PR/2P1pp2/Q7/6P1/2p2KB1/5R2 w - - 0 1" src="http://www.apronus.com/chess/stilldiagram.php?d=A_____R____p__KB_______P_Q_________P_pp__p_P_k_PR_P_____N_______B0&w=8&h=8" style="border: 1px solid black;" /><br />
<br />
White to move, mate in 2 moves<br />
<br />
<br />
<br />
<br />Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-56482400101964537102011-10-16T07:54:00.000-07:002011-10-16T07:54:31.990-07:00Java Concurrent APIIf you have read the <a href="http://petar-minchev.blogspot.com/2011/10/thread-articles.html">previous</a> part of the article series, you should be aware that even the simplest operations like incrementing a counter require your attention(you must think where to put <b>volatile </b>or <b>synchronized</b>). That's why <b>Java Concurrent API</b> was created, where some common operations and patterns are implemented as <b>atomic </b>and<b> thread-safe</b>. All classes from this <b>API </b>are contained in the <a href="http://download.oracle.com/javase/7/docs/api/">java.util.concurrent</a> package.<br />
<br />
The first part of classes which we will take a look at, are in the <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/package-summary.html">java.util.concurrent.atomic</a> sub-package. They implement thread-safe operations on single variables. So let's see how we can transform the counter example from the previous article using the <b>API </b>classes:<br />
<pre><code>public class IdCounter {
private AtomicInteger counter = new AtomicInteger();
public int increment() {
return counter.incrementAndGet();
}
}</code></pre>So <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/AtomicInteger.html">AtomicInteger</a> basically wraps a primitive integer value and allows you to make thread-safe operations on it. You don't care anymore about <b>volatile </b>and <b>synchronized</b>. You just use the appropriate methods. The other classes in the <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/package-summary.html">java.util.concurrent.atomic</a> package are basically doing the same but not on a different type - <b>Long</b>, <b>Boolean</b>, <b>Array</b>, etc..(<a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/AtomicLong.html">AtomicLong</a>, <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/AtomicBoolean.html">AtomicBoolean</a>, <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/atomic/AtomicIntegerArray.html">AtomicIntegerArray</a>).<br />
<br />
All these classes have the useful method<b> compareAndSet(expectedValue, newValue)</b>. It is making atomic the following kind of code:<br />
<pre><code>if (variable == expectedValue) {
variable = newValue;
}</code></pre>Without appropriate synchronization the above code is error prone to race conditions, because while one thread is setting the <b>newValue</b>, a second thread can be making the comparison with the <b>expectedValue</b>. This is not what you want in the most cases.<br />
<br />
<br />
Now it is time to take a look at the <a href="http://en.wikipedia.org/wiki/Producer-consumer_problem">Producer-Consumer</a> pattern and how the concurrent API makes its implementation a piece of cake. There are two roles here - the <b>producer </b>and the <b>consumer</b>. The producer produces work and the consumer consumes work, created by the producer. Imagine a factory conveyer. A machine puts some products on the conveyer. Then a person gets the product from the conveyer and do whatever is needed next. Here the machine is the <b>producer </b>and the person is the <b>consumer</b>. In programming terms - the conveyer is a buffer, the <b>producer </b>and <b>consumer </b>are two separate threads which are inserting and getting information from the shared buffer. As you know extra care must be taken when two threads are accessing a shared resource. Hopefully the concurrent API provides the <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/BlockingQueue.html">BlockingQueue</a> interface. There are the methods <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/BlockingQueue.html#put%28E%29">put</a> and <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/BlockingQueue.html#take%28%29">take</a> which "produce" and "consume" from the queue. Both methods are blocking, which means they will block(wait) until there is an empty space for producing, or until at least one product appears for consuming. Here is a simple example of a <b>Producer </b>and <b>Consumer </b>class. Exception handling is left off for clarity.<br />
<pre><code>public class Producer implements Runnable {
private BlockingQueue<product> queue;
public Producer(BlockingQueue<product> queue) {
this.queue = queue;
}
@Override
public void run() {
//Produce 1000 products
for (int i = 0; i < 1000; i++) {
queue.put(new Product());
System.out.println("PRODUCED PRODUCT");
}
}
}</product></product></code></pre><pre><code>public class Consumer implements Runnable {
private BlockingQueue<product> queue;
public Consumer(BlockingQueue<product> queue) {
this.queue = queue;
}
@Override
public void run() {
while (true) {
Product product = queue.take();
System.out.println("CONSUMED PRODUCT");
}
}
}</product></product></code></pre><br />
And here is the calling code:<br />
<pre><code>BlockingQueue<product> queue = new ArrayBlockingQueue<product>(50);
Producer producer = new Producer(queue);
new Thread(producer).start();
Consumer consumer = new Consumer(queue);
new Thread(consumer).start();</product></product></code></pre><br />
Here the limit of the queue is <b>50</b>, which means there can be maximum <b>50 </b>products at the same time in the queue. Also <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/ArrayBlockingQueue.html">ArrayBlockingQueue</a> is used as an implementation of <a href="http://download.oracle.com/javase/6/docs/api/java/util/concurrent/BlockingQueue.html">BlockingQueue</a>, which means that the queue is backed by an array.<br />
<br />
Thanks for reading the second part of the article series!<br />
<br />
Stay tuned for the next part where other points from<b> </b><b>Java Concurrent API </b>will be covered<b> - </b><b>ExecutorService </b>and <b>Semaphore</b>.Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-80258375696853349162011-10-09T04:55:00.000-07:002011-10-16T07:56:37.743-07:00Thread articlesI am starting a series of articles with topics based on threads and thread-safety.<br />
<br />
<div style="text-align: center;"><span style="font-size: large;"><b>Thread safety, volatile and synchronized</b> </span></div><br />
In today's world we can barely write a complex app, without using more than one thread. You know - the user interface should not freeze, your computer has more than one core and you decide to use their full power, etc... The point is that as long as a second thread enters into the picture, we the programmers are out of the comfort zone. The program flow is not so ordinary anymore. If you are somewhat newbie to threads, you will ask: <b> </b><br />
<br />
<b>1. What is it all about the thread safety?</b><br />
Thread safety is all about shared state - state, used by more than one thread simultaneously. This is all you have to care about. For example a variable used by more than one thread. Sounds simple enough, right?<br />
<br />
Since an example is worth a thousand words, take a look at this class:<br />
<pre class="source-code"><code>public class LongRunningTask() {
private boolean shouldStop;
public void work() {
while (!shouldStop) {
launchRocketToTheMoon();
}
}
public void stop() {
shouldStop = true;
}
}
</code></pre><br />
Let's consider that 100 rockets were launched to the moon and you are tired of it. You call the <b>stop()</b> method to stop the process, which was running in a different thread. The scary thing here is that there isn't a guarantee that your program will stop launching rockets at all. You will ask why?<br />
<br />
<b>Lesson </b><b>learned </b><b>1</b>: If two threads are accessing the same variable, there isn't any guarantee that when the first thread makes a change to the variable, the second thread will see it.<br />
<br />
The reason is that caching can be applied for greater efficiency at different levels and the second thread will receive a stale data. So, what is the solution?<br />
<br />
<b>2. Apply the volatile modifier to the variable.</b><br />
When using the volatile modifier you are basically telling - give me the latest value from the RAM, don't even try to get it from a cache.<b><br />
</b><br />
<br />
The following version of the class, fixes the above defficiency<b>:</b><br />
<pre class="source-code"><code>public class LongRunningTask() {
private volatile boolean shouldStop;
public void work() {
while (!shouldStop) {
launchRocketToTheMoon();
}
}
public void stop() {
shouldStop = true;
}
}</code></pre><br />
<b>Lesson </b><b>learned </b><b>2: Use the volatile keyword to prevent receiving stale data.</b><br />
<br />
At this level, you may say: Ah clear, so we put the <b>volatile </b>behind every variable, used by more than one thread, and we are fine with the thread-safety. Totally wrong. With using the <b>volatile </b>modifier you only guarantee that you won't be accessing cached stale data. This can be sufficient only in the most basic cases(like the rocket example, discussed above). But in more complex situations, the so called <b>race conditions</b> come to bite you.<br />
<br />
<b>3. Race conditions and the synchronized keyword: </b><br />
<br />
Take a look at this simple counter class:<br />
<pre class="source-code"><code>public class IdCounter {
private volatile int counter;
public int increment() {
counter++;
return counter;
}
}
</code></pre><br />
Although the class looks innocent, it will fail miserably if used by more than one thread simultaneously. If you run two threads and call the increment method from them, there is a very high chance you won't get the sequence 1, 2, 3, 4, 5, 6, ... but something different like 1, 2, 2, 3, 4, 5, ... <br />
<br />
You ask: "Why that? I am not receiving stale data. I am using <b>volatile</b>."<br />
<br />
Let's take a closer look at the <b>counter++</b> line. It is equivalent to <b>counter = counter + 1</b>. This simple line is doing three things. First it gets the old value of the counter, adds <b>1</b> to it and returns the new value, which is set to the counter. Here is the catch: If the first thread is getting the old value, and at the same time the second thread is getting the old value, then<b> counter = oldValue + 1 = 1 + 1 = 2</b>, and <b>counter = oldValue + 1 = 1 + 1 = 2.</b> So we called increment two times and received the same number. We are totally screwed. This is a classical example of a race condition. The two threads are participating in a race and depending on their position in the race, different unpredictable things can happen. Race conditions are difficult to debug because they are not reproducible. You run the code for the first time - it works correctly. You run the code for the second time - it doesn't work correctly. It is a nightmare.<br />
<br />
So how to solve the problem? The <b>synchronized </b>keyword comes to the rescue.<br />
The <b>synchronized </b>keyword can be used to guard both a whole method or only a block of code.<br />
When you apply <b>synchronized </b>to a method, then when a second thread tries to enter the same method, it will be waiting there for the first thread to exit from the method.<br />
<br />
Here is the fixed thread-safe code:<br />
<pre class="source-code"><code>public class IdCounter {
private int counter;
public synchronized int increment() {
counter++;
return counter;
}
}
</code></pre><br />
When one thread calls the <b>increment()</b> method, and then a second thread calls it, the second thread will wait for the first one to exit from the method, before entering it. So there is no danger for the counter now.<b> </b>The increment operation is now <b>atomic</b>.<b> </b>Notice also that the <b>volatile </b>modifier was removed.<b> </b>This is because when you are in a <b>synchronized </b>method or block<b>, </b>then no caching of variables is used<b>.</b> So <b>synchronized </b>is also doing what <b>volatile </b>does<b>.</b><br />
<br />
<b>Lesson learned 3: Use the synchronized keyword to prevent race conditions.</b><br />
<br />
Stay tuned for the <a href="http://petar-minchev.blogspot.com/2011/10/java-concurrent-api.html">second</a> part of the article where <b>Java Concurrent API</b> will be touched, and also some more complex examples will be covered.Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0tag:blogger.com,1999:blog-5209112071391233886.post-24774664550286745212011-09-04T01:48:00.000-07:002011-09-04T01:48:45.276-07:00The point of the blogI am starting this blog mainly to share interesting stuff about programming in general. You know - new technologies, design patterns, multi-threading, nice algorithms, tricks, frustrating bugs or whatever about programming:) I sincerely hope some of my posts will be helpful for you, my readers.Petar Minchevhttp://www.blogger.com/profile/12958118175985058493noreply@blogger.com0