{"componentChunkName":"component---src-templates-blog-post-js","path":"/feature-toggle-and-regression","result":{"data":{"markdownRemark":{"html":"<h1>Feature Toggle And Regression</h1>\n<p>It is OK to violate DRY principls to copy the code when working on a new feature that is high couple to old behaviour.</p>\n<p>As a professional software engineer, I kind of strickly obey the DRY principals, and don't want to introduce any regression. But this could end up you can not easily to write a clean code and refactor. You need to branch your code in the exisitng code base. </p>\n<p>Copy the exisitng code will ease your regresion nightmare. Once toggle is removed, the old code will disappear, so you are not violating DRY prinsipal any more. But you need to make sure the toggle will be removed and old behaviour will not needed. Otherwise, you could put yourself in a situation that DRY try to address, maintain multiple codes that basically indentical.</p>","frontmatter":{"date":"August 09, 2018","path":"/feature-toggle-and-regression","tags":["dry","feature-toogle","regression"],"title":"Feature Toggle And Regression"}}},"pageContext":{"prev":{"excerpt":"Install Prism Plugin Prism is a lightweight, extensible syntax highlighter. Gatsby JS comes with a well integrated plugin. Follow the instruction then you can render code snippets in a nice looking way.  Here is an example. The follwing markdown…","html":"<h1>Install Prism Plugin</h1>\n<p>Prism is a lightweight, extensible syntax highlighter. Gatsby JS comes with a well integrated <a href=\"https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/?=\">plugin</a>. Follow the instruction then you can render code snippets in a nice looking way. </p>\n<p>Here is an example. The follwing markdown </p>\n<div class=\"gatsby-highlight\" data-language=\"markdown\"><pre class=\"language-markdown\"><code class=\"language-markdown\">```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: <span class=\"token code keyword\">`gatsby-transformer-remark`</span>,\n    options: {\n      plugins: [\n        <span class=\"token code keyword\">`gatsby-remark-prismjs`</span>,\n      ]\n    }\n  }\n]</code></pre></div>\n<p>will become</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// In your gatsby-config.js</span>\nplugins<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    resolve<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">gatsby-transformer-remark</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n    options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      plugins<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">gatsby-remark-prismjs</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">]</span></code></pre></div>\n<p>And we can try some typescript code as well.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">Person</span> <span class=\"token punctuation\">{</span>\n    name<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">,</span>\n    age<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">let</span> john <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    name<span class=\"token operator\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n    age<span class=\"token operator\">:</span> <span class=\"token number\">39</span>\n<span class=\"token punctuation\">}</span> <span class=\"token keyword\">as</span> Person<span class=\"token punctuation\">;</span></code></pre></div>","id":"40b1ec34-5356-5cec-b23f-d9f3fe357d69","timeToRead":1,"frontmatter":{"date":"2018-08-23T12:02:03.913Z","path":"/install-prism-plugin","tags":["gatsbyjs","prismjs"],"title":"Install Prism Plugin"}},"next":{"excerpt":"Looking At The Root Problem Sometime when we are working on a hard problem, we will kind of stuck in the middle and found lots of hacky way to overcome the problem. But lots of time, the solution is not perfect and you need to keep coming back cause…","html":"<h1>Looking At The Root Problem</h1>\n<p>Sometime when we are working on a hard problem, we will kind of stuck in the middle and found lots of hacky way to overcome the problem. But lots of time, the solution is not perfect and you need to keep coming back cause sometime it simply doesn't work. Sometimes, you need to look at the big picture, it might solve the problem entirely.</p>\n<p>Here is an example, the product I am working on has to support i18n. Means need to support multiple languages. The problem we have is we don't know when we will recieve the translations. If the translation doesn't come back by the time we ship our code, user will see some missing string when viewing in the languages other then English.</p>\n<p>To overcome this problem, we come up with an idea by adding fallback logic in our code base. If user is not viewing English, then we inject the missing translation in English. This works well, but it is time consuming. Adding the fallback logic is time consuming, removing the logic when translation came back is time consuming too.</p>\n<p>By looking at the problem again, we found we can simply using webpack plugin to merge the translation file, all the missing string in the translation files will be replace with English string. This only took me few hours to implement, but the on going cost of adding and removing fallback logic is uncountable.</p>","id":"5ee5b110-e95b-5143-a043-a56280d46113","timeToRead":1,"frontmatter":{"date":"2018-08-09T06:34:51.232Z","path":"/looking-at-the-root-problem","tags":["probelm solving"],"title":"Looking At The Root Problem"}}}}}