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.

      

   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.

      

      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.

      

   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! 🕸