A quick Glitch bio break!

#glitch #webdev #vite #pwa

Today, I had time to do some coding 🧑🏼‍💻 😀

I started my Saturday early, with a 6am presentation (my time) to one of our Twitter Developer Communities, in India. It was a fun run through of what’s available in the brand new version of the Twitter API, with a live demo using our Postman Collection 💻 I also took some really great questions from the folks in the live stream, so I appreciated the opportunity.

After that (and, several cups of ☕), I thought I’d have a play with something that caught my eye a couple of weeks ago - the new Glitch in Bio starter template from the great folks over at Glitch. I'd seen the news about it, and the follow-up post about the generated sites being Progressive Web Apps (PWAs), and I had been keen to have a play for a few days... but Real Life™ kept getting in the way! In the meantime, I also read Anil's commentary around the origin of the whole "link in bio" thing, and recognised what a nice way this is to break the cycle of losing control of the Web.

If you haven't used Glitch before - errr... you totally should, because: it's Really Awesome!

Sign-in with GitHub (if you like - I do, because that's mostly where I code), choose a starter template to Remix, and you're off to the races - you can edit your code right in the browser, and see updates live in the window as you make changes. Great for learning, trying new things, prototyping, building joyful web apps... I'm a fan! 🏆

The Glitch in Bio template builds a static site, so it will stay running (by contrast, unless you Boost them, other projects will go to sleep to save resource); and, you can even add a custom domain if you want, to make your page URL easier to remember and share.

Earlier in the week, I jotted down some things I thought I might want to include in my links page:

It was super easy to get started - if you want a links page quickly, all you need to do is to modify the settings.json file in the top-level of the template repository to get set up; that is just configuration, no code at all, really (here's the documentation to help you with that, if you need it). However, there's a lot more that you can choose to do - change the theme (or build your own), customise the layout, images, add embedded widgets, do fun things with CSS, etc. It's the web: HTML, JavaScript and CSS, with all the rich frameworks and APIs you can orchestrate together.

I fell down a very pleasant, ever-expanding, rabbit hole of playing around with things (my favourite kind of learning project), and I kept a development diary inside my project remix as I went along. Another thing is that I'd not used the Vite framework before, so I got to look into that a little bit as well. I can see Vite is likely to be something I'll come back to in the future, particularly because I'm reading that it is pretty easy to stand up a REST API on top of it.

What I did

Here are some notes on the changes I made from the defaults - feel free to take a look. I've also put the code on GitHub, if you prefer to look there. I'd love to know what ideas you come up with!

I created a custom theme for my page, dusky-lory.css 🎨
- Fun note here: last week, I learned about a little app called Bird Folder, which happened because one of the featured Glitch in Bio examples is from Alex Tomlinson, and I checked out his (BEAUTIFUL) portfolio via his links page, which led me to his app... and, I named my theme from a bird's name, generated by Bird Folder 🐤 it's all connected, see? plus, I work at Twitter, so I'm aaaalll about the bird names...!
- I used Coolors to make a palette for the theme. It was very easy; I'd never used it before, and I might well use it again in the future. I'm aware that I've not checked the colour scheme I made up for contrast and accessibility, though -> #accessibility #WCAG
I am using Gravatar to embed my profile images. This is convenient, as it also lets me get resized versions for different contexts, using the ?s= URL parameter.
- a future thought is that if the user adds an email address to settings, and has a Gravatar, this could easily be defaulted - the URL is just an MD5 hash of an email address. I chose not to put a plaintext email address into the project, so this is more of a potential adjustment than something I plan to use.
I fixed the head.html file to include correct og: (OpenGraph) and twitter: (Twitter Cards) <meta> tags, so that when a link to my page is shared on a social site, a nice preview is shown.
- I found that the Twitter Card Validator failed on the default template that I remixed, with a message about a missing twitter:title value.
- ... weirdly, it's not showing in the embedded Tweet below... hmph! 😖
I added a short bio sentence to settings.json, with corresponding HTML markup in index.html.
I added Stack Overflow and Ko-fi icons to the social.html template, and corresponding values in settings.json to create links to my own pages.
- I used SVGs from Iconify
I'm all about the Tweets 😜 and I borrowed some ideas from Sue Smith's Glitch Tweet links project.
- in my remix, I've updated Sue's template to provide an option to embed Twitter timelines as well as (or, instead of) individual Tweets, and customised the parameters for the Twitter widget embeds to limit the number of Tweets shown, and to better match my theme.
I decided that I wanted a different image for the favicon / PWA home screen icon than the default showing in the header on the page itself. I added avatarImageAlt to the settings so that I could have two versions of my profile image.
- and, then I added a CSS opacity hover animation to fade between them on mouseover on the page itself (in avatar.html and style.css, so this can be done independently of theme CSS changes)... see what I mean about a 🐇 hole...

One observation I had while working on this is that the integration between Glitch and GitHub could (should!) be a lot better - I ended up doing all of the commit-and-push work from the web terminal on Glitch. It would also be nice if Glitch defaulted to a git branch of main for new projects, given this is becoming more common. Something to look into more in the future.

What's next

The nice thing about this: as far as I was concerned, it was a self-contained little hack for a Saturday. I've got a number of other side ideas (noted in the development diary inside the project, including adding Twemoji to the mix), but I was trying to keep a couple of principles in my mind:

To make changes that are transferrable / can be refactored into plugins / templates / themes, so that other people can use them, or contribute back other ideas.
To keep the overall page itself, what it is "intended" to be - a jumping off page or portfolio, a way to find out things related to what I do and what I'm interested in and what I've created. I don't want to make an infinitely-scrolling list of random links.

Keep It Simply Smooth... K.I.S.S.

So: that was my coding adventure and exploration today. Check out my Glitch in Bio 🔗 page, and let me know what you build - feel free to share a link below in the comments if you make one yourself. Also, make sure you let the folks at Glitch know about what you come up with, so the whole community can benefit 👏🏻

If you enjoyed reading this or found it useful, I’m always open to another ☕️ via a tip on Ko-fi.

Top comments (3)

Sue Smith • Nov 29 '21

Thanks again for this @andypiper ! Working on incorporating this into our initial update on the main app..

Also this isn't exactly an integration because the twemoji links are just hard coded but I do have this remix that sprays emoji all over the place lol: glitch.com/~emoji-links