Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It’s a little hard sometimes to tell exactly what a software development team is doing. If you’re happy with the software, you assume they are hard at work doing wonderful things you’ll love. If you’re not happy with the software, you assume they are sitting on their butts doing nothing. I thought it would be interesting to document exactly the kind of work we do day to day. I guess kind of like release notes, which you normally don’t get to see for web apps.

Here’s some very specific things we’ve done in the last two weeks.

  • We use a gradient background effect on some of the text headers on the site. Safari 8 on desktop would hide the text until you selected it, confirmed by three different computers. We couldn’t find a reasonable fix, even messing with it in JavaScript to try and force a repaint. We didn’t want to give up on the effect, so resorted to a simple UA sniff (we already had a lightweight system in place for things like this).

  • We were throwing a 200 status code instead of 500 for some errors.

  • Someone on a Sitepoint comment thread noticed while printing out an article on that site, the CodePen embed was unstyled and looked like crap. Turned out we were serving media="screen" to the stylesheet for embeds, thus getting no print styles. Just removing that media attribute made them embeds print just fine.

  • We adjusted the query for showing blog posts on the homepage to ensure they were at least written in the last month. We’ll make that newer as the feature picks up.

  • Someone tried to add CodePen to their home screen on iOS and noticed we didn’t have a dedicated icon for that. So we fixed that up and made sure we have a good icon experience for all platforms.

  • Avatar uploading would break in a weird situation where some browsers reported the dimensions of it differently.

  • Tags that had a period in them, like two.js, would 404 when you went to the URL like http://codepen.io/tag/two.js/. Turns out it was a tricky little RegEx on our end that needed to be adjusted, which was nice because we thought it was a deeper issue and that we would have needed to do something more drastic like not allow them and remove the period from all existing tags.

  • While hanging out with Dave Rupert, he gave me some feedback that he wished it was way easier to add the most common viewport meta tag to the “Stuff for Head” section, so we put that in. We went with a one-click to add, rather than something like a checkbox. A checkbox would have required some underlying model changes to how Pens are saved, which is fine, but nice to avoid for something so little.

  • Fixed a syntax error in the Live View code that would cause it to fail sometimes.

  • There was a bug with Private Pens and Collections. You can add Private Pens to Collections, but only you can see them, not people who don’t own that Pen. The bug was, you could add other people’s Private Pens to your Collections, and that would expose them for all to see. So we fixed that and also made it not possible to add non-owned Private Pens to Collections at all. Then we screwed it up so you couldn’t add your own anymore, and had to fix that.

  • Upgraded to CodeMirror 4.8 and made sure our CodeMirror CSS was up to date as well. We do some very custom stuff with that so it’s easier than we’d like to get out of sync on that. It ended up fixing a Firefox bug where when the editors were in left/right mode, code would be selected as you used the scroll bar.

  • Fixed a bug in the Organize screen, where you could drag empty slots around.

  • We released a newer, optimized version of Emmet. We stopped it from trying to do vendor prefixes, because we have two other ways to handle that that are just better (Autoprefixer and -prefix-free). But, we had a line of JavaScript to stop it from doing that. We don’t load Emmet in the mobile editor, and it threw an error, breaking the mobile editor. We fixed that up.

  • Upgraded our version of jQuery to 2.1.1. We were using the legacy 1.x branch, but our browser support levels don’t require that so we saved some bytes.

  • To help some security stuff with SVG, we have to strip some things in certain contexts (like when you view a Pen as slug.svg). We were stripping some viewBox attributes on some elements though, so we stopped doing that.

  • The ul’s and ol’s in comments were a little busted, they didn’t have enough margin beneath them. They were missing a ‘text’ class that we normally apply to blocks of user generated text.

  • Linking to a Pen-as-resource wasn’t working for the s. domain, only the raw domain, but some Pens needed it to be same-origin, so we started allowing that.

  • We started loading assets from assets.cdpn.io, because we could make that cookieless and that’s a little performance boost. Then later fixed a bug where we had to ensure background images in CSS would still load on either HTTP or HTTPS properly.

  • There was a pagination bug in the blogs that would show the last item on a page as the first item on the next. Needed a query adjustment.

  • One of the ads was distorting a little bit at certain widths in its flexible parent. Had to adjust the CSS a bit to make sure the height scaled with the width as expected.

  • Ensured that a tab key press in the JS editor inserted 2 spaces like everywhere else, while still disabling Emmet there.

  • Added some code to be extra clear (to use admins) that a Pen is a fork. So when we are picking a Pen for the homepage, we don’t accidentally pick one where we should have been picking the parent.

  • Made exported Gist titles match the title of the Pen properly.

  • We adjusted the positioning of some buttons in our admin area, so that when we’re doing our daily spam cleanups, we can continuously click on our “spam” or “not spam” buttons and not accidently click the wrong one.

  • Came up with a much smarter way to handle our infinite loop detection, which has so far resolved all outstanding issues.

  • Fixed an issue where if an avatar didn’t load in some situations, the alt text would hang off the right of the page and cause horizontal scrolling.

  • There was a CSS z-index bug where lines between editors would show on top of certain popups. We were able to get rid of those lines entirely.

This (absolutely not complete) list was done while working on our big feature release (the Job Board), other upcoming feature releases, doing customer support, normal community stuff, spam prevention, front page picks, accounting, and all the rest of the day to day stuff.

Most of these things will probably never be noticed by most users and certainly aren’t worth announcing by themselves. But hopefully, week after week, they add up to better software.