Network Topologies- Netlify Dynamic Site Challenge
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-10 23:41:15

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): 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
<!-- Share a link to your Netlify app and include some screenshots here. -->

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](https://networktopologies.netlify.app/). 

Here's the photoshoot:

![homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp7woy68q1c7tha165zp.jpeg)

![question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny10361ckmrmiko6wx90.png)

![bus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s883qxqeqhkis8z01hmn.png)

![tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uczws8o3jn9jvppjtfxg.png)

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
<!-- Tell us how you leveraged the Netlify Image CDN. -->

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

<!-- Did you implement additional platform primitives like Netlify Blobs or Cache Control? Tell us about that too! You may qualify for more than one prompt. -->

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. 

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->


<!-- Don't forget to add a cover image (if you want). -->

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. 
<!-- Thanks for participating! -->