# Nieuwe WebsiteAfgelopen periode hebben wij druk gewerkt aan een nieuwe website voor het Fablab. De website is nu beter toegankelijk op diverse devices en informatie kan makkelijker gedeeld worden.

## Informatie

Het hoofddoel van deze nieuwe website is content beter beschikbaar maken voor bezoekers van Fablab Arnhem en geïnteresseerden in digitale fabricage technieken. Daarom is, naast vele technische verbeteringen, het grootste verschil de toevoeging van een ‘wiki’. Op deze [wiki]({{< ref "wiki/introductie/introductie" >}} "introductie") kunnen we nu gemakkelijk grote hoeveelheden gedetailleerde informatie en handleidingen plaatsen zonder dat we met ingewikkelde pdf’s en word documenten hoeven te werken. Wij hopen zo ook dat in de toekomst onze bezoekers een bijdrage kunnen leveren aan deze kennisdeling door zelf handleidingen te schrijven. Tevens hebben we nu een [blog]({{< ref "blog" >}} "blog") categorie. Hier zullen we proberen zoveel mogelijk interessante projecten, case studies en algemeen nieuws te delen omtrent Fablab Arnhem. Op deze manier hopen wij jullie beter te kunnen betrekken bij de ontwikkelingen rondom het Fablab. Tot slot is het voor bezoekers nu overzichtelijker en gemakkelijker om in te schrijven voor [workshops]({{< ref "workshops" >}} "workshops").

{{< gallery size="medium" >}}
{{< lightbox src="images/screen3.png" alt="screenshot" >}}
{{< lightbox src="images/screen4.png" alt="screenshot" >}}
{{< lightbox src="images/screen2.png" alt="screenshot" >}}
{{< /gallery >}}

## Technisch

Voorheen was onze website op een traditionele manier gebouwd met het bekende [“Wordpress”](https://nl.wikipedia.org/wiki/WordPress) content management systeem. Helaas was deze website niet volledig [responsive](https://nl.wikipedia.org/wiki/Responsive_webdesign) en was er beperkte flexibiliteit met betrekking tot het plaatsen van nieuwe types content. Ook zorgde dit systeem voor veel onnodige overhead, zoals serverkosten en het draaiende houden van plugins. Onze nieuwe website is daarom toekomstbestendig gebouwd met de [{{< abbr "Hugo" >}}](https://gohugo.io) statische website generator ({{< abbr "SSG" >}}). Hugo zorgt ervoor dat alle informatie die is opgeslagen in markdown files netjes wordt opgebouwd tot standaard statische html en css bestanden aan de hand van vooraf gemaakte templates en logica. Hierdoor is er geen database meer nodig en kan de content extreem snel worden uitgeleverd via een [content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network) ({{< abbr "CDN" >}}). In dit geval is er gekozen voor de {{< abbr "CDN" >}} van [Netlify](https://www.netlify.com) aangezien Netlify direct onze formulieren kan verwerken via een API, maar ook de content kan updaten door middel van builds op vooraf geplande momenten. Simpelweg betekent dit dat we bijvoorbeeld niet meer handmatig een workshop hoeven weg te halen wanneer de workshop datum is verstreken. Netlify haalt de benodigde bouw informatie van een [Gitlab](https://gitlab.com) repository waar we alle content uploaden. Gitlab maakt gebruik van het bij developers bekende [{{< abbr "Git" >}}](https://nl.wikipedia.org/wiki/Git_(software)) protocol waardoor er beter versiebeheer en gelijktijdige development kan plaatsvinden. Al met al zorgt dit voor een ‘slimme’ website die zeer snel toegankelijk is op diverse devices en daarnaast ook beter vindbaar is in Google ({{< abbr "SEO" >}}). 

<div class="text-center">
{{< inline-svg src="images/architecture.svg" width="100%" height="100%" class="svg-inline-custom svg-lightmode excalidraw light" >}}
{{< inline-svg src="images/architecture.svg"  width="100%" height="100%" class="svg-inline-custom svg-darkmode excalidraw dark" >}}
</div>
{{< gallery caption="Performance resultaten van pagespeed.web.dev (15-01-2024)" >}}
{{< lightbox src="images/speed_new.png" alt="screenshot" caption="<b>New Website:</b><br>Speed index 2.2s<br>Lcp: 1.9s<br>Fcp 1.6s" >}}
{{< lightbox src="images/speed_old.png" alt="screenshot" caption="<b>Old Website:</b><br>Speed index 10.5s<br>lcp: 19,8s<br>fcp 8.4s" >}}
{{< /gallery >}}

{{< gallery aspectRatio="4:3" size="medium" caption="Performance updates / nieuwe image processing implementatie op de homge page (18-07-2024)" >}}
{{< lightbox src="images/speed_update_mobile.png" alt="screenshot" caption="<b>Mobile:</b><br>Eindelijk 100%" >}}
{{< lightbox src="images/speed_update_desktop.png" alt="screenshot" caption="<b>Desktop:</b><br>Speed index 0.8s<br>lcp: 0,7s<br>fcp 0.4s" >}}
{{< /gallery >}}

## Beveiliging & Privacy

Het gebruik van een {{< abbr "SSG" >}} zorgt niet alleen voor verbeterde performance, maar ook verbeterde beveiliging. Doordat de website enkel bestaat uit statische bestanden, i.e. er is geen database, zijn er minder kansen voor aanvallen, zoals scripting, SQL injections en server-side database lekken. Ook maken we gebruik van een content security policy ({{< abbr "CSP" >}}) om het risico op cross site scripting te beperken ({{< abbr "XSS" >}}). 

Bij het ontwerp van deze website is tevens vanaf het begin rekening gehouden met privacy. Dat betekent dat we geen cookies plaatsen en enkel geaggregeerde anonieme analytics verzamelen. Hierover is meer te lezen in onze [privacy policy]({{< ref "privacy" >}} "privacy policy"). 

{{< figure
  src="images/security2.png"
  alt="Security Report"
  title="HTTP Observatory Web Security Report van Mozilla"
  caption="HTTP Observatory Web Security Report van Mozilla"
 >}}
 ([Link](https://developer.mozilla.org/en-US/observatory/analyze?host=www.fablabarnhem.nl))