Technical insights for website owners, developers, and digital marketers

Blog

Welcome to my corner of the internet, where I share thoughts and offer useful tips for website owners, developers, and digital marketers.

Anton's blog

Rewind Backups _ Top-Rated Backup Service for SaaS Apps (1).gif

I was introduced to the company through a shared connection. I had a blast working with Rewind as a freelancer and later joined as a full-time employee. During my time at Rewind, I’ve worked on many different projects, many of which included their marketing websites. 

Rewind helps businesses protect their SaaS and cloud data. Their backups solution has integrations with several apps like Shopify, BigCommerce, QuickBooks Online, Github, and more. Just like any other SaaS company, their online presence and brand are very important aspects of their business.

Rewind’s website was originally made using a visual builder (Divi). Divi worked well while the team (and the site) was small and didn’t have a developer, but became a burden once the site became too big to manage every page one by one. The site was slow (10s fully loaded time) and relied heavily on many additional plugins to handle things like sliders, forms, and popups.

All 700 pages of the website were made using Divi, which meant that you couldn’t disable it until every single one of them is not using the builder. The challenge was to convert pages into parts instead of doing everything at once. Both variants also had to look identical to keep a good user experience. The project had to be broken down into phases:

Most important pages. A custom child theme was created to be able to switch off Divi for the individual pages. When you choose to use a custom theme instead of a builder, all scripts/styles of the theme & any additional extensions were removed from the page. On the surface, you were getting a custom theme, but only for that specific page. This was created for the most important pages of the site (data from Google Analytics was used to decide this).

Other important pages & archives. In this phase, templates for archives and single templates were made. A lot of elements were enhanced during this phase.

The leftovers & dynamic components. Rewind’s website had a lot of pages that didn’t fit into a specific category but still needed to be reworked. These pages were addressed during phase 3. Even though Divi was causing issues to the site, it also had some benefits, like its flexibility. Rewind’s marketing team was able to create unique layouts quickly without needing a developer. This flexibility was partially kept by introducing a dynamic component system to WordPress’ backend. This system was made based on Flexible Content functionality from Advanced Custom Fields Pro. This functionality allowed to reuse any section that was ever created on the site, making the editing process fast and keeping it flexible.

Standalone theme. In this phase, the site was completely reworked and converted to a standalone custom WordPress theme on Bootstrap 5. The theme uses SASS and ES6 Javascript compiled via Babel. The new theme is managed with GitHub to make sure Rewind has full control over what goes live.

Completely resolved website downtime caused by plugin conflicts

Rewind's website has several integrations to help meet the needs of its internal teams.

The site pulls all of the partners using the PartnerStack API and caches them via WordPress transients. This data is used throughout the site to personalize partner-related landing pages with partner-specific data. The site is also able to generate partner-specific landing pages without creating entries in the database using custom rewrite rules.

There is a form integration that styles HubSpot forms and adds new variants to them: a pop-up form and a multi-step form. Certain user actions are captured with HubSpot’s custom behavioral events.

Started as a Divi extension, this custom WordPress plugin is meant to show pricing for different products Rewind has to offer. Everything is controlled via WP admin: you can edit text, hide/show certain elements, and choose different price formulas (per-item calculations, tiered pricing, plan pricing, or a mix of 3). From a technical standpoint, the backend functionality is organized into PHP classes to make it easier to extend and manage. The front end uses vanilla ES6 Javascript and SCSS. The plugin is made to be extended outside of its code: there are several WordPress hooks baked in to let you add new features without changing the source code. There is also a custom JavaScript event that lets you make changes to the frontend based on the interaction with the price slider. This is used to personalize the page (like updating CTAs based on the slider value) and also tracking (like sending a GA event whenever a certain plan is shown to see demand).

One of the most popular and converting pages on the website 

As the site evolved, I had a chance to create a suite of custom Gutenberg blocks using React. The blocks are mirroring the component library created by the design team. This addition to the website allowed Rewind to create landing pages 3 times faster and enable more non-technical people to create them.

Every feature listed above is thoroughly explained in over 20 pages of documentation. There are docs explaining how to use the theme, where to edit the pages, and even what components are available. There is also a document for the third-party agencies that go over our setup and how to properly work with the site.

This project included setting up Google Analytics events for the most important actions on the website, such as:

Website migrations, custom plugins and themes, various marketing integrations, tracking, and more.

PHP, SCSS, JS (ES6), WordPress, Babel, MySQL, React, Next.js, Bootstrap 5

A complete overhaul

Site overhaul, React microsites and more for Rewind

seoplus-new.gif

As a web developer at seoplus+, I have worked on more than 200 websites. While the majority of the project was on WordPress, seoplus also has clients on platforms like Shopify, CraftCMS, Drupal, Grav, and even custom CMS solutions. In order to stay respectful to seoplus+ and not create any conflicts of interest, I won’t be directly disclosing the names of the clients.

seoplus+ is an award-winning digital marketing agency with a strong focus on SEO (as you can probably imagine from their name). They hold a special place in my heart because I have never seen so much bonding happening in the workplace. Whether you are a client or their employee, you will be surrounded by friends.

During my time in seoplus I had an opportunity to work on several projects for a Canadian phone repair company. I’ve worked on maintaining their WordPress website, adding new features, and working on the performance of the site. Below are a few projects that are worth mentioning.

The company needed a multi-step tool that gives users an instant quote on the device they want to sell.

The user selects their device model, brand, and specs. The user then answers a few questions that help determine the condition level. After that, the tool connects to a third-party API of the phone prices and returns the correct one based on the API. From a technical standpoint, the tool was mainly written in PHP - it is a custom page template that decides which content to show based on the URL query parameters. There were 2 versions created for the A/B test - one that gives the quote instantly and one that sends it over email (a Contact Form 7 plugin extension was created to pass in custom shortcodes in the email body).

The company needed a tool that will allow its users to book an on-site repair session with one of their technicians. Here is how it works:

The user enters their address or a postal code

The system assigns a technician that covers that area

A booking window for that technician is shown to choose the date and time.

Most of the functionality was handled in JavaScript using the jQuery library. The address field is using the Google Maps autocompletion API. The booking component has custom integration with a third-party booking system.

Below are a few projects worth noting that were made for an Ottawa-based rental company.

Automating the content throughout the site

The company has a list of rental properties that are shown on its WordPress website. The information on these listings changes every month, so it needs to be updated throughout the site. Originally, the website and the list of properties were a lot smaller, so their theme was not automating a lot of the things that should be automated: pricing was often a text field and had multiple different formats, which meant you have to update everything manually every time something changes.

To solve this, I proposed a project that will allow the pricing for all of the properties to be controlled in one place. An options page was created that allowed you to create a relationship between a property page and a price. To allow usage of the price in the WYSIWYG editors, a few custom shortcodes were made, one of them was a shortcode that shows the “Starting from” price based on the cheapest option of the selected property type (1-2-3 bedroom apartments, townhomes, houses).

This project drastically reduced the number of hours needed to update the website.

The company needed a new listing page that would show all of its available properties. The page had to have a filtering system that lets you choose the price ranges, amenities, property types, and features. This functionality was mainly created with jQuery and the properties were pulled from the WP Rest API.

While working at seoplus+ I’ve made a lot of custom themes for WordPress. To avoid any conflict of interests, I will not share the company names, but here are some of the project types that I’ve done:

Traveling museum exhibit website: a custom theme with an integration with Google Maps to show their current exhibits throughout the world. Built with Bootstrap 4 and jQuery

Testing facility for self-driving cars: a custom WP theme built with the Understrap framework

A new website for a pest control company made with the Understrap framework

Working on a client site’s performance was a common task at seoplus+ since a lot of clients already have a site and need help promoting it. Because of this, I’ve done a lot of work optimizing websites. Some of the common improvements include:

reducing the number of resources loaded on the page

lazy loading elements or breaking down into subpages

Another common task in seoplus. I’ve done many website migrations during my time there, some of which included writing custom scripts to automatically migrate/create post types based on the data available.

Seoplus specializes in SEO, so every website we worked on was made with best SEO practices in mind. There was also a lot of work-related to SEO on existing sites. Here are some of the tasks I’ve done:

Find & replace text actions via the database

Custom WordPress themes, website improvements, working with third-party APIs, site optimizations, technical seo work, website migrations, maintenance, and more.

PHP, CSS, JavaScript, WordPress, Shopify, GravCMS, Bootstrap 3,4, jQuery

Custom WordPress themes

Projects done while working for seoplus+

allrotors-preview.gif

Allrotors needed a new website for their custom e-commerce PHP CMS. Project was done for Superior Web Systems.