I created this over the weekend as a way of solving an issue for my Grandmother. Her use case is that she’s 92, has poor eyesight, and loves checking her stocks. She used to do this over the phone several times per day, but after receiving an iPad she prefers to check them out in real-time online.

While the native iOS app that ships on iPhones would be the perfect candidate for simply checking stock prices, it doesn’t ship on iPads. We found one or two different Stock Portfolio apps that do provide the values and changes, but they weren’t great and also weren’t actively maintained by their developers. Other stock apps on the App Store tend to be distributed by financial companies and provide portfolio management tools (read: overkill).

For lack of a better option, I decided to create this web app as a proof-of-concept that I could pull market data in real-time and present it in a large-type display that looks great on iPad. Thanks to the code here, the app can be saved to the home screen and then appear as a standalone faux-app. The app can then be opened in a headless instance of Safari, which helps streamline the display and prevent clicking on buttons/options that are not related.

While this does require me to update and deploy changes to her portfolio manually, it also puts the power in my hands to adjust things to her liking from afar, as she lives in Asheville. I can then deploy my changes without needing to walk her through how to go to the App Store and download a new version. This project will continue to see improvements as I hope to add new features in the future.

• See it live here https://stocks.aaronarich.com/
• Source here https://github.com/aaronarich/stock-stickler
• Data provided for free by IEX Developer Platform

In the interest of sharing knowledge and process, I want to use this post to give insight into the tools I used to create this website. Enjoy!

Design

• Sketch - hands down one of the best and most streamlined user interface design tools. While I don’t coin myself as a product designer, I used Sketch’s layout and grid tools to mock-up ideas as they came to mind. I also used their Sketch Cloud feature to share some of my early concepts with friends and get feedback.

• Abstract - this is a version control tool used in conjunction with Sketch. They launched their product just as I was beginning to learn Sketch, and I found it helpful for syncing my projects across my laptop and desktop. The branching feature was also great for wanting to create one-off explorations.

• SkyFonts - when deciding on typography for my site, I found that it’s a bit of a pain to download font-families to my local computer, import them, and then test them out in Sketch. SkyFonts addresses that problem directly by connecting the MacOS Font Book to Google Fonts, and a few other cloud-hosted font services. No more downloading, just pick the fonts you want to try out and they’re synced.

Development

• Jekyll - I decided to go with Jekyll because I’m familiar with static site generators from my past work. Jekyll is pretty lightweight for building static pages, but it also has a blogging aspect to it (which I hope to utilize frequently). Jekyll not only has an intuitive setup process, but it also integrates directly with several cloud-based CMSs as well as hosting providers… more about that below.

• Tachyons CSS Framework - it’s so satisfying to design on a grid and have a nice rhythm between text and page elements. I’ve assembled my own grid layouts in the past, but for this site I wanted to use something more tested and robust. For that, I turned to Tachyons, developed in large part by Adam Morse. There’s also a SASS-specific fork of the project which I used in my Jekyll site. You can find that here on Github.

• Google Fonts, Roboto - I decided to go with one of my favorite sans-serif font family seen on the web today, Roboto. This font was designed by Christian Robertson and is served through Google Fonts.

• Atom - I switched from Sublime Text to Atom a couple of years ago. For the most part, the text-editing aspect is largely the same (in my opinion), but the advantages that I’ve found from using Atom are largely the features and availability of packages built by the community. A few of the packages I use the most are the built in Git client, Atom-Spotify, and Markdown preview pane.

Hosting & Deployment

• Surge - early on in the development process, I used Surge as a quick and easy staging server. It’s a free service hosted on Digital Ocean that provides quirky one-off URLs (like Heroku) or the ability to use custom domains for the sites you deply. I currently have my DNS pointing dev.aaronarich.com to Surge for staging projects. The deployment and teardown process is super simple and everything is handled from the CLI.

• GitHub Pages - for production, I decided to host this site on GitHub Pages. Since Jekyll was developed at GitHub, Pages can automatically build and deploy my site as I make commits directly to the repository. This is a great solution since static sites have to rebuild each time you make changes. Another great feature of Pages is that they host sites on Fastly’s CDN, which helps ensure faster page load times.

• Cloudflare - on top of my site being hosted on Fastly’s CDN, I’ve also implemented Cloudflare to sit in front of my site. Cloudflare provides numerous benefits including serving this site over HTTPS, serving it from their 117 global data centers, site cacheing to reduce origin server requests, and optimizing my site’s HTML/CSS/JS to reduce page load. Also, they provide these services as part of their free plan. Thanks to Nate Steiner for his blog post about setting this up 👍

• Siteleaf - as I mentioned above in the Jekyll section, there are a few cloud-based content management systems available for Jekyll. The one I’ve chosen to go with is Siteleaf. They provide a CMS in the cloud so that my site can be edited from anywhere, not just from my text editor. When you set up a site in Siteleaf, it connects to and syncs with a GitHub repository automatically. This allows me to make changes or write new posts there, and then have them sync as commits to GitHub. Once the commit syncs, GitHub Pages detects the change and automatically rebuilds the site and deploys it.

That pretty much covers it for Version 1.0 now that it’s up and running. My goal from here is to keep updating this site with new posts, projects, insights, and even the design itself. I might even add a signup form for getting updates as they roll out, who knows! If you have any questions about anything I mentioned here, feel free to tweet/message me @aaronarich. Thanks for taking the time to read this!

Project Role

Developer

Art Direction

Marco Suarez

Design

David Sizemore

Project Role

Developer

Art Direction

Ron Lewis

Design

Justin Pervorse

Project Role

Developer

Art Direction

Ron Lewis & David Sizemore

Design

Jason Travis

Project Role

Developer

Art Direction

David Sizemore

Design

Jane Song

Project Role

Developer

Art Direction

David Sizemore

Design

Jane Song & Jason Travis

MailChimp Automation

This landing page was built for our initial roll-out of our email automation features. The page had a few interactive elements to it, with this particular element being used to display some of the various automation recipes as you rolled over their description.

MailChimp Research

This page was built to showcase several stats, charts, articles, and research guides put out by our Customer Research team. Using PHP, I created a loop that pulled in recent articles with certain tags from our main WordPress blog.

Press Resources

This landing page was built to showcase some of the most recent and renowned press MailChimp had received. It also contains a running list of recent annual reports and all press releases since 2010.

Project Role

Developer

Art Direction

Ron Lewis & David Sizemore

Photography

Andrew Lee

Project Role

Developer

Design

Jane Song