Modern Web Develpoment

[heinetz]

Hallo Forum,

ich habe 1999 als Developer in der Agentur gelernt, was man zur Entwicklung einer Website brauchte (HTML, PHP, JS und CSS). 2002 habe ich mich selbständig und ziemlich alles aber alles allein gemacht. So ich also eine Menge verpasst und versuche den Anschluss zu finden. Da prasselt einiges Neues auf mich ein und mich zu orientieren, muss ich irgendwie den Kontext zu dem mir Bekannten herstellen.

Könnt Ihr mir dabei helfen?

Meine lokale Entwicklungsumgebung besteht seit jeher aus einem Apache, PHP und MySQL. Das hiess früher unter Windows WAMP, später hatte ich unter OS X LAMP benutzt und irgendwann eine App namens XAMPP. Darin konnte ich mich recht gut bewegen und wusste, was in httpd.conf und php.ini zu tun ist, damit es läuft. Im letzten Jahr habe ich sehr viel Mühe gemacht und um ganz auf XAMPP zu verzichten, alles mit Homebrew aufgebaut. Meine letzten Projekte waren entweder Wordpress, wo man nur am Theme Anpassungen vornimmt oder ich habe ein HTML5-Boilerplate verwendet und dort jQuery, Bootstrap, usw. eingebunden. Vor einigen Jahren habe ich mal LESS gelernt ...

Nun habe ich die Möglichkeit kennenzulernen, wie modernes (Frontend-) Webdevelopment heute gemacht wird, habe ein Projekt ausgecheckt und die Website lokal zum Laufen gebracht, nachdem ich dem Setup-Guide gefolgt bin. Allerdings ist mir vollkommen fremd, was genau ich da mache, denn in meiner Welt muss man eine Website nicht installieren ;) Hier kommen z.B. Node, Gulp, Yarn und SASS zum Einatz. Das kann ich alles grob einordnen.

Nun möchte ich versuchen, eines meiner letzten Projekte auf diese Weise aufzubauen.

Meine erste Frage: Die Website läuft irgendwie auf einem eigenen Server, der da wohl mitinstalliert worden ist (node.js?). Ich kann mir vostellen, dass im Zusammenhang mit php garnicht mehr sinnvoll zusammenpasst, oder? wie setze ich also mein Wordpress-Projekt sinnvoll auf?

danke und

beste gruesse, heinetz

[chorn]

Klingt für mich jetzt erstmal verwirrt und verwirrend (ohne Wertung). Aber vielleicht trifft es das ja. Ich kann jetzt nicht abschätzen, was genau du hören willst. Tutorials kennst du ja sicher viele. Aber was sind denn konkret deine Anforderungen, an ein Projekt, oder an deine Helfer?

Die Website läuft irgendwie auf einem eigenen Server, der da wohl mitinstalliert worden ist (node.js?)

Zunächst mal solltest du dich besser mit dem Begriff "Server" auseinandersetzen, schon damit du unterscheiden kannst, was Server und was Service sind, also ob du die Maschine, oder das installierte Programm meinst. Das kann dir aber so auch niemand anders sagen, wie du oder dein Admin das konfiguriert ha(s)t. Aber Wordpress und node.js haben erstmal gar nichts miteinander zu tun.

Hast du dich denn schon für Frontend-, oder für Backendentwicklung entschieden? Klar gibt es Leute die machen "Full-Stack", das wird auch bei Bewerbungen teilweise erwartet, die meisten Backender können auch was mit Frontend anfangen, ich persönlich mache ungern Frontend, und beruflich ist Frontend zum Glück eine andere Abteilung. Ich halte auch nicht viel davon, das zu vermischen, ausser man ist darauf angewiesen eine One-Man-Army zu sein.

Was jetzt dein anderes Projekt sein soll, dass du ausgecheckt hast, kann ich nicht mal raten, und auch nicht, was das dann mit Wordpress (Projekt? Anforderungen?) zu tun haben soll. Wenn der Server schon da ist, nutze halt den Deployprozess den du sonst auch benutzt hast.

[heinetz]

Sorry für die Verwirrung 😉 Ich will erstmal versuchen, das zu sortieren ...

[marctrix]

Hej heinetz,

Sorry für die Verwirrung 😉 Ich will erstmal versuchen, das zu sortieren ...

Vielleicht können wir dabei helfen?

Marc

[heinetz]

Hi Marc,

danke für das Angebot. Deshalb komme ich immer wieder hierher 😉

Also ... meine lokale Entwicklungsumgebung habe ich immer so begriffen, dass ich auf meinem lokalen Rechner Programme installiere, die die selben sind, wie die auf einem Linux-Rechner, wie bei einem Web-Hoster steht. Das ist zu erst einmal ein HTTP-Server. Der beantwortet einen http-Request (http://localhost/index.html) mit dem Inhalt der Datei index.html in dem Verzeichnis, dass als DocumentRoot definiert ist. Der Webserver lässt sich durch Module, wie z.B. PHP in seinem Funktionsumfang erweitern. Was ich früh als Herausforderung verstanden habe war, unterschiedliche Projekte zu verwalten und die nicht einfach nur über Unterordner anzusprechen. Deshalb habe ich immer grosse Energien darauf verschwendet, dass meine Projekte auch lokal mit unterschiedlichen Domains aufrufen lassen.

Als ich vor einiger Zeit dachte, ich müsse mich mal mit REACT beschäftigen, habe ich ein Tutorial abgearbeitet. Dort wurde gleich mal eine Entwicklungsumgebung mit node.js aufgesetzt, die vollkommen unabhängig von meinem lokalen Apachen lief. Das verunsichert mich einfach. Ist das nun ein vollwertiger Webserver ohne PHP oder wie muss ich mir das vorstellen?

gruss, heinetz

[marctrix]

Hej heinetz,

danke für das Angebot. Deshalb komme ich immer wieder hierher 😉

Das ist schön - allerdings hoffe ich auf weitere Unterstützung, denn ich bin kein Server-Fachmann. 😉

Also ... meine lokale Entwicklungsumgebung habe ich immer so begriffen, dass ich auf meinem lokalen Rechner Programme installiere, die die selben sind, wie die auf einem Linux-Rechner, wie bei einem Web-Hoster steht.

Hast du dafür auch Linux verwendet (nur aus Interesse. Macht ja Sinn, dass Entwicklungsumgebung und Produktiv-Umgebung möglichst ähnlich sind)?

Als ich vor einiger Zeit dachte, ich müsse mich mal mit REACT beschäftigen, habe ich ein Tutorial abgearbeitet. Dort wurde gleich mal eine Entwicklungsumgebung mit node.js aufgesetzt, die vollkommen unabhängig von meinem lokalen Apachen lief. Das verunsichert mich einfach. Ist das nun ein vollwertiger Webserver ohne PHP oder wie muss ich mir das vorstellen?

Klingt für mich ganz danach. Aber eigentlich muss man die Doku gar nicht lesen. Wenn das Ding Webseiten ausliefert, ist es ein Server, oder? 😉

Und was ist schon ein vollwertiger Webserver? Einer der FTP kann oder TCP oder IP oder http oder https oder das Mailprotokoll oder mehr oder anderes oder alles? 😉

Marc

[Auge]

Hallo

… Aber eigentlich muss man die Doku gar nicht lesen. Wenn das Ding Webseiten ausliefert, ist es ein Server, oder? 😉

Oder nicht. Hier wird offensichtlich über HTTP ausgeliefert, was für einen Webserver spricht, man kann die Seiten auf dem lokalen Rechner auber auch über das Dateisystem ausliefern. Dann gilt „oder nicht“.

Und was ist schon ein vollwertiger Webserver? Einer der FTP kann oder TCP oder IP oder http oder https oder das Mailprotokoll oder mehr oder anderes oder alles? 😉

Erstmal ist er ein Server, der über HTTP(S) angeforderte Ressourcen ausliefert. Eventuell werden auf ihm Interpreter für serverseitige Sprachen ausgeführt (z.B. Perl, PHP, Python oder auch Node.js). Alles andere ((S)FTP, Mail) sind weitere Serverprogramme für andere Dienste, die vielleicht auf der selben Maschine ausgeführt werden. Die haben aber originär nichts mit dem „Webserver“ zu tun, gehören aber üblicherweise zu einem Webserverangebot, damit es funktional „komplett“ ist.

Tschö, Auge

[marctrix]

Hej Auge,

… Aber eigentlich muss man die Doku gar nicht lesen. Wenn das Ding Webseiten ausliefert, ist es ein Server, oder? 😉

Oder nicht. Hier wird offensichtlich über HTTP ausgeliefert, was für einen Webserver spricht, man kann die Seiten auf dem lokalen Rechner auber auch über das Dateisystem ausliefern. Dann gilt „oder nicht“.

Das geht aber nur mit plain html. Aber klar. Ich verstehe, was du meinst.

Und was ist schon ein vollwertiger Webserver? Einer der FTP kann oder TCP oder IP oder http oder https oder das Mailprotokoll oder mehr oder anderes oder alles? 😉

Erstmal ist er ein Server, der über HTTP(S) angeforderte Ressourcen ausliefert. Eventuell werden auf ihm Interpreter für serverseitige Sprachen ausgeführt (z.B. Perl, PHP, Python oder auch Node.js).

Alles andere ((S)FTP, Mail) sind weitere Serverprogramme für andere Dienste, die vielleicht auf der selben Maschine ausgeführt werden. Die haben aber originär nichts mit dem „Webserver“ zu tun, gehören aber üblicherweise zu einem Webserverangebot, damit es funktional „komplett“ ist.

Na ja, Webserver kann eine Software wie ein Apache oder die Maschine inklusive Software bedeuten. Insofern meine Nachfrage, was mit "kompletter Webserver" gemeint ist.

Auch die Tatsache, dass jedes Protokoll von einem eigenen Programm bereit gestellt/behandelt wird, ist ja kein muss. es ließe sich ja durchaus eine Software denken, die alles abfrühstückt. Muss keinen Sinn machen und es wäre wahrscheinlich nicht so ins System integrierbar wie die Dienste/daemons — gut das hat jetzt mit der derzeitigen Realität nicht viel zu eun. Ich merke es gerade selber, dass hypothetische Überlegungen an dieser Stelle nciht zielführend sind. 😉

Marc

[Auge]

Hallo

Und was ist schon ein vollwertiger Webserver? Einer der FTP kann oder TCP oder IP oder http oder https oder das Mailprotokoll oder mehr oder anderes oder alles? 😉

Erstmal ist er ein Server, der über HTTP(S) angeforderte Ressourcen ausliefert. Eventuell werden auf ihm Interpreter für serverseitige Sprachen ausgeführt (z.B. Perl, PHP, Python oder auch Node.js).

…

Auch die Tatsache, dass jedes Protokoll von einem eigenen Programm bereit gestellt/behandelt wird, ist ja kein muss. es ließe sich ja durchaus eine Software denken, die alles abfrühstückt.

Quasi eine eierlegende Wollmilchsau. Wie bei dieser Tierart üblich, ist allerdings die Wahrscheinlichkeit, dass sie zwar irgendwie alles kann, aber nichts so wirklich richtig, recht hoch.

Oder man benutzt eben eine Softwaresammlung aus auf ihre Aufgaben spezialisierten Programmen, wie es XAMPP eine ist.

Ich merke es gerade selber, dass hypothetische Überlegungen an dieser Stelle nciht zielführend sind. 😉

Zumindest für @heinetz werden sie es nicht oder nicht sonderlich sein.

Tschö, Auge

[heinetz]

Hallo Forum,

Ich merke es gerade selber, dass hypothetische Überlegungen an dieser Stelle nciht zielführend sind. 😉

Zumindest für @heinetz werden sie es nicht oder nicht sonderlich sein.

Ich bin geneigt "dochdoch" zu sagen 😉

Ich komme natürlich hierher, weil ich mir auf konkrete Fragen konkrete Antworten wünsche. Aber eine ganz wesentliche Qualität besteht für mich auch im mitlesen, wenn bspw. @Auge sich mit @marctrix über das Thema auseinandersetzen, das ich angestossen habe.

herzlichen Dank dafür! heinetz

[heinetz]

Hi Marc,

Hast du dafür auch Linux verwendet (nur aus Interesse. Macht ja Sinn, dass Entwicklungsumgebung und Produktiv-Umgebung möglichst ähnlich sind)?

Nein. Aber aus genau dieser Überlegung heraus hatte ich ganz früh mal versucht, mich mit Suse anzufreunden und bin dann später nach OS X konvertiert 😉

Klingt für mich ganz danach. Aber eigentlich muss man die Doku gar nicht lesen. Wenn das Ding Webseiten ausliefert, ist es ein Server, oder? 😉

Richtig. Genauso ist das wohl. Ich versuche nur, ein Gefühl dafür zu entwickeln, wie sich mein Apache von einem Node-Server unterscheidet, weil das Aufsetzen eines Apachen für mich immernoch eine gewisse Erfurcht und einen relativ tiefen Eingriff in's OS bedeutet. Auch wenn er bei OS X von Haus aus installiert ist und ich damit mittlerweile routiniert bin, ist das doch eine andere Qualität, als für jedes Projekt einen eigenen Node-Server zu starten.

gruss, heinetz

[marctrix]

Hej heinetz,

Hast du dafür auch Linux verwendet (nur aus Interesse. Macht ja Sinn, dass Entwicklungsumgebung und Produktiv-Umgebung möglichst ähnlich sind)?

Nein. Aber aus genau dieser Überlegung heraus hatte ich ganz früh mal versucht, mich mit Suse anzufreunden und bin dann später nach OS X konvertiert 😉

Geht mir genau so. Ich frage mich nur (selber mache ich das nicht - bitte nicht als Empfehlung verstehen), ob es dann sinn machen könnte, in einer VM zu entwicklen.

Richtig. Genauso ist das wohl. Ich versuche nur, ein Gefühl dafür zu entwickeln, wie sich mein Apache von einem Node-Server unterscheidet […]

Ab hier müsste Dir jemand anders weiter helfen. 😉

Marc

[Mitleser]

Geht mir genau so. Ich frage mich nur (selber mache ich das nicht - bitte nicht als Empfehlung verstehen), ob es dann sinn machen könnte, in einer VM zu entwicklen.

Auf jeden Fall. Es gibt viele Gründe, die dafür sprechen:

• Optimale Nähe zum Produktivsystem möglich, völlig unabhängig vom Host der VM
• Die VM kann jederzeit exportiert / importiert werden. Bei Bedarf zum Beispiel auch von Windows nach Mac OS übertragen werden.
• In der VM kann ich die wildesten Sachen ausprobieren und kaputt machen. Wenn ich irgendwas zerhacke, gehe ich in wenigen Sekunden einfach zum letzten Snapshot zurück
• Das BS innerhalb der VM ist immun gegenüber Kreuzeffekten mit Updates innerhalb des Hosts. Gerade unter Mac OS liegt es an der Tagesordnung, dass einem ein mühsam eingerichtetes Setup um die Ohren fliegt, wenn man das BS aktualisiert.
• ...

[marctrix]

Hej Mitleser,

• Das BS innerhalb der VM ist immun gegenüber Kreuzeffekten mit Updates innerhalb des Hosts. Gerade unter Mac OS liegt es an der Tagesordnung, dass einem ein mühsam eingerichtetes Setup um die Ohren fliegt, wenn man das BS aktualisiert.

Also ich aktualisiere MacOS nicht täglich 😀

Aber klar - noch ein Schritt weiter wäre die Verwendung von Containern (z.B. Docker). Habe ich noch gar nicht gemacht, klingt aber spannend!

Marc

[heinetz]

Mit der Erklärung kann ich node.js einordnen. Es ist eben nicht der Ersatz für meinen Apachen, mit dem ich bisher PHP-Websites entwickelt habe. Unabhängig davon, ob er es vielleicht sein könnte, habe ich nun angefangen, mein Testprojekt von LESS nach SASS umzuschreiben. Die Kompilierung der LESS-Files hatte ich bisher über eine Erweiterung meines Code-Editors gelöst. Nun habe ich Gulp bzw. Node dafür im Einsatz. Wenn ich das richtig einordne, hat das den Vorteil, dass es eben nicht von einer Funktionalität meines Editors abhängig ist.

Was ich noch nicht so recht zusammenbekomme, ist wie Gulp und Node im Verhältnis zueinander stehen. Wenn Node die Laufzeitumgebung für Entwicklerwerkzeuge ist, ist Gulp als Taskrunner dann für die automatische Steuerung dieser Werkzeuge zuständig? Das würde heissen, diese Werkzeuge würden auch ohne Gulp funktionieren.

danke für Klärung und

gruss, heinetz

[1unitedpower]

Node.js ist ein alternatives Laufzeitsystem für JavaScript, das für alle möglichen Programme gedacht ist, die keine grafische Oberfläche brauchen. Das umfasst HTTP-Server, aber vor allem auch jede Menge Entwicklerwerkzeuge, die für die Webentwicklung heute ständig gebraucht werden.

Ein solches Werkzeug ist zum Beispiel webpack, womit sich Stylesheets, Bilder und clientseitig benötigte JavaScript-Libraries komprimieren und bündeln lassen, um die Netzwerklast zwischen Browser und Server zu verringern.

Babel, Flow und TypeScript sind weitere Werkzeuge, die es Entwicklern ermöglichen modernenes und typsicheres JavaScript zu schreiben ohne dabei die Kompatibilität mit älteren Browser aufzugeben, weil der betroffene Code zur Entwicklungszeit in browsergeeignetes JavaScript übersetzt wird. SASS und LESS sind vergleichbare Werkzeuge für CSS.

Bei der React-Anwendungsentwicklung benutzt man Node.js auch um Webkomponenten serverseitig in HTML zu gießen. So lassen sich React-Anwendung schreiben, die auch ohne clientseitig laufendes JavaScript funktionieren.

Ich könnte endlos weitere Beispiele auflisten, der Punkt ist, dass Node.js nicht nur für Webserver gedacht ist. Der große Erfolg von Node.js ist auch dem florierenden Ökosystem von unzählbaren Helferlein zu verdanken, die großen Nutzen für sehr spezifische Probleme bereitstellen.

[Gunnar Bittersmann]

@@chorn

die meisten Backender können auch was mit Frontend anfangen

Das widerspricht völlig meiner Erfahrung. Die meisten Backender haben kaum Ahnung von CSS, ja noch nicht einmal von HTML.

Was sich auch auf deren Tastatur widerspiegelt. 😉

Das eben Gesagte trifft auch auf etliche JavaScript-Programmierer zu, die sich „Frontend-Entwickler“ nennen.

LLAP 🖖

[marctrix]

Hej Gunnar,

die meisten Backender können auch was mit Frontend anfangen

Das widerspricht völlig meiner Erfahrung. Die meisten Backender haben kaum Ahnung von CSS, ja noch nicht einmal von HTML.

Was sich auch auf deren Tastatur widerspiegelt. 😉

Das eben Gesagte trifft auch auf etliche JavaScript-Programmierer zu, die sich „Frontend-Entwickler“ nennen.

Programmieren, also sich mit dem Ablauf von Prozessen zu beschäftigen, die Daten aus einer DB abholen, bzw auch schon das DB-Management selber, die Bereitstellung von Daten, das überprüfen und weiterverarbeiten von Nutzereingaben mit einem Riesenstrauß an Sicherheitsproblemen, die bedacht und gelöst werden wollen, das fordert auch so viel geistige Ressourcen, dass man alles, was man sich sauber und mühsam zusammengestellt hat, dann einfach auf die Straße kippt (bzw. in ein div), weil man sich nun nicht auch noch mit HTML und CSS auseinandersetzen möchte.

"Wieso? Klappt doch!" höre ich dann oft von Programmierern. Und nein, nur weil ein Programm im Browser läuft (JS) ist man noch kein Frontender. Ein Frontender stellt mit JS komplett andere Dinge an, als ein Backender. Er zapft normalerweise keine Datenbank an, verarbeitet keine Daten, muss sich um den ganzen Sicherheitskram nur wenig (ich sage extra nicht, er muss sich gar nicht) kümmern.

Ein Frontender nutzt Js um Attributwerte zu manipulieren (aria-expanded="false" zu aria-expanded="true"), um ins DOM einzugreifen oder auf ähnliche Weise eine Webseite fortschreitend zu verbessern (progressive enhancement).

Weil: die Webseite muss auch abgeschaltetem JavaScript etwas tun. Da fragen Bacvkender schon gleich: "Wieso? Dann "funktioniert" doch nichts mehr". Doch sollte zumindest. Und wenn es nur ein Link ist auf eine serverseitige Anwendung oder ein Hinweistext oder, oder, oder…

Als Frontender denkt man komplett anders. Schon weil man kaum eine Möglichkeit hat, etwas zu automatisieren. Man kann dinge stupide wiederholen (z.B. mit custom properties), hat aber eher damit zu tun, die erhaltenen Daten aufzubereiten, als diese bereit zu stellen.

Und es geht auch meiner Meinung nach gar nciht anders, denn sämtliche Komponenten sind inzwischen so umfangreich und es gibt so viele davon, das ein Mensch das alles gar nciht beherrschen kann. Von allem ein bisschen heißt aber nciht, irgendetwas gut zu können.

Oder wie man im Budo sagt: ich habe keine Angst vor deinen 1.000 Techniken, sondern vor der einen Technik, die 1.000 Mal wiederholt hast.

Mir ist lernen immer leicht gefallen und ich habe Spaß dran und trotzdem gibt es noch 1.000 Dinge, die ich im Frontend-Bereich lesen und lernen unbd ausprobieren (wiederholen, siehe die 1.000 Wiederholungen) möchte. Zum Backend-Bereich komme ich da gar nicht.

Allein CSS ist so umfangreich geworden, dass man immer wieder etwas nachschlagen muss. Aber auch SEO muss berücksichtigt werden, HTML, SVG, Bildbearbeitung (mindestens Strategien zur Vermeidung allzugroßer Bilddateien), Nutzbarkeit und Zugänglichkeit (in einem Wort: Inklusion, wobei sich inclusive Design schwer ins deutsche übersetzen lässt).

Nur inklusive Seiten sind gute Seiten. Nur diesen einen Aspekt der Frontend-Entwickler bekommt kein einziger Backend-Entwickler hin. Schlicht und einfach, weil er selber so viel zu lernen hat, dass er das nicht zusätzlich leisten kann.

Und es ist auch ein volkommen anderes Gebiet, ein vollkommen anderes Denken mit einer vopllkommen anderen Herangehensweise. Es gibt kaum Parallelen oder Überschneidungen zwischen Front- und Backend. Nur Berührungspunkte. Die gibt es auch zum grafischen Design — auch hier kaum Überschneidungen.

Das sind wirklich andere Welten, jede hat ihre Berechtigung. Aber immer wieder merke ich, dass Frontend oft nicht ernst genommen wird, weil die Syntax der verwendeten Sprachen simpel ist.

Das ist als würde man Designern unterstellen, sie sind komplett verblödet, weil sie überhaupt keine Skript- oder Auszeichnungssprache benötigen. Sagt natürlich keiner, weil jeder weiß, wenn ein Produkt häßlich ist, ist es schwer zu verkaufen. Schaut man ein Auto an, weiß man aber oft ohne Verbauch, Ps-Zahl oder vieles andere zu kennen: das will ich haben!

So ist es auch mit Webseiten oft. Daher haben es Designer wesentlich leichter als Frontender die Bedeutung ihrer Arbeit klar zu stellen. Ein hübsches Produkt verkauft sich (fast) von selbst.

Dennoch muss das Produkt auch funktionieren. Auch das ist klar. Wenn man 1.000 PS verspricht, müssen die auch als Qualm aus dem Auspuff rauskommen, sonst hat man bald nen Anwalt an der Backe.

Aber ob das hübsche, schnelle Geschoss überhaupt bedienbar ist (Frontend-Aufgabe), spielt in den Chefetagen oft nicht die erste Rolle.

Da gibt es lustige Beispiele von teuren Sportwagen (Lamborghini, Alfa usw), die absolut schlecht bedienbar sind. Aber sie sehen heiß aus und sind superschnell (und damit gefährlich, wenn die Bedeinung nciht intuitiv erfolgt).

In dieser Hinsicht gleichen Webseiten oft Supersportwagen…

Marc

[heinetz]

Hallo Forum,

da bin ich wieder 😉

Ich lerne einfach gerade alles ganz neu kennen und werde erschlagen von Begrifflichkeiten, zu denen ich jeweils eine Idee habe, mir aber die Sicherheit fehlt. Als ich vor 17 Jahren angefangen habe, hab ich als Webdeveloper alles gemacht. Nach 2 Jahren habe ich mich selbständig gemacht, weil mich über das Programmieren hinaus der ganze Prozess gereizt hat. Als One-Man-Show habe ich dann alles selbst gemacht bis auf das Design. Irgendwann habe ich mich nicht mehr selbst grossartig mit dem Backend befasst, weil mich Pixel immer mehr gereizt haben. Aber so habe ich technisch viel verpasst und bin irgendwann bei Wordpress gelandet. Nun mache ich ein Praktikum als Frontend-Developer, um meine technischen Kenntnisse aufzupolieren. Das learning_by_doing geht schon recht gut, um ein Gefühl zu entwickeln. Die Projekte sind schon aufgesetzt und ich bewege mich darin. Nun möchte ich versuchen, eines meiner fertigen Projekte so umzubauen.

Es handelt sich um ein Wordpressprojekt, dass ich ehemals auf die für mich konventionielle Weise umgesetzt hatte. Es ist eine einfach Installation von Wordpress in meiner lokelen Entwicklungsumgebung mit Apache, PHP, MySQL unter homebrew. Für WP hatte ich ein Theme gekauft und meine Anpassungen als Child-Theme umgesetzt. Das sind ein paar wenige PHP, CSS und JS. Nun möchte ich all das, was ich neu kennen gelernt habe dafür zum Einsatz bringen, sofern es passt, d.h auch wenn es u.U. überdimensioniert ist.

Helft Ihr mir dabei, herauszuarbeiten, wie sich das unter den Bedingungen, aufbohren lässt?

Ich werfe man in den Raum, was ich in der letzten Woche kennengelernt habe:

npm, node, grunt, gulp, sass, vagrant, yarn, docker, atomic design, bem, nunjucks

gruss, heinetz

[marctrix]

Hej heinetz,

da bin ich wieder 😉

Schön!

Ich lerne einfach gerade alles ganz neu kennen und werde erschlagen von Begrifflichkeiten, zu denen ich jeweils eine Idee habe, mir aber die Sicherheit fehlt. Als ich vor 17 Jahren angefangen habe, hab ich als Webdeveloper alles gemacht.

Da war auch vieles noch simpler. Umso fantasiereicher müsste man sein, aus den begrenzten Möglichkeiten das Maximum heraus zu kitzeln. — Eine ganz andere Art zu arbeiten. Keineswegs weniger anspruchsvoll. Zumal es kaum Kurse o.ä. im Bereich Webentwicklung gab. Gott sei dank hat ein gewisser Stefan Münz sich eines Tages hingesetzt und eine tolle Anleitung geschrieben. 😉

Irgendwann habe ich mich nicht mehr selbst grossartig mit dem Backend befasst, weil mich Pixel immer mehr gereizt haben. Aber so habe ich technisch viel verpasst und bin irgendwann bei Wordpress gelandet.

Auch ich schätze an WordPress, dass es einfach läuft und ich das Aussehen per css meinen Wünschen entsprechend anpassen kann. Ich finde das ist ein prima Tool, wenn man als Frontender komplette Webseiten anbieten möchte.

Nun mache ich ein Praktikum als Frontend-Developer, um meine technischen Kenntnisse aufzupolieren. Das learning_by_doing geht schon recht gut, um ein Gefühl zu entwickeln. Die Projekte sind schon aufgesetzt und ich bewege mich darin. Nun möchte ich versuchen, eines meiner fertigen Projekte so umzubauen.

Wie umzubauen?

Helft Ihr mir dabei, herauszuarbeiten, wie sich das unter den Bedingungen, aufbohren lässt?

Hier hilft jeder, wenn man die richtigen Fragen stellt 😉

Ich werfe man in den Raum, was ich in der letzten Woche kennengelernt habe:

npm, node, grunt, gulp, sass, vagrant, yarn, docker, atomic design, bem, nunjucks

Beschäftige dich nicht nur mit den Möglichkeiten, sondern auch mit der Kritik an solchen Techniken. Ich persönlich stehe atomic design - obwohl es eine verführerische Idee ist — in der reinen Lehre etwas kritisch gegenüber. Es ist ein prima Ansatz, kann aber schnell in reinem presentational markup enden. Einen tollen Ansatz hat @Gunnar Bittersmann in seinem Vortrag „Css preprocessors for the best of both worlds“ beschrieben.

Dasselbe gilt dann auch für bem.

Gibt gerade einen aktuellen Artikel auf css-Tricks zum Thema atomic design und utility classes — und eine interessante Diskussion in den Kommentaren!

Marc

[Gunnar Bittersmann]

@@marctrix

Einen tollen Ansatz hat @Gunnar Bittersmann in seinem Vortrag „Css preprocessors for the best of both worlds“ beschrieben.

Vielen Dank für die Blumen!

Gibt gerade einen aktuellen Artikel auf css-Tricks zum Thema atomic design und utility classes

Nei-en, bitte nicht atomic CSS mit atomic design verwechseln!

und eine interessante Diskussion in den Kommentaren!

Gebookmarkt. Wenn mir mal schlecht ist, aber nicht so schlecht, dass das Zeugs alleine hochkommt, werde ich darauf zurückgreifen.

Ich musste letztens schon einen Vortrag über atomic CSS über mich ergehen lassen. Meine Tagebucheinträge dazu:

• 18:26 “It’s taking away the C from CSS. No cascade. I don’t know about you, but I guess I don’t like it.”
• 18:29 “Presentational markup turned from bad to worse. Cryptic, unreadable.”
• 18:32 “Happy to save some lines of CSS code—at the cost of bloated HTML code. Seriously?”

Auf Twitter gibt’s auch Bilder dazu. Besonders dreist war ja die Lüge, man würde damit Dateigröße sparen.

LLAP 🖖

[marctrix]

Hej Gunnar,

Einen tollen Ansatz hat @Gunnar Bittersmann in seinem Vortrag „Css preprocessors for the best of both worlds“ beschrieben.

Vielen Dank für die Blumen!

Empfehle ich dauernd - und nciht nur den Vortrag. Ich mag es, wie du die Bedeutung eines Themas präsentierst. Zum Beispiel Semantik in "What does it mean" oder zuletzt progressive enhancement auf dem #ID24

Gibt gerade einen aktuellen Artikel auf css-Tricks zum Thema atomic design und utility classes

Nei-en, bitte nicht atomic CSS mit atomic design verwechseln!

Autsch. Das war ein übler Fehler. Du hast natürlich recht!

und eine interessante Diskussion in den Kommentaren!

Gebookmarkt. Wenn mir mal schlecht ist, aber nicht so schlecht, dass das Zeugs alleine hochkommt, werde ich darauf zurückgreifen.

😂

Seit Anbeginn meiner Berufstätigkeit habe ich immer versucht, meine Arbeitsabläufe so zu optmieren, dass ich meine Arbeit schneller und/oder besser erledige, ohne mehr Aufwand zu haben. Seit ich am Computer arbeite, hat sich das so richtig ausgezahlt!

Darum sage ich immer scherzeshalber: ein fauler Programierer ist ein guter Programmierer.

Aber bei manchen Ansätzen denke ich mir: wenn Ihr Eure Arbeit einfach machen würdet, anstatt ständig zu überlegen, wie ihr euch drum drücken könnt, wärt ihr schneller fertig…

Ich musste letztens schon einen Vortrag über atomic CSS über mich ergehen lassen. Meine Tagebucheinträge dazu:

• 18:26 “It’s taking away the C from CSS. No cascade. I don’t know about you, but I guess I don’t like it.”
• 18:29 Presentational markup turned from bad to worse. Cryptic, unreadable.
• 18:32 “Happy to save some lines of CSS code—at the cost of bloated HTML code. Seriously?”

Eine Seite kann zwar ohne CSS funktionieren, aber niemals ohne HTML. Einer meiner Hauptgründe, dem HTML im Zweifelfall noch mehr Aufmerksamkeit zu widmen, als dem CSS. Wenn man das CSS versaut hat, kann der Nutzer es einfach abschalten…

Marc

[Gunnar Bittersmann]

@@marctrix

Gebookmarkt. Wenn mir mal schlecht ist, aber nicht so schlecht, dass das Zeugs alleine hochkommt, werde ich darauf zurückgreifen.

😂

Gerade zufällig entdeckt, dass es auch dafür ein Emoji gibt: 🤮 U+1F92E.

LLAP 🖖

[heinetz]

Hi Marc,

Beschäftige dich nicht nur mit den Möglichkeiten, sondern auch mit der Kritik an solchen Techniken.

Natürlich muss man Techniken hinterfragen und ich bin der letzte, der jeder Sau, die durch's Dorf getrieben wird, hinterher rennt. Ganz im Gegenteil. Meine Erfahrung ist, dass sich nur ganz selten mal etwas grundlegend Neues hinter den Begriffen verborgen hat, die als der neuste Schrei gehandelt wurden. Deshalb habe ich mir angewöhnt, die Dinge abzuwarten ... aber dummerweise zu lange. Um die Dinge beurteilen zu können, muss man sich ein Bild von Ihnen gemacht haben. Dazu muss man sie an irgendeinem Punkt mal ausprobieren und da muss ich jetzt auf einmal eine ganze Menge nachholen. Deshalb bin ich im Moment total orientierungslos und daher mein Tatendrang.

Aber ich schalte mal einen Gang runter ... 😉

Wie umzubauen?

Helft Ihr mir dabei, herauszuarbeiten, wie sich das unter den Bedingungen, aufbohren lässt?

Ich möchte Tools ausprobieren, die man heute verwendet, um die Produktivität zu steigern und neue Technologien einsetzen. Dabei geht es nicht darum, zu beurteilen, ob die Massnahmen bei dem Projektumfang wirklich die Produktivität steigern. Ich könnte auch einfach anfangen …

Aufgabe #1) Ich möchte meine CSS-Sektoren nach BEM-Muster umbenennen.

Aufgabe #2) Ich möchte in meinem Projekt LESS in SASS umschreiben.

Aufgabe #?) Ich möchte das Laden der eingebundenen javascripts optimieren.

Aufgabe #?) Ich möchte das von mir programmierte jQuery in ES 6 umschreiben.

Aufgabe #?) Ich möchte einen Taskrunner einsetzen.

... und das war nur das Frontend. Vielleicht beschäftige ich mich dann noch mit meinem Backend.

Hier hilft jeder, wenn man die richtigen Fragen stellt 😉

Eine konkrete Frage dazu habe ich im Moment noch nicht. Aber das kommt bestimmt.

einen schönen 2. Advend

heinetz

[heinetz]

Aufgabe #1) Ich möchte meine CSS-Sektoren nach BEM-Muster umbenennen.

Das lässt sich mit meinem Wordpress-Childtheme schonmal leider überhaupt nicht machen.

Oder habe ich etwas falsch verstanden?

gruss, heinetz

[marctrix]

Hej heinetz,

Aufgabe #1) Ich möchte meine CSS-Sektoren nach BEM-Muster umbenennen.

Das lässt sich mit meinem Wordpress-Childtheme schonmal leider überhaupt nicht machen.

Oder habe ich etwas falsch verstanden?

Das hast du ganz richtig verstanden! 😉

So was würde ich auch dann nicht empfehlen (selbst wenn ich BEM für sinnvoll halten würde, was ich nicht tue), wenn es möglich wäre. Du willst dir ja die Arbeit erleichtern und die Klassen in einem fertigen Layout umzuschreiben, macht in dieser 'Hinsicht keinen Sinn 😉

Marc

[heinetz]

Hallo Marc,

nachdem ich mir nun mal Gulp und Node für mein Testprojekt installiert habe um ein Gefühl dafür zu entwickeln, wozu das gut ist, habe ich mir ein anderes Projekt für mein Vorhaben vorgenommen. Es ist ein Yii-Projekt mit HTML5, jQuery und Bootstrap. Das Frontend habe ich und das PHP-Backend ein Freund von mir gebaut. Ich habe mich fürdas Projekt entschieden, weil da mehr "handmade" drin steckt. Das Frontend möchte ich nun neu entwickeln. Die Agentur, in der ich gerade ein Praktikum machen darf hat gerade ein neues Standard-Setup für die Frontend-Entwicklung vorgestellt, auf dessen Basis hier zukünftig Projekte entwickelt werden sollen. Da für mich die dabei verwendeten Technologien und Komponenten alle neu sind, werde ich das Setup nicht in Frage stellen, sondern als gegeben hinnehmen. In dem Prozess werde ich sicher irgendwann die ein oder andere Vorgabe in Frage stellen. Aber grundsätzlich betrachte ich das Setup erstmal als Vorgabe.

Ich würde mich freuen, wenn Ihr mich auf dem Weg begleitet.

Um Euch ein Bild zu geben …

Mein Projekt heisst Marketplaces. Das ist die Struktur:

• Das Verzeichnis 'web' ist DocumentRoot.
• Ich habe ein Verzeichnis frontend angelegt, in dem ich arbeiten will.

Die Vorgabe heisst Frontend. Das ist die Struktur:

• Entwickelt wird im Verzeichnis 'src'
• Die optimierten Files werden landen, so weit ich das verstanden habe, in 'public'.

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Ich könnte auch einfach anfangen …

Was ist dabei dein Ziel? Deine Seite für Nutzer zu verbessern?

Dann ist das Aufgabe 1:

Aufgabe #?) Ich möchte das Laden der eingebundenen javascripts optimieren.

Damit im Zusammenhang:

Aufgabe #?) Ich möchte das von mir programmierte jQuery in ES 6 umschreiben.

Alle anderen deiner selbst gestellten Aufgaben sind für Nutzer irrelevant. (Außer BEM-Klassen, die das Markup aufblähen und damit einen negativen Einfluss auf die Performanz haben.)

Aufgabe 2 wäre: Ich möchte das Laden der eingebundenen Bilder optimieren.

Aufgabe 3: Ich möchte das Laden der eingebundenen Webfonts optimieren.

Wobei die Reihenfolge u.U. auch variieren kann.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dann ist das Aufgabe 1: […]
Aufgabe 2 wäre: […]
Aufgabe 3: […]

Wobei ich von einer funktionierenden Website ausgegangen bin.

Funktionierend heißt: Funktioniert für alle Nutzer, egal ob sie die Inhalte sehen oder hören, egal ob großes oder kleines Display, egal ob sie Farben wahrnehmen können, egal ob sie per Maus, Tastatur, Touch oder sonstwie durch die Website navigieren, egal ob JavaScript ausgeführt oder geblockt wird …

Sollte das nicht der Fall sein, wäre das die Aufgabe 1: die Website funktionierend zu machen.

LLAP 🖖

[heinetz]

Hallo Gunnar,

nachdem sich BEM in meinem Projekt nicht machbar ist, habe ich mir als nächstes zur Aufgabe gemacht, das verwendete LESS in SASS umzuschreiben. Die Aufgabe macht nur deshalb Sinn, weil ich auf dem Wege SASS/SCSS kennen lernen will. Bei dem Anlass fällt mir ein, dass ich einen Taskrunner einsetzen möchte und frage mich, in wie weit ein Zusammenhang besteht, bzw. ob ich mich nun als erstes mit SASS oder Mit Gulp beschäftigen muss.

gruss, heinetz