Let’s face it – what we do as front-end developers for building AB Tests is not normal. We take web pages, and bend them in ways that they’re not supposed to go – reworking layouts, content, validation and form submissions, amongst a whole wealth of other things. As a CRO Developer, I get a wide variety of tests to build, and sometimes it’s hard to know where to start.
So, here are a few tips, tricks and tools to make building your AB Tests as easy as possible.
1. Plan out the build
Before you start coding, just plan out your project and it’s steps / functions in simple words. We (or at least most of us!) understand natural language easier than code, and so working this way allows us to code our tests one bit at a time, logically, and this makes for easier debugging later down the line.
2. Comment your code
I always find that adding small comments into my code explaining what each piece of code is doing is helpful for a couple of reasons:
- When jumping from one project to another, it can be quite difficult to keep up with your own progress. With helpful comments in the code, you won’t need to figure out what your code is doing. And, if you compare this to your plan, it quickly becomes clear what you have left to do.
- If you’re the type of person that takes holidays, or is occasionally off, other people may need to pick up where you left off. Comments not only explain what the code is doing, but also provides an idea of your trail of thoughts.
3. Chrome developer tools
The best invention since the internet! Not only does the Chrome developer tools allow you to inspect the elements on the page, inspect cookies and local storage but it also allows you to create pages sources. This is how I usually start when building a test, a page source. It means that I can flesh out the code, making sure that my logic is all working before placing any code into our Interface. The inspect element tool also plays a massive role when building tests, as this gets used a lot to check out what the page is doing.
Even for the less experienced, Chrome dev tools is a great resource. Clicking the + icon in the top-corner will get Chrome to generate CSS Selectors for you. Combine this with the assisted Attribute and Value selection, and it’s almost writing the code for you. Once you’re done, you can just inspect the Stylesheet you’ve made, and copy it into your Testing tool.
4. Remote debugging for Mobile Devices
It’s clear that emulation still lacks what a physical device provides, and so being able to debug your faulty code requires you to use the Console on devices. These unfortunately most often don’t have one. Between ADB debug for Android devices and debugging iOS devices on a Mac, you’re thankfully covered.
Within Chrome developer tools, there is also a lovely tool called Remote Devices. As it is, it may not work, so you may need to download adb fastboot. Once you have, this is where you can debug any Android device running Chrome or Android Default Browser – it’s a piece of cake!
5. Regex websites
With so much code in some tests, you can’t be expected to remember everything! For me, it’s Regular Expressions (RegExs). There are several great RegEx websites such as Regexr out there which allow me to test these before placing them into my code. These sites are handy tools especially if, like me, it’s not your strongest point.
6. A good JavaScript IDE (code editor)
Now, there are loads of these out there but not everyone of them will work right for you. Personally, I like to use Atom. It displays a content tree, pretty readable colours and a funky little thing called snippets! The snippets are awesome because you can write your own short hand code, and Atom will fill it out for you – great little time saver.
Other great JavaScript IDEs used by the team include Webstorm, Sublime Text, Brackets and Notepad++.
7. Version Control System (VCS)
I would class this very high on the list. Like most developers know, your code can chop and change regularly. Sometimes, you might even need to go back to some code from a few days before and you don’t really want to be clogging up your machine with lots of scripts dated for previous versions. This is where VCS tools come into their own. Even if you don’t have a local server, many tools are also cloud-based, allowing you to benefit without the need for additional setup.
There are several different VCS tools that you can use – popular ones include GitHub, and implementations of Apache SubVersion like TortoiseSVN. Some IDEs also come with VCS built in – that’s one of the many great things about JetBrains Webstorm (mentioned above).
8. Secret weapon
Every developer needs a secret weapon when coding through those long tests. Sometimes they can feel never ending and you just need something to keep you going… Cat videos! I mean, that’s what the internet was made for, right!?
