I saw a Twitter thread go around recently about the monthly costs for services from the perspective of a web developer. Years ago I did a post like that over on CSS-Tricks, also from a personal level. I thought it would be interesting to document this kind of thing at the company level.
Let’s look at the recurring costs of a startup. Say, CodePen 😉
This is intentionally omitting one-off costs. For example, when a new employee starts they get a laptop. Par for the course for a tech job. We might replace that laptop years later, but it’s not really an ongoing or monthly expense in the spirit of this article. We’re also not including things like office costs.
These are the services we use to host CodePen, manage our DNS, wrangle our source code, deliver our email, and track errors.
~$8,000 / month
We run the bulk of our infrastructure on AWS. Other than salaries, servers are our #1 expense. They are also a strength of CodePen. We have a lot of internal knowledge on running servers and that unlocks a lot of possibility for us. It’s not unusual for us to run 40+ servers on some days, which is a combination of database servers, web servers, and all sorts of different services split off onto their own servers, like EC2, RDS, Lambda, CloudFront, S3, EFS. We’ve talked about servers a bunch on CodePen Radio:
$60 / month for three domains
We use Cloudflare for things like low-level DDoS protection. It’s rather astounding how much value you get out of Cloudflare for such an affordable price: $20/month per domain. We’ve found, for the features we find the most valuable, this is the only plan we need. For us it works out to a bit more than $20 a month because we’re using it on more than one domain, but it’s still a great value.
$32/month for 8 users
We used GitHub for a long time for our private repos, but ultimately switched to the self-managed version of GitLab for a variety of reasons. We’re very happy with it! We talked about making the switch on our podcast, and GitLab covered it on their blog.
~$500 / month (few million emails/month)
We use Sparkpost for sending email. The CodePen Spark email newsletter goes out to over 1,000,000 users. We considered using Mailchimp, but we figured out that the Mailchimp plan for that would cost us $4,200 / month. Mailchimp is great, but that’s a bit cost-prohibitive for us. Instead, SparkPost is more of a lower-level API that just handles delivering email for us and basic analytics.
That means we had to build a lot of email infrastructure ourselves though! We use a system called ETL to do that. We got into the details of ETL in a two-parter on CodePen Radio:
Jetpack Professional $299/year
This very blog is a self-hosted WordPress site (well, the blog site we wrote this on is anyway 😉) It’s on a pretty basic Media Temple server. I have a DV Level 3 server that hosts this and a handful of other little sites. We decided to host the blog on a separate server from the main site in the early days on purpose so we could use it to communicate in case anything went wrong with the main site.
WordPress itself is free, but hosting it and add-ons can cost money, like Jetpackwhich we use for features like real-time backup of the entire site including database. Even WooCommerce and the ShipStation integration we use is free.
$59 / month
We use a medium Honeybadger plan for Ruby error tracking. It gathers up all the vital info about errors throughout CodePen to help us track down bugs.
We talked with the Honeybadger team on CodePen Radio, too! #105: Honeybadger.
$15 / month
Some of the data, and particularly some of the real-time feature of CodePen are driven by Google’s Firebase service, like Firepad for our Collab Mode. We mostly use Cloud Firestore, as it’s the modern data store from Google that seems like where they are going, but some things we needed to keep on Firebase, so depending on the page we use either/or. It’s amazingly cheap for how much it does for us.
~$10 / month
We use Twilio only super lightly, using it to power the ability to send the URL of a Pen via text to a mobile device (useful for quick testing).
$11.95 / month
Pingdom monitors services. Its always watching our web servers and other services to make sure they are up, and alerts us when they go down.
Communication and Organization
We’re entirely remote, so we rely heavily on software to stay connected. Here’s what we use to communicate and keep ourselves organized.
$64 / month for 8 users
Like so many other teams in the world, we use Slack as a primary communication tool. We use it all day, every day to work together across all our different time zones. We’re on a standard plan.
$119.92 / month for 8 users
There are lots of video chat options out there, including free ones, but we pay for Zoom because it’s the only group video chat thing that has consistently worked great for all of us, all the time. I don’t particularly like the app UI, but when it comes to talking to your team, what you need is really good clear communication, and that’s what Zoom does well.
$32 / month for 8 users
At first glance, Notion looks like just another note-taking app. But it’s way more than that to team CodePen. We use Notion for a ton of things:
- Internal documentation
- Managing our newsletter and podcast advertising schedules
- Project management with kanban boards and todo lists
We went in-depth on how we use Notion in CodePen Radio #154: Internal Documentation. And if you’re a regular listener of the show you know we’ve talked about it a bunch this past year as we’ve gotten more attached to it.
$100 / month for 8 users on the Standard Business Plan
We’ve been using Dropbox since the start. Honestly, we’ve been moving away from it a bit but I’m not sure we’ll ever entirely lose it. It is still quite useful to have a shared set of files between the team. But between apps like Notion where we keep all our text-ish documents, Figma where we do our design, and Gitlab where we keep any app-related files, we don’t use it a heck of a lot. Nonetheless, it’s still an extremely handy place to quickly save or share a file, so it’s not likely we’ll let go of our team account anytime soon.
$66.32 / month for a Pro team
Droplr is a menu-bar app for screenshots. We use it to create and share screenshots internally and with members through our support. The great thing about Droplr is that it instantly creates a shareable link to your image, which you can mark up to highlight details. You can also password protect or set a screenshot to “self destruct” after a set period of time.
$40 / month for 8 users on Basic Plan
Our Google Apps account is indispensable to us as the home of our domain email and our shared calendars. Our subscription also includes Google Drive, but we’ve moved away from Drive into Notion and Dropbox over time.
$31.92 / month for 8 users on Team Plan
We use 1Password to store passwords, of course. We also use it for secure notes. Our team subscription gives everyone access to our shared vault team, plus individual vaults.
Support and Social Media
When we first got started, we handled our support inbox and social media directly in each app, but as we’ve grown we had to find ways to streamline it all.
$120 / month for an 8 member team
Front is our unified inbox for all of our support channels. It’s great for managing high-volume inboxes, with features like conversation assignment, snoozing, tagging, and internal notes. We talked about getting started with Front in CodePen Radio #84: Front.
$15 / month
We use Buffer to schedule our social media posts. It’s simple to use, and it makes it so we can consistently post on our social media accounts even when we’re all away from our desks. Our favorite feature is the Instagram integration — though Buffer can’t directly post a video to Instagram on our behalf, the way they handle the posting reminder is great.
We talked about bringing Buffer into our workflow in CodePen Radio #120.
$39 / month for the Professional Plan
Wufoo is our go-to for contact forms. We use it for our support form, our meetup host form, and for one-off forms and surveys. Team CodePen has its roots at Wufoo, too! The three founders all worked at Wufoo before starting CodePen.
As a SaaS company, we need software to process payments. And, as a company with employees, we need a service for payroll, too!
We use Stripe and Braintree to process payments for CodePen PRO subscriptions. We prefer working with Stripe as developers because the APIs are so well done and pretty much everything they do is useful and nice. But Braintree lets our customers pay with PayPal, which many of our members prefer.
These services aren’t a fixed monthly cost, but instead are a cut on every single transaction.
$87 / month for 8 people
We use Gusto for our payroll. It’s user-friendly and reliable. It also has handy features for employees to manage their own tax withholding or make charitable donations directly from their paychecks.
$10 / month
Gotta do that accounting. We have actual accountants too, but I suppose they don’t really count as software.
Can’t design a web app without some design tools!
$60 / month for 5 users
When our lead designer, Klare Frank, joined the team, we started using Figma to collaborate on design. The whole team can work together in Figma to preview, comment, and iterate on a design.
We talked about getting started with Figma in CodePen Radio #180: Design.
$99 / month
Litmus is a tool for testing what your email design looks like across a ton of different email clients. It was very helpful for us when we redesigned our newsletter, The CodePen Spark. We’ve also used it to test our drip email to make sure it looks great in every inbox.
It’s a bit pricey so we tend to flip on an account when we’re actively using it and flip it off when we’re not.
$9.99 / month for The Noun Project
$229 for a on-demand Shutterstock plan every ~6 months
We use both of these quite often for social media work as well!
We have some in-development features that will be using paid services to deliver part of what powers that feature. We find that a common theme on today’s web. There are so many companies providing niche services out there that do such an excellent job with them at usually affordable prices, that a smart startup can do a good job at focusing on whatever their main thing is and outsourcing the rest.
In a sense, that’s what this whole list is, but I even mean pretty core technological things. For example, Zeit Now does an incredible job at spinning up containers quickly. There will be lots of startups leveraging that kind of thing. Companies like GetStream can handle advanced social features, which can be a vital aspect of your app, but perhaps not your core competency as a team.
Originally published on the CodePen Blog.