Show Notes
Join me on a journey through CMS's as I talk about the educational experience of building my husband's blog, Shut Up a Second. Also, a quick update on the progress of the She Builds With Code website and learning to never assume my code is correct. Links Mentioned She Builds With Code Website in Development (make sure you view it on your phone!) Sizzy Ngrok Live-Server @font-face Shut Up a Second CMS WordPress Skillcrush Microweber Wix Squarespace Wagtail Stack Overflow Ghost Postgresql MySQL JSON File Format Excel (My First Programming love!)
Transcript
Noelle Anderson 0:05 Hello, everybody, and welcome to another episode of The She Builds With Code podcast, the podcast helping you to get out of tutorial hell. Hi, everybody and welcome to another episode of The She Builds With Code podcast. I'm your host, Noelle Anderson, thank you so much for joining me today, I do want to give you guys a quick update on the progress on the She Builds With Code website. So if you check the show notes for a link to the site, it's moving along pretty well. I've got almost all of the static templates coded up there up on my GitHub and you can see a live version of that, you are going to want to look at that on mobile. However, I have not started to dive into my desktop design yet. This is all strictly mobile. And there are some things that look pretty awful on desktop right now. So if you want to get the full experience of where we are right now, that's what you want to check out. I wanted to talk a little bit too about the tools that I found, I'm using a browser called Sizzy. It is a development browser, which means it was created strictly for web development. This isn't something that you use to just surf the web with. But what's cool about it is you can see your design on multiple devices. So right now as I'm developing my site, I can simultaneously see how it's looking on an iPhone 5, an iPhone 5, a pixel 4, a Mac desktop, and a Windows laptop. And it's really cool. If you do any kind of web development, I strongly recommend you check that out. And again, there'll be a link to that in the show notes. And a big kind of bonehead lesson that I had to learn in my design. This week, I was finishing up the homepage, and I was getting ready to move on to the about page and decided that I wanted to take a look at it actually on my phone, I use a tool called in grok. I'm sure I'm pronouncing that incorrectly, it will be a link to that in the show notes. But basically, if you are developing on your computer, and you're running some kind of a server that allows you to see it that kind of capitalizes on a port. I personally use NPM live server, it's a node server, it's just a super lightweight thing that'll just emulate a server, let me show you it's super, super basic. But what it does is it opens up my Port 8080 on my computer. And with this other tool ngrok, what I can do is I can fire it up, I can tell it Hey, look at what I'm showing on my computer on port 8080 and open it up to the web. And it takes all of that and transports it and I get this little URL, it's normally super long, complicated URL, but I can then take that and I can look at live devices, it's really great when you need to share a design with somebody that's not you know, in your network, and you just but you don't want to take the time to get it completely uploaded to a testing server, you're still working on it. And you just want someone to see something super quick, I highly recommend it, the free version has been working for me for quite a while. So I use this tool to look at my website on my phone. Because if you've ever done any kind of development or just a note for when you get into development of websites, that there's only so far an emulator can go, even this tool Suzie that I'm talking about. There's only so much it's going to actually show you what it's going to look like on a mobile device. And you really do need to get it on a mobile device to see those few little tweaks and quirks that you'll have to fix. And sure enough, I opened up my website on my phone. And I had this really awesome custom font at least I think it's awesome. I love it for all of my headers and you know, for my title, and it's not showing up and I got really upset. I tried it on a couple of different phones and it wasn't working. I thought, Okay, well maybe it's the, you know, maybe it's the type of font that I download. And maybe I should find another version. So I've got, you know, three different formats. I've got true type font, as well as the WOFF and WOFF2. Those are different file types of fonts. And typically, if you're using a custom font on a site, something like WOFF works for like 90% of browsers. You know, WOFF2 is kind of like the next level it's where it's it's where the future of custom fonts on the web is that's where they're headed, but not every browser supports it but w o FF do anyway I just threw everything I could add it and nothing was showing up on the mobile phone. I tried it on my husband's phone wasn't working. And I started to panic a little bit thinking like, Oh my god, do I need to go back and redo my entire design? Because I can't use this format on mobile for some reason. And I'm doing Google searches. And I'm trying to figure out, you know, why there would ever be a reason that a font would look correct On a desktop and not work on a cell phone. And every answer that I came across that wasn't directly related to, like, you know, someone using Squarespace and uploading it or somebody using Wix or WordPress, the few examples that I found were mistakes, somebody had, you know, misspelled something, or they were missing a link. And I kept looking at my code and going, but that's not wrong. I'm not missing anything. I'm not missing anything. I'm not missing anything. Wait a minute. And it was the simplest thing. And honestly, VS code, which is what I use, as my code editor was trying to tell me, I was screwing this up. And sure enough, I'll include a link to what a font face CSS declaration should look like. And it's a two-parter. Well, it's a multi-partner. But in one line, you know, you're supposed to give the link where you have stored your font, and then also tell it what format it's in the format of that is the Word format, and then parentheses, and then your format type in quotation, there is no space between the Word format, and the parentheses, I had a space. So even though it was incorrect, it was still showing up on my desktop. And that was mainly because the fake server and the computer everything was all there together, it was living there together. But once I actually got it into a real internet, you know, we're on the web situation, it failed because it was wrong. And so with that, one little simple fix of space, all of a sudden, my syntax coloring worked properly. And here, I was just thinking it was some quirk with it. And boom, there's my font. So moral of the story is always double-check, triple-check, quadruple, check your code, step away from it, look at it again, read it backward. Don't assume that you haven't screwed something up if something's not quite working, right, especially if you do a Google search. And what you're finding is the main reason fonts don't show up, is because people screw up the syntax. Thank you for coming to my Ted talk. So today's episode, the focus is going to be on my husband, Brandon Anderson. And the site that we built for him, ShutUpASecond.com, which is currently housing his blog, and more importantly, his weekly newsletter every Thursday, where he kind of writes about life. It's a great read, please check it out. There'll be a link to that in the show notes, Brief history of that. The name of the site came about because my husband first and foremost, he's a writer, obviously. But he is also an avid storyteller, and he's very animated. He's also a sketch comedian. Let me just throw that in. So all of those things combined. Whenever he tells stories, there would always be this point where he was just All right, everybody, everybody just shut up a second, shut up a second. One day, I looked at him and I went, Oh, my God, that should be the name of your website, ShutUpASecond.com, which, of course, was available, bought the domain, and we were off to the races. The great thing about this story is that it was a really huge lesson for me in client relations. In many ways. I think of him as kind of my first client as a web developer. And he and I, together kind of learned a lot about what to do and what not to do when you're building somebody's site from scratch. So to begin with, we put the site on WordPress, because that's where you start when you want to start a blog, you just throw it up on WordPress is the easiest way to go. It's the fastest way to get yourself up and going. And there are a million themes. Now, in hindsight, I realized that was probably not the best idea for a few reasons. One being the main one being actually that I was not a huge fan of WordPress development. I did take a class in it. I actually went through a site called Skillcrush that had like a full from scratch course. And it was fun. It really was but it was overwhelming. The number of hooks and basic options that you have in WordPress development is just huge. I mean, it's an extremely versatile beast of a CMS. You know, it still houses like 35% of the world's websites. It can be a blog, it can be a business site, it can be your podcast website, it can be an e-commerce site, it you know, it can do anything. But with all that power comes way more learning and responsibility than I was interested in. So I knew that in my heart of hearts that I wasn't going to be able to customize too far what the site was going to look like. Additionally, my husband puts up with my nerdiness quite a bit when I talk about my technology, but he's pretty good with technology, he knows what he's doing, he can work his way around the backend pretty well. But WordPress can be extremely overwhelming if it's just something you're not used to. And again, it has everything to do with the number of options that they offer. But you know, the back end always felt a little clunky to me. And it can be a little slow. And I mean, all of those things combined, WordPress was just a bad match. So as a result, you know, he didn't write for a really long time, because he was just really unhappy with the experience he was having logging into the site. Additionally, he couldn't find themes that he liked. And obviously, as I mentioned, I couldn't help with that, we decided to try to go a different route. And I wanted to be able to give him the flexibility to create the design that he wanted. Because while he didn't want to be a web designer, he has always had more of a design I have, and I have I frequently actually refer to him a lot when I'm creating new designs, he's just got more of an aesthetic view than I do. And with that in mind, I found this open-source builder called Microweber. And I got super excited because I was like, Oh my god, this is it. It's free. It's a drag and drop. He can, you know, kind of design however he wants. And we can be off to the races. And we were both super excited about it. Unfortunately, it turned out to also be a bit clunky and complicated. Now, this was several years ago. So it's possible that might have changed by now. And I certainly don't mean to disparage this open-source resource for people, because a lot of people raved about it quite a bit. Unfortunately, that just wasn't our experience. Microweber was not working for us. And we were kind of at a point where we're like, Okay, well? Now, you might be asking yourself at this point, well, why don't you just go ahead and just create a site. And to be honest, I would think I was a little intimidated. As I mentioned, you know, his design aesthetic was far, he just, thinks more in those terms than I do. And I was afraid that I wouldn't be able to give him what he wanted. But seeing the struggle with trying to find something that he liked made me realize that he was looking for my help my guidance as the person that has been trying to learn how to design sites on the web, to help guide him towards what he wanted. That was a really great lesson. As a freelance web developer. Oftentimes, I still feel a little insecure about my design chops, as I'm constantly will be mentioning on this podcast, design is not my passion is not where I spend most of my time thinking about my sights, you know, I think more about the staff than what it looks like. But what I have to recognize is the things that I've learned helped me to identify what someone is looking for if I can get them to describe it. Or what I did in his case, is I pointed my husband towards Wix, and I said, You know what, go here, find a template that you like, they've got so much more flexibility in what we've been using. Let's just see what we got here. And my timing on that was great, because after the microfiber situation, you know, we kind of cooled off from building the website for a bit. And he actually approached me and said, You know what, I've been thinking about it. And I'm gonna just go ahead and sign up for Squarespace. A brief pause for anybody that likes Squarespace. Squarespace is an awesome tool to get up and running quickly. It's got, you know, great templates, it can guide you through the process and builds pretty decent sites. Additionally, it does give you some flexibility. If you've got some coding shops, you can, you know, throw in some custom CSS, it's a great option. However, if you happen to live with a web developer, don't tell her that that's going to be your ID game when she can build you something. Thank you for coming. And so like I said, I sent him over to Wix. A day later, he found a template that he liked. And we sat down and we talked about the aspects of what he liked and what he didn't like, what he wanted to incorporate in his site. And the way he thought that the design would work in it. And so I took that I started to build the HTML version of what I was seeing. I built out the homepage, the blog index, and then just basic use pages. And it's the same process that I use. Now I go through and immediately create everything from scratch in HTML. I think I did use bootstrap and I'm always going to use some Kind of CSS framework, mainly because I'm just not good at CSS, I just don't practice enough at it. And writing from scratch, CSS kind of stresses me out. So I did use bootstrap, but I built the main pages. And then I went looking for a back-end CMS to kind of attach this theme to, we knew the WordPress was out, I wasn't even gonna go there. And so I just started, you know, doing a search on the web, what kind of CMS is giving us on the back end, I considered a static site generator for about two seconds and realized that that was just never going to work for him. For one, he's done a developer, he's not really going to want to write all of his blog posts in a text editor and then run a script to get a site up online, that's not for him, he needs a back end that he can log into. And if he's thinking about it on the go, he can make an edit on his phone, because you know, it's a web-based back end. So after my own experience, building my own site, or at least thinking about building my site, I had been looking at Python-based CMS is. And while I never got to build it from my own site, I have found this CMS called wagtail. It's completely based in Python. And you know, it professed itself as being CMS for developers, I decided to look into it, it looked like it would be super flexible, to be able to put whatever design I have on my front end and stick it in this back end, it was a little overwhelming to go with just the documentation won't lie. So I found this course called learn wagtail. And it was a complete from scratch from start to deploy course that I used to build the bones of Brandon site. And it was great because I was able to learn the basics by following along with him. But because I wasn't building exactly what the instructor was building, I started to figure things out on my own, so that when I needed a feature that wasn't covered in the course, I have the confidence to Google it and look it up. For example, my husband really wanted to be able to order his blog posts, with a next blog post and a previous Blog Post button on each one. But with the title of the blog post, this wasn't something this kind of navigation wasn't really covered in the course. But we did enough navigation for me to be able to figure it out and be able to Google it. And so that was really awesome. The thing about wagtail, in this whole experience, was that it was a lot more complicated than I originally thought because you are quite literally building all of the building blocks of your back end, you know, like wagtail basically gives you a framework have a blog, and you have to tell it, what all of the pages are supposed to do, you're building functionality into this framework. So it was super exciting. But you know, it took a while. But in the end, I was able to give my husband a website, he could log in, he could get emails, he could create blog posts and get them up online. And it was awesome. Unfortunately, wagtail did not end up sticking around as our primary for a few reasons. The back-end UX was a little confusing to navigate the way that pages and posts were created kind of you had to follow kind of a breadcrumb to get to the right place. And if you weren't in the right place, you can end up editing something that you really didn't mean to edit. Additionally, some of the functionality that I tried to build failed, and there weren't enough notes or tutorials or questions online for me to be able to figure it out. And I am ashamed to say that I still do not have the full nerve up to post a question on Stack Overflow. I know I probably could have figured out so many more things if I'd done that. But honestly, I still have not gotten my nerve to do that. I'm always convinced based on you know, the number of horror stories I've heard of people posting questions without doing the research first, that I just haven't done enough research to find the answer to the question that I'm looking for. I know that I'm working on it, but I just do want to share that. That that is one of the reasons why I kind of started to go away from wagtail. And also the update process was a little cumbersome. So there wasn't any easy way to you know, like with WordPress, if the software has a new update, you hit a button and boom, you've got yourself updated and you're good to go with wagtail because it's a more custom build, you know, everybody's site is a little bit different. You have to kind of manually basically re-install your software over and over again in order to get the most recent update. And you know, oftentimes because they were updating so frequently, there would be some structural changes that you would need To make to your site as well, to make sure that you were staying up with whatever changes. And while I commend them for the amount of work that they've done on it, and how amazing the platform is, it just wasn't a good fit for us. In the end, that is when we found Ghost CMS, I had heard of Ghost previously, but I shied away from it because I thought it was just a paid service. And they do offer paid services. It's like 20 something dollars a month, where you know, they host your site in their software. But as I dug in deeper, I realized that they had an open-source version that you can download and install on your own server. As I looked more into the software, I realized this was exactly what my husband wanted, this was perfect for him. So Ghost is a, it's a blog platform, and it doesn't pretend or act like it wants to be anything else. It does have a minor e-commerce store twist to it, which is you can sell memberships and host a membership from your site. But it is content-driven, the back end of a Ghost website is so clean and as beautiful. And when you go to create a post, it immediately does. If you've ever seen distraction-free writing. It's just this white canvas and you just type through no extra, you know, sidebars, they're all hidden from view. And it's just you and the words and he was ecstatic to get it. So making the switch from wagtail to Ghost was multistep. First of all, I had to go back to my original HTML design, and change around some template tags to work with Ghost's back in, it's the same kind of thing, honestly, that I had to do with wagtail in order for it to work with the back end and know where the content needed to go and how the site needs to look. Luckily, because I had already done that work in wagtail, all I really had to do was just trade out template tags, you know, I didn't have to create too much from scratch, which was really awesome. The next thing and the biggest thing was getting all of my husband's posts, exported and imported into the new site. And this took a bit of searching and googling. For one. The website when it was hosted in wagtail was using PostgreSQL database, Ghost works exclusively in MySQL (My-sequel) database, or MySQL, depending on how you pronounce it. The two don't really talk to each other. So it wasn't going to be as simple as kind of exporting his database in you know, a regular old file and uploading it. Luckily, Ghost had the ability to accept what's called a JSON file, which is JavaScript as an object. And it's super easy to read as a format and, you know, gave you all of the different template tags that you would need to throw in and make sure that the dot that the information was getting to the places that it needed to get to. And so the only thing I had to do was figure out how to export his database and find all of the correct tables, and then easily get them into this JSON format. And I am sure that there is a better and more programmatic way to do this. But I found a script that I could run that would immediately export Postgres databases into a JSON format. So that was thing one. But unfortunately, the way it downloaded, it wasn't grouped properly, to go into Ghost, you know, everything was in slightly the wrong place. And the names of things were incorrect. And so I couldn't really just, you know, take that JSON file and throw it up in there. Additionally, the way the information was stored, the titles of the blog posts were in a different database table than the content. So the first thing I really had to do is I had to pair those two together and get all get these crazy kids all together in one database. I fell back on one of my old friends and my favorite tool, Excel. You can open a JSON file in Excel. So I did, and I moved things around and I cut and pasted. And you know, I did a few macros, and I threw it all together. I got it exactly the way I wanted it. And then I exported that into a JSON file using another script. And that's what I use to upload to ghost code. There probably been something I could have written to do all of this for me most definitely wouldn't have taken me longer. Yeah, because I would have had to figure out what that was. Sometimes you just need to rely on the tools that you know, even if it's not, quote-unquote, the best. If your goal isn't to try to learn something new while you're trying to accomplish this, then focus on the end goal. My end goal was getting this database into this new site so that my husband can get into this new CMS as quickly as possible. If it had been something where I wanted to explore writing custom scripts to automate my tasks, then that would have been a great opportunity for that. But that wasn't my objective. My objective was getting him up and running. My focus had to be on him and not on just my own education. While it wasn't the most elegant of solutions, I was very proud that I was able to piece all of that together to get the end product. And so now even though there's no visible difference to the outsider, you know, if you went to ShutUpASecond.com a year ago, it's not looking any different than it does now. Because we changed nothing with the design of it. But the flow the back end, and honestly, the speed of the site runs so much better on this new CMS using ghost. And the process of getting there from start to finish was probably one of my more educational experiences when it came to the projects that I've built. And it's certainly one that I am super, super, super proud of. Thank you for listening to today's episode of She Builds With Code If you enjoy today's episode, I'd really love to hear from you. Please go to SheBuildsWithCode.com to subscribe to updates, leave me a review or send me a message. I'll see you next time.