Have you ever experienced frustration after color grading a video in DaVinci Resolve, when you find that the exported result is dull and doesn't resemble the vibrant colors you saw in the preview window? This guide will help you ensure that what you see in DaVinci Resolve is exactly what you get in the final export.

Before starting your color grading process, it's crucial in the "Preferences" tab under “General”, to enable "mac display color profiles for viewers". Don't forget to save your changes and restart DaVinci if this is your first time enabling this setting.

To set up the proper color space settings, in the "Project Settings" panel, navigate to the "Color Management" section, and set the "Timeline Color Space" to "DaVinci WG/Intermediate". This color space offers excellent dynamic range and retains highlight detail, allowing for more creative freedom in your color grading.

In the coloring page, make sure that the last node in your node tree has a color space transform effect, and set the output color space to "Rec 709". This allows you to view your footage at the same level of color and light range as most standard screens.

Finally, in the export settings, under "Advanced Settings", set the "Color Space Tag" and "Gamma Tag" to "Rec 709".

After following these simple steps, you'll never have to worry about mismatched colors in your exported videos again! Your finished product will always look just as vibrant and true to life as it did in the DaVinci Resolve preview window.

If you’re programming a site with a highly stylized design it’s likely some of your components will need to change depending on what page the user navigates to. This could be anything from a text color change to adding completely new elements. I wanted to share a simple navbar component that returns differently based on next/router’s pathname property.

This code can be used to conditionally render two completely different components for each page, it doesn’t have to be the nav specifically 🙂

First let’s import next/router and set up a component function:

Next we’re going to set up the router to use in our return:

After we do this we can set up our return using the pathname property:

We’re using conditional operators to check if the user is on the Our Services page. If they’re not on that page the default will return.

This simple code allows us to create two entirely different navigations based on what page the user navigates to. This gives us a lot of flexibility with what we can display.

💡 Adding the modified component to additional pages

We could call it a day here if we only wanted to see the alternate navbar on a single page, but what if we wanted to see the alternate nav on the blog too? That’s not too hard at all. By modifying the first condition in our operator we can check for multiple pages.

Now our special navbar is rendering on the blog page too 🎉

I hope you found this helpful when trying to add a conditional component return on your site. If you have any questions or want to say hi, shoot me an email [email protected]