Background
I have been wondering how to simplify the concept of handshakes - not the human handshakes; I’m talking about the computer ones, like the ones that happen between a server and a client when establishing a connection over HTTPS.
So I went reading online to see if the content was digestible for everyone - including beginners. I couldn’t find a simple diagrammatic representation, so I thought maybe this is my chance to draw them and help others understand it at a glance. To be fair, it isn’t that straightforward to jump into discussing TLS handshakes, without learning about a few key terms. So I am certain that I will update this post with more information later on
And this is what I thought would be helpful. Maybe not, you tell me.
What was that?
I originally intended to deep dive into HTTP and HTTPS and the differences as part of the system design course that I have been developing. This was just part of that effort. You can download the images and make them larger if you want. Totally up to you.
Side adventures
For drawing these I used Excalidraw. However, they only allow you to export drawings into SVG. I naively tried converting the SVG files to PNG using rsvg-convert. However, the fonts were not embedded in the converted PNG format, making the images look awkward as the text was misaligned and all over the place.
I’ll probably share a bit about my adventures with SVG, what I learned about them and how to embed custom fonts in SVGs when you convert them to other formats in another post.
Also, I was looking for a way to display a slide-show on this Hugo.io based blog and came across hugo-slider-shortcode. Although the repository is in a public archive state, it was really helpful to have something ready to use.