in Software Development
for 20 Years
in Software Development for 20 Years
COST-EFFECTIVE
Maximize ROI with our cost-effective, high-quality outsourcing software development solutions.
TECH-SKILLS
Proficient in cutting-edge technologies, crafting tailored software solutions to match your business requirements.
EXPERIENCE
Leverage our two decades of experience in software outsourcing for proven, results-oriented development methodologies.
EXPERTISE
As an award-winning offshore software development company, our team is diverse and well versed in a variety of expertise in software development outsourcing. We are up-to-date with the cutting- edge technologies and best software development practices.
FINTECH
Develop a wide range of applications in financial industries.
business
Provide inclusive services from system development to maintenance.
medical
Have notable experience in developing applications in medical field..
website
Many achievement in application development, system by CMS and built website campaign combined with SNS.
mobile
Develop mobile applications with beautiful UI on several platforms.
middleware &
embedded
Middleware development basing on Android, and embedded software development and porting.
protocol &
communication
Develop protocol stack such as WiMAX and WiFi. Control software development of Mobile Phone Base Station.
CLOUD
INFRASTRUCTURE
Robust, scalable, and secure architectures that leverage cutting-edge technologies for optimal performance and efficiency.
FEATURED CONTENT

Using SVC classifier of Scikit-learn library for image classification
Support Vector Classifier (SVC) is part of the Support Vector Machines (SVM) family, which are supervised learning models used for classification and regression analysis.

INTRODUCTION TO JSON VALIDATOR WITH JSON SCHEMA
Validating data is an important process. It helps to ensure that applications operate smoothly. One powerful tool for this purpose is the JSON Schema Validator.
In this post, I will introduce you to the fundamentals of using JSON Schema to validate your data, helping you ensure your JSON data structure follows the specified requirements.
What is JSON Schema?
JSON Schema is a declarative language for defining structure and constraints for JSON data.
JSON Schema will also be considered as a design document for input data as it is declared to define the rules, structure and constraints for input data.
What is JSON Schema Validator?
JSON Schema Validators are tools that implement the JSON Schema specification.
JSON schema validator help to check whether the input JSON data complies with the rules and structure defined in the created JSON Schema.
Try it out!
Step 1: Create a JSON Schema
To understand how to define a JSON schema, refer to the link bellow
https://json-schema.org/understanding-json-schema/reference
In this post, I will create a simple JSON Schema for employee information as bellow
Step 2: Prepare JSON Data
Prepare your JSON Instance with valid data (valid_data.json)
Step 3: Install Ajv JSON schema validator
Ajv is used by a large number of JavaScript applications and libraries in all JavaScript environments - Node.js, browser, Electron apps, WeChat mini-apps etc. It allows implementing complex data validation logic via declarative schemas for your JSON data, without writing code.
Install AJV JSON schema validator using npm
Step 4: Validate JSON Data with Javascript
Now, try it with JavaScript (validate.js)
Directory structure
Execute the javascript source code to validate the valid_data.json
Validation Result is valid data with valid_data.json
Now, I try to create an invalid_data.json with invalid data
Load it with javascript
Directory structure
Execute validate.js file
Validation Result is invalid data with invalid_data.json
To check error details, use the website https://www.jsonschemavalidator.net/
When to use a JSON Schema validator?
If you need to validate JSON data in your application, JSON Schema provides a standardized way to check the structure and content of the data. This is especially useful for ensuring data integrity and consistency.
Conclusion
By defining clear rules and constraints, JSON Schema not only minimizes errors but also enhances reliability and consistency in your applications.
JSON Schema validator helps you ensure that JSON data is structured and validated correctly.
Take the time to research and implement JSON Schema validator in your projects. You'll find that managing and validating data becomes easier and more efficient than ever before.
References
https://json-schema.org/overview/what-is-jsonschema
https://ajv.js.org
https://www.jsonschemavalidator.net
https://json-schema.org/understanding-json-schema/reference
https://json-schema.org/img/json_schema.svg
https://hailbytes.com/wp-content/uploads/2022/02/JSON_SchemaTitle_Image.png
Easily improve performance when rendering a list of large data in Angular
As we know, Angular is one of the most popular Frontend frameworks/libraries along with ReactJS and VueJS.
There are currently many projects developing based on Angular, including those at IVC.
Therefore, the Angular user community is very large, which is very helpful in solving problems encountered when developing with Angular.
You will always receive many useful answers from others in the community.
During the process of working with Angular, I also encountered some problems related to performance.
So, in this post, I want to share with you a problem that we often do not consider when working with Angular, which is rendering a list of large data but still ensuring the response time of the website.
1. What is Angular?
Angular is an open-source frontend JavaScript framework developed by Google and commonly used for building large-scale enterprise applications.
Based on TypeScript but also supports JavaScript.
To understand more about Angular, you can refer here: https://v16.angular.io/docs
2. Rendering a list of large data in Angular
To render a list in Angular, we can use the *ngFor directive. The *ngFor is Angular's repeater directive. It repeats the host element for each element in a list.
That's the easiest way to render a list in Angular. However, this method is only really useful in cases where you need to render a list of data that is not too large.
If you have a list of data that is too large, ensuring the response time of the website must be a top priority.
At this time, if you still use the above rendering method, it will take a lot of time to process and render to the UI, which is not good for the user experience.
So, how to render in case the data is too large?
3. Solution
To render a list of large data, we have many ways in Angular, such as implementing paging, lazy-loading...
However, in this post, we just focus on the lazy-loading solution.
Lazy-loading, simply put, is a solution to split data to render many times until the last element in the list is rendered.
If you have a list of data with a length of 10,000 elements.
You can split it and render 50 elements per time.
At this time, the website only needs the amount of resources to render 50 elements instead of 10,000 elements.
This will greatly improve the response time of the website.
4. Implementation
Firstly, we need to specify a custom TrackByFunction to compute the identity of items in an iterable.
If a custom TrackByFunction is not provided, the *ngFor directive will use the item's object identity as the key.
This means that when you push more data to the original data list, it will re-render almost all the data in the data list even though there are many similar elements.
Therefore, we need to customize a TrackByFunction to compute the identity of items in an iterable.
This means that when the server needs to render more data from the original list, it only needs to render the newly added elements. This helps reduce the resource load as well as the response time of the website.
A TrackByFunction usually looks like this:
Apply it to the *ngFor directive:
Next, split the data from the original list, and push a part of the data to the rendering list (state variable).
Each time the renderListLazy() method is called, it will push new elements to the original list, 50 elements at a time.
Your task is to choose when to call the renderListLazy() method again, such as when the user scrolls to the end of the displayed data list, or when the user clicks a trigger button.
5. Experimental results
Here are the experimental results when I compared the basic rendering method and the lazy rendering method, let's observe.
With the normal rendering method, when I rendered a list of 100,000 elements.
It takes ~7.5 s, it's very poor.
With the lazy rendering method, when I also rendered a list of 100,000 elements.
With lazy rendering, it takes ~9.75 ms, it's so fast.
Through the above test, we have seen the superiority of lazy-loading, with data of 100,000 elements, lazy-loading is ~780 times faster than normal-loading.
Moreover, the performance will be more different when the number of elements of the list increases.
6. Conclusion
Through this post, I have introduced a simple technique for optimizing rendering large data lists in Angular.
Hope it is useful for you and will be applied to future projects.
Thank you for reading!
[Reference Source]
https://v16.angular.io/docs
https://angular.dev/api/core/TrackByFunction?tab=description
https://www.pexels.com/photo/hand-holding-shield-shaped-red-sticker-11035543/ (image)

Creating a magical effect for your website with Three.js: Transforming tiny circles into a beautiful image
Three.js is a flexible JavaScript library that makes using WebGL easier and more intuitive. It lets developers create detailed 3D graphics for the web without having to deal with the complex details and low-level API of WebGL. Three.js has a variety of features, such as tools for controlling 3D objects, materials, lighting, cameras, and animations. It is created with user-friendly APIs, comprehensive documentation, and a big user base, making it not just simple for beginners to learn and use but also powerful enough for advanced projects. Three.js is a good option for creating eye-catching visual effects, interactive 3D experiences, or just simple animations.
In this blog post, I will share my approach to creating a magical effect where tiny circles (particles) rearrange themselves to form a PNG image.
