Hello! It is November 28th, 2023, and this is the Temzee Vlog #2. It's been about a month since I updated you guys last, so happy late Thanksgiving to everyone. I know I talked about –in the last vlog– that I wanted to start publishing videos and written content more consistently, and to be able to keep track of –specifically– the word count on the site as a measure of my productive output –and you know the kind of the "pottery" that I'm making. A lot of that got put on pause for some site upgrades. As I went in to try and implement some of the word count functionality I realized that I had a lot of repetitive code throughout the codebase, so I did a little bit of a refactor. Let me show you some of the things that have changed since last time you saw me.

Hosted Images with Cloudinary

I'm gonna go ahead and sign in here with my admin account, and show you some things that only admins see. Well first off here, this profile page is really different. The lesson progress that was here before –is still going to change– but this used to be the only thing that was on this page. This whole top section with profile information and profile picture, cover photo, that is all new. So now –for the first time– the site can and handle image uploads. That was not something that was possible before, I used to be uploading all the images manually to the Next.js images folder, but now all the image hosting is managed by Cloudinary which is kind of a cloud-based image and video storage site.

New Profile Page

So I was able to add some of the stuff to the profile page. You can edit your profile, you can change your first name, last name, where you're working at, etc. If you add things down here then new buttons will pop up here at the bottom. So you can add your your GitHub, your Twitter, LinkedIn, and then these two on the right control this link text. This profile page still doesn't have very good form validation, so I found that it's not very intuitive for people who didn't make it themselves –so that's every everyone but me. So there's still some improvements to be made here, but it's a first pass of this kind of functionality. This is not the core of what I wanted to get at, I really just built this section so I could practice implementing the image upload and the image displaying functionality here on the profile page –and I found that it just helps things look slightly more more professional –in general.

Behind the Scenes: The "admin" backend.

What I really want to show you is the backend that I see –and that users don't really see– has changed quite a lot. We have this kind of Trello board look. This is how I manage the creation and the displaying of content on the site. Previously, I had notebooks –you know data science notebooks that were inside of the "Python for Beginner Data Scientists" course– and then I had a separate set of notebooks for code challenges. And then blogs were static markdown files that were being generated. And encyclopedia pages were also notebooks, but they had their own notebook editor, so I had like three different notebook editors with repeated code –and then a totally separate process for publishing blog content. I've now consolidated all of that into one single notebook flow.

Managing Content within the Site.

So each of these items are the different sections on the site. I can create drafts over here. Drafts won't be visible on the site. They won't be published, but once they get dragged into the "Python for Beginner Data Scientists" course or encyclopedia, blog, code challenges, etc. they'll then become live and be published on the site. So you can see the the first Vlog over here and some of the few encyclopedia pages that have already been published. You can also see that each of these counts the number of words that is in them. So that word count you can see displayed below each of the items, and also the total word count on each of the sections.

Tracking Word Counts

The site also does have a total word count which you can view here on the dashboard. We're at around 21,000 words. We only have one single entry here, that was my last update. This is going to be a line chart, but you need at least two points for the line to show up on a line chart so you should see that shortly after this vlog is published, because I'll make a new entry including the words that I'm saying right now from the transcript of this vlog, and then the graph will actually look like a graph. So this is all still in the admin section of the site, you can see the same graph and other useful stuff will be added to the "Open Dashboard" page here on Temzee.com.

Adaptive Notebook Menu

What took the bulk of my time in the last month or so was re-creating this notebook functionality. So I'm just going to open up "Why Learn Python?" here and we're going to see some things. This notebook page you see here is now identical for all kinds of content on the site. This menu here will change based on where the notebook is displayed –if it's displayed in the blog, or the encyclopedia, or within a course, or here in the admin portion of the website, this will change. For example, I –as an admin– can control some of the metadata that's here (this meta button and other functionality is not accessible on the main portion of the site). So you can see the notebooks here like normal, I can edit text cells, if I want I can add code cells or exercise cells, and add code or tests to evaluate code here. I'm not going to add that to this particular lesson because it doesn't call for them.

Hosted Video via Cloudinary

One thing that's also really cool is I can add in video information. Now previously, I just had a text cell at the top of the notebook where I would use the YouTube embed information to embed a specific video on the page, but now I can upload a video to Cloudinary and then give its public ID here, and that will automatically cause a video to be displayed here within the notebook. So let me show you that. If I leave the admin section... –well, I'm just going to even log out here because there isn't much else to show you here– and go to "Learn Python".

Nice Video Thumbnails with Cloudinary

Let's look at the first item here. Oh, by the way, this is all new. Before, I had just a kind of a boring output here where I had the title of each lesson on the left and then the meta description on the right. I found that now with Cloudinary, I can present these these nice thumbnails for each of the lessons. These are also the same thumbnails that are on the YouTube videos themselves. It gives it a little more visual flare, and hopefully makes it look a little bit more professional, and things like that. I also display here the length of the video, the reading time of any given lesson, and then on the far right, this is if a lesson has exercises –the number of exercises that are contained within it. So kind of fun... I hope it makes it feel more like a course, and makes it a little more professional, gives a little more information about things.

"Theater View" Hosted Videos and new Lesson Sidebar within Notebooks

So let's click into "Why Learn Python?". Here you'll see –this top section is totally new– with the embedded video. This is not coming from YouTube, this is video that's being played from Cloudinary. And this is important because with my own hosted video it'll help so that when I want to require payment to unlock certain pieces of content, I'll be able to restrict that content more successfully. Even if I make a video "unlisted" on YouTube, if anyone has that URL they can still share it with other people and the video can still get out even to individuals who maybe aren't subscribers or aren't paying for things. This makes it so I can really lock things down. This new "theater view" (is what I call it) type video up here, it's bigger, it's fuller. It feels more like you're in a course. And the resizing with the YouTube one wasn't working very well. Now this automatically resizes it's got nice black bars on the outside. I'm really liking how this has turned out so far. We've also added this lefthand sidebar which gives some of the same information you saw on the previous screen, but now in the sidebar so it's easy to navigate through the the different lessons.

The Challenge of Saving User Progress

You'll notice here the menu has changed a little bit there's not as many options –not as much functionality available to individuals who aren't logged-in. There there was also an issue before where (well, to try not to get too technical here) but basically, whenever a logged-in person visits a lesson, I want to be able to save their work. Particularly in something that has code cells, right? If a person were to, you know, write some code in here and run that code I want to be able to save their work so that it's always there. If they complete an exercise successfully, I want to record that the exercise has been completed successfully, and then keep track of their of their progress –of how much they have done.

Saving User Progress

So what I'm doing is, when a person visits a page within a lesson in a course and they are logged-in, I'm immediately checking to see if that user has previous work that they've done on that lesson, and if so, to populate the the lesson content with their previous work. And that check to see if they have done any work previously –is a little bit tricky– particularly with the question of: "What is the first version of the page I want to display to the user?" Do I want to show a blank version and then a split second later populate in the work that they've done? Do I want to save an entirely separate copy? An entirely separate notebook? Kind of like, as if they had unknowingly "forked", you know, the notebook so to speak. That's the way that Kaggle and some of these other sites get around it, is in order for you to have your own copy of things you have to deliberately Fork things. I don't want people to have to mess with that, so if you visit a page when you're logged-in it's going to automatically generate a place where your work can be saved.

Lesson Loading Re-render Eliminated

Now before, that check was taking about 600 milliseconds and so there was like a flash of when you visited the page. Initially, you'd see the blank version, and then there would be a flash as the page rendered with the updated content. And I hated that flash. We've be able to use some server-side rendering capabilities here to do that check behind the scenes –as the page is loading– so now there's there's no flash anymore. If you visit the next page that check happens much faster now and it just feels like you're browsing a website, it doesn't feel like there's extra computation going on that slows down your navigation or things like that. So that's something that I've really liked.

More Polished Notebook Header

The rest of this, um, this header here has been redone to maybe look and feel a little bit more like a notebook. I've taken some liberties from Google Colab and some inspiration there –you know that I like Google Colab. But the rest of this is literally just just a notebook with my own in-browser Python processing stuff going on. I'm really liking how this is shaping up. It still doesn't feel like a total home run, but for me, a non-designer, it feels like some really big improvements.

An Embarrassing Refactor

The encyclopedia is similar, but runs off of the same notebook engine now. So what really happened was, I went to make some changes to how content is displayed in the output section of code cells, and as I got into doing that, I realized there was a whole bunch of bugs with how things were being displayed. Like lists weren't being displayed properly, objects weren't being displaying properly. Anything worked if it was inside of a print function, but on its own, there were some problems. So as I went to fix all those bugs I made some significant changes to the notebook code and then I had to go and change that in three or four places –which I knew from the beginning. It's kind of a really classic beginning-project programming mistake that if you repeat significant functionality in different places you're probably doing something wrong. You want to keep your code D.R.Y. you know, "Don't Repeat Yourself". So I knew I was going to run into this refactor at some point, I just didn't know when, and this was when. It took a lot longer to do than I expected.

Encyclopedia and Blog Notebooks

So this is the encyclopedia page, notice there's no buttons here on the menu because it just doesn't really make sense for the encyclopedia. And also, any content within the blog is also a notebook. Before it wasn't a notebook, it was just a markdown file that was being displayed. I do have an embedded YouTube video here because... I could upload this video to Cloudinary, but I want people to be able to find the Youtube channel and the vlogs and things like that. This is not content that's going to need to be locked-down. It's not ever going to be restricted, so I'm going to still use the Youtube embed code on on blog posts –at least for now. Maybe I'll change my mind later.

Improved Mobile Styles

Another thing that has changed, is some of the mobile styles have been updated. There's still a couple of tweaks I need to make there, but there's also this nice mobile nav bar here. It'll even light up and tell you what page you're on. It's not perfect, but –I mean– it's better than nothing for mobile users. I don't intend for the site to be used from a mobile device, it's really hard to write code on a mobile device. But a lot of people, when they're visiting the site for the first time –following a a Google link or a link on Twitter or something like that– they're often doing it from their phone, so I don't want it to look bad for mobile, even if it's not necessarily maybe easy or fun to use on mobile. I intend the main use to be via the desktop.

In Summary

So, let me check my list here see if there's anything I've forgotten to bring up.

• New notebook interface,
• The admin page kind of the Trello-board management of the notebooks, that's all new.
• Tracking the word count, we've got new thumbnails, right? You can even see these on the homepage here for the different lessons.
• New thumbnails for the videos,
• Hosted video with video thumbnails.
• New profile page with cover photo, profile image, and social-media links.
• New sidebar.

That's like 80% of the site that's been been changed –substantially– and there's actually much much less lines of code that need to be maintained at this point, so I'm pretty happy with how things are.

More Work to be Done

I still don't love the overall design of the site, especially this section down here. I like the footer and that's about it but I stole the footer from another website that I like the footer of. It's not really stolen I just took inspiration from it. Yeah so that's what I've been working on, and I'm now really excited to finally make this word count graph go up and up and up. I'll be writing a lot of encyclopedia entries, a lot of "Python for Beginner Data Scientist" content in the coming days and weeks. And I want to get this course totally finished so that I can finally really promote it. I've been tentative to promote it because there's not a ton for you to do yet, and I want it to just be really thorough and polished and finalized before I go crazy promoting it to the world, and I want people to go "Whoa! This is good good stuff! We want more of this!" So that's what I've been working on.

Signing Off

That's your update from me. I intend to, again, get back to more regular updates now that some of this is going. It just didn't make sense to update you on half-baked code, I wanted it to be finished so I could show you on the site –live– what has been changed and what's been improved. So I hope this has been helpful, and useful, and you should hear from me again with the a bunch more words published on the site here pretty soon. So thanks everyone, I'll see you in the next vlog.