My personal blog - Where I share what I have learnt ๐Ÿ“š

Latest Stories ๐Ÿ“

Understanding signals based state management in React ๐Ÿ“ก โ€ข October 23, 2024

Previously, I wrote about how to build your own signals from scratch using vanilla JavaScript. As of writing, React is the most popular UI view library that does not come with signals based state management out of the box in contrast to Vue, Angular, Solid, Svelte, et cetera. The native solutions such as useState and useReducer are baked deeply into VDOM rendering mechanism of React. Whenever weโ€ฆ

Keep Reading โ†’

Build your own signals ๐Ÿšฅ โ€ข October 15, 2024

You probably have seen / used some kind of signals implementation before regardless of web technologies of choice. It is available in various ecosystems such as React, Vue, Angular, Solid, Svelte, Qwik, et cetera. There is a plenty of explanation out there about signals, yet my favorite one is from Solid.js author - Ryan Carniato Signals are actually directed data graph It is a convenient andโ€ฆ

Keep Reading โ†’

How to use effect and reducer for simple yet scalable state management system in React application โš–๏ธ โ€ข May 20, 2024

Recently, I have found from the Internet something fun yet fantastic to use for complex state management in React application regardless of the scale. Everything was started by this short tweet from ex-React core team - Dan Abramov. He demonstrated how to combine effect and reducer together to handle a pretty complicated animation mechanism in hover card from bluesky social app. And I noticedโ€ฆ

Keep Reading โ†’

How to gracefully handle errors on the web ๐Ÿšจ โ€ข April 15, 2024

As we all know, errors are unavoidable in software. As much as I love to write software that is bug-free, it is impossible to write software that is completely free of errors. The reality is not perfect, and perfection is not reality. Nonetheless, we should always strive to write software that is capable of handling errors gracefully ๐Ÿ˜Š When it comes to UI development, handling errors gracefullyโ€ฆ

Keep Reading โ†’

Achieving mastery of React's behaviour by reading Preact's source code โš›๏ธ โ€ข March 24, 2024

As of writing, I'm working for Shopify and we are making commerce better for everyone in the world โค๏ธ If that sounds right to you, please don't hesitate to join us ๐Ÿ˜Š We decided to place our bet on React of Facebook / Meta team which is the most dominant library for building library in North America. Yet, as I have observed on the Internet and in my professional working experience - working withโ€ฆ

Keep Reading โ†’

Debouncing / Throttling as a foot gun ๐Ÿ”ซ โ€ข March 12, 2024

First and foremost, let's try to list down couple of reasons why we need debouncing / throttling (DT) technique in the first place: Performance optimization - we want to prevent some operations that take places too often by limiting its frequency of execution Network latency - it is common to avoid hitting API request upon every single users' actions to reduce pressure on the server Userโ€ฆ

Keep Reading โ†’

You might need Redux DevTools ๐Ÿ”ฑ โ€ข February 24, 2024

Redux was created back in 2015 by Dan Abramov and Andrew Clark. It was such an amazing library back then and took over the world by nature. It was the most popular implementation of Flux architecture and highly inspirational source for other implementations across UI frameworks like Vuex for Vue.js, NgRx for Angular, and many others. Modern front-end architecture has evolved and so does the way weโ€ฆ

Keep Reading โ†’

User-driven testing in Frontend web development ๐Ÿง‘โ€๐Ÿ’ป โ€ข December 30, 2023

First and foremost, everything starts with the WHY. The ultimate goal of writing tests is to ensure the success of our projects in the future. Yet, A LOT of us have been struggling with knowing what to test in our daily development. I am no exception, I started FrontEnd development back in 2017. At that time, many modern tools for web development did not exist. Most of the companies I worked forโ€ฆ

Keep Reading โ†’

How to build drag and drop UI editor from scratch ๐Ÿปโ€โ„๏ธ โ€ข November 26, 2023

Lately, I took on a challenge to build a complete UI editor based on Shopify's polaris design system - similar to Open Chakra App from the Chakra UI ecosystem. I love Chakra UI and I have used it in many of my projects, but I wanted to try something new and build a similar editor based on Shopify's polaris design system since this is where I am working right now - making commerce better forโ€ฆ

Keep Reading โ†’

My experience with Frontend interview ๐Ÿ“š โ€ข August 03, 2023

As of writing, I have been working in the IT industry as a Frontend software engineer for 7 years. I have sat on both sides of the table as interviewer and interviewee. In the rest of the article, I would like to share my experience from conducting those interviews and give my personal opinion at the end ๐Ÿ™‚ I started my career back in 2016-2017 as AngularJS and React developer as a starter. As aโ€ฆ

Keep Reading โ†’

Monorepo in action for library maintenance ๐Ÿ’ž โ€ข July 03, 2023

I have been developing a couple of UI libraries lately as below: Zoom Image - A little yet powerful framework agnostic library to zoom image on the web Headless Playback - A little yet powerful framework-agnostic library for playback experience Social Player - A simple yet powerful library to playback social media for the web The original inspiration came from fantastic Tanstack and Zag librariesโ€ฆ

Keep Reading โ†’

State Management in modern UI frameworks ๐Ÿ‡บ๐Ÿ‡ธ โ€ข June 20, 2023

I have been learning and developing web application for nearly a decade now. The fantastic thing about the web is that it is now owned by any giant companies out there like Apple (iPhone) or Google (Android). Instead, it is completely open and shared across the globe ๐ŸŒŽ - this is also the main reason why I decided to go with the web development back then ๐Ÿ˜‡ There have been many trends up and downโ€ฆ

Keep Reading โ†’

What does it take to deliver a design system? ๐Ÿ’… โ€ข June 07, 2023

First of all, let's talk about WHY do we need design system in the first place. A design system is a collection of design and code specific to set of components in order to unify both practices across organization's products. I could think of several big benefits of having design system for your project as follow: It boosts developer productivity. Building UI is very much the same as puttingโ€ฆ

Keep Reading โ†’

Our experience with new life in Halifax, Nova Scotia ๐Ÿ’ž โ€ข May 30, 2023

We arrived in Halifax on first week of March 2023. Everything started nicely after a longest flight we just had from Vietnam. It's a 40 hours in total flight for us. We flew from Ho Chi Minh city to Seoul, transited 10+ hours there before travelling to Vancouver... It's another long transit there with 9 hours waited. Finally, we landed on Halifax on Saturday March 5th, 2023. I would share to shareโ€ฆ

Keep Reading โ†’

The merit of writing tests in UI engineering โค๏ธโ€๐Ÿ”ฅ โ€ข April 27, 2023

First and foremost, let's highlight two focusing points in this post: Why do we need to write tests? WHAT, HOW, and WHY should we write tests? Why do we need to write tests? 7 years ago, I started fresh in software engineering. I did not know anything about testing at all. I am a full-time self-taught developer, nobody told me about testing before that. I started working for a medium size companyโ€ฆ

Keep Reading โ†’

How to handle file path effectively on the web ๐Ÿ—ƒ โ€ข April 12, 2022

Lately, I have involved in developing Case Management and Sharing (another CMS ๐Ÿคช) as part of Axon's evidence global product suite. We have helped our end users to work with evidence more efficiently by deliver features such as grouping, categorization, sharing and review multiple items at once via Cases and Sharing system. Couple of month ago, we shipped one of the most exciting feature andโ€ฆ

Keep Reading โ†’

Why do I even blog? ๐Ÿ˜Š โ€ข March 30, 2022

It started years ago back in 2018 when I began working on several intensive tasks at work. I was very proud of that work since it saved my co-workers a ton of hours and improved our teamsโ€™ productivity. The company I worked for was very not document-oriented driven company where everything should be documented for later reference. I had to present the proposal to my colleagues and later verballyโ€ฆ

Keep Reading โ†’

How to create silky smooth marquees on the web ๐ŸŽ‰ โ€ข December 31, 2021

Previously, I concluded my thoughts on scalable React application. One of my inspiration was the Storefront demo created by the team at Vercel which is completely open source. I really like the way they organize their code and how well-architected the whole application is. Among all the things that amazed me, the one below struck me the most and I didn't even know what it's called back then ๐Ÿ˜… Iโ€ฆ

Keep Reading โ†’

My thoughts on scalable React application ๐ŸŽ‰ โ€ข October 20, 2021

First and foremost, let's talk about the goal of scalable front-end web application and how success should be measured ๐Ÿ˜. Given my experience with OSS community, Axon DEMS UI maintainer, FE lover - I strongly believe the below bullet points are what a successful web application looks like: Performance Accessibility Internationalization SEO Linting for best practices Image optimization Scriptโ€ฆ

Keep Reading โ†’

Avoid using boolean as the origin data as much as possible ๐ŸŽ‰ โ€ข October 13, 2021

Boolean is a common data type that supported by almost if not all programming languages to represent simple data state - true or false. And it's undoubtedly clear that state management is one of the hardest problems in programming. Speaking of the web landscape only, we have countless amount of solutions that have been trying to solve this problem from various flavor choices of technology - Reduxโ€ฆ

Keep Reading โ†’

JSON API with modernized normalization ๐ŸŽ‰ โ€ข October 06, 2021

First of all, let's briefly talk about what JSON API is, why it exists and what kind of problems does it solve ๐Ÿ˜Š A SPECIFICATION FOR BUILDING APIS IN JSON The quote above is taken straight away from its official website. As part of API development, we often have to come up with some sort of API structure for your companies to make it consistent across all projects. The followings are often takenโ€ฆ

Keep Reading โ†’

Clean Code UI Refactoring at Axon ๐ŸŽ‰ โ€ข October 04, 2021

At Axon, we provide a solution for defense departments around the world to view different kinds of evidence in the web namely audio, video, image, document, log. The latest exciting of supported file format is zip (compressed evidence). I have been part of UI code maintainer group at Axon's DEMS (Digital Evidence Management System), we are responsible for assuring high code quality review beforeโ€ฆ

Keep Reading โ†’

My collection of Algorithms and Data Structures ๐ŸŽ‰ โ€ข September 28, 2021

As of writing, I had worked in IT industry for approximately 5 years as a professional front-end engineer. I never found a need for these foundational things namely design patterns, data structures and algorithms (this post). Some of my good friends even told me that these are the things that differentiate developer from engineer. With all due respect, my friends defined developers as someone whoโ€ฆ

Keep Reading โ†’

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 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 crimesโ€ฆ

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 in learning by doing. Most of the resources out there will only show you tiny examples 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 a 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

Lately, 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 triggering updates in components that actually depend on changed state. At Axon, we have used Redux massively as our stateโ€ฆ

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 โ†’