Dynamic Social Media Share Images

To improve the experience when sharing an AtomicQuote URL on Twitter or Facebook, I needed to dynamically generate share images that include the quote and author with multiple background images. To do this, I could have generated millions of photos. Based on the number of quotes that AtomicQuote currently has, this would result in 17,673,360 images. Each image is around 60kb. So to store all the images, it would take over 10 TB of storage. To avoid paying for this storage, I planned to generate them on the fly and cache the result for a few days. So far, this has worked well and has improved the sharing of quotes on social media. See the example below: Read More

Headless Chrome on Heroku

I’ve been experimenting with headless chrome for a Link Unshortener tool I’ve built to take screenshots of websites. I’ve been using BrowserShot which is great. It’s a php wrapper around Puppeteer which makes it simple to use in Laravel. To experiment more with Puppeteer, I wanted to get a node app running on Heroku. Overall it’s pretty straight forward but there are a few gotchas.

Here is a sample project that should get you started. Clone this and take a look at the source. You’ll notice I specified the node.js version in the package.json file. This is required for Heroku to know what version of node to use. Another issue I ran into is to run Puppeteer on Heroku you have to specify –no-sandbox. They last hurdle was adding the puppeteer Heroku buildpack. Follow the steps below and you should have a working screenshot app running locally and on Heroku. These instructions assume you are familiar with node and Heroku. Read More