7. Front-end Development Toolbox/Stack

This section highlights a modern, contemporary, and bleeding edge toolkit for front-end development.

7.1 — A Modern Frontend Development Toolbox/Stack

While every developer eventually curates a set of tools aligned with their preferences, beginners would be wise to start with the following tools in 2024:

Code Editor:
- VSCode: A versatile and widely used editor, offering robust features like IntelliSense, debugging, and extension support.
Version Control System:
- Git: An essential tool for source code management, allowing effective tracking of changes and collaboration.
Collaboration Platform:
- GitHub: A popular platform for hosting Git repositories, facilitating code reviews, project management, and team collaboration.
Development Environment:
- Node.js & pnpm: Node.js provides a JavaScript runtime and CLI tools, while pnpm is a modern powerful javascript package manager for handling dependencies.
Code Organization:
- ES Modules (ESM): a standard in modern JavaScript, offering an efficient way to manage and encapsulate code through import/export syntax (i.e. favor ESM over Common JS Modules, yes even in Node.js).
Building & Serving:
- Vite: A fast and modern build tool, offering out-of-the-box support for TypeScript, JSX, CSS, and more.
Code Quality Tools:
- ESLint & Prettier: ESLint helps enforce coding standards, while Prettier automatically formats code for consistent styling.
Frontend Development Libraries:
- SolidJS: A declarative JavaScript library for creating efficient and reactive web interfaces.
Testing Frameworks:
- Vitest & Playwright: Vitest provides a fast unit-testing framework, while Playwright is ideal for end-to-end testing across multiple browsers.
Hosting:
- Netlify: a cloud computing company that offers hosting and serverless backend services for web applications and websites. It is particularly popular in the modern web development landscape for its simplicity and integration with various modern development workflows, especially those involving Jamstack architecture (JavaScript, APIs, and Markup)

Learn more:

Reactivity with SolidJS from Frontend Masters

7.2 — A Contemporary Toolbox/Stack

Simply replace the "Frontend Development Libraries" section above with React (or alternately, Vue.js, Angular, Svelte) and its ecosystem, and you'll have a contemporary toolkit for front-end development.

Learn more: