Socii Dispatch 03

I have been cranking out features and improvements over the past month. As I gear up for a major feature release, I'd like to quickly run through what's in production now and what I've learned since my last dispatch.

Top 8

From the ashes of Myspace comes a feature I've missed dearly in every social network since. Why is this important to me? Well, sometimes I forget my friends' usernames. I never forget a face. With Socii you can change your username whenever you want so for people you really want to keep in contact with (outside of real-life phone numbers and such), adding them to your top 8 is the way to go.

📸🎶 I'm bringing Myspace back, yeah!

Performance

Three notable changes fall under this section.

First, I got rid of the WebP decoder1 (and fixed an issue that arose on account of me doing too much in one commit). It was a bit slow in development which should have made me realize it'd be MUCH too slow for production (even the WebAssembly-based/-compiled decoder I found wasn't good enough). Blink-based browsers (Chrome, Opera, Vivaldi, &c) were unaffected but Firefox and Safari suffered greatly. Personally, I use Firefox as my main browser so I felt this pain and hated it.

📸Bye bye WebP…for now

Second, I implemented pagination. Prior to this, the hub (homepage of the actual network2, not the marketing site3) was loading every. Single. Post. It was a friggin' mess tbh. Now, I'd like to have done this in my GraphQL service but I don't understand enough about it to implement cursor-based paging so the solution I came up with is kinda hacky. It works for now but I'm on the lookout for tutorials or code samples that implement proper GraphQL pagination with graphql.js (even the official "how to4)" site is devoid of this information).

Finally, I created a custom script bundler to minify and combine front-end JavaScript so there would be far less render-blocking scripts to deal with. All the bundling frameworks like Rollup, Webpack, &c, do too much while also not being flexible enough to do what I wanted to do.

I'm still working on improving performance. No one wants to visit a sluggish site, it's a waste of your time.

Timelines

You can now toggle between the global timeline and your top 8 timeline (well, if you've added anyone to that list).

Responsiveness

As a front-end designer, it hurt me to publish something that didn't work well at smaller browser widths/breakpoints. I was finally able to get a lot of the stylistic things that were bothering me taken care of. Looking at these screenshots though, I gotta rethink the post footer. It looks too fat, I think both bits of info can fit on the same line.

📸Ooh, dat sweet responsive network

Things I've learned

Ship small features often. Not only do you get a sense of progression, but you can find issues quickly should you accidentally push errors into production.

Image uploading i̶n̶ ̶a̶ ̶p̶e̶r̶f̶o̶r̶m̶a̶n̶t̶[̶5̶]̶ ̶w̶a̶y̶ that performs well with WebSockets is harder than I thought. I think I have something figured out but I have some non-Socii work to catch up on before I test my theory.

That's all for now, see ya! 🕸