Overview of UI and CSS Frameworks
A directory of CSS and UI frameworks used to build responsive web interfaces, ranging from utility-first frameworks to full-featured component libraries.
Nguyen Le Phong's Technical Notes
website·Indexed 29 days ago
http://nguyenlephong.github.io/notesA collection of unstructured technical notes and guides covering frontend development, interview preparation, and computer science fundamentals. Topics include the OSI Model, TCP/HTTP, JavaScript ES6, ReactJS project structure, data structures, and web performance metrics like Web Vitals.
What's inside Nguyen Le Phong Notes
Overview of popular JavaScript Frontend Frameworks
A comparison of widely used JavaScript frameworks for frontend development, detailing their origins and core features such as data binding and DOM implementation.Overview of Glance translation utility for macOS
Glance is a tiny menu-bar utility for macOS (version 13+) that provides instant translation of selected text in any application, including Safari, Mail, Slack, Zalo, Chrome, VS Code, and Notion. It features a floating panel that appears beside the cursor without stealing focus. It uses the Google Translate engine and does not require an API key or signup. The application is a lightweight Swift binary (< 1 MB) that operates without a Dock icon.Overview of Ports and Adapters (Hexagonal Architecture)
Ports and Adapters, also known as Hexagonal Architecture, is an architectural pattern designed to separate the core business logic (the domain) from external concerns like databases, third-party vendors, and user interfaces. The primary goal is to ensure that the 'part that makes money' (business rules) remains independent of the technologies used to implement it, preventing software decay caused by tight coupling.Overview of BonBon O2O Car Care Platform
BonBon is an O2O (Online-to-Offline) platform designed to connect car owners with a network of garages and car care centers in Vietnam. The platform acts as a 'thin connection layer' over existing independent shops rather than building its own chain. Its primary goals are to provide car owners with transparency regarding service status and pricing, and to help small-to-medium shops manage orders, reduce leakage, and reach new customers.Overview of requirements modeling types and purposes
Requirements modeling uses structured visuals or descriptions to clarify system behavior and constraints before or during development. It helps expose gaps, makes assumptions visible, and provides delivery teams with clearer inputs than prose alone. Key model types include:
- Scope models: Define the boundaries of the solution.
- Process models: Reveal handoffs and workflows.
- Rule models: Capture hidden or complex logic.
- Data models: Ensure consistent terminology and entity definitions.
- Interface models: Protect the 'last meter' of user interaction and signal dependencies.
Overview of the Agentic Development Life Cycle (ADLC)
The Agentic Development Life Cycle (ADLC) replaces the traditional sequential SDLC by using AI agents to drive the execution of most development phases in parallel. While the SDLC is characterized by locked, human-driven sequential phases (where QA happens after design), the ADLC focuses on a continuous loop where agents autonomously handle coding and testing, while humans focus on intent, orchestration, and verification.
The ADLC Workflow Loop:
- Define Goal: Establish intent, outcomes, and constraints.
- Build PRD: Create a Product Requirements Document that agents can execute against.
- Write Skills: Define the tools, prompts, and capabilities agents will use.
- Orchestrate Agents: Manage the agent workflow.
- Autonomous Coding: Agents write, refactor, and call tools.
- Autonomous Testing: Agents run their own test suites and evaluations.
- Manual Evaluation & Observability: (Human Step) Approve, correct, and steer the output.
- Deployment: Auto CI/CD executed via agents.
- Monitoring & Feedback: Live performance and drift detection feed back into the Goal phase.
Understand the three levels of AI literacy
AI literacy is categorized into three levels based on how a user designs the work system around AI. These levels are not job titles but ways of working that a user can apply differently across various tasks.Level Main question Common tools Workflow key Main risk AI Consumer How do I get a better answer? ChatGPT, Claude, Gemini, Perplexity, NotebookLM, Copilot, Notion AI Task + context + source + output format + review standard One-off answers with low leverage AI Collaborator How do I make repeated work easier next time? Custom GPTs, Claude Projects, Gemini Gems, Airtable, Sheets, Zapier, Make, n8n Input → normalize → transform → review → handoff Workflow works only in your head AI Orchestrator How do I design a small system that can carry part of the work? Copilot Studio, Zapier Agents, Lindy, Relevance AI, Codex, Cursor, Claude Code, LangGraph, CrewAI Roles + tools + permissions + checkpoints + metrics Autonomy without guardrails Understand End-to-End (E2E) Testing basics
End-to-End (E2E) testing verifies the entire application flow from start to finish in real-world scenarios, including interactions with hardware, networks, databases, and other applications. It is typically performed after all individual functions and systems have been tested to ensure that information is transmitted correctly between different system components and to identify interdependencies.Navigate the fork between Technical (IC) and Managerial tracks
The software engineering path typically begins with a shared Individual Contributor (IC) trunk (e.g., Engineer I $\rightarrow$ II $\rightarrow$ III). After this, the path forks into two parallel, equally senior tracks. Moving into management is a sideways move into a different role, not a promotion from senior IC.
- Technical (IC) Track: (e.g., Staff $\rightarrow$ Senior Staff $\rightarrow$ Principal Engineer). Focuses on deep technology, systems thinking, and influence without direct people management.
- Managerial Track: (e.g., Engineering Manager $\rightarrow$ Director $\rightarrow$ VP of Engineering). Focuses on creating impact through people, organization, and team growth.
Understand the fundamental shift in software roles due to AI
AI is shifting the center of gravity for software roles from 'producing the artifact' (writing code, documentation, tests, or designs) to 'specifying intent, orchestrating work, and verifying results.' As the cost of production drops, the primary bottlenecks and value-drivers become framing the right problem, exercising judgment, and evaluating whether the AI-generated output is correct. A critical emerging competency across all roles is 'context engineering'—the discipline of designing the background, constraints, and intent provided to AI to ensure high-quality output.Identify and overcome the information consumption trap
The 'information consumption trap' occurs when a learner accumulates knowledge without progressing through the stages of real comprehension: moving from knowing about a thing, to understanding it, and finally to being able to use it. This often manifests as 'productive procrastination,' where collecting more input feels like progress but protects the individual from the risk and vulnerability of actual practice.