Embrace the stacking workflow for better collaboration at scale 💥 • December 07, 2024
Traditionally, we have been using the branching workflow for our development process. It is a great way to manage our codebase and collaborate with our team. However, it has some limitations when it comes to scaling our development process. Imagine we have a team of 10 developers working on the same codebase, you will end up with a lot of issues such as: Merge conflicts Rebasing frequently to keep…
Keep Reading →
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 →