Title: Www_ssz_dev_for_SimpleSerialize
Category: Protocol_Calls___happenings

Author: ScottyPoi
Date: 2021-05-25T20:10:36.658Z

Introducing

www.ssz.dev

An educational website and in-browser playground devoted to SimpleSerialize.

About ME
My name is Scotty.   I’m an itty-bitty newbie beginner programmer with dreams of being super useful to this wonderful community.   I have been learning to code for about a year, and took on this project as a way to dive deep into Ethereum, while also learning how to build web apps and websites.

About the project

Phase 1…  or 0?  The first Phase…
I began my coding journey with Python, and focused mostly on core computer science and data science concepts.  While interested in how the internet works, a career in “making websites” was not terribly motivating for me, and I mostly ignored web-design subjects.
So, naturally, the first thing I did was commit to making a website for something…
Which meant I had to rewind…learn JavaScript i suppose?..figure out the rest as I go.
Therefore the first month of the project involved a lot of non-SSZ related learning.  JS came easily, which lead me to React, and ultimately NextJS as a framework to build the SSZ project.  I know I probably could have used a pre-compiled blog website template somewhere and focused entirely on the SSZ material, but as much as possible I want to build things myself, even if it takes longer or requires me to go on wild tangents to figure out what I am doing.

Here we are
I have been working on the site for a couple months, and recently deployed the first phase of it to www.ssz.dev.
Currently what you’ll find there is an overview and description of what SSZ is and how it works, as well as a few examples of successful implementations in popular programming languages.   This is, generally speaking, my amateur interpretation of technical material, created by geniuses, whose existence I learned of only a few months ago.  I don’t say that to be humble or self-deprecating or to excuse errors in the overview, but rather to present the material as is, with the full recognition that I surely got things wrong that should be corrected before somebody tries to learn something from me.

The next phase
Now I am working on creating an interactive and visual demonstration of SimpleSerialize.
What this means for me is building a working implementation of SSZ with Javascript and React, and finding clever ways to visualize what is happening at each step of the process.
What this really means for me is getting way better at building clever React components.  Actually understanding the nuances of SSZ well enough to make my own working version.  And learning the art of visualizing algorithms, which, I discovered, is a deep rabbit hole of its own.

“Making my own”
Early on I received advice to “embrace the chaos” regarding the many false starts and abandoned ideas that get discarded on the way.  This was very relevant early on as I struggled to understand which web-design tools were actually useful, and what to build myself.
In the journey of building a simple but working model of SSZ, I have embraced a similar process.  I saw three different ways to approach it, and made several attempts at each one.
As I tried to simply built it myself from scratch, I discovered places where I didn’t really understand how to even approach it.
Knowing that there were working implementations out there, I made attempts to built a web app around an already built SSZ package.  This presented its own challenges of trying to understand how to use something that someone else built for a different purpose.
The last approach, and the one that I have made the most progress with, lies somewhere in between.  I have been reverse engineering a Typescript SSZ implementation, and rebuilding it out of Javascript React components.   All together, it should allow users to scroll through examples or randomized data, and interact with it in such a way that visually demonstrates the serialization, merkleization, deserialization, and proof functions.

Contribute, Critique, Collaborate!
One of the most difficult challenges that I face here is working through my usual shyness to make a post like this.  Collaboration and communication are also skills that I am building from scratch.  Please reach out with any thoughts or feedback.

Author: ScottyPoi
Date: 2021-06-21T21:14:27.852Z

Update for June 2021
https://medium.com/@iaskeddiego/ssz-visualizer-online-83007de68ca2