Scrollycoding - rewolucyjna metoda na tworzenie blogów programistycznych? (film, 8 minut)
Rodrigo Pombo w swoim najnowszym materiale filmowym omawia fascynujący projekt, nad którym pracował przez ostatnie miesiące. Chociaż nie jest jeszcze gotowy, ukazuje użycie Next.js do stworzenia fałszywego bloga z wykorzystaniem MDX zamiast standardowego Markdown. Na samym początku Rodrigo wprowadza nas w proces instalacji pakietu scrollcoding, zauważając, że numer wersji wygląda na niestabilny. Następnie przechodzi do pliku App.js, aby wprowadzić domyślne style dla komponentów scrollcoding, a także dodaje podstawowy kod z komponentami, do których chce uzyskać dostęp z MDX. W świecie MDX zazwyczaj mamy plik, w którym możemy włączyć własne komponenty.
Kiedy mamy już potrzebne elementy, Rodrigo pokazuje, jak możemy przejść do dowolnego postu i zacząć używać komponentu hike. Prezentuje składnię, która polega na tym, że wewnątrz elementu hike umieszczamy elementy stephead dla każdego kroku. W języku MDX Rodrigo wyjaśnia, jak umieścić kod w stephead, co następnie przekształca się w zawartość kroku. Po zapisaniu pliku można zobaczyć w przeglądarce, jak treści zmieniają się w miarę przewijania strony.
W międzyczasie, Rodrigo dzieli się innym przykładem, tym razem o bibliotece react-sbg-curves. Dodaje kolejny komponent hike z trzema krokami, kopiując zawartość i kod. Oficjalnie wprowadza błąd spowodowany użyciem zewnętrznej biblioteki do demo, ale nie stanowi to dla niego żadnego problemu. Rodrigo pokazuje, jak dodać tę bibliotekę jako zależność do komponentu hike. W tym przypadku używa bundlera code sandbox, co naprawia błąd. Dodatkowo, wykazuje jak ustawić prop focus, aby podświetlić różne sekcje kodu podczas wyboru kroku.
W dalszej części materiału Rodrigo omawia sposób dodawania linków do określonych sekcji kodu i jak to działa w przypadku wielu plików. Może wprowadzić zmiany w stylach dowolnego elementu, korzystając z CSS lub zaawansowanych technik, jak Tailwind. Prezentuje również modyfikacje dotyczące widoczności kolumn na małych ekranach oraz dodaje elementy slotu, aby ukazać kod i podgląd. Dzięki tak szczegółowemu wprowadzeniu, widzowie mogą nauczyć się, jak skutecznie implementować i stylizować komponenty w ich projektach.
Pod koniec swojego filmu, Rodrigo zachęca widzów do polubienia i subskrybowania jego kanału, podkreślając, że to może być ich jedyna szansa na śledzenie jego postępów. Oglądający z pewnością docenią informacje, które poruszył. Film osiągnął już 11,311 wyświetleń i 354 polubienia w momencie pisania tego artykułu, co świadczy o rosnącym zainteresowaniu jego pracą nad projektem CodeHike oraz nad innymi nowinkami w przyszłości.
Toggle timeline summary
-
Wprowadzenie do projektu i chęć zaprezentowania konwersji bloga.
-
Zarys konwersji z podstawowego wpisu blogowego do nowego formatu.
-
Opis fikcyjnego bloga stworzonego z Next.js i MDX.
-
Dodanie pakietu scrollcoding do projektu.
-
Instrukcje dotyczące dodania domyślnych stylów w App.js.
-
Praca z komponentami MDX w celu budowy wpisów.
-
Składnia do implementacji komponentów hike z nagłówkami kroków.
-
Wprowadzenie do przykładowego wpisu na temat biblioteki react-sbg-curves.
-
Obsługa błędu spowodowanego przez zewnętrzną bibliotekę w demonstracji.
-
Używanie właściwości focus w krokach hikowych do podświetlania sekcji kodu.
-
Dodawanie linków do konkretnych sekcji kodu z tekstu.
-
Opcje stylizowania komponentów, w tym użycie Tailwind.
-
Dostosowanie zachowania układu dla różnych rozmiarów ekranów.
-
Podanie linku do piaskownicy kodu, aby widzowie mogli zbadać projekt.
-
Podsumowanie wideo, wspomnienie, że to pierwsze wideo twórcy na YouTube.
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.