Or how to have your own bio links app running on custom backend (ahem GoogleSheet) for free.
Ingredients
- a code pen by Tom Woodward
- Google Form - taking responses
- Google Sheet - separate for keeping the responses N.B. I could’ve done without a GoogleForm perse, but I like the idea of having a place where even users could add data - even if moderation could be an issue, yet this project is not public input dependent.
- sheety.co - to get json version of the sheet with the responses
- netlify.com - for hosting
Process
Have toyed with the idea. First I wanted to find an easy to hack example. Found a great pen with my favorite vue.js. Then I made the mistake of being unagnostic towards boostrap as a CSS. Trying to push bulma CSS. Only to realize a couple of days later that it doesn’t matter. So I went back to the pen. Then I got stuck with the codepen hacking workflow. So exported the whole code in zip. Spun up my local dev server (jekyll serve –watch). The last obstacle was that I couldn’t figure out how to
Roadmap into a shiny future
- [DONE] add this post to links
- [DONE] host it on https://biolinks.dezsopapp.com - for some strange(?) reason I couldn’t make it work the easy way - i.e. setting up through my trusted dns hosting provider. Did a work around totally redesigning it. So it is now availabe at https://www.dezsopapp.com/biolinks. it was super easy with anymod :)
- [DONE] remove override ugly border from bootstrap standards. Based it on something completely different at the end.
- [DONE] add footer In the new version it got the original headers and footers
- [DONE] nicen header
- [DONE] reverse the order of the cards - i.e. latest input first card.
- [DONE] try this backend thing one more elaborate usecases - see commenting for static?
Result(s) & learning
- the page works just fine on https://www.dezsopapp.com/biolinks
- when hacking on a quick low-no-code project stop being fussy about details like “Phew, not a Bootstrap theme again!”
- low/no-code may be a thing if it may need more iteration or hacking to work
- it’s whole lotta fun to ship.
Take-away
Yes, you’re right this is more like a low-code as I had to touch things in the HTML. No, you probably shall not do this if you need a low-fi, no-code biolinks page. My best bet would rather be extensions based (see P.S. further down). But this excercise helped me realized how easily you can stitch things together. (Save the DNS point thingy. Still not tackled after a month, even though I haven’t even looked.)
P.S. Another idea for solving a biolinks with absolutely no-code
I realized this is after all more of a low-code solution but way after pushing the publish button – git based deployment of my jekyll blog to netlfy :) So, I’m still here mopping up, as a regular newby should.
Here are the ingredients for a bonafide no-code biolink:
- Link shortener – of your choice, and yes nobody was fired for using bit.ly. Yet you may want to go for a little extra and use snip.ly that give you the possibility to add a pop up to the link and eventually a CTA towards something even juicier. At the time of writing in a free tier upto 1000 clicks.
- OneTab extension – Firefox add on or Chrome extension
How?
- add the extension/add on to your chosen browser
- open all the links you want to push one after the other
- left-click on the tab (most probably the first to the left from the ones you opened, as per standard browser behaviour) then right-click on the OneTab extension button in the browserbar
- select the ‘Send tabs on the right to Onetab’ option
- left-click on (to activate) the OneTab tab (where you’ll find the once open tabs neatly tucked away)
- left-click on the ‘Share as web page’ option (see below)
- you’ll be brought to a unique webpage starting with https://www.one-tab.com/page/[AReallyLongstringWithNoMeaning]
- you copy the link
- drop it into your link shortener
- Boom, you’ve a shiny and - even short if you can find a unique name on bit.ly to share on your insta, twitter profile or send it to your old flame when asked: “…and what are you doing these days?”