<?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>Forem: Aleksey Pastuhov</title>
    <description>The latest articles on Forem by Aleksey Pastuhov (@apastuhov).</description>
    <link>https://forem.com/apastuhov</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%2F40044%2Fdd6e7839-efaa-43ad-8d64-d4bb095b8835.jpg</url>
      <title>Forem: Aleksey Pastuhov</title>
      <link>https://forem.com/apastuhov</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/apastuhov"/>
    <language>en</language>
    <item>
      <title>Make Dart/Flutter test report readable</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Tue, 17 Dec 2019 07:50:21 +0000</pubDate>
      <link>https://forem.com/apastuhov/make-dart-flutter-test-report-readable-2h0b</link>
      <guid>https://forem.com/apastuhov/make-dart-flutter-test-report-readable-2h0b</guid>
      <description>&lt;p&gt;Hello there! I will try to be short.&lt;/p&gt;

&lt;h2&gt;
  
  
  Intro
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Short
&lt;/h3&gt;

&lt;p&gt;Flutter test report is not human-friendly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Long
&lt;/h3&gt;

&lt;p&gt;On my personal Flutter project, I’ve started the setup of Continuous Integration &amp;amp; Continuous Deployment. And in Flutter test report is difficult to use. The report is hard to read &amp;amp; understand in case of failure. Sure, in case of success, everything is good, because there is just one line.&lt;/p&gt;

&lt;p&gt;Flutter has big error stack traces. When it has some exception not in your codebase, but in Flutter itself. I mean errors with positioning or sizing, and for them, you will see a few hundreds of lines in logs.&lt;/p&gt;

&lt;p&gt;In the front-end development I like the dot notation usually used for unit tests. Dot notation is cool because it’s clear and you can identify skipped and failed tests easily. Such feature useful when you have over 500 tests in your project. But in Dart, there is no such thing, only default and machine reporter.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XmBpf9uk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qpcins55zm18ljd074lh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XmBpf9uk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qpcins55zm18ljd074lh.png" alt="Sample of failed test with the long output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What to do?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Short
&lt;/h3&gt;

&lt;p&gt;Here is a tool, I’ve created: &lt;a href="https://pub.dev/packages/dart_dot_reporter"&gt;dart_dot_reporter&lt;/a&gt; which makes report readable.&lt;/p&gt;

&lt;h3&gt;
  
  
  Long
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://pub.dev/packages/dart_dot_reporter"&gt;dart_dot_reporter&lt;/a&gt; tool transforms machine results to the more readable and clear output. And here is an example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MdIPPETB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u96eolhadxfhunz6cval.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MdIPPETB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u96eolhadxfhunz6cval.png" alt="Default output with color in console"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you are not familiar with Dot notation&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;.&lt;/code&gt; Dot for passed test&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;!&lt;/code&gt; Warning that test was skipped&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;X&lt;/code&gt; for Failed test&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The summary line of icons will be displayed at the start of the report. And in case of skip or failure, it will display the name of the test after the icon on the new line.&lt;/p&gt;

&lt;p&gt;I implemented a few features out of the box. If you want - you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;hide skipped tests&lt;/li&gt;
&lt;li&gt;show successful tests&lt;/li&gt;
&lt;li&gt;append few error details after test name in case of error&lt;/li&gt;
&lt;li&gt;display id number of the test (which is like the order number)&lt;/li&gt;
&lt;li&gt;disable color&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also, later I plan to display top of tests which execution took too much time. &lt;/p&gt;

&lt;h2&gt;
  
  
  Alternative
&lt;/h2&gt;

&lt;p&gt;In some cases, you can find a JUnit report also useful. &lt;a href="https://pub.dev/packages/junitreport"&gt;junit&lt;/a&gt;&lt;br&gt;
But in my case, I wanted to have a possibility to understand which test failed from logs or email/slack message with a fast look on the report.&lt;/p&gt;

&lt;h2&gt;
  
  
  Finally
&lt;/h2&gt;

&lt;p&gt;And you can see the example of that tool usage &lt;a href="https://github.com/apastuhov/dart_dot_reporter/commit/23609661f188fc6d91c837fa7aea48c90ce07f57/checks?check_suite_id=359924535"&gt;here&lt;/a&gt; in “Run tests” section. Because I use dart_dot_reporter on CI for itself with GitHub actions, which I found useful for personal projects.&lt;/p&gt;




&lt;p&gt;If you find some issues - write me a note or create a bug on &lt;a href="https://github.com/apastuhov/dart_dot_reporter"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>dart</category>
      <category>flutter</category>
      <category>testing</category>
    </item>
    <item>
      <title>How to manage Technical Debt</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Wed, 14 Nov 2018 06:04:19 +0000</pubDate>
      <link>https://forem.com/apastuhov/how-to-manage-technical-debt-3p8g</link>
      <guid>https://forem.com/apastuhov/how-to-manage-technical-debt-3p8g</guid>
      <description>&lt;p&gt;Originally posted on my blog &lt;a href="http://apastuhov.com" rel="noopener noreferrer"&gt;apastuhov.com&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Today more people think about technical debt than 5 years ago. Because every project has a debt, but not everyone drives it. And even if they drive - they will just keep a snowball in most cases.&lt;/p&gt;

&lt;p&gt;I want to share how I prefer to manage technical debt and what it gives to me in a result.&lt;/p&gt;

&lt;h2&gt;
  
  
  Definition and the problem
&lt;/h2&gt;

&lt;p&gt;What Wikipedia tells us:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Technical debt (also known as design debt or code debt) is a concept in software development that reflects the implied cost of additional rework caused by choosing an easy solution now instead of using a better approach that would take longer.&lt;/p&gt;

&lt;p&gt;If technical debt is not repaid, it can accumulate ‘interest’, making it harder to implement changes later on. Unaddressed technical debt increases software entropy.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In easy words, technical debt means a list of invalid solutions, which you or your team made by mistake. Do not forget - everyone can be wrong. So if you do not manage your debt - you will get the next list of problems.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Demotivated team&lt;/li&gt;
&lt;li&gt;Have no ability to control project risks&lt;/li&gt;
&lt;li&gt;Increased software entropy&lt;/li&gt;
&lt;li&gt;Everyone would like to rewrite the whole project from scratch&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Foprsu6uy9s9q2k8j0fwg.png" class="article-body-image-wrapper"&gt;&lt;img title="Debt is normal be weird" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Foprsu6uy9s9q2k8j0fwg.png" width="460" height="673"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Causes
&lt;/h2&gt;

&lt;p&gt;List of causes can be very big, but I defined the most popular from my point of view.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Requirements are still being defined during development&lt;/li&gt;
&lt;li&gt;Development starts before any design takes place&lt;/li&gt;
&lt;li&gt;Business pressure&lt;/li&gt;
&lt;li&gt;Lack of process or knowledge&lt;/li&gt;
&lt;li&gt;Last minute specification changes&lt;/li&gt;
&lt;li&gt;Poor technological leadership&lt;/li&gt;
&lt;li&gt;Lack of collaboration&lt;/li&gt;
&lt;li&gt;Outdated technologies&lt;/li&gt;
&lt;li&gt;Bad development practices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You noted that most of those causes related to a business or a client. And this is true - in most cases, technical debt is filled-up in collaboration with your manager. You should hear the next phrase.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Do it now because we &lt;em&gt;really&lt;/em&gt; need.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And then you come to some compromise via increasing of your technical debt.&lt;/p&gt;

&lt;p&gt;Disclaimer: At the end of the article you will find a link to the full list of root causes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technical debt and PoC
&lt;/h2&gt;

&lt;p&gt;If you work on a Proof of Concept, do not worry about technical debt. Because someone will replace PoC with the more stable solution. The issue that everyone on a project should be on a same page.&lt;/p&gt;

&lt;h2&gt;
  
  
  Popular solution
&lt;/h2&gt;

&lt;p&gt;In most cases, developers think it is enough to write &lt;code&gt;TODO&lt;/code&gt; item in their code. But imagine if you have 40 repositories for micro-services on a big enterprise. How will you collect all TODO-s? Scan the sources? Okay, but how will you track progress? If you do not see how much you have done - you do not feel happy.&lt;/p&gt;

&lt;p&gt;Here I would like to lead to my way of technical debt management.&lt;/p&gt;

&lt;h2&gt;
  
  
  More precise solution
&lt;/h2&gt;

&lt;p&gt;I propose to use the next structure as a table. You can extend the structure with additional columns, but please - do not shrink.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Number&lt;/li&gt;
&lt;li&gt;Issue&lt;/li&gt;
&lt;li&gt;Cause&lt;/li&gt;
&lt;li&gt;Solution&lt;/li&gt;
&lt;li&gt;How to prevent?&lt;/li&gt;
&lt;li&gt;Initiated&lt;/li&gt;
&lt;li&gt;Solved&lt;/li&gt;
&lt;li&gt;Status&lt;/li&gt;
&lt;li&gt;Assignee&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Seems big, but let me dive in and describe every point in details. Except for Number - an auto-incremental stuff.&lt;/p&gt;

&lt;h3&gt;
  
  
  Issue - Cause - Solution - Prevention
&lt;/h3&gt;

&lt;p&gt;The issue used for code-name, which will help you find and identify an item. But any issue has a root cause, and it is critical to define the cause.&lt;/p&gt;

&lt;p&gt;When you fill the Cause column answer next questions: Why/How/When an issue occurred? Questions will help you define a root cause and understand who made a mistake and why.&lt;/p&gt;

&lt;p&gt;When you know the root cause - you can fix an issue. And it is the best time to describe your solution. You can brainstorm with a team and write the solution, so everyone will be on the same page.&lt;/p&gt;

&lt;p&gt;And do not forget - in future you need to prevent that issue. If you have the same issue over 3 times - you have a problem in your development process and something is going wrong.&lt;/p&gt;

&lt;h3&gt;
  
  
  Initiated vs Solved
&lt;/h3&gt;

&lt;p&gt;Initiated means that you found or created an issue in some period. You can write the date, but I prefer to write the number of a Sprint or Iteration. In a such way, you can analyze a table and see a correlation between rush-sprint and increased technical debt.&lt;/p&gt;

&lt;p&gt;And also do not forget to write when you solved an issue. If you do things right - you can build such chart.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq6fuhtvxhnc4qt1tz412.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq6fuhtvxhnc4qt1tz412.png" alt="Resolution chart" width="304" height="310"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can use resolution chart to define when you made a lot of invalid descisions. Also, you can find out that you forgot to fix debt for a long time. Non-stacked area chart is best for that case. For vertical axis - use amount of total/resolved issues per sprint or date.&lt;/p&gt;

&lt;h3&gt;
  
  
  Status and Assignee
&lt;/h3&gt;

&lt;p&gt;You can use Jira or any other task tracking system or do not use it at all. But please - do not remove a completed item from the table. Otherwise - you will not be able to track a progress and amount of completed stuff. Also do not forget that you wrote how to prevent that issue in future.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example of an item
&lt;/h3&gt;

&lt;p&gt;Here I provide an example of an item in technical debt.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Column&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Number&lt;/td&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Issue&lt;/td&gt;
&lt;td&gt;Outdated README file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cause&lt;/td&gt;
&lt;td&gt;After creation of landing page, there were changes in a folder structure&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Solution&lt;/td&gt;
&lt;td&gt;Update the file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;How to prevent?&lt;/td&gt;
&lt;td&gt;Update the README file right with changes in structure in the same Pull Request&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Initiated&lt;/td&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Solved&lt;/td&gt;
&lt;td&gt;25&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Status&lt;/td&gt;
&lt;td&gt;DONE&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Assignee&lt;/td&gt;
&lt;td&gt;Aleksey Pastuhov&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Here I want to note that you can fix an issue in time, it is simple prioritization.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Remember that you should monitor your debt iteratively, and take tasks into your sprints to get things done.&lt;/p&gt;

&lt;p&gt;This is how I prefer to keep and manage technical debt. If you do right, you will have positive results:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A motivated team&lt;/li&gt;
&lt;li&gt;You will be able to control technical risks&lt;/li&gt;
&lt;li&gt;If there are no requirements or design - you have a lot of stuff to do&lt;/li&gt;
&lt;li&gt;And you will be able to debate to your manager or a client that you need a sprint for code stabilization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Share your feedback and let me know how you used to manage technical debt.&lt;br&gt;
Send me a &lt;a href="//mailto:aleksey.pastuhov@gmail.com"&gt;message&lt;/a&gt; or &lt;a href="https://twitter.com/PastuhovAleksey" rel="noopener noreferrer"&gt;tweet&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;P.S.: Do not forget about prioritization! Just add “Priority” column, if it's required in your case.&lt;/p&gt;

&lt;p&gt;Originally posted on my blog &lt;a href="http://apastuhov.com" rel="noopener noreferrer"&gt;apastuhov.com&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Useful links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://en.wikipedia.org/wiki/Technical_debt#Causes" rel="noopener noreferrer"&gt;Technical Debt Causes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://martinfowler.com/bliki/TechnicalDebt.html" rel="noopener noreferrer"&gt;Technical Debt by Martin Fowler&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://hackernoon.com/there-are-3-main-types-of-technical-debt-heres-how-to-manage-them-4a3328a4c50c" rel="noopener noreferrer"&gt;3 main types of technical debt&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>programming</category>
      <category>bestpractice</category>
      <category>techdebt</category>
      <category>management</category>
    </item>
    <item>
      <title>What makes it a good product</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Mon, 21 May 2018 21:13:40 +0000</pubDate>
      <link>https://forem.com/apastuhov/what-makes-product-good-278l</link>
      <guid>https://forem.com/apastuhov/what-makes-product-good-278l</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally posted on my &lt;a href="http://apastuhov.com/post/what-makes-product-good/" rel="noopener noreferrer"&gt;blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;A few weeks ago one colleague asked me a question - "What makes it a product good?". I am not a product manager but it seems to be an interesting question. As a developer, I know how applications are created and what problems they face.&lt;/p&gt;

&lt;p&gt;From my point of view, it is impossible to create an ideal product. At least I haven't seen one. But let's define criteria and understand how to improve products even if they are not good enough.&lt;/p&gt;

&lt;p&gt;Here is a short list:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Problem-solving&lt;/li&gt;
&lt;li&gt;Recognition&lt;/li&gt;
&lt;li&gt;No bugs&lt;/li&gt;
&lt;li&gt;Stablity (not the same as a previous one)&lt;/li&gt;
&lt;li&gt;Transparency&lt;/li&gt;
&lt;li&gt;Predictability&lt;/li&gt;
&lt;li&gt;Support provision&lt;/li&gt;
&lt;li&gt;Activity&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And much more. The more we think about it - more points we will identify. So let's stop to review everything step by step.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem-solving
&lt;/h2&gt;

&lt;p&gt;First, a product should solve a problem. It should make your life easier, better! If product creates a problem and later solves it - I would say it is just a business to earn more money.&lt;/p&gt;

&lt;p&gt;To be on the same page, let's take examples of every bullet point.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; dad wants to read and edit notes on every device he has (laptop, PC, phone, tablet). So he finds an application, but here is a limitation to the number of devices. Dad was asked to pay an extra $5 just to keep data offline on his personal storage.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; a photographer has a problem with a big amount of photos and he needs to keep them somewhere. Here he meets cloud storages, which is great for storing big files.&lt;/p&gt;

&lt;h2&gt;
  
  
  Recognition
&lt;/h2&gt;

&lt;p&gt;It does not matter how fancy User Interface or Artificial Intelligence under the hood you have. If no one knows about your application - nothing makes sense. I do not want to say you should ignore user's needs and not implement features, but do not forget to build a brand on the top of your product.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Ftombs.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Ftombs.jpg" alt="Ruins in Turkey"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; Look at the castle in the mountain without a road. There you can find tons of gold in that castle, but you have no clue how to get there. People do not know what they don't know.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; Google Keep for example - small and simple application has not so many features. But every Google user at least heard about it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good #2:&lt;/strong&gt; If you need (or want) to get a good Git client with simple and fancy UI - you will find GitKraken. You may find it in some comparisons, articles. But after a research with Google you may see targeting advertisement about GitKraken.&lt;/p&gt;

&lt;h2&gt;
  
  
  No bugs
&lt;/h2&gt;

&lt;p&gt;It can be mystical to someone, but I can say - it is possible to write a code without bugs. On the other hand, an application may have some logical bugs created by ideas or changes. You can find those bugs in time and in a specific use-case.&lt;/p&gt;

&lt;p&gt;Continue reading the article and you will find an example on how to live with bugs. I do not want to copy-paste. :)&lt;/p&gt;

&lt;h2&gt;
  
  
  Stablity
&lt;/h2&gt;

&lt;p&gt;Downtime, that is when you have a chance to disappoint your user. Even if we are talking about Google, GitHub, etc.. When your application fails - someone will joke in a manner "Did you see it?".&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; an app failed, not a single user has an idea why it happened and when it would work again, so they switch to another, more stable application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; an app failed, and the user got an email with notification of the issue. Also, he can access a link and preview the status and progress. Just have a look at Bitbucket status page: &lt;a href="https://status.bitbucket.org/" rel="noopener noreferrer"&gt;https://status.bitbucket.org/&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Transparency
&lt;/h2&gt;

&lt;p&gt;Every action should be clear to the user, he should understand all consequences. After pressing Save - display the notification about its results. Every icon should have a title with short (even 1 word is enough) description to display it on hover.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; User paid for something, found out that money was charged, but he got no notification on the email/phone/any messenger. As a result - user feels robbed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; After paying for a GitHub account - you get the notification on email, also you can review the history of all payments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Predictability
&lt;/h2&gt;

&lt;p&gt;When a user does something, he should be able to predict how it will work (save/delete/create).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; I finished the article in one application, let's call it "Writer". But when I opened the article in the afternoon - I found out that a half of the article wasn't saved. But I expected the application to save my file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad 2:&lt;/strong&gt; The same was with one of the biggest cloud data storages. In 2-3 days after uploading a file, I found it was corrupted by a service so I could not delete/change/download the file.&lt;/p&gt;

&lt;p&gt;There were examples of bad user flow or bugs I found. For good, I would say the app should do what users expect and do not fail on primary use-cases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; When you want to change your email - it is inside of an area which is marked as dangerous. Also, you see a message informing you "Changing email may corrupt integrations with 3rd-party systems". And to change email you need to verify that they both are valid.&lt;/p&gt;

&lt;h2&gt;
  
  
  Support provision
&lt;/h2&gt;

&lt;p&gt;Okay, let's return back to our bugs, how to live with them. A user should be able to get support and find an answer to his question. Even if it is a link to the documentation, forum or FAQ. Better than nothing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; I was trying to understand how to use one task management application, but there was no answer, help, introduction, link to any tutorial, nothing. As a result - I deleted the app.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; something went wrong. You see a pop-up which gives you an ability to contact developers, and you are sure that the issue will be fixed soon. Also, you get links to FAQ, useful status pages, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Activity
&lt;/h2&gt;

&lt;p&gt;Product evolving is amazing, but it's like balancing on a rope. On one side an application can be transformed into a piece of shit, due to requested changes from users. On the other side, we ignore users needs. As a result, everybody is disappointed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt; Say “yes” to all feature requests users make:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fyes-to-user.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fyes-to-user.jpeg" alt="Say yes!"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fyes-to-user-2.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fyes-to-user-2.jpeg" alt="And again"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt; think about user's requests, analyze them, give a feedback, add new features without breaking the core idea.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Here I described my thoughts on how to improve the application, what makes it a good product. How to make users hate you. There are a lot of metrics, approaches to make something better, do not forget about it!&lt;/p&gt;

&lt;p&gt;As soon as we are on the same page, let's define some "mark" to analyze your project. Sum the numbers and write in a comment.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;[3] Problem-solving - Does your product make a life of the user easier?&lt;/li&gt;
&lt;li&gt;[2] Recognition - How many people at least heard about your product?&lt;/li&gt;
&lt;li&gt;[2] No bugs - What is the percentage of Open/Closed bugs? &amp;lt; 15% is ok&lt;/li&gt;
&lt;li&gt;[2] Stable - When was the last crash in production?&lt;/li&gt;
&lt;li&gt;[3] Transparency - Does your product fit GDPR requirements?&lt;/li&gt;
&lt;li&gt;[2] Predictability - How many users' "bugs" you close as a "feature is not a bug"?&lt;/li&gt;
&lt;li&gt;[2] Support provision - Can you share FAQ/Forum/Bug Report System?&lt;/li&gt;
&lt;li&gt;[3] Activity - How often do you release to production?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Grade from 0 to 18:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;0-8 - App is not good enough, there is a lot of stuff to improve.&lt;/li&gt;
&lt;li&gt;8-14 - Product is good enough, maybe you have some clients.&lt;/li&gt;
&lt;li&gt;14-18 - Totally great! Just a few steps to shine like a star. :)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for reading! Share your thoughts.&lt;/p&gt;

</description>
      <category>product</category>
      <category>software</category>
      <category>discuss</category>
      <category>requirements</category>
    </item>
    <item>
      <title>Note-taking software - Investigation</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Tue, 28 Nov 2017 22:08:05 +0000</pubDate>
      <link>https://forem.com/apastuhov/note-taking-software---investigation-cp4</link>
      <guid>https://forem.com/apastuhov/note-taking-software---investigation-cp4</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally published on my blog: &lt;a href="http://apastuhov.com/post/find-best-note-app/"&gt;apastuhov.com&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;As any other person, who would read that article - I wanted to structure my minds. And the best way to do it - writing notes! Somebody prefers to use a simple notebook with paper and a pen, but I am a software developer and most of my time I spend near my notebook/PC/mobile-phone, also I am not so good in writing by hand. :)&lt;/p&gt;

&lt;p&gt;I use notes several years in a row, and I tried different applications to simplify the process. So I want to share my experience about note taking applications and offer some recommendations if you are looking for the best app for your needs. &lt;/p&gt;

&lt;p&gt;And I want to warn you that it is my subjective opinion, and all thoughts are based on my personal needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Criteria definition
&lt;/h2&gt;

&lt;p&gt;Here I want to describe criteria which I choose to define the best note-taking application.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Offline access&lt;/strong&gt; - I like to travel, and most of all I prefer to write a text in a train, there is no internet access and no way to connect to remote.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Offline access from mobile&lt;/strong&gt; - I separated that point from the previous one because some applications have offline access, but their mobile version is online-only.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross-platform&lt;/strong&gt; - There are 3 different platforms I use every day: Android, Linux, and Windows. And I need to have a good cross-platform app with stable data synchronization.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supports &lt;a href="https://en.wikipedia.org/wiki/Markdown"&gt;markdown&lt;/a&gt;&lt;/strong&gt; - It is the best markup language with plain text formatting syntax!&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supports tables and keep images&lt;/strong&gt; - Some markdown engines do not work with tables or images, actually, it is strange for me, because there is a specification what basic features markdown has.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supports basic folder structure (at least 1-level depth)&lt;/strong&gt; - In time I found that I need to group notes by folders(groups), and tags don't work here.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User-Friendly interface&lt;/strong&gt; - UI should be clear, understandable, without any overhead and useless buttons/functions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Nice to have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Encrypt the data&lt;/strong&gt; - Privacy is good, but I do not keep passwords or some valuable data in my notes, so it is not too critical for me.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;FOSS&lt;/strong&gt; - It would be great to contribute and improve the application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Math support (&lt;a href="https://en.wikipedia.org/wiki/LaTeX"&gt;LaTeX&lt;/a&gt; as example)&lt;/strong&gt; - Just because I need it sometimes. ;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.google.ru/keep/"&gt;Google Keep&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;There are a big amount of people who like it, but when I started to use it I found that interface is not so friendly and structured as I expected. It feels a bit chaotic for me. I disliked that panels where font size depends on the amount you wrote on the card.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5PvKjY3A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/googlekeep.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5PvKjY3A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/googlekeep.png" alt="Google Keep"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.dropbox.com/paper"&gt;Dropbox Paper&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;It is new enough and there was a time when it became too popular in one moment. I want to note that it has the GREAT editor, writing in &lt;a href="https://www.dropbox.com/paper"&gt;Dropbox Paper&lt;/a&gt; is something I really like, for me, this was the best writing app.&lt;/p&gt;

&lt;p&gt;Until I found that navigation between files really awful. It is unable to move to file B while you are editing file A.&lt;/p&gt;

&lt;p&gt;Also home page.. - it shows the advertisement for me to connect a Slack (but I do not have any Slack connection on my personal email). I dismissed it but in time - I get the ad back again. And home page shows only &lt;em&gt;Recent viewed files&lt;/em&gt;, but wait I have a structured data and I am not wondering about "the latest one". So to open a file in some directory I need to make 3 or 4 clicks and wait for page reloading for several times.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3h-7AocQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/dropboxpaper.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3h-7AocQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/dropboxpaper.png" alt="Dropbox Paper"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But still - the editor is good.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.onenote.com/"&gt;One Note&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Microsoft has a good alternative to most note-taking apps. It has a big amount of hotkeys. And I used it for a long time, but it is good only on windows and mobile platforms. As most of the developers - I have Linux system on my work, and Web version of OneNote is too sloooow. So I cannot say that it is really cross-platform. But if you use only Windows as your main platform - &lt;a href="https://www.onenote.com/"&gt;One Note&lt;/a&gt; is a good app to use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--J7a51CZ9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/onenote.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J7a51CZ9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/onenote.png" alt="One Note"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;P.S.: I like that OneNote UI is organized as a simple notebook with colored bookmarks.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://evernote.com/"&gt;Evernote&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Too complex, and too many features that I do not need also it needs money to support more than 2 devices. If payment is not a problem.. I still do not need next features in the Note-taking app:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reminders&lt;/li&gt;
&lt;li&gt;Different fonts families, sizes, colors in one note&lt;/li&gt;
&lt;li&gt;Sharing on LinkedIn/Twitter/Facebook/Email etc.. (really who shares notes on facebook or twitter?))&lt;/li&gt;
&lt;li&gt;Work chat... okay, but I need personal notes&lt;/li&gt;
&lt;li&gt;Note from calendar&lt;/li&gt;
&lt;li&gt;Note presentation&lt;/li&gt;
&lt;li&gt;Search in PDF? nope.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2bddcGng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/evernote.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2bddcGng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/evernote.png" alt="Evernote"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://simplenote.com/"&gt;SimpleNote&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;For a long time, I was a big fan of SimpleNote. It is a good application for taking notes, which supports markdown and great offline access. But time changes and I got new requirements to group some notes, keep images and tables. And here I found that &lt;a href="https://simplenote.com/"&gt;SimpleNote&lt;/a&gt; has next issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No folder structure&lt;/li&gt;
&lt;li&gt;No internal image or tables in the markdown files&lt;/li&gt;
&lt;li&gt;Web and Desktop views has not user-friendly Markdown / Preview switcher&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OaTQxmIQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/simplenote.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OaTQxmIQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/simplenote.jpg" alt="SimpleNote"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://turtlapp.com/"&gt;Turtl&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Nice and minimal application, but I do not know.. UI and UX a bit awkward for me, also I do not like panels. And I did not find application user-friendly when you have 20 notes in one group. It has same problems as Google Keep.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--69-FfyM5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/turtl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--69-FfyM5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/turtl.png" alt="Turtl"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://standardnotes.org/"&gt;Standard Notes&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Oh.. there was a moment when the app made a wow-effect. First of all - it is built by one &lt;a href="https://github.com/mobitar"&gt;person&lt;/a&gt;. That man is an example to follow. Second - it has good UX + UI and it is open-sourced. But it requires a big amount of money for such primitive feature as markdown. And I am not sure that it will work as I expect.&lt;/p&gt;

&lt;p&gt;And from my side - my drafts has several tags and group notes by tags are not something I need.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_-0_Gfj0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/standard-notes.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_-0_Gfj0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/standard-notes.png" alt="Standard Notes"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://laverna.cc/"&gt;Laverna&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I give several chances to that app.. but every time I tried it - I had some problems with connection, login via Dropbox and so on, so web version is good, but desktop did not work for me.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--92CIBqAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/laverna.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--92CIBqAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/laverna.png" alt="Laverna"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  No single app
&lt;/h2&gt;

&lt;p&gt;When I reviewed a big amount of popular note-taking applications - I found that all of them have some issues. And I started to look at some applications which allows you to keep your notes on your personal storage(Dropbox, GDrive, custom server), and mobile devices will just connect to that storage, download, update the data and upload it back. At least on a desktop, you can use any editor you want.&lt;/p&gt;

&lt;p&gt;I tried a big amount of them, I even paid money for some mobile applications, but they failed, all of those:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--H5f3n1lC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nmfch7zk68gjalxmbh72.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--H5f3n1lC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nmfch7zk68gjalxmbh72.jpeg" alt="Mobile note-taking applications"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and more ...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8JZmU4EO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nssjzwzxuyae6lbykp3r.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8JZmU4EO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nssjzwzxuyae6lbykp3r.jpeg" alt="Mobile note-taking applications 2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And even more, but I do not want to spam with screenshots. :)&lt;/p&gt;

&lt;p&gt;Some of them are useless, some are buggy, offline only, etc. So this is a fail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Personal application
&lt;/h2&gt;

&lt;p&gt;There was a moment when I decided to create my personal app to take notes, but in time and I started to work on several projects at the same time, so that project is frozen. But it did the basic part I need.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JG5C_h5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/personalapp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JG5C_h5A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/personalapp.png" alt="Personal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://boostnote.io/"&gt;Boostnote&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;And the last, but not least, application. I found it a few weeks ago and.. it totally fits my vision of the best note-taking application!!! It does not track any private data. You can choose any data storage you want. It has pretty design, and the repository is alive, every new version is better than previous one. Also, you can fork it or contribute to OpenSource. But also it has some issues. Mobile app(at least Android version) is useless, but as soon as it is open-source - anyone can contribute or create his own vision of mobile app to make it better.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--f_SeBQny--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/boostnote.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--f_SeBQny--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://apastuhov.com/images/noteapp/boostnote.png" alt="Boostnote"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Comparison Table
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Empty - Does not support/work out of the box&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;+&lt;/code&gt; - Supports/work&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;?&lt;/code&gt; - Not sure&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Google Keep&lt;/th&gt;
&lt;th&gt;Dropbox Paper&lt;/th&gt;
&lt;th&gt;One Note&lt;/th&gt;
&lt;th&gt;Evernote&lt;/th&gt;
&lt;th&gt;Simple Note&lt;/th&gt;
&lt;th&gt;Turtl&lt;/th&gt;
&lt;th&gt;Standard Notes&lt;/th&gt;
&lt;th&gt;Laverna&lt;/th&gt;
&lt;th&gt;Boostnote&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Offline desktop access&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Offline mobile access&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cross-platofrm&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Markdown&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tables&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Attach Images&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Folder Structure&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;UI&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Security&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;FOSS&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Math&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Stable&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;+&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Make a choice based on your personal requirements!&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;I found that most note-taking applications in time decided to change their vision from "make for people" to "make for teams and companies". And it makes me sad. Everything is moving from B2C to B2B and it may be good for business, but not always good for end users.&lt;/p&gt;

&lt;p&gt;If you do not agree with my vision, but still looking for the best app for your needs, here is a list of links with good descriptions, criteria, and votes which helped me to write that article.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.slant.co/topics/697/%7Ebest-cross-platform-note-taking-app"&gt;https://www.slant.co/topics/697/~best-cross-platform-note-taking-app&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://alternativeto.net/software/evernote/"&gt;https://alternativeto.net/software/evernote/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.slant.co/topics/6303/%7Enote-taking-apps-for-linux"&gt;https://www.slant.co/topics/6303/~note-taking-apps-for-linux&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And do not forget to tell in comments: What note-taking app are you using?&lt;/p&gt;

&lt;h2&gt;
  
  
  Update:
&lt;/h2&gt;

&lt;p&gt;Here is a list of other apps which are not listed in that article, but they may be interesting for you.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://ia.net/writer/"&gt;iaWriter&lt;/a&gt; - Mobile application is really good, but PC version is available only for Mac. Anyway it has stable synchonization with Dropbox or GDrive and offline mobile mode, so it can be used with any text editor on your desktop.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://typora.io/"&gt;Typora&lt;/a&gt; - Good enough and feature reach, but has no mobile app.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.wiz.cn/"&gt;WizNote&lt;/a&gt; - application from Chinna&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://play.google.com/store/apps/details?id=com.underwood.monospace&amp;amp;hl=ru"&gt;Monospace&lt;/a&gt; - Good mobile editor, but GDrive sync (Pro feature) did not worked for me.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Currently, I am using &lt;strong&gt;Boostnote&lt;/strong&gt;, it is not the best, but at least it is better than most of the apps. But also a good point to think about - is to use &lt;strong&gt;iaWriter&lt;/strong&gt; with simple desktop Dropbox sync and custom text editor.&lt;/p&gt;

&lt;p&gt;And do not forget to tell in comments: What note-taking app are you using?&lt;/p&gt;

&lt;h2&gt;
  
  
  Update 2:
&lt;/h2&gt;

&lt;p&gt;For Apple(iOS and Mac) users here is another list:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="http://www.bear-writer.com/"&gt;Bear&lt;/a&gt; - Several guys recomended it, so it should be on top of that list :)&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://happenapps.com/#quiver"&gt;Quiver&lt;/a&gt; - Seems to be a briliant app for programmers&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://support.apple.com/en-us/HT205773"&gt;Apple Notes&lt;/a&gt; - Default Apple notes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Non typical way to organize and keep your notes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://workflowy.com/"&gt;Workflowy&lt;/a&gt; - Non standard way to organize your notes! Notebook for lists :)&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://dynalist.io/"&gt;Dynalist&lt;/a&gt; - Looks similar to previous one&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="http://zim-wiki.org/"&gt;Zim Wiki&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://tiddlywiki.com/"&gt;Tiddly Wiki&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://scrapbox.io/"&gt;Scrapbox&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Another finding is next application:&lt;/p&gt;

&lt;p&gt;&lt;a href="http://joplin.cozic.net/"&gt;Joplin&lt;/a&gt; - Has &lt;strong&gt;terminal client&lt;/strong&gt; - but I did not test it!&lt;/p&gt;

&lt;p&gt;Also, most from &lt;a href="https://dev.to/apastuhov/note-taking-software---investigation-cp4"&gt;DevTo&lt;/a&gt; community using GIT to keep and sync up personal notes. Here is a short description how to do it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use GitHub/GitLab/BitBucket/etc to keep the repository with notes&lt;/li&gt;
&lt;li&gt;Use any desktop text editor: Vim, Emacs, VSCode, SublimeText, Notepad, etc and GIT&lt;/li&gt;
&lt;li&gt;Use some mobile application to clone the repository, edit and then sync the data.
For Android I tried &lt;a href="https://play.google.com/store/apps/details?id=com.aor.pocketgit"&gt;Pocket Git&lt;/a&gt; and &lt;a href="https://play.google.com/store/apps/details?id=com.manichord.mgit"&gt;MGit&lt;/a&gt; and they worked as I expected.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That approach is interesting enough and can be a good choice for developers!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Originally published on my blog: &lt;a href="http://apastuhov.com/2017/11/28/find-best-note-app/"&gt;apastuhov.com&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Subscribe to read more articles!&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>software</category>
      <category>review</category>
    </item>
    <item>
      <title>Evolution of Interaction</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Thu, 09 Nov 2017 19:36:08 +0000</pubDate>
      <link>https://forem.com/apastuhov/evolution-of-interaction-4oa</link>
      <guid>https://forem.com/apastuhov/evolution-of-interaction-4oa</guid>
      <description>&lt;p&gt;Originaly published on my blog &lt;a href="http://apastuhov.com/" rel="noopener noreferrer"&gt;apastuhov.com&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;If you write frontend application - I assume that it interacts with backend API server. If your app is small - you do not think about architecture and scaling. But if it is a big LTS application - you need to think about it! Why? Because You will develop and support that application in future, so just pray that you wont hate yourself in time. I want to tell you how people often develop an interaction between UI and API.&lt;/p&gt;

&lt;p&gt;To be on the same page, lets define that &lt;strong&gt;Interaction&lt;/strong&gt; - is an object/class/method/function that allows you to send requests to a backend server.&lt;/p&gt;

&lt;h2&gt;
  
  
  No silver bullet or Types of architecture
&lt;/h2&gt;

&lt;p&gt;You can try to search some solution! And you may find some guidelines or libraries, also it may be a part of a framework you use, like &lt;a href="https://docs.angularjs.org/api/ngResource/service/$resource" rel="noopener noreferrer"&gt;angular.$resource&lt;/a&gt;. In general, there will be 4 types of &lt;em&gt;Interaction&lt;/em&gt; architecture.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On-flight&lt;/li&gt;
&lt;li&gt;Factory&lt;/li&gt;
&lt;li&gt;Singleton&lt;/li&gt;
&lt;li&gt;"Micro" services&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So you will find that there is no silver bullet, which will be the best or the most popular.&lt;/p&gt;

&lt;p&gt;I do not want to describe the implementation of every approach because it is your job. :) I want to show how you will use it, pros and cons.&lt;/p&gt;

&lt;h2&gt;
  
  
  On-flight or jQuery style
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fbuzzwoody.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fbuzzwoody.jpg" title="JQuery.. JQuery everywhere" alt="JQuery.. JQuery everywhere"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I suppose you remember how popular jQuery was, maybe it is still the best tool for somebody. jQuery provided us a big amount of good things, one of them - is a short notation of the AJAX. No XmlHttpRequest more, just simple &lt;code&gt;$.ajax&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;So the first style - is to write an AJAX query immediately when you need it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;jQuery&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ajax&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://super-app.com/api/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;success&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;blah blah blah&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I do not want even to discuss why that way is bad. If you will try to write SPA in a such way - you may find that all your requests are scattered by your application. And if you will make a small error - you will find it, only when user will do the action to run that query.&lt;/p&gt;

&lt;p&gt;And as always - one day someone would say "We need some time for refactoring".&lt;/p&gt;

&lt;h2&gt;
  
  
  Factory
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Ffactory.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Ffactory.gif" title="Factory" alt="Factory"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we have a configuration of all our requests, and you create them dynamically when you need. For example &lt;code&gt;resource&lt;/code&gt; in angular 1.x, someone may say that example is not good, but I want to note that implementation may vary. The idea of the factory - generate objects (requests in our case) dynamically depending on some configuration.&lt;/p&gt;

&lt;p&gt;Lets imagine two most popular interfaces with configuration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;host&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://super-app.com/api/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usage #1:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;request&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;GET&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;clientData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;error handler&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usage #2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;request&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;clientData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;error handler&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Singleton
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fsuperhero.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fsuperhero.jpg" title="S - Singleton" alt="S - Singleton"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Singleton - is the most popular pattern in software development. So we have a single class to keep all requests and configurations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getProjectList&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getProjectById&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="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;updateClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;deleteUser&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;// ... and so on&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The approach is not so bad, but &lt;code&gt;api.js&lt;/code&gt; will grow in time. So it becomes really hard to change and to add new queries. Gritting one's teeth you will add new methods to the file, and one day you will decide that you need to split it.&lt;/p&gt;

&lt;p&gt;I assume that your architecture will be next:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-/ api
 |- client.js
 |- project.js
 |- user.js
  \ api.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And usage will be changed to the next one:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;project&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getList&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;project&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getById&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="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&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;// ... and so on&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It looks nice and understandable, but there is one small problem - separation of contests. So working with project API - you have an access to client API and you can remove it, instead of a project. That is why you need to isolate classes.&lt;/p&gt;

&lt;h2&gt;
  
  
  "Micro" services
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fsuperheroes.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fapastuhov.com%2Fimages%2Fsuperheroes.jpg" title="M - Many singletons" alt="M - Many singletons"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;No, wait! I do not want to talk about some big changes to split everything. I just want to note that every such file as &lt;code&gt;./app/api/client.js&lt;/code&gt; is a service. And we do not need that singleton to keep the composition of all that services.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;projectApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getList&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;projectApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getById&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="nx"&gt;clientApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;userApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&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;// ... and so on&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It seems that last solution is ideal. But the more services you have - the more imports and dependencies you need. Some can say that you need to separate by logic and make some groups of services. But it is a long way to discuss.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Every solution has pros and cons, and only you can define what is relevant for you.&lt;/p&gt;

&lt;p&gt;I told you how to develop an interaction between UI and API. And I hope you defined what approach is the best for you! Write your comment and let me know!&lt;/p&gt;

&lt;p&gt;P.S.:&lt;/p&gt;

&lt;p&gt;I want to mention that the more you write - the more you repeat yourself and others. Who knows, maybe we will return to simple jQuery style one day. :)&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>frontend</category>
      <category>api</category>
      <category>patterns</category>
    </item>
    <item>
      <title>Dead code problem</title>
      <dc:creator>Aleksey Pastuhov</dc:creator>
      <pubDate>Sat, 04 Nov 2017 00:42:03 +0000</pubDate>
      <link>https://forem.com/apastuhov/dead-code-problem-3o2</link>
      <guid>https://forem.com/apastuhov/dead-code-problem-3o2</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally published at apastuhov.com on November 3, 2017&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;You work with the big code base and your project has hundreds or even thousands of files? I assume that you have dead code in your project. I want to tell you about the problem of dead code and how we can deal with it. But first, let's define what code can be called &lt;em&gt;dead&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dead code definition
&lt;/h2&gt;

&lt;p&gt;Dead code is any code which will never be executed. It may be some condition, loop or any file which was simply created but wasn't used in your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is it a problem?
&lt;/h2&gt;

&lt;p&gt;It is a problem because that code has no sense! You can drop it and everything will work as well. I want to mention base problems of dead code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A newcomer will read it, and he/she would try to understand that code, or even use it.&lt;/li&gt;
&lt;li&gt;It takes some space in your repository and working directory.&lt;/li&gt;
&lt;li&gt;It would be interpolated by your IDE, so it will &lt;em&gt;eat&lt;/em&gt; more memory than it needs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And here is what will happen with your project if you have dead code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BB-ThiVl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qfv581lxm0l6j9vfzy8x.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BB-ThiVl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qfv581lxm0l6j9vfzy8x.gif" alt="Everything will die" title="Zombie code.."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is it a problem of JavaScript?
&lt;/h2&gt;

&lt;p&gt;JavaScript is a very active programming language. There are billions of applications and plugins developers create every day. For example, NPM (package manager for Node JS applications) has more than 450 000 packages, see &lt;a href="http://www.modulecounts.com/"&gt;modulecounts&lt;/a&gt;! It is more than 1 TeraByte of code! I assume that one package has 2MB size. And I am sure that more than 25% of it - is a dead code... which is used by nobody.&lt;/p&gt;

&lt;p&gt;You do not work with NodeJS? Are you front end developer? Good! I assume that your client changes his mind. :) And you will develop all the features he wants. But you will do it in a hurry, so you will not have any time to fix old code, or even drop it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3qTAWJSg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a19bclt7i7crut6gqqxr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3qTAWJSg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a19bclt7i7crut6gqqxr.gif" alt="We always have some changes for you" title="We always have some changes for you"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Any existing solutions
&lt;/h2&gt;

&lt;p&gt;If you Google it, you would find that everybody uses Google Closure, or WebPack. But I insist that it is not a real solution to the problem. That tools will just remove dead code for public scripts. But they do not tell you what code you should remove.&lt;/p&gt;

&lt;h2&gt;
  
  
  Solutions in other programming languages
&lt;/h2&gt;

&lt;p&gt;Let's look at some other popular languages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python - &lt;a href="https://pypi.python.org/pypi/vulture"&gt;vulture&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;C, C++, C#, TCL - &lt;a href="https://www.froglogic.com/coco/"&gt;coco&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Java - &lt;a href="https://www.guardsquare.com/en/proguard"&gt;proguard&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No comments.. JavaScript is an outsider.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is an ideal solution
&lt;/h2&gt;

&lt;p&gt;Heh.. we saw that there are some analogs for other languages. So let's imagine some ideal solution for JavaScript. It must detect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Unreachable code&lt;/li&gt;
&lt;li&gt;Oxbow code&lt;/li&gt;
&lt;li&gt;Dead store&lt;/li&gt;
&lt;li&gt;Dead files&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Unreachable code
&lt;/h3&gt;

&lt;p&gt;Permanent return statement.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&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;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Dead Code&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Needless conditions.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Dead Code&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Needless loops.&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;br&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
         &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Dead Code&lt;/span&gt;&lt;br&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  Oxbow code&lt;br&gt;
&lt;/h3&gt;
&lt;br&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;&lt;br&gt;
    &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;private_calculation&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="o"&gt;&lt;em&gt;&lt;/em&gt;&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;br&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;&lt;br&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;calc&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
        &lt;span class="c1"&gt;// Previously private_calculation was called here...&lt;/span&gt;&lt;br&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="o"&gt;&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;br&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;&lt;br&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  Dead store&lt;br&gt;
&lt;/h3&gt;
&lt;br&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;br&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;300&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;br&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;br&gt;
        &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Dead store&lt;/span&gt;&lt;br&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;br&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  Dead files&lt;br&gt;
&lt;/h3&gt;

&lt;p&gt;Just imagine that you have some file with code, but that file isn't used at all in your project: no import, no &lt;code&gt;&amp;lt;script src="..."&amp;gt;&lt;/code&gt; link to that file.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Here I told you about JavaScript problem of dead code and how we can deal with it. For now, there is no solution which will tell us what code can be safely removed.&lt;/p&gt;

&lt;p&gt;Write here your opinion - What features must have a tool for dead code? And I will update current post!&lt;/p&gt;

&lt;h2&gt;
  
  
  Update (Sep 2017)
&lt;/h2&gt;

&lt;p&gt;Starting from version 59 of Chrome you can test your code usage coverage with dev-tools.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage"&gt;https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is really good tool to define old/outdated/dead code, but it has one big issue:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It tells you how much code was used, versus how much was loaded.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To define unused code - you need to go through all features on your website via clicking on all the buttons on your UI.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>refactoring</category>
      <category>optimization</category>
      <category>coverage</category>
    </item>
  </channel>
</rss>
