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.
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.