So it seems like it's a conflict of interest to have a podcast about coding while praising low-code tools, right? Well, tune in and let me tell you how these tools have actually been making me a stronger developer.
Blue Autumn Digital
Hi, everybody. Thank you so much for joining me. I’m your host, Noelle Anderson. And in today’s episode, I’m going to talk a little bit about some new tools that I found.
First off, I want to give you guys a quick update on my ongoing project. As I’ve mentioned in multiple podcast episodes, I like to keep a project going that I update you guys on as we go through episodes. And in the last episode, I announced I was going to start building a mobile app, specifically one that would help you figure out what kind of drink you want to have when you’re at home based on the ingredients you’ve got roaming around. Well, the honest truth guys is I am nowhere on this project.
So here’s the thing. There has been a kind of a big part of what I’ve been working on that I have not shared with you guys yet that I need to go ahead and fess up to. And that is my husband and I have been building a business. So my husband someone’s I’ve mentioned on this podcast, he was one of my early website projects when I built his blog, Shut Up a Second.com he, and I have decided to combine our powers. He, as a writer and I, as a web developer and provide web development and content services for small businesses. It’s been a blast. It’s been stressful. It’s been busy. We’ve been learning a lot and it has kind of enveloped all of my attention in the past couple of weeks, mainly because I finally got over my procrastination and finished our build for our website.
Yeah, I know we were a website company that didn’t have a website. It was eating me up. Regardless, we got that. We don’t have it up and running yet. It is not live yet. But I hope to have that live before our next episode here. So you guys can check that out. So if you go to our website right now, our business is called Blue Autumn Digital, and the website is BlueAutumnDigital.com, going there right now will just get you a lovely fade-in of our logo and a coming soon under that. But there will be more of that to come. I promise. But as a result of that, I have kind of let my focus completely slip on my side project. The other thing I realized is when I dove into this project, into building the mobile app, I kind of fell back into really bad old habits.
I picked up a book and started reading and started coding along and just kind of lost myself in it without remembering what my end game is. Now to be fair, there are some basics that I need to learn. I am going to be using the Flutter framework, which is created by Google for cross-platform app building. However, the thing that I do best really is grabbing a tutorial that’s close to what I’m trying to build and then varying from that so that I learn. And because I was just kind of going through the motions of going through like really basic apps and not really paying attention to what I was typing, I lost all that time.
So less than for me take my own advice when you’re starting a project. Find something that is similar to what you want to build and then build what you want. Google what you don’t understand and figure it out as you go along. That’s kind of been my whole mantra and I went completely against myself. So two bad points there, not sharing my business trials. They’ll be more of that to talk about. And then just taking the total wrong route to building my new mobile app. So to be honest, I’m going to take a step back from the code, because the other issue I was having is I realized, I don’t really know what I want this app to do yet.
And it’s impossible to build something without, you know, a road plan. So, I’m going to step back and I’m going to actually write out all of the things that I want this app to do. It’s not specific to coding. This is literally just kind of its project management. You know, what is it that you want to do?
As a user, for example, I want to be able to enter in the mixers and alcohol that I have in my house and have the app suggest back some cocktails for me. That’s basic thing number one. And honestly, I could probably just start there for my app and then build as I go. That’s a great idea. That’s what I’m going to do.
So that’s the update on my ongoing project or lack thereof and also my business-building ventures, more of all of that to come.
I want to talk to you today about some of the tools that I’ve been using in client’s sites, actually.
So it’s kind of ties into mentioning, you know, we’ve got the business going and I’ve been discovering new things to kind of add to my workflow. Because unlike just trying to learn how to code or learning how to build new things, when you’re working for a client when you’re trying to put something together for someone else’s business, you want to try to get that done as efficiently and as quickly as possible.
So I found I was drowning very quickly trying to build everything from scratch, which is what I have to this point I’ve been doing. In my search to find tools, to speed up my workflow, I found two that I really enjoy. And I have to be honest, both of them are low code tools. A low code tool is basically a software that helps you build websites, apps quickly, typically with some kind of a drag and drop interface that also allows you to edit the code directly. So I know, I know it feels weird having a podcast called She Builds With Code, and I’m telling you about all the ways I’m not building with code, but the reality is it’s not completely no code.
You start with no code, you’re dealing with total drag and drop that’s for complete beginners that typically don’t have a lot of customizable options for you. So kind of think like Squarespace Wix, where you do have the ability to code a little bit if you’re advanced and you know it, but for the most part it’s a drag and drop and it’s supposed to be for complete non-coders with low code it’s kind of a tool to help coders. You know, it, it’s, it’s a framework to kind of get things going quickly, but to really kind of capitalize on the best aspects of it, you really need to understand in this case, you know, CSS and HTML in order to kind of build out the websites that you want. And to be completely honest, it’s actually still making me a better developer.
I found that there are a few tricks that I really want to be able to do that I typically have to spend a lot of time in Google on that these tools are making a lot easier and I’ll get into specifics here in just a little bit, but what’s great about it is I get the end result that I’m looking for, and then I can actually go back and look at how this tool has come up with this code. So I get a better understanding of how to do that and I can also get in and I can tweak it a little bit and make it exactly what I want. In that way, it’s kind of like a leg up instead of feeling like I’m cheating by using these tools again because they do require some coding in order to fully utilize them properly or to be able to edit it quickly without having to worry too much about the drag and drop every time.
Because sometimes that gets annoying. If you see something and you’re like, I just need to change the font of this. I know exactly where I need to go. And I know what class I need to apply. Being able to just apply that directly instead of having to, you know, go directly through the drag and drop tools.
The tools that I’m talking about specifically are called Oxygen and Pinegrow. I’ll start with Oxygen, which is a WordPress plugin. Now, anybody that’s listened to a couple of episodes, you may know my opinion about WordPress. If you know, I genuinely hate WordPress. I don’t like it, but WordPress powers 40% of the web. Most clients that I’m getting in here now want to have at least a little bit of granular control over their website. They want to be able to, change a headline or maybe switch out a photo without having to get back on the phone with their developer every single time they want to make a change.
And so static sites, for example, are not going to work for that kind of client. And while there are plenty of other CMS’s, and you can custom build one, et cetera, et cetera, the amount of support and information that is available on the web for WordPress websites is insane because they’ve been around for forever.
And again, 40% of websites are powered by WordPress. I kind of got over my dislike of it, really because of this plugin. So Oxygen is on its surface, it’s a drag and drop website builder. It takes over the entirety of WordPress’s theming structure. And it allows you to either install one that they have already built, or you can build your own from scratch.
What’s awesome about this plugin is you can build templates that you can then allow your client to be able to build their site out further. So for example, you can have just like a base template that every single page on the website has to use, and that would have your header and your footer information, you know, things that you’d want on every page.
And then you can take that template and extend it into just a blog post template that maybe has a support for a featured image or two or extra share buttons at the bottom or whatever. And then you can create a template for just strictly pages, any kind of generic page they want to create.
You can create, you know, your contact page. You can make it as specific or as general as you want, but it is amazing how fast this thing works.
So one of the things that I really love about Oxygen is the pride that they take in keeping the code that’s generated super light. In a lot of other page builders for WordPress, there is a ton of bloat, and by bloat, I mean that there are a lot of divs inside of divs, inside of divs, inside of containers, inside of sections, in order to create the ease of use that they’re trying to give to their users.
Oxygen on the other hand, and I honestly don’t know how they do this, but they have this ability to keep everything super light which is awesome. And the code that’s generated looks pretty close to what you would create by hand. And instead of, if you look at the source code of some of the other page builders, you might see an h1 that’s nested in like three or four different divs that have these really long generated class names or ID names, and that’s just how it works in order to make it very simple for the end-user. And that’s not something that Oxygen does cause what happens when you have all of that is you have a lot more code in your site, which eventually can make your site a lot slower.
And they’re really big on the speed that they bring with the code that’s generated. The second thing is the ability to directly manipulate parts of your site with HTML and CSS. It’s really kind of a leg up to quickly be able to write things, but then also be able to drag and drop at the same time.
And I’m learning that I’m a very visual person. And so being able to see my site as I’m building it, instead of writing the code and then switching over to my browser to see if it worked and then switching back and forth between them has really increased my speed in a way that I didn’t really think.
Would matter ultimately, but there is just something kind of magical about being able to see that immediately instead of, you know, the constant switch between and to be able to have that and not lose the ability to pull up and just write something super fast to fix it the way I want has made my WordPress experience a lot more enjoyable.
And additionally, Oxygen also has a bunch of effects. So I’d mentioned earlier that one of the benefits of using one of these low code tools is that it will do something that I’m looking for. And then I can go back and look at the code to see how it’s been executed.
One of those big things is animations. I love CSS animations, but I have a hard time wrapping my head around how they work. And what’s been great is being able to apply one in Oxygen and then go look at the source and see how it’s applied. So I’m starting to get a better understanding of what it is that the code’s doing when I want an animation applied.
I’m getting to do really cool and fun things and not getting hung up, you know, trying to figure it out for hours on end before I apply it. And the best thing is, is in the future, if I’m editing an older project that maybe wasn’t built with one of these great tools, then I have the ability to add these things in without having to import the entire project into something else.
So that’s been a really great benefit to have that visual representation of what it is that I want to do, and also have the code right there to be able to figure it out quickly without having to thumb through a bunch of stack overflow posts. So that’s Oxygen.
The second tool that I have been using is called Pinegrow. I am in love with this tool. So Pinegrow is another low cold God. Why can’t I say this phrase, low code tool. It’s a visual text editor.
What’s great about this is it’s similar to Oxygen where it’s a drag and drop tool. This is not specific to WordPress. This is actually software that you download onto your computer. And it’s a, it works as a code editor, a visual editor, a drag and drop. It has animations, a ton of animations you can throw in there.
The thing that I love is that it has integrations with Bootstrap, Foundation, TailwindCSS. So any of those CSS frameworks that you like to use, they have support in there for them. There are prefab code blocks, so you can drag over entire headers or hero sections or forms and just kind of plop it right in there into your website.
And just like in Oxygen, you have the ability to directly manipulate the code. So I found this in actually in the Oxygen group that I’m in on Facebook and someone was mentioning how they wished there was a version of Oxygen that was just for anything, not just WordPress and somebody dropped this link.
And so I was curious and I looked it up and it was just amazing. I highly recommend checking it out. It’s super easy to use. It does amazing things. It can get a little glitchy, I will say. There are some times where if I’m heavy into coding, I might have to refresh the whole project or close it and reopen it.
But it’s a very small price to pay for the amazing things that this thing does. The other part that’s been really fun about Pinegrow is it also has a WordPress theme generator. This is unbelievably cool. So part of the reason that I dislike WordPress is the complicated nature of theme development, or at least it’s complicated to me. I tried, I think I successfully built like one thing once, but I couldn’t remember how I did it.
WordPress is a monster, right? It allows you to do so many things. And in order to do that, you got to have some complication in your code in order to offer, you know, the massive amount of flexibility that does. But as a result, I found myself extremely overwhelmed and really turned off by the process.
So with Pinegrow, what it does is it actually kind of helping me to decode how to build a WordPress theme Now don’t get me wrong. I’m not gonna, you know, start diving into that again. I’m not interested in trying to build a theme from scratch directly by just coding for WordPress.
But with Pinegrow, what it does is it kind of helps guide you. So it has this plugin in the software that allows you to determine what your index pages are and what your front pages are and which parts of your page can be edited by the backend and which parts are definitive. And then which parts can be edited by the theme customizer that WordPress offers.
And then it generates that code for you and immediately ducks it into your WordPress site. So again, you can go in and look at the code that it generates and start to get an idea of how these things are put together. And it’s been really fascinating and they have a lot of tutorials on how to do it.
It’s not super intuitive. You do need to kind of go through the tutorials and pay attention to how they’re telling you how to build it, because it’s eh, it’s WordPress. As I mentioned, it’s a beast. It’s difficult to kind of wrap your head around the whole thing, but it’s made it so much simpler.
Between Pinegrow and Oxygen, my ability to build sites for my clients, sites that they can use and update and configure how they want with their own plugins has just like exploded my world. I’m like, so, so excited to have found these two tools. So again, that’s Oxygen and that is Pinegrow. Those are two low code tools that I highly recommend checking out if you ever want to get into building websites for clients, or if you just want a more visual representation of what you’re coding as you go along. I definitely recommend Pinegrow for that. The built-in viewer is just awesome. If you’re visual, like me having that immediate feedback is priceless. So definitely check those out.
So I want to wrap this up by actually talking about an actual, no-code tool that I plan on using. This tool is called Bubble. It is a no-code platform that allows you to build interactive web apps. And the reason that I want to use this isn’t for any client sites or anything like that, this is actually going back to my original app, my drinking app. And I mentioned, I dove in without really having a plan and there’s some functionality that I know I want to do that I’m not a hundred percent sure I understand the logic of, to be completely honest. Like I don’t understand. I haven’t sat down and broken it down enough to know what needs to happen next in order to execute the app that I have in my mind.
I found Bubble, randomly again in another one of my web app groups. And I realized that it would be great because it’s another drag and drop tool. And you have to think through the logic of what you’re doing in order to tell Bubble what it is that you’re doing.
So while I have no intention of using this tool to actually build my app, I realized that it might help me speed up my thought process, or at least clarify it a little bit better without having to necessarily worry about what it is that I need to do in my code specifically, but taking a step back and understanding the overall flow of the actual app.
And honestly, I’m kind of excited to use the tool in this way. You know, I think that these kinds of tools get a little bit of a bad rap in developer circles because we feel a little threatened, right? You know, the computers are coming for our jobs. We’ve just started to finally learn how to code and now the computers are going to do it better.
Well, yeah, there’s some truth to that when it comes to some of the basic things, but Hey, there’s always going to be a need for programmers. I mean, even the tools themselves have to be created by programmers. You know, we haven’t gotten to the point yet where AI is building the computers themselves.
Hopefully, that’s a little ways off, but that’s out of the scope of this conversation, but these tools can be extremely useful. To give you a leg up when you’re, when you’re frustrated, you’re not being able to get what you want out of what it is that you’re working on. Sometimes what you need is that really quick, win. You need to be able to see whatever it is you’re trying to do in front of you. And then you can take a step back and kind of reverse engineer, how you got there. That’s kind of what I’m finding with these tools is that it’s not about trying to replace myself with what I’m doing. I still very much enjoy writing code, but in order to kind of speed up my learning, I want to be able to use tools that show me what it is that I’m looking for.
And then I can backtrack and figure out how it can write that from scratch the next time, instead of kind of banging my head up against a wall and getting super frustrated when what I’m doing, just isn’t quite working. And there’s a balance between the two, right? You have to figure out which way to go sometimes in order to get the end result.
And you have to think about what your end result is. You know, if your goal is to be able to write something from scratch from the top of your head, I don’t recommend it, but if that’s your goal, then obviously you need to keep working at memorizing that syntax and getting that down. If on the other hand, your goal is to get an end product as quickly as you can so that you can look at it, you can see it and then be able to backtrack and kind of figure out how you got there or how the tool that you used got you there. I find that that’s at least a little bit more of a rewarding experience in this already difficult journey as we learn to code.