DEV Community: Matty

[Boost]

Matty — Sun, 11 May 2025 14:04:31 +0000

How I Manage Local Dev Environments for Go + Python Projects

Matty ・ May 7

#programming #python #go #webdev

✍️✍️✍️

Matty — Thu, 08 May 2025 16:05:00 +0000

How I Manage Local Dev Environments for Go + Python Projects

Matty ・ May 7

#programming #python #go #webdev

How I Manage Local Dev Environments for Go + Python Projects

Matty — Wed, 07 May 2025 07:16:38 +0000

Lately, I’ve been working on a hybrid project involving Go and Python. The code itself wasn’t too challenging—but the local development environment? A complete mess.
Version conflicts, services that refused to connect, forgetting to activate virtual environments… 😵I rebooted my machine three times before I even got the project running properly. That’s when I decided to sit down and organize the environment tools I’ve actually used. They’re not magic bullets, but they’ve saved me from at least 80% of the pain.

🙋Here are a few that stood out:

ServBay (Great for Multi-language Projects) I’ve recently been using ServBay, and while it’s not specifically built for Python, it supports multi-language stacks quite well—PHP, Node.js, Go, Python, you name it. The biggest selling point? One-click service setup (PostgreSQL, Redis, MySQL, Nginx, etc.) and easy language version switching. No config files necessary.

Here’s what I currently run with it:
•A Flask-based backend (Python 3.11)
•A React admin panel (Node.js 20)
•A PostgreSQL database
•Sometimes even legacy PHP 7.4 for an old project

ServBay makes switching between these setups seamless. It’s ideal for:
✅Developers who need to run multiple services locally
✅Engineers juggling multiple stacks
✅Anyone who wants to avoid writing Dockerfiles or YAML configs for everything

⸻

Pipenv / Poetry (Focused on Python Virtual Environments)

If you’re working on a pure Python project, Pipenv and Poetry are more “Pythonic” options:
✅Pipenv: Manages Pipfile and creates virtual environments automatically. Great for Flask or Django.
✅Poetry: A more modern approach, leaning toward packaging and publishing libraries—perfect if you’re planning to open-source something.
Both tools help you avoid global pip pollution, though they won’t manage service dependencies like PostgreSQL or Redis.

⸻

Direnv + ASDF (For CLI Enthusiasts) Love the terminal? Direnv + ASDF is a powerful (and a bit nerdy) combo: ✅ASDF handles language versions: Python, Node, Go, Ruby—you name it. ✅Direnv auto-loads .envrc files when you cd into a directory, activating virtual environments and environment variables. It’s super flexible but does require some shell scripting familiarity.

⸻

Devbox (Cross-language Dependency Management + Isolation) Devbox is gaining traction fast. Built on Nix, it brings the “infrastructure as code” mindset to local dev environments.I tried it for a CLI project using Python and Rust, and it made cross-language development a lot easier—especially when syncing environments across teammates. Pros: ✅Supports multi-language dependency management ✅Automatic isolation and reproducibility ✅No Docker required, no manual installations needed Cons: ❌Documentation leans toward experienced engineers ❌Can feel “heavy” for simple Python-only projects

⸻

DDEV (Docker-Powered, Web Dev Friendly—Supports Python Too) While DDEV is primarily popular with PHP developers (Drupal, TYPO3, etc.), it can easily run Python projects like Flask or FastAPI too. It wraps Docker nicely, making it easy to spin up services like PostgreSQL, Redis, and Mailhog.

Pros:
✅ Docker environments pre-configured, no Dockerfiles needed
✅Easily define multiple services, HTTPS, debugging tools, etc.
✅CLI experience is smooth—live reloads and environment switching
Cons:
❌Slower startup compared to ServBay (since it uses Docker under the hood) ❌Slightly more resource-hungry on macOS
conclusion：

⸻

In the end, your development environment should match your project’s pace and complexity. If you’re stuck in the same swamp I was, give some of these tools a try—maybe one of them will become your new favorite.

And hey—what tools do you use to keep your local environment sane? I’d love to hear what’s working for you. Drop a comment and share the wisdom

[Boost]

Matty — Wed, 30 Apr 2025 05:44:10 +0000

Unlocking Egg.js: From Node.js Newbie to Web Development Pro

Matty ・ Apr 29

#programming #learning #coding #webdev

Unlocking Egg.js: From Node.js Newbie to Web Development Pro

Matty — Tue, 29 Apr 2025 06:57:48 +0000

1. What Is Egg.js?🔧
In today’s web development landscape, Node.js—thanks to its event-driven, non-blocking I/O model—has proven its unique strengths in building high-performance, scalable network applications. It has won the favor of countless developers by unifying front-end and back-end JavaScript, dramatically boosting development efficiency.

Egg.js, built on top of Koa, brings even more power and convenience to enterprise-grade Node.js web applications. Its modular design lets you break your app into independent modules that you can develop, test, and deploy in isolation. Out of the box, Egg.js ships with a rich set of middleware—routing, static file serving, error handling, and more—so you don’t have to reinvent the wheel. Flexible configuration, a robust plugin system, and native multi-process support round out its feature set, making Egg.js a rock-solid choice for complex business needs and high-concurrency scenarios.

2. Environment Setup & Project Initialization⬇️
A. Installing Node.js & npm with ServBay
Before diving into Egg.js, you need Node.js (the runtime) and npm (the package manager). Instead of manual installs, ServBay provides a graphical, version-managed way to spin up multiple Node.js versions on your machine.
1️⃣Launch ServBay and click the Node.js service.
2️⃣Choose your desired version (e.g., 16.x or 18.x) and hit Install.

Once done, open a terminal and verify:
node -v npm -v
If you see version numbers, you’re all set!
B. Installing Egg.js
Egg.js comes with a CLI tool called egg-init that scaffolds new projects. Install it globally:
npm install -g egg-init
C. Creating a New Egg.js Project
Navigate to your workspace and run:
egg-init my-egg-project --type=simple cd my-egg-project npm install
That generates a starter template:
my-egg-project ├── app │ ├── controller │ │ └── home.js │ ├── service │ └── router.js ├── config │ ├── config.default.js │ ├── plugin.js │ └── config.prod.js ├── test │ ├── app │ │ ├── controller │ │ │ └── home.test.js │ │ └── service │ └── middleware ├── README.md └── package.json
app/: Core code—controllers, services, routers
config/: Default and environment-specific settings
test/: Unit and integration tests
package.json: Dependency declarations
💻You’re ready to start coding!
⸻

3. Egg.js Core Concepts & Basic Usage🧩
A. Routing & Controllers
Routing maps URLs to handler functions. In app/router.js:

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};
Then in app/controller/home.js:
const { Controller } = require('egg');
class HomeController extends Controller {
  async index() {
    this.ctx.body = 'Hello, Egg.js!';
  }
}
module.exports = HomeController;
For a POST endpoint:
// app/router.js
router.post('/register', controller.user.register);

// app/controller/user.js
const { Controller } = require('egg');
class UserController extends Controller {
  async register() {
    const { username, password } = this.ctx.request.body;
    // ... save to DB ...
    this.ctx.body = { success: true, message: 'Registration successful' };
  }
}
module.exports = UserController;

B. Service Layer
Services encapsulate business logic and keep controllers lean:
// app/service/user.js const { Service } = require('egg'); class UserService extends Service { async getUserById(id) { // Replace with real DB call return { id, name: 'Alice', age: 25, email: 'alice@example.com' }; } } module.exports = UserService;
Controller usage:
// app/controller/user.js class UserController extends Controller { async info() { const id = this.ctx.params.id; const user = await this.ctx.service.user.getUserById(id); this.ctx.body = user; } }
C. Middleware
Middleware can hook into the request lifecycle for logging, authentication, error handling, etc.
Example: A simple logger in app/middleware/log.js:
module.exports = () => { return async (ctx, next) => { console.log([${new Date().toISOString()}] ${ctx.method} ${ctx.url}); await next(); }; };
Enable it in config/config.default.js:
module.exports = appInfo => { const config = {}; config.middleware = ['log']; return config; };
D.Configuration Files
All your settings live under config/. In config/config.default.js:
module.exports = appInfo => { const config = {}; config.port = 7001; config.logger = { level: 'info' }; return config; };
Use config.local.js, config.prod.js, etc., to override defaults per environment.
4. Practical Case: Building a Simple Blog System🧠
A. Requirements
✅We’ll implement:
List Articles：Display a list of all articles, including the title, introduction, release time and other information, so as to facilitate users to quickly browse and select articles of interest.
View Article Details：Click on an article in the article list to view the details of the article, including the complete text, author information, comment area, etc.
Create Article：Bloggers can create new articles in the background and fill in the title, text, classification and other information of the articles.
Update Article：For published articles, bloggers can edit and update, and modify the content, title, classification and other information of the articles.
Delete Article：If an article is no longer needed, the blogger can delete it.
B. Database Design
Using MySQL, create an articles table:
CREATE TABLE articles ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, author VARCHAR(50) NOT NULL, create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP );
C. Project Setup
egg-init blog-system --type=simple cd blog-system npm install npm install egg-mysql --save
In config/plugin.js:
exports.mysql = { enable: true, package: 'egg-mysql' };
In config/config.default.js:
config.mysql = { client: { host: 'localhost', port: '3306', user: 'root', password: '123456', database: 'blog_db' }, app: true, agent: false };
D. Implementing Features
Routes (app/router.js):
module.exports = app => { const { router, controller } = app; router.get('/articles', controller.article.list); router.get('/articles/:id', controller.article.detail); router.post('/articles', controller.article.create); router.put('/articles/:id', controller.article.update); router.delete('/articles/:id', controller.article.delete); };
Controller (app/controller/article.js):
const { Controller } = require('egg'); class ArticleController extends Controller { async list() { const articles = await this.ctx.service.article.list(); this.ctx.body = articles; } async detail() { const { id } = this.ctx.params; const result = await this.ctx.service.article.detail(id); if (result.length) { this.ctx.body = result[0]; } else { this.ctx.status = 404; this.ctx.body = { message: 'Not Found' }; } } async create() { const data = this.ctx.request.body; const article = await this.ctx.service.article.create(data); if (article) { this.ctx.status = 201; this.ctx.body = article; } else { this.ctx.status = 500; this.ctx.body = { message: 'Creation Failed' }; } } async update() { const { id } = this.ctx.params; const data = this.ctx.request.body; const article = await this.ctx.service.article.update(id, data); if (article) { this.ctx.body = article; } else { this.ctx.status = 500; this.ctx.body = { message: 'Update Failed' }; } } async delete() { const { id } = this.ctx.params; const success = await this.ctx.service.article.delete(id); if (success) { this.ctx.body = { message: 'Deleted' }; } else { this.ctx.status = 500; this.ctx.body = { message: 'Deletion Failed' }; } } } module.exports = ArticleController;
Service (app/service/article.js):
const { Service } = require('egg'); class ArticleService extends Service { async list() { return this.app.mysql.query('SELECT * FROM articles'); } async detail(id) { return this.app.mysql.query('SELECT * FROM articles WHERE id = ?', [ id ]); } async create(article) { const result = await this.app.mysql.insert('articles', article); if (result.affectedRows === 1) return { id: result.insertId, ...article }; return null; } async update(id, article) { const result = await this.app.mysql.update('articles', { id, ...article }); if (result.affectedRows === 1) return { id, ...article }; return null; } async delete(id) { const result = await this.app.mysql.delete('articles', { id }); return result.affectedRows === 1; } } module.exports = ArticleService;
E.Templating with EJS
Install and configure:
npm install egg-view-ejs --save
In config/plugin.js:
exports.ejs = { enable: true, package: 'egg-view-ejs' };
In config/config.default.js:
config.view = { defaultViewEngine: 'ejs', mapping: { '.html': 'ejs' }, };
Render in controller:
async list() { const articles = await this.ctx.service.article.list(); await this.ctx.render('article/list.html', { articles }); }
Template app/view/article/list.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Article List</title> </head> <body> <h1>Articles</h1> <ul> <% articles.forEach(a => { %> <li><a href="/articles/<%= a.id %>"><%= a.title %></a> — <%= a.author %> — <%= a.create_time %> </li> <% }) %> </ul> </body> </html>
5. Conclusion & Outlook💡
From core concepts to a hands-on blog project, we’ve explored Egg.js in depth. Leveraging ServBay for rapid, all in one web environment setup, we focused squarely on coding, experiencing Egg.js’s modular architecture, built-in middleware, flexible config, and powerful plugins firsthand.

Looking ahead, as Node.js evolves and patterns like microservices and Serverless gain ground, Egg.js is poised for even broader adoption in enterprise contexts. Its thriving ecosystem continues to produce new plugins and tools, enriching our development toolkit.

Happy coding! 🚀 If you try Egg.js + ServBay in your next project, feel free to share your experiences or questions—I’d love to hear how you’re building amazing apps.

How to Build Efficient AI-Driven Interfaces with Ant Design X: 0 to 1

Matty — Fri, 25 Apr 2025 08:51:03 +0000

❓What is Ant Design X?

In the rapidly advancing world of artificial intelligence, AI-driven interfaces have become an essential trend in software development. Ant Design X is a React UI library that embraces this trend, born in 2024, which adheres to the Ant Design system. It is designed to help developers create AI-powered interfaces easily, making development more efficient and convenient.

Ant Design X integrates smart conversational components and API services, with a rich selection of components and templates, and provides full TypeScript support for comprehensive type safety. This greatly enhances the developer experience and reliability.

Its core advantages are significant, as it is based on the RICH interaction paradigm, offering superior AI interaction experiences, delivering smooth and intelligent services to users. For example, when interacting with an AI customer service system built on Ant Design X, the fluidity and intelligence of the conversation are evident, making the interaction feel as though you are conversing with a human. Its diverse range of components covers a wide array of AI conversation scenarios, whether it’s a chat interface, smart assistant, or other complex AI interaction pages, making it easy for developers to quickly build personalized AI interaction pages.

It is also worth mentioning that Ant Design X can easily integrate with models that adhere to OpenAI’s standards, lowering the development threshold and sparing developers the complexity of model integration. In terms of data flow management, Ant Design X provides powerful capabilities to quickly process and respond to user input, offering strong support for building real-time data interaction applications. It also provides multiple templates, enabling developers to quickly launch LUI application development while supporting fine-grained style customization to meet various scenario-specific needs.

✅Getting Started with Ant Design X

1️⃣Setting up the Environment

Before using Ant Design X, we need to set up the development environment. This mainly involves installing Node.js and npm (Node Package Manager).

Node.js is a JavaScript runtime built on the Chrome V8 engine, enabling JavaScript to run on the server-side, enhancing frontend development capabilities. npm is the package manager for Node.js, used for installing, managing, and sharing project dependencies.

Installation Method

You can easily install and manage Node.js through ServBay’s GUI panel. Here are the steps to install Node.js via the ServBay GUI panel:

1.Open the ServBay GUI panel.
2.Navigate to the Packages section.
3.Select the Node.js version you need.
4.Click the green Install button and wait for the installation to complete.

After installation, open the terminal and type node -v and npm -v. If the version numbers appear, the installation is successful.

2️⃣Project Initialization

After setting up the environment, we can initialize a project based on Ant Design X. Open the terminal, navigate to the directory where you want to create the project, and execute the following commands:

In this command, npx create-react-app my-antd-x-app creates a new React project. The project name my-antd-x-app can be modified to your preference. After creation, navigate to the project directory cd my-antd-x-app, then install the Ant Design X library using npm install @ant-design/x.

After installation, the project directory structure will look like this:

The node_modules folder stores project dependencies, the public folder contains public files like HTML templates and icons, and the src folder is where the source code is located. The package.json file records the project dependencies and scripts.

Next, in src/App.js, import Ant Design X components, for example:

Then, run the project with npm start in the command line, and the browser will automatically open and navigate to http://localhost:3000. You should see a page with an Ant Design X button, indicating that your project is successfully initialized and ready for development.

✍️Practical Guide: Building a Simple AI Application

1️⃣Feature Planning

We plan to build a simple AI-powered text generation application that can generate relevant text content based on a user-provided topic. For example, if the user inputs “travel guide”, the app will generate a simple travel guide, including recommendations for attractions, transportation tips, food recommendations, etc.

To achieve this, we need to define a few key parts: First is the user input module, which will provide a simple input box for the user to easily type in the topic. Next is the text generation module, responsible for calling the AI service to generate the text based on the user’s input. Lastly, we have the result display module, which will present the generated text in a clear and readable way. To enhance user experience, we can add some auxiliary features, such as a loading indicator, to inform the user that the system is processing, avoiding anxiety from long waiting times.

2️⃣Interface Design and Implementation

For the interface design, we follow Ant Design X’s design guidelines and use its provided components to build the application interface.

First, create a basic React component to serve as the layout for the app. In this component, use the Layout component from Ant Design X to structure the page into a header, main content area, and footer. The header will include the application title and a brief description, while the main content area will display the user input field, generate button, and the generated results. The footer can include copyright information or other helpful links.

Next, add the user input field and generate button to the content area. Use the Input component from Ant Design X for the input box and the Button component for the generate button. Add a click event handler to the button to trigger the text generation process.

3️⃣Integrating AI Capabilities

To implement true smart text generation, we need to integrate an AI service into the app. In this example, we assume we’re using OpenAI’s GPT model to generate text (in a real-world application, you’ll need to configure the API key accordingly).

First, install the OpenAI Node.js client library:

Then, import and configure the OpenAI client in your project:

Next, modify the handleGenerate function to call OpenAI’s API to generate the text:

In the above code, the createCompletion method sends a request to OpenAI’s API, where the model specifies which one to use, and the prompt is the topic entered by the user. The max_tokens parameter controls the length of the generated text. After receiving the response, we update the generatedText state and display it to the user.

With these steps, we’ve successfully built a simple AI-based text generation app using Ant Design X, which showcases how Ant Design X can be used in real-world projects and how AI capabilities can be integrated.

🧠Mastering Ant Design X

Customizing Themes

In real-world projects, customizing the theme to fit a brand or business needs is common. Ant Design X allows developers to customize themes in various ways, including adjusting colors, fonts, and styles to give the application a unified and unique visual style.

Ant Design X’s styles are written in Less, and theme customization involves overriding Less variables. The official documentation provides a complete list of Less variables for us to adjust the theme. For instance, if we want to change the global primary color to #1890ff, link color to #1890ff, and success color to #52c41a, we can do the following:

First, create a new file, like theme.less, to store the custom theme variables:

Then, configure webpack to handle Less files by adding or updating the less-loader configuration in vue.config.js or webpack.config.js:

Finally, import the custom theme file in the entry file (e.g., main.js):

Now, when using Ant Design X components, they will apply the custom theme styles. If dynamic theme switching is required, Vue’s reactivity system can be used to update Less variables.

Performance Optimization
As the application grows, performance optimization becomes critical. In Ant Design X projects, you can optimize performance using several techniques:

Code Splitting: Break the code into smaller chunks to load only the necessary parts initially, improving load speed. Use Webpack’s splitChunks plugin to achieve this.
On-demand Loading: Import only the components you need instead of the entire component library to reduce the size of the bundle. For React projects, use the babel-plugin-import to load components on demand.
Component Rendering Optimization: Prevent unnecessary re-renders by using React.memo or shouldComponentUpdate.
💼Summary and Future Outlook

In the future, Ant Design X will continue to evolve by expanding its component library, integrating a wider range of AI models, and enhancing performance for larger applications. As a powerful tool, Ant Design X provides developers with a valuable opportunity to explore and leverage in real-world AI interface development projects. Similarly, ServBay, with its intuitive development environment and seamless integration, complements Ant Design X by offering a streamlined approach to building and deploying AI-powered applications, making it an ideal choice for developers looking to push the boundaries of modern tech development.

Supercharge Your Development with Local AI: Unlock the Power of DeepSeek and CodeGPT

Matty — Tue, 22 Apr 2025 10:19:20 +0000

As artificial intelligence technology rapidly evolves, developers are increasingly looking to integrate AI into their workflows. While cloud-based AI services offer remarkable capabilities, they often come with issues like privacy concerns, data security risks, high usage costs, reliance on an internet connection, and limited customization options. By running DeepSeek locally, developers can tap into the power of AI to enhance development efficiency while maintaining full control over their data.

CodeGPT, based on GPT technology, is another revolutionary AI tool designed to assist software developers with tasks like code generation, optimization, debugging, documentation, and precise suggestions based on context. When integrated with DeepSeek, it forms a powerful local development environment that allows you to leverage AI without depending on external cloud services.

🔥This guide will show you how to set up and run DeepSeek and CodeGPT locally, using ServBay as the integration platform. You’ll be able to enjoy seamless, AI-assisted development in a private, secure, and cost-effective manner.

✅Step 1: Install ServBay and CodeGPT in VSCode

To get started, we first need to install Ollama, which allows us to run large language models (LLMs) on our local machine, and CodeGPT, a VSCode extension that integrates these models to provide intelligent coding assistance. While Ollama can be used directly, it often requires cumbersome command-line interactions and suffers from slow download speeds. For a more user-friendly experience, I recommend using ServBay, a platform designed to simplify this process.

What is ServBay?

ServBay is a comprehensive tool that makes running local development environments easy. It’s an intuitive graphical interface for managing multiple services like web servers, databases, and development tools on macOS. Unlike other platforms like XAMPP or Docker, ServBay is streamlined for AI development, providing developers with an environment that supports web development, Python, PHP, and AI models – all in one place.ServBay comes with built-in support for Ollama, so you can install it and run it seamlessly. It’s ideal for developers looking for a flexible local environment for their AI workflows.

How to Install ServBay:

1.Visit the ServBay website and download the installer for macOS (currently, ServBay is macOS-exclusive).

2.During the installation, make sure to select the option to install Ollama.

3.Once installed, you can easily install DeepSeek from the ServBay interface with just a few clicks.

Install CodeGPT in Visual Studio Code:

1.Open VSCode and navigate to the Extensions Marketplace (Cmd + Shift + X on macOS).

2.Search for CodeGPT and click Install.

3.Alternatively, create a free account at CodeGPT.co for additional features.

https://codegpt.co/

With Ollama and CodeGPT installed, you’re now ready to set up DeepSeek and begin coding locally with AI assistance.

✅Step 2: Download and Configure the AI Models

Now that you have ServBay and CodeGPT set up, it’s time to download the models that will drive your local AI environment.

Chat Model: deepseek-r1 (Choose the model you need independently)
This model is optimized for smaller environments and can run smoothly on most computers. It’s designed for general code assistance, explanations, and debugging.

To download and use it:

1.Open CodeGPT in VSCode.

2.Navigate to the Local LLMs section in the sidebar.

3.Select Ollama as the local LLM provider.

4.Choose deepseek-r1: 7b（eg.）

Once the model is set up, you can interact with it directly in your code editor. Highlight code and use powerful shortcuts like:

•/fix – Fix errors or suggest improvements.

•/refactor – Clean up and restructure code.

•/explain – Get detailed explanations of any code snippet.

🧠2. Autocompletion Model: deepseek-coder (latest)

This model uses Fill-In-The-Middle (FIM) technology to intelligently autocomplete code, predicting and suggesting intermediate portions of functions and methods. As you write code, it will suggest the next part of the function or logic.

To install and use it:

1.In the Local LLMs section, select deepseek-coder: latest.

2.Once the model is selected, start coding in VSCode. The model will provide real-time suggestions as you type, making it easier to complete code blocks and entire functions.

✅Step 3: Enjoy Seamless, Local, and Private AI-Driven Coding

Once everything is installed and configured, you can start enjoying the benefits of local AI-driven coding.

🚀Why Local AI Is a Game-Changer:

Privacy: By running everything locally on your machine, you eliminate the risks associated with uploading sensitive code or data to the cloud. All your information stays secure on your computer.

**Efficiency: **With DeepSeek and CodeGPT, you can automate many tedious coding tasks, such as bug fixing, refactoring, and optimization, which drastically improves your development speed.

Cost-Effective: You won’t have to pay for cloud-based AI services or worry about usage limits. By running everything locally with ServBay, you ensure a one-time setup with no recurring costs.

⚙️By using ServBay to integrate Ollama, DeepSeek, and CodeGPT, you’ve set up an incredibly powerful and efficient development environment. With these tools, you can harness the full power of AI locally – without the need for external services – giving you a more secure, customizable, and cost-effective way to write code.

Whether you’re working on a small project or developing a larger application, this setup allows you to evolve as a developer more efficiently, boost your productivity, and write cleaner, optimized code.

Cybersecurity Beginner's Guide: Build Your Own Vulnerable Lab in 5 Minutes (DVWA + More)

Matty — Thu, 17 Apr 2025 12:04:17 +0000

In cybersecurity learning and hands-on training, a cyber range is a must-have environment. It simulates real-world attack and defense scenarios for penetration testing, vulnerability analysis, and security education.
🧩What Is a Cyber Range?
A standard cyber range typically includes the following components:
Vulnerable applications (e.g., DVWA, bWAPP)
Runtime stack (PHP, MySQL, Nginx, Node.js)
Database systems **for testing SQLi and auth flaws
**Testing tools like Burp Suite, sqlmap, nmap
Management middleware such as phpMyAdmin
✅Why it matters:
Safe & legal: No risk of harming real systems

Hands-on debugging: You can break, analyze, and fix freely

Completely offline: **No dependency on the internet

**Practical experience: **Setting it up is already real-world practice
**Step 1: Use ServBay to Build a Local Lab (macOS)
ServBay is a lightweight local dev environment for macOS. It bundles PHP, MySQL, Nginx, and more.
Quick Setup:

Download from https://www.servbay.com/

2.Download and start MySQL database

Start the most needed server, here I choose Nginx.

Step 2: Deploy DVWA (Damn Vulnerable Web App)
DVWA is a classi learning platform containing common vulnerabilities like XSS, SQLi, CSRF, and file upload flaws.
✓Installation Steps:https://github.com/digininja/DVWA.git
1.Move DVWA into ServBay’s root directory (/Applications/ServBay/www/)
Then modify the config.inc.php.dist file suffix to config.inc.php, and modify the database user name and password. Other configurations do not need to be changed.

2.Configure database:

Edit config.inc.php:

3.Visit https://servbay.host/ ，click phpmyadmin, create a dvwa database

4.Go to https://dvwa.servbay.test/setup.php and click Create / Reset Database

5.Default login: admin / password

6.The building is complete!🎉You can choose a security level (Low / Medium / High / Impossible) and start hacking

Step 3: 5 More Vulnerable Platforms to Try💡

🧠Want to go further?
Use Docker Compose to manage multiple platforms
Deploy CTFd to create your own CTF challenge system
Pair with Burp Suite, Wireshark, etc., for deep packet inspection
Regularly update images to match modern threats and CVEs
A 5-Minute Lab Setup is Totally Possible!🎉
ServBay offers a fast, reliable, and developer-friendly way to build a local cybersecurity lab on macOS. Paired with DVWA and other recommended platforms, this environment will help you gain a strong foundation in web security testing and prepare you for future CTFs, internships, and red/blue team scenarios.

PHP 8.4’s array_find Function: Innovative and Practical, or Just a Nice-to-Have?

Matty — Tue, 15 Apr 2025 00:34:21 +0000

💡PHP 8.4 introduces a new function, array_find, which makes array searching more elegant. But is it really worth using? This article comprehensively analyzes its practicality, limitations, and best practices.↓

PHP 8.4 has been released on schedule, with new features rolling out left and right. Among them, the introduction of the array_find() function caught my attention. This function allows developers to define custom search conditions using a closure, making array searches more flexible and modern.

In the PHP community, updates like these—often seen as “syntactic sugar”—tend to spark debate: some think it’s a practical evolution, while others question whether it’s just “extra fluff.”
So, is array_find() really useful? Should we widely adopt it in our projects? Let’s explore this from various angles.
🧠The Core Ability of array_find: Searching Goes Beyond Value Matching
Let’s take a look at an example. We have a set of user data and need to find a user who is 30 years old and whose name starts with “A.”
Traditional Way:

Using PHP 8.4’s array_find():

You’ll notice that the latter is more concise, expressive, and reduces the likelihood of errors in manually written loop logic.
✅Advantages: Modern, Flexible, Readable
Improved Readability: Encapsulating the search logic in a closure makes the intention clearer.
Consistent with Functional Paradigm: It aligns with the style of functions like array_map(), array_filter(), etc.
More Flexible: Easily enables condition-based searches, applicable in data processing, configuration filtering, and more.

❌Limitations: Not Suitable for All Scenarios
Compatibility Issues: Requires PHP 8.4, and many projects haven’t upgraded to this version yet.
Unnecessary for Simple Searches: If you’re simply searching for a specific value, in_array() or array_search() is still lighter.
Learning Curve: For developers new to PHP, closure syntax might be a bit unfamiliar.

Usage Advice: Weighing the Scenario and Code Style
If you’re developing a new project and have already migrated to PHP 8.4, feel free to use array_find().
It makes the code more modern and maintainable. Especially when paired with modern development tools (like ServBay) to manage your local PHP environment, you can almost embrace new features cost-free and enhance the overall development experience.
However, if you’re maintaining legacy projects or just need a quick search for a simple value, sticking to the basics might be a better choice.

⏬GitHub Demo Download:
https://github.com/Taurus0109/PHP-8.4-s-array_find-/blob/19d0af3dac2a2a149b0d8466e527a13aa902e2a6/php8.4-array_find-demo.zip
In this demo, you will find:
✅A comparison of array_find() with traditional foreach loops.
✅A quick execution example.
✅Recommended use of ServBay to easily run PHP 8.4 locally.

Conclusion: Worth Trying, But Not a Silver Bullet✅
array_find() is a clear and useful addition. It won’t change your development world, but it can save you from redundant work when needed.
Modern PHP is becoming more elegant, and we should consider aligning our code style with this trend.
What do you think?Do you plan to use array_find() in your projects? Are you more inclined to try new PHP features, or do you prioritize stability and compatibility? Feel free to comment and share your thoughts!

Integrating Vite into WordPress Plugins for Modern Frontend Development (React Approach)

Matty — Thu, 10 Apr 2025 15:20:31 +0000

💡Tech Stack: Vite 4 + React 18 + TypeScript + WordPress REST API
Environment Tool: ServBay (Multi-PHP Version Management)

WordPress is an open-source content management system (CMS) powering over 43% of global websites. Its plugin architecture allows extending functionality via PHP and JavaScript, though traditional development often relies on jQuery and outdated toolchains, leading to slow builds and debugging complexity.Vite, developed by the creator of Vue.js, is a modern frontend build tool .
Challenges in Traditional WordPress Plugin Development
❌ Slow Build Process: Legacy tools like Webpack or Gulp are slow to start up and require manual page refreshes during debugging.
❌Lack of Hot Reloading: Traditional setups lack hot module replacement (HMR), requiring page reloads every time the code changes.
❌Limited Tech Stack: It’s difficult to integrate modern front-end frameworks like React or Vue with traditional WordPress plugin development.
Advantages of Integrating Vite
✅Fast HMR: Vite provides near-instant updates, preserving component state and boosting developer efficiency.
✅ Native ES Modules: Development with ES modules, no need for complex bundling.
✅Modern Ecosystem: Vite comes with built-in support for TypeScript, CSS preprocessors, dynamic imports, and more.
👉Objectives
1、Development Environment: Enable fast hot-reloading and integration with WordPress REST API.
2、Production Build: Automate static asset optimization and path adjustments for production.
3、Multi-PHP Version Testing: Ensure plugin compatibility with multiple PHP versions.

Solution Architecture👇
Architecture Diagram

Environment Setup
1.Local WordPress Environment
Here I take ServBay as an example. （ServBay is an all-in-one web programing environment manager that supports Golang, PHP, and Node.js while integrating Nginx, MySQL, PostgreSQL, and Redis for seamless environment switching.）
Use ServBay to create an environment with:
PHP 8.2 + 7.4 (Multiple PHP versions)、MySQL 8.0、Auto-generated HTTPS certificate (*.test domain)
Initialization command:

2.Project Directory Structure

Implementation Steps
1.Setting Up the Vite Project
Initialize a React + TypeScript project:

Key configuration (in vite.config.ts):

2.Dynamically Load Assets
In plugin.php, implement environment checks:

3.REST API Interaction Example
Wrap API requests in a utility (in src/lib/wp-api.ts):

React component calling the API (in src/components/PostList.tsx):

Production Environment Optimizations
Build Configuration

Generated static assets include:Hashed filenames for cache control、Code minification (Terser + CSSNano) 、Code splitting

Deployment Considerations

File Path Issues: Check the dist/manifest.json file paths to ensure all assets are correctly loaded.
HTTPS & Mixed Content Warnings: Ensure all production resources are loaded over HTTPS to avoid browser warnings.
PHP Version Compatibility Testing: Use ServBay snapshots to test plugin compatibility across different PHP versions:

Comparison of Technical Solutions

Best Practices
1.API Security
When registering custom REST API endpoints in WordPress, add Nonce validation:

2.Performance Monitoring
Use vite-plugin-bundle-analyzer to analyze your build size:

🔥 XAMPP is Dead？ Docker is Overkill？Try The Lightning-Fast Dev Tool 🔥

Matty — Thu, 03 Apr 2025 17:37:18 +0000

Calling all devs: Tired of XAMPP crashes? Overwhelmed by Docker’s YAML hell? ServBay just dropped a 3-second setup nuke on local development. Best local server environment for web developers💥

🚨 Why Devs Are Ditching XAMPP/Docker 🚨
XAMPP PTSD:

"My XAMPP PHP 7.4 died on macOS Sonoma...again." (Reddit r/webdev, 2.3k upvotes)
"Why does localhost take 8 seconds to load?!" (Hacker News rant)
"Spent 4 hours fixing Apache configs instead of coding" (Twitter dev)
Docker Nightmares:

"My Docker setup needs 18GB RAM to run WordPress. WTF?" (r/programminghumor)
"Lost a day debugging a Dockerfile typo" (Dev.to comment)

XAMPP vs Docker vs ServBay
XAMPP is like that old Honda Civic your uncle still drives—it works, but you wouldn’t call it cutting-edge.

✅ Why People Still Use XAMPP:
✔ One-click install—even your grandma could set it up.
✔ Great for beginners, no fancy configs needed.

❌ Why XAMPP Can Drive You Crazy:
✘ Slower than your grandma’s WiFi—it hogs CPU and RAM like it’s the ‘90s.
✘ No isolation—switching PHP versions? Good luck.
✘ Mac users, beware—expect weird compatibility issues.

Docker is like an F1 car—powerful, fast, but incredibly hard to drive if you don’t know what you’re doing.

✅ Why Developers Love Docker:
✔ Total isolation—every project gets its own clean environment.
✔ Runs faster than XAMPP, thanks to lightweight containers.

❌ Why Docker Can Be a Nightmare:
✘ Learning curve from hell—if you don’t know DevOps, good luck.
✘ Way more setup than you probably want—writing Dockerfiles, managing images… do you really have time for that?

ServBay: The Best of Both Worlds

Fast like Docker, simple like XAMPP. That’s the magic of ServBay.

✅ Why ServBay Stands Out:
✔ Super lightweight—runs way faster than XAMPP, without eating all your RAM.
✔ One-click setup—PHP, MySQL, and Node.js, ready to go.
✔ Environment isolation—run different PHP versions for different projects, no problem.

❌ Only downside?
✘ It’s still new—not as many online tutorials as XAMPP or Docker. (But hey, that’s what support teams are for, right?)

Who’s it for?
If you want something fast, lightweight, and beginner-friendly, ServBay is your best bet.

Ready to Make Your Life Easier? Download ServBay Now!Thousands of developers have already made the switch—what are you waiting for?

👉 Download ServBay for All-in-one web programming environment

Boost Your Golang Development Efficiency with These Tools

Matty — Fri, 28 Mar 2025 05:53:41 +0000

Recently, I’ve been rewriting a message queue service in Golang, and once again, I’m amazed by its concurrency model. Whether you’re building web services, microservices, or CLI tools, Go just gets the job done. However, for developers constantly switching projects, the most frustrating part isn’t writing code—it’s setting up the development environment over and over again, from configuring GOPATH to setting up database connections.
To streamline my workflow, I explored several tools that significantly improve efficiency. Here are my thoughts on them—I hope they help you as well!

1. Local Development Environment: ServBay

While Golang itself has a simple runtime environment, things get complicated when you need databases, Nginx, caching, etc. ServBay is an all-in-one local development environment manager that supports Golang, PHP, and Node.js while integrating Nginx, MySQL, PostgreSQL, and Redis for seamless environment switching.

When to Use ServBay?

✅ Need to quickly set up a Golang + MySQL/PostgreSQL/Redis environment on your local machine
✅ Work on multiple projects spanning different stacks (Golang + PHP + Node.js) and require easy version switching
✅ Need HTTPS/SSL certificates but don’t want to manually configure Nginx

ServBay eliminates tedious manual setup, letting you focus on coding rather than environment issues.
🔗 https://www.servbay.com/

2. Code Quality Checking: golangci-lint

You can’t rely on manual inspection for code quality. golangci-lint is the most powerful Go linting tool, integrating multiple linters such as govet, staticcheck, and golint to detect hidden bugs, performance issues, and style violations.

Why Use golangci-lint?

✅ One-click scanning to catch potential issues before they hit production
✅ Integrates with CI/CD pipelines (e.g., GitHub Actions) for automated quality checks
✅ Essential for team collaboration, enforcing a consistent coding style and reducing code review disputes

Example: Automating Code Checks in CI/CD

With this setup, every code commit will automatically be checked to prevent low-quality code from entering your repository.
🔗 https://golangci-lint.run/

3. Dependency Management: Go Modules

Dependency management was a major pain point in early Go versions due to the restrictive GOPATH system. Fortunately, Go Modules replaced GOPATH starting from Go 1.11, solving versioning and project isolation problems.

Why Use Go Modules?

✅ No need to depend on GOPATH—projects can be placed anywhere
✅ Supports versioning, preventing third-party library updates from breaking your code
✅ Built-in proxy mechanism for faster dependency downloads
🔗 https://go.dev/ref/mod
4. Test Automation: Gotests

Writing unit tests is crucial in Golang projects, but manually creating _test.go files is tedious. Gotests is a command-line tool that automatically generates test cases based on your Go code, making testing more efficient.

When to Use Gotests?

✅ Ideal for Test-Driven Development (TDD) workflows
✅ Perfect for large-scale projects to streamline test writing

🔗 GitHub: https://github.com/cweill/gotests

5. Performance Optimization: pprof

Golang’s concurrency model is powerful, but mismanaged Goroutines can lead to memory leaks and high CPU usage. The pprof package helps diagnose performance bottlenecks by providing real-time profiling data.

When to Use pprof?

✅ Identify which parts of your code consume too much CPU
✅ Monitor Goroutine counts to prevent excessive memory allocation
✅ Optimize memory usage and reduce Garbage Collection (GC) overhead

Example: Enabling pprof in a Go Server

Then, open http://localhost:6060/debug/pprof/ in your browser to inspect CPU, memory, and Goroutine usage in real time.
🔗 https://pkg.go.dev/net/http/pprof

These tools have saved me countless hours, and I hope they help you as well! Are there any other tools you love using in Golang development? Let’s discuss in the comments!