Präsentation im Rahmen des ersten Marburger Webmontags (http://webmontag.de/location/marburg/index).
Diese Präsentation beantwortet die folgenden Fragen:
- Für wen sind Coding Guidelines sinnvoll?
- Warum?
- Was sollte enthalten sein?
Des weiteren werden Links zu Tools zur Überprüfung der Einhaltung genannt.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden. Daniel Marx
Suchmaschinenoptimierung bedeutete für viele Menschen lange einfach nur, ein bestimmtes Keyword – also eine Suchanfrage, nach der besonders viele Menschen auf Google suchen – so oft wie möglich auf eine Seite zu packen, wie nur irgend möglich. Heraus kamen “optimierte SEO Texte”, die für den normalen User grausam zu lesen waren. Diese Zeiten sind zum Glück vorbei. Heute schreiben wir unsere Texte für den User und konzentrieren uns nicht mehr auf ein einzelnes Keyword, sondern auf ein Thema.
Damit deine Texte auf Google & Co aber trotzdem gefunden werden, sollte gibt es ein paar Regeln die man noch immer beachten sollte.
Sie kennen doch bestimmt das "Gesetz des Instruments": Wer als Werkzeug nur ein modernes Frontend-Framework hat, löst jedes Problem mit einer Single Page-Applikation. So oder so ähnlich, nur halt mit Hammer und Nagel lautet es, beschreibt jedoch ganz gut die aktuelle Situation der JavaScript-Welt. Auf nahezu jede Anforderung wird mit einer aufgeblähten, clientseitig gerenderten SPA geantwortet. Doch ist es schön langsam an der Zeit, dass wir uns fragen sollten: Ist das wirklich alles? Und die Antwort lautet ziemlich sicher "Nein". Doch genau diesem Thema widmen wir uns und werfen einen Blick auf die Alternativen und da gibt es viele.
Im React-Ökosystem findet aktuell ein kleiner Umbruch statt. Mit Server Side Rendering, Static Site Generation, Server Components und Frameworks wie Next verschiebt sich ein Teil der Arbeit in Richtung Server. Dieser Trend ist auch bei Vue, Svelte und Angular zu beobachten. Und genau das ist es, was die sogenannten Meta-Frameworks ausmacht. Uns als EntwicklerInnen gibt das mehr Flexibilität, um auf Anforderungen reagieren zu können. Sie müssen nicht mehr den kompletten Quellcode zum Client übertragen, haben bessere Caching-Möglichkeiten und auch die Suchmaschinen sind Ihnen dankbar.
Dieser Vortrag gibt Ihnen einen Überblick über die wichtigsten Features von Meta-Frameworks und wo und vor allem wie sie gewinnbringend eingesetzt werden können.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden. Daniel Marx
Suchmaschinenoptimierung bedeutete für viele Menschen lange einfach nur, ein bestimmtes Keyword – also eine Suchanfrage, nach der besonders viele Menschen auf Google suchen – so oft wie möglich auf eine Seite zu packen, wie nur irgend möglich. Heraus kamen “optimierte SEO Texte”, die für den normalen User grausam zu lesen waren. Diese Zeiten sind zum Glück vorbei. Heute schreiben wir unsere Texte für den User und konzentrieren uns nicht mehr auf ein einzelnes Keyword, sondern auf ein Thema.
Damit deine Texte auf Google & Co aber trotzdem gefunden werden, sollte gibt es ein paar Regeln die man noch immer beachten sollte.
Sie kennen doch bestimmt das "Gesetz des Instruments": Wer als Werkzeug nur ein modernes Frontend-Framework hat, löst jedes Problem mit einer Single Page-Applikation. So oder so ähnlich, nur halt mit Hammer und Nagel lautet es, beschreibt jedoch ganz gut die aktuelle Situation der JavaScript-Welt. Auf nahezu jede Anforderung wird mit einer aufgeblähten, clientseitig gerenderten SPA geantwortet. Doch ist es schön langsam an der Zeit, dass wir uns fragen sollten: Ist das wirklich alles? Und die Antwort lautet ziemlich sicher "Nein". Doch genau diesem Thema widmen wir uns und werfen einen Blick auf die Alternativen und da gibt es viele.
Im React-Ökosystem findet aktuell ein kleiner Umbruch statt. Mit Server Side Rendering, Static Site Generation, Server Components und Frameworks wie Next verschiebt sich ein Teil der Arbeit in Richtung Server. Dieser Trend ist auch bei Vue, Svelte und Angular zu beobachten. Und genau das ist es, was die sogenannten Meta-Frameworks ausmacht. Uns als EntwicklerInnen gibt das mehr Flexibilität, um auf Anforderungen reagieren zu können. Sie müssen nicht mehr den kompletten Quellcode zum Client übertragen, haben bessere Caching-Möglichkeiten und auch die Suchmaschinen sind Ihnen dankbar.
Dieser Vortrag gibt Ihnen einen Überblick über die wichtigsten Features von Meta-Frameworks und wo und vor allem wie sie gewinnbringend eingesetzt werden können.
There and back again - Responsive Webdesign mit WordPress Michael Oeser
There and back again - Responsive Webdesign (RWD) mit WordPress - Vom Desktop zum Smartphone und wieder zurück
Präsentation anlässlich der Wordpress Konferenz am 05.03.2013 in Zürich
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Andreas Wissel
Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch die Vorarbeit von Anbietern wie Microsoft mit Windows Forms geleistet wurde, muss heute selbst Hand angelegt werden. In dieser Session von Andreas Wissel erfahren Sie, wie Ihr Team mit robusten Workflows in einer agilen Welt mit diesen Anforderungen Schritt hält. Angefangen bei Grundkonzepten für erfolgreiche Redesigns über Custom Elements in Angular bis hin zur Entwicklung von isolierten Komponenten in Storybook. Mit diesem Handwerkszeug schaffen Sie die Grundlage für eine konsistente Designsprache in skalierbaren Anwendungen.
Was Sie schon immer über barrierefreie PDFs wissen wolltenMarkus Erle
Vortrag von Markus Erle, Wertewerk auf der Fachtagung "Aufbereitung barrierefreier Dokumente" im Rahmen der Daisy2009-Konferenz in Leipzig am 22.09.2009
Monolithische Mehrschichtarchitekturen scheinen ihre besten Tage hinter sich zu haben. Heute muss alles “micro”, „loosely coupled“ und „highly flexible“ sein. Ach ja, “resilient” nicht zu vergessen! Hört sich spannend an, aber was genau bedeutet das eigentlich für uns Entwickler/Architekten? Brauchen wir wirklich neue Architekturen? Und wenn ja, welche Herausforderungen ergeben sich dadurch? Mit welchen Patterns und Best Practices kann man diese Herausforderungen bewältigen? Und wie sieht überhaupt ein möglicher Migrationspfad aus, wenn man nicht das Glück hat, auf der grünen Wiese starten zu dürfen? Fragen über Fragen. Die zugehörigen Antworten auf dem Weg in eine leichtgewichtige(re) Zukunft gibt es in der Session.
Rex ist ein Tool zur Automatisierung von Applikations- und Konfigurationsrollouts. Die gewünschte Umgebung wird mittels einem Script (Perl) beschrieben und kann somit auf unterschiedlichen Systemen ausgefuehrt werden. Rex verbindet sich per SSH auf das Zielsystem und führt die entsprechenden Arbeiten aus.
In diesem Vortrag will ich zuerst auf die Basics von Rex eingehen. Um dann zu zeigen wie man mit Hilfe von Rex sich und seinem Team schnell eine Testumgebung mit VirtualBox zur Verfügung stellen kann und wie man - in Zusammenarbeit mit den Systemadministratoren - die gleichen Scripte zum Aufbau und dem Deployment der Produktionsumgebung verwenden kann.
Rex ist ein Tool zur Automatisierung von Applikations- und Konfigurationsrollouts. Die gewünschte Umgebung wird mittels eines Script (Perl) beschrieben und kann somit auf unterschiedlichen Systemen ausgeführt werden. Rex verbindet sich per SSH auf das Zielsystem und führt die entsprechenden Arbeiten aus.
In diesem Vortrag wird zunächst auf die Basis von Rex eingegangen. Dann wird gezeigt, wie man mit Hilfe von Rex sich und seinem Team schnell eine Testumgebung mit VirtualBox zur Verfügung stellen kann, und wie man – in Zusammenarbeit mit den Systemadministratoren – die gleichen Scripte zum Aufbau und dem Deployment der Produktionsumgebung verwenden kann.
Weitere ähnliche Inhalte
Ähnlich wie Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
There and back again - Responsive Webdesign mit WordPress Michael Oeser
There and back again - Responsive Webdesign (RWD) mit WordPress - Vom Desktop zum Smartphone und wieder zurück
Präsentation anlässlich der Wordpress Konferenz am 05.03.2013 in Zürich
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Andreas Wissel
Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch die Vorarbeit von Anbietern wie Microsoft mit Windows Forms geleistet wurde, muss heute selbst Hand angelegt werden. In dieser Session von Andreas Wissel erfahren Sie, wie Ihr Team mit robusten Workflows in einer agilen Welt mit diesen Anforderungen Schritt hält. Angefangen bei Grundkonzepten für erfolgreiche Redesigns über Custom Elements in Angular bis hin zur Entwicklung von isolierten Komponenten in Storybook. Mit diesem Handwerkszeug schaffen Sie die Grundlage für eine konsistente Designsprache in skalierbaren Anwendungen.
Was Sie schon immer über barrierefreie PDFs wissen wolltenMarkus Erle
Vortrag von Markus Erle, Wertewerk auf der Fachtagung "Aufbereitung barrierefreier Dokumente" im Rahmen der Daisy2009-Konferenz in Leipzig am 22.09.2009
Monolithische Mehrschichtarchitekturen scheinen ihre besten Tage hinter sich zu haben. Heute muss alles “micro”, „loosely coupled“ und „highly flexible“ sein. Ach ja, “resilient” nicht zu vergessen! Hört sich spannend an, aber was genau bedeutet das eigentlich für uns Entwickler/Architekten? Brauchen wir wirklich neue Architekturen? Und wenn ja, welche Herausforderungen ergeben sich dadurch? Mit welchen Patterns und Best Practices kann man diese Herausforderungen bewältigen? Und wie sieht überhaupt ein möglicher Migrationspfad aus, wenn man nicht das Glück hat, auf der grünen Wiese starten zu dürfen? Fragen über Fragen. Die zugehörigen Antworten auf dem Weg in eine leichtgewichtige(re) Zukunft gibt es in der Session.
Rex ist ein Tool zur Automatisierung von Applikations- und Konfigurationsrollouts. Die gewünschte Umgebung wird mittels einem Script (Perl) beschrieben und kann somit auf unterschiedlichen Systemen ausgefuehrt werden. Rex verbindet sich per SSH auf das Zielsystem und führt die entsprechenden Arbeiten aus.
In diesem Vortrag will ich zuerst auf die Basics von Rex eingehen. Um dann zu zeigen wie man mit Hilfe von Rex sich und seinem Team schnell eine Testumgebung mit VirtualBox zur Verfügung stellen kann und wie man - in Zusammenarbeit mit den Systemadministratoren - die gleichen Scripte zum Aufbau und dem Deployment der Produktionsumgebung verwenden kann.
Rex ist ein Tool zur Automatisierung von Applikations- und Konfigurationsrollouts. Die gewünschte Umgebung wird mittels eines Script (Perl) beschrieben und kann somit auf unterschiedlichen Systemen ausgeführt werden. Rex verbindet sich per SSH auf das Zielsystem und führt die entsprechenden Arbeiten aus.
In diesem Vortrag wird zunächst auf die Basis von Rex eingegangen. Dann wird gezeigt, wie man mit Hilfe von Rex sich und seinem Team schnell eine Testumgebung mit VirtualBox zur Verfügung stellen kann, und wie man – in Zusammenarbeit mit den Systemadministratoren – die gleichen Scripte zum Aufbau und dem Deployment der Produktionsumgebung verwenden kann.
Ähnlich wie Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung (20)
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
1. Frontend Coding
Guidelines
Ein Baustein zur Qualitätssicherung
2. Michael Kühnel
• Macht Internet seit Netscape 4.7
• Frontend Developer bei der SMA Solar
Technology AG
• Twitter: @mkuehnel
• Website: www.michael-kuehnel.de
12. Sinnvoll für
• Alle Projekte an denen nicht alleine
gearbeitet wird:
• Teams. Auch in kleineren Firmen
13. Sinnvoll für
• Alle Projekte an denen nicht alleine
gearbeitet wird:
• Teams. Auch in kleineren Firmen
• Firmen die Dienstleister beauftragen
14. Sinnvoll für
• Alle Projekte an denen nicht alleine
gearbeitet wird:
• Teams. Auch in kleineren Firmen
• Firmen die Dienstleister beauftragen
• Übergabe von Projekten an Kunden
24. Inhalte (Allgemein)
• Encoding von Dateien
• Line endings (Unix vs.
Mac vs. Windows)
25. Inhalte (Allgemein)
• Encoding von Dateien
• Line endings (Unix vs.
Mac vs. Windows)
• Einrückungen
26. Inhalte (Allgemein)
• Encoding von Dateien
• Line endings (Unix vs.
Mac vs. Windows)
• Einrückungen
• Schreibweisen
(lowerCamelCase vs.
benutzung-von-
bindestrichen)
27. Inhalte (Allgemein)
• Encoding von Dateien
• Line endings (Unix vs.
Mac vs. Windows)
• Einrückungen
• Schreibweisen
(lowerCamelCase vs.
benutzung-von-
bindestrichen)
• Verpflichtung zur
Validierung
28. Inhalte (Allgemein)
• Encoding von Dateien • Code-Beispiele
(Dos and Don’ts)
• Line endings (Unix vs.
Mac vs. Windows)
• Einrückungen
• Schreibweisen
(lowerCamelCase vs.
benutzung-von-
bindestrichen)
• Verpflichtung zur
Validierung
29. Inhalte (Allgemein)
• Encoding von Dateien • Code-Beispiele
(Dos and Don’ts)
• Line endings (Unix vs.
Mac vs. Windows) • Anhang mit Best
Practices
• Einrückungen
• Schreibweisen
(lowerCamelCase vs.
benutzung-von-
bindestrichen)
• Verpflichtung zur
Validierung
30. Inhalte (Allgemein)
• Encoding von Dateien • Code-Beispiele
(Dos and Don’ts)
• Line endings (Unix vs.
Mac vs. Windows) • Anhang mit Best
Practices
• Einrückungen
• ggf. Definition der zu
• Schreibweisen unterstützenden
Browser
(lowerCamelCase vs.
benutzung-von-
bindestrichen)
• Verpflichtung zur
Validierung
31. Inhalte (Allgemein)
• Encoding von Dateien • Code-Beispiele
(Dos and Don’ts)
• Line endings (Unix vs.
Mac vs. Windows) • Anhang mit Best
Practices
• Einrückungen
• ggf. Definition der zu
• Schreibweisen unterstützenden
Browser
(lowerCamelCase vs.
benutzung-von-
bindestrichen) • ggf. Merging von Dateien
• Verpflichtung zur
Validierung
34. Inhalte (HTML)
• Validierung nach
welchem Standard?
• Bei HTML5: Welche
Schreibweise? (XHTML
vs. HTML)
35. Inhalte (HTML)
• Validierung nach
welchem Standard?
• Bei HTML5: Welche
Schreibweise? (XHTML
vs. HTML)
• Trennung von Inhalt und
Design
36. Inhalte (HTML)
• Validierung nach
welchem Standard?
• Bei HTML5: Welche
Schreibweise? (XHTML
vs. HTML)
• Trennung von Inhalt und
Design
• IDs vs. Klassen
37. Inhalte (HTML)
• Validierung nach • Spans vs. Divs
welchem Standard?
• Bei HTML5: Welche
Schreibweise? (XHTML
vs. HTML)
• Trennung von Inhalt und
Design
• IDs vs. Klassen
38. Inhalte (HTML)
• Validierung nach • Spans vs. Divs
welchem Standard?
• Semantisches HTML
• Bei HTML5: Welche
Schreibweise? (XHTML
vs. HTML)
• Trennung von Inhalt und
Design
• IDs vs. Klassen
42. Inhalte (CSS)
• Inline CSS verbieten
• Vor !important warnen
• Hinweis auf den Umgang
mit dem Internet
Explorer
43. Inhalte (CSS)
• Inline CSS verbieten
• Vor !important warnen
• Hinweis auf den Umgang
mit dem Internet
Explorer
• Schreibweise von
Selektoren,
Eigenschaften und
Werten
44. Inhalte (CSS)
• Inline CSS verbieten • Kommentare
• Vor !important warnen
• Hinweis auf den Umgang
mit dem Internet
Explorer
• Schreibweise von
Selektoren,
Eigenschaften und
Werten
45. Inhalte (CSS)
• Inline CSS verbieten • Kommentare
• Vor !important warnen • Verwendung von CSS3
• Hinweis auf den Umgang
mit dem Internet
Explorer
• Schreibweise von
Selektoren,
Eigenschaften und
Werten
46. Inhalte (CSS)
• Inline CSS verbieten • Kommentare
• Vor !important warnen • Verwendung von CSS3
• Hinweis auf den Umgang • ggf. Infos zur
mit dem Internet Verwendung von CSS
Explorer präprozessoren
• Schreibweise von
Selektoren,
Eigenschaften und
Werten
47. Inhalte (CSS)
• Inline CSS verbieten • Kommentare
• Vor !important warnen • Verwendung von CSS3
• Hinweis auf den Umgang • ggf. Infos zur
mit dem Internet Verwendung von CSS
Explorer präprozessoren
• Schreibweise von • ggf. zu verwendende
Selektoren, Frameworks
Eigenschaften und
Werten
48. Inhalte (CSS)
• Inline CSS verbieten • Kommentare
• Vor !important warnen • Verwendung von CSS3
• Hinweis auf den Umgang • ggf. Infos zur
mit dem Internet Verwendung von CSS
Explorer präprozessoren
• Schreibweise von • ggf. zu verwendende
Selektoren, Frameworks
Eigenschaften und
Werten • ggf. Umgang mit mobilen
Endgeräten