5 Tools To Improve Your Website

#tooling #webdev #javascript #tutorial

Originally posted on bigsondev.com

Nothing hurts more than spending endless hours on coding a website, rolling it out to production, and having close to zero traffic. All our hopes are gone in no time.

Introduction

What if there was a way to track users on the website, serve them different versions of one feature, test critical flows, have a reporting system to quickly resolve bugs, or even watch videos when some functionality crashes?

Perhaps, the killer feature in your head is not used at all - time to learn what users are actually doing on your website. Do they quit too early as it’s way too slow or they’re overloaded with all the possibilities?

Let’s find out how you can possibly improve all of the above.

1. Lighthouse Audit

These days, users won’t wait too long for loading a website, you have around 3-5 seconds to make sure initial content is displayed and available for them. Lighthouse can help with that and thoroughly test the website’s performance.

Pricing: Free

Key features:

Performance audit.
Accessibility audit.
Progressive Web App audit.
SEO audit.
Best Practices for the website.

2. HotJar

The killer feature is to be able to record the user’s behavior while he or she browses your website. All that knowledge will let you iterate, come up with new ideas, better solutions, and take another look from a different perspective.

The basic plan offers 300 recordings to keep in total and snapshot sessions can cover 100 recordings. Additionally, you can manage up to 3 heatmaps for free. It’s enough for small businesses.

Pricing: Free - $99+ / mo

Key features:

Heatmaps (see where users click, scroll to).
Recordings (crazy feature for increasing conversion rates).
Feedback poll.
Surveys.

3. LaunchDarkly

It’s a convenient ability to be able to ship some hidden feature to production, test it on selected users, and see how it works under different circumstances - especially if there are inconsistencies between environments. It’s one of the greatest things LaunchDarkly can offer, as a bonus you could release different versions of the feature.

Pricing: $75 / mo - $325+ / mo

Key features:

Feature flags (show/hide features for end-users).
A/B Testing (serve different versions of one feature).
Percentage rollouts (release a new version of the feature to % of users).
Different environments (e.g. local, staging, QA, production).

4. Sentry

Sentry is a reporting system all the Frontend Developers need. Once the error happens, you get robust information about the browser, OS, URL, breadcrumbs - full history of the user actions. There is an option to add source maps to see the direct line of code where the error occurred and much more.

Pricing: Free - $80+ / mo

Key features:

Robust information about errors.
Breadcrumbs of user actions.
Tags, filters, whitelisting, lots of customization.
Different environments (e.g. local, staging, QA, production).

5. Cypress

For such a long time there was a Selenium and all Java-based frameworks for testing. Cypress has a full JavaScript API and it’s amazing. It works on Chromium and already has support for multiple browsers. It’s straightforward to setup CI/CD where it records videos and snapshots once tests are failing. It’s a robust, mature e2e solution for the modern Frontend world.

Pricing: Free - $399 / mo

Key features:

Headless testing for CI/CD.
Recording videos and snapshots when the test fails. Simple API in pure JavaScript.
Automatic waiting and network traffic control.
Outstanding Electron Simulator App - fully-packed environment for writing tests locally.

Closing Notes

When I was working as a Lead Frontend Developer, I and the team loved those tools. My recommendation is to add them earlier than later as you can really see the boost in conversions. Who knows, you might catch a bug, rethink a solution from another perspective or realize that something worked in your head, but it didn't "click" for the users. Have fun along the way.

I'm thinking about creating YT video series - building projects from my website, step-by-step, modern technologies, best coding practices with a thorough explanation.

If you enjoy the content and like the idea, Buy me a pizza.
Let's reach that goal together. 😊

Thanks for all the support!

Get in touch: Mentorship | Twitter | LinkedIn