The Story of Shelf  ## Metadata - Author: [[hicks.design]] - Full Title: The Story of Shelf - Category: #articles - Document Note: --- tags: [#design, #appdevelopment, #indiedev, #storytelling] - #design - #appdevelopment - #indiedev - #storytelling Author: Jon Hicks Source: Hicks.design Journal Reference: [The Story of Shelf](https://hicks.design/journal/the-story-of-shelf) date created: 2025-05-16 22:27 --- # Title: 📚 The Story of Shelf ## Table of Contents:  - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ### References: - Hicks, Jon. (2024). [The Story of Shelf](https://hicks.design/journal/the-story-of-shelf). Hicks.design Journal. ## 📝 Summary: Jon Hicks recounts the 12-year journey of developing “Shelf,” a shelf app concept for storing and managing clipboard snippets and visual content on macOS. The article covers the evolution of Shelf from initial sketches in 2012 through multiple failed iterations, design pivots, technical setbacks, and eventual release. Hicks highlights the personal, creative, and technical challenges involved in indie software development, candidly sharing lessons learned about perseverance, design choices, platform limitations, and shifting market landscapes. ## 📖 Main Content: Hicks describes how inspiration for Shelf came from a need to quickly save and retrieve “stuff” while working, like screenshots, files, or copied text—something more visual and flexible than a traditional clipboard manager. Despite early enthusiasm, the project faced roadblocks: initial prototypes lacked polish, development tools evolved, collaborators moved on, and competitors emerged. Shelf’s development paused for years, resurfaced during the COVID-19 lockdown, and changed direction several times. Hicks openly shares his struggle with perfectionism, frequent redesigns, and the temptation to over-complicate the app. After deciding to keep things simple and focus on his core use case, he finally launched Shelf as a lightweight, visually-driven shelf app for macOS. The story ends with reflections on indie dev life: the importance of learning from failure, finding personal satisfaction in the process, and how side projects fit into a busy life. ### 🗒️ Notes - *Origin & Inspiration* - Initial idea (2012): Save and organize digital “stuff” visually, beyond basic clipboard apps. - Frustration with existing tools sparked the concept. - *Development Challenges* - Multiple false starts and pivots; early prototypes abandoned due to design or technical friction. - Platform limitations (macOS APIs, Sandboxing) slowed progress. - Team members left, and momentum was lost. - *Resilience and Learning* - Project revisited during lockdown, providing focus and time. - Perfectionism and scope creep caused delays. - Recognizing when “good enough” is better than endless tweaking. - *Launch and Lessons* - Stripped-down features led to a viable, releasable product. - Honest reflection: not every idea will be a commercial hit, and that’s okay. - Indie development is often a passion project, offering personal growth regardless of outcome. ## 📖 References: - Hicks, Jon. (2024). [The Story of Shelf](https://hicks.design/journal/the-story-of-shelf) ## 🗣️ Paraphrase:  1. **Original:** “When I first started, I had a grand vision for Shelf. But after years of dead ends, I learned that the simpler version was the only way it was ever going to launch.” - **Paraphrase:** My initial ambition for Shelf was huge, but after many setbacks, I realized simplicity was essential if I ever wanted the project to see the light of day. 2. **Original:** “One of the hardest lessons was learning to accept the limitations of both myself and the platform, and to be satisfied with what could be achieved within those constraints.” - **Paraphrase:** Accepting my own and the platform’s limits—and being content with what’s possible—turned out to be one of the toughest, but most important, things I learned. ## 📰 Newsletter: 🚀 **Indie App Lessons from “The Story of Shelf”** Jon Hicks shares a candid, humorous, and deeply human account of a 12-year odyssey building “Shelf,” a shelf app for macOS designed to make saving, viewing, and retrieving your digital bits a breeze. From early sketches to hard-won lessons on simplicity and shipping, this piece is a must-read for anyone balancing side projects, creative ambition, and the real world. If you’ve ever abandoned a passion project or struggled to launch your own app, you’ll find comfort and inspiration here. Read the full story and explore how perseverance (and a bit of humility) shapes the indie dev journey: [The Story of Shelf](https://hicks.design/journal/the-story-of-shelf). ## ✅ Action Items: - Share this story with open source and indie app communities to spark discussion on realistic project scoping and the value of “shipping.” - Use as a learning tool in workshops or onboarding to illustrate common pitfalls in software/product design and personal project management. - Encourage contributors to reflect on the balance between ambition and pragmatism, especially in long-running or stalled projects. - For aspiring OSPO leaders, highlight the need for clarity of purpose, focus, and acceptance of limitations in project governance and scope. - Reference Hicks’ narrative in conversations about psychological safety, resilience, and maintaining passion in tech careers. ## 🧪 Hypotheses: - Simpler, more focused feature sets lead to higher rates of successful product launches in indie and open-source projects. - Developer perfectionism and frequent scope changes are major contributors to project delays or abandonment. - Personal fulfillment in side projects is strongly tied to process and learning, rather than commercial outcome. ### 📊 Methodology: - Conduct surveys or interviews with indie developers about abandoned vs. shipped projects, analyzing feature set size and project scope. - Longitudinal studies of open source and indie app repos to correlate launch rates with project simplicity. - Qualitative analysis of developer retrospectives to identify recurring psychological barriers. ### ❓ Questions: - What is the tipping point between refining and overengineering a product? - How do external events (like a pandemic) affect personal projects and productivity? - What strategies help developers accept “good enough” as “done”? - How do solo developers balance creative ambition with practical limitations? ### 🔮 Future Research: - Explore psychological and organizational factors that help (or hinder) individuals and teams in launching indie or OSS projects. - Research ways to foster psychological safety for solo developers and open-source contributors facing long project cycles. - Investigate tools or frameworks that encourage iterative shipping over perfectionism. ### 💡 Implications:  - Embracing simplicity and iteration could raise the success rates for indie and open source projects. - Psychological safety and resilience training may reduce developer burnout and project abandonment. - OSPOs, project maintainers, and mentors should stress the value of learning through action and failure. ### 🧠 Learning Styles Assessment: - **Readability:** About Grade 10-11; conversational, first-person narrative style. - **Visual Learners:** Article features embedded images/sketches, screenshots of Shelf prototypes; effective for visual reference. - **Aural Learners:** No audio/podcast. Could enhance with a short audio interview or “making of” voice note. - **Verbal Learners:** Engaging, storytelling-rich; analogies and reflective language throughout. - **Ph - Summary: 20+ years of our no-nonsense approach to Graphic Design, Branding, Illustration & Iconography. - URL: https://hicks.design/journal/the-story-of-shelf  Now that the [Shelf Theme](http://thethemefoundry.com/shelf/) is finally launched, I wanted to write up some of the process and challenges that The Theme Foundry and I faced in it’s creation. I’d started with the intention of [dribbling](http://dribbble.com/hicksdesign/tags/shelf) everything, but constantly found that I wanted to show more than 400x300px, so I started documenting the process in a [Flickr Set](http://www.flickr.com/photos/hicksdesign/sets/72157624988320937/) instead. This post will flesh those out further. ##### Creation I had a very clear picture in my head of how it should look, so my first step was to create what I call a ’HTML Sketch":  This is where I set up basic text and positioned boxes to make sure the layout was actually possible - a series of horizontally arranged ‘cards’ on a shelf, where the card height collapsed when the viewport was too small and the cards didn’t wrap. This was achievable with the cards floated left, within an absolutely positioned wrapper div with a fixed width. Without the fixed width it was impossible to prevent the cards wrapping across all browsers. Later on we changed this to use javascript to calculate what the width should be, but left a default width in for those without javascript enabled. When the viewport height is too small, the cards become scrollable using `overflow:auto`. From the basic sketch, I then started roughing out the shading:  Initially the sketch had all the cards the same height, but later I managed to get the height to change per card to make it more interesting and natural.  I normally design ‘in the browser’ but it was essential for a project like this. One caveat: you do have to know what you want to achieve first. It’s very easy to spend hours ‘tickling away’ at little bits without any idea of the bigger picture. You need focus, as I’ve discovered myself. I’d said at the start that I wanted this to be minimal, with no wood backgrounds. However, later in the development I tried the shelf in wood, and changing the light direction a bit, and found I preferred it:  The wood added much needed warmth, and helped draw the eye downwards to the bottom where the cards are aligned. I also used `nth-child` pseudo class to alter the postion of every other card slightly, just so they weren’t *too* uniform. ``` article:nth-child(even) { margin: -4px 10px 0 0; } ``` The cards themselves use a mixture of border-radius, multiple box-shadows and background images to create the overall effect. It means that IE gets a much plainer looking card of course, but not enough to spoil the overall look. I’m really pleased with the final outcome:     I now employ media queries to every project I do, and Shelf was no different. When the layout becomes too narrow, it switches to a series of vertical shelves, rather than one long horizontal one. This layout also serves as the mobile device view:  In order to provide more ways of navigating the Shelf than the scrollbar, I worked with [Yan Sarazin](http://statikpulse.com/) who implemented keyboard navigation, and all the other javascript that was required. I highly recommend Yan - he was a joy to work with! The main typeface used in Shelf is [Junction](http://www.theleagueofmoveabletype.com/fonts/1-junction), an open-source font from [The League of Moveable Type](http://www.theleagueofmoveabletype.com), designed by [Caroline Hadilaksono](http://www.weareagoodcompany.com/).  I’d been looking for something that made me think of Modern Art Galleries (or ‘Museums’ if you’re in the US) and Junction fitted the bill perfectly. It’s open-sourceness was a bonus, and meant I could @font-face as much as I thought appropriate. Not all fonts suit the low quality Windows type-rendering, but I felt Junction still worked well under those conditions. ##### Some of the challenges that we faced Normally on web projects I find that IE6 can be ignored (and served a [universal style sheet](http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css)), IE7 needs a few hacks to make it work, while IE8 and IE9 are fairly trouble free (lack of support for CSS3 aside). Shelf was much trickier however, with Firefox and Mobile Safari giving as many problems as IE7. I always add an IE stylesheet for each version to sort out any issues, applying `zoom:1` to elements that don’t ‘have layout’ in IE by default, such as `div`’s. In particular, IE7 had a problem with the heights of the cards. First, IE7 without any fixes applied:  Then with `zoom:1` applied to force ‘hasLayout’:  Applying Dean Edwards [IE7 script](http://code.google.com/p/ie7-js/) sorted that out fortunately. IE8 and 9 just needed a few nudges to position the cards correctly on the shelf. I also needed to go back and add fallbacks to rgba colours, by placing a normal hex colour on the line before. Those browsers that don’t support rgba colour will simply ignore it and use the first colour. I’d also used `opacity` a lot on images, such as the social network icons to avoid repeating images. However, while -ms filters could support this in IE, it supported it very badly. Transparency worked, but the icons lost all their anti-aliasing. In the end I felt that this was important for IE to see properly, so I reverted to a series of images instead. The next browser problem I ran into was in Firefox, as it doesn’t allow you to apply border-radius directly to images. In the original Shelf design, I had images inside the cards (which have slight rounded corners) which were clipped correctly in Opera and WebKit (even in IE9!), but Firefox (including v4 beta) would display a sharp corner every time. The effect wasn’t great:  A workaround for this was to apply the image as a background-image of a div, applying the border-radius to the div. There are even jquery scripts to automate this for you. However, they rely on having a fixed size for the image, and Shelf makes it’s cards fluid for the narrow layout. While it wasn’t an easy choice, I decided to just add some padding inside the cards, rather than have them right to the edge as I’d wanted. The other main issue to sort out was with Mobile Safari. While horizontal scrolling isn’t for everyone, on devices like the iPad it actually feels *more* natural than using desktop browser with keyboard and mouse. The gesture control suits it - particularly in the landscape mode. Here’s where the real problems started. First of all, Mobile Safari doesn’t support position:fixed, which was being used to keep the header and footer in the same place while the shelf scrolled. Aside from javascript, there is no way to support this at the moment, so I decided to just let these scroll with the shelf. That wasn’t so bad. The bad was that in order to scroll divs with `overflow:auto` you have to use two fingers. There is also no indication that the content scrolls either. I felt this was too much for users to find out. [This handy script from Chris Barr](http://chris-barr.com/files/touchScroll.htm) solves the 2-finger problem, and allows one finger scrolling, which is more natural, and increases the chance of discovering the scroll-to content by accident. We also needed a visual indication of ‘more content, scroll to see it’. As this was the eleventh hour on the Shelf theme, I came up with some CSS to add an indicator without extra markup. The script adds a class of ‘scrollable’ to divs where there is overflow, so I already had a head start. I then added a mask image to fade off the bottom of the div, added via the :after pseudo element. At the end of the div inside, I added the mask image again, but with a higher z-index. The result is that when you scroll to the end of the content, the scroll indicator is hidden to indicate the end of the overflow content. Here’s the code (shortened for brevity): ``` .scrollable:before { display: block; position: absolute; z-index: 101; bottom: 34px; left: -2px; right: 40px; height: 60px; background: url(../images/scroll.png), url(../images/scrollgrad.png); background-repeat: no-repeat, no-repeat; background-position: center 40px, left top; content: "."; color: transparent; } .scrollable .content:after { position: relative; z-index: 102; display: block; content: "."; color: transparent; height: 60px; margin: -30px 0 0 0; right: 0; left: -6px; bottom: -14px; background:url(../images/scrollgrad.png); } ``` And here is a video of the effect in action: It’s not perfect by any means, but I’m rather pleased with finding a solution to something that I thought wouldn’t be possible without throwing yet more javascript at it. So there we go, I hope you got something out of all that! It only remains for me to plug one more time: go and try the [Shelf Theme](http://thethemefoundry.com/shelf/) for yourself!, The Story of Shelf, hicks.design, 01jgmcw0x5w005bq9j5dx5dyv3.