DEV Community

loading...
Cover image for Day 2 of #100DaysOfCode: Playing With Stripe, Tailwind, and Vue
Feldroy

Day 2 of #100DaysOfCode: Playing With Stripe, Tailwind, and Vue

audreyfeldroy profile image Audrey Feldroy ・2 min read

I know I was supposed to start Day 2 with debugging that fs error from Day 1, but I was really dreading that. I'll pick that up sometime in the future when I'm ready.

I got started coding late in the day, and my brain was too tired to do much. I almost gave up. But because of the challenge, I felt like I should try to code something fun.

Imagine yourself as a kid

I decided to play with Stripe Elements, Tailwind CSS, and Vue.js today on Glitch. I remixed my vuejs-tailwind-starter project to create Subscribe to be Featured, a simple app where people or companies can subscribe to have their names listed on the page. It doesn't work yet, but you can see and play with the code here: https://glitch.com/edit/#!/subscribetobefeatured

My husband @danielfeldroy joined me, pair-programming with me through Glitch, which is like a shared Google Doc but for code editing. It was a nice little coding date while our daughter was asleep.

Thanks @danielfeldroy for your help, and for helping me get going when I felt too worn out to code. 💘

My tips of the day:

  • Nerdcave's Tailwind Cheat Sheet is awesome.
  • Derick Sozo's article Integrating Stripe Elements and Vue.js to Set Up a Custom Payment Form was helpful today.
  • I liked working with plain Tailwind + PostCSS in CodePen first to allow for fast visual iteration, then bringing over the element to my full JS app in Glitch once I got the styling right. Glitch ran a bit slow, even with the app boosted. It may be my fault for not having the most optimized package.json scripts, though.
  • Having played with both over the past week, Stripe subscriptions have a lot of features, flexibility, and come with gorgeous widgets, but Paddle subscriptions have decent widgets and are much easier to get started with. I do like both payment platforms.

Discussion

pic
Editor guide