6 ms·

Wow the diagrams are really well done here. Really well-made and presented.

imagine99 6y ago
Yes, they look really great and responsive, too. I'd actually like to know how they were done... Are they just basically coded by hand or is there a visual tool you can use to design interactive graphical stuff like this in what I guess is HTML5/CSS/maybe JavaScript, similar to (dare I mention the word) Flash in the olden days? (Sorry, haven't done any web development in decades, obviously :-)).
- adamschwartz 6y ago
  Yup, they were coded by hand! Here was the initial commit which added the first diagram (originally there was only one): https://git.io/JfJ4K https://git.io/JfJ4K
  - job 6y ago
    a really cool way to explain RPKI, thanks for sharing!
- neurostimulant 6y ago
  It's basically animating SVG with CSS, which is very neat. Not using js at all except to toggle some class names when you click the button.
  - adamschwartz 6y ago
    It’s really just using CSS to animate regular HTML elements. SVG is used for the icons (the laptop, server, cloud), but the grid lines, connection lines, and packet animation are all just plain `<div/>`s :P But you’re totally correct about the JS only toggling between path="happy" and path="sad"
- joan_kode 6y ago
  Nitpick but the terms are useful: they are not responsive, they are interactive. Responsive (in modern front-end parlance) means they would adapt to different screen sizes. Some mainstream publications have been publishing responsive diagrams and I love it (here's an outstanding example: [1]). But this is not the case here. [1]: https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTERS/0100B5G33SB/index.html https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTER...
gouggoug 6y ago
They are visually appealing and are technically implemented nicely. I think, however, that they are not very insightful to the matter. It is easy to visualize the result of a BGP hijack: packets are routed to the wrong/malicious destination; so is visualizing the result of RPKI: packets aren't routed to the wrong destination. What, to me, would have provided a little more value would have been to diagram how BGP hijack happens (visualize a router announcing the wrong route), and how RPKI solves the issue. Of course, those 2 things are probably much harder to diagram. edit: re-phrased a sentence.
- adamschwartz 6y ago
  (Designer of the site) This is such a great point, and something I’d definitely like to tackle in a future iteration. Thanks for the push in that direction!
lucb1e 6y ago
Hallmark of a PR department. Cloudflare seems to have an interest in pushing this, and while I'm not quite clear on why my assumption is that they get to control the signing when ISPs sign up with them.

Yes, they look really great and responsive, too. I'd actually like to know how they were done... Are they just basically coded by hand or is there a visual tool you can use to design interactive graphical stuff like this in what I guess is HTML5/CSS/maybe JavaScript, similar to (dare I mention the word) Flash in the olden days? (Sorry, haven't done any web development in decades, obviously :-)).

adamschwartz 6y ago
Yup, they were coded by hand! Here was the initial commit which added the first diagram (originally there was only one): https://git.io/JfJ4K https://git.io/JfJ4K
- job 6y ago
  a really cool way to explain RPKI, thanks for sharing!
neurostimulant 6y ago
It's basically animating SVG with CSS, which is very neat. Not using js at all except to toggle some class names when you click the button.
- adamschwartz 6y ago
  It’s really just using CSS to animate regular HTML elements. SVG is used for the icons (the laptop, server, cloud), but the grid lines, connection lines, and packet animation are all just plain `<div/>`s :P But you’re totally correct about the JS only toggling between path="happy" and path="sad"
joan_kode 6y ago
Nitpick but the terms are useful: they are not responsive, they are interactive. Responsive (in modern front-end parlance) means they would adapt to different screen sizes. Some mainstream publications have been publishing responsive diagrams and I love it (here's an outstanding example: [1]). But this is not the case here. [1]: https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTERS/0100B5G33SB/index.html https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTER...

gouggoug 6y ago

They are visually appealing and are technically implemented nicely. I think, however, that they are not very insightful to the matter. It is easy to visualize the result of a BGP hijack: packets are routed to the wrong/malicious destination; so is visualizing the result of RPKI: packets aren't routed to the wrong destination. What, to me, would have provided a little more value would have been to diagram how BGP hijack happens (visualize a router announcing the wrong route), and how RPKI solves the issue. Of course, those 2 things are probably much harder to diagram. edit: re-phrased a sentence.

adamschwartz 6y ago
(Designer of the site) This is such a great point, and something I’d definitely like to tackle in a future iteration. Thanks for the push in that direction!

lucb1e 6y ago

Hallmark of a PR department. Cloudflare seems to have an interest in pushing this, and while I'm not quite clear on why my assumption is that they get to control the signing when ISPs sign up with them.