<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Khoa Che</title>
    <description>The latest articles on DEV Community by Khoa Che (@voanhcuoc).</description>
    <link>https://dev.to/voanhcuoc</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F190395%2Ffe35d567-dfe4-4a8d-b191-b6342c384db8.jpeg</url>
      <title>DEV Community: Khoa Che</title>
      <link>https://dev.to/voanhcuoc</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/voanhcuoc"/>
    <language>en</language>
    <item>
      <title>Which steps to ensure the robustness of a small distributed system ?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Wed, 11 Dec 2019 22:59:00 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/which-steps-to-ensure-the-robustness-of-a-small-distributed-system-517a</link>
      <guid>https://dev.to/voanhcuoc/which-steps-to-ensure-the-robustness-of-a-small-distributed-system-517a</guid>
      <description>&lt;p&gt;I'm a student doing a college project. Can say I'm an experienced programmer, I have been tackling with distributed systems for so long before this project but never taken it seriously.&lt;/p&gt;

&lt;p&gt;This project is fairly small as a distributed system, so it's easy to make a working implementation. Now I have to make it robust and write a report about it.&lt;/p&gt;

&lt;p&gt;Searching on the web is frustrating. There're only long reads in form of books, smaller one like reports or paper focus on only one specific aspect such as scalibility. They are all for domain experts working on large systems in industry. The 8 fallacies of DS do remind me something to do but they're still abstract concepts, mot HOWTO.&lt;/p&gt;

&lt;p&gt;So, how to make a distributed system robust (practically secure and fast), and, prove it (any metrics I can measure and put on the scientific report) ?&lt;/p&gt;

&lt;p&gt;Many thanks !&lt;/p&gt;

</description>
      <category>help</category>
      <category>distributedsystems</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Are there browser extensions to get environment info to reproduce bug?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Sun, 04 Aug 2019 09:49:12 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/are-there-browser-extensions-to-get-environment-info-to-reproduce-bug-1146</link>
      <guid>https://dev.to/voanhcuoc/are-there-browser-extensions-to-get-environment-info-to-reproduce-bug-1146</guid>
      <description>&lt;p&gt;Kind of extensions that output a snippet:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Operating system info&lt;/li&gt;
&lt;li&gt;Browser version&lt;/li&gt;
&lt;li&gt;All extension names and versions&lt;/li&gt;
&lt;li&gt;Configurations and settings&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>help</category>
    </item>
    <item>
      <title>Who know the name of this type of puzzle game?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Sun, 04 Aug 2019 09:43:07 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/who-know-the-name-of-this-type-of-puzzle-game-4ige</link>
      <guid>https://dev.to/voanhcuoc/who-know-the-name-of-this-type-of-puzzle-game-4ige</guid>
      <description>&lt;p&gt;It is a very popular puzzle game, but I don't know its name. Here's an example I make:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://another-puzzle-prototype.surge.sh/"&gt;https://another-puzzle-prototype.surge.sh/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>help</category>
      <category>puzzle</category>
    </item>
    <item>
      <title>Do you think functional code readable ?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Wed, 17 Jul 2019 05:11:14 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/do-you-think-functional-code-readable-4aln</link>
      <guid>https://dev.to/voanhcuoc/do-you-think-functional-code-readable-4aln</guid>
      <description>&lt;p&gt;Functional programming paradigm aims at correctness and beauty. It produces the most elegant piece of code with a streamlined look and feel.&lt;/p&gt;

&lt;p&gt;Personally, I can effortlessly write functional code and would like to write it rather than procedural or object-oriented code. It's more straightforward for me: I'd like to use &lt;code&gt;map&lt;/code&gt; rather than for-loop.&lt;/p&gt;

&lt;p&gt;But because most of my colleagues just don't get functional programming, they claim my code is unreadable, so unmaintainable. Beginners are scared away from my code.&lt;/p&gt;

&lt;p&gt;A sample of my code, making use of &lt;code&gt;lodash&lt;/code&gt; a lot:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;get_piece&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;chain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pieces&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;piece&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_x&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_y&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;process_move&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;move&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// FIXME the move should be specified by absolute coeff of the piece to move&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;to_move_x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;move&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;to_move_y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_y&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;move&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;get_piece&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;to_move_x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;to_move_y&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_x&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;to_move_x&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;to_move_y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;adjacent_offsets&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;freeze&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="c1"&gt;// up&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="c1"&gt;// left&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="c1"&gt;// down&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="c1"&gt;// right&lt;/span&gt;
&lt;span class="p"&gt;]);&lt;/span&gt;

&lt;span class="c1"&gt;// Check if co-effient is in bound of the board&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;in_bound&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_y&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split_x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hole_y&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split_y&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Return a random element from an array, uniform distribution&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;choice&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;random&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;random_move&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;possible_moves&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;chain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;adjacent_offsets&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;offset&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;in_bound&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;offset&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;move&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;choice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;possible_moves&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;process_move&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;move&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;shuffle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;times&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;random_move&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;is_piece_in_position&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_x&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;result_x&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current_y&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;piece&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;result_y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// return true if all pieces in right position&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;check_result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nx"&gt;board&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;chain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pieces&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;is_piece_in_position&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;every&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Do you think functional code readable ?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>functional</category>
    </item>
    <item>
      <title>How surge.sh handle custom domain permission ?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Fri, 12 Jul 2019 13:14:12 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/how-surge-sh-handle-domain-permission-1d83</link>
      <guid>https://dev.to/voanhcuoc/how-surge-sh-handle-domain-permission-1d83</guid>
      <description>&lt;p&gt;Today I deployed a static page to a custom domain using &lt;a href="http://surge.sh"&gt;http://surge.sh&lt;/a&gt; . It works like a charm, but I feel something strange, so I read &lt;a href="https://surge.sh/help/adding-a-custom-domain"&gt;the guide to add custom domain&lt;/a&gt; again and again.&lt;/p&gt;

&lt;p&gt;Oh, until now my dumb brain just can't figure out how surge.sh know that the domain is belong to my account! To make sure, I check &lt;a href="https://zeit.co/docs/v2/domains-and-aliases/adding-a-domain/"&gt;the guide of Zeit Now&lt;/a&gt;, they do have ways to verify by random nameservers or verification code in TXT record.&lt;/p&gt;

&lt;p&gt;What magic help surge.sh do that ?&lt;/p&gt;

&lt;p&gt;P/S: this comment better clarify my question:&lt;/p&gt;


&lt;div class="liquid-comment"&gt;
    &lt;div class="details"&gt;
      &lt;a href="/voanhcuoc"&gt;
        &lt;img class="profile-pic" src="https://res.cloudinary.com/practicaldev/image/fetch/s--sbFF7_y---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--3dfiajlf--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_50%2Cq_auto%2Cw_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/190395/fe35d567-dfe4-4a8d-b191-b6342c384db8.jpeg" alt="voanhcuoc profile image"&gt;
      &lt;/a&gt;
      &lt;a href="/voanhcuoc"&gt;
        &lt;span class="comment-username"&gt;Khoa Che&lt;/span&gt;
      &lt;/a&gt;
      &lt;span class="color-base-30 px-2"&gt;•&lt;/span&gt;
&lt;a href="https://dev.to/voanhcuoc/comment/d15e" class="comment-date crayons-link crayons-link--secondary fs-s"&gt;
  &lt;time&gt;
    Jul 12 '19
  &lt;/time&gt;
&lt;/a&gt;

    &lt;/div&gt;
    &lt;div class="body"&gt;
      

&lt;p&gt;Thanks for your very detail explaination!&lt;/p&gt;

&lt;p&gt;But &lt;a href="https://surge.sh/help/adding-a-custom-domain" rel="nofollow"&gt;the guide of surge.sh&lt;/a&gt; is a static site and it gives the same DNS configuration for everybody! I can complete the DNS configuration without ever logging into surge.sh . All the same:&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sub.mydomain.com   3600   IN   CNAME   na-west1.surge.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your case &lt;code&gt;arte-docs.netlify.com&lt;/code&gt; is specific to you. Your account obtained that subdomain before.&lt;/p&gt;

&lt;p&gt;In my case there's nothing specific to my account. So anyone with an account could literally deploy to my domain like this:&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;surge . sub.mydomain.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;Disclaimer: I didn't check by another account, just curious!&lt;/p&gt;

</description>
      <category>help</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JS Game engine to create simple puzzle game?</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Sun, 07 Jul 2019 14:27:47 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/js-game-engine-to-create-simple-puzzle-game-4m9b</link>
      <guid>https://dev.to/voanhcuoc/js-game-engine-to-create-simple-puzzle-game-4m9b</guid>
      <description>&lt;p&gt;Greeting everybody, I'm a full-stack web dev with a very little exposure to game development at all. (I've tried to hack an HTML canvas game before, thanks to that I knew what a particle system is.)&lt;/p&gt;

&lt;p&gt;Now I need to create some puzzle game quickly. They require dragging puzzle pieces around, which is an advanced topic for me.&lt;/p&gt;

&lt;p&gt;Can you recommend any game engine dedicated to puzzle game with a simple API?&lt;/p&gt;

&lt;p&gt;Thanks in advance!&lt;/p&gt;

</description>
      <category>help</category>
      <category>javascript</category>
      <category>html</category>
    </item>
    <item>
      <title>A, P, I - put together the words</title>
      <dc:creator>Khoa Che</dc:creator>
      <pubDate>Thu, 04 Jul 2019 13:08:22 +0000</pubDate>
      <link>https://dev.to/voanhcuoc/a-p-i-put-together-the-words-1h89</link>
      <guid>https://dev.to/voanhcuoc/a-p-i-put-together-the-words-1h89</guid>
      <description>&lt;p&gt;&lt;em&gt;Yet another introduction to API&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;ORIGINAL: &lt;a href="https://write.as/voanhcuoc/a-p-i-put-together-the-words"&gt;https://write.as/voanhcuoc/a-p-i-put-together-the-words&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Context
&lt;/h1&gt;

&lt;p&gt;For now, I'm mentoring some of my friends on how to develop software. They are smart ones, they know how to code but haven't had any exposure at all to the software development process. The first rock I stumble upon was to explain to them &lt;strong&gt;what, why and how to do API&lt;/strong&gt; (Application Programming Interface, &lt;em&gt;in its &lt;strong&gt;broadest meaning&lt;/strong&gt;&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;For god sake, I'm a lazy person so I just want to search the Internet for some blog posts or lectures, that usually will explain it better than me. But no, there's no such single article that presents my understandings. &lt;a href="https://en.wikipedia.org/wiki/Application_programming_interface"&gt;The Wikipedia post&lt;/a&gt; is good but it's rendered unlearnable by newbie. Finally, I feel the urge to write a post myself!&lt;/p&gt;

&lt;h1&gt;
  
  
  API - an overloaded term
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;P/S: The best way to learn from this article, is to first read it from top down, then read it again from bottom up, per the unit of each section.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Web API
&lt;/h2&gt;

&lt;p&gt;Thanks to the rise of cloud computing and microservice architecture, the meaning of word &lt;em&gt;API&lt;/em&gt; in common sense has nearly been superseded by &lt;em&gt;Web API (i.e. API exposed through a network, mostly Internet)&lt;/em&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When business people refer to &lt;em&gt;API&lt;/em&gt;, they always mean &lt;em&gt;Web API&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This one, although should be put far down the learning path, always appear in the first Google results.&lt;/p&gt;

&lt;h2&gt;
  
  
  SDK (Software Development Kit)
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;API&lt;/em&gt; is not &lt;em&gt;SDK&lt;/em&gt; and vice versa. They are different concepts anyway.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;SDK&lt;/em&gt; is a term under the umbrella of technology. Technology provider may give you an &lt;em&gt;SDK&lt;/em&gt; so you can build software that utilizes or applies their technology. (e.g. You can use &lt;em&gt;Kinect SDK for Windows&lt;/em&gt; to apply &lt;em&gt;Kinect technology&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;An &lt;em&gt;SDK&lt;/em&gt; is a toolkit. The toolkit comprises of tools. And there's mostly always an &lt;em&gt;API&lt;/em&gt; inside it. &lt;strong&gt;&lt;em&gt;API&lt;/em&gt; is a tool&lt;/strong&gt; in terms of &lt;em&gt;SDK&lt;/em&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;SDK&lt;/em&gt; usually consists of &lt;strong&gt;at least one &lt;em&gt;API&lt;/em&gt;&lt;/strong&gt;.&lt;br&gt;
&lt;em&gt;API&lt;/em&gt; may be provided &lt;strong&gt;alone&lt;/strong&gt; or &lt;strong&gt;within an &lt;em&gt;SDK&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What's crucial here, is the new understanding of &lt;em&gt;API&lt;/em&gt; arising from the view of &lt;em&gt;API&lt;/em&gt; as a tool.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When &lt;em&gt;application software developers&lt;/em&gt; refer to &lt;em&gt;API&lt;/em&gt;, they mostly mean the &lt;em&gt;API&lt;/em&gt; as a tool.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To be clear &lt;em&gt;application software developers&lt;/em&gt; is who design or implement User Interface, not who design or implement &lt;em&gt;API&lt;/em&gt;. They only make use of &lt;em&gt;API_s. The understanding of _API as a tool&lt;/em&gt; is enough for them...&lt;/p&gt;

&lt;h2&gt;
  
  
  Programming Interface - the P and I
&lt;/h2&gt;

&lt;p&gt;... but not for &lt;em&gt;API developers&lt;/em&gt;, who &lt;em&gt;create the API&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;User Interface and Programming Interface are vastly different. Users are living people that can adjust their behavior to adapt the interface, while a computer is a mindless machine which hardly does that (only if consciously instructed to do so with huge effort).&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Application developer&lt;/em&gt; can utilize the &lt;em&gt;common sense of people&lt;/em&gt; to make User Interface. &lt;em&gt;API developers&lt;/em&gt; only have some &lt;em&gt;community conventions&lt;/em&gt; which is served only as a reference and cannot be relied upon.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The red close button in the corner of a window can be used to quit the entire program, or just minimize it - based on which program it is. A user may be confused if the behavior is not what they expect in the first place, but he can quickly learn about it later on.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In science community using Python, there's a convention that matrices is presented by &lt;code&gt;numpy.ndarray&lt;/code&gt; data structure, most of the time. Which is great, but you can't rely on it, you must confirm it by looking at official information sources before using &lt;code&gt;numpy.ndarray&lt;/code&gt; API on these matrices. If you assume that and start coding, then your program may break and you'll be surprised that matrices are presented by a different data structure from a different library.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As you will notice, the term &lt;em&gt;programming interface&lt;/em&gt; (without &lt;em&gt;application&lt;/em&gt;) is rarely used outside. People say &lt;em&gt;ey - pee - eye&lt;/em&gt; everywhere.&lt;/p&gt;

&lt;p&gt;It's pretty reasonable, the purpose of every &lt;em&gt;programming interface&lt;/em&gt; ever created is &lt;strong&gt;to apply&lt;/strong&gt; a piece of software. If not that then what? From my experience, I just can't point out any case that &lt;em&gt;programming interface&lt;/em&gt; created not for applying the software.&lt;/p&gt;

&lt;p&gt;So, &lt;em&gt;API&lt;/em&gt; ≈ &lt;em&gt;programming interface&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;API developer&lt;/em&gt; view software they develop as a system, and API is the &lt;em&gt;interface&lt;/em&gt; that system expose to other software programs.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Interface - the I
&lt;/h2&gt;

&lt;p&gt;Let build a conceptual model of &lt;em&gt;interface&lt;/em&gt; in general.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Interface&lt;/em&gt; define how an &lt;em&gt;individual system&lt;/em&gt; interact with the outside world. At the analysis level, &lt;em&gt;interface&lt;/em&gt; is everything about the system we take into account, so we can say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The &lt;em&gt;interface&lt;/em&gt; define the &lt;em&gt;system&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example, every day you walk into a convenience store (such as Circle K) to buy something, here's a step-by-step description of what happens:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;At first, the &lt;em&gt;shop assistant&lt;/em&gt; greet you.&lt;/li&gt;
&lt;li&gt;You ask her for some items, she points you to where it is.&lt;/li&gt;
&lt;li&gt;You come there and choose what you'd like to buy.&lt;/li&gt;
&lt;li&gt;You take it to her, she tells you its price.&lt;/li&gt;
&lt;li&gt;You give her money, then take the item and get out of the store.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Day to day, you come to the store and meet different shop assistant: yesterday is Karen, today is Sarah, tomorrow is Helen... But you and she always go through the same process as I describe above. In summary:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Karen, Sarah or Helen, ... implement &lt;em&gt;shop assistant interface&lt;/em&gt; (as described above).&lt;/li&gt;
&lt;li&gt;You interact with a &lt;em&gt;shop assistant&lt;/em&gt; to buy items.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;All these girls are &lt;em&gt;the same&lt;/em&gt; for you as a customer. As analysis level,  are &lt;em&gt;the same&lt;/em&gt; system to you. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;That system is defined by the &lt;em&gt;interface&lt;/em&gt; above, hence named &lt;em&gt;shop assistant&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let clarify the roles here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You are the &lt;strong&gt;user&lt;/strong&gt; of the &lt;em&gt;interface&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;The girls and the store manager work together to provide the &lt;em&gt;interface&lt;/em&gt; available at the store. They're &lt;strong&gt;developer&lt;/strong&gt;s of the &lt;em&gt;interface&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;The girls with their &lt;em&gt;shop assistant interface&lt;/em&gt; forms multiple &lt;strong&gt;subsystem&lt;/strong&gt;s of the larger &lt;strong&gt;system&lt;/strong&gt; (the store).&lt;/li&gt;
&lt;li&gt;They're exchangeable cause the same &lt;em&gt;interface&lt;/em&gt;. So without the presence of each girl every day. The store is still able to &lt;em&gt;expose&lt;/em&gt; the &lt;em&gt;shop assistant interface&lt;/em&gt;, every day.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;An interface may be implemented by multiple &lt;em&gt;system&lt;/em&gt;. (Each one called an &lt;em&gt;implementation&lt;/em&gt; of that interface)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;But there's something wrong! The girls are human and they're different ...&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Yep, of course. One day you feel that Karen is so cute and gonna flirt with her. After a while, she agrees to have a date with you. You both have lunch, take a walk, talk about hobbies and family, then have sex... Now Karen is different from Sarah and Helen.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Karen exposes &lt;em&gt;lover interface&lt;/em&gt; to you.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But she is still the same as other girls, to me. And the same to you as a customer too: No matter you both are lovers, you still can go to that store and ask Karen for information of items, she still implement &lt;em&gt;shop assistant interface&lt;/em&gt; to you.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A &lt;em&gt;system&lt;/em&gt; may expose multiple _interface_s.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;An interface is like a piece of water. You take a piece of water and pour it into 2 cups, one for you and one for Karen. Bump! You have 2 pieces of water, cause you've named them. Karen is defined by interface she exposes to the world. If you split her interface into multiple interfaces as I do above, then we can think that she exposes multiple interfaces: &lt;em&gt;shop assistant&lt;/em&gt;, &lt;em&gt;lover&lt;/em&gt;, &lt;em&gt;friend&lt;/em&gt;, &lt;em&gt;child&lt;/em&gt;, ...&lt;/p&gt;

&lt;p&gt;To be continued ...&lt;/p&gt;

&lt;p&gt;&lt;em&gt;TODO write about performance as the quality of implementations (in ideal situation, implementations conforms 100% to the interface)&lt;/em&gt;&lt;/p&gt;

</description>
      <category>api</category>
    </item>
  </channel>
</rss>
