Document: WM-030 P. Webb Category: Project 2018.02.24 Socii Dispatch 03 Abstract Ship often! Body 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. 1. 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!][IMG1] 2. Performance Three notable changes fall under this section. First, I got rid of the WebP decoder[1] (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][IMG2] Second, I implemented pagination. Prior to this, the hub (homepage of the actual network[2], not the marketing site[3]) 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 to[4])" 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. 3. Timelines You can now toggle between the global timeline and your top 8 timeline (well, if you've *added* anyone to that list). 4. 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][IMG3] Things I've learned 1. 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. 2. Image uploading ~~in a performant way[5]~~ 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! 🕸 References [1] [2] [3] [4] [5] [IMG1] [IMG2] [IMG3]