I’m always looking for ways to improve my efficiency. It’s better for me and the clients I serve. That’s why I’ve been on a mission to improve my codebase and work smarter.
I have a passion for learning and an insatiable curiosity to understand how things work, and why they do. I look for ways to improve a process by rethinking the entire approach and am rarely satisfied with the status quo.
Looking back
Three years ago, I was slowly getting back into web development, after running my e-commerce store for ten years. I was building websites by customizing Genesis child themes through what now seems like a very inefficient process.
Let me describe it.
I would ask a client to select a child theme as the basis for the overall design. My work was primarily editing the functions.php and the style.css. I had a collection of random code snippets I used for projects.
Whenever I needed to create or modify something in the theme, I would hunt online to find another snippet. Many times I would copy and paste code that I did not fully understand, but it worked and solved my immediate need.
I developed on a remote server, with a coming soon page enabled. I would edit the files locally and then FTP them to the remote server.
It was a slow process. Seeing the changes took several steps.
Enter a Local Development Environment
About two years ago, I rediscovered the world of developing in a local environment.
I started out developing locally in the early 90’s on my PC before the internet. Funny how things come full circle.
Enter DesktopServer, which made it super easy to run WordPress on my local computer. Once I discovered that I quickly converted to developing locally and pushing my changes to a staging server. Update: I now use localwp.com for creating local installs.
Now I could immediately see the changes I just made on my local site. Clients could review the work as it progressed on the staging server. I’d push changes as I worked through the design and development process and clients saw only the work I was ready to show.
That was a big improvement in my workflow, saving me a lot of time.
Continuous Learning
I make time for continuous learning.
The past few years, I’ve been spending a lot of time on sites like Lynda.com, now Linkedin Learning and Treehouse. I highly recommend them as a place to learn the basics.
It worked. I honed my skills at using Git version control, Sass, PHP, basic JavaScript, theme customizing, writing plugins, SVG and vector graphics, working in the terminal, and more.
I was now ready for the next phase in my journey.
Meet Tonya Mork
Last year, I watched a presentation by Tonya Mork in Genesis Camp titled Quality Code by Design (Youtube). Boy that got my wheels turning, and set me on path to improve my codebase and workflow even further.
Tonya and I had an opportunity to work closely together at the WP Developers Club last year, and I observed first hand how a true software engineer writes code and solves problems.
My Own Starter Theme
At the start of 2016, I adopted Utility Pro (no longer available) as my starter theme. It is a robust theme built with Sass, Grunt, internalization and accessibility.
Soon after, the idea of customizing other child themes just didn’t make sense for me. I was on a mission to design with my own codebase. I was transitioning from customizing themes to building handcrafted websites.
Why the change? Well for one thing, it’s a lot easier to maintain for clients. Everything going forward shares a common codebase that I keep updated. I wrote a post about why Utility Pro was my new starter theme earlier this year.
Every time I have to go in and edit a site built with another child theme, I have to spend time searching, reviewing, and getting reacquainted. That’s wasting valuable time!
Where I am now
I use Localwp (formerly Localbyflywheel) for running my local environment.
Why? My child theme folder is my development folder and it has a lot of stuff in there that is not needed for deployment. DesktopServer does not have a way of choosing which files or folders I want to push to the server.
Instead, I use Migrate DB Pro to push database changes and images from my local development server to the staging site. It has a handy media file add-on that syncs your media files and only uploads the images that have changed. This saves a lot of time when working on a large site.
I’m still left with copying select parts of the wp-content folder manually via SFTP, but even that is about to change. I’m now looking into using Git to push my deployment-ready files to GitHub and then use a service to push that to my staging / live servers.
What’s next
I want to devote more time to being innovative with my designs and adding custom functionality to solve client problems.
To do that, I need to produce a finished product in less time with fewer bugs.
To that end, I’ve been working through the video content produced at Knowthecode.io.
This has been a game-changer for me.
Genesis Developers
If you’re a Genesis developer and want to build your own modular codebase, Tonya shows you step by step how to do that using the free Sample Genesis child theme.
For me, I will be adapting my starter theme further by breaking up my PHP code into more concise modules, and creating configuration files to make it much easier to manage.
I’m organizing my Sass partials for my workflow and putting the power of variables to work. By placing all of my color styles into the variables partial, I now have just one file to edit to completely change the color scheme. I am no longer searching and replacing through that giant style.css file.
Tonya has made a profound impact on my code journey. Knowthecode.io is my go-to resource for understanding the how and why of coding in WordPress. I am very grateful for that.
It’s ideal for someone who really wants to improve their skills to be more productive and work smarter. As Tonya says, to “Be More Awesome”.
Wrap it up.
My code journey is just that, a journey. It’s a path of continuous learning and one that will last as long as I am here.
What’s your journey been like?
[shared_counts location="shared-count-icons" style="fancy"]