Scrollycoding - a revolutionary method for creating programming blogs? (video, 8 minutes)
In his latest video, Rodrigo Pombo discusses an exciting project he has been working on for the past few months. Although it is not finished yet, he showcases the use of Next.js to create a fake blog built with MDX instead of standard Markdown. He starts by introducing the scrollcoding package and points out that the version number looks unstable. Following that, he transitions to App.js to include the default styles for scrollcoding components and adds some boilerplate code with components he wishes to access from MDX. In the MDX world, he clarifies that you usually have a file where custom components can be included.
Once the necessary elements are ready, Rodrigo demonstrates how to navigate to any of the posts and begin using the hike component. He explains the syntax, which requires a hike element containing stephead elements for each step. Within each stephead, he specifies how to include the code, which then translates to the step content. After saving the file, viewers can see the content change in the browser as they scroll through the page.
Meanwhile, Rodrigo shares another example, this time about the library called react-sbg-curves. He creates another hike component with three steps, copying the content and code. Officially, he introduces an error caused by using an external library for the demo, but this presents no issue for him as he shows how to add it as a dependency in the hike component. Here, he utilizes the code sandbox bundler behind the scenes to rectify the error. Additionally, he demonstrates how to set a focus prop to highlight different sections of code when a step is selected.
Further in the video, Rodrigo discusses how to add links to specific parts of the code and how this operates when more than one file is involved. He shows how to change styles of any element, utilizing either plain CSS or advanced techniques like Tailwind. He also presents modifications regarding the visibility of columns on smaller screens, introducing slot elements to display code and previews. Through this in-depth introduction, viewers can learn how to effectively implement and style components in their own projects.
At the end of the video, Rodrigo encourages viewers to like and subscribe to his channel, emphasizing that this might be their only chance to track his progress. Audiences are sure to appreciate the insights he shared. As of the time of writing this article, the video has garnered 11,311 views and 354 likes, reflecting a growing interest in his work on the CodeHike project and other upcoming news.
Toggle timeline summary
-
Introduction to the project and intention to demonstrate a blog conversion.
-
Outline of the conversion from a basic blog post to a new format.
-
Description of the fake blog built with Next.js and MDX.
-
Adding the scrollcoding package to the project.
-
Instructions to include default styles in App.js.
-
Working with MDX components to build posts.
-
Syntax for implementing hike components with step headings.
-
Introduction to a sample post about the react-sbg-curves library.
-
Handling an error due to an external library in the demo.
-
Using focus props in hike steps to highlight code sections.
-
Adding links to specific code sections from the text.
-
Options for styling components, including using Tailwind.
-
Adjusting layout behavior for different screen sizes.
-
Providing a code sandbox link for viewers to explore the project.
-
Conclusion of the video, mentioning it as the creator's first YouTube video.
Transcription
I want to show you something I've been working on for the last months, it isn't ready yet but I want to show it anyways. We are going to convert this blog post into this one. We are using a fake blog, built with Next.js, it's a fork of the official blog starter from the Next.js repo, but with MDX instead of markdown. Let's start by adding the scrollcoding package. As you can see the version number doesn't look very stable. Next we go to App.js to include the default styles for the scrollcoding components. And then we add some boilerplate with the components we want to access from the MDX. When you work with MDX you usually have a file like this where you include your own components. Once we have that we can go to any of the posts and start using the hike component. The syntax works like this, we need a hike element and inside we put stephead element for each step. Inside the stephead goes the code and after that we can put any markdown. That will be the step content and the same for the next step. We save the file and we should see this thing on the browser that changes the step as we scroll. Now let's go to the post we saw at the start of the video. It's another fake post about a library called react-sbg-curves. We create another hike, this time with 3 steps and copy the content and the code. When we save the file we should see the hike as before. This time there's an error because we are using an external library for the demo. No problem, we can add it as a dependency here on the hike component. We are using the code sandbox bundler behind the scenes so the error should be fixed now. Each step can have a focus prop to highlight different parts of the code when the step is selected. For example for the second step we want to focus on line 20. And for the last one the focus should be from line 17 to 22. Now suppose that in the text I mention something about the points variable. I can add a link to that part of the code. And when I save this there will be a small icon here that we can click to change the focus. Let's add one more. This is also very useful when you have more than one file. So let's add another file. And now I can add a link to a specific part of that file. We can also change the style of any element. Most code hike elements come with a class so we can use plain CSS. But we can also use CSS in JS or in the case of this blog we are using Tailwind. Let's say we want to change the opacity of the inactive steps. First we inspect the class and copy it. And then we need a classes object. Use the original class as the key and pass any custom class as the value. Finally we pass the object as a prop in the hike component. We also don't need the border anymore so we remove it. And we can change the style for the right part too. Let's change the color of the three little buttons. Now let's change the zoom to see what happens when there isn't space for the right column. It disappears. If we want to show the code or the demo on small screens we need to do it explicitly. We use the code slot element to display the code. We can change the height if we want. And we use the preview slot to display the preview. For this one we can change the zoom if we want. These slots are only shown on small screens so if we zoom out the right column is back and the slots disappear. One last thing, I mentioned that we are using the code sandbox banner. We have a link here that takes us directly to a code sandbox that has the code and files that come from the MDX. And here we can edit it or do whatever we want. All these things are part of a bigger project called CodeHike and I hope to have more news soon. This was my first YouTube video and I'm not sure if there will be more. So like and subscribe, this could be your only chance.