Every programmer knows that when you meet a problem that you don’t know how to solve, you just search for the answer online. And this works 99% of the time. But occasionally you don’t find a solution, and you have to figure it out yourself. Hopefully this blog post means some other programmer doesn’t have to do the hard yards we have done. Our problem was simple. We wanted to show artwork on a hoodie where the drawstrings hang over the artwork.
It is well-known that it’s a poor idea to store your application secrets in plaintext files, especially if they get committed to version control. So what should you do instead? Previously, we have attempted to solve this problem by having a file that only exists on the live environments, but that is tricky to support. In this post, we describe how we use Amazon’s Key Management Service to safely encrypt our precious secrets…
Previously, when artists uploaded an artwork to Redbubble, we used the same image for all of the clothing styles and the sticker style. Both worked best with a PNG with transparency, and stickers don’t offer any options for editing, so it seemed an obvious choice. But artists have long been asking for these to be split out. And we’ve focused on adding more clothing styles lately, so we decided now was a good time to separate the sticker upload. The problem was that in the uploader we wanted to show the artist a preview of what the sticker would look like after we add the white border to it, and we wanted to do this in the browser in HTML5
The keyboard navigation order (commonly called the “tab order”) is important for users who can’t necessarily use a mouse or control a pointer to navigate a website. However, the tab order is traditionally defined by the order in which elements appear in the HTML document, which can become quite different to the order in which the elements visually appear when a site is built using Responsive Web Design principles.
By using automated rspec testing of our real infrastructure systems, Redbubble has reduced the uncertainty around its operating environments, and decreased the amount of manual correctness checking that engineers have to do when provisioning new systems.
Here at Redbubble, all of our icons are fonts. The vector goodness give us lovely sharp images on even the highest resolution displays. Up until now, we’ve used the excellent fontello.com to generate our font files from a number of icon sets, but our growing team has made managing our configuration file difficult. I’m a big fan of using robots for repetitive tasks, so I threw together a rake task that automates the process! This task allows us to drop individual SVG files into a folder, and automagically generates all of our font files in TTF, WOFF and EOT formats. It is even smart enough to generate a SCSS file with all of the mappings. Robots!
At Redbubble, we are dependent on artists uploading new designs and illustrations. Naturally, we’d like to make this as easy as possible. Previously, the process to do this was to download a template, position their work offline, upload, save, check the final product and repeat. For designs that need to be in a particular position this could be an extremely painful process! In order to lower the hurdle for new users and decrease the frustration level for our long-time artists, we introduced a new uploader which takes away the need for templates and allows for preview and positioning of the design on the product before upload.
The success of Ruby has always been dependent on high quality open source libraries. The best known example is of course Rails. The codebase at Redbubble is mainly a monolithic Rails application with very few independent modules. While looking at possible architectures to move forward (which is outside the scope of this article) we also decided to start open-sourcing some of the code, small and large, that make our site run. We’re happy to present our first couple of open-sourced gems, KeyVault and ConditionalCapistrano.
Redbubble has been around for a while now and we haven’t made any efforts to give our visitors on phones and tablets an awesome experience – a better experience than looking at a full sized page zoomed out! So to that end, we recently spent a decent amount of time to make Redbubble more mobile friendly. Responsive or Native? When developing a mobile site, there are basically three options available: Build a native app. Create a separate mobile site. Convert the existing site over to a responsive design. Since we didn’t have the expertise to build a native app and a separate mobile site would only mean we had to support two codebases, we decided pretty early on that the responsive way is the