Improve dev guides (#30823)

* Specify node v16 in engines in package.json

- The project does not work with node v20 yet

* Fix undeclared variable in example snippet

* Update Popover docs

* Update Request mocking docs

* Revert "Specify node v16 in engines in package.json"

This reverts commit 84990e1c7b6956e08dc7b696e81e2888e1cb4537.

- 'yarn build-static-viz' was failing because of this change

docs/developers-guide/frontend.md

@@ -404,7 +404,7 @@ const Foo = () => <div className={style.primary} />;
 ```javascript
 import styled from "@emotion/styled";
 
-const FooWrapper = styled.div`
+const Foo = styled.div`
   color: ${props => props.color};
 `;
 
@@ -436,15 +436,14 @@ In Metabase core, they are visually responsive: they appear above or below the e
 
 #### When creating custom questions
 
-1. From home, click on `Ask a question`
-2. Click on `Custom question`
-3. 👀 The option picker next to `Pick your starting data` is a `<Popover />`.
-4. Choose `Sample Database`
-5. Choose any of the tables, for example `People`
+1. From home, click on `New` and then `Question`
+2. 👀 The option picker that automatically opened next to `Pick your starting data` is a `<Popover />`.
+3. Choose `Sample Database` if not already selected
+4. Choose any of the tables, for example `People`
 
 Here, clicking on the following will open `<Popover />` components:
 
-- `Columns` (right-hand side of section labeled `Data`)
+- `Pick columns` (arrow on the right-hand side of a `FieldsPicker` control in the section labeled `Data`)
 - Gray icon of a grid with + below section labeled `Data`
 - `Add filters to narrow your answers`
 - `Pick the metric you want to see`
@@ -511,7 +510,7 @@ Key points:
 
 ### Request mocking
 
-We use `fetchMock` to mock requests:
+We use [`fetch-mock`](https://www.npmjs.com/package/fetch-mock) to mock requests:
 
 ```tsx
 import fetchMock from "fetch-mock";
@@ -528,7 +527,7 @@ const setup = ({ collections }: SetupOpts) => {
 };
 
 describe("Component", () => {
-  it("renders correclty", async () => {
+  it("renders correctly", async () => {
     setup();
     expect(await screen.findByText("Collection")).toBeInTheDocument();
   });
@@ -536,5 +535,5 @@ describe("Component", () => {
 ```
 
 Key points:
-- Create `scope` in `setup`
+- `setup` function
 - Call helpers from `__support__/server-mocks` to setup endpoints for your data