Skip my practice writing and jump to the features!
I only learned about dev.to last Tuesday after a coworker shared a draft article with the team. After work, I read the FAQ and the About Page. It checked every box I've wanted for a dev blogging platform:
- [x] We own our posts
- [x] Dev.to respects our privacy[1]
- [x] Social-centric: comments, feeds, reactions, community
- [x] I can embed from my favorite code-sharing platform, CodePen
- [x] It's Open Source and encouraging new contributors
- [x] Tons of other features
[1] if you sign up with your github account, it only asks to read your email address. THANK YOU.
So the first thing I did was play around with the codepen liquid tag and tried adding CodePen's custom theme-id option. It's a feature for pro users to change the appearance of the embed so I can stay on brand with my purple-heavy twitter feed:
A little extra, I know, but I have fun so don't hate 😛
...theme-id didn't work
First I asked around to see if I was missing something, I know it wasn't documented but it seemed like something that should work since the default-tab parameter works. Then I remembered the about page linked to the dev.to github org because, I thought, surely it would be easy to add? I searched for "codepen" to find the code and related issues. Here's what I found:
- CodePen Liquid Tag Tests
- CodePen Liquid Tag Implementation
- A closed/unfulfilled issue asking for control of the height param
- A 1 year old open issue asking for a way to embed in preview mode
Great! There's interest near by, but not for the thing I wanted specifically... So if I take care of both of those requests and loop mine in too, there's maybe a better chance of getting approved quickly.
Just one small problem though... As far as I remember,
I've never even opened a ruby file before
...and this is all written in Ruby. Fortunately, I did recently meet someone who seems to love Ruby though, Adrian while discussing sugary JS syntax idea I had
Seemed like he would be willing to give me pointers if I ran into trouble (I'm sure he would have, didn't need to ask though!), so I wasn't worried about stumbling my way through this.
Setup might be some effort, my Thursday night looks open, wait until then.
Time to code
My process went like this
- Follow the links into the contributor's guide
Get everything installed and running- Spend 3 hours not understanding postgress errors
Just get all the tests running- Hack enough of the code and env to get just
spec/liquid_tagstests running and ignore everything else
- Throw around some copy-pasted code in the test file until new tests were successfully failing
- this is pretty easy to do even in completely foreign syntax; Either it works, or it doesn't and you try again.
- Modify the implementation code until the tests were passing
- not too difficult because Ruby Regular Expressions seem to be a superset of the features I know well enough to hack together quickly, and every existing line of Ruby here is an example to learn from
- For the sake of completion, add the last CodePen pro embed feature (editable=true) that wasn't previously mentioned
- Find and update the on-site docs for the codepen liquid tag
- it's in two places, just had to do it once and copy paste
- Almost 2am Friday, time to open a PR only for the parts I was supposed to change
Ran into a problem with CI, (I probably had windows line endings in my push (oops!)). The core contributors were helpful here though and put effort in to get it working!
Thank you for helping me, help you, help us all
And finally, just a couple hours ago, we got confirmation of intent-to-merge for Tomorrow at 2pm Central, just one full week after I learned about dev.to 🎉
Comment for
#16102
Now for the main course
All the codepen embed options
Basic embed
{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
Private embed (CodePen PRO feature)
{% https://codepen.io/quezo/pen/e10ca45c611b9cf3c98a1011dedc1471 %}
Preview embed (NEW!)
Replace /pen/ with /pen/preview/ or with /embed/preview/, which becomes /embed/preview/ in the generated iframe either way
{% codepen https://codepen.io/propjockey/pen/preview/YzWPEKN %}
This is CodePen's "Click-to-Load" feature that shows a static preview without loading or running the heavier resources in larger pens. The user clicks once and the pen loads:
default-tab parameter
Show just the result tab:
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=result %}
Show the html and css tabs:
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=html,css %}
Show the js and result tab:
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}
height parameter (NEW!)
Set the height on the iframe and pass in the parameter to codepen
{% codepen https://codepen.io/propjockey/pen/dyVMgBg height=300 %}
default value is 600
(Many of the liquid tag embeds could use this height parameter upgrade! Consider becoming a contributor by copying (and/or improving) the code for your favorite one!)
editable=true (NEW!) (CodePen PRO feature)
Allows the code to be edited from the embed
{% codepen https://codepen.io/propjockey/pen/dyVMgBg editable=true %}
theme-id (NEW!) (CodePen PRO feature)
Read about this feature on CodePen
{% codepen https://codepen.io/propjockey/pen/NWazORr theme-id=40148 %}
Using multiple options together
{% codepen https://codepen.io/propjockey/pen/preview/YzWPEKN default-tab=css,result theme-id=40148 height=700 %}
The end!
Thank you for reading, hope you find the upgrades useful!
💜 // Jane
Top comments (4)
Thanks for adding this, Jane!
amazing work. I am obsessed with your theme.
Thank you! Due credit: I only spent a few hours porting it to codemirror (the syntax highlighter codepen uses) from this VSCode plugin that's a combination of different people's work: marketplace.visualstudio.com/items...
lots of chefs in this kitchen, I love it too though!
Great job! I love the cyberpunk theme. I need that for vs code!!