Network Topologies- Netlify Dynamic Site Challenge

#netlifychallenge #devchallenge #webdev #javascript

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

Hello! Ever wondered about network topologies? Does a ring topology ring a bell to you? Or is it a bus topology something real? Can trees grow out of cables? Well, if you want to memorize these kind of topologies once and forever, I created Network Topologies web application. It's a nice, petit flashcard quiz that matches different kinds of network topologies! Common names + very easy to remember graphics = networking expert! 💡

Demo

Networking is such a vast domain (pun intended). Flash cards can make it easier to learn- that's why I built this site.
Let's meet these topologies here.

Here's the photoshoot:

And while indeed, "many more to see" can be misleading, as I only added 2 other topologies besides Bus, Star and Tree, it's pure poetic licence!

Platform Primitives

I found that Netlify Image CDN was very useful for my implementation. I could actually make the photos fit in the card the way I wanted, by adjusting the dimensions directly in the URL. ~~That's everything, trust me.~~
Of course on this journey I encountered challenges! Although the documentation does provide the necessary information about how to actually achieve what you need (in my case transform the images in terms of size and fit), at first I wasn't quite sure what I had to do. Initially, I hosted the images on an external domain ("easy", huh?) but it's clearly stated that cross-site redirect is not recommended. Therefore, I hosted the images on the same domain- as it can be seen on the homepage. 😸
The magic happens on the flash card quiz page. There I got along with the query parameters and transformed the images in terms of size and fit. And that meant even less work for me, because the framework I used was drum-roll please SolidJS. Why less? In my opinion, in terms of complexity, it involves less code than, for example, if I was doing the same project on Angular or Astro.
While I achieved the same result by hosting the images on an external website, something tells me that on the first trial, I complicated the things. 😏
Conclusion- the documentation is like a map: you need to know how to read it. 😉

In terms of additional platform primitives, I implemented Cache Control like this, in netlify.toml file:

[[headers]]
  for = "/*"
  [headers]
    Netlify-CDN-Cache-Control = "public, max-age=600, stale-while-revalidate=30"

Thanks to this, I learnt that by caching static content, the server doesn't need to regenerate it for every request, potentially improving performance and reducing the attack surface for DOS attacks.

I'm truly grateful for this challenge, since it gave me the opportunity to learn more. Is this a cliché? Nope! Just the truth! Same applies for the previous challenges.