All things considered, we were pretty fortunate at CodePen in 2020. We lovingly refer to CodePen as a social development environment. CodePen is a place that helps people learn code, share ideas, debug problems, and have fun from any computer with a web browser. That is the kind of business that does well during these times where so many people are working and schooling from home.
I’m particularly excited about CodePen’s future, as from where I sit, I can see that we’re in a better place than we ever have been. That’s due in no small part because we spent most of 2020 on infrastructural tasks. We spent a lot of time getting our stack in order, both front end and back. While that job is never-ending, we’ve reaped the rewards already with healthier systems, lower costs, and reduced support tickets.
Rebuilt PRO Asset Hosting
This was a half-dozen individual releases for us. All of them focused on improving how the Asset Hosting feature works. Everything about Asset Hosting was redone, making it easier to use, faster, and more feature-rich.
- The uploading experience is nicer, supporting multiple files, uploading from mobile, editing files before you uploading them, and showing accurate upload progress.
- Finding assets is easier with new filtering, sorting, and search options, as well as instant previews.
- Using assets is easier as you can copy them in a variety of useful formats or one-click add to Pens.
- Image assets are (now) easy to edit, allowing you to resize, crop, and adjust the format either permanently or as URL param adjustments.
- Text assets are editable at any time using the standard editor you’re used to all over CodePen.
- Storage limits were raised for all PRO plans.
Format on Save
If you haven’t flipped the Format on Save feature on in your Accounts Settings yet, you should try it! Whenever you save, we’ll auto-format your code if we can (we support most, but not all languages).
Whether you have it on or off at the Accounts Settings level, you can still control whether any given Pen auto-formats in the Pen Settings. That means you can turn it off if on some Pen you don’t want it.
We upgraded or formatters and code linters this year as well, using Prettier where we can and to newer linting tools like HTML Hint.
A New Homepage
This was another one of those releases where it looks now like one big change, but for us, was a half dozen releases that trickled out over the year.
- We rewrote how following works to make for a more compelling social feed.
- That was related to rewriting how activity works to be more useful.
- We knew we wanted to scrap the term “Dashboard” and make the homepage itself a portal to your own work, so we rewrote it to work there.
- Then we rewrote how you explore “Picks” and popular Pens into are more interesting algorithmically-powered experience called Trending. All this following, activity, and trending stuff is built through Stream.
- Once all those parts were shipped, then we could release the updated homepage in the way we envisioned it from the start.
- Much of this work involved getting more and more of CodePen onto the most modern parts of our stack: React, Apollo GraphQL, and using our latest design system components.
Reorderable Collections
Collections are your place to curate things on CodePen. You could be collecting inspiration, interesting related demos, things to show a client or students… anything you like, whether you own it or not. This year we made Collections re-orderable, so you’re free to customize your Collections in that way. First impressions matter 
Oh, and Collections aren’t just Pens anymore, they can contain Projects and other Collections as well. (Technically they can contain Posts this year, but that’s the last time you’ll hear me say Posts, as we sunset those this year.) That was made possible by a little clever infrastructural work. You know Pinned Items? Under the covers, those are now Collections (so they needed to be able to accept any type of item). This ability for us to have Collection types is useful for us in consolidating efforts, so improvements to features can be felt more broadly.
Skypack
Perhaps if you are an astute listener of the podcast, you’ve heard us tease an “npm” feature for… many years now. Internally, we wrote that feature a number of times, the latest even making it to production under a feature flag. But here’s the thing: it’s complicated. Building any ol’ package from npm so that it’s ready to link up and use on the client side has more edge cases than a, uhm, cliff museum. We didn’t want to ship anything sub-par, and so we would wait on it, think on it, and work at it. During that time, Skypack became a thing. They are doing what we were trying to do ourselves! They pre-build npm packages, making them ready for browser usage, and service them from a purpose-built CDN.
import canvasConfetti from 'https://cdn.skypack.dev/canvas-confetti@1.3.2';
canvasConfetti();So now, we can offer everything our own integration would have done, only better by integrating with Skypack. Right now, you can search for npm packages and include them from your Pen settings. It’s likely this feature will get better as we get more clever with their API. We made sure it works nicely in Projects too, making things like React Projects quite nice!
The First Custom Editors
CodePen is very focused on front-end web technology. That’s likely long to be true, but we’ve been architecting CodePen such that how we process code and display results isn’t tied to directly to any technology. Some of our first pokes at this was making purpose-built editors for Vue SFC files and Flutter. We’re pretty stoked about the possibilities here.
A Boatload of Quality of Life Things
- A way better JavaScript Console. The Console that you can pop open in the Pen Editor now does things it never has before, like actually report errors that get thrown when the Pen executes. While it’s still useful to pop open the browser DevTools sometimes, this makes it so you have to less and less.
- Font Awesome SVGs. The entire (free, open source version) of Font Awesome icons are all a click away in the Assets modal.
- Gutenberg Block. Embeds are perfect for blog posts, and WordPress is the king of blogging. This new block makes it much nicer to embed Pens if you’re using the new Gutenberg editor in WordPress.
- pen.new. A short URL you can remember that hops you right to the Pen Editor.
- New Emmet. We were the first to roll out the latest version of Emmet, which has cool features like seeing a preview of HTML expansions before you do the expansion.
- Click-to-Load Embeds saw an improvement. We worked with the Vue team to make sure Embedded Pens worked well in their Vue 3 documentation, which meant balancing speed and usefulness. Now, click-to-load embeds are nearly as lightweight as they were before, but users can see the code before they click-to-load the preview. Speaking of performance there, all embeds and images throughout CodePen are lazy-loaded as of this year.
- New coding fonts like JetBrains Mono, Courier Prime, Recursive, and MonoLisa join are already awesome lineup including Operator Mono, Inconsolata, and more.
DevOps for Days
As I mentioned at the start, our work in 2020 was far more inward-facing than outward-facing. Our fearless technical leader Alex (now joined by his partner in life/crime Dee) took invested an incredible amount of time and energy into DevOps and infrastructure. The result of that work is astounding to us.
- CodePen runs on on a tiny fraction of the numbers it was running on before, saving the business money, while being faster.
- We got all-new developer environments that we spin up with a single command and deliver all sorts of local observability.
- The Projects services were entirely re-written, opening the door for our entire team to work on all of it. Projects are easily twice as fast, and wonderfully reliable.
- A complete move to GitHub and GitHub Actions.
- Our email-sending code was ported from our old home-grown system to leveraging new best-in-industry services (like Postmark) and more useful internal tools (like an approve-and-send flow).
- A march toward running as much of CodePen’s infrastructure in Go as we can, because it’s ridiculously stable and fast.
- We now leverage Cloudflare Workers more and more, pushing some compute and serving tasks to the CDN edge, which means more speed for everyone on Earth. We even used that tech to improve how we serve our public landing pages: it sucks up fancy authored content from WordPress and displays on a Rails-rendered page (best of both worlds, for us).
- Much of our billing code was re-written to trust in the powerful APIs of our billing service partners (read: fix a bunch of bugs and delete a bunch of code).
We’re looking forward to a 2021 where we can move forward more quickly (yet safely!) and deliver on the ambitious ideas we have in store for CodePen.
The post CodePen’s 2020 appeared first on CodePen Blog.