Rebuilding Our Donation Checkout Page
Pay no attention to that man behind the curtain”
-The Wizard of OZ
This line popped into my head the other day when I was thinking about writing this article and about all of the different software products I use regularly. You see, even though I’m not irretrievably lacking in technical skills, software has often appeared like so much magic to me. I point at something, click the mouse, the man behind the curtain (or screen) does his thing, and boom, out spits the result I was looking for. It’s fantastic.
It was actually a while ago that I had this realization—the realization that even though I use software all the time, I never really think about any of the machinery operating behind the scenes. And frankly, that’s fine and also pretty normal I suspect. People expect things to work as advertised. You point, click, and go on your way. That’s what you’re paying for, and again, it’s fantastic.
But while there’s nothing wrong with only caring about the results of the application you are using, I’ve come to appreciate some of the hidden work that takes place behind the curtain. In fact, the longer that I’ve worked at StayClassy, the more intrigued I’ve become by this world that operates out of so many people’s view.
When I recently talked to one of our developers about a major project he was undertaking, I knew I had to write something about it. Why? Because even though it will benefit everyone using our platform, very few people will ever realize that anything has even changed…
Meet the Man Behind the Curtain
Meet David Fu.
David is our lead front-end software engineer and one of the many talented members of our development team. Together they are responsible for delivering the best software we possibly can to our clients and their constituents.
One of the major projects that David has recently taken on is overhauling all of our front-end code to make it more efficient (more on that shortly).
As one part of that massive project, David has taken apart the code for our existing checkout page and put it back together again from scratch. What follows is an interview I conducted with David about this piece of his effort, what it entails, and why it will benefit our clients. I’ve tried to make things as simple and non-technical as possible and to use images to help illustrate concepts.
So, let’s start with the basics, how can non-technical people understand what a webpage is “made of” so to speak?
HTML provides the framework and structure of a webpage; it’s a lot like the foundation and beams in a building. It’s the skeleton of the page. CSS is more like the interior decoration, the carpets, wall colors, paintings etc. CSS is used to manipulate the appearance of the page to the viewer, to make it visually appealing. I’m simplifying but that’s a basic way to think about it.
So why did you rebuild our checkout page from scratch? What was wrong with the old version?
SC: And that means?
DF: That means that everything loaded in order, so if something upstream was loading slowly, everything else would have to wait. This could result in a white screen showing up for a while as the slow element worked on loading.
One of the biggest changes we made was switching to asynchronous loading. Now the elements that are ready to load do not have to wait on the ones that are moving more slowly. This speeds up the page load in an absolute sense and it also improves “perceived loading time.” In other words, instead of seeing a white screen for a second, the user will see the page render giving them the sense that everything is moving faster.
So on a practical level what’s different for clients now?
DF: Well the faster that checkout pages load, the better for our clients. People don’t have patience on the web. We expect things to load fast and if they don’t we leave. That’s why it’s especially critical to optimize for speed on a donation checkout page. The last thing we would want is for someone to bounce out of the process because it was taking too long.
Amazon’s calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year.” -Fast Company
You also told me that you implemented angular.js too, what’s that?
SC: *Puzzled look* so basically it will help everything work even better now?
DF: Yeah, basically.
At this point in our conversation, I realized there would likely be diminishing returns moving forward, as I’d just about hit the wall of my technical knowledge. Like most other people, I will probably never really be able to understand all the different facets of what makes my favorite software programs run, but that doesn’t make it less interesting to me. Even the very modestly technically inclined among us can gain a deeper appreciation for the products they use everyday by trying to take a peak behind the curtain every once in a while.
Have an Idea for a Fundraising Campaign?
Photo Credit: stock.photos