DevTips (gatsby-theme, netlify lambdas, etc)

This is a cool thing I’m pretty proud of that puts together a number of different packages and implementations I had to write. The core flow is that I write small, tweetable snippets around different isolated code ideas using an .mdx file, push them to git and the workflow takes care of the rest. The .mdx file looks like this:

---
tweet:
  You can use React components without importing them in MDX
  using MDXProvider!
title: Shortcodes in MDX
---

```js
<MDXProvider
  components={{
    YouTube
  }}
>
  {app}
</MDXProvider>
```

```mdx
# My MDX file

Here is a livestream in which I work on Gatsby!

<YouTube video="https://www.youtube.com/watch?v=oHg5SJYRHA0" />

Let's talk about it!
```

On my personal site, I wrote gatsby-theme-devtips to power the dev tips sections of my site. I use a DevTip interface applied in the Gatsby schema customization APIs to create DevTip nodes. In the future I’ll probably try to source tips from other locations and the interface enables that. https://github.com/ChristopherBiscardi/gatsby-plugins/tree/master/packages/gatsby-theme-devtips

Here’s the page I currently have displaying the tips in collections.

The theme also handles the writing out of a json file (https://www.christopherbiscardi.com/devtips.json). The Mdx files get the code blocks parsed out of them and rendered using another project of mine, gatsby-plugin-printer. gatsby-plugin-printer allows me to write a single React component, create some nodes in Gatsby’s system, and dump out screenshots of the resulting divs. The JSON file thus consists of the tweet content from the frontmatter, and a list of the images rendered from the code blocks.

This is where the go lambda comes in (https://github.com/ChristopherBiscardi/christopherbiscardi.github.com/tree/db7bf92a762136cc03e8faf70d1013646195f6a2/go-src/dev-tip). It builds and deploys on netlify and is triggered by a zapier integration via Google calendar. The function fetches the .json file, chooses a random dev tip, fetches and uploads the images to twitter, then tweets the resulting tweet. As of very recently, it then writes the tweet id and some other content into FaunaDB for later analytics.

All of that results in a tweet shipped at around 11am every day. CLI content has been the least successful, while MDX has been the most successful. People seem to like them no matter how many times they repeat. I have about a month’s worth of dev tips though and growing (and in addition I’m going to add a “don’t tweet this tip if it’s been tweeted in the last 7 days”), so very soon it will be highly unlikely to get a repeat.

This covers a bunch of stuff from gatsby themes to netlify lambdas in go, to faunadb and zapier. Happy to answer any questions about it :slight_smile:

1 Like

How’s the experience with FaunaDB been? I keep seeing it pop up :smile:

The fauna experience has been good so far. I was able to get up and running through the netlify addon and inserting docs in under an hour. I wrote up my first experiences here: https://www.christopherbiscardi.com/post/a-first-look-at-faunadb/ and have the livestream recording where I dove in for the first time up on YouTube: https://youtu.be/80c3088hXWQ. I’m most interested in their temporal querying and nested databases/security for multi-tenant support. Particularly curious how easy it is to build on their platform for single tenant and then switch over to multi later. The lamba calculus query language is nice to work with once you get the hang of it, and there’s higher level query expressions coming soon (so I’m told).

I also have a faunadb playlist in the works for egghead. About 5 videos I want to record tonight on FQL and such.

1 Like

Hey, Chris!

This is pretty interesting. Quite similar to what I have been cooking off an on. It’s my dev tips series. I always try to post manually and that’s the part I am interested in automating sometime later this year. I’ll go through your setup and see if I can pick something up.

My setup involves a custom code theme that I wrote :unicorn: Shades of Purple which is used to build screenshots, and then I post it on a couple of sites. I need to be able to write one description that renders content for each of them. E.g. there’s no Char limit on Facebook like there is on Twitter. So, I make use of this to my advantage.

Hey Ahmad,

The devtips theme is on NPM under gatsby-theme-devtips if you want to try to use it, and includes all of the screenshotting, etc. I’d pin it to a specific version as I’m really the only person using it at the moment.

I’m planning on expanding my devtips to instagram and while different platforms allow different content lengths, the way I’m going to take advantage of that is to use different frontmatter fields (currently I have tweet and you could imagine instagram, facebook, etc depending on the platform.)

I’m using nightOwl, prism, and unsplash to generate my images: https://github.com/ChristopherBiscardi/christopherbiscardi.github.com/blob/9d58ac6ecd175da916e627bfd93d68a80e640cdf/www/src/printer-components/devtip-code-block.js

Thanks for sharing that. I call my dev tips #OneDevMinute it’s catchy and hundreds of devs have told me they like the name. :wink:

This is just a placeholder site, I haven’t shared it with the public yet https://onedevminute.ahmadawais.com/ but working on it to automate as much as I can. Instagram images are different and so does almost every other platform image size. I wish I had more time.

And yes, I am not going to use the actual theme, would definitely read the source code, I bet there are some jewels in there I could use.

:+1:

And yes, my :unicorn: Shades of Purple theme has like 10+ different variants for other software like one for Prism.js which I also use on my blog (last couple of posts only) and the same is used by Scotch.io. I’ll probably be using that screenshot generation script of yours. Thank you, sir! :ok_hand:

Nice, I’m automating under the name “party corgi dev tips” right now (because that’s what I called the twitter application) and using the hashtag #devtip since I’m building out infrastructure so that anyone can do it (considering shipping the go lambda with the gatsby theme even).

The only change I need to make to automate instagram is to have a new react component that renders into a square instead of arbitrarily sized divs. Between that and the frontmatter it should all “just work”.

Let me know if you have trouble with the screenshot script. :slight_smile:

1 Like