In this article, I share a website app that I built to empower people to plan for their future. I believe that knowledge & planning is the key confidence. The app makes it easy to add incomes, expenses, and goals, then see how they impact your future through a graph, as well as how you can change them.

Financial Planning App — Incomes, Expenses, Goals, and Projected Savings Graph

Fear is only a matter of uncertainty. …


In this article, I discuss insightful tactics and strategies that I have learned to be confident in my implementations and save valuable time when programming. Through these, I am confident that the software I built works as expected, and if asked, I would be able to answer any question about the software’s behaviour.

I hope that if you take these into consideration, you too, will be able to code with confidence, have more time on your hands, and experience clarity in programming.

Credit to seventyfour — freepik.com

The Source of Problems

From my experience building modules, fixes, and whole services ranging from startup to enterprise software, I have learned…


In this article, I provide a quick and easy-to-use method to estimate AWS costs for your app. The article comes with a FREE spreadsheet template that will help you make the estimations with minimal effort.

Business photo created by snowing — www.freepik.com

The estimates you can do with the following are very rough estimates, different users will use your app differently, so do note that your actual expenses may vary accordingly.

Estimating the cost of using AWS is important to planning any application, as it helps you estimate how much you would have to charge users at a minimum later on.

The AWS price constants in the…


In this article, I will show you a step-by-step guide on how you can quickly and cheaply launch your website using AWS & Namecheap. In the examples, I will be using a ReactJS project, but the website could be built using any framework.

Abstract vector created by vectorjuice — www.freepik.com

Static Web Page

If you are building a static web page, and have no intention of extending its functionality, you will be better off using a simpler hosting solution such as GitHub Pages. In there, you can drop your static build into the repository and it would be accessible.

Complex Websites

If you are building anything more complex than a static web…


In this article, I discuss how the Object-Oriented Memento Design Pattern can be implemented in ReactJS. The base code could be downloaded at the end of the article, but I highly recommend reading the article first to understand how to use it!

Memento Design Pattern Component Diagram

Memento Design Pattern

Firstly, it’s important to understand what the Memento Design Pattern is for and how it can help you in making bullet-proof code. This means that a small investment in upfront complexity will pay off as code you don’t have to touch again down the road.

The Memento Design Pattern abstracts the interface for storing the state of objects…


In this article, I write about a best practice naming strategy for functions that I find amazing to work with. It encapsulates responsibilities among different kinds of functions and sets guidelines that will save you a lot of debugging time down the road.

The naming strategy is suitable for any programming language, but I will focus on JavaScript (using ReactJS) and use the example of function implementations in Readily, a reading enhancement Chrome Extension for dyslexic readers.

Following this, the criteria for the best naming convention would be:

  • Shortest names possible
  • Easy to understand
Readily Logo

In This Article

I will discuss important benefits and drawbacks of using WEBP for your website and best practices on how to make the most of WEBP to optimize your website speed and increase your PageSpeed / GTMetrix scores. I have found the drawbacks from using WEBP myself, thus I will share with you specific examples on how to avoid them in your website.

Website vector created by stories — www.freepik.com

What is WEBP

WEBP is a compact image format developed by Google for Google Chrome browsers. Its unique compression system allows it to display images at about two-thirds of the original size. This sounds great, but there are some important drawbacks!

Why It’s Important to Consider Browser Compatibility

Consider…


I write about my experience and key insights in designing, developing, and implementing software for multiple industries.

I am an award-winning dual-degree graduate from HKUST (class of 2020) with:

  • (Top 1%) Academic Achievement Medal, First Class Honors
  • HKD 80,000/a HKSAR Government Scholarship
  • Bachelors of Engineering in Computer Science
  • Bachelors of Business Administration in General Business Management

I have since made many projects and have found a whole lot of insights from working and from my own reading. See my other articles for more information!

More about me at: https://justinsj.com

Justin San Juan

Award-Winning Software Engineer | Business and Web Consultant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store