DEV Community: Idev.d

CI/CD with GitHub Actions: A Practical Setup for Small Teams

Idev.d — Wed, 19 Aug 2026 08:56:55 +0000

Our deployment used to be: local build, SCP to server, SSH to restart. 15 minutes per deploy, with production incidents from forgotten environment variables.

Now it is: git push, then tests, build, and deploy run automatically. Zero manual steps, 5 minutes total. Here is how we set it up at iDev.

Frontend Deployment (Vue + Vite)

The GitHub Actions workflow triggers on push to main. Steps: checkout, setup Node 20 with npm cache, run npm ci, lint, build, then SCP the dist folder to the production server and reload Nginx.

Backend Deployment (Spring Boot)

Similar workflow but with Java 17 and Maven. Key addition: a health check after restart that curls the health endpoint and fails the workflow if the service did not start properly.

Pro Tips

1. Cache Dependencies

Using the cache option in setup-node or setup-java saves 60+ seconds per run.

2. Path Filters

Only trigger backend deploy when backend files change. Add a paths filter so frontend changes do not trigger a backend rebuild.

3. Deploy Notifications

Send success or failure messages to your team Slack or Lark channel automatically.

4. Keep Last 5 Versions for Rollback

Copy the current JAR with a timestamp before deploying, then delete all but the 5 most recent backups.

5. Health Check After Deploy

Always verify the service actually started. If the health check fails, the workflow fails, and you get notified immediately.

Before and After

Metric	Before	After
Deploy time	15 min manual	5 min automated
Deploy frequency	1-2x/week	3-5x/day
Failed deploys	10%/month	1%/month
Rollback time	30 min	2 min

GitHub Actions is free for public repos. Private repos get 2,000 free minutes monthly. The ROI is immediate.

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.

Building a Stateless JWT Auth System with Spring Security 6

Idev.d — Wed, 19 Aug 2026 08:51:02 +0000

Spring Security 6 (Spring Boot 3.x) changed its API significantly. Here is a complete, working JWT authentication setup.

Why JWT for Frontend-Backend Separation

Session-based auth stores state on the server, making horizontal scaling painful. JWT is stateless and perfect for SPA + API architectures.

Key Changes in Spring Security 6

WebSecurityConfigurerAdapter is gone. Use SecurityFilterChain beans instead.
Lambda DSL is now the standard configuration style.
Method security defaults to @PreAuthorize.

Step 1: JWT Utility Class

Using JJWT 0.12.x (not the old 0.9.x, the API is completely different):

The core methods are generateToken (builds a JWT with subject, issued-at, expiration, and signing key) and extractUsername (parses and verifies the token, then extracts the subject claim).

Step 2: Security Configuration

The SecurityFilterChain bean disables CSRF (not needed for stateless APIs), sets session creation policy to STATELESS, permits auth endpoints, requires authentication for admin endpoints, and adds the JWT filter before the UsernamePasswordAuthenticationFilter.

Security Hardening Checklist

Token expiration: 24 hours max
Passwords: BCrypt, never MD5 or SHA
JWT secret: environment variable, never hardcoded
HTTPS only in production
Rate limit login attempts
Validate token on every request, not just check for presence

Common Pitfalls

Using JJWT 0.9.x docs with 0.12.x - The API is completely different. Make sure your dependency version matches your code.
Forgetting STATELESS session policy - Without this, Spring creates sessions alongside JWT, defeating the purpose.
Not handling expired tokens gracefully - Return 401 with a clear message, not a 500 error.

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.

Git Branch Strategy for Small Teams: What Actually Works

Idev.d — Wed, 19 Aug 2026 08:50:55 +0000

In our early days at iDev, we made every Git mistake in the book: constant merge conflicts, chaotic releases, nobody knew which branch to hotfix from.

After trying Git Flow, GitHub Flow, and Trunk-Based Development, here is what actually works for a 5-10 person team.

The Problem with Git Flow

Git Flow (main, develop, feature, release, hotfix) is designed for large teams with scheduled releases. For a small team shipping continuously, it is overkill: too many long-lived branches, merge conflicts pile up, release branches add ceremony with no value.

What We Actually Use: Enhanced GitHub Flow

1. main is always deployable

Protected branch. Only merge via PR. If main is broken, everything stops until it is fixed.

2. Short-lived feature branches

Branch from main, PR back to main. Branch lifespan: ideally under 3 days.

3. PR rules

At least one review approval
CI must pass
Squash merge to keep main history clean

4. Daily habits

Start of day: sync with main via rebase. Stash unfinished work instead of committing half-done code. Clean up merged remote branches periodically.

5. The One Rule That Changed Everything

Rebase before opening a PR. Not merge, rebase. This keeps the PR diff clean (only your changes, no merge commits) and makes review dramatically easier.

Summary

For teams of 5-10: Enhanced GitHub Flow beats Git Flow and Trunk-Based. The strategy is not revolutionary. The discipline of following it consistently is what makes the difference.

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.

5 Practical Solutions for Large List Rendering in Vue 3

Idev.d — Wed, 19 Aug 2026 08:39:10 +0000

When rendering hundreds or thousands of items, Vue 3 apps can lag noticeably. We hit this problem in a recent inventory management system — 5,000 items caused 3-second load times and scrolling dropped below 15fps.

Here are 5 solutions we tested, ranked by effectiveness.

1. Virtual Scrolling (Best Overall)

Only render DOM elements within the visible viewport. We recommend vue-virtual-scroller:

<RecycleScroller :items="list" :item-size="60" key-field="id">
  <template #default="{ item }">
    <div class="item">{{ item.name }}</div>
  </template>
</RecycleScroller>

Result: Initial render dropped from 3.2s to 0.1s. Memory from 180MB to 35MB.

2. Pagination + Infinite Scroll

Use the Intersection Observer API for load-on-scroll, fetching 20-50 items per request. Best when total data volume is unknown.

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) loadMore()
})
observer.observe(sentinel)

3. v-memo Directive

Vue 3.2+'s v-memo caches subtree render results, skipping re-renders when dependent data hasn't changed:

<div v-for="item in list" :key="item.id" v-memo="[item.name, item.price]">
  <ExpensiveComponent :data="item" />
</div>

Great for lists where individual items rarely change.

4. Web Worker Off-Thread Computing

Move computation-intensive operations like filtering and sorting to Web Workers:

const worker = new Worker('./listWorker.js')
worker.postMessage({ action: 'filter', data: rawList, query })
worker.onmessage = e => { filteredList.value = e.data }

This prevents main thread blocking during heavy operations.

5. shallowRef + triggerRef

For large lists that don't need deep reactivity:

const list = shallowRef(hugeArray)
// After mutation:
triggerRef(list)

Avoids Vue creating deep proxies for every element — significant memory savings.

Benchmark Summary

Solution	Render Time (5K items)	Memory
Default v-for	3.2s	180MB
Virtual Scrolling	0.1s	35MB
v-memo	1.8s	160MB
shallowRef	2.1s	90MB

Our recommendation: Virtual scrolling first, pagination second. They solve the root cause (too many DOM nodes) rather than optimizing around it.

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.

Cursor vs Claude Code vs GitHub Copilot: Which AI Coding Tool Should You Use in 2026?

Idev.d — Wed, 19 Aug 2026 08:39:06 +0000

AI coding tools have evolved from "nice-to-have" to essential productivity tools. Our team at iDev uses multiple tools daily — here's our hands-on comparison.

The Three Contenders

GitHub Copilot

Microsoft's offering, powered by OpenAI models, deeply integrated with VS Code. The most established AI coding assistant.

Cursor

A standalone IDE forked from VS Code with built-in multi-model support, known for its Chat + Edit modes.

Claude Code

Anthropic's CLI tool that works directly in the terminal. It can read/write files, execute commands, manage Git, and autonomously complete complex tasks in Agent mode.

Head-to-Head Comparison

Dimension	Copilot	Cursor	Claude Code
Code Completion	Excellent tab completion	Excellent, multi-line prediction	No inline completion
Context Understanding	Current file + recent files	Project-level, indexes entire codebase	Project-level, reads any file
Refactoring	Basic	Moderate via Chat	Strong — Agent mode handles cross-file refactoring autonomously
Terminal Integration	Limited	Built-in terminal	Native terminal tool with strong command execution
Multi-file Editing	Not supported	Supported	Natively supported, autonomously decides which files to modify

Our Usage Strategy at iDev

We use a "combo" approach:

Daily coding: Cursor's inline completion + Chat mode
Complex tasks: Claude Code's Agent mode for cross-file modifications and architectural refactoring
Code review: Claude Code's built-in code review feature

The Verdict

No single tool perfectly covers all scenarios. The key insight: use them together.

Copilot and Cursor excel at real-time code assistance while you're typing. Claude Code excels at larger-scale tasks where you need an AI that understands your entire project and can make autonomous decisions.

If you're only picking one, Cursor offers the best all-around experience. But if you're serious about maximizing productivity, the Cursor + Claude Code combination is hard to beat.

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.