1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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>
|
