ISB VIETNAM CO.,LTD.

TECH

April 23, 2026

Introduction to Google Apps Script: Build Simple Automation with JavaScript

Google Apps Script (GAS) can transform your work. It helps you replace traditional Excel-based workflows by turning Google Sheets into a powerful task management system.

Currently, many teams struggle with task management. Often, tasks get assigned but no one knows who is doing what. Consequently, reports take hours to compile. Moreover, repetitive follow-ups drain your time and lead to human error.

What if you could turn Google Sheets into a real task management system? You can do this without building a complex backend.

This is exactly where this serverless platform becomes a game changer. So, let’s explore how it works in a real business case.

TECH

April 23, 2026

Microsoft 365 Login with ExpressJS

Identity is one of the most important security layers of modern systems. Modern apps must connect to numerous services, making a centralized and stable login system essential.

In this context, Microsoft 365 login is a logical choice for enterprise systems. Azure provides a standardized identity platform, eliminating the need to build authentication mechanisms from scratch.

Overall

At the high level, ExpressJS only acts as the client. Azure AD is the main entity, acting as the identity provider. The browser only handles redirects, while all sensitive processing, such as exchanging code for tokens, takes place in the backend.

The basic flow would be:

User → ExpressJS → Microsoft login → ExpressJS callback → session creation

Most importantly, the token never appears on the frontend. This is extremely important from a security perspective.

Setting up Azure AD

First, create a new application in Azure Active Directory via the Azure Portal.

Then create a Client Secret. Simply put, this is the "password" for the backend.

Finally, we will have three values; these three are the backbone of the entire login process:

Client ID – app identifier
Tenant ID – organization identifier
Client Secret – backend authentication

MSAL node configuration

Microsoft provides @azure/msal-node so developers don't have to manually code OAuth2. MSAL handles the headaches of code generation, token changes, token caching, and token refresh.

Installation:

npm install express @azure/msal-node express-session dotenv

Basic configuration:

// msalConfig.js

require("dotenv").config();

module.exports = {

auth: {

clientId: process.env.CLIENT_ID,

authority: "https://login.microsoftonline.com/" + process.env.TENANT_ID,

clientSecret: process.env.CLIENT_SECRET

}};

The Authority URL simply tells MSAL which tenant we are authenticating with.

After defining the config, we will create the other file to initialize the instance to use in the project

// msalClient.js

const { ConfidentialClientApplication } = require("@azure/msal-node");
const msalConfig = require("../config/msalConfig");

const cca = new ConfidentialClientApplication(msalConfig);

module.exports = cca;

Scope: Request only what we need

Scope refers to access permissions. It determines what the app can do on behalf of the user.

Here are some common scopes:

user.read – read basic profiles
mail.read – read email
files.read – read OneDrive files

The first time a user logs in, they will see a consent screen. This is very good, as it helps them know what permissions the app is requesting.

Actual login flow

Here, we use the OAuth2 authorization code flow – almost the default standard for backends.

The token is not exposed to the frontend. There is a refresh token widely accepted by enterprises

Route /login

const cca = require("./services/msalClient");

app.get("/login", async (req, res) => {

const url = await cca.getAuthCodeUrl({

scopes: ["user.read"],

redirectUri: "http://localhost:3000/redirect"

});

res.redirect(url);

});

This route only serves to redirect the user to the Microsoft login page.

Note: The redirectUri in the code must match the Redirect URI declared in Azure AD.
If they don't match, the login will fail.

Route /redirect

const cca = require("./services/msalClient");

app.get("/redirect", async (req, res) => {

const tokenResponse = await cca.acquireTokenByCode({

code: req.query.code,

scopes: ["user.read"],

redirectUri: "http://localhost:3000/redirect"

});

req.session.user = tokenResponse.account;

req.session.accessToken = tokenResponse.accessToken;

res.redirect("/dashboard");

});

This is the main processing point: the backend exchanges the code for a token and then saves the session.

Sessions and Middleware

After establishing the session, protecting the route with middleware is all we need to do.

function requireAuth(req, res, next) {

if (!req.session.user) {

return res.redirect("/login");

}

next();

}

Conclusion

Microsoft 365 login is becoming the standard for modern enterprise systems. Instead of managing users, passwords, and complex security rules ourselves, we can directly use Azure Active Directory as a trusted identity provider.

In practice, this offers better security, less maintenance, and a login system that can scale across the organization without significant changes.

Whether you need scalable software solutions, expert IT outsourcing, or a long-term development partner, ISB Vietnam is here to deliver. Let’s build something great together—reach out to us today. Or click here to explore more ISB Vietnam's case studies.

[References]

TECH

April 23, 2026

Mastering Burp Suite: Are you really getting the most out of it for your web security testing?

In the world of software testing, if automation tools ensure that a system works, then Burp Suite ensures that the system cannot be broken. As we move further into the era of complex architectures like UI-BFF-API, simply checking features is no longer enough. To truly level up your career, you must master the gold standard of security testing: Burp Suite.

But what makes this tool so indispensable? Let’s dive into its most effective applications.

The Core Power: Intercepting Proxy

The most effective and fundamental application of Burp Suite is its Intercepting Proxy.

How it works: Burp Suite sits between your browser and the server. When you click Submit, Burp catches the request. This allows you to pause, inspect, and modify the data before it ever reaches the server. Why is this a "Game Changer" for Testers?

Bypassing Front-end Validation: You can bypass UI restrictions (like disabled buttons or character limits) to see if the Server-side is truly secure.
Parameter Tampering: Have you ever wondered what happens if you change a product price from $1,000 to $1 during checkout? With the Proxy, you can test this in seconds.
Broken Access Control: In a multi-site system (Candidate, Parent, Admin), you can swap authorization tokens to see if a Parent can sneak into the Admin panel.

Top 3 Features to Supercharge Your Testing

Beyond intercepting traffic, Burp Suite offers specialized modules that act like superpowers for a QC:

Repeater: Unlimited Experimentation

Instead of re-loading the web page and re-filling forms, Repeater allows you to send the same request over and over with different modifications. It’s the fastest way to pinpoint logic flaws and edge cases.

Intruder: Automated Attacks

Need to test 1,000 different password combinations? Or check for IDOR (Insecure Direct Object Reference) by cycling through 500 different User IDs? Intruder automates these repetitive tasks, saving you hours of manual work.

Scanner (Pro Version): Automated Vulnerability Detection

For busy QCs, the Scanner automatically crawls the application to find common vulnerabilities like SQL Injection, XSS, and Security Misconfigurations while you focus on more complex testing scenarios.

Applying Burp Suite to the UI-BFF-API Model

In your daily work with the UI-BFF-API architecture, Burp Suite becomes a surgical tool:

Testing the BFF Layer: Ensure that the Backend-for-Frontend is properly filtering sensitive data before sending it to the UI.
Role-Based Testing: With four distinct sites (Candidate, Parent, University Admin, System Admin), Burp makes it easy to manage multiple sessions and ensure that users stay within their permitted boundaries.

Tips for Junior QCs Starting with Burp Suite

Don’t let the complex interface intimidate you. Here is how to start:

Learn Proxy Configuration first: This is your gateway to understanding how the web talks.
Monitor the HTTP History: Simply observing the flow of requests and responses will teach you more about web architecture than any textbook.
Ethics First: Always use Burp Suite in a staging/UAT environment. Never use it on a production system without explicit permission.

Would you like me to create a Quick Start Guide for configuring Burp Suite with your UI-BFF-API application?

To test an architecture consisting of an Exam Candidate, Parent, and Admin sites, you need to see exactly how the UI talks to the BFF (Backend-for-Frontend).

Step 1: The Basic Connection (The Proxy)

Launch Burp Suite: Open the application and select Temporary Project.
Use the Built-in Browser: Go to the Proxy tab > Interceptor sub-tab > Click Open Browser.
- Why? This is much easier than configuring Firefox or Chrome manually, as Burp handles the SSL certificates for you automatically.
Turn Intercept off: For now, keep it off so you can browse the sites freely while Burp records the history in the background.

Step 2: Organize Your Scope (Crucial for 4 Sites)

Since you are working with four different sites, your history will get messy quickly.

Go to the Target tab > Scope sub-tab.
Add the URLs of all four sites (e.g., https://candidate.example.com, https://admin.example.com).
Go to the Proxy tab > HTTP History.
Click the Filter bar at the top and check Show only in-scope items.
- Result: You will now only see traffic related to your project, hiding background noise like Windows updates or Google analytics.

Step 3: Mapping the UI-BFF-API Flow

Open your Candidate Site in the Burp Browser and perform a Login.
Look at the HTTP History. You will see a request going from the UI to the BFF.
The Secret Sauce: Right-click that Login request and select Send to Repeater.
In Repeater, you can now manually change the username or password and hit Send to see how the BFF responds without re-typing anything in the browser.

Step 4: Testing Roles (The Parent vs. Admin Test)

This is the most effective test for your specific architecture:

Log in as a Parent in the browser.
Find a request in the history that fetches Parent Data from the BFF. Look for the Authorization: Bearer <TOKEN>
Now, try to access an Admin API URL by pasting it into the Repeater.
If the BFF returns 200 OK instead of 403 Forbidden, you've found a Critical Security Bug!

Finally, if AI is the assistant that helps you write test cases faster, Burp Suite is the microscope that helps you find the invisible bugs that could destroy a company’s reputation. By mastering Burp Suite, you transition from a standard Tester to a Security-Aware Quality Engineer.

TECH

April 23, 2026

When Should You Use ADO.NET vs Entity Framework?

When developing applications with the .NET platform, developers often face a common question: Should we use ADO.NET or Entity Framework for database access? Both technologies are widely used in the .NET ecosystem and each has its own strengths. Choosing the right one can significantly impact performance, maintainability, and development speed. In this article, we’ll explore the differences and discuss when you should use ADO.NET and when Entity Framework is the better choice.

Understanding ADO.NET

ADO.NET is the traditional data access technology used in .NET applications. It provides low-level access to databases and requires developers to write SQL queries manually.

Typical components include:

SqlConnection
SqlCommand
SqlDataReader
DataTable

With ADO.NET, developers have full control over how queries are executed and how data is retrieved.

Advantages of ADO.NET

✅ High performance
✅ Full control over SQL queries
✅ Suitable for complex database operations

Disadvantages

❌ More boilerplate code
❌ Manual mapping between database tables and objects
❌ Harder to maintain in large applications

Understanding Entity Framework

Entity Framework (EF) is an Object-Relational Mapper (ORM) developed by Microsoft.

Instead of writing SQL queries, developers interact with the database using C# objects and LINQ queries.

Example:

var users = context.Persons.Where(u => u.Age > 18).ToList();

Entity Framework automatically converts this into SQL and executes it against the database.

Advantages of Entity Framework

✅ Faster development
✅ Cleaner and more readable code
✅ Automatic object-relational mapping
✅ Strong integration with LINQ

Disadvantages

❌ Potential performance overhead
❌ Less control over generated SQL
❌ Not always optimal for complex queries

When Should You Use ADO.NET?

1. When Performance Is Critical

If your application processes large volumes of data or requires extremely optimized queries, ADO.NET is often the better choice. Examples:

Financial systems
High-traffic enterprise applications
High-traffic enterprise applications
Batch processing systems

Because SQL is written manually, developers can optimize queries precisely.

2. When Working with Complex Queries or Stored Procedures

Some database operations involve:

Advanced joins
Complex stored procedures
Custom indexing strategies

ADO.NET allows developers to execute and optimize these queries directly.

3. When Maintaining Legacy Systems

Many older .NET applications were built using ADO.NET.

If you are maintaining or extending an existing system, continuing to use ADO.NET may be more practical than refactoring everything to an ORM.

When Should You Use Entity Framework?

1. When Rapid Development Is Important

Entity Framework significantly reduces the amount of code needed for common operations.

It is ideal for:

Web APIs
Internal business applications
Startup or MVP projects

Developers can focus on business logic rather than SQL queries.

2. When Your Application Has a Strong Domain Model

If your application contains many business entities like:

Users
Orders
Products
Invoices

Entity Framework helps map these entities directly to database tables, making the architecture more intuitive.

3. When Maintainability Is a Priority

Entity Framework improves:

Code readability
Maintainability
Developer onboarding

New developers can understand the system faster because the code closely reflects the domain model rather than raw SQL.

Best Practice: Use Both

In many modern projects, teams combine both approaches.

A common strategy is:

Entity Framework → for standard CRUD operations
ADO.NET or raw SQL → for performance-critical queries

This hybrid approach balances development productivity and performance optimization.

Conclusion

There is no one-size-fits-all solution.

Use ADO.NET when performance and SQL control are critical.
Use Entity Framework when you want faster development and easier maintenance.

Understanding when to use each technology will help you design scalable, efficient, and maintainable .NET applications.

TECH

April 23, 2026

Implementing Access Tokens and Refresh Tokens "The Right Way"

Implementing Access Tokens and Refresh Tokens is the gold standard in modern authentication (especially with JWT - JSON Web Tokens). The goal is to balance security and user experience.

Below is a detailed guide on how to use these two token types "correctly" and most securely.

1. Why do we need 2 types of tokens?

Why not use a single token with a permanent expiration? Because if a hacker obtains that token, they gain access forever. We split them into two to minimize risk:

Feature	Access Token (AT)	Refresh Token (RT)
Purpose	Access resources (API)	Request a new Access Token
Lifespan	Very short (15 minutes - 1 hour)	Long (7 days - 30 days)
Storage Type	Stateless (usually JWT)	Stateful (stored in DB/Redis for control)
Risk	If lost, the hacker can only use it for a short time	If lost, consequences are more serious (but it can be revoked)

2. Standard Workflow (The Flow)

Here is the standard lifecycle of this authentication mechanism:

1.Login: User sends User/Pass. Server authenticates and returns an AT and RT pair.

2.Storage: Client stores AT and RT in a secure place (see section 3).

3.Send Request: Client sends a request with AT in the Header (Authorization: Bearer <token>).

4.Expired:

- Server checks AT. If expired -> Returns 401 Unauthorized error.

- Client receives 401 error -> Automatically sends a /refresh-token request with RT to the Server.

5.Renewal:

* Server checks RT (is it valid? is it blacklisted?).

* If valid -> Server returns a new AT (and usually a new RT - see Token Rotation section).

6.Retry: Client uses the new AT to retry the original request without the user realizing it happened.

3. Storage "Best Practices"

This is the most important part to avoid security vulnerabilities (XSS and CSRF).

A. For Web Applications (SPA - React, Vue, Angular)

The common way is to save to `localStorage`, but the safest way is:

Access Token: Store in JavaScript local variable (in-memory).

Pros: XSS attackers cannot read the token (because it is not in storage).

Cons: Token is lost when the page is refreshed (F5) (solved by silently calling a refresh token API immediately upon page load).

Refresh Token: Store in HttpOnly Cookie.

Cookie configuration: HttpOnly (JS cannot read), Secure (sent only over HTTPS), SameSite=Strict.

Pros:* Completely immune to XSS. Hackers cannot copy this token.

B. For Mobile Apps (iOS/Android)

Store both in the operating system's secure storage.

iOS: Keychain.

Android: EncryptedSharedPreferences / Keystore.

4. Token Rotation Mechanism

To enhance security, you should not use the same Refresh Token forever. Use the Refresh Token Rotation technique:

1. Every time the Client uses Old_RT to request a new token.

2. The Server will return New_AT and New_RT.

3. The Server marks Old_RT as used (or deletes it) in the Database.

4.Theft Detection: If a hacker steals Old_RT and tries to use it to refresh -> The Server sees that Old_RT has already been used -> The Server immediately revokes all RTs related to that user, forcing the user to log in again.

Conclusion

1. Access Token short, Refresh Token long.

2. Web: Prioritize HttpOnly Cookie for Refresh Token, In-memory for Access Token.

3. Mobile: Use Keychain/Keystore.

4. Backend: Always validate Refresh Token in the database (to allow revocation/revoke when needed).

5. Rotation: Change to a new Refresh Token after every use.

[References]

https://auth0.com/docs/secure/tokens/refresh-tokens/refresh-token-rotation

TECH

March 9, 2026

Data Masking Guide: How to Protect Sensitive Data Before Using AI

In the era of ChatGPT, Gemini, and Claude, copying and pasting data to solve problems has become a habit. However, behind this convenience is a huge security risk. Data Masking is no longer just an option; it is a vital skill to protect your career and your company’s reputation.

1. The Temptation and the "AI Trap"

Many employees copy-paste error logs or customer emails into AI to get fast results. The danger is that AI learns from this data and might accidentally reveal it to other users later.

According to security experts, the Samsung data leak (where engineers pasted secret code into ChatGPT) is a big lesson. At ISB Vietnam, we believe Data Masking is a mandatory skill before you hit "Enter" on any AI tool.

2. What is Data Masking?

Data Masking is the process of hiding sensitive data by changing original letters and numbers.

The goal is to create a "fake" version of the data that keeps the same structure. This way, the AI can still understand the logic and fix the error, but it won't know the real identity of the person or the business.

3. The "Danger Zone": 6 Types of Data You Must Never Paste

Before talking to AI, check this list and mask these items:

No.	Data Type	What’s Included (Examples)
1	Personally Identifiable Info (PII)	Full names, addresses, phone numbers, ID/Passport numbers, personal emails.
2	Financial & Banking Data	Credit card numbers, bank accounts, transaction history, payment credentials.
3	Trade Secrets & Business Info	Proprietary algorithms, strategic plans, upcoming product specifications.
4	Biometric Data	Fingerprints, facial recognition, retina scans, voiceprints.
5	Medical & Health Records	Patient histories, prescriptions, diagnostic details, health insurance info.
6	Private Ideas & IP	Unpublished research, confidential brainstorming, creative intellectual property.

4. Practical Data Masking Techniques

A. Popular Data Masking Techniques

Method	How it works	Best used for
Substitution	Replaces real data with similar but fake values (e.g., replace a real name with a name from a random list).	Names, Credit card numbers.
Randomization	Replaces sensitive data with totally random values that have no connection to the original.	Addresses, PII.
Shuffling	Mixes the values within the same column. The data is real, but it now belongs to the wrong records.	Maintaining statistical relationships.
Encryption	Uses algorithms to turn data into an unreadable format. Only people with a "key" can read it.	High-level security (but can slow down analysis).
Hashing	Converts data into a fixed-length string of random characters. It cannot be reversed.	Passwords or data verification.
Tokenization	Replaces data with a "token" (reference value). The real data is stored in a separate, secure vault.	Sensitive production data & Compliance.
Nulling (Blanking)	Replaces data with a "null" value or a blank space. It simply removes the information.	Removing data while keeping the format.

B. For Tech Staff - Automation

Developers can use Regex or libraries like Faker (Python/JS) to clean error logs before querying AI. Here is a quick example:

5. Static vs. Dynamic Masking

AWS defines two main types of masking:

Static Data Masking (SDM): Masking a fixed set of data before it is stored or shared. Ideal for creating Testing environments.
Dynamic Data Masking (DDM): Masking data in real-time as it is queried. Perfect for Customer Support systems where access is based on user roles.

Conclusion

Think of an AI chat box like a stranger on the street. Would you shout your bank password to them? If not, don't paste it into AI without masking it first.

At ISB VIETNAM, we follow strict security standards to ensure your code and data are always safe. Are you looking for a trusted outsourcing partner with professional security workflows?

[Contact ISB VIETNAM today for a secure software solution!]

Or click here to explore more ISB Vietnam's case studies

Have you ever accidentally pasted sensitive data into AI? Let us know in the comments how you handled it!

References

https://aws.amazon.com/what-is/data-masking/

https://www.linkedin.com/pulse/6-types-data-you-should-never-mention-ai-mekari-4timc

Image from Gemini

TECH

February 27, 2026

How to Optimize jqGrid for Large Datasets

I. Introduction

In enterprise systems, displaying large datasets in tables is common. However, performance problems appear when the dataset grows to millions of records. Therefore, without proper optimization, system performance gradually declines.

This article examines the following aspects:

- Common performance problems in grid components handling large datasets.
- The root causes of these issues.
- Practical optimization strategies for production environments.

TECH

February 24, 2026

AWS Certified Cloud Practitioner (CLF-C02) – Domain 1 (Part 1): Understanding AWS Cloud Benefits

Master the foundational benefits of AWS Cloud. Learn why organizations worldwide choose AWS and how cloud infrastructure transforms business operations.

Welcome back to our AWS Certified Cloud Practitioner (CLF-C02) exam series! In the first post, we explored the complete exam outline and structure. Today, we're diving into the first part of Domain 1: Cloud Concepts - the foundational domain that represents 24% of your exam score.

Think of Domain 1 as the "why" of cloud computing. Before you learn about specific AWS services (which we'll cover in later posts), you need to understand why organizations move to the cloud and what principles guide good cloud architecture. This domain ensures you can articulate the value proposition of AWS to stakeholders, whether they're technical or business-focused.

Domain 1 consists of four task statements. We'll cover these across multiple posts. In this post (Part 1), we'll focus on Task Statement 1.1: The Benefits of AWS Cloud - understanding what makes AWS attractive to organizations.

Domain 1 Overview: What You Need to Know

Domain 1 focuses entirely on concepts rather than technical implementation. You won't be asked to configure services or write code. Instead, you'll need to demonstrate understanding of:

Why businesses choose AWS - The tangible benefits (This post - Part 1)
How to design well - Best practice principles (Part 2)
How to migrate effectively - Strategies and frameworks (Part 3)
How cloud saves money - Economic advantages (Part 3)

Let's start with understanding the core benefits that make AWS attractive to organizations worldwide.

Task Statement 1.1: Define the Benefits of the AWS Cloud

This task statement focuses on understanding what makes AWS Cloud valuable compared to traditional IT infrastructure.

Global Infrastructure Benefits

Speed of Deployment: In traditional data centers, purchasing and setting up new servers could take weeks or months. With AWS, you can provision resources in minutes. For example, if your marketing team suddenly needs a new web application for a campaign launching next week, you can deploy it on AWS EC2 instances within hours, not months.

Global Reach: AWS operates in multiple geographic regions worldwide, each containing multiple Availability Zones (separate data centers). This means:

A company based in the US can easily serve customers in Europe, Asia, or South America with low latency
You can deploy applications close to your users without building physical data centers
Content can be cached at edge locations (over 400 globally) for faster delivery

Real-World Example: A streaming service wants to expand from the US to Japan. Instead of building data centers in Tokyo (costing millions and taking years), they can deploy their application to AWS's Tokyo Region in days, instantly providing low-latency service to Japanese users.

High Availability

High availability means your applications stay running even when something fails. AWS achieves this through:

Multiple Availability Zones: Each AWS Region has at least 3 separate data centers (AZs) with independent power, cooling, and networking
Fault isolation: If one AZ experiences issues, your application continues running in other AZs
Built-in redundancy: Many AWS services automatically replicate data across multiple locations

Example: An e-commerce site runs on EC2 instances in 3 different Availability Zones. During a power outage in one AZ, customers continue shopping without interruption because the other 2 AZs handle all traffic seamlessly.

Elasticity

Elasticity is the ability to automatically scale resources up or down based on demand. This is one of cloud's most powerful benefits.

Scale up: During peak times, automatically add more servers
Scale down: During quiet periods, reduce servers to save costs
No manual intervention: AWS Auto Scaling handles this automatically

Real-World Scenario: A tax preparation website sees massive traffic increases in March and April but minimal traffic the rest of the year. With AWS elasticity:

In tax season: Automatically scales to 100 servers to handle 1 million daily users
In summer: Scales down to 5 servers for the 10,000 daily users
Result: Only pay for what you need, when you need it

Agility

Agility in cloud means the ability to quickly experiment, innovate, and respond to market changes without large upfront investments.

Faster time to market: Launch new products in days instead of months
Lower risk of experimentation: Try new ideas with minimal cost; shut them down if they don't work
Focus on innovation: Spend time building features, not managing infrastructure

Example: A startup wants to test if their new AI-powered app will attract users. On AWS, they can:

Deploy a prototype in 2 days
Run it for a month at $100 cost
If it fails, delete everything with no long-term commitment
If it succeeds, scale up immediately

Compare this to traditional IT: purchasing servers ($50,000+), setting them up (3 months), then being stuck with hardware even if the project fails.

Key Takeaways

Understanding AWS Cloud benefits is essential for the CLF-C02 exam. Remember these core advantages:

Speed: Deploy resources in minutes, not months
Global Reach: Serve users worldwide without building physical infrastructure
High Availability: Keep applications running even when failures occur
Elasticity: Automatically scale resources to match demand
Agility: Experiment quickly and innovate without large upfront costs

What's Next?

Now that you understand why organizations choose AWS, the next step is learning how to design cloud systems well.

In Part 2, we'll explore:

The AWS Well-Architected Framework – Six pillars of cloud design excellence
Design principles for each pillar with practical examples
How to distinguish between pillars in CLF-C02 exam questions
Practice questions to reinforce your understanding

These design principles are essential not only for passing the CLF-C02 exam, but also for building reliable, secure, and cost-effective cloud solutions in real-world scenarios.

Which AWS Cloud benefit do you find most valuable in your work? Have you experienced any of these benefits firsthand? Share your experience in the comments below!

References

[1]. AWS Global Infrastructure. Retrieved from https://aws.amazon.com/about-aws/global-infrastructure/

[2]. AWS Certified Cloud Practitioner Exam Guide (CLF-C02). Retrieved from https://aws.amazon.com/certification/certified-cloud-practitioner/

TECH

February 24, 2026

Tampermonkey for Developers: Modifying the Web to Suit Your Workflow

As developers, we spend the majority of our day inside a web browser. We interact with Jira and CI/CD pipelines. We also use cloud consoles and legacy internal tools. Unfortunately, these interfaces are often not optimized for our specific needs. They require excessive clicking and lack essential shortcuts. Moreover, they often hide data we need to access quickly. Consequently, this is where Tampermonkey for developers becomes an indispensable tool.

TECH

February 24, 2026

Is the Handover Dead? The Ultimate Figma to Code AI Guide

For as long as web development has existed, the "Design-to-Development Handover" has been a friction point. It is the Bermuda Triangle of software building: designers create pixel-perfect visions, and developers spend hours translating rectangles into <div> tags.

But the landscape is shifting. With the rise of Figma to Code AI tools, we are entering a new era where the frontend is generated, not just translated.

Here is how AI is bridging the gap between Figma and production-ready code, and what it means for the future of development.

The Problem with the "Old Way"

Traditionally, the workflow looks like this:

Designer creates a UI in Figma.
Designer annotates margins, padding, and animations.
Developer looks at the design and manually types out HTML/CSS/React.
QA finds visual discrepancies.
Repeat.

This process is slow, prone to human error, and frankly, a waste of a developer's cognitive load. Developers should be solving logic problems, not measuring pixels.

How "Figma to Code AI" Changes the Game

New tools like Locofy.ai, Anima, and Builder.io are not just exporting CSS. They use Figma to Code AI algorithms to understand intent.

Instead of treating a button as just a rectangle with a hex code background, these AI models recognize it as a <Button> component. They understand that a list of cards is likely a grid that needs to be responsive.

From Image to Component

Modern AI tools can scan a Figma frame and output clean, modular code in React, Vue, Svelte, or simple HTML/Tailwind. They don't just dump a blob of code; they attempt to structure it into reusable components.

Context Awareness

The AI is getting smarter about responsiveness. If you use Auto Layout correctly, Figma to Code AI tools can generate flexbox and grid layouts that actually work across different screen sizes.

Logic Integration

Some tools now allow you to define state and props directly inside Figma. You can tag a button to toggle a specific variable, and the generated code will include the useState and onClick handlers automatically.

The Top Players in the Field

If you want to try this today, here are the tools leading the charge:

Builder.io (Visual Copilot): Uses AI to convert Figma designs into code that matches your specific styling (e.g., Tailwind) and framework (Next.js, React).
Locofy.ai: Focuses heavily on turning Figma into a real app. It enables you to tag layers for interactivity and exports code that is ready for deployment.
Anima: One of the veterans in the space, great for high-fidelity prototyping and converting designs to React/Vue code.
v0 by Vercel: While not strictly a plugin, v0 allows you to generate UI code instantly from text prompts or screenshots.

The Reality Check: Is It Perfect?

If you blindly copy-paste output from a Figma to Code AI generator into production, you will end up with "spaghetti code." Common issues include:

Accessibility: AI often forgets semantic HTML (using <div> instead of <article>).
Naming Conventions: You might get class names like frame-42-wrapper unless you prompt it correctly.
Edge Cases: AI assumes the "Happy Path." It doesn't always know how the UI should look when the data is missing.

Think of AI as a Junior Frontend Developer. It types incredibly fast, but a Senior Developer still needs to review the PR, refactor the structure, and hook up the business logic.

How to Prepare Your Workflow

To get the best results from Figma to Code AI, designers and developers need to align:

Embrace Auto Layout: If your Figma file is just groups of rectangles, the code will be garbage. Use Auto Layout strictly.
Design Systems are Key: If you use a defined Design System, map it to your code components. This helps the AI generate <PrimaryButton /> instead of generic CSS.
Name Your Layers: AI uses layer names to generate class names. "Rectangle 54" creates bad code. "SubmitButton" creates good code.

Conclusion

The era of manually coding static UI components is drawing to a close. By adopting Figma to Code AI workflows, teams can ship faster and let developers focus on architecture, data flow, and user experience.

The question is no longer if you should use AI for frontend, but how fast you can integrate it into your pipeline.

References

Builder.io (Visual Copilot): https://www.builder.io/c/visual-copilot

Locofy.ai: https://www.locofy.ai/

Anima (Figma to React/Vue): https://www.animaapp.com/figma-to-react

v0 by Vercel: https://v0.dev/

Figma Auto Layout Official Guide: https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties

Thinking in React (React Docs): https://react.dev/learn/thinking-in-react

Ready to get started?

Contact IVC for a free consultation and discover how we can help your business grow online.

Contact IVC for a Free Consultation

« 1 2 3 4 … 25 »

Introduction to Google Apps Script: Build Simple Automation with JavaScript

Microsoft 365 Login with ExpressJS

Overall

Setting up Azure AD

MSAL node configuration

Scope: Request only what we need

Actual login flow

Sessions and Middleware

Conclusion

Mastering Burp Suite: Are you really getting the most out of it for your web security testing?

The Core Power: Intercepting Proxy

Top 3 Features to Supercharge Your Testing

Applying Burp Suite to the UI-BFF-API Model

Tips for Junior QCs Starting with Burp Suite

Would you like me to create a Quick Start Guide for configuring Burp Suite with your UI-BFF-API application?

Step 1: The Basic Connection (The Proxy)

Step 2: Organize Your Scope (Crucial for 4 Sites)

Step 3: Mapping the UI-BFF-API Flow

Step 4: Testing Roles (The Parent vs. Admin Test)

When Should You Use ADO.NET vs Entity Framework?

Understanding ADO.NET

Advantages of ADO.NET

Disadvantages

Understanding Entity Framework

Advantages of Entity Framework

Disadvantages

When Should You Use ADO.NET?

1. When Performance Is Critical

2. When Working with Complex Queries or Stored Procedures

3. When Maintaining Legacy Systems

When Should You Use Entity Framework?

1. When Rapid Development Is Important

2. When Your Application Has a Strong Domain Model

3. When Maintainability Is a Priority

Best Practice: Use Both

Conclusion

Implementing Access Tokens and Refresh Tokens "The Right Way"

1. Why do we need 2 types of tokens?

2. Standard Workflow (The Flow)

3. Storage "Best Practices"

A. For Web Applications (SPA - React, Vue, Angular)

B. For Mobile Apps (iOS/Android)

4. Token Rotation Mechanism

Conclusion

Data Masking Guide: How to Protect Sensitive Data Before Using AI

1. The Temptation and the "AI Trap"

2. What is Data Masking?

3. The "Danger Zone": 6 Types of Data You Must Never Paste

4. Practical Data Masking Techniques

A. Popular Data Masking Techniques

B. For Tech Staff - Automation

5. Static vs. Dynamic Masking

Conclusion

How to Optimize jqGrid for Large Datasets

I. Introduction

AWS Certified Cloud Practitioner (CLF-C02) – Domain 1 (Part 1): Understanding AWS Cloud Benefits

Domain 1 Overview: What You Need to Know

Task Statement 1.1: Define the Benefits of the AWS Cloud

Global Infrastructure Benefits

High Availability

Elasticity

Agility

Key Takeaways

What's Next?

Tampermonkey for Developers: Modifying the Web to Suit Your Workflow

Is the Handover Dead? The Ultimate Figma to Code AI Guide

The Problem with the "Old Way"

How "Figma to Code AI" Changes the Game

From Image to Component

Context Awareness

Logic Integration

The Top Players in the Field

The Reality Check: Is It Perfect?

How to Prepare Your Workflow

Conclusion