Latest Stories

Common mistake in software engineering - documentation 📜 • August 16, 2021

Couple of weeks ago, I saw this video on Youtube about "Why Software is hard" and the guy's talk really struck me 😍 There are many factors that contributes to difficulty of maintaining sustainable projects in the long run. In this post specifically, I would like to devote all of it for documentation 📄. I'm going to list out reasons with detail on why documentation should be treated like the king…

Keep Reading →

How to handle media's ended property effectively in UI frameworks 🎉 • July 13, 2021

In case you miss my previous post about how to work with media elements and UI frameworks on the web. Please spend sometimes to read it before continue with this one for understanding 🙂 The question I got from my colleagues was on how to keep ended state in sync with media's property. I did not go for ended event but play, pause and seeking events for the following reasons: Ended event only gets…

Keep Reading →

SOLID in component architecture 🎉 • July 01, 2021

SOLID stands for five design principles intended to make software designs more understandable, flexible and maintainable Reference link Let's go over one by one, shall we 😊 Singular-responsibility principle There should never be more than one reason for a component to change, period. The main reason why we came up with component architecture in the first place is to leverage reusability…

Keep Reading →

How to build a simple drag and drop folder explorer in Vue 🎉 • May 21, 2021

As of writing, I'm working on a feature called hierarchy folder in Cases at Evidence.com application. You might might heard that before from our main web site. Our application helps customers to organize various kind of evidence (image, document, audio, video, et cetera) in our platform. These evidence could be organized in something called Case which is meant for serious investigation on certain…

Keep Reading →

Life lesson about love, trust and belief 😇 • March 26, 2021

Back in 2012, there was a little kid who wanted to explore the world. He found himself useless, without life purpose and almost committed suicide. He was luckily accepted to study at Haaga-Helia University of Applied Sciences. This is where he started knowing what he should become and begin his journey at strange country so-called Finland 🇫🇮 He wanted to become something new so bad, and he did…

Keep Reading →

My collection of resources for front-end development 🎉 • March 26, 2021

First and foremost, I am a strong believer who has 100% trust on learning by doing. Most of resources out there will only show you tiny example of how their technology works in standalone mode without showing how they fit into the big picture. Let's say you want to build a personal blog, you mostly need a front-end UI frameworks, CSS styling, static hosting process, etc. We typically need to…

Keep Reading →

Introduce Playable component into media playback family 🎉 • March 11, 2021

Previously, I did share my invented media architecture to work in harmony with UI frameworks. Lately, I have received an fantastic request from one of my colleague to playback some time series data without involving actual media element. Challenge accepted! Since our media package makes use of Bridge pattern underneath the hood. As long as I satisfy an Implementation's interface the way audio and…

Keep Reading →

How to integrate PDFTron with UI frameworks 📃 • March 10, 2021

Last year, I received the requirement at work to develop document viewer in the web. Previously, we have used PDF.js which is de-facto go-to solution to view pdf document on the web. It's a great tool for viewing pdf file on the web but limited to view functionality only, and we need a whole set of new features for our customers. In the process of researching different vendors, PDFTron has been so…

Keep Reading →

How to create nested Menu components from material-ui 🎉 • February 28, 2021

Design system has become a normal thing to have at any company regardless of sizes. At Axon, we started working actively on our own component library several years ago. Given the fact we are not at the scale like Apple or Google to come up with our own component library from scratch. We decided to extensively use material-ui's components and customize on demand as per our requirements. As of…

Keep Reading →

How to work with video overlay on the web 🎉 • January 05, 2021

First of all, let's have a closer look at what video overlay is to make sure we are all on the same page. Video overlay is any extra UI we draw on top of the video content. The actual video content is very different from video element itself in the web as it has object-fit: content built in by default. This makes the video element's dimensions and the actual video's content are separated most of…

Keep Reading →

Vuex - High performance Flux implementation 🏎 • December 21, 2020

Previously, I have touched on how Recoil makes it's so easy to mange large-scale application with performance in mind. Later, I found an interesting tweet from Evan You with respect to Recoil as below Haven’t checked the internals, but from the surface Recoil (newly open sourced React state management lib by FB) shares quite some similarities with MobX / Vue. Specifically the idea of only…

Keep Reading →

UI Recursive rendering development 🎉 • November 26, 2020

Accompany presentation The first time I have ever encountered recursion was as tiny as calculate the factorial of a non-negative integer. Back in the day, this was absolutely bending my mind. And I kept asking myself the question why someone would solve a problem like this instead of just simple for iteration loop 🤔. Later one, I got intrigued by Functional Programming paradigm and start…

Keep Reading →

The rise of headlessmedia and application of Observer Pattern 🎉 • October 20, 2020

In my previous post, I wrote about how I could use 1 KB of XState to optimize next-media package at Axon but decided not to due to maintainability. Later, I figured out the way which could satisfy my concerns about next-media. I could get minimal bundle size addition, performance optimization and zero new concept for maintenance. Let's travel back in time and see I have done that step by step…

Keep Reading →

Optimize React Media Player with XState 🎉 • September 28, 2020

Accompany presentation Previously, I did share my invented media architecture to work in harmony with UI frameworks. Not long after that, I crafted a dedicated package so-called next-media to serve the higher purpose at Axon - "unify media experience". The biggest goals of the package are maintainability and flexibility. Any developers should be able to jump in the documentation and start…

Keep Reading →

How Recoil works its magic and the greatness of XState 🎉 • August 21, 2020

State management is hard, especially in large and complex application where we have thousands of components to form a single master piece of application to deliver some value to its intended customer. Popular libraries such as React, Vue, Angular, Cycle, Aurelia, Svelte, etc have done a fascinating job in abstracting the rendering logic to the UI environment (web, mobile, desktop, embed devices…

Keep Reading →

Demystifying dependency injection in JavaScript 💉 • June 24, 2020

For folks who are curious bout what decorator in JavaScript is all about, please visit this series of awesome article. You will learn a lot by reading through the code, feature available, the why and how of different types of decorator available in JavaScript. Finally, the reflect metadata plays a vital part in the whole architectures of many frameworks out there such as Angular, Nest and Vue's…

Keep Reading →

UI frameworks and Media Elements 🎧 • June 02, 2020

Accompany presentation It's harder than you thought, easier than you think First of all, let's define couple of terms before moving to the rest of the article: Media elements: audio and video elements on the web Frameworks: UI libraries that helps developers deliver slick user experience in scalable manner MSE: Media Source Extension API helps developers to load data to media elements plugin-free…

Keep Reading →

Reverse-engineering PDF search algorithm from Firefox 📝 • June 01, 2020

At AXON, we use React extensively for all of our web applications. And , pdf.js from Mozilla Firefox has always been de facto solution to go for whenever someone consider adopt one battle-tested PDF solution for their product. It has been used by vast number of companies, browser extensions and libraries (open source and comercial). We've used react-pdf as our React's binding resolution for…

Keep Reading →

State Pattern • December 27, 2019

Applicability An object's behavior depends on its state, and it must change its behavior at run-time depending on that state Operations have large, multipart conditional statements that depend on the object's state. This state is usually represented by one or more enumerated constants. Often, several operations will contain this same conditional structure. The State pattern puts each branch of the…

Keep Reading →

Visitor Pattern • December 26, 2019

Applicability An object structure contains many classes of objects with differing interfaces, and you want to perform operations on these objects that depend on their concrete classes Many distinct and unrelated operations need to be performed on objects in an object structure, and you want to avoid "polluting" their classes with these operations. Visitor lets you keep related operations together…

Keep Reading →

Template Method Pattern • December 26, 2019

Applicability To implement the invariant parts of an algorithm once and leave it up to subclasses to implement the behavior that can vary When common behavior among subclasses should be factored and localized in a common class to avoid code duplication #DesignPatterns Let's put this pattern into practice. We are going to implement a simple pizza maker application. We have a template that define a…

Keep Reading →

Observer Pattern • December 25, 2019

Applicability When an abstraction has two aspects, one dependent on the other. Encapsulating these aspects in separate objects lets you vary and reuse them independently When a change to one object requires changing others, and you don't know how many objects need to be changed When an object should be able to notify other objects without making assumptions about who these objects are. In other…

Keep Reading →

Memento Pattern • December 25, 2019

Applicability A snapshot of an object's state must be saved so that it can be restored to that state later A direct interface to obtaining the state would expose implementation details and break the object's encapsulation #DesignPatterns Let's take a simple example of text area where content is modified overtime. We would like to store the change and restore its state back at any point in time…

Keep Reading →

Mediator Pattern • December 25, 2019

Applicability A set of objects communicate in well-defined but complex ways. The resulting interdependencies are unstructured and difficult to understand Reusing an object is difficult because it refers to and communicates with many other objects A behavior that's distributed between several classes should be customizable without a lot of subclassing #DesignPatterns Let's code up a sample…

Keep Reading →

Iterator Pattern • December 25, 2019

Applicability To access an aggregate object's contents without exposing its internal representation To support multiple traversals of aggregate objects. To provide a uniform interface for traversing different aggregate structures #DesignPatterns Let's take a pretty simple example application in which we have a collection of libraries. We need to provide a way for this collection to create a…

Keep Reading →

Interpreter Pattern • December 25, 2019

Applicability The grammar is simple. For complex grammars, the class hierarchy for the grammar becomes large and unmanageable. Tools such as parser generators are a better alternative in such cases. They can interpret expressions without building abstract syntax trees, which can save space and possibly time Efficiency is not a critical concern. The most efficient interpreters are usually not…

Keep Reading →

Strategy Pattern • December 25, 2019

Applicability Many related classes differ only in their behavior. Strategies provide a way to configure a class with one of many behaviors You need different variants of an algorithm. For example, you might define algorithms reflecting different space/time trade-offs. Strategies can be used when these variants are implemented as a class hierarchy of algorithms An algorithm uses data that clients…

Keep Reading →

Command Pattern • December 24, 2019

Applicability Commands are an object-oriented replacement for callbacks Specify, queue, and execute requests at different times. A Command object can have a lifetime independent of the original request. If the receiver of a request can be represented in an address space-independent way, then you can transfer a command object for the request to a different process and fulfill the request there…

Keep Reading →

Chain Of Responsibility Pattern • December 24, 2019

Applicability More than one object may handle a request, and the handler isn't known a priori.The handler should be ascertained automatically. You want to issue a request to one of several objects without specifying the receiver explicitly The set of objects that can handle a request should be specified dynamically. #DesignPatterns Let's go for a quick example. We have an imaginary workflow as…

Keep Reading →

Proxy Pattern • December 24, 2019

Applicability A remote proxy provides a local representative for an object in a different address space A virtual proxy creates expensive objects on demand. The ImageProxy de- scribed in the Motivation is an example of such a proxy A protection proxy controls access to the original object. Protection proxies are useful when objects should have different access rights A smart reference is a…

Keep Reading →

Flyweight Pattern • December 24, 2019

Applicability An application uses a large number of objects Storage costs are high because of the sheer quantity of objects Most object state can be made extrinsic Many groups of objects may be replaced by relatively few shared objects once extrinsic state is removed. The application doesn't depend on object identity. Since flyweight objects may be shared, identity tests will return true for…

Keep Reading →

Facade Pattern • December 24, 2019

Applicability You want to provide a simple interface to a complex subsystem.Subsystems often get more complex as they evolve. Most patterns, when applied, result in more and smaller classes. This makes the subsystem more reusable and easier to customize, but it also becomes harder to use for clients that don't need to customize it. A facade can provide a simple default view of the subsystem that…

Keep Reading →

Decorator Pattern • December 23, 2019

Applicability To add responsibilities to individual objects dynamically and transparently, that is, without affecting other objects For responsibilities that can be withdrawn When extension by subclassing is impractical. Sometimes a large number of independent extensions are possible and would produce an explosion of subclasses to support every combination. Or a class definition maybe hidden or…

Keep Reading →

Composite Pattern • December 23, 2019

Applicability You want to represent part-whole hierarchies of objects You want clients to be able to ignore the difference between compositions of objects and individual objects. Clients will treat all objects in the composite structure uniformly #DesignPatterns Let's put this into practice by implementing a simple box finder structure. The Box can have both file and another box inside which can…

Keep Reading →

Bridge Pattern • December 23, 2019

Applicability You want to avoid a permanent binding between an abstraction and its implementation. This might be the case, for example, when the implementation must be selected or switched at run-time Both the abstractions and their implementations should be extensible by subclassing. In this case, the Bridge pattern lets you combine the different abstractions and implementations and extend them…

Keep Reading →

Adapter Pattern • December 22, 2019

Applicability You want to use an existing class, and its interface does not match the one you need You want to create a reusable class that cooperates with unrelated or unforeseen classes, that is, classes that don't necessarily have compatible interfaces You need to use several existing subclasses, but it's un- practical to adapt their interface by subclassing every one. An object adapter can…

Keep Reading →

Singleton Pattern • December 21, 2019

Applicability There must be exactly one instance of a class, and it must be accessible to clients from a well-known access point when the sole instance should be extensible by subclassing, and clients should be able to use an extended instance without modifying their code #DesignPatterns The typical example would be HTTP service that response for a whole application to make request to the server…

Keep Reading →

Prototype Pattern • December 21, 2019

Applicability The classes to instantiate are specified at run-time Avoid building a class hierarchy of factories that parallels the class hierarchy of products When instances of a class can have one of only a few different combinations of state. It may be more convenient to install a corresponding number of prototypes and clone them rather than instantiating the class manually, each time with the…

Keep Reading →

Factory Method Pattern • December 21, 2019

Applicability A class can't anticipate the class of objects it must create A class wants its sub classes to specify the objects it creates Classes delegate responsibility to one of several helper subclasses, and you want to localize the knowledge of which helper subclass is the delegate #DesignPatterns Let's take a practical example that illustrates the usage of this method. We have various UI…

Keep Reading →

Builder Pattern • December 20, 2019

Applicability The algorithm for creating a complex object should be independent of the parts that make up the object and how they're assembled The construction process must allow different representations for the object that's constructed #DesignPatterns Let's take an example in building UI elements based on different libraries such as React, Vue and Angular. We need a thing so-called director to…

Keep Reading →

Abstract Factory Pattern • December 19, 2019

Applicability: A system should be independent of how its products are created, composed and represented A system should be configured with one of multiple families of products A family of related product objects is designed to be used together, and you need to enforce this constraint You want to provide a class library of products, and you want to reveal just their interfaces, not their…

Keep Reading →

Announcing the series of posts on Golang design patterns 🎉🎉🎉 • December 19, 2019

Lately, I was fortunate to watch a talk on how import software architect is by a talk from one of the most famous software programmer of all time - Uncle Bob. If you come across this post and you are part of the IT industry, please spend an hour or so to watch carefully the video below - IT WILL CHANGE YOUR LIFE 😗 After watching this, I found out what to do next to sharpen my knowledge on…

Keep Reading →

Introducing React-Zoomable-Media 🔮 • October 29, 2019

The zooming functionality has been always one of our customer's most wanted features. As our customers are police officers, the need for advance viewing media evidence is a must-have. After the media have been recorded, they need to be processed by the BE team at first since the majority of browsers are only capable of rendering well-known media format like jpeg, png for image and mp4 for video…

Keep Reading →

Ever lasting love movies ❤️ • March 11, 2019

Here we go: 😊 A walk to remember A moment to remember Adrift Be with you Crazy stupid love Dear John Definitely, maybe Love actually Lala land Moulin Rouge Pride and Prejudice Pretty woman Titanic The longest ride The vow The notebook 500 days of summer 50 First dates Last Christmas The curated list above really influence my take on love, it means to me a great deal. Love is like oxygen, we…

Keep Reading →

Problems with not using routing system properly -> UX === 😳 • March 07, 2019

First and foremost, I want to list out the common problems with improper implementation of routing systems. After that, I am going to write about how to tackle them one by one. Ready? Here we go: Forget to check for user's permission on each screen Forget to redirect user's back to where they wanted to view in the first place after authentication Render something on screen and redirect user after…

Keep Reading →

Let's talk about SharedWorker 🤔 • March 04, 2019

QUOINE's core product is a trading platform for cryptocurrency where people can trade various kind of currencies includes famous ones like Bitcoin and Ethereum. In order to have a real time system in place, we decided to go with Pusher realtime APIs as a service vendor. Thus, we don't have to worry about technical implementation for both Back-end and Front-end sides. Furthermore, the documentation…

Keep Reading →

Introducing INAB app - aka I Need A Budget 💸 • March 02, 2019

Money can't buy happiness 💞 It's one of the most famous sayings of all times. I had believed this quote for such a very very long time. Until one day, I watched a TED Talks that totally blew my mind away. Seem like the sentence above is not absolutely correct. "Could money buy happiness" - my answer is YES and NO. And here is why: Without being able to fulfill our basic need according to Maslow…

Keep Reading →

Be well Be Happy 💞 • January 30, 2019

It all started by a beautiful day, the sky was so clear and everything looked shiny. On the 1st of January 2018, I came back to my hometown to enjoy short holiday with my family. After couple of days, after the holidays was over, I ride back 🏍 to Ho Chi Minh city where I lived and working. I felt a bit sick as I got some temperature. It was raining, I thought it wasn't that hard so I decided to…

Keep Reading →

Cancelling pending requests on route-changed to improve application's performance at QUOINE 🚀 • January 18, 2019

Initially, the situation was that whenever users navigate too fast among difference routes. This process made a ton of API calls that stacking up the browsers' networking queues. As per HTTP 1, browsers can only support certain amount of concurrent requests at any given time (source - max parallel http connections in a browser). Even though with HTTP 2, that won't be the case as one single TCP…

Keep Reading →

The problems we faced at QUOINE 😱 • January 13, 2019

The link to the full presentation is located at https://fe-codebase-quoine.netlify.com 🚀

Keep Reading →

Simple state management with singleton pattern at QUOINE 🗽 • January 13, 2019

At QUOINE, we use Redux for all the thing with regard to state management. It comes with several costs: Boilerplate all over places Action, reducer and connected component are three files to maintain regardless of the size of a feature The whole React's VDOM tree re-renders on every action dispatch because we do not use any immutability library in combination with Redux Currently, we need a way to…

Keep Reading →

Forking create-react-app at QUOINE - part 4 💻 • January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The final part of this series is devoted for configuring webpack's production mode for building web applications at QUOINE. Here is our FE's current codebase structure…

Keep Reading →

Forking create-react-app at QUOINE - part 3 💻 • January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration At QUOINE, we were using CSS module across our applications. Needless to say. the biggest drawback of this approach is dynamic property configuration and lack of theming…

Keep Reading →

Forking create-react-app at QUOINE - part 2 💻 • January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The way we structure our application at QUOINE is not something that natively supported by the original CRA. Specifically, CRA only support a single application under…

Keep Reading →

Forking create-react-app at QUOINE - part 1 💻 • January 04, 2019

This is a four parts of the process: Remove unnecessary stuff included in the original create-react-app v2 tooling Customize Jest configuration Customize Webpack development configuration Customize Webpack production configuration The create-react-app version 2 from Facebook's core team has upgraded vast majority of key technologies included such as: Webpack version 4 Jest version 23 Babel version…

Keep Reading →