[{"data":1,"prerenderedAt":915},["ShallowReactive",2],{"sitemap-blog":3},[4,350,415,514,593,636,677,759,792,840],{"id":5,"title":6,"abstract":7,"author":8,"body":9,"cover_image":333,"date":334,"description":335,"extension":336,"meta":337,"navigation":338,"path":339,"published":338,"seo":340,"stacker":341,"stem":342,"tags":343,"updated":348,"__hash__":349},"blog\u002Fblog\u002F2025-08-13-sicherheitsfehler-web-architektur-lernen.md","Wenn Frontends Autos öffnen: 8 Architekturfehler aus einem echten Dealer-Portal-Hack","Auf der DEF CON 33 zeigte ein Sicherheitsforscher, wie ein Händlerportal gravierende Architekturfehler hatte – bis hin zur Fernsteuerung fremder Autos. Wir analysieren die 8 größten Web-Architektur-Fehler und zeigen, wie wir bei the Stack genau solche Risiken von Anfang an vermeiden – durch sichere Software-Architektur.","Rolf Eggenberger",{"type":10,"value":11,"toc":324},"minimark",[12,26,29,32,42,47,53,75,81,85,90,216,220,223,303,307,310,314],[13,14,15],"p",{},[16,17,18,19,25],"em",{},"Dieser Beitrag wurde ursprünglich durch Rolf Eggenberger auf ",[20,21,24],"a",{"target":22,"href":23},"_blank","https:\u002F\u002Fwww.web-professionals.ch\u002Fblog\u002F2025-08-13-sicherheitsfehler-web-architektur-lernen","web-professionals.ch"," veröffentlicht und für the Stack leicht angepasst.",[13,27,28],{},"An der DEF CON 33 hat Security-Forscher Eaton Zveare gezeigt, wie er sich in ein Händlerportal eines großen Autoherstellers gehackt hat – und damit theoretisch jedes verbundene Auto entsperren, starten und orten konnte.",[13,30,31],{},"Das Brisante: Er brauchte keinen Fahrzeugzugang vor Ort, sondern nur einen Webbrowser und ein paar Tricks. Für uns bei the Stack ist dieser Fall ein Paradebeispiel dafür, warum Security by Design kein Luxus ist, sondern Pflicht – gerade bei komplexen Webplattformen.",[13,33,34,35,41],{},"Die Slides zur Präsentation vom 10. August 2025 findest Du hier: ",[20,36,40],{"href":37,"rel":38},"https:\u002F\u002Fmedia.defcon.org\u002FDEF%20CON%2033\u002FDEF%20CON%2033%20presentations\u002FEaton%20Zveare%20Roshan%20Piyush%20-%20Unexpected%20Connections%20How%20a%20vulnerability%20in%20obscure%20dealer%20software%20could%20have%20unlocked%20your%20car%20from%20anywhere.pdf",[39],"nofollow","DEF CON 33: How I Hacked a Car Dealership Portal",".",[43,44,46],"h2",{"id":45},"was-ist-passiert","Was ist passiert?",[13,48,49],{},[50,51,52],"strong",{},"(Kurz und knackig)",[54,55,56,63,69],"ul",{},[57,58,59,62],"li",{},[50,60,61],{},"Fehlerhafte Login-Logik im Client:"," Beim Laden der Login-Seite wurde Code in den Browser gezogen, den man manipulieren konnte, um Auth-Checks zu umgehen.",[57,64,65,68],{},[50,66,67],{},"Privilegien-Eskalation:"," Aus einem Händler-Login wurde ein „National Admin“-Account mit Zugriff auf über 1’000 Händlerkonten.",[57,70,71,74],{},[50,72,73],{},"Fehlerhafte Kopplung:"," Über das B2B-Händlerportal konnte man B2C-App-Accounts mit Fahrzeugen verknüpfen – Name oder VIN reichten.",[13,76,77,80],{},[50,78,79],{},"Das Ergebnis:"," Volle Kontrolle über fremde Fahrzeuge – inklusive Türen, Motor und Standort.",[43,82,84],{"id":83},"die-8-grössten-fehler","Die 8 grössten Fehler",[13,86,87],{},[50,88,89],{},"...und wie Du deine Architektur besser machst",[91,92,93,111,126,141,156,171,186,201],"ol",{},[57,94,95,98,101,104,105,107,110],{},[50,96,97],{},"Vertrauen ins Frontend (Client-Side Auth\u002FACL)",[99,100],"br",{},[50,102,103],{},"Fehler:"," Sicherheitslogik lief im Browser und war manipulierbar.",[99,106],{},[50,108,109],{},"Besser:"," Authentifizierung und Autorisierung nur auf dem Server durchführen. Niemals “isAdmin=true” im JWT ohne Server-Side Introspection. Frontend darf nur UX-Gates zeigen – kein Gatekeeper sein.",[57,112,113,116,118,120,121,123,125],{},[50,114,115],{},"Horizontale\u002Fvertikale Rechte nicht strikt getrennt",[99,117],{},[50,119,103],{}," Händler konnten sich Admin-Rechte verschaffen.",[99,122],{},[50,124,109],{}," Least Privilege – nur minimal nötige Rechte, keine Self-Service-Upgrades, MFA für kritische Aktionen.",[57,127,128,131,133,135,136,138,140],{},[50,129,130],{},"Keine sauberen Systemgrenzen",[99,132],{},[50,134,103],{}," Händlerportal durfte direkt Consumer-App-Daten verändern.",[99,137],{},[50,139,109],{}," B2B- und B2C-Dienste strikt trennen, nur minimal notwendige API-Endpunkte freigeben.",[57,142,143,146,148,150,151,153,155],{},[50,144,145],{},"Unsichere Objektzugriffe",[99,147],{},[50,149,103],{}," Name\u002FVIN reichten als Besitznachweis.",[99,152],{},[50,154,109],{}," Besitz mit kryptografischen Challenges oder Mehrfaktor prüfen.",[57,157,158,161,163,165,166,168,170],{},[50,159,160],{},"Überexponierte Admin-Funktionen",[99,162],{},[50,164,103],{}," Hochprivilegierte Endpunkte waren erreichbar.",[99,167],{},[50,169,109],{}," Admin-Oberflächen isolieren, per IP oder VPN schützen, keine Admin-Logik im SPA-Bundle.",[57,172,173,176,178,180,181,183,185],{},[50,174,175],{},"Kein Defense-in-Depth",[99,177],{},[50,179,103],{}," Ein Exploit führte direkt zum vollen Zugriff.",[99,182],{},[50,184,109],{}," Mehrere Schutzschichten, Angriffe automatisch erkennen und bei Gefahr sofort mit einem Not-Aus (Kill-Switch) kritische Funktionen blockieren.",[57,187,188,191,193,195,196,198,200],{},[50,189,190],{},"Fehlendes Monitoring",[99,192],{},[50,194,103],{}," Solche Angriffe hätten frühzeitig auffallen müssen (z. B. Massen-Suche nach Kunden\u002FVINs).",[99,197],{},[50,199,109],{}," Zentrales Überwachungssystem einsetzen, welches Log-Daten analysiert und bei ungewöhnlichem Verhalten – wie massenhaften Suchanfragen oder Logins aus fremden Ländern – automatisch Alarm schlägt.",[57,202,203,206,208,210,211,213,215],{},[50,204,205],{},"Blindheit bei Dritt-Software",[99,207],{},[50,209,103],{}," Kritische Funktion in externer, kaum überprüfter Dealer-Software.",[99,212],{},[50,214,109],{}," Regelmässig prüfen, ob externe Dienste sicher sind, Penetrationstests durchführen und sicherstellen, dass ein Problem in einem Dienst nicht das ganze System lahmlegt.",[43,217,219],{"id":218},"konkrete-umsetzungstipps","Konkrete Umsetzungstipps",[13,221,222],{},"(für moderne Web-Stacks, z. B. Laravel + Vue\u002FNuxt)",[54,224,225,238,248,258,268,284],{},[57,226,227,230],{},[50,228,229],{},"Server-seitige Gatekeeper",[54,231,232,235],{},[57,233,234],{},"Laravel: Policies und Gates im Backend nutzen, keine versteckten Admin-Flags im Client.",[57,236,237],{},"Form Requests + Rate Limiting (per Aktion), signed URLs nur als zusätzliche Schutzschicht – nie als alleinige Autorisierung.",[57,239,240,243],{},[50,241,242],{},"Step-Up-Auth für High-Risk-Flows",[54,244,245],{},[57,246,247],{},"Zusätzliche Authentifizierung bei besonders sensiblen Aktionen abfragen.",[57,249,250,253],{},[50,251,252],{},"Domänen-Trennung & API-Gateway",[54,254,255],{},[57,256,257],{},"Dealer-Portal und Consumer-Services strikt trennen, Gateway mit klaren Regeln einsetzen.",[57,259,260,263],{},[50,261,262],{},"Sichere Besitzprüfung",[54,264,265],{},[57,266,267],{},"Besitz mit kryptografischen Herausforderungen bestätigen lassen.",[57,269,270,273],{},[50,271,272],{},"Hardening der Admin-Oberfläche",[54,274,275,278,281],{},[57,276,277],{},"Admin-Bereich isolieren, IP-Restriktionen setzen und jeden kritischen Vorgang auditieren.",[57,279,280],{},"Separates Deployment, IP-Allowlist, Conditional Access, No SPA-Bundling von Admin-Privileg-Logik ins allgemeine Frontend.",[57,282,283],{},"Audit-Pflicht: Kein Admin-Write ohne fälschungssicheren Audit-Eintrag.",[57,285,286,289],{},[50,287,288],{},"Threat Modeling & Security Tests",[54,290,291,294,297,300],{},[57,292,293],{},"Vor jedem Release überlegen: Wo könnte ein Angriff möglich sein?",[57,295,296],{},"Automatische Sicherheitsscans im Entwicklungs- und Testprozess nutzen.",[57,298,299],{},"Externe Sicherheitsforscher einladen (Bug-Bounty).",[57,301,302],{},"Angriffe gezielt simulieren, um zu prüfen, ob andere Schutzmassnahmen greifen.",[43,304,306],{"id":305},"was-du-aus-dem-fall-mitnehmen-kannst","Was Du aus dem Fall mitnehmen kannst",[13,308,309],{},"Dieser Fall ist kein „Auto-Hack“ im klassischen Sinn – er ist ein Web-Architektur-Hack. Genau hier setzen wir bei the Stack an: Wir entwickeln Plattformen mit Security by Design, damit schon auf Architektur-Ebene verhindert wird, dass einzelne Fehler zu einem Totalausfall oder gar Sicherheitsvorfall führen.",[43,311,313],{"id":312},"mehr-zu-unserer-arbeitsweise","Mehr zu unserer Arbeitsweise",[13,315,316,317,319,323],{},"Sichere Architektur ist kein Zusatzfeature – sie ist die Basis.",[99,318],{},[20,320,322],{"href":321},"\u002Fkontakt","Sprich mit uns",", wenn Du eine Plattform entwickeln willst, die sowohl leistungsfähig als auch von Grund auf sicher ist.",{"title":325,"searchDepth":326,"depth":326,"links":327},"",2,[328,329,330,331,332],{"id":45,"depth":326,"text":46},{"id":83,"depth":326,"text":84},{"id":218,"depth":326,"text":219},{"id":305,"depth":326,"text":306},{"id":312,"depth":326,"text":313},"\u002Fimg\u002F2025-08-13-sicherheitsfehler-web-architektur-lernen.webp","2025-08-13","Dieser Beitrag wurde ursprünglich durch Rolf Eggenberger auf web-professionals.ch veröffentlicht und für the Stack leicht angepasst.","md",{},true,"\u002Fblog\u002F2025-08-13-sicherheitsfehler-web-architektur-lernen",{"title":6,"description":335},"rolf","blog\u002F2025-08-13-sicherheitsfehler-web-architektur-lernen",[344,345,346,347],"Ausbildung","Webentwicklung","Sicherheit","Web-Architektur",null,"I18vIUXg1cYK4z2sxY3kRnncMudpykJE4_2m2KBvvZg",{"id":351,"title":352,"abstract":353,"author":8,"body":354,"cover_image":405,"date":406,"description":358,"extension":336,"meta":407,"navigation":338,"path":408,"published":338,"seo":409,"stacker":341,"stem":410,"tags":411,"updated":348,"__hash__":414},"blog\u002Fblog\u002Fthe-stack-eroeffnung.md","Tech, Talks & Tasting – unsere Neueröffnung in Grabs","Am 27. Juni 2025 haben wir unseren neuen Firmensitz in Grabs offiziell eingeweiht. Rund 40 geladene Gäste folgten unserer Einladung und feierten gemeinsam mit uns nicht nur die Eröffnung unseres Neubaus, sondern auch ein ganz besonderes Jubiläum: 30 Jahre the Stack!",{"type":10,"value":355,"toc":403},[356,359,364,367,370,373,376,381,384,389,392],[13,357,358],{},"In entspannter Atmosphäre erlebten unsere Besucher:innen einen Nachmittag und Abend voller spannender Impulse, inspirierender Gespräche und feiner Genüsse. Neben dem offiziellen Launch unserer App \"Erlebnispfade\" standen vor allem Austausch, Neugier und Zukunftsthemen im Zentrum.",[13,360,361],{},[50,362,363],{},"Tech-Talks mit Tiefgang",[13,365,366],{},"Erfahrene Referent:innen aus der Branche gaben in unseren Talks pointierte Einblicke in aktuelle Technologie-Themen und regten zur Diskussion an:",[13,368,369],{},"Diana von Ow (Liip) begeisterte mit zwei kompakten, praxisnahen Beiträgen zum Spannungsfeld zwischen Nutzerbedürfnissen und Entwicklerrealität im UX\u002FUI-Design.",[13,371,372],{},"Fabian Zäch gab mit \"MolkerAI\" einen erfrischenden Einblick, wie KI den Alltag selbst in traditionsreichen Branchen wie der Milchwirtschaft nachhaltig verändern kann.",[13,374,375],{},"Alexander Braun schloss mit seinem pointierten Talk \"AI zwischen Hype und Enttäuschung - how fucked are we?\", der zum Nachdenken, aber auch zum Schmunzeln anregte.",[13,377,378],{},[50,379,380],{},"Diskussion, Drinks und digitale Fragen",[13,382,383],{},"Nach den Talks füllte sich unsere \"FooBar\" mit Gesprächen, Weingläsern und Fragen zur Zukunft. Reto Nef lud zum besonderen Wein-Tasting ein – nicht der Wein stand dabei im Mittelpunkt, sondern das Zusammenspiel verschiedener Weingläser mit dem gleichen Tropfen, während Alexander Braun sich einem AMA (Ask Me Anything) rund um das Thema KI stellte. Die Kombination aus Fachwissen und feiner Ironie sorgte für eine lebendige, offene Diskussionskultur bis in die Abendstunden.",[13,385,386],{},[50,387,388],{},"Danke!",[13,390,391],{},"Ein herzliches Dankeschön an alle Gäste, Speaker und Helfer:innen, die diesen Tag zu etwas ganz Besonderem gemacht haben. Wir freuen uns auf viele weitere Begegnungen, Ideen und Projekte in unserem neuen Zuhause. Willkommen in Grabs – willkommen bei the Stack.",[393,394],"img",{"className":395,"src":398,"alt":399,"loading":400,"width":401,"height":402},[396,397],"blog-image","blog-image--half","\u002Fimg\u002F2025_06_27_eroeffnung_foobar.webp","Die FooBar im neuen Bürogebäude mit Bartheke und Sitzgelegenheiten","lazy",800,600,{"title":325,"searchDepth":326,"depth":326,"links":404},[],"\u002Fimg\u002F2025_06_27_eroeffnung.webp","2025-06-27",{},"\u002Fblog\u002Fthe-stack-eroeffnung",{"title":352,"description":358},"blog\u002Fthe-stack-eroeffnung",[412,413],"the Stack","Development","yC8g7hfZfPv7WXytxszvgdiuK38WeAdAWUtPYho7omQ",{"id":416,"title":417,"abstract":418,"author":8,"body":419,"cover_image":505,"date":506,"description":507,"extension":336,"meta":508,"navigation":338,"path":509,"published":338,"seo":510,"stacker":341,"stem":511,"tags":512,"updated":348,"__hash__":513},"blog\u002Fblog\u002Fthe-stack-office.md","Wir bauen unsere eigene Homebase!","Es ist Zeit, sesshaft zu werden...",{"type":10,"value":420,"toc":502},[421,451,454,458,473,475,485,487,497,499],[13,422,423,424,427,428,431,432,435,436,439,440,435,443,446,447,450],{},"Nach ",[50,425,426],{},"30 Jahren Firmentätigkeit"," haben wir uns entschieden, unsere eigene Homebase zu bauen. In den letzten Jahren sind\nwir in diversen Orten und Locations untergekommen. Von ",[50,429,430],{},"St.Gallen"," über ",[50,433,434],{},"Buchs"," und ",[50,437,438],{},"San Diego",", nach ",[50,441,442],{},"Valencia",[50,444,445],{},"Berlin"," zurück zu den Wurzeln in ",[50,448,449],{},"Grabs",". Nun ist es an der Zeit, ein eigenes Gebäude zu erstellen, in dem wir uns\nwohl fühlen und unsere Kunden empfangen können.",[13,452,453],{},"Während der Bauzeit ziehen wir uns zurück ins Home Office um die Bauphase optimal begleiten zu können.\nAnfang 2025 werden wir dann in unser neues Zuhause einziehen und freuen uns jetzt schon darauf, euch an der Einweihungsparty begrüssen zu dürfen!",[43,455,457],{"id":456},"erste-einblicke-in-den-neubau","Erste Einblicke in den Neubau:",[459,460,461,462,461,469],"figure",{},"\n  ",[393,463],{"className":464,"src":465,"alt":466,"loading":400,"width":467,"height":468},[396],"\u002Fimg\u002F2024_07_the_stack_neubau_office.webp","Rendering der Coding Area im Neubau mit Arbeitsplätzen und Bildschirmen",1200,675,[470,471,472],"figcaption",{},"Coding Area in aufgeräumtem Zustand :-)",[99,474],{},[459,476,461,477,461,482],{},[393,478],{"className":479,"src":480,"alt":481,"loading":400,"width":467,"height":468},[396],"\u002Fimg\u002F2024_07_the_stack_neubau_schulung.webp","Rendering des Schulungsraums der Web Professionals mit Tischreihen für zwölf Teilnehmende",[470,483,484],{},"Schulungsraum der Web Professionals mit Platz für mind. 12 Teilnehmer",[99,486],{},[459,488,461,489,461,494],{},[393,490],{"className":491,"src":492,"alt":493,"loading":400,"width":467,"height":468},[396],"\u002Fimg\u002F2024_07_the_stack_neubau_bar.webp","Rendering der FooBar im Neubau mit Bartheke und Barhockern",[470,495,496],{},"Die neue Foo-Bar für unsere Lieblingskunden und -partner.",[99,498],{},[13,500,501],{},"An alle 3D Profis unter euch: die Renderings kommen nicht vom Architekturbüro. Für die Low Level Qualität stehe ich selber gerade, denn ich wollte einfach mal Blender für etwas anderes als den 3D Drucker verwenden :-)",{"title":325,"searchDepth":326,"depth":326,"links":503},[504],{"id":456,"depth":326,"text":457},"\u002Fimg\u002F2024_07_the_stack_neubau_aufsicht.webp","2024-05-24","Nach 30 Jahren Firmentätigkeit haben wir uns entschieden, unsere eigene Homebase zu bauen. In den letzten Jahren sind\nwir in diversen Orten und Locations untergekommen. Von St.Gallen über Buchs und San Diego, nach Valencia und Berlin zurück zu den Wurzeln in Grabs. Nun ist es an der Zeit, ein eigenes Gebäude zu erstellen, in dem wir uns\nwohl fühlen und unsere Kunden empfangen können.",{},"\u002Fblog\u002Fthe-stack-office",{"title":417,"description":507},"blog\u002Fthe-stack-office",[412,413],"dsM2Y6HV-VSTfbBpwo5sT_3-yRHMtFb0Mhr4FDCeVU0",{"id":515,"title":516,"abstract":517,"author":8,"body":518,"cover_image":582,"date":583,"description":584,"extension":336,"meta":585,"navigation":338,"path":586,"published":338,"seo":587,"stacker":341,"stem":588,"tags":589,"updated":348,"__hash__":592},"blog\u002Fblog\u002Fnuxt-gridsome.md","Von Nuxt.JS zu Gridsome und wieder zurück","Ein cooles Framework mit Ecken und Kanten vs. einem 'Oldie' welcher doch nochmals so richtig Gas gibt.",{"type":10,"value":519,"toc":579},[520,531,538,541,552,556,559,562,569],[13,521,522,523,526,527,530],{},"Entstanden als ",[50,524,525],{},"Vue.JS Alternative zu React\u002FGatsby"," bietet ",[50,528,529],{},"Gridsome"," viele hilfreiche Tools um in Kürze JAMStack konforme\nWebseiten zu entwickeln. Alte Wordpress Instanzen lassen sich damit zum Beispiel wunderbar in eine Headless Server\nArchitektur umwandeln, sodass Wordpress nur noch die Backend-API - also den Inhalt - zur Verfügung\nstellt, das Frontend jedoch statisch gerendert als reine HTML Dokumente auf dem Server abgelegt werden kann.\nVorbei mit Sicherheitsproblemen, regelmässigem Updatezwang und schlaflosen Nächsten bei PHP und Wordpress Core\nUpdates. Wie einfach dies geht hat unsere Entwicklerin Marielle Beusch an der letzten JAMStack Barconf der Web Professionals\nin einem Live Coding eindrücklich demonstriert.",[13,532,533,534,537],{},"Soweit so gut und alles (nach wie vor) eine tolle Sache. Nur: ",[50,535,536],{},"Nuxt.JS hat sich im letzten Jahr sehr\nstark weiterentwickelt"," und ist mittlerweile ein richtig mächtiges Framework in und mit einem Ökosystem geworden. Kinderkrankheiten der ersten Releases wurden\nausgebessert und die Perfomance sowohl im Build-Prozess als auch bezüglich SEO massiv optimiert.",[13,539,540],{},"Im Gegensatz zu den ersten Releases ist Nuxt.JS unter anderem dank folgenden Punkten wieder zurück an die Spitze gesprintet:",[54,542,543,546,549],{},[57,544,545],{},"full static (die ersten Static Site builds waren noch etwas chaotisch, der ursprüngliche Fokus von Nuxt.JS lag auch eher beim SSR. Eher ungern erinnere ich mich an mein erstes Nuxt Projekt)",[57,547,548],{},"Verbesserung des Data Fetchings (nuxt\u002Fcontent)",[57,550,551],{},"verbesserte Search Engine Optimierung des gerenderten Codes",[43,553,555],{"id":554},"fazit","Fazit:",[13,557,558],{},"Die beiden Frameworks lassen sich nicht direkt vergleichen - genau so wenig wie sich VuePress auf einen direkten Vergleich mit den beiden einlassen muss.\nNach wie vor bietet Gridsome dank diversen Content Source Plugins eine einfache Lösung um bestehende Monolithen in die JAMStack Architektur\nzu überführen.",[13,560,561],{},"Nuxt.JS hingegen war schon immer ein flexibles und universelles Framework mit welchem sich sowohl Static Sites wie auch Server Side\nRendered Applications erstellen lassen. Und genau das macht es von Release zu Release immer besser.",[13,563,564,565,568],{},"Der grosse Unterschied zu Gridsome liegt\nim Wort ",[50,566,567],{},"Applications",". Nuxt.JS erlaubt eine viel ausgefeiltere Integration von Vue.JS und dessen Stärken in das Frontend als es Gridsome\nermöglichen kann. Aber Nuxt.JS hat auch das Data Fetching und Static Rendering mitterlweile so gut hinbekommen, dass die gängigen Search Engines\nwie Google etc. in fast allen Situationen den Content optimal indexieren können. Im static Mode wird die Grenze zwischen Pre-Rendering und\nData Fetching on demand sehr klein - und Nuxt rendert (auch über CI\u002FCD Provider wie Netlify etc.) genau so wie es soll. Was es für uns immer\nöfter zum Werkzeug unserer Wahl macht.",[13,570,571,572,575,578],{},"PS: Der gesamte Relaunch von ",[20,573],{"href":574,"target":22},"https:\u002F\u002Fwww.web-professionals.ch\u002F",[20,576,574],{"href":574,"rel":577},[39]," wurde mittels\nNuxt.JS implementiert und bietet nebst Pre-Rendered Content diverse \"Vue-powered\" Tools wie z.B. Anmeldung, Online-Prüfungen, Studenten-Portal\nmit Diplomen und Rechnungskontrolle und und und... Eine Web-Applikation, static und doch dynamic.",{"title":325,"searchDepth":326,"depth":326,"links":580},[581],{"id":554,"depth":326,"text":555},"\u002Fimg\u002Ffrom-nuxt-to-gridsome-and-back.webp","2021-02-03","Entstanden als Vue.JS Alternative zu React\u002FGatsby bietet Gridsome viele hilfreiche Tools um in Kürze JAMStack konforme\nWebseiten zu entwickeln. Alte Wordpress Instanzen lassen sich damit zum Beispiel wunderbar in eine Headless Server\nArchitektur umwandeln, sodass Wordpress nur noch die Backend-API - also den Inhalt - zur Verfügung\nstellt, das Frontend jedoch statisch gerendert als reine HTML Dokumente auf dem Server abgelegt werden kann.\nVorbei mit Sicherheitsproblemen, regelmässigem Updatezwang und schlaflosen Nächsten bei PHP und Wordpress Core\nUpdates. Wie einfach dies geht hat unsere Entwicklerin Marielle Beusch an der letzten JAMStack Barconf der Web Professionals\nin einem Live Coding eindrücklich demonstriert.",{},"\u002Fblog\u002Fnuxt-gridsome",{"title":516,"description":584},"blog\u002Fnuxt-gridsome",[590,591],"Events","Conferences","qemQ9Z5zGtAvYE59--g3UNmDVRlg2DEhQB6vfaPba9E",{"id":594,"title":595,"abstract":596,"author":597,"body":598,"cover_image":626,"date":627,"description":628,"extension":336,"meta":629,"navigation":338,"path":630,"published":338,"seo":631,"stacker":632,"stem":633,"tags":634,"updated":348,"__hash__":635},"blog\u002Fblog\u002Fgraphqlday-finchconf.md","GraphQL und Finch Frontend Conf","Um das aktuellste aus der Web- und Tech-Welt zu erfahren war es für das Stack-Team wieder Zeit an eine Konferenz zu gehen. Aus aktuellem Anlass ergaben sich gleich zwei Besuche.","Marielle Beusch",{"type":10,"value":599,"toc":623},[600,607,611,620],[13,601,602,603,606],{},"Anfang September nahmen wir am ",[50,604,605],{},"GraphQL Day"," in Konstanz teil.\nDie abwechslungsreichen und erfrischenden Talks bestätigten uns, dass die populäre Abfragesprache mit Laufzeitumgebung aktuell\nbei vielen ein grosses Thema ist und es sich lohnt, sich noch genauer damit auseinanderzusetzen.",[43,608,610],{"id":609},"finch-conf-edinburgh","Finch Conf, Edinburgh",[13,612,613,614,617,618],{},"Nach zwei Tagen «Anklimatisieren» und Sightseeing ging es am Montag mit einer Tasse schottischem Tee los.\nEs erwarteten uns Themen wie Service-Workers, CSS-Grid und Flexbox und States.\nAls ich am Mittag mitten im grossen «Mingling»-Geschehen landete und plötzlich von auf mich einprasselnden Hipster-Web-Menschen umgeben war,\nbemerkte ich gerade noch rechtzeitig wie meine beiden lieben Kollegen ganz langsam abschlichen und sich ",[50,615,616],{},"ohne mich"," in Richtung Ausgang begaben.\nIch entmingelte mich dann schnellhaft etwas ungehobelt, um doch noch einen erholsamen Mittag geniessen zu können und\nmich auf die weiteren Talks zu den Themen Devtools, Resource Hints und Talking Technology einzustimmen.",[99,619],{},[13,621,622],{},"Wir erwarteten aktuelle, komplexe Themen sowie Herausforderungen oder Inspirationen\nund vor allen Dingen neue Ideen die den Arbeitsalltag bereichern. Doch wir stellten fest, dass wir nicht unbedingt zur Zielgruppe\ngehörten und die Talks zwar solide aber für uns persönlich leider nicht wie gewünscht bereichernd waren. Es war aber nichts desto\ntrotz ein unvergessliches Erlebnis und ich freue mich auf weitere (auch eigene!) Konferenzen.",{"title":325,"searchDepth":326,"depth":326,"links":624},[625],{"id":609,"depth":326,"text":610},"\u002Fimg\u002Fedinburgh.webp","2019-10-17","Anfang September nahmen wir am GraphQL Day in Konstanz teil.\nDie abwechslungsreichen und erfrischenden Talks bestätigten uns, dass die populäre Abfragesprache mit Laufzeitumgebung aktuell\nbei vielen ein grosses Thema ist und es sich lohnt, sich noch genauer damit auseinanderzusetzen.",{},"\u002Fblog\u002Fgraphqlday-finchconf",{"title":595,"description":628},"marielle","blog\u002Fgraphqlday-finchconf",[590,591],"twz5x_bnn3hyDKyaA-FuU78paUwWDUuf6zfzswIxpDM",{"id":637,"title":638,"abstract":639,"author":597,"body":640,"cover_image":668,"date":669,"description":670,"extension":336,"meta":671,"navigation":338,"path":672,"published":338,"seo":673,"stacker":632,"stem":674,"tags":675,"updated":348,"__hash__":676},"blog\u002Fblog\u002Fachtung-fertig-code.md","Achtung fertig Code!","Heute ist mein 33. Geburtstag und ich blicke auf meine ersten zwei Wochen und den Start bei the Stack als Web Developer zurück.",{"type":10,"value":641,"toc":666},[642,653,656,663],[13,643,644,645,648,649,652],{},"Als ich am morgen von Livia und Rolf mit einem ",[50,646,647],{},"Kitten-Birthday-Song"," auf unserem Screen und einem liebevollen ",[50,650,651],{},"Yes-Küchlein"," mit fancy Kerzlein empfangen wurde – war mein verregneter Geburtstag schon gerettet.",[13,654,655],{},"Vor zwei Wochen an meinem ersten Tag standen Zielsetzungen, interne Abläufe, laufende Projekte sowie das eigene Erscheinungsbild auf dem Plan. Wir haben dazu entschlossen täglich ein bis zwei kurze Meetings abzuhalten um den Stand von Projekten zu prüfen, sowie auch Problem-Lösungen auszudiskutieren. Ich empfinde es als sehr wertvoll Feedback und Inputs zu erhalten um somit effizient und mit dem Team voranzukommen und dabei dazu zu lernen.",[13,657,658,659,662],{},"Vom Glauben ich würde gar nicht mal so unstrukturiert arbeiten bzw. programmieren – wurde ich schnellhaft auf den Boden der Tatsachen geholt. ",[50,660,661],{},"Wildwuchs!"," Bei diesem Wort standen mir glatt die Haare zu Berge. Wenn ich ehrlich bin, gab es Abende, an denen ich an mir selbst zweifelte. Als ich die ganzen Abläufe in professioneller Entwicklungs-Umgebung und Produktivität erfuhr, wurde mir bewusst was mit «Wildwuchs» gemeint war und dass ich meine Komfort-Zone verlassen und mein Schrebergärtchen-Coden definitiv ändern sollte. Das Arbeiten in totaler «komponentisierter» Umgebung, sinnvollen Variablen, Bezeichnungen und Funktionen, das Minimieren und Vereinfachen von sauberem und «cleanem» Code und das immer wieder erneute Optimieren – dies sind nur einige meiner Notizen welche ich abarbeiten und beherrschen möchte.",[13,664,665],{},"Ich versuche mich jeden Tag anzutreiben Probleme selber zu lösen und mir Ziele zu setzen. Mit den richtigen Leuten und einem starken Team im Rücken, welches an mich glaubt, bin ich überzeugt meinen Einstieg als Web Developer zu schaffen und freue mich euch in unserem Blog über spannende Herausforderungen und Tipps zu berichten.",{"title":325,"searchDepth":326,"depth":326,"links":667},[],"\u002Fimg\u002Fbirthday-cake.webp","2019-08-20","Als ich am morgen von Livia und Rolf mit einem Kitten-Birthday-Song auf unserem Screen und einem liebevollen Yes-Küchlein mit fancy Kerzlein empfangen wurde – war mein verregneter Geburtstag schon gerettet.",{},"\u002Fblog\u002Fachtung-fertig-code",{"title":638,"description":670},"blog\u002Fachtung-fertig-code",[412,413],"MmWtpTjj8ynRl0YzzZ34hNbw1JlApIayrGDH5H4X4m4",{"id":678,"title":679,"abstract":680,"author":681,"body":682,"cover_image":749,"date":669,"description":686,"extension":336,"meta":750,"navigation":338,"path":751,"published":338,"seo":752,"stacker":753,"stem":754,"tags":755,"updated":348,"__hash__":758},"blog\u002Fblog\u002Fsvg-animation.md","SVG bewegt!","Warum die einzelnen Ebenen nicht unkontrolliert herumhüpfen müssen","Livia Kobler",{"type":10,"value":683,"toc":745},[684,687,691,704,708,726,731],[13,685,686],{},"Für unsere neue Seite durfte ich mich etwas mit SVG-Bild-Animationen beschäftigen und habe mich anfangs mit sehr eigenwilligen Hüpf-Orgien von Armen und Beinen herumschlagen müssen.\nUnkontrolliert sprangen mir Köpfe, Arme oder Beine vom Körper oder sie drehten sich ohne Halt vom Rest des Körpers weg. ;-)\nBis ich festgestellt habe – das muss nicht sein...",[43,688,690],{"id":689},"die-schlüssel-zum-erfolg","Die Schlüssel zum Erfolg:",[91,692,693,701],{},[57,694,695,696,700],{},"die CSS-Property ",[697,698,699],"code",{},"transform-origin",", welche festlegt ab welchem Punkt im SVG gedreht resp. transformiert werden soll",[57,702,703],{},"Die Browser-Konsole, welche hilft die richtige Position und Transformations-Masse zu ermitteln",[43,705,707],{"id":706},"wie-bin-ich-also-vorgegangen","Wie bin ich also vorgegangen?",[54,709,710,713,716],{},[57,711,712],{},"erstellen eines SVG-Bildes mit verschiedenen Ebenen, welchen ich allen einen Namen gab.",[57,714,715],{},"SVG-Code im Editor überarbeiten, so dass für jede Ebene eine Klasse vergeben ist. (nun ist es möglich diese Klassen im CSS anzusprechen)",[57,717,718,719,435,722,725],{},"im CSS für die Transformation eine zusätzliche Klasse vergeben (Namen egal) und diese mit den Properties ",[697,720,721],{},"transform: z.b. rotate(0deg)",[697,723,724],{},"transform-origin: 0px 0px"," befüllen",[13,727,728],{},[50,729,730],{},"zum wichtigsten Part :-)",[54,732,733,736,739,742],{},[57,734,735],{},"wechseln in die Browser-Konsole",[57,737,738],{},"das entsprechende Element suchen",[57,740,741],{},"in der Konsole mit den Pfeiltasten die richtige Position und Drehung ermitteln.",[57,743,744],{},"und diese dann in die Klasse übertragen resp. aus der Klasse flux eine Animation machen",{"title":325,"searchDepth":326,"depth":326,"links":746},[747,748],{"id":689,"depth":326,"text":690},{"id":706,"depth":326,"text":707},"\u002Fimg\u002Fsvg-anim.webp",{},"\u002Fblog\u002Fsvg-animation",{"title":679,"description":686},"livia","blog\u002Fsvg-animation",[756,757],"Frontend","SVG","gmbpmhNB4_H8D0CVFx78ZCX9FMwLNWI7ZoDzAR1pe9M",{"id":760,"title":761,"abstract":762,"author":8,"body":763,"cover_image":782,"date":783,"description":767,"extension":336,"meta":784,"navigation":338,"path":785,"published":338,"seo":786,"stacker":341,"stem":787,"tags":788,"updated":348,"__hash__":791},"blog\u002Fblog\u002Fnetlify-getestet.md","Was uns an Netlify gefällt","Eigentlich wollte ich mir schon seit längerem mal Netlify ansehen – hatte jedoch nie die Zeit dafür. Erkenntnis: die braucht es auch gar nicht...",{"type":10,"value":764,"toc":779},[765,768,771,774,776],[13,766,767],{},"Anlässlich dem Firmen-Relaunch von «Agentur kunstwort» zu «theStack» stand natürlich auch ein Relaunch der Webseite an. Da wir – wenn möglich – im JAMStack Verfahren arbeiten wurde auch diese Seite mit einer serverlosen Architektur aufgebaut. Als Static Site Generator haben wir uns für Gridsome entschieden und da dieser die Nähe und Unterstützung von Netlify geniesst war es endlich an der Zeit, diesen Service mal zu testen.",[13,769,770],{},"Einen Account hatte ich schon seit längerem mal erstellt, aber mir nie die Zeit genommen, Netlify genauer anzusehen. Das CI\u002FCD (Continuous Integration\u002FContinuous Deployment) vieler unserer Kundenprojekt läuft bisher via Codeship. Tolle Sache, da ziemlich flexibel. Nur leider mit einer etwas unübersichtlicheren UI, was dem Prozess zur Erstellung eines neuen Projektes ein wenig aufwändiger macht. Nicht schlimm, aber könnte besser sein.",[13,772,773],{},"Umso erstaunter war ich, dass das Setup von netlify vollkommen schmerzlos war und gefühlt max. eine einzige Minute dauerte. Das Projekt mit einem Github Repo\u002FBranch verbinden und den Build Task angeben – fertig. Kein nvm resp. npm install, nichts. Kurze Zeit nach dem ersten Commit in den Branch stand der Build bereits schon auf einer Netlify URL zur Verfügung. Für kleinere Projekte wird somit nur noch eine Anpassung der DNS Einträge benötigt und der gesamte Deployment \u002F Hosting Prozess ist abgeschlossen.",[43,775,555],{"id":554},[13,777,778],{},"um sich Netlify anzusehen benötigt man nicht wirklich Zeit. Ebenso wenig um es dann auch gezielt in den CI\u002FCD Prozess einzubinden und die gewonnene Zeit für besseres einzusetzen – zum Beispiel in eine saubere Projektdokumentation :-)",{"title":325,"searchDepth":326,"depth":326,"links":780},[781],{"id":554,"depth":326,"text":555},"\u002Fimg\u002Fpost-image.webp","2019-08-10",{},"\u002Fblog\u002Fnetlify-getestet",{"title":761,"description":767},"blog\u002Fnetlify-getestet",[789,790],"Deployment","Tools","uCjYNeeXiC-Hz0A46idO5Pc19IusDj485bhOmwMKdxk",{"id":793,"title":794,"abstract":795,"author":8,"body":796,"cover_image":832,"date":833,"description":800,"extension":336,"meta":834,"navigation":338,"path":835,"published":338,"seo":836,"stacker":341,"stem":837,"tags":838,"updated":348,"__hash__":839},"blog\u002Fblog\u002Faus-agentur-kunstwort-wird-the-stack.md","Aus Agentur kunstwort wird the Stack","Lernen, lernen, weiterkommen. Zeit für Neues! Oder: weshalb Franz Kafka recht hatte.",{"type":10,"value":797,"toc":830},[798,801,804,807,810,813,816,821],[13,799,800],{},"Als ich Anfang der 90er Jahre meine Internet-Agentur unter dem Namen \"Eggenberger und Partner\"\ngründete lautete unser Leitsatz: \"Wege entstehen dadurch, dass wir sie gehen\".\nDiese Einstellung begleitet mich seither in jeder meiner Entscheidungen. Manchmal unter Zögern und Bedenken,\naber nie unter Bereuen habe ich immer wieder neue Wege gesucht und nie gescheut, sie zu gehen.",[13,802,803],{},"Auf all diesen Wegen durfte ich - mit der mittlerweile in \"Agentur kunstwort GmbH\" umbenannten Firma - viele überaus spannende internationale Projekte umsetzen.\nEigene Startups in unterschiedlichen Bereichen hochziehen.\nMich mit den Grossen messen, von Techcrunch eine Early Stage Empfehlung erhalten, von Seedcamp ausgezeichnet werden,\ndie dot-com Hypes aktiv miterleben. Und allem voran: viele spannende Menschen kennen lernen.\nUnd genau das ist es, was mich zu dem werden liess, was ich heute sein darf.",[13,805,806],{},"Doch dies ist nicht der glitzernden Welt der Startups und Venture Capital Unternehmen zu verdanken. Im Gegenteil - aber irgendwie doch. Ohne\nan dieser Stelle zu sehr ins Gericht ziehen zu wollen: in dieser Zeit habe ich eher diejenigen Werte erfahren, welche mir bereits\nwährend meinem Wirtschafts-Studium an der Universität St.Gallen zuwider waren.\nEs waren vielmehr die Menschen welche mich während dieser Zeit treu begleitet haben. Und all die wunderbaren Developer, Designer, Nerds und Macher welche ich seit der Gründung\nder Web Professionals kennen lernen durfte.",[13,808,809],{},"Sie haben mich weiter gebracht, dank ihnen lernte ich neue Technologien kennen. Lernte erneut zu lernen. Offen zu sein für Neues.\nSo zu sein wie ich bin. Und ich durfte wachsen. In meinem Innern, aber auch in meinem Wissen.",[13,811,812],{},"Seit 2014 entstand daraus ein wunderbares Netzwerk an Internet-Profis, welche ihr Leben der Leidenschaft für ein besseres Internet widmen. Für\nschöneres Codes. Für Zugänglichkeit des Wissens sowie Perfektion ihrer Arbeit. Und auf dieses Wissen dürfen wir heute zugreifen - und unsere\nKunden davon profitieren.",[13,814,815],{},"Ganz speziell freue ich mich vor allem auch darüber, dass ich die Allerbesten unser Absolventen dafür gewinnen durfte, gemeinsam mit mir neue Wege zu gehen.\nUnd damit unseren Kunden Web-Applikationen auf höchstem Niveau bieten zu können.",[13,817,818,819,41],{},"Zeit für Neues, Zeit für ",[50,820,412],{},[13,822,823,827,829],{},[824,825,826],"q",{},"Wege entstehen dadurch, dass wir sie gehen.",[99,828],{},"\n(Franz Kafka).",{"title":325,"searchDepth":326,"depth":326,"links":831},[],"\u002Fimg\u002Fthe-stack.webp","2019-08-01",{},"\u002Fblog\u002Faus-agentur-kunstwort-wird-the-stack",{"title":794,"description":800},"blog\u002Faus-agentur-kunstwort-wird-the-stack",[412],"TRSU19A1NJeeS9tdtucNkNfXNwFeOX6QA2QgUW9VmRs",{"id":841,"title":842,"abstract":843,"author":8,"body":844,"cover_image":907,"date":833,"description":848,"extension":336,"meta":908,"navigation":338,"path":909,"published":338,"seo":910,"stacker":341,"stem":911,"tags":912,"updated":348,"__hash__":914},"blog\u002Fblog\u002Fdo-the-jamstack.md","Do the JAMStack!","JAMStack – die neue Freiheit oder das Gegenteil?",{"type":10,"value":845,"toc":902},[846,849,852,855,858,862,882,886,889,893,896],[13,847,848],{},"Seit 1992 entwickle ich Lösungen für das Internet. Aber ich muss ganz ehrlich eingestehen: ich hätte es oftmals besser machen können.",[13,850,851],{},"In den letzten drei bis vier Jahren entwickelte sich mein Development-Stil in eine komplett neue Richtung. Weg von CMS Monstern wie TYPO3, Wordpress etc. zurück respektive weiter zu Static Site Generatoren. Weg von der trägen Microsoft .NET Welt zurück respektive weiter zu reinen HTML\u002FCSS\u002FJavascript-Lösungen. Weg von Abhängigkeiten, hin zur neuen Freiheit der Unabhängigkeit. Und zu höchst SEO relevante Umsetzungen.",[13,853,854],{},"Kleinere Webseitenprojekte werden mit Static Site Generatoren (je nach Projekt reicht dabei bereits Panini) umgesetzt. Daten werden nicht mehr zwingend in relationalen Datenbanken gespeichert. Grössere Projekte werden mittels schlanken reaktiven Frontends höchst effizient umgesetzt.",[13,856,857],{},"Daraus resultierte schrittweise ein für mich komplett neuer Stil der Architekturplanung sowie Applikationsentwicklung. Mir gefiel dieser Stil – obwohl ich nicht wusste, ob ich damit auf dem richtigen Weg war. Anlässlich der Anmeldung für die #finchconf in Edinburgh stiess ich erstmals auf den begriff «JAMStack» – und ich wusste: ich bin nicht alleine ;-)",[43,859,861],{"id":860},"was-macht-ein-jamstack-projekt-aus","Was macht ein JAMStack Projekt aus?",[54,863,864,867,870,873,876,879],{},[57,865,866],{},"das ganze Projekt liegt auf einer CDN",[57,868,869],{},"Alles lebt in einem Git Repo",[57,871,872],{},"Einsatz moderner Build Tools",[57,874,875],{},"Automatisierte Builds",[57,877,878],{},"Atomic Deploys",[57,880,881],{},"Instant Cache Invalidation",[43,883,885],{"id":884},"ist-das-nun-wirklich-freiheit-oder-ein-weiterer-schitt-in-abhängigkeiten-sogenannte-vendor-locks","Ist das nun wirklich Freiheit oder ein weiterer Schitt in Abhängigkeiten – sogenannte Vendor Locks?",[13,887,888],{},"Jedem der oben aufgeführten Punkte entprechen Dienste welche durch austauschbare Technologien umgesetzt werden können.\nOb nun die Cloud von Google oder Amazon eingesetzt wird ist eine Sache weniger Klicks.\nOb Codeship, Netlify oder andere  Anbieter für das Continuous Deployment eingesezt wird ist innert Minuten konfiguriert.\nWichtig dabei (und natürlich nicht nur hier) ist eine perfekte und stringente Dokumentation um bei all den atomaren Prozessen den Überblick bewahren zu können.",[43,890,892],{"id":891},"meine-grösste-erkenntnis","Meine grösste Erkenntnis?",[13,894,895],{},"Mit gut eingespielten JAMStack Prozessen lässt sich ein enormes Tempo in der Entwicklung erreichen.\nDie Wartbarkeit eines Projektes wird massiv erhöht, der Wartungsbedarf gleichzeitig um ein vielfaches kleiner gegenüber klassischen CMS\u002FFramework Lösungen.",[13,897,898,901],{},[50,899,900],{},"Tipp",": In der Prototypen-Phase nutze ich z.B. sehr gerne die Firebase API zur Datenspeicherung. Für produktive Systeme kann dies dann jedoich sehr schnell ziemlich teuer kommen.\nAus diesem Grund achte ich persönlich sehr darauf, dass eingebundene APIs jederzeit migriert werden können. Dies löse ich jeweils über eine Abstraktion innerhalb eines State Mangement Patterns.",{"title":325,"searchDepth":326,"depth":326,"links":903},[904,905,906],{"id":860,"depth":326,"text":861},{"id":884,"depth":326,"text":885},{"id":891,"depth":326,"text":892},"\u002Fimg\u002Fjamstack.webp",{},"\u002Fblog\u002Fdo-the-jamstack",{"title":842,"description":848},"blog\u002Fdo-the-jamstack",[913],"Architektur","9N6g3qVDu3NnxYHJAwGg1Q1T5sqTOnpqw0qqjdePe-U",1787666528049]