diff options
Diffstat (limited to 'memos/WM-030.txt')
| -rw-r--r-- | memos/WM-030.txt | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/memos/WM-030.txt b/memos/WM-030.txt new file mode 100644 index 0000000..8c5c5cf --- /dev/null +++ b/memos/WM-030.txt @@ -0,0 +1,107 @@ + + + + + + + +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] <https://hub.socii.network/NetOpWibby/status/jdnns5gm000zhxbk97iymsgc> + [2] <https://hub.socii.network> + [3] <https://socii.network> + [4] <https://www.howtographql.com> + [5] <http://boulter.com/blog/2004/08/19/performant-is-not-a-word> + [IMG1] <https://🔥.pixels.wtf/blog/image/2018/socii-dispatch-03-a.jpg> + [IMG2] <https://🔥.pixels.wtf/blog/image/2018/socii-dispatch-03-b.jpg> + [IMG3] <https://🔥.pixels.wtf/blog/image/2018/socii-dispatch-03-c.jpg> |