Last Thursday (12/17/15) I posted PH today on Product Hunt. The response has been pretty awesome 😻.
“We made the buttons on the screen look so good you’ll want to lick them.” — Steve Jobs
Where’d it come from?
I’ve had an idea for a combined PH page for a while… since this summer when Games launched. Then Books. Then Podcasts. I had an idea in my head… but I was distracted and put off the build. Then a couple weekends ago I started coding.
I had 3 objectives:
- Speed — it should load fast, for a quick status update on PH.
- Live— I want to see what’s happening, as it happens.
- Customizable — I want the layout to fit my tastes.
When I build something, I intend on learning something new
I decided to really dig in on the first objective. I wanted to make sure PH today was crazy fast. I learned about redis, server side rendering and caching. I bundled and minified files like I’d never done before. I learned a lot:
- With some well timed scrapers and SignalR/websocket pushes to the client, I was able to accomplish the objective of live. No more refreshing!
- Using redis and some clever javascript, the page can update in real time, and the data is always fresh. Also it’s FAST.
- Awesome javascript libraries let the user set the page the way they want it, and keep it all looking pretty.
I want to drive more people to Product Hunt
As a fan and an active community member, one of my goals was to get more people involved on the site. I hope PH today can work towards this… While some may see it as a “replacement” I do not. The stated goal is to help people discover new things, and I think a dashboard-like quick interface is well suited to meet this. While my site might be an alternative to the index page where the products are listed, the comments, the voting and the media live on individual product pages at PH. I hope to direct people to things they otherwise might not have seen.
How’s it work?
There are 3 key components: the web job looking at the PH API, the redis data store holding all the info, & the frontend displaying the data.
The web job
A webjob on azure is a great scalable way to do background processing for a web app. This is a fantastic read if you want to learn more about these specifically. For PH today, there is a web job continuously running to monitor the PH API and detect changes. In order to conform to rate limits, it heavily utilizes e-tags and throttles itself based on how quickly the data is changing. It also stores data in Redis. I am using a RedisLabs free plan , meaning I don’t have a ton of resources to work with. The web job takes care of making sure storing the newly fetched data is worth storing. This is about efficiency and improving speed as well.
Redis
Redis is a datastore that runs in-memory; it’s SUPER FAST⚡️. The tradeoff is the limited amount of data that can be stored, since it has to fit in your memory size. This project was my first experience working with redis… And I have to say I’m quite impressed. It wasn’t too complicated and it worked quite well with little configuration (some pooling config led to frustration, but that was my fault). Redis holds a current snapshot of each category for today (for initial data fetching of the page) in addition to a list for each post of the day. These lists hold the change data used for generating the graphs.
The Frontend
Built on top of ASP.net Webforms (I know, I’m old-fashioned) - I used the packery framework + bootstrap. The initial page is built serverside after fetching the current state from redis. The frontend listens for SignalR pushes from the webjob to indicate changes. Packery allows the different sized tables to be lined up nicely. Draggability powers the drag-and-drop and has great integration with packery. The graphs are built with chart.js. Date/time functions are handled by moment.js. It’s the best thing ever and I use very heavily in all my projects.
Where’s it going?
In version 2 I plan on adding a few key features like sorting, a “since you’ve been away” change list and some visual enhancements. I really wanted to get sorting into V1, and while it’s not hard to implement, it’s not easy to implement well. I’m still thinking exactly how to present the options, but you will eventually be able to sort by factors like featured time, votes and the PH rank (the current). Another awesome thing suggested within the comments includes an idea of “what’s happened since I was gone” — definitely interesting, and most likely going to happen sometime soon.
I also have had numerous people present this as a chrome extension. I think that’s a great idea! A tad outside my wheelhouse at the moment, but see above, I like to learn 🤓. It could be cool to get alerts when new products are posted or when things are changing quickly — maybe there’s an awesome discussion you want to get in on?
Overall I think there is some potential here… and if people continue to provide feedback and keep using the site, I’ll keep expanding it!
Tweet @ me @jsneedles — or visit my site to get in touch 😀
💚s are always appreciated 🎉
