Oh Expensive 2.0 has been launched

I am proud to announce that we have now launched a redesigned Oh Expensive. When you’re unfamiliar with Oh Expensive, it is the very best all-in-one monitoring instrument to your total web site. You’ll be able to register for a 10-day free trial.

You’ll be able to assist us unfold the excellent news by upvoting us on Product Hunt, or retweeting our launch tweet.

On this weblog put up, I might prefer to share what Oh Expensive can do for you, how we have rebuilt numerous elements, and provide you with an summary of the know-how behind the service.

What’s Oh Expensive?

As an alternative of simply pinging the homepage, we crawl your total web site and notify you of any damaged hyperlinks on any of the pages.

Moreover, we will:

• carry out multi-location uptime checks
• test your SSL certificates,
• measure your web site’s efficiency
• be sure that your scheduled jobs run on time
• test in case your software is wholesome (by monitoring your free disk area, database, Redis, Horizon, safety warnings, and extra!)
• notify you of any modifications to your DNS information
• monitor the expiry date of your area
• render standing pages so you possibly can inform your customers in regards to the state of your service. Here is the standing web page of Laravel powered by Oh Expensive.

All of those checks are function wealthy on their very own and will be personalized to your liking. Wish to monitor a password-protected web page? No drawback! Wish to get notified 14 days earlier than your certificates expires? Yup, we will do this! Wish to know in case your CPU is spiking for a few minutes? That is lined too!

You’ll be able to learn extra about Oh Expensive’s checks in the intensive documentation.

When one thing goes mistaken (or turns into okay once more), we will notify you through mail, interactive Slack notifications, Telegram, MS Groups, SMS, webhooks, and extra. Take a look at the notification docs to know extra.

After all, we additionally provide an in depth API, so you possibly can combine Oh Expensive into your individual programs. There’s additionally a group of instruments that already combine with Oh Expensive, comparable to a CLI instrument, a Raycast extension, a WordPress plugin, and far more!

The historical past of Oh Expensive

About six years in the past, I used to be searching for a superb answer to watch the uptime of the web sites maintained by my firm Spatie. When encountering such an issue, I all the time suppose: “how laborious can it’s to write down my answer for this”. I created a bundle referred to as laravel-uptime-monitor. It was initially launched on twenty second November 2016; how time flies!

On the time, I additionally wrote just a few instruments to test a web site’s SSL certificates and damaged hyperlinks. This bought the eye of Mattias Geniar, a crew lead of Nucleus, a preferred Belgian internet hosting agency. He had the concept of partnering as much as create an easy-to-use service to test uptime powered by my open-source stuff. Throughout that interval, my buddy Dries Vints and I have been additionally desirous about working collectively on a pleasant facet undertaking.

Someplace round July 2017, the three of us met in a bar in Antwerp, Belgium, to speak issues via. The first goal of the assembly was to measure if we have been enthusiastic sufficient about this undertaking to place our hearts into it. From the get-go, all of us favored creating an uptime service as our passion undertaking.

In that assembly, we additionally considered a reputation. Everyone knows that naming issues is likely one of the laborious issues to do. Belgium has many good beers, so it is no shock that the bar we have been sitting in was lined in beer commercials. One in all them was this one for a fantastic one referred to as “Moeder Overste”, which interprets to “Mom Superior”.

We have been considering: “What would Mom Superior Superior say if her web site was down”. Instantly “Oh Expensive” got here to thoughts. We thought we might solely hold it as a work-in-progress identify, however over time we favored it a lot that we used it as the ultimate product identify.

In that assembly, we did not make any type of enterprise plans, or did not make any monetary agreements, or put any deadlines. We have been creating Oh Expensive as a pure passion undertaking.

I nonetheless do not forget that throughout preliminary growth, I felt a variety of freedom in comparison with creating tasks for a consumer. We took our time to get issues proper. Throughout this preliminary growth, Dries left us to work on different tasks on his personal, and he ended up working for Laravel, which is sort of good. Each Mattias and I made a decision to proceed creating Oh Expensive. Mattias had good in-depth information of how certificates labored underneath the hood. I used to be (and suppose I nonetheless am) very proficient at structuring code and writing issues in a readable manner.

Oh Expensive was inbuilt public. We frequently tweeted and wrote weblog posts in regards to the state of the undertaking and the way we tackled technical issues. On this outdated second on Twitter, you will discover some ideas we have been tweeting. We additionally began a mailing listing so we may ship individuals an electronic mail when launching our web site.

Preliminary growth occurred in August of 2017 and was based mostly on the primary version of Laravel Spark. This date remains to be seen within the very first migration of our database (our migrations at the moment are squashed). By October – November, we had a working POC to watch all Spatie web sites and a few of Nucleus.

Within the following months, we added a notification system, the damaged hyperlinks and blended content material checks, and a variety of settings to customise the checking course of.

From the very begin, we additionally made certain that we had an automatic suite of checks to verify our code was working accurately. This take a look at suite allowed us to refactor the code to our liking, making it extra readable with every go and with out concern of breaking issues.

The preliminary design of Oh Expensive was made by my colleague Seb, and he had an thought to make our homepage stand out: make it screaming pink.

It was additionally type of a reference to the pink error screens on the time you’d see when a web site certificated had expired within the browser.

On 11 January 2018, we thought Oh Expensive was steady sufficient and made it publicly accessible. We had not deliberate that date or had a proper launch plan. We even selected the ultimate costs that very night. After the location was publicly accessible and folks may register an account, we used our electronic mail listing to tell each .

Here is a screenshot from our Slack of that second (yeah, at that second, we spoke Dutch internally).

Within the years earlier than launch, each Mattias and I had constructed up our audiences on Twitter. I did it by releasing open-source software program for the PHP / Laravel Ecosystem. Mattias had a highly regarded DevOps publication, which we additionally used to tell individuals in regards to the launch of Oh Expensive. We have been fortunate that Laravel Information picked up on our launch. So, it is no shock that we had a variety of eyeballs on us that night.

On a technical degree, every little thing went very easily. There have been no important hiccups. After half-hour, we had our first paid buyer. Here is how that appeared like in our Slack

This was a really magical feeling for me. At that time, I solely made cash with software program via consumer tasks, and this primary quantity earned via a SaaS felt particular.

On the finish of the month, we had 32 paid prospects, which in my thoughts, was an incredible success. Keep in mind, Oh Expensive was handled very very similar to a passion undertaking. The time we put into was thought-about “free”. This primary earnings was sufficient to cowl our internet hosting prices. Though earnings have been small, you might say that Oh Expensive was worthwhile from the very first month.

Within the following months, we saved including options proposed by our purchasers, and we solely added issues that have been helpful for ourselves and 80% of our viewers. One of many objectives of Oh Expensive was to be essentially the most easy answer, so we tried to maintain function creep to a minimal.

We additionally tweaked our homepage a little bit bit as we bought some “aaaarrgggh my eyes” suggestions on the preliminary brilliant pink design.

On the twenty fifth of February 2020, two years after the preliminary launch, we launched the first redesign of Oh Expensive. This redesign was made by Rik Grafiek. Together with our web site, we additionally up to date our brand. Here is how our new homepage appeared on the time.

After that redesign, we began including help for extra forms of checks:

Redesigning Oh Expensive… for actual!

Mid 2021, Mattias and I have been desirous about how we may enhance the service. We already added fairly some options, each huge and small.

When Oh Expensive began, there have been just a few checks and options. Our design improved through the years, nevertheless it was clear that we wanted a complete redesign to make all options match. Tabula rasa! We thought: “How would Oh Expensive look if the design was as much as par with the very best designed companies, like Stripe.”

As Mattias and I aren’t any designers, we contacted just a few trusted events that might assist us with creating the brand new design. The get together we ended up with was Digital With You, a Belgian digital studio with which I already had good contacts.

We had a number of conferences with Dieter and Steve of Digital With You to clarify how Oh Expensive works and what we have been aiming for. It actually helped that they have been already utilizing Oh Expensive for their very own tasks.

Steve got here up with a stunning design for the homepage. After all of us determined this was the best way to go, he continued with each web page of the entrance web site. You may suppose our advertising web site is barely a homepage and one or two additional pages, nevertheless it’s fairly dense. We have now pages explaining all of our important options, and every web page has distinctive components to clarify a selected function.

Steve designed all the person components and pages in Sketch, which we mentioned in common conferences. Listed below are some screenshots from that Sketch file.

As an alternative of utilizing “Lorum Ipsum” copy or copying what was already on the dwell homepage, Steve got here up with new copy that was higher than what we had. An actual energy transfer! We used a variety of Steve’s copy in our redesigned web site.

Now that we had a redesign prepared in Sketch, it was time to show it into HTML. In early 2022, we introduced on Nick Retel to our undertaking. Nick is a kick-ass front-end developer hailing from The Netherlands.

He translated the Sketch file from Steve to Tailwind-style HTML sprinkled with Alpine parts. Throughout spring 2022, he targeting the advertising web site, rebuilding every web page with a variety of consideration to the main points. When you check out our new homepage or any of the function pages, you possibly can see that there are a variety of animations and little interactive components.

Initially of summer season, Nick targeting rebuilding the app. Nick used the design language from the advertising web site to construct the again finish, however there was fairly some work deciding how the UX would work. With Nick, I considered methods to enhance the location listing, how we deal with notification preferences, and the way standing pages are managed.

Because the app a part of Oh Expensive can also be intensive, this took us a while. It was a really rewarding expertise as we paid a variety of UX debt from the previous.

From mid-August to mid-September, we did intensive design testing and let some beta testers in to provide suggestions to identify points. I really feel that this time was very properly spent: we made certain that our redesigned web site could be very polished and error-proof from day 1. In a subsequent part of this put up, I will element how we examined our design.

Our improved UX

Let us take a look at how the redesigned web site appears to be like and what enhancements we revamped our outdated web site.

One of the crucial essential pages is, after all, the homepage. Here is what our earlier one appears to be like like.

And this is our shiny new one:

You’ll be able to see that along with redesigning our web site, we have additionally up to date our brand. Right here it’s in its full glory.

The entire entrance web site can also be accessible in darkish mode. Here is how the darkish model of the house web page appears to be like like.

On the redesigned homepage, there’s a variety of content material under the fold that is not proven within the screenshot above. We clarify which options there are, present some testimonials and clarify our pricing. Listed below are some extra screenshots of the stuff under the fold.

You’ll be able to’t see in these screenshots that there are a variety of delicate animations.

We’re additionally updating our docs part. Here is what it appeared like earlier than.

And this is what our new docs seem like.

The general public advertising pages are essential for us as we hope they will persuade extra individuals to make use of our service. However after all, we did not cease on the advertising web site, and we have additionally redesigned the app, fixing long-standing usability points.

The earlier app UI was virtually 5 years outdated. We designed it when Oh Expensive solely supplied its preliminary 4 checks. Presently, we provide 9 checks. Here is what our earlier web site listing appears to be like like.

You’ll be able to see that, with 9 checks, it’s kind of busy.

Here is what the brand new listing appears to be like like.

You’ll be able to see that this listing is far calmer. We solely present the problems that we discover. If no points are discovered, the dot earlier than the location will probably be inexperienced.

While you click on these three dots on the finish of a row, you will see a little bit submenu that permits you to navigate to frequent pages for that web site.

Let’s check out the outdated web site overview web page.

Not too dangerous, nevertheless it’s significantly better in our new design. We’ll present much more useful info by default.

Once more, these three dots let you take related actions or pages for a test.

Let’s go to a different essential a part of our software. Oh Expensive can ship you notifications each time we detect one thing mistaken together with your web site. There are lots of notification channels: mail, Slack, Telegram, and Discord, … You’ll be able to configure when and the way we should always notify you on the crew notifications display screen.

Here is what the earlier screens appeared like. We have now screens per channel, and on the listing of a channel, you possibly can see all of the attainable notifications we will ship.

The issue with this setup is that it is laborious to see which channels you have got configured. To do this, you will must click on “Mail”, “Slack”, “Discord”, … within the sidebar and test in case you have one thing configured.

We have now revamped this display screen. As an alternative of screens per channel, we now solely have one display screen that exhibits all notification configurations.

On the listing, we do not present all these notifications toggles anymore. As an alternative, we present what number of notifications are configured for the channel. If you wish to see which notifications, you possibly can edit a configuration.

Along with monitoring websites and functions, Oh Expensive additionally affords stunning standing pages. The standing pages let you talk the well being of your service to your viewers. Listed below are some Oh Expensive powered standing pages for the Laravel group and Flare.

I virtually did not dare share the way it beforehand appeared to arrange a standing web page. It is type of messy.

You are able to do quite a bit right here, nevertheless it is not pleasing to the eyes. In our redesign, we have vastly simplified this listing, and this is what it appears to be like like now.

When you click on one of many standing pages, you will see this standing web page overview.

Discover how related this all appears to be like to the location listing and web site overview. This can be a profit to us: in case you are already accustomed to websites, you will instantly really feel at residence when working with standing pages.

How we examined the redesign

Let us take a look at the PR that incorporates the entire modifications of the redesign.

It’s intensive: a variety of code has been modified, virtually 2 000 modified recordsdata, and over a 1 000 commits. You may surprise how we managed sustaining, reviewing, and testing this PR.

All of the redesign modifications have been accomplished on a separate department referred to as redesign-2022. At any time when we add options or fastened bugs on the important department, we instantly merged the important department with redesign-2022. This fashion, we prevented giant merge conflicts when merging redesign-2022 again to important. It additionally helps that Oh Expensive has fairly an in depth take a look at suite. We made efforts to have passing checks on each the important and redesign-2022 branches to make sure our code works accurately.

Most of our checks be certain that all back-end code works accurately, and we do not have too many checks for the UI itself. To make sure the UI works accurately, we have arrange a separate area, beta.ohdear.app, that makes use of the code from the redesign-2022 department. As a result of our redesign did not comprise any modifications to the DB, we may simply let beta.ohdear.app use our manufacturing database.

This fashion, we did not must seed any dummy information however may take a look at our redesign with the manufacturing information. We may simply log in with our common person accounts, see all websites, and test outcomes from manufacturing utilizing the brand new UI. This immensely helped catching bugs, as the very best information to check is the manufacturing information.

To assist with help, Oh Expensive has an admin function referred to as impersonation. This enables us, as system house owners, to log in as anybody else. We used this function at beta.ohdear.app to take a look at the most important Oh Expensive accounts. Once more, after we noticed UI bugs in these accounts, we additionally fastened them.

After we have been certain that essentially the most evident UI redesign points have been all fastened, it was time to let some outsiders take a look at it. We despatched out a tweet asking who wish to assist up beta take a look at.

The @OhDearApp redesign is now technically full.

We’re beta testing a bit extra to repair all bugs. In order for you entry, mail us at help@ohdear.app (you don’t must have a subscription).

Now writing an in depth launch weblog put up, prepping PH web page, and so forth…

🚀 Launch on 3/10 pic.twitter.com/a8e6A6fbdg

— Freek Van der Herten 🔭 (@freekmurze) September 16, 2022

We bought about 30 those that needed to assist us to check. They solely reported a handful of points. Throughout this part, we additionally used Flare to report any errors on the beta.ohdear.app. Nearly no exceptions got here in, which gave us confidence that the redesign was prepared for prime time.

Used applied sciences

The tech stack of Oh Expensive is a love letter to the Laravel and PHP group. The primary software is constructed with Laravel 9 and runs on PHP 8.1. We use the newest model (on the time of writing); that is a typical theme in every little thing I work on.

On the entrance finish we use Tailwind CSS and Alpine. The interactive UI components within the software are powered by Livewire.

All of our checks are carried out by queued jobs, that are dealt with by Laravel Horizon, an actual power-house bundle.

We additionally use a ton of packages, of which quite a bit are homegrown at Spatie. Right here they’re in alphabetical order.

• dragonmantank/cron-expression: convert cron expressions to human readable strings
• laravel/cashier: deal with incoming funds through Stripe
• laravel/jetstream: dealing with groups, person profiles, and authentication UI
• laravel/nova: a wonderful admin panel, primarily used to assist resolve help issues
• lob/lob-php: the API for a cool service that we use to ship welcome postcards to every new buyer
• maatwebsite/excel: exporting our damaged hyperlinks and blended content material studies to CSV and excel
• mattiasgeniar/phpunit-query-count-assertions: we use this in our take a look at suite to verify some items of code do not make too many SQL queries
• ohdearapp/ohdear-php-sdk: we use our personal SDK to make sure that the responses from our API are appropriate
• spatie/array-to-xml: the outcomes of our standing pages will be considered as XML. Utilizing this bundle, we will convert the PHP array with outcomes to XML.
• spatie/commonmark-shiki-highlighter: highlighting code snippets on our weblog
• spatie/crawler: this bundle powers the damaged hyperlinks and blended content material checks
• spatie/dns: fetches DNS info utilized in our DNS test
• spatie/eloquent-sortable: used to make particular DB fashions sortable, such because the websites displayed on a standing web page, doc pages, and faq objects
• spatie/interactive-slack-notification-channel: our interactive Slack notifications (you possibly can rerun or snooze a test within the Slack notification) are powered by this one.
• spatie/laravel-activitylog: we retailer who carried out which operation on a crew, web site, or standing web page. Mainly, we’re utilizing this to maintain an audit log
• spatie/laravel-backup: this bundle can backup the database to S3.
• spatie/laravel-collection-macros: each time I could make a group chain operator extra readable, I add a macro to this bundle. I do not instantly PR them to Laravel as most is perhaps a bit opinionated
• spatie/laravel-feed: generates the RSS feed on our weblog and standing web page
• spatie/laravel-flash: the most straightforward (and possibly greatest?) bundle to deal with flash notifications in a Laravel app
• spatie/laravel-health: used to parse incoming outcomes for our software test
• spatie/laravel-honeypot: to catch and cease requests by bots on numerous types on our public web site
• spatie/laravel-json-api-paginate: paginating outcomes from our API in line with the JSON-API
• spatie/laravel-login-link: this bundle provides a useful login hyperlink for builders in our native surroundings.
• spatie/laravel-markdown: we write our weblog posts in Markdown. This bundle converts that HTML to Markdown.
• spatie/laravel-medialibrary: on our standing pages, you possibly can add your solely brand, favicon, … This bundle handles storing these uploads and associating them to a standing web page mannequin.
• spatie/laravel-menu: this bundle is used to render all menus and navigation objects in our UI.
• spatie/laravel-query-builder: used to remodel the question parameters of incoming API requests into SQL queries
• spatie/laravel-queued-db-cleanup: some tables comprise a lot information that even Laravel’s MassPrunable performance causes troubles. Our bundle can clear up huge quantities of outdated information utilizing queued jobs.
• spatie/laravel-rdap: fetching details about domains
• spatie/laravel-remote: very useful to execute artisan instructions on the server with out having to ssh into the server manually
• spatie/laravel-robots-middleware utilized by the damaged hyperlinks / blended content material crawler to interpret and respect a robots.txt file
• spatie/laravel-schedule-monitor: used to interpret incoming outcomes for our scheduled jobs test
• spatie/laravel-short-schedule: this bundle permits us to run scheduled jobs at a sub-minute interval. We use this to find out if our incoming scheduled jobs endpoint is wholesome always and quickly cease notifications for that test when it isn’t.
• spatie/laravel-site-search: this can be a cool one which powers the search on our doc pages. It’s going to crawl all of the docs pages and put them in Meilisearch. The search enter is a Livewire-powered part that queries the Meilisearch index.

• spatie/laravel-slack-alerts: this bundle makes it straightforward to ship messages to our inner Slack channel when noteworthy issues occur: any person creates a person account or crew, or subscribes

• spatie/laravel-sluggable: producing slugs for every kind of fashions. The slugs are used to make URLs to, for instance, weblog posts and FAQ objects, extra readable.
• spatie/laravel-stubs: offers opinionated stubs used when creating a brand new migration, controllers, …
• spatie/laravel-support-bubble: we use this little bundle to render a help kind on all pages. Submitted requests are despatched to Freshdesk

• spatie/laravel-tags: we use tags on our BlogPost and FaqItem fashions
• spatie/laravel-tail: this bundle permits tailing the appliance log, which could be very useful for debugging
• spatie/laravel-url-signer: when performing an uptime test, the principle Oh Expensive software sends a signed HTTP request to one in all our many satellite tv for pc servers throughout the globe. The satellite tv for pc servers then pings the web site to be checked and studies again to the principle app. This bundle indicators requests to the satellite tv for pc server, so it is certain the request comes from the principle app. Laravel’s built-in signing capabilities solely help signed requests inside a single app; the spatie bundle makes it straightforward to ship signed requests between a number of apps
• spatie/laravel-validation-rules: each time I create a validation rule that I need to use in a number of apps however is simply too opinionated for Laravel, I put it on this bundle. We use a few these guidelines within the Oh Expensive codebase
• spatie/laravel-webhook-server: one of many methods Oh Expensive can ship notifications to you when one thing is mistaken is by sending webhooks to be able to react in your app nonetheless you need. This bundle is used to energy our webhooks to your app.
• spatie/pest-plugin-test-time”: used to check time associated performance. And sure, the Oh Expensive take a look at suite is written in Pest.
• spatie/simple-excel: used to export all of our invoices to a CSV despatched to our accountant. Quickly, we’ll refactor all usages of maatwebsite/excel in our codebase to spatie/simple-excel
• spatie/ssl-certificate: used to learn info of an SSL certificates of a web site
• wire-elements/highlight: a wonderful bundle that makes it straightforward so as to add a command enter bar to a Laravel app. Utilizing our command enter bar, you possibly can shortly go to the outcomes of any web site or standing web page, go to crew administration and far more.

Some cool numbers

To complete off, I might prefer to share some numbers on Oh Expensive on the time of scripting this weblog put up.

In complete, we carried out 14 148 461 956 checks, sure, 14 billion.

We have despatched out 5 710 663 notifications since we launched the service.

On common, we carry out about 20 000 jobs per minute, 1 200 000 per hour.

For essentially the most unstable web site that we monitor (we’re not going to disgrace them by mentioning the URL), we detected a whopping 55391 durations of downtime.

Since having added our scheduled jobs test on twenty fourth September 2020, we had 555 782 234 incoming pings from scheduled jobs from all our purchasers mixed.

A whopping 50% of all notifications get despatched through mail, and 25% through Slack.

Our intensive take a look at suite incorporates 859 checks written utilizing Pest.

Additional studying

Through the years, I’ve written many weblog posts on Oh Expensive’s inner working and the way we optimized issues. Here is a small choice:

Cannot get sufficient? Listed below are all my weblog posts on Oh Expensive.

In closing

Wow, you’ve got reached the top of this prolonged put up. Congratulations! The Oh Expensive redesign was 1,5 years within the making, and I am very pleased with our work.

Oh Expensive began as a passion undertaking, nevertheless it has grown to one thing my co-founder Mattias, and I may dwell from. However don’t fret, we like working respectively at Acheron and Spatie, and nonetheless contemplate that our important jobs. I am delighted that engaged on Oh Expensive nonetheless has a passion feeling to it. No planning, no deadlines, …

I genuinely suppose Oh Expensive now has a world-class design and is the best-looking monitoring app accessible.

I need to thank:

• Steve and Dieter from Digital With You for delivering a kick-ass design
• my colleague at Spatie Seb for clear up our entrance finish belongings
• Nick for his good work implementing the design made by Digital With You
• Sean, for caring for the Oh Expensive help, and for his suggestions and small enhancements on the beta
• My co-founder Mattias for dotting the i’s, crossing the t’s, and pushing via with all of this!

I hope you will get pleasure from Oh Expensive as a lot as we did constructing it.