Recommended Development Environments for Web Coding: Thorough Explanation from Hardware to Software

An appropriate development environment is essential for efficient web development. This article introduces the best development environment for web coding, from hardware to software.

1. Hardware

Macbook Air

Reasons for recommendation:

• Fanless and quiet, comfortable even during long hours of work
• High-speed M1/M2/M3 chips for smooth development work.
• Battery-powered and portable, even during power outages
• More flexible work environment than desktop computers such as iMacs

How to install:

1. Purchase from Apple’s official website or an authorized reseller.
2. Perform initial setup and install necessary software

External Display Dell S2721QS

Reasons for recommendation:

• Large 27-inch 4K screen improves work efficiency
• Flicker-free and easy on the eyes
• Excellent cost performance
• Can be used in multiple units to create a vast work space (the author is using 4 units)

How to install:

1. Purchase at online stores or electronics retailers
2. Connect to MacBook Air via cable (USB-C to DisplayPort/HDMI)
3. Adjust the placement and resolution in the display settings of macOS

Magic Keyboard (with numeric keypad) – English (US)

Reasons for Recommendation:

• US keyboard layout is suitable for programming (easy entry of symbols)
• Comfortable with numeric keypad for number entry
• Compatible with Apple products and easy to set up

How to install:

1. Purchase the English (US) version from Apple’s official website
2. Pair via Bluetooth or connect with Lightning-USB cable

Magic Trackpad

Why we recommend it:

• Gesture settings allow for more control than a mouse.
• Example: 3-finger drag setting eliminates the hassle of mouse operation
• Large operating area for comfortable operation

How to install:

1. Purchase from Apple’s official website
2. Pairing via Bluetooth
3. Customize gestures in System Preferences

Plugable USB-C Conversion Graphic Adapter

Recommended Reason:

• Enables multiple screens on MacBook Air and other models with limited display output ports
• USB-C connection for easy expansion

How to install:

1. Purchase from online store
2. Connect to the USB-C port on the MacBook Air and use an HDMI cable to connect to the display
3. Install driver if necessary

Thunderbolt Docking Station

Why we recommend it:

• Connects multiple peripherals through a single port
• Easily manage cables and keep your desk area clean

How to install:

1. Check for compatible models and purchase from online stores.
2. Connect to MacBook Air with Thunderbolt cable
3. Connect peripherals to the docking station

2. Software

Chrome

Why we recommend it:

• Developer tools are easy to use and versatile
• Extensions abound to support development
• Essential for cross-browser testing

How to install:

1. Download and install from the official website
2. Add the necessary developer extensions

Visual Studio Code

Why we recommend it:

• Currently the most popular code editor
• Extensive extensions support various development languages and frameworks
• Free and highly functional

How to install:

1. Download and install from the official website
2. Install necessary extensions (e.g. PHP Intelephense, ESLint, Prettier)

MAMP

Why we recommend it:

• One-click setup of Apache, MySQL, PHP environment
• Low memory and disk consumption compared to Docker
• Easy to use GUI

How to install:

1. Download and install MAMP from the official website.
2. Start the application and configure port settings, etc.

Gulp

Reasons for recommendation:

• Excellent task automation tool
• Sass compilation and browser auto-reload can be easily configured
• Lightweight by limiting tasks to the minimum necessary (Sass compilation, BrowserSync)

How to install:

1. Install Node.js
2. Initialize the project by running npm init in a terminal
3. Install Gulp and necessary packages with npm install --save-dev gulp gulp-sass browser-sync
4. Create gulpfile.js and define tasks

Sass

Why we recommend it:

• Streamline CSS writing and improve maintainability
• Flexible styling with variables, nesting, mix-ins, and other features

How to install:

1. Make sure Node.js is installed
2. Run npm install -g sass in a terminal
3. To use in conjunction with Gulp, define Sass tasks in gulpfile.js

WordPress

Reason for recommendation:

• The most used CMS in the world
• Many plugins and themes are available and highly customizable.
• Strong SEO, and can be used for a wide range of sites from blogs to e-commerce sites.

How to install:

1. Prepare local environment such as MAMP
2. Download the latest version of WordPress and install it on your local environment.
3. Create a database and set up wp-config.php
4. Access the installation screen and complete the initial settings.

WordMove

Reasons for recommendation:

• Easily synchronize local and production WordPress sites
• Migration of databases and files is automated, improving development efficiency

How to install:

1. Make sure Ruby is installed.
2. Run gem install wordmove in terminal
3. Create a Movefile in the root of the project and write the configuration
4. Perform synchronization by wordmove pull or wordmove push command