A quick Glitch bio break!
Tags: glitch, webdev, vite, pwa
Published: 2021-11-27 20:21:04

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](https://twitterdev.bevylabs.com/events/details/twitter-delhi-twitter-developer-community-presents-twitter-v2-api-whats-next/). It was a fun run through of [what’s available in the brand new version of the Twitter API](https://twittercommunity.com/t/ushering-in-a-new-era-for-the-twitter-developer-platform-with-the-twitter-api-v2/162087), with a live demo using [our Postman Collection](https://t.co/twitter-api-postman) 💻 I also took some really great questions from the folks in the live stream, so I appreciated the opportunity.

{% twitter 1464495181814771716 %}

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](https://blog.glitch.com/post/announcing-glitch-in-bio-the-easiest-way-to-share-your-links) 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](https://blog.glitch.com/post/glitch-in-bio-pwa) (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](https://anildash.com/2019/12/10/link-in-bio-is-how-they-tried-to-kill-the-web/), and recognised what a nice way this is to break the cycle of losing control of the Web.

If you haven't used [Glitch](https://glitch.com) 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](https://glitch.com/create-project) 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](https://glitch.com/glitch-in-bio) template builds a static site, so it will stay running (by contrast, unless you [Boost](https://help.glitch.com/kb/article/73-glitch-pro-what-s-that/) 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:

![Sketchnotes](https://cdn.glitch.me/844643de-894b-49ce-8757-32fad8afa3c9%2Fideas-sketch.jpeg?v=1638029223822)

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](https://help.glitch.com/kb/article/144-how-do-i-add-my-links-to-glitch-in-bio/) 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](https://glitch.com/embed/#!/andypiper?path=NOTES.md%3A1%3A0) inside my project remix as I went along. Another thing is that I'd not used the [Vite framework](https://vitejs.dev) 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](https://dev.to/xjamundx/adding-a-rest-api-to-your-vite-server-in-5-seconds-270g) 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](https://andypiper.glitch.me). I've also [put the code on GitHub](https://github.com/andypiper/my-glitch-in-bio), if you prefer to look there. I'd love to know what ideas you come up with!

1. 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](https://birdfolder.app/), which happened because one of the [featured Glitch in Bio examples](https://glitch.com/@glitch/featured-glitch-in-bio-remixes) is from [Alex Tomlinson](https://twitter.com/hootalex), and I checked out his (**_BEAUTIFUL_**) [portfolio](https://alex.gd/) via his [links page](https://alexlinks.glitch.me), 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](https://coolors.co) 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

2. I am using [Gravatar](https://gravatar.com) 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.

3. 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](https://cards-dev.twitter.com/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! 😖

4. I added a short bio sentence to `settings.json`, with corresponding HTML markup in `index.html`.

5. I added [Stack Overflow](https://stackoverflow.com) and [Ko-fi](https://ko-fi.com) icons to the `social.html` template, and corresponding values in `settings.json` to create links to my own pages.
  * I used SVGs from [Iconify](https://iconify.design/)

6. I'm all about the Tweets 😜 and I borrowed some ideas from [Sue Smith](https://twitter.com/BrainDeadAir)'s Glitch [Tweet links](https://tweet-links.glitch.me) 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](https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference) to limit the number of Tweets shown, and to better match my theme.

7. 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. 

{% twitter 1464559913238106112 %}

## 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](https://twemoji.twitter.com/) to the mix), but I was trying to keep a couple of principles in my mind:

1. 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.

2. 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. 

{% glitch andypiper %}

So: that was my coding adventure and exploration today. Check out [my Glitch in Bio 🔗 page](https://andypiper.glitch.me), 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](https://support.glitch.com/t/announcing-glitch-in-bio-the-easiest-way-to-share-your-links/48274) 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.](https://ko-fi.com/andypiper)