Welcome! to the new topic and question forum!

1. Select the text you want to change in one you code that there is duplicates of.

2. Press Ctrl+D (Windows/Linux) or Cmd+D (Mac) to add the next section of code selected text to your selection.

3. Repeat Ctrl+D (Windows/Linux) or Cmd+D (Mac) to add more section of code.

4. Once you've selected all sections of code you want to change, simply start typing to replace the selected text with your desired new text.

Update your feature branch by committing any changes then checkout main, pull and checkout your feature branch.

Then merge main into your feature branch. In bash for the auto prompted commit message screen.

Press the "i" key on your keyboard to enter insert mode in the Vim text editor. You should see "-- INSERT --" appear at the bottom left corner of the screen.

Once you have entered your commit message, press the "Esc" key on your keyboard to exit insert mode.

Type :wq and press "Enter" to save the commit message and exit the text editor. This command stands for "write" (save) and "quit."

You may also need to press the "Esc" key on your keyboard to exit the Vim editor if it's currently in insert mode.

Type :q! and press "Enter" to forcefully quit the Vim editor without saving changes. This command stands for "quit" and discard changes.

If you don't get a prompted bash screen commit your changes as usual.

Go to File > Preferences > Settings and search "Startup Editor" Then choose "None" from the drop-down menu.

On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I

When using the node.js sharp library on Windows and you encounter this error while trying run your app.

Use:

npm install --force @img/sharp-win32-x64

It's worth noting that using --force should be done cautiously. It might be necessary in some situations, but it can potentially lead to problems if there are compatibility issues or conflicts between packages.

It's usually better to understand and resolve the root cause of any installation issues rather than relying on the --force flag.

The solution is to create your date(s) inside useEffect. Now only the client computes the new date and updates the DOM.

GitHub react-syntax-highlighter AVAILABLE_LANGUAGES_PRISM.MD

wrap your code in three back ticks like:

```javascript

Your JavaScript code...

```

Here is were you can get a fresh JWT secret from Vercel: https://generate-secret.vercel.app/32

Replace router with navigation

import { useRouter } from 'next/router';
import { usePathname } from "next/navigation";

We also need to replace useRouter with usePathname

const router = useRouter();
const pathname = usePathname();

And when using as a link remove router

className={router.pathname == "/" ? "active" : ""}
className={pathname == "/" ? "active" : ""}

I know in Next.js, you can create dynamic routes using square brackets "[]". But what name do I use in the brackets?

Example:

<figure>
  <video controls width="320" height="240">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Video Caption</figcaption>
</figure>

The figure tag adds more meaning semantics to the HTML document when compared to the image tag.

According to to the Free Code Camp forum we should be keeping the figcaption with the figure tag even if we are not using it.

wp.data.select( 'core/edit-post' ).getPreferences().panels;

The CSS property white-space controls how whitespace and line breaks within an element are displayed. The default value for white-space is normal, which collapses multiple spaces and line breaks into a single space and wraps text as needed.

In this mode, multiple spaces and line breaks are treated as a single space.

CSS Tricks has a complete guide to white-space

The first easiest option is to simply style the element you're inserting the text into with the following CSS property:

white-space: pre-wrap;

I found the trick is to nest client side components in server side components.

Use server side components as the outer frame of the UI and nest interactive client side components inside.

This will create a server side layout to pass down all the properties you need to the client side component.

So for example you could use the UI wireframes to visualize all the server side components like header or nav and sidebar and main. From there any time you need a new client side you can import it into the parent server component.

This will create a hierarchy Like

page (server side)
-components
--TopicList (server side)
---TopicListItem (client side)

As you can see here this keep all the client side elements to a minimum.