<?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: ShinaBR2</title>
    <description>The latest articles on Forem by ShinaBR2 (@shinabr2).</description>
    <link>https://forem.com/shinabr2</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%2F271725%2F970c7ce0-20a3-46c2-b04f-c33238e3d4c7.jpeg</url>
      <title>Forem: ShinaBR2</title>
      <link>https://forem.com/shinabr2</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/shinabr2"/>
    <language>en</language>
    <item>
      <title>SSO with Firebase Authentication</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sun, 01 Dec 2024 01:15:14 +0000</pubDate>
      <link>https://forem.com/shinabr2/sso-with-firebase-authentication-2eon</link>
      <guid>https://forem.com/shinabr2/sso-with-firebase-authentication-2eon</guid>
      <description>&lt;p&gt;See full article: &lt;a href="https://docs.shinabr2.com/blog/sso-with-firebase-authentication" rel="noopener noreferrer"&gt;https://docs.shinabr2.com/blog/sso-with-firebase-authentication&lt;/a&gt;&lt;/p&gt;




</description>
      <category>sso</category>
      <category>firebase</category>
      <category>authentication</category>
    </item>
    <item>
      <title>Firestore data modeling</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sat, 07 Jan 2023 04:58:36 +0000</pubDate>
      <link>https://forem.com/shinabr2/firestore-data-modeling-2l44</link>
      <guid>https://forem.com/shinabr2/firestore-data-modeling-2l44</guid>
      <description>&lt;p&gt;6 minutes read my original post here: &lt;a href="https://sworld-docs.netlify.app/blog/firestore-data-modeling/"&gt;https://sworld-docs.netlify.app/blog/firestore-data-modeling/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>firestore</category>
      <category>database</category>
      <category>firebase</category>
      <category>mindset</category>
    </item>
    <item>
      <title>Firebase NoSQL database</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sat, 03 Dec 2022 14:23:26 +0000</pubDate>
      <link>https://forem.com/shinabr2/firebase-nosql-database-16d9</link>
      <guid>https://forem.com/shinabr2/firebase-nosql-database-16d9</guid>
      <description>&lt;p&gt;It was busy recently to me, I am lazy to copy again, please view the original article here: &lt;a href="https://sworld-docs.netlify.app/blog/firebase-nosql-database"&gt;https://sworld-docs.netlify.app/blog/firebase-nosql-database&lt;/a&gt;&lt;/p&gt;

</description>
      <category>firebase</category>
      <category>nosql</category>
      <category>database</category>
    </item>
    <item>
      <title>Headless UI audio player reactJS</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sun, 20 Nov 2022 05:10:27 +0000</pubDate>
      <link>https://forem.com/shinabr2/headless-ui-audio-player-reactjs-51ki</link>
      <guid>https://forem.com/shinabr2/headless-ui-audio-player-reactjs-51ki</guid>
      <description>&lt;p&gt;Many reacjt developers want to develop and publish npm packages for reusable, and so do I. Since the first few days working with reactjs, I feel it does not make sense to build a react UI library but depends on the UI framework.&lt;/p&gt;

&lt;p&gt;The final npm package: &lt;a href="https://www.npmjs.com/package/@shinabr2/life-core"&gt;https://www.npmjs.com/package/@shinabr2/life-core&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Few concerns:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Why do I need to import material UI or the antd design just for using a library? If I am going to use another UI library like semantic, why does it break?&lt;/li&gt;
&lt;li&gt;What if I want to control the rendered HTML output?&lt;/li&gt;
&lt;li&gt;The library itself should be isolated by default and should just work as long as I import it into my code base.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With the release of react hooks, this problem now becomes easier to resolve. And here is my first headless UI react audio player component, it was a part of my personal project.&lt;/p&gt;

&lt;p&gt;The implementation is quite simple since it took me around 2 hours to complete, but the typescript part took me 2 days and unresolved yet. I will get back to typescript sucks issue later.&lt;/p&gt;

&lt;p&gt;For quick view the demo with awesome songs from Attack on Titan: &lt;a href="https://stackblitz.com/edit/react-1ym6yv?file=src/App.js"&gt;https://stackblitz.com/edit/react-1ym6yv?file=src/App.js&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic
&lt;/h2&gt;

&lt;p&gt;The only required props is source of audio list. The only requirement for using is adding &lt;code&gt;{...getAudioProps()}&lt;/code&gt; as props to your &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const audioList = [
  {
    src: "https://res.cloudinary.com/shinabr2/video/upload/v1667828415/Public/Music/Japanese/Attack-on-Titan-Opening-1-Feuerroter-Pfeil-und-Bogen-Full-128-Linked-Horizon_1.mp3",
    name: "Guren No Yumiya",
    artistName: "Linked Horizon",
    image:
      "https://res.cloudinary.com/shinabr2/image/upload/v1667828561/Public/Images/artworks-000141088556-xy2nav-t500x500.jpg",
  },
  {
    src: "https://res.cloudinary.com/shinabr2/video/upload/v1667831555/Public/Music/Japanese/Shinzou_wo_Sasageyo__-_Linked_Horizon.mp3",
    name: "Shinzo wo Sasageyo",
    artistName: "Linked Horizon",
    image:
      "https://res.cloudinary.com/shinabr2/image/upload/v1667828561/Public/Images/artworks-000141088556-xy2nav-t500x500.jpg",
  },
];

const App = () =&amp;gt; {
    const { getAudioProps } = useSAudioPlayer({ audioList });

    return (
        &amp;lt;div&amp;gt;
            &amp;lt;audio {...getAudioProps()} /&amp;gt;
        &amp;lt;/div&amp;gt;
    )
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  With your custom controls
&lt;/h2&gt;

&lt;p&gt;Just use the &lt;code&gt;playerState&lt;/code&gt; to determine the audio playing status, and the &lt;code&gt;getControlsProps&lt;/code&gt; exposes all methods for your custom control like play, pause, prev, next, shuffle, change loop mode.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const audioList = [
  {
    src: "https://res.cloudinary.com/shinabr2/video/upload/v1667828415/Public/Music/Japanese/Attack-on-Titan-Opening-1-Feuerroter-Pfeil-und-Bogen-Full-128-Linked-Horizon_1.mp3",
    name: "Guren No Yumiya",
    artistName: "Linked Horizon",
    image:
      "https://res.cloudinary.com/shinabr2/image/upload/v1667828561/Public/Images/artworks-000141088556-xy2nav-t500x500.jpg",
  },
  {
    src: "https://res.cloudinary.com/shinabr2/video/upload/v1667831555/Public/Music/Japanese/Shinzou_wo_Sasageyo__-_Linked_Horizon.mp3",
    name: "Shinzo wo Sasageyo",
    artistName: "Linked Horizon",
    image:
      "https://res.cloudinary.com/shinabr2/image/upload/v1667828561/Public/Images/artworks-000141088556-xy2nav-t500x500.jpg",
  },
];

const App = () =&amp;gt; {
    const {
    getAudioProps,
    getControlsProps,
    playerState
  } = useSAudioPlayer({ audioList });
  const { isPlay, isShuffled, loopMode, audioItem } = playerState;
  const {
    onPlay,
    onPrev,
    onNext,
    onShuffle,
    onChangeLoopMode
  } = getControlsProps();

    return (
        &amp;lt;div&amp;gt;
      &amp;lt;button onClick={onChangeLoopMode}&amp;gt;Loop&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={onPrev}&amp;gt;Prev&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={onPlay}&amp;gt;{isPlay ? 'Pause' : 'Play'}&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={onNext}&amp;gt;Next&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={onShuffle}&amp;gt;Shuffle&amp;lt;/button&amp;gt;
            &amp;lt;audio {...getAudioProps()} controls /&amp;gt;
        &amp;lt;/div&amp;gt;
    )
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;The types for all inputs are quite simple as below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;interface SAudioPlayerAudioItem {
  src: string;
  name: string;
  artistName: string;
  image: string;
}

enum SAudioPlayerLoopMode {
  None = "none",
  All = "all",
  One = "one",
}

interface SAudioPlayerConfigs {
  shuffle?: boolean;
  loopMode?: SAudioPlayerLoopMode;
}

interface SAudioPlayerInputs {
  audioList: SAudioPlayerAudioItem[];
  index?: number;
  configs?: SAudioPlayerConfigs;
}

// Using
useSAudioPlayer(inputs: SAudioPlayerInputs)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>react</category>
      <category>headless</category>
      <category>audio</category>
    </item>
    <item>
      <title>Are you ready for the future working style?</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sat, 01 May 2021 03:09:40 +0000</pubDate>
      <link>https://forem.com/shinabr2/are-you-ready-for-the-future-working-style-3hij</link>
      <guid>https://forem.com/shinabr2/are-you-ready-for-the-future-working-style-3hij</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WeR-MFlR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek7fxsuu5xksmiuteoca.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WeR-MFlR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek7fxsuu5xksmiuteoca.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is easy to find a job where they need a senior developer. But I don't know why not many jobs need a professional developer in the description.&lt;/p&gt;

&lt;p&gt;To be honest, I don't really know which is "senior developer", but for me, "senior developer" does not matter at all. "Professional developer" is the most important person you will need in life.&lt;/p&gt;

&lt;p&gt;Don't believe it? I'll show you now my points.&lt;/p&gt;

&lt;h2&gt;
  
  
  Respect
&lt;/h2&gt;

&lt;p&gt;This is the first thing I want to talk about, and the most important thing. Let's talk about how we work together nowadays.&lt;/p&gt;

&lt;p&gt;For whole team communication, we usually have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A task management tool like Jira.&lt;/li&gt;
&lt;li&gt;An official chat tool like Slack.&lt;/li&gt;
&lt;li&gt;Code versioning for developers like Git flow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you think they are enough, NOPE. We still miss one thing: a calendar.&lt;/p&gt;

&lt;p&gt;The professional working style here where how a developer respects these above things.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Do you &lt;strong&gt;ALWAYS&lt;/strong&gt; be on time for meetings?&lt;/li&gt;
&lt;li&gt;Do you update JIRA tickets in &lt;strong&gt;real-time&lt;/strong&gt;?&lt;/li&gt;
&lt;li&gt;Do you &lt;strong&gt;consistently&lt;/strong&gt; quick reply to slack messages?&lt;/li&gt;
&lt;li&gt;Do you &lt;strong&gt;truly follow git-flow&lt;/strong&gt;?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These behaviors are small but extremely valuable especially in the remote working style, or in teams where almost all members are in different time zones. For developers, people who not follow git-flow is terribly bad to me and they should be fired as soon as possible.&lt;/p&gt;

&lt;p&gt;Without following the rules, a genius is just nothing.&lt;/p&gt;

&lt;p&gt;So for this one, seniority seems does not matter, right?&lt;/p&gt;

&lt;h2&gt;
  
  
  Yourself or your team?
&lt;/h2&gt;

&lt;p&gt;I want to talk about one behavior: direct messages in Slack instead of chatting in common channels.&lt;/p&gt;

&lt;p&gt;There are some points that make this behavior unprofessional or even bad to me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Everybody else can not have the information they talked about. Whenever we have related problems, nobody knows. Unfortunately, almost all communication issues come from here where we mismatch each other.&lt;/li&gt;
&lt;li&gt;You can not distinguish what is your problem, and what is your whole team's problem. That means you do not understand your team enough.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Proactive
&lt;/h2&gt;

&lt;p&gt;No need to talk every time, just need the right time, and always there. That's the definition of a proactive member.&lt;/p&gt;

&lt;p&gt;Stop waiting for somebody else to make the job done. This is the kind of person you will never want to work together in your life. The seniority does not matter here again because they are good enough to resolve problems, but they chose to wait. This is really annoying and I believe, nobody willing to take this.&lt;/p&gt;

&lt;p&gt;Another behavior of inactive developers is making assumptions without asking anything. They thought they can do everything, they keep silent, keep working but nobody knows what are they doing. Working with this style of people is kind of waiting for a bomber since we don't really sure what and when everything is broken. Sorry but this behavior has more impact than you thought.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;The remote working style is our future. Communication nowadays is not only what you talk via the mouth, but also what you did with your team's tools.&lt;/p&gt;

&lt;p&gt;Again, a senior developer does not matter when compared to a professional one. You can change from now with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Respect your team calendar and strictly follow its rule.&lt;/li&gt;
&lt;li&gt;Active update your working progress in JIRA (and Slack if needed).&lt;/li&gt;
&lt;li&gt;Stop private messaging in Slack.&lt;/li&gt;
&lt;li&gt;Stop waiting for somebody else to make your job done.&lt;/li&gt;
&lt;li&gt;Stop assumption without asking&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cheers,&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>What should web developers avoid implementing</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Tue, 27 Oct 2020 07:19:21 +0000</pubDate>
      <link>https://forem.com/shinabr2/what-should-web-developers-avoid-implementing-551h</link>
      <guid>https://forem.com/shinabr2/what-should-web-developers-avoid-implementing-551h</guid>
      <description>&lt;p&gt;Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.&lt;/p&gt;




&lt;p&gt;Web development is complex with tons of things to do. Besides that, there are still something that we &lt;strong&gt;should not do it by our hand&lt;/strong&gt;, nearly similar to reinvent the wheel.&lt;/p&gt;

&lt;p&gt;Let's see my list for 2020 afterwards. This article is suitable for mid or above junior developers. Fresher or below junior developer should manually do because you will learn many things from that.&lt;/p&gt;

&lt;p&gt;I have divided all issues into 3 different groups:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The first group contain all works that involve from both side backend and frontend, or even has impact to architecture.&lt;/li&gt;
&lt;li&gt;The second group has smaller tasks where you can take much time to implement by yourself, but can do.&lt;/li&gt;
&lt;li&gt;The last group is reinvent the wheel jobs.&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  The first group: try to avoid these tasks
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Authentication
&lt;/h2&gt;

&lt;p&gt;This is the first thing I &lt;strong&gt;MUST&lt;/strong&gt; mention.&lt;/p&gt;

&lt;h3&gt;
  
  
  Problem with handling Authentication by yourself
&lt;/h3&gt;

&lt;p&gt;Sign in, sign out, register, forgot password, etc is some very boring things that need to be done on almost websites. It is the most basic functionality that a website should have. But if you manually implement the authentication process, maybe you're wasting your whole team on this.&lt;/p&gt;

&lt;p&gt;The reasons are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;There is no clear benefit from the user's point of view when this function is completed. &lt;strong&gt;What is the user actually need is a single button, and they get signed in after clicked it&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Authentication is complex and complicated also. For example, manually implement the algorithm for the JWT token, manage the token lifetime, invalidate the expired token, and so on might take a lot of time and effort.&lt;/li&gt;
&lt;li&gt;Every system has the same logic for Authentication from the past decade. You do not need to spend your resources on a very old problem that has many existing great solutions.&lt;/li&gt;
&lt;li&gt;Security issues might appear if your authentication process is not well handled.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, in terms of the trade-off between team effort and the benefit, risk management, &lt;strong&gt;do not implement authentication by yourself&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Solution
&lt;/h3&gt;

&lt;p&gt;There are many good solutions out there such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://auth0.com/"&gt;Auth0&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://firebase.google.com/"&gt;Firebase&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I do not see any use case till now that one of each above product can not resolve. Please let me know if I am going wrong here.&lt;/p&gt;

&lt;h2&gt;
  
  
  Authorization
&lt;/h2&gt;

&lt;p&gt;If authentication is a key let somebody get in your house, authorization is a list of permissions you let them touch into something or go somewhere when they in. Compared to Authentication, Authorization is more complicated because it totally depends on specific business logic. In other words, you can not reuse the old authorization system in your previous project.&lt;/p&gt;

&lt;h3&gt;
  
  
  Solution
&lt;/h3&gt;

&lt;p&gt;There are many good solutions out there such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://hasura.io/"&gt;Hasura&lt;/a&gt; is the best candidate in my opinion.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://auth0.com/"&gt;Auth0&lt;/a&gt; is a good solution suite.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.8base.com/"&gt;8base&lt;/a&gt;, but it is a full Backend-as-a-service.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.okta.com/"&gt;Okta&lt;/a&gt; is also a good solution at my first look.&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  The second group: can do with much effort
&lt;/h1&gt;

&lt;p&gt;This group has various kinds of problems that we already have a powerful solution. I have not much time to explain everything. The order of things does not matter. I have tried to not list many solutions it will take your time on the comparison.&lt;/p&gt;

&lt;h2&gt;
  
  
  Email management
&lt;/h2&gt;

&lt;p&gt;The reason why I recommend using an existing solution because the common use cases: the admins want to have dashboards for email management, and they can do lots of things with email template, email marketing and so on.&lt;/p&gt;

&lt;p&gt;Solutions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://sendgrid.com/"&gt;SendGrid&lt;/a&gt;: not much thing to talk about, it just has everything you need.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://mailchimp.com/"&gt;Mailchimp&lt;/a&gt; is a good candidate for small business.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Upload file
&lt;/h2&gt;

&lt;p&gt;Let me go straight forward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We usually store media assets in cloud.&lt;/li&gt;
&lt;li&gt;It takes much effort on validation, UX and assets management.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Solutions: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you use a CDN like &lt;a href="https://cloudinary.com/"&gt;Cloudinary&lt;/a&gt;, use &lt;a href="https://cloudinary.com/documentation/upload_widget"&gt;its upload widget&lt;/a&gt; instead.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://uploadcare.com/"&gt;Uploadcare&lt;/a&gt; as its name, works in almost use cases.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Analytics dashboard
&lt;/h2&gt;

&lt;p&gt;Building a dashboard for analytics purpose is a generic use case. In fact, it is a crucial feature from product point of view.&lt;/p&gt;

&lt;p&gt;Instead of manually connecting to data warehouse, parsing data into chart components, please forget these works. The same reason as Authentication.&lt;/p&gt;

&lt;p&gt;Solutions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://retool.com/"&gt;Retool&lt;/a&gt; is a good candidate but its performance is not wonderful for me.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.appsmith.com/"&gt;Appsmith&lt;/a&gt; is open source, still in development but I prefer it over Retool.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.holistics.io/"&gt;holistics.io&lt;/a&gt; is a powerful BI tool, perfect fit for enterprise.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Chat and Notification System
&lt;/h2&gt;

&lt;p&gt;Chat, push message, notification system are complex jobs in terms of performance. Yes you can totally find out a tutorial like "building your own chat in minutes" or so, but almost them are just for high level consideration only.&lt;/p&gt;

&lt;p&gt;Solutions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://sendbird.com/"&gt;Sendbird&lt;/a&gt; offers a good solution for chat, message and so on.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.intercom.com/"&gt;Intercom&lt;/a&gt; is kind of must-have for enterprise level.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.twilio.com/"&gt;Twilio&lt;/a&gt; also support phone call and more.&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  The last group: Reinvent the wheel jobs
&lt;/h1&gt;

&lt;p&gt;Like the title, sometimes if you try to do something in the below list, you are almost waste your life:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Build your own custom UI components. &lt;a href="https://material-ui.com/"&gt;MaterialUI&lt;/a&gt; is the most customizable UI framework. On the other side, I highly recommend &lt;strong&gt;NOT&lt;/strong&gt; to try to customize &lt;a href="https://ant.design/"&gt;Antd&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Build dashboards interface from scratch. There are tons of admin template out there.&lt;/li&gt;
&lt;li&gt;Build your own custom code generator. Depends on your actual business, but in most cases, you do not need it at all. Take a look at how &lt;a href="https://hasura.io/"&gt;Hasura&lt;/a&gt; did, you will see the point.&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Dear my beloved readers
&lt;/h1&gt;

&lt;p&gt;"Focusing on business logic" is the only thing I want to share if you are a developer. Not only your time, it is also how we could make better product.&lt;/p&gt;

&lt;p&gt;Cheers and happy coding!&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>Race condition in React: conclusion</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sun, 18 Oct 2020 07:09:02 +0000</pubDate>
      <link>https://forem.com/shinabr2/race-condition-in-react-conclusion-5e4i</link>
      <guid>https://forem.com/shinabr2/race-condition-in-react-conclusion-5e4i</guid>
      <description>&lt;p&gt;Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.&lt;/p&gt;




&lt;p&gt;There are so many problems that developers should not manually resolve nowadays. I will list of in another article. One of them is race condition.&lt;/p&gt;

&lt;p&gt;Not only in ReactJS, race condition is a term used for an undesired situation when a single "resource" has been access &lt;strong&gt;at the same time&lt;/strong&gt; from many "sources". "Sources" can be HTTP request, user, whatever, and the same for "resource". Let's think it easy as a sender and receiver.&lt;/p&gt;

&lt;h2&gt;
  
  
  Scenario
&lt;/h2&gt;

&lt;p&gt;In JavaScript world, you need to face lots of problems caused by only one thing: &lt;strong&gt;asynchronous&lt;/strong&gt;. The race condition is just one of them. In fact, we need to send lots of asynchronous API requests and know neither how long does each take nor the order of results.&lt;/p&gt;

&lt;p&gt;Let say we have to call two request to get active &lt;code&gt;product&lt;/code&gt; and update the result to the state with a condition: we do not need and also do not want to wait the second request has been made after the first has completed. You probably know this is not a rare case nowadays. We want, as soon as one of each result received, we take it and store into the state.&lt;/p&gt;

&lt;p&gt;Please note that &lt;code&gt;async&lt;/code&gt;/&lt;code&gt;await&lt;/code&gt; or &lt;code&gt;React-hook&lt;/code&gt; themselves do not resolve this problem. They are just a syntax to write your code, not the solution. You can read more from &lt;a href="https://overreacted.io/a-complete-guide-to-useeffect/#speaking-of-race-conditions"&gt;Dan Abramov article&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The solutions
&lt;/h2&gt;

&lt;p&gt;There are three different solution levels for this scenario, from the basic to advance:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Writing by your hand&lt;/li&gt;
&lt;li&gt;Use a middleware like Redux-saga.&lt;/li&gt;
&lt;li&gt;Use GraphQL and Apollo&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Writing by your hand
&lt;/h3&gt;

&lt;p&gt;I highly recommend &lt;strong&gt;NOT&lt;/strong&gt; using this way. The idea is simple: we need to cancel the first request. A great article you should take a look at &lt;a href="https://medium.com/hackernoon/avoiding-race-conditions-when-fetching-data-with-react-hooks-220d6fd0f663"&gt;this medium article&lt;/a&gt;. Do not need to duplicate his words.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use a middleware like Redux-saga
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://redux-saga.js.org/"&gt;Redux-saga&lt;/a&gt; is a popular library in React world in the past several years. It does not only resolve the race condition problem, it also helps you manage the asynchronous calls better.&lt;/p&gt;

&lt;p&gt;I think do not need to talk more about Redux-saga now, almost React developers has great experience with it. But for me in 2020, &lt;strong&gt;using Redux and Redux-saga is a good signal to show that your code base will become messy&lt;/strong&gt;. Redux is painful, it is not only my thought.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Don’t use Redux if it’s painful (React doesn’t force you to). Not sure I understand how this relates to WCs".&lt;br&gt;
-- Dan Abramov&lt;br&gt;
&lt;a href="https://twitter.com/dan_abramov/status/959225731019694080"&gt;https://twitter.com/dan_abramov/status/959225731019694080&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Use GraphQL and Apollo
&lt;/h3&gt;

&lt;p&gt;I have surprised recently when somebody asks me how to resolve race condition issue. Some seconds later, I realized that I do not need to resolve it for very long time (with &lt;a href="https://www.apollographql.com/docs/react/"&gt;Apollo Client&lt;/a&gt; helps). Long enough to forget I need to care about that problem.&lt;/p&gt;

&lt;p&gt;This approach based on the core &lt;code&gt;GraphQL&lt;/code&gt;. Like I said many times before, &lt;code&gt;GraphQL&lt;/code&gt; is a revolution. But not like two previous approaches, you &lt;strong&gt;do not need to change whole infrastructure&lt;/strong&gt; to resolve race condition problem. So in fact, you may need to consider when applying &lt;code&gt;GraphQL&lt;/code&gt; into current existing code base because it changes everything.&lt;/p&gt;

&lt;p&gt;Back to our main problem, from the beginning of using Apollo-client, it helps me reduce tons of time for considering many problems like state management, middleware, race condition and so on. A &lt;a href="https://medium.com/@wmdmark/how-graphql-replaces-redux-3fff8289221d"&gt;great article on medium&lt;/a&gt; has clearly explained everything you need.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;It is 2020 now. There lots of things you need to learn in your developer journey. However, manually implementing the solution for problems like race condition is not a good thought. See you in the next article where I can list out all things a developer should do, and should not, too.&lt;/p&gt;

&lt;p&gt;Thanks for your valuable reading time!&lt;/p&gt;

</description>
      <category>react</category>
      <category>graphql</category>
      <category>redux</category>
    </item>
    <item>
      <title>My Software Checklist</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Fri, 25 Sep 2020 01:31:57 +0000</pubDate>
      <link>https://forem.com/shinabr2/my-software-checklist-34oh</link>
      <guid>https://forem.com/shinabr2/my-software-checklist-34oh</guid>
      <description>&lt;p&gt;This is the list of software need to be installed after installing Windows 10. Just for myself only, not an awesome article you usually see. Note that the only reason for using Windows is playing games, not for development. And all below things is enough for frontend development.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0JlwZbQ_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ejzk6res3irzztovjkz3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0JlwZbQ_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ejzk6res3irzztovjkz3.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Utils
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Google Chrome&lt;/li&gt;
&lt;li&gt;Unikey (for Vietnamese only)&lt;/li&gt;
&lt;li&gt;Slack&lt;/li&gt;
&lt;li&gt;Winrar&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Developer tools
&lt;/h2&gt;

&lt;h3&gt;
  
  
  MUST HAVE
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Git&lt;/li&gt;
&lt;li&gt;Node Version Manager (&lt;a href="https://github.com/coreybutler/nvm-windows"&gt;nvm&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://git-fork.com/"&gt;Fork&lt;/a&gt; is a Git GUI client.&lt;/li&gt;
&lt;li&gt;Yarn&lt;/li&gt;
&lt;li&gt;Sublime text with the following packages:

&lt;ul&gt;
&lt;li&gt;Babel&lt;/li&gt;
&lt;li&gt;Color Highlight&lt;/li&gt;
&lt;li&gt;DocBlockr&lt;/li&gt;
&lt;li&gt;JsPrettier&lt;/li&gt;
&lt;li&gt;SidebarEnhancements&lt;/li&gt;
&lt;li&gt;SublimeLinter + SublimeLinter-eslint&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;PuTTy&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Nice to have
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.axure.com/"&gt;Axure&lt;/a&gt; is a tool for prototyping, mockup.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://cmder.net/"&gt;cmder&lt;/a&gt; is a portable terminal for windows, just install once, everywhere except disk C.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Relax
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://store.steampowered.com/"&gt;Steam&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Terrible Apps
&lt;/h2&gt;

&lt;p&gt;But sometime you will need because there are still some sucks reason that I don't want to list out.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Skype&lt;/li&gt;
&lt;li&gt;Microsoft Office&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>myself</category>
    </item>
    <item>
      <title>User Story Mapping in practical way</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Wed, 23 Sep 2020 15:26:44 +0000</pubDate>
      <link>https://forem.com/shinabr2/user-story-mapping-in-practical-way-n12</link>
      <guid>https://forem.com/shinabr2/user-story-mapping-in-practical-way-n12</guid>
      <description>&lt;p&gt;Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.&lt;/p&gt;




&lt;p&gt;This is one of the series about User Story Mapping. You may take a look at &lt;a href="https://dev.to/shinabr2/easy-to-get-started-with-user-story-mapping-58ao"&gt;my previous article&lt;/a&gt; about its concepts, basically are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User Story Mapping help us easier to focus on prioritize work.&lt;/li&gt;
&lt;li&gt;Everything in User Story Mapping is based on user perspective.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I also have mentioned that we need to tool to visualize these things. Fortunately, I found a good JIRA plugin. You can find all the references at the last section of this article.&lt;/p&gt;

&lt;p&gt;Let's go to the first part to understand why User Story Mapping perfectly fit with Agile.&lt;/p&gt;




&lt;h1&gt;
  
  
  User Story Mapping with Agile
&lt;/h1&gt;

&lt;p&gt;I assume that you have already known about Agile. We heard lots of teams and companies use Agile nowadays. I will list some basic notable benefits from Agile:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Breaking down very large project into small pieces to make easier to do everything from develop, testing and deployment. In other words, better product quality.&lt;/li&gt;
&lt;li&gt;Focus on users.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Agile is great! But all we have known, in the large project, the "product backlog" is terrible long. That is the reason why User Story Mapping helps and it perfectly fit with above Agile benefits:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each stage of development process can be mapped to a user goal in User Story Mapping.&lt;/li&gt;
&lt;li&gt;User Story Mapping based on user perspective or in other words: "persona".&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I will take a very common use case for web development as example. We want to build an e-commercial site. Let say we have two high level functions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Login, logout, etc.&lt;/li&gt;
&lt;li&gt;Buying or selling some products.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Next section is the practical way to work with User Story Mapping on JIRA. I assume that you have already known some basic terms in JIRA like "epic" and "ticket".&lt;/p&gt;




&lt;h1&gt;
  
  
  Visualization of User Story Mapping in JIRA
&lt;/h1&gt;

&lt;p&gt;Creating a visualization of User Story Mapping basically follow these steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create "persona" to understand which kind of requirement of each kind of user.&lt;/li&gt;
&lt;li&gt;Define user goals&lt;/li&gt;
&lt;li&gt;Divide all goals into smaller pieces and prioritize them&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Please take a look at my result screenshot for a demo project I have created. This process should take time, of course.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YEiXwri3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3dz232xtn9ey1vn6mekl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YEiXwri3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3dz232xtn9ey1vn6mekl.png" alt="User Story Mapping of a demo project"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please tell me your first impression about this look and feel :) I really want to hear that you love it like me.&lt;/p&gt;

&lt;p&gt;We have some rules for this tool based on User Story Mapping concepts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Top row defines all &lt;strong&gt;user goals&lt;/strong&gt;. From left to right is the user's &lt;strong&gt;narrative&lt;/strong&gt; flow. In other words, from left to right is the happy case from user perspective to achieve a meaning result. In above picture, we have for example three goals are "Manage User" (login/logout/etc), "Buy a product" and "sell a product".&lt;/li&gt;
&lt;li&gt;Second row define steps mapped to an "epic" in JIRA. This plugin also allow me to collapse all epics into one group. You can see I have grouped epics in "buy a product" and "sell a product" goals which shown the total number are 4 and 5 accordingly.&lt;/li&gt;
&lt;li&gt;The last down part are the tickets, the smallest piece need to be done to perform "epic". You can see this plugin help me allow to create the milestones, release management, filtering tickets and so on. In this example, we have 14 for "buy a product" goal and 8 tickets for "sell a product" goal.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can manage "personas" from the near top right button, next to the zoom button group.&lt;/p&gt;

&lt;p&gt;Of course, you can add many goals, many tickets if you want. But I think, the shorter goals, the better visualization. The more tickets, the higher pressure.&lt;/p&gt;

&lt;p&gt;This article is aimed to show you the practical look and feel of User Story Mapping, you can give it a try. This plugin is good enough for me, I am crazy like how it looks. But I found something should be better to be improved:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You need to learn "JQL" a bit. It is a language that helps you create the filters like pivot tables in Excel. It is easy if you are familiar with Data Analyst tools.&lt;/li&gt;
&lt;li&gt;Some minor bugs on UI, does not matter if you are not a perfectionist like me.&lt;/li&gt;
&lt;li&gt;I can not find out the way to feedback in two minutes. Not joke at all. I am an advanced user with having good sense of UX and understanding how important of user feedback is. Two minutes for me, is a notable time.&lt;/li&gt;
&lt;li&gt;No onboarding process for a new user like me. &lt;strong&gt;DO NOT&lt;/strong&gt; underestimate this thing. It is one of crucial things to keep your valuable users.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's all. Thank you for your time, thank you for all of you guys reading this and see ya on next articles.&lt;/p&gt;




&lt;h1&gt;
  
  
  Related References
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://marketplace.atlassian.com/apps/1222309/"&gt;JIRA User Story Mapping plugin&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.appcues.com/blog/user-onboarding-customer-journey"&gt;Why product onboarding is so important&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.atlassian.com/blog/jira-software/jql-the-most-flexible-way-to-search-jira-14"&gt;JIRA blog about JQL&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>Uniqueness</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Thu, 17 Sep 2020 14:27:53 +0000</pubDate>
      <link>https://forem.com/shinabr2/uniqueness-4j6b</link>
      <guid>https://forem.com/shinabr2/uniqueness-4j6b</guid>
      <description>&lt;p&gt;Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.&lt;/p&gt;




&lt;p&gt;When start writing this article, I feel a bit hard to choose the &lt;br&gt;
correct tags. Because this term "uniqueness" effects not only in programming but also in everything in our industry, or even in human life. I will show you now.&lt;/p&gt;

&lt;h1&gt;
  
  
  The Importance of Uniqueness thinking
&lt;/h1&gt;

&lt;p&gt;Let's talk about our programming adventure first. We all know there are lots of problems that we faced. We need the core concepts, we need the design patterns, for what? - For resolving some specific problems? No, actually not. We need them because they are our light in all day long, hard but interesting adventure.&lt;/p&gt;

&lt;p&gt;But have you ever think about one rule of thumb of those concepts, design patterns? One thing can rule them all?&lt;/p&gt;

&lt;p&gt;My opinionated answer is the "uniqueness".&lt;/p&gt;

&lt;h2&gt;
  
  
  Uniqueness in programming
&lt;/h2&gt;

&lt;p&gt;One of my favorite quotes in programming is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;There are only two hard things in Computer Science: cache invalidation and naming things.&lt;/p&gt;

&lt;p&gt;-- Phil Karlton&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It is okay if you have never heard about that. As soon as you realized these two things, the stronger thinking you have.&lt;/p&gt;

&lt;p&gt;I considered this quote for many years. Because I am too lazy to remember two things, I want to figure out only one thing, one thing can lead to them, that is uniqueness. I realized long time ago before able to writing this article.&lt;/p&gt;

&lt;p&gt;Why uniqueness can lead to two these things?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First, one hard step to achieve caching is defining &lt;strong&gt;cache key&lt;/strong&gt;. Because it is a key, it needs to be &lt;strong&gt;unique&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Second, naming things, the name should be &lt;strong&gt;unique&lt;/strong&gt; in current "scope". The term "scope" is different in different programming languages, but the core idea is the space that a variable has its meaning.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I can think, if I can resolve uniqueness problem, all the remaining things should be easy. That is a good answer for somebody lazy like me.&lt;/p&gt;

&lt;p&gt;Some other easy to see example to show how important of uniqueness is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Primary key in database. All we already known.&lt;/li&gt;
&lt;li&gt;Key for each item in a list. If you are working with React, please refer to &lt;a href="https://reactjs.org/docs/lists-and-keys.html"&gt;this&lt;/a&gt; to see why it is so important.&lt;/li&gt;
&lt;li&gt;Global variable name. If you have worked with jQuery, you will understand why &lt;code&gt;$&lt;/code&gt; need to be unique (back to naming things, back to unique again).&lt;/li&gt;
&lt;li&gt;Lots of algorithms were born to resolve one problem: generate a unique string.&lt;/li&gt;
&lt;li&gt;Identity: every user need to be identified right? And we need a unique id for it correct?&lt;/li&gt;
&lt;li&gt;All other keys.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Of course please feel free if you find any other case that we need to make a thing unique.&lt;/p&gt;

&lt;p&gt;I hope you can see the feeling I had about this single term. Now we go to the next section.&lt;/p&gt;

&lt;h2&gt;
  
  
  Uniqueness in everything
&lt;/h2&gt;

&lt;p&gt;Like I said above, not only in programming, the uniqueness should be also a great impact in your human life.&lt;/p&gt;

&lt;p&gt;The answer is simple, but actually not easy to do: because all of us, want to be unique among other people.&lt;/p&gt;

&lt;p&gt;In an interview, every single person in us, want to be the best candidate. This actually mean we need to be unique among the others.&lt;br&gt;
In our company, we strongly need to be unique, nobody wants people easy to find another one replace me.&lt;br&gt;
In all of our relationships, we indeed need that unique thing.&lt;/p&gt;

&lt;p&gt;These are enough for me. One thing, rule all other things.&lt;/p&gt;

&lt;p&gt;So ...&lt;/p&gt;

&lt;h1&gt;
  
  
  How can I think uniqueness
&lt;/h1&gt;

&lt;p&gt;In programming first, you can try to think about something that I mentioned in the first part before considering other problems. You may think those are easy. Yes, but if you practice it enough, you will easy to see the core of almost problems you face. Always think about uniqueness, how to make something, some object unique, how to identify an object or variable and so on.&lt;/p&gt;

&lt;p&gt;In our human life, it is totally depends on you. But somehow similar to programming, you will become more brilliant. A good example is, how to guide a tourist to follow the right way? (You might need to find out some *** thing).&lt;/p&gt;

&lt;p&gt;That's all! Thanks for your valuable time. Love ya and see you guys in next articles.&lt;/p&gt;

&lt;p&gt;&lt;a class="comment-mentioned-user" href="https://dev.to/shinabr2"&gt;@shinabr2&lt;/a&gt;
&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Easy to get started with User Story Mapping</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Sun, 13 Sep 2020 11:35:03 +0000</pubDate>
      <link>https://forem.com/shinabr2/easy-to-get-started-with-user-story-mapping-58ao</link>
      <guid>https://forem.com/shinabr2/easy-to-get-started-with-user-story-mapping-58ao</guid>
      <description>&lt;p&gt;Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.&lt;/p&gt;




&lt;p&gt;In my developer life, I faced many problems, but till now, I think, the most critical problem for every team, every single product is “communication”. Unfortunately, the simple word “communication” seems not be easy as it is. And worse thing is, not many people understand the easy word “communication” in the same way. Today, I want to focus to one of those problems, task management.&lt;/p&gt;

&lt;h1&gt;
  
  
  Understanding the problem
&lt;/h1&gt;

&lt;p&gt;I believe that almost people in this fancy industry has at least one time facing this scenario: they understand neither what actually be done nor what should they do with a task. The same for other teammates, they want to understand, but no way can achieve.&lt;/p&gt;

&lt;p&gt;In the project management perspective, we have some methodologies, such as Waterfall, Scrum, etc. They were invented to try to resolve my above problem at high level. At the lower level, the actually method that developers like us had worked with (also for designers and every other teammate), is nothing more than an incredible long list of tasks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7rBovsU2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/v3o9g7mcbw3ny97znjad.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7rBovsU2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/v3o9g7mcbw3ny97znjad.png" alt="Source: https://pixabay.com/vectors/todo-list-despaired-man-person-sad-297195/"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Almost people are lazy to read, especially that above long list. Lots of redundant information there. In my point of view, it is one of the best ways to waste human resources. I do not think hiring a good person and told them what to do is a good strategy. I will let they do the best they can, and tell me the result instead.&lt;/p&gt;

&lt;p&gt;Come back to above long list, what I am going to tell, User Story Mapping, is a good way to “transform” that list into another visual form, easy to &lt;strong&gt;focus&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I think, focusing, is everything we need for task management. In other words, with the old long list, &lt;strong&gt;nobody knows what is higher priority&lt;/strong&gt;, which is not. That is the core problem here. Okay, so if we know the problem, easy to find the answer out, right?&lt;/p&gt;

&lt;h1&gt;
  
  
  Now, the solution
&lt;/h1&gt;

&lt;p&gt;Let’s take a look at my below image (I spent about 5 minutes to draw using Microsoft paint). This is the very basic and simplest visual form of User Story Mapping concept. No need fancy words to make people understand.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1AbT4KHa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/c3z4s4bzdcuvguf12sne.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1AbT4KHa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/c3z4s4bzdcuvguf12sne.png" alt="User Story Mapping Concept"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I do not think I need to say more, is above image easy to get? So let say we have three wanted features are A, B, C. You might guess, the purple rounded rectangles mean big tasks need to be done to achieve the target feature which is above them, correct! Then other remaining rounded rectangles mean a task (that actually a task which developers like us work on).&lt;/p&gt;

&lt;p&gt;So take more focus on the order of features, from left to right, it does not need to be mean the time. &lt;strong&gt;It is the order to make something meaning for the users&lt;/strong&gt;. I believe, this is the only thing I want to talk in this overall talk.&lt;/p&gt;

&lt;h1&gt;
  
  
  Pros and cons
&lt;/h1&gt;

&lt;p&gt;Now, take a second to consider why this visual form can help, especially in team communication (I think, you already have your answer now):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Now you are able to see the top priority thing to do. In case of above picture, that is feature A, the one has most emphasize color, on the top left. Remember the word “focus” I mentioned before?&lt;/li&gt;
&lt;li&gt;The more important thing is, &lt;strong&gt;everybody now can understand the relation between their current work to the others, and to the overall project&lt;/strong&gt;. In other words, it does not matter who you are, developers, business analyst, project manager, or even stakeholders, you can clearly see how everything is planned.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Please note, my picture, is a very basic concept, you can be creative to create more complex rules, filters and so on. There are many tools support you to do so. Understanding the core concept is the thing I want to talk about. Now the next part, find out the cons of User Story Mapping.&lt;/p&gt;

&lt;p&gt;Follow that basic concept, we can figure out:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User Story Mapping should be short. You do not need to see thousands of wanted features. In the contrast, thousands of tasks is a very general scenario.&lt;/li&gt;
&lt;li&gt;Keep the User Story Mapping updated!!! You know, a single task now be related to some people, not only one.&lt;/li&gt;
&lt;li&gt;You need an extra tool for that, of course. We will talk about this in later articles.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;I hope you are enjoyed my article. Actually all things I have done is just an image. You can have a deeper look about User Story Mapping via &lt;a href="https://plan.io/blog/user-story-mapping/#what-are-user-stories"&gt;this great article&lt;/a&gt;. Every feedback should be highly appreciated. See you in next article about “how User Story Mapping perfectly fit in Agile”.&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>Do web users like "dark mode"?</title>
      <dc:creator>ShinaBR2</dc:creator>
      <pubDate>Mon, 03 Aug 2020 09:52:42 +0000</pubDate>
      <link>https://forem.com/shinabr2/do-web-users-like-dark-mode-27f7</link>
      <guid>https://forem.com/shinabr2/do-web-users-like-dark-mode-27f7</guid>
      <description>&lt;p&gt;Like the title. I wonder because I have added dark mode by default for my website, and seems still somebody doesn't like that.&lt;br&gt;
How do you guys think and have experience with that?&lt;/p&gt;

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