Player FM - Internet Radio Done Right
3,474 subscribers
Checked 1d ago
Vor sechs Jahren hinzugefügt
Inhalt bereitgestellt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. Alle Podcast-Inhalte, einschließlich Episoden, Grafiken und Podcast-Beschreibungen, werden direkt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer oder seinem Podcast-Plattformpartner hochgeladen und bereitgestellt. Wenn Sie glauben, dass jemand Ihr urheberrechtlich geschütztes Werk ohne Ihre Erlaubnis nutzt, können Sie dem hier beschriebenen Verfahren folgen https://de.player.fm/legal.
Player FM - Podcast-App
Gehen Sie mit der App Player FM offline!
Gehen Sie mit der App Player FM offline!
Revision 625: TailwindCSS v4 Alpha
Manage episode 432855255 series 2406115
Inhalt bereitgestellt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. Alle Podcast-Inhalte, einschließlich Episoden, Grafiken und Podcast-Beschreibungen, werden direkt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer oder seinem Podcast-Plattformpartner hochgeladen und bereitgestellt. Wenn Sie glauben, dass jemand Ihr urheberrechtlich geschütztes Werk ohne Ihre Erlaubnis nutzt, können Sie dem hier beschriebenen Verfahren folgen https://de.player.fm/legal.
Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir mit TailwindCSS-Dauergast Milan!
Schaunotizen
- [00:02:41] TailwindCSS v4 Alpha
- Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast Milan zusammen. In der vorherigen Revision 624 sprachen wir bereits über die Neuigkeiten bei den Versionen 3.1, v3.2, v3.3, und v3.4 und berichteten über unsere Erfahrungen.
- TailwindCSS v4 wird aktuell von dem recht kleinen Tailwind-Team von 6 Personen entwickelt. Das ganze Vorhaben halten sie in Blogartikeln fest und zeigen ihren Prozess Open Source.
- Eine große Neuerung, in der wir tief ins Detail gehen, ist die Umstellung des Parsers in Rust. Zum anderen die Umstellung von PostCSS zu LightningCSS.
- Wer Lust hat, es auszuprobieren, kann sich entweder die Alpha Version bei NPM besorgen, die seit März verfügbar ist. Oder aber man benutzt den Playground und stellt die ersion auf v4 um.
- Außerdem berichten wir über die Neuigkeit im TailwindCSS Universum, wie zum Beispiel die Updates bei dem Prettier Plugin und Catalyst von TailwindUI.
892 Episoden
Manage episode 432855255 series 2406115
Inhalt bereitgestellt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. Alle Podcast-Inhalte, einschließlich Episoden, Grafiken und Podcast-Beschreibungen, werden direkt von Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer oder seinem Podcast-Plattformpartner hochgeladen und bereitgestellt. Wenn Sie glauben, dass jemand Ihr urheberrechtlich geschütztes Werk ohne Ihre Erlaubnis nutzt, können Sie dem hier beschriebenen Verfahren folgen https://de.player.fm/legal.
Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir mit TailwindCSS-Dauergast Milan!
Schaunotizen
- [00:02:41] TailwindCSS v4 Alpha
- Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast Milan zusammen. In der vorherigen Revision 624 sprachen wir bereits über die Neuigkeiten bei den Versionen 3.1, v3.2, v3.3, und v3.4 und berichteten über unsere Erfahrungen.
- TailwindCSS v4 wird aktuell von dem recht kleinen Tailwind-Team von 6 Personen entwickelt. Das ganze Vorhaben halten sie in Blogartikeln fest und zeigen ihren Prozess Open Source.
- Eine große Neuerung, in der wir tief ins Detail gehen, ist die Umstellung des Parsers in Rust. Zum anderen die Umstellung von PostCSS zu LightningCSS.
- Wer Lust hat, es auszuprobieren, kann sich entweder die Alpha Version bei NPM besorgen, die seit März verfügbar ist. Oder aber man benutzt den Playground und stellt die ersion auf v4 um.
- Außerdem berichten wir über die Neuigkeit im TailwindCSS Universum, wie zum Beispiel die Updates bei dem Prettier Plugin und Catalyst von TailwindUI.
892 Episoden
Alle Folgen
×1 Revision 645: Barrierefreiheit kann so einfach sein 1:04:36
1:04:36
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:04:36In dieser Episode sprechen Vanessa und Schepp mit ihrem Gast Paul Hempel über die praktische Umsetzung von Barrierefreiheit im Web aus Sicht eines normalen Frontend-Entwicklers. Paul, der langjährige Erfahrung als Entwickler mitbringt, zeigt uns, dass Barrierefreiheit weder kompliziert noch teuer sein muss und in jedem Projekt berücksichtigt werden kann. Schaunotizen [00:01:06] Barrierefreiheit kann so einfach sein Paul betont, dass barrierefreie Entwicklung nicht nur Menschen mit Behinderungen zugutekommt, sondern auch den Entwicklungsprozess vereinfachen kann. Oft machen sich Entwickler:innen unnötig viel Arbeit, weil sie nicht wissen, was mit semantischem HTML und CSS bereits möglich ist. Ein Schwerpunkt der Diskussion liegt auf der Tastaturnavigation, die nicht nur für Barrierefreiheit essenziell ist, sondern auch Poweruser:innen hilft, effizienter zu arbeiten. Paul zeigt anhand von Beispielen wie , oder , wie Webstandards genutzt werden können, um Barrierefreiheit zu erhöhen und gleichzeitig den Code wartbarer und übersichtlicher zu machen. Paul spricht außerdem über seine aktuellen Projekte, darunter die Entwicklung neuer, barrierefreier Web-Apps als Open-Source-Software im Rahmen von „ Operaton „. Dabei betont er, dass die eigentliche Herausforderung nicht in der Umsetzung, sondern im Erlernen der Prinzipien liegt – und dass Barrierefreiheit Hand in Hand mit einem korrekten Einsatz von Webstandards geht. Ein weiteres Thema ist die Dokumentation von UI-Patterns, etwa durch die WAI. Die offiziellen Guidelines können abstrakt wirken, sind aber eine wertvolle Grundlage, wenn sie mit praktischen Beispielen kombiniert werden. Paul empfiehlt daher, sich intensiv mit den Grundlagen wie Landmarks, Page Regions und semantischem HTML auseinanderzusetzen, um barrierefreie Anwendungen effizient und effektiv zu entwickeln. Schließlich werfen wir einen Blick auf Standardprobleme wie Kontraste, Textskalierung und die Verwendung von REM/EM, die oft vernachlässigt werden, obwohl sie mit den richtigen Ansätzen einfach zu lösen sind. Paul gibt dabei praktische Tipps und verweist auf hilfreiche Tools und Ressourcen, die die Umsetzung erleichtern. Links Mein Talk: Accessibility ist einfach Paul Hempels Vortrag, der zeigt, warum und wie Barrierefreiheit ganz einfach umgesetzt werden kann. Operaton auf GitHub Das Open-Source-Projekt für barrierefreie Web-Apps. Noch nicht öffentlich, aber bald als Beispiel verfügbar. JavaLand Die Konferenz für Java-Entwickler:innen – mit Talks zu Barrierefreiheit und mehr. JavaLand 2025 – Konferenz Details und Anmeldung zur nächsten JavaLand-Konferenz im April 2025. WAVE von WebAim Ein mächtiges Tool, um Barrierefreiheitsprobleme auf Webseiten aufzudecken. WAI Patterns und Tutorials Offizielle Dokumentation von WAI-ARIA zu UI-Patterns – detailliert und praxisnah. Inclusive Components Eine Sammlung von Patterns für barrierefreie UI-Komponenten mit großartigen Beispielen. CSSWG Issues auf GitHub Verfolge die neuesten Diskussionen und Standards rund um CSS.…
1 Revision 644: Das Barrierefreiheitsstärkungsgesetz (BFSG) 1:01:12
1:01:12
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:01:12In dieser Episode spricht Schepp mit Gästin und IAAP zertifizierter Barrierefreiheitsexpertin Sonja Weckenmann ( LinkedIn ) über das Barrierefreiheitsstärkungsgesetz (BFSG) – ein Gesetz, das darauf abzielt, Barrieren für Menschen mit Behinderungen abzubauen, und das am 28. Juni 2025 in Kraft tritt. Also höchste Eisenbahn, sich damit zu beschäftigen! Schaunotizen [00:01:08] Das Barrierefreiheitsstärkungsgesetz Zum Start gibt Sonja uns Einblicke in die Hintergründe und Ziele des BFSG und erklärt, warum es einen wichtigen Schritt in Richtung einer inklusiveren digitalen Welt darstellt. Anschlisßend diskutieren wir, welche digitalen Produkte und Dienstleistungen unter die Regelungen fallen und welche Branchen besonders davon betroffen sind. Dabei wird deutlich, dass das Gesetz weitreichende Auswirkungen haben kann – von der Gestaltung von Websites über digitale Verkaufsplattformen bis hin zu mobilen Apps. Ein weiterer Schwerpunkt ist die praktische Umsetzung der Anforderungen, die das BFSG an Unternehmen stellt. Sonja erläutert, welche Maßnahmen erforderlich sind, um den gesetzlichen Vorgaben zu entsprechen. Neben der Theorie widmen sich Sonja und Schepp noch den typischen Stolpersteinen bei der Umsetzung. Sie sprechen darüber, wie sich Barrierefreiheit in bestehende digitale Systeme integrieren lässt und welche internen Prozesse angepasst werden müssen, um langfristig erfolgreich zu sein. Links Richtlinie (EU) 2019/882 (EAA) Die Grundlage des Barrierefreiheitsstärkungsgesetzes – der European Accessibility Act im EU-Amtsblatt. Barrierefreiheitsstärkungsgesetz (BFSG) Der Gesetzestext, der Barrierefreiheit im digitalen Bereich in Deutschland regelt. Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSGV) Die Verordnung zum BFSG mit genauen Vorgaben und Details zur Umsetzung. Accessibility requirements for ICT products and services (EN 301 549, V3.2.1 (2021-03)) PDF Europäische Norm für barrierefreie Produkte und Dienstleistungen im Bereich Informations- und Kommunikationstechnologie. EN 301 549 V3 – Harmonized European Standard for ICT Accessibility, ETSI Mehr zur Norm EN 301 549 und wie sie im europäischen Kontext angewendet wird. Web Content Accessibility Guidelines (WCAG) 2.2 Die neuesten Leitlinien für barrierefreie Webinhalte – ein unverzichtbarer Standard für Entwickler:innen. European Accessibility Act – Barrierefreiheit für die Privatwirtschaft, Blogartikel, tollwerk.de, Joschi Kuphal, 17. Januar 2024 Ein tiefer Einblick in die Auswirkungen des EAA auf die Privatwirtschaft – praxisnah und verständlich erklärt. Bei Heise wurden Online-Shops auf Barrierefreiheit getestet Ein spannender Bericht darüber, wie deutsche Online-Shops bei der Barrierefreiheit abschneiden. BITV-Prüferbund Die Anlaufstelle für die Überprüfung von Websites auf Barrierefreiheit nach der deutschen BITV. Overlay Factsheet Warum Accessibility-Overlays oft mehr Schaden als Nutzen bringen – Fakten und Hintergründe. „Wo wir sind ist vorne“ Podcast: Accessibility-Overlays mit Daniela Kubesch In dieser Folge wird sich kritisch mit Accessibility-Overlays auseinandergesetzt.…
1 Revision 643: Das Web Accessibility Cookbook 1:27:31
1:27:31
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:27:31Wir haben diesmal Manuel Matuzović zu Gast – Frontend-Entwickler, Berater, Auditor, Trainer und Autor des „ Web Accessibility Cookbook “. Gemeinsam tauchen wir ein in die Welt der Barrierefreiheit und hangeln uns dazu am Aufbau seines Buches entlang. Schaunotizen Was macht eine saubere HTML-Dokumentstruktur aus? Manuel erklärt, warum die Struktur eines HTML-Dokuments mehr ist als nur ein technisches Detail. Von Head-Elementen bis zu einer sinnvollen Organisation des Bodys – wir beleuchten, wie man das Fundament für zugängliche und benutzerfreundliche Webseiten legt. Wie nutzt man Landmarks wie Header, Main und Footer richtig? Landmarks bieten Orientierungshilfen für Nutzer:innen mit Screenreadern. Wir sprechen darüber, wann sie Sinn machen, wie man sie richtig einsetzt und warum eine gut strukturierte Seitenhierarchie für alle Nutzer:innen wichtig ist. Warum sind Links und Buttons öfter kaputt, als sie sein sollten? Links, die ins Leere führen, und Buttons, die nicht klicken wollen – wir reden darüber, warum diese Probleme so häufig sind und wie man sie vermeidet, um barrierefreie und funktionale Interfaces zu schaffen. Wie werden Formulare und Tabellen barrierefrei? Formulare und Tabellen können komplex und frustrierend sein – für Entwickler:innen und Nutzer:innen gleichermaßen. Wir diskutieren Best Practices, häufige Fehler und wie man diese wichtigen Elemente zugänglicher gestaltet. Accessibility bei Custom Elements und Shadow DOM? Web Components sind ein mächtiges Tool, aber sie kommen mit Herausforderungen. Wir sprechen über Vor- und Nachteile von Shadow DOM, warum es manchmal besser ist, darauf zu verzichten, und welche Rolle Custom Elements bei modernen Webprojekten spielen. Gewinnspiel! Manuel verlost zwei digitale Exemplare seines Buchs! 🎉 Schreib uns bis 31. Januar , was dein Lieblingselement in HTML ist und warum – auf Slack , per Mail oder auf unseren Social-Media-Kanälen Bluesky oder Mastodon . Links Web Accessibility Cookbook Praktischer Leitfaden, der Entwickler:innen dabei unterstützt, barrierefreie Websites zu gestalten, mit klaren Beispielen, Best Practices und einfache Erklärungen für komplexe Themen. HTMHell Advent Calendar 2024 Jeden Tag ein Türchen voller Accessibility-Tipps. Besser als Schokolade (okay, fast). Polypane Der Schweizer Taschenmesser-Browser für alle, die Frontend ernst nehmen. Accessibility? Check. Multi-Viewport? Check. Manuel im Februar beim CSS Café Eine Tasse Kaffee und ein tiefes Gespräch über Farben, Farbräume und warum das alles nicht so einfach ist, wie es aussieht.…
Seit nunmehr gut fünf Jahren unterstützt uns Autorin, Sprecherin und Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im Detail abzuhören und überflüssige Pausen und „Ähms“ herauszuschneiden. Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen Mittel dafür haben ❤️. Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk zusammenschnürt 🎄🎁. Und die sind immer fantastisch – hört selbst und rutscht anschließend gut!✨…
1 Revision 642: Unsere schlimmsten Hacks 1:51:40
1:51:40
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:51:40Schepp, Peter und Hans-Christian Otto (bekannt aus den Revisionen zu SSR , Speaker-Dasein und Client-Server-Kommunikation ) beichten einander ihre größten Verbrechen gegen Bits und Bytes. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:27] Unsere schlimmsten Hacks Wir beginnen mit dem Klassiker: Prototyp-Patching! Dieses hat bekanntlich gerne katastrophale Auswirkungen , die auch schon mal über in Browsern eingebaute Website-spezifische Patches hinausgehen . Während Kiki stolz auf seinen String.prototype-Patch ist, musste Schepp sogar schon mal document.write() überschreiben. Peter hält es mit Canvas-Patches , um Grafikkarten-Treiber-Bugs auszubügeln. Schepp erklärt, warum er als CSS-Trumpf lieber :not() als :root oder !important verwendet ( siehe auch ), was uns auf unerklärliche Weise überlegen lässt, ob IIFEs in PHP existieren ( tun sie ). Nach einer Lobpreisung des Switch-Statements und einer Runde gesunden Crockford-Dunkings berichtet Peter von seinen diversen … unüblichen Design-Entscheidungen in seiner Präsentationssoftware, was uns über document.currentScript und sein Fehlen in Modulen ( Polyfill ) sinnieren lässt. Gegen Ende geraten wir über einen Use Case des Number-Constructors in eine Diskussion rund um Dependencies und Package Manager, die der Aufnahme schließlich den Rest gibt.…
1 Revision 641: Passwörter & Passkeys 1:39:32
1:39:32
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:39:32In dieser Revision haben wir erneut die Entwicklerin und Trainerin Martina Kraus ( LinkedIn / Bluesky ) zu Gast und diskutieren mit ihr über das Thema Passwörter und die passwortlose Zukunft mit Passkeys. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:15] Passwörter & Passkeys In unserer Diskussion über Passwörter greifen wir zunächst die Empfehlung des Bundesamts für Sicherheit in der Informationstechnik (BSI) auf, das dazu rät, Passwörter nicht allzu komplex zu gestalten. Wir waren uns allerdings einig, dass die derzeitige Best Practice von mindestens zwölf Zeichen mit einer Kombination aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen eine gute Empfehlung sind, Komplexität hin oder her. Viele Nutzer können sich solche Passwörter allerdings schwer merken, was dazu führt, dass sie Passwörter wieder verwenden oder auf unsichere Weise speichern. Und auch auf Seitenbetreiber-Seite werden Passwörter nicht immer so sorgsam behandelt, wie es erforderlich wäre. Genau hier kommen wir auf Alternativen wie Passkeys, die komplett ohne Passwörter auskommen und damit viele der Probleme von passwort-basierter Authentifizierung nicht kennen. Passkeys müssen nicht manuell eingegeben werden und sind individuell je spezifischer Website, dem sogenannte Origin. Sie bieten damit nicht nur eine bessere Sicherheit, sondern sind auch viel benutzerfreundlicher. Wir klären, wie Passkeys technisch funktionieren und welche Herausforderungen es bei deren Einführung möglicherweise gibt. Links passkeys.io Alles, was man über Passkeys wissen möchte learnpasskeys.io Diese Seite bringt einem bei, wie die technische Implementation durchzuführen ist Passkeys: A Shattered Dream Das Blogpost, welches Schepp erinnert, das einen kritischen Blick auf den aktuellen Implementationsstand von Passkeys wirft.…
1 Revision 640: CSS4, CSS5 und CSS Next 1:22:20
1:22:20
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:22:20In dieser Episode sprechen wir mit Quentin Albert ( LinkedIn , GitHub , Twitter ) über die Entwicklung von CSS4, CSS5 und CSS Next und ergründen, warum es nach all der Zeit nun doch mit den CSS-Versionsnummern weitergehen soll. Schaunotizen [00:01:29] CSS4, CSS5 und CSS Next Obwohl CSS3 einst als finale Version angekündigt war, machen stetige Neuerungen immer deutlicher, dass dieser Begriff dem Stand der Dinge nicht mehr gerecht wird. Was meinen Blogposts, Artikel oder Lernkurse, wenn sie versprechen, einem „modernes CSS“ oder CSS3 beizubringen? Runde Ecken? Flexbox und Grid? Oder vielleicht sogar Container Queries? Sowohl fürs Marketing als auch beim Lernen von CSS fehlt es an Nuance und zeitgemäßer Begrifflichkeit . An diesem Punkt setzt die CSS-Next Community Group an. Bei den CSS-Versionsnummern stehen der Kontext und die Origin-Story neuer Technologien im Vordergrund, während das schon existierende Baseline -Projekt der WebDX Community Group eher die praktische Implementierung unterstützt. Ein Beispiel wäre Subgrid: Obwohl es noch nicht überall einsetzbar ist und damit von Baseline als neu eingestuft wird, gehört es konzeptionell doch in denselben Bucket wie Grid, das es schon lange gibt. Dementsprechend gehört Subgrid wie Grid zu CSS4. Die Versionsnummer markieren dabei größere Umbrüche, respektive Äras in den Fähigkeiten von CSS. Da es ja auch viel um Marketing geht ist ein weiterer zentraler Punkt die Entwicklung eines neuen Logos für CSS. Das alte „Schild mit der 3“, das erstmals 2011 im Windschatten von HTML5 aus der Bildfläche erschien , passt nicht mehr und soll durch ein modernes, barrierefreies und funktionales Design ersetzt werden. Quentin gibt Einblicke in die diesbezüglichen Diskussionen innerhalb der CSS-Next Community Group . Abschließend blicken wir auf die nächsten Schritte: Die Integration der Levels in die offiziellen Spezifikationen der CSS Working Group schreitet voran, und erste Entwürfe liegen bereits vor . Des Weiteren lädt die CSS-Next Community Group alle ein, Teil dieser spannenden Weiterentwicklung von CSS zu werden, die nicht nur technische Neuerungen, sondern auch eine stärkere Zugänglichkeit für alle Nutzergruppen verfolgt. Links CSS-Next Community Group GitHub-Repo der kleinen aber feinen Truppe, die zusammen die CSS-Next Community Group bilden. List of CSS Features — Categorization Spreadsheet aller CSS-Features und ihre Einsortierung in CSS4, CSS5 oder darüber hinaus. RFC: Initial CSS Level Categorization Dasselbe nochmal in einen offiziellen Request for Comments gegossen New CSS logo? Hier könnt Ihr die Evolution des neuen CSS Logos nachvollziehen…
1 Revision 639: Server-Client-Kommunikation (mit TypeScript) 2:02:19
2:02:19
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
2:02:19Hans-Christian Otto , seines Zeichens Big Boss bei Suora und bekannt aus den Revisionen zu SSR und Speaker-Dasein , präsentiert Peter seine Grand Unified Theory zur Server-Client-Kommunikation mit TypeScript. Schaunotizen [00:01:41] Server-Client-Kommunikation Der Einstieg in hippes TypeScript gelingt uns wie immer mit einem Abstecher in die Kreidezeit, in der ExtJS im UI regierte und auf der Netzwerkseite REST , RPC und SOAP via XMLHttpRequest die Mittel der Wahl waren. Inspiriert von unseren Revisionen zu semantisch-akademischem Data-Fetching und OpenAPI-MSW besprechen wir in der Folge weitere Ansätze, Client-Server-Kommunikation mit TypeScript zu verbinden. Nach einem Start bei absoluten Kleinigkeiten, wie dem Umbiegen vom JSON.parse() -Ergebnis auf any (via ts-reset ), landen wir relativ bald bei OpenAPI , GraphQL (inkl. freaky Addons wie PostGraphile ) und tRPC . Nebenher kommen auch die kommende Temporal-API , das QUERY Verb in HTTP , das TS-affine ORM Prisma und der Problembereich der Objektvalidierung (vertreten durch Zod , Valibot und JSON Schema zur Sprache.…
1 Revision 638: Web Component vs. Frontend Framework (und allgemeines
Framework/CMS-Drama) 1:12:20
1:12:20
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:12:20Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“ gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama nahm dann die Hauptrolle ein. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:07] Framwork-Drama Vor dem Hintergrund des jüngsten WordPress-Chaos und dem faust-style VC-Deal des weiteren Vite-Universums quatschen wir über die Stabilität und Vertrauenswürdigkeit unserer Plattformen und Frameworks. Wir vergleichen den klassischen Lock-In Long Con von Vercel mit dem BDFL -Modell von WordPress und „richtigen“ OSS-Projekten wie jenen, die via OpenJS finanziert werden. Gegen Ende kommen wir tatsächlich zum ursprünglich geplanten Thema „Web Components vs. Frameworks“, angestachelt durch den provokanten Artikel "Web Components Are Not the Future" aus der Feder des gänzlich unparteiischen Ryan Carniato (bekannt für SolidJS ).…
1 Revision 637: Das Devtools Performance Tab 1:34:15
1:34:15
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:34:15In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um wertvolle Einsichten in die Ladezeiten und Rendering-Prozesse unserer Webseiten zu gewinnen. Schaunotizen [00:01:20] Das Devtools Performance Tab Wir nehmen alles mit, da bleibt kein Auge trocken: Recording mit Reload oder nicht? Was bedeuten die verschiedenen Tortenfarben? Wie funktioniert das mit den verschiedenen horizontalen Lanes und kann man dort auch die Core Web Vitals ablesen? Was zeigt der Callstack? Wann braucht man CPU-Throttling? Wofür macht man Screenshots und wann zeichnet man die Speicherauslastung mit auf? Welche Rolle spielen Browser-Extensions bei der Performance-Analyse? Links Performance of CSS Variables Lisi Linhart stellte sich schon 2017 die Frage, ob und wenn ja wann CSS Variablen bzw. Custom Propeties einen Impact auf die Browser-Performance haben. Benchmarking the performance of CSS @property Im Jahr 2024 wiederholte Bramus van Damme Lisis Test und ging zusätzlich der Frage nach, welchen Einfluss @property -Deklarationen dabei haben. Chromium Perf Test Runner Low Level Performance-Tests in Chrome automatisiert ausführen Webpagetest Die Mutter aller Performance-Testing Tools. SpeedCurve SaaS, der auf Webpagetest aufbaut und es um viele nützliche Bestandteile ergänzt.…
1 Revision 636: Sprechen auf Konferenzen 2:03:35
2:03:35
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
2:03:35Mit Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social ) plaudern Schepp und Peter über das Wie und das Warum der Konferenz-Sprecherei. Unser Sponsor Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen. Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE. Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig. Schaunotizen [00:02:24] Der Wanderzirkus Von der Motivation des Speaker-Daseins (weniger Finanzielles, mehr Partnachklamm und Sugar Shack ) über die CFP -Teilnahme bis hin zur Konzeption, Vorbereitung und Präsentation eines Talks lassen wir kein Thema aus und sind teils sehr unterschiedlicher Ansicht. Wer CFPs sucht, wird auf cfp.watch schnell fündig.…
1 Revision 635: State of CSS 2024, Teil 3/3 1:02:44
1:02:44
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:02:44Neues Jahr, neue State of CSS -Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil drei. Schaunotizen [00:02:10] Math Aus irgendeinem Grund steigen wir damit ein, ob und wie Tailwind CSS mathematische Funktionen unterstützt, was es indirekt via Arbitrary Properties tut. Danach ergehen wir uns in mögliche Use-Cases für die trigonomischen Funktionen , was meist etwas mit Kreisformen zu tun hat. Ansonsten vermuten wir noch einiges Potential in generativer Kunst. Ana Tudor ist nicht nur eine CSS-Göttin, sondern vermutlich auch diejenige, die die meisten Anwendungsfälle für die mathematischen Funktionen kennt. Von den neuen Funktionen finden wir vermutlich die Gruppe rund um abs() , round() und mod() am interessantesten. Wir nennen im Zusammenhang mit selbst-skalierenden Schrift-Systemen als das Framework Utopia und Scott Kellum . Wir erwähnen, dass jede der mathematischen Funktionen calc() serienmäßig in sich eingebaut hat und dass ein Update der Spezifikation nun auch das Teilen durch Längeneinheiten unterstützt , was der Safari als erster Browser umsetzt . Anschließend lassen wir uns dazu aus wie wir bei der Anwendung von min() und max() oft einen Knoten im Kopf bekommen und bei clamp() dankenswerterweise nicht. Zu guter Letzt starten wir einen Aufruf an Euch, uns Beispiele für den Einsatz von hypot() zu nennen. Uns fällt da mangels Mathefähigkeiten nichts ein. Vielleicht im Rahmen des CSSBattle ? Um Deadpools Nase zu zeichnen, zum Beispiel? [00:19:58] Other Features :has() , :is() und :where() überspringen wir ganz frech und stürzen uns direkt auf CSS Nesting und Cascade Layers , die die CSS-Syntax aus unserer Sicht ähnlich fundamental weiterentwickeln, wie ES6 es damals für JavaScript getan hat. Damit ist es nicht mehr lang, bis wir jegliche CSS Präprozessoren aus unseren Toolschains werfen können – sofern wir nicht auf Loops setzen. Wir erwähnen auch @scope , das Herangehensweisen wie BEM oder das Kapseln von Styles via generierter CSS-Klassen überflüssig machen. Die Gretchenfrage ist: Wann ist der richtige Zeitpunkt zum Umstieg? Denn beide Features ermöglichen keine Graceful Degradation , sondern alten Browsern fliegt das CSS bei Nicht-Unterstützung komplett um die Ohren. Als nächstes schauen wir uns die beiden Funktionen image-set() und image() an. Erstere ist so etwas wie responsive Images in CSS und eigentlich ein alter (WebKit-)Hut . Die Funktion wurde nun aber spezifiziert und wurde in dem Zuge um eine Fähigkeit ergänzt, die die ursprüngliche Version nicht bieten konnte, nämlich die (Bild-)Format-Support-Queries. image() ist eine Art Schweizer Taschenmesser für alle Arten von Bild-Erzeugung in CSS. Bilder lassen sich aus Farben generieren, was uns zukünftig vom Missbrauch der linear-gradient() -Funktion abhalten wird. Wir können aber genauso Bild-Ausschnitte via Media-Fragment-Syntax erzeugen. Leider wird die Funktion bislang in keinem der Browser unterstützt, obwohl die Diskussionen darum schon vor 13 Jahren begannen. Irgendwie kommen wir durch dieses Thema auf ein artverwandtes, nämlich dass src() eine von Designfehlern befreite Re-Inkarnation von url() ist . Shout-out an Stefan Judis und seinen „Web Weekly“-Newsletter ! Abschließend sprechen wir doch noch einmal über :has() , weil es uns hier und da das Hirn verknotet, aber auch weil man dessen Einsatz wegen seiner Selector-Matching-Performance vorsichtig dosieren sollte – je nach Umfang des DOM-Trees.…
1 Revision 634: State of CSS 2024, Teil 2/3 1:12:21
1:12:21
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:12:21Neues Jahr, neue State of CSS -Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil zwei. Unser Sponsor Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen. Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE. Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig. Schaunotizen [00:03:42] Interactions Wir steigen im Kapitel „Interactions“ wieder ein werfen als erstes einen Blick auf den Themenkomplex des Scroll-Snappings , eine Erfindung von Microsoft und erstmalig zu bewundern im Internet Explorer 10 . Generell mögen wir das Feature sehr, sind uns aber einig, dass es einem manchmal auch in die Quere kommen kann – insbesondere wenn der Typ nicht auf proximity , sondern auf mandatory steht. Weiter geht es mit scroll-behavior , das wir heutzutage eigentlich immer auf den Wert smooth setzen. Hier und da führt das aber zu unschönen Interaktionen, weswegen man es ggf. temporär, z.B. mit Hilfe einer Animation, aus und wieder an stellt. Wir sind uns außerdem einig, dass Firefox das weiche Scrollen deutlich schöner umsetzt als Chrome. Nächster Punkt ist overscroll-behavior , mit dem man steuern kann, was beim Erreichen des Endes von Scroll-Bereichen passieren soll. Es ermöglicht uns, das Bounce-Verhalten und Gesten-Shortcuts zu beeinflussen, was besonders nützlich ist, wenn wir komplexe Interfaces erstellen. Außerdem kann man damit verhindern, dass durch ein Overlay hindurch die Seite Scroll-Kommandos erhält und sich so ungewollt unter dem Overlay hinweg scrollen lässt. Leider funktioniert die Property nur, wenn es auch wirklich etwas zu scrollen gibt , so dass man manchmal künstlich Scroll-Bereiche erzeugen muss. Wir sprechen über scrollbar-gutter , das nun auch in Safari implementiert wurde . Schließlich geht es um @starting-style und transition-behavior: allow-discrete , die brandneu sind und einem neue Möglichkeiten im Bereich der CSS Transitions erschließen . [00:37:19] Typography Weiter geht es mit dem nächsten Kapitel und wir beginnen mit dem font-display -Descriptor. Setzt man ihn nicht, machen die Browser, was sie wollen . Darum will man es immer setzen und das meist auf swap . Flankierend sollte man aber immer zusehen, dass man seine Fonts auf die gebräuchlichsten Zeichen eindampft (subsetted) und sie mit Hilfe von Resource-Hints preloaded . Als nächstes reden wir über line-clamp , das relativ frisch standardisiert und in die Browser eingebaut wurde, ohne die alten WebKit-Hacks, wo man es nur in Kombination mit einem alten Flexbox-Dialekt ans Laufen bekommen hat . Weiter geht es mit text-wrap: balance und text-wrap: pretty , die wir für eine fantastische Ergänzung des typografischen Werkzeugkastens halten. Und wir schauen uns kurz die neue Property hanging-punctuation an, welche derzeit nur in Safari funktioniert, insgesamt aber auch nur marginalen Effekt zeitigt. Effektreicher ist die initial-letter -Eigenschaft, mit der man Initiale etwas schöner umsetzen kann, als mit dem bislang (und auch von uns auf unserer Webseite) gebräuchlichen Hack, das ::first-letter -Pseudoelement zu stylen. [00:58:58] Accessibility Das dritte von uns behandelte Kapitel dreht sich um Barrierefreiheit und den Einfluss, den man CSS darauf ausüben kann. Da wäre zum einen die prefers-reduced-motion -Feature-Query , mit denen man Animationen und Transitions absichern kann. prefers-color-scheme berücksichtigt, ob jemand eine Seite lieber in hell oder dunkel betrachten mag. Mit prefers-reduced-data lässt sich eine schlankere Seite an Besucher ausliefern, die um weniger Datenumfang bitten – wobei wir nicht genau wissen, wieso man das nicht immer anstreben sollte. Mit Hilfe von prefers-contrast und forced-colors kann man auf besondere Darstellungswünsche von Besuchenden eingehen. Für das Funktionsprinzip von :focus-visible möchten wir auf die Revision 547: The State of CSS (Teil 2) von 2022 verweisen. Ergänzen möchten wir aber die Info, dass die .focus() -Methode in ihrem Options-Objekt die Eigenschaft focusVisible ebenfalls unterstützt. Ganz neu ist die light-dark() -Funktion in CSS, die man an allen Stellen einsetzen kann, an denen in CSS Farbwerte stehen. Als Parameter gibt man der Funktion zwei Farbangaben mit, von denen die erste bei aktiviertem Light-Mode angewendet wird und die zweite bei aktiviertem Dark-Mode.…
1 Revision 633: State of CSS 2024, Teil 1/3 1:24:14
1:24:14
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
1:24:14Neues Jahr, neue State of CSS -Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil eins. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:20] Layout Wir beginnen mit der Frage, wann man Flex und wann Grid einsetzt und uns kommt dabei ein Vortrag von Kevin Powell in den Sinn, in dem er genau das bespricht. Sodann geht es um Subgrids und wie diese schon von Anfang an für die Grid-Spec in Planung waren , dank des unermüdlichen Einsatzes von Rachel Andrew . Als Ressourcen, um Grid spielerisch zu lernen, empfehlen wir… CSS Grid Attack , Grid Critters , sowie Layout Breakouts Builder Und um *wirklich* zu verstehen, was bei Flex und Grid hinter den Kulissen abgeht, empfehlen wir den ziemlich „deepen“ Talk „Demystify Modern CSS Layouts with DevTools“ von Hui Jing Chen . Dann sprechen wir kurz über das sehr praktische margin-trim , um im Anschluss zunächst über Anchor Positioning und schließlich über Style Queries und State Queries zu sprechen. [00:44:00] Shapes & Graphics Dieses Kapitel ist eine wilde gemischte Tüte. Wir sprechen zunächst über die gar nicht mehr so neuen Blend Modes und Backdrop-Filter, allerdings führt uns das zum Thema des „Forced Colors Mode“ und wie man dort manche Überraschung erlebt. Als nächstes widmen wir uns den neuen Linear-Easing-Functions, welche uns bei Transitions und Animations völlig neue Möglichkeiten eröffnen und gleichzeitig ein ziemlich cooler „Hack“ sind. Schließlich sprechen wir über Intrinsic-Sizes in Form von min-content , max-content , fit-content . [01:05:04] Colors Das letzte Kapitel, über das wir in Teil eins sprechen, dreht sich um all die Neuerungen im Bereich Farben. Das sind einerseits neue Funktionen, wie die color() -Funktion, die das Adressieren von Farbräumen und -modellen vereinheitlicht. Anschließend sprechen wir kurz über accent-color , mit dem man den Look von Formularelementen schnell und unkompliziert der eigenen Farbwelt näher bringt. Wir reden über Wide Gamut Colors, also Farben, die einem umfangreicheren Farbraum entstammen, als ihn das altehrwürdige sRGB bietet. Man höre dazu auch unsere Folge Revision 623: Farben und Farbräume . Zu guter Letzt sprechen wir über die Relative Color Syntax , die eine neue Syntax für Farbangaben darstellt, mit der man Varianten bestehender Farben erzeugen kann. Damit eignet sie sich besonders gut, um mit ihr Design Systeme automatisiert auf Basis von Grundfarben zu erzeugen. Links Windy Browser-Erweiterung, mit der man jede Webseite nach TailwindCSS transformieren kann. CSS Café Ein mehrmals im Jahr tagendes, von Schepp mitveranstaltetes Online-Meetup zum Thema CSS…
1 Revision 632: Server Side Rendering mit Frontend Frameworks 2:12:47
2:12:47
Später Spielen
Später Spielen
Listen
Gefällt mir
Geliked
2:12:47Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social ) reden Peter und Vanessa über Server Side Rendering mit Frontend Frameworks. Im Verlauf wird Server Side Rendering mit SSR abgekürzt, und Hans-Christian Otto kurz Christian genannt. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:15] Server Side Rendering mit Frontend Frameworks SSR mit Frontend Frameworks ist ein komplexes Thema. Generell besprechen Christian, Peter und Vanessa kurz den Werdegang des Webs , von „Standard“ SSR über Hydration wie bei z.B. Vue.js zu der Resumability von Qwik . Und irgendwo dazwischen ist das SSR mit Frontend Frameworks angesiedelt. Im Zusammenhang mit Hydration und clientseitigem Rendern bespricht Christian das Problem mit SEO . Isomorphisches und dynamisches Rendern sind hier die Stichpunkte. Dabei gibt es zunächst einmal sog. Meta-Frameworks wie Nuxt oder Nextjs . Gestartet hat die Idee diese Revision aufzumachen, mit dem Hype um die React Server Components . React Server Components (RSC) sind eine neue Funktion von React, mit der Teile der Benutzeroberfläche auf dem Server gerendert werden. Sie ermöglichen es, schwere Berechnungen oder Datenverarbeitungen serverseitig durchzuführen und nur das fertig gerenderte HTML an den Client zu senden, wodurch weniger JavaScript auf dem Client ausgeführt werden muss. Server-Komponenten sind nicht interaktiv und eignen sich besonders für statische Inhalte, können aber mit clientseitigen Komponenten kombiniert werden, um interaktive Funktionen bereitzustellen. Peter geht speziell auf Web Components ein, da diese eine immer präsenter werdende Rolle in der Welt der Webentwicklung spielen. Lit ist hier nur ein Beispiel. Denn Web Components verhindern ein Vendor-Lock-In . Denn wie bei so vielem heißt es bei der Entscheidung für oder gegen SSR mit Frontend Frameworks – und wenn ja, mit welcher Technologie – auch: es kommt eben darauf an: Risikoabwägungen und Abhängigkeiten müssen für das jeweilige Projekt passen.…
Willkommen auf Player FM!
Player FM scannt gerade das Web nach Podcasts mit hoher Qualität, die du genießen kannst. Es ist die beste Podcast-App und funktioniert auf Android, iPhone und im Web. Melde dich an, um Abos geräteübergreifend zu synchronisieren.