Author Archives: Vien Hua

The White Belt

As I started looking into the list of patterns, “The White Belt” hit the nail on my head as the problem illustrated in this pattern looks like what I’m currently facing, or have been facing against for a while I would say. I think the first time I found myself in a “wrong place” with programming was in a Hackathon back in spring 2021.

The situation was my teammates were all having Java background so we decided to create an Android Application using Android Studio so everyone can write code in Java. However, things began to feel strange as we started, Java here is not what we were familiar with actually, the coding concept is different as we have to understand what we need and find out the right documentation according to the problem, something that we were not supposed to do initially, but it’s impossible to change the project now as it might collapse team spirit. Therefore, I had to wear the “black belt” and learned the hard way to figure out how to implement features in a short period of time. The repository that we were working on that time if you want to check: OPCredit

This project damaged my thinking more than it improved my knowledge as I feared that my personal development has stalled because I can’t write Java while Java is my first programming language. According to the solution and action indicated in the book, I ameliorated the situation by learning basic JavaScript, I was impressed by how less complex the code is compared to Java while doing the same thing. Then, as I proceed to learn its frameworks, and from ES5 to ES6, in my view, this is one perfect instance where you shouldn’t suppose to already know what will be implemented, but to be neonate and accept the concept.

By the time this post is online, I was learning CI/CD and Docker, something that is not related to my first language as I will have to understand what is happening in the Command Line Interface to give the container the correct solution. This time, I will wear “The White Belt” even more carefully to not only learn what I have to learn but also to practice how to use this belt for future progression.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

Thea’s Pantry

While LibreFoodPantry, which I introduced from my last blog, serves the local Worcester as a whole, another similar project, Thea’s Pantry, is developed exclusively for the Worcester State University community. The user story in this project is written linearly instead of a map compared to LibreFoodPantry, it’s less specific but illustrating the general purpose. However, LibreFoodPantry didn’t indicate the architecture and technology used in the project, Thea’s Pantry instead demonstrated everything beforehand giving the readers a technical perspective about how this project is going to be implemented. Since the big task is broken up into smaller pieces, different teams of developers can work at the same time and each new completed project will become a feature of the final product. Furthermore, by using GitLab CI pipeline, it will be continuously delivered with a new semantic versioning. Overall, this project idea is to benefit both students and pantries at the same time by educating students to develop something practical for the people.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.


If you haven’t known yet, let me introduce this open-source software, LibreFoodPantry, from a group of professors from Worcester, Massachusetts. If you also weren’t familiar with the term open-source software, don’t let the term intimidate you, it is nothing but illustrating that the software is free to use and open for improvement. This project goal not only is a way to let students interact with practical problems but also helps local food pantries serve their guests.

Since this is an open-source repository, students can keep improving the software under its license, learn new materials and develop something that benefits the community. Currently, the project is still in the development phase by the time this blog is uploaded. Hopefully, by the end of this May, we can see its first launch to the community. 

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.


Front-end is the graphical user interface where users can interact with on their computers to communicate with the website’s database to view the information they need. To develop the front-end, developers use HTML, CSS, and JavaScript framework; and they also have to be aware of the constantly changing in the tools and techniques to create the front-end of a website.

HTML (HyperText Markup Language) is the most basic markup language (absolutely not a programming language), for documents designed to be displayed in a web browser. Learning HTML is the first step in front-end development. Come after HTML is CSS, stands for Cascading Style Sheet, and is used for formatting markup language, mostly for HTML. Finally, while HTML and CSS creates the structure of the website, JavaScript is what powers its interactivity. Furthermore, learning JavaScript is a never ending process since there are new frameworks coming every year. Let’s take a look at the popularity differences between these web frameworks, according to the Stack Overflow survey in 2019 and 2020 respectively:

We can see that jQuery is losing their numbers to React.js and Angular and React.js looks like they will get that first place this year, but the top three most popular frameworks are all JavaScript. Besides, as I said that there are new frameworks coming every year, it means that when a better framework shows up, front-end developers have to learn it in order not to be left behind. For now, in my opinion, React.js is what you should go for if you want to get a role in this field.

Besides the programming language skills, there are other tasks that front-end developers have to be aware of. From my experience, a method called fake API is really important. For instance, in the process of developing the graphical user interface, front-end developers have to test their work by calling the API from the back-end team to see how the data fit into their blocks. However, in case that back-end team falls behind or somehow is not able to provide the front-end team with the built API, fake API is one useful method to test the front-end. Another frustrating task that I’ve heard about is that the design has to be responsive which means that the website has to run properly on any device, from the smallest mobile device to the largest desktop.

In conclusion, above is what I know so far about the front-end. Also, I found outstanding guidance about the practice of front-end development from Frontend Masters including almost everything we’ll need regarding a front-end topic. Check it out if you want to learn something in the front-end.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.


A while ago, I introduced the concept of API in the information technology industry. In addition, there are 3 different types of Web Services APIs which are REST APIs, SOAP APIs, and RPC APIs. Among them, REST APIs is no doubt the most popular API currently. REST APIs, also known as RESTful APIs, stands for Representational State Transfer. It is based on four different HTTP commands which are GET, PUT, POST, and DELETE.

When a client request is made via a RESTful API, it transfers a representation of the state of the resource to the endpoint. Then the information is delivered in one of several formats via HTTP: JSON (Javascript Object Notation), HTML, XLT, Python, PHP, or plain text. JSON is the most generally popular due to its readability.

According to the RESTful API website, a service interface needs to apply these 6 guiding principles and constraints to be referred to as RESTful:

1. Uniform Interface

Multiple architectural constraints applying to the interface so that information is transferred in a standard form requiring:

Identification resources – resources requested are identifiable and unique from the representations sent to the client

Manipulation of resources through representations – clients can manipulate the resources via the representation

Self-descriptive messages – each resource representation should carry enough information that the client can manipulate.

Hypermedia as the engine of application state – after accessing a resource, the client should be able to use hyperlinks to find all other currently available actions.

2. Client – server

It is the architecture made up of clients, servers, and resources, with requests managed through HTTP.

3. Stateless

Statelessness means that no client information is stored between each request and that the server cannot take advantage of previously stored context information.

4. Cacheable

There are cacheable and non-cacheable responses. If the response is cacheable, the client can reuse the response data for later use.

5. Layered system

A layered system allows an architecture to be composed of hierarchical layers by constraining component behavior.

6. Code on demand (optional)

It is the ability to send executable code from the server to the client when requested, extending client functionality.

Although REST API has these criteria to conform to, it is still considered easier to use than SOAP (Simple Object Access Protocol). The reason is that while REST is a set of guidelines which is simple to implement and faster in response time, SOAP has specific requirements like XML messaging, and built-in security and transaction compliance that make it slower and heavier.

Overall, the point of this blog is to introduce you to REST API, REST is just a term indicating the constraints applying to the API. In order to understand the power of REST, I would suggest going to create one and see how simple and convenient it is.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

Docker Compose

In last week’s blog, I introduced the power of container technology, Docker. Besides the advantage of easy implementation, however, implementing a command again and again using a terminal is not a good idea long-term. Therefore, Docker Compose is a tool for defining and running multi-container Docker applications by implementing all the applications commands to a YAML file and having it executed when needed.

According to the Overview of Docker Compose, using Compose is a three-step process:

1.       Define your app’s environment with a Dockerfile so it can be reproduced anywhere.

2.       Define the services that make up your app in docker-compose.yml so they can be run together in an isolated environment.

3.       Run docker compose up and the Docker compose command starts and runs your entire app. You can alternatively run docker-compose up using the docker-compose binary.

Dockerfile is another concept, while in this blog I will introduce how to manipulate Docker compose. Let’s take this command as an example when we want to create a nginx server

docker run -d --rm \

--name nginx-server \

-p 8080:80 \

-v /some/content:/usr/share/nginx/html:ro \


This command serves the purpose of mounting an html file to the nginx server running at port 8080 locally where nginx-server is the name of the container, -p 8080:80 is mapping the local port at first parameter and the default container port at the second parameter, separated by a colon and -v /some/content:/usr/share/nginx/html:ro will mount that 8080 port with the html file at the pointed directory. Translating this command into Docker compose:

version: “3.9”



               image: nginx


                                - 8080:8080


                                - /some/content:/usr/share/nginx/html:ro

Version is the version of Docker compose we want to use, all the necessary commands will be integrated and placed under the services section. Name of the container is placed at first then all of its entities are written after a colon and one indentation in the next line. Image tag is the application we want to create, ports is equivalent to -p to map the port, and volume is the same as -v used for mounting. Under this format, we can implement as many images as we want at once and just rerun it with the command docker-compose up in the directory containing that docker-compose.yml file.

version: “3.9”



               image: nginx


                                - 8080:8080


                                - /some/content:/usr/share/nginx/html:ro


                                image: redis


Overall, the convenience of Docker is taken to a higher level thanks to the compose concept. Also, this video is another source that I watched to understand more about docker-compose. Therefore, I suggest using the main Docker Compose page from their site and this video as a reference if you might need it in the future.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.


Docker is an open-source software that is used to deliver Linux and Windows images into virtual containers. According to this article, containers use shared operating systems, meaning that they are much more efficient than hypervisors in system resources terms. Instead of virtualizing hardware, containers rest on top of a single Linux instance. This means that 99.9 percent of useless VM junk is left behind, so we can have a small container containing necessary applications.

Specifically, container technology just abstracts the operating system kernel while the VMs hypervisor abstracts an entire device. Meaning that containers allow data center operators to cram much more workloads into less hardware. Furthermore, containers are portable, each instance is stored standalone in a port. It means that Docker allows you to run multiple copies of the same image in different local ports.

Another reason why Docker is so popular is its installation, downloading a whole application, for example, a database service, is usually frustrating since we have to follow strictly step by step, and if we mess up somewhere, the application will not function properly and we have to fix or reinstall the whole app. Docker is encapsulating the whole application into a container, to install a container to use locally, developers simply pull it from Docker Hub, which I will introduce below, with a command and run it.

Docker Hub is the largest library and community for container images, where users are able to find what image, container, command they need and share what they have to others. Just like GitHub, you will create an account and use it to fetch and push the source code or pull it from other people, but the repositories here are containers, image repositories. For instance, you need to set up the MySQL database for your application, instead of downloading and setting up the port for one database, you will look for it on Docker Hub and install it based on the repositories’ instructions and connect it to your computer port through a port. By the time this blog is posted, there are almost eight and a half million available images on Docker Hub for users to pull and work with.

In conclusion, Docker has revolutionized software development by making things possible. It gets more applications running on the same hardware; it is quick and simple to initiate an instance, therefore it makes managing and deploying applications much easier.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

Website Architecture

“If your business is not on the internet, then your business will be out of business.” — Bill Gates. In this Industry 4.0 era, this stated is still reasonable for most case. In order to grow and to maintain the business, one major point is to gain more attention through the Internet. Out of any methods, owning a business’s website is a must as a face of the company on the social networking environment.

Therefore, it’s important to understand the structure of a website as a developer and this blog here from HubSpot explaining what website architecture is and providing 8 methods to improve it. From the introduction, I’ve already learned some new information that nearly one in two people leave a website after visiting just one page, a poor site architecture guaranteeing a goodbye from users downgrading the business value.

So basically, a website architecture is the hierarchical structure of website pages, the structure is reflected through internal linking. A typical website structure looks like a rooted tree graph, in which the home page is the root. Subpages from Homepage are branches, and from there, additional pages are developed. Website structure is important as it strengthens the UX (user experience) and SEO (search engine optimization), meaning that if users spend more time on your web, your search ranking will level up as well.

Down here is the list of eight methods that they pointed out to improve the web architecture:

  1. Create a simple top-level navigation menu: Every item should deliver the content according to it
  2. Keep your URLs simple and user-friendly: For example,
  3. Model your website architecture after the top players in your industry
  4. Keep your website consistent
  5. Implement the pillar-cluster internal linking model: Child pages are linked to each other
  6. Provide access to most of your website’s pages in 3-4 clicks
  7. Use breadcrumbs: A button that allow users to always be able to go back to your homepage
  8. Create an HTML and XML sitemap: A document that lists out all of crawlable pages on your web

The idea is telling the developers to keep everything simple and users are able to navigate anywhere they want in a convenient way. To illustrate, we all know that Amazon is the biggest ecommerce platform with an outstanding graphical user interface that allow users to look for what they want. In this circumstance, Amazon is the pioneer that affect almost every other site to build somewhat familiar, as well as the web architecture.

To sum up, with the duration of 6 minutes, this blog demonstrated the basic concept of website architecture. Since we will later learn about web architecture, it’s a good read in term of preparation.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

But what really is API?

API, absolutely not the IPA’s beers (unless there really is the API beer) that Petr Gazarov, a software developer with more than 3600 followers on medium, mentioned in his blog, is an acronym of Application Programming Interface. Hmm, you might have heard about it but what it really is?

When we type the URL, for example,, we send the request to Facebook’s remote server, which is a remotely located computer, and that computer, which is a server, processes the request through an API to display the webpage. From that instance, Gazarov defined that “An API isn’t the same as the remote server–rather it is the part of the server that receives, requires and sends responses.”

One example is the Object–Oriented Design, code is organized into objects, which will later be used to interact with one another. From my own experience, the first time I was aware of using the API was in the Data Structure class, the Oracle API provides specifications for the JVM Platform, Standard Edition, and the instructions on how to use those methods are documented. I was working with Stack in Java and I want to look at the object at the top of this stack without removing it, I will use peek() instead of pop() as instructed from the API documentation to request relevant operations. The Stack is the object designed by Oracle and the peek() function is a public method in that object, and a set of public methods and properties is an API. Web Server API is similar, the idea is to receive requests and responses.

The difference is the format of the request and response, in my case, it was simply just a function with a small operation, in other cases, different APIs provide flexible responses with tons of uses. One thing I learned from his blog is that to render the whole web page, the browser expects a response in HTML containing presentational code, Google Calendar’s API call would return the JSON formatted data.

Another experience that I’ve got when I was working with my friend in a web project is creating the backend of this project, which is developing the GET, POST, PUT, DELETE functions to respond to his request for his frontend application. The role of this API is to return the data, formatted in JSON, which is stored in Firebase database to the person working in the frontend in order to design the graphical user interface.

In short, Gazarov concluded” any piece of software that can be distinctly separated from its environment, can be an “A” in API, and will probably also have some sort of API”. Since this blog consolidates my understanding about API, I hope you will also find it useful.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.


Hello there,

My name is Vien Hua and I am a Senior at Worcester State University majoring in Computer Science and minoring in Mathematics. I’m looking forward to seeing you soon in class after one year of working remotely.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.