Both Metamask and web3.js seems to be enabling a DApp communicates to a remote ethereum node.
There are a few different aspects to developing blockchain applications with Ethereum:
Smart contract development - writing code that gets deployed to the blockchain with the Solidity programming language.
Developing websites or clients that interact with the blockchain - writing code that reads and writes data from the blockchain with smart contracts.
Web3.js enables you to fulfill the second responsibility: developing clients that interact with The Etherem Blockchain. It is a collection of libraries that allow you to perform actions like send Ether from one account to another, read and write data from smart contracts, create smart contracts, and so much more!
MetaMask is a browser extension that allows web applications to interact with the Ethereum blockchain. For users, it works as an Ethereum wallet, allowing them to store and send any standard Ethereum-compatible tokens
These two definitions confuse me a lot.
My question is, in a conncetion, is Metamask sitting between web3.js and Ganache？ Who actually talk to the ethereum node?