Webworking
Web-Entwicklung mit HTML5, CSS & JavaScript
http://https://www.guido-muehlwitz.de
Wordfence – Vernünftige Sicherheit für WordPress
Sicherheit ist so ein Thema, das im WordPress Core grob vernachlässigt wird. Ohne entsprechende Plugins läuft da nichts. Dies betrifft sowohl Brute Force Attacken auf das Login, als auch Kommentar-Spam. Mit viel Fleiß könnte man sich zumindest manuell um den Spam kümmern, aber gegen Brute Force kann man nichts machen (wenn man es dann überhaupt mitbekommt). Akismet ist in der Regel das erste was ich nach der Installation lösche, danach habe ich in der Regel die Antispam Bee, Limit Login Attempts und WP Antivirus installiert. Allen diesen Lösungen ist gemeinsam, das sie erst im Nachhinein eine Entscheidung treffen. Also zu einem Zeitpunkt an dem WordPress einen entsprechenden Hook zum Eingreifen anbietet. Seit geraumer Zeit setze ich aus diesem Grund Wordfence ein, das sich grundlegend von allen bekannten Sicherheitslösungen unterscheidet, indem es eine Firewall VOR WordPress setzt. Hierzu muss ein Skript entweder in die .htaccess oder in die index.php von WordPress eingebunden werden. In der Regel geht das automatisch, je nach Hoster muss man allerdings auch manuell eingreifen. Was macht Wordfence jetzt so besonders? Es telefoniert nachhause! Was sich eigentlich schlimm anhört (und dank Akismet eh jeder macht) ist in diesem Fall höchst sinnvoll da alle WordFence untereinander vernetzt sind. Passiert irgendwo was Dummes block Wordfence, obwohl der Angriff ganz woanders stattgefunden hat. IP Blacklist aus dem Threat Defense Feed Dummerweise funktioniert WordFence in der Pro-Version für 99$ im Jahr bzgl. Kommentar-Spam erst so richtig gut. In der Regel installiere ich deswegen die Antspam Bee weiterhin parallel. Limit Login Attempts und Antivirus lasse ich dafür weg. Und wer nicht glaubt das sich in Sachen WordPress und Brute Force wirklich was bewegt, hier eine kleine Grafik von meinem Dashbaord: Wordfence Attacks Blocked Das Plugin hat ziemlich viele Einstellungen, in der Regel lasse ich alles auf Default stehen. Ihr könnt viele Werte ändern, und wenn ihr euch unsicher seit lasst einfach die Finger davon. Man kann auch Sicherheitsplugins so konfigurieren, das sie nicht mehr sicher sind ;) Wenn ihr überhaupt noch nichts in dieser Richtung am Start habe, gebt Gas!
** LINK **
Abhängigkeiten in Formularen mit dependsOn
Es kristallisiert sich immer mehr heraus das man aufgrund der UX in komplexen Formularen Abhängigkeiten einführt. Ein einfaches (wenn auch durchaus sehr altes) Beispiel ist der Radiobutton „Andere Lieferadresse eingeben“, falls sich diese von der Rechnungsadresse unterscheidet. Bisher habe ich diesbzgl. Aktionen immer manuell programmiert, man könnte nun aber auch dependsOn dafür nehmen. Eigentlich blende ich inzwischen regelmäßig Teilbereiche von Formularen mit Radiobuttons ein oder aus. Das gleiche gilt aber auch für das Read-Only-Attribut oder das automatische Befüllen für Inputs in Abhängigkeit zu anderen Feldern. Ein recht einfaches Code-Beispiel in dependsOn sähe zum Beispiel wie folgt aus. Das Markup: Check me Und das zugehörige JavaScript: $('#basicTest .subject').dependsOn({ '#basicTest input[type="checkbox"]': { checked: true } }); Es lassen sich Abhängigkeiten auf alle Input-Elemente anwenden. So zum Beispiel auch auf Multiselects die Abhängigkeiten je nach Auswahl auslösen können. Das Projekt findet ihr auf GitHub, und es besitzt auch eine eigene Homepage.
** LINK **
CSS Grids lernen mit Grid Garden
Es ist ja noch gar nicht so lange her das ich über Flexbox Froggy berichtet habe. Mit dem Spiel kann man einfach und schnell den Umgang mit Flexboxen erlernen. Es gibt nun ein recht ähnliches Spiel, das sich aber mit CSS Grids beschäftigt. Eine kurze Einführung in das Thema CSS Grid Layout findet ihr hier. Das Spiel fängt relativ harmlos an, gegen Ende wird es aber durchaus komplex. Das Spiel an sich findet ihr hier. Der Quelltext des Spiels ist auf GitHub zu finden. Ich finde diese Möglichkeit den Umgang mit dem neuen Grid Layout zu erlernen super! Man sieht direkt was passiert. Wenn man alle Level geschafft hat weiß man auch ziemlich genau was geht, und was nicht.
** LINK **
Leaflet – Google Maps in ganz einfach
Ich hab ja schon des öfteren über Google Maps berichtet,  aber über die Jahre hinweg sind nicht nur die Möglichkeiten komplexer geworden, sondern auch die Anforderungen der Kunden. Faktisch existiert kein Projekt mehr, in dem ein Kunde keine eigenen Linien in eine Karte eingezeichnet haben will. Dummerweise haben die bekannten jQuery-Bibliotheken für Maps diese Komplexität locker an den Entwickler weiter gegeben. Es ist also nicht mehr ganz so einfach etwas in Maps zu machen. Und darüber hinaus bin ich eigentlich auch der Meinung man sollte Maps direkt verwenden, und nicht noch eine Bibliothek dazwischen setzen. Aber dann kam leaflet.js (leaflet.js auf GitHub) – eine recht moderne und einfache Bibliothek für Google Maps. Das wirklich interessante ist, das zusammen mit Leaflet.js direkt Unterstützung für Mobile inkl. der Geolocation API kommt. Darüber hinaus besitzt Leaflet.js ein eigenes Plugin-System und kann problemlos erweitert werden. Individuelle Icons sind immer wieder gefragt, und das Tutorial dazu ist weder komplex noch schwer. Ich würde sogar so weit gehen das man es intuitiv verstehen kann – oder? var greenIcon = L.icon({ iconUrl: 'leaf-green.png', shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64], // size of the shadow iconAnchor: [22, 94], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor }); Das ganze geht übrigens auch über Klassen anstatt Variablen. Wenn ihr euch noch mit Google Maps herumschlagt werft einmal einen Blick auf die Bibliothek, ich denke in Sachen Google Maps ist man damit ganz weit vorne.
** LINK **
Argento – DAS Magento Template?
Früher war ja alles besser, wahrscheinlich sogar Argento. Da hat man sein Template selbst gebaut, und es gab sogar noch so etwas wie ein individuelles Design. Heutzutage kauft man ein fertiges Template, ändert im CSS ein bisschen die Farben und rotzt die Seite raus. Ein Umstand der inzwischen auch in Magento Einzug gehalten hat. WordPress ist da natürlich einen Schritt weiter, zwischen Anpassen der Farben und Seite raus rotzen liegt da noch die Installation und Konfiguration von drölfzig Plugins, die keiner braucht oder will. Typo3 hingegen kennt so was nicht, da braucht man nur ein Grid. Ohne Grid macht ihr ja auch nichts mehr. Was soll man also von einem Magento Template halten das als Hauptverkaufsargument anmerkt, das es mit kommerziellen Plugins für 900$ ausgeliefert wird, aber man nur 125$ zahlt. Zugegebenermaßen baut man ja heutzutage nur noch Amazon nach (ein Kunde sagte mir mal: was will man wohl auch besser machen). Und zugegebenermaßen: Argento kommt dem ziemlich nahe und ist sehr fein responsive. ABER: Was will man mit einem Template das Plugins als Abhängigkeiten braucht und das so komplex ist, das eine eventuelle Zeitersparnis verloren geht? Und das ist nicht nur ein Problem dieses Templates, sondern im Moment bei fast jedem System zu beobachten. Geht doch zu Wix wenn ihr so etwas haben wollt! Der Shop von 1&1 ist ja auch recht bunt! Ein Template ist ein Template, ein Plugin ist ein Plugin. Ein Template das Plugins zwingend braucht um zu funktionieren hat sein Ziel verfehlt! Natürlich kann man ein Template auf Plugins vorbereiten, natürlich kann ich die Plugins auch verwenden, aber vielleicht will ich ja was ganz anderes verwenden (oder die gesamte Funktionalität gar nicht). Ist also ein Template, das mit Plugins daher kommt, und bei dem es sehr aufwendig sein wird Anpassungen zu machen wirklich das Beste. Und ist es das was man will? Argento behauptet dies zumindest. Und ich sage: NEIN! Argento IST wahrscheinlich das Beste Plugin wenn man nichts anpassen möchte, sieht die Seite halt fast so aus wie alle anderen. Kann durchaus Sinn machen im Bereich E-Commerce, wirft aber die Frage auf: Wieso sieht Zalando nicht aus wie Amazon?
** LINK **
Responsive Emails mit MJML für alle Clients
Responsive Emails für zum Beispiel Newsletter sind eine schlimme Sache. Man könnte sogar sagen: HTML in E-Mails ist generell eine noch schlimmere Sache. In der Regel hat man eigentlich schon Probleme genug eine E-Mail so rauszusenden, das sie in jedem Client funktioniert. Durch den Segen des Smartphones müssen diese aber nun auch Responsive sein. Vom Prinzip her ist MJML eine eigene Markup-Sprache bzw. ein Preprocessor für HTML. Auf der Kommandozeile können MJML-Dokumente nach HTML compiliert und dann weiter benutzt werden. Installiert wird MJML via Node und kann anschließend auf der Kommandozeile via mjml aufgerufen werden. Am Ende des Tages eine Riesen-Zeitersparnis um eben mal schnell einen Newsletter oder eine Aussendung für einen Newsletter zu erstellen. Man kann hier live mit dem System etwas herumspielen um es zu testen. Zur Homepage des Projektes geht es hier entlang.
** LINK **
Simple Regex Language für PHP
Simple Regex Language ist eine sehr interessante Bibliothek für PHP. Regex sind eine Sache die zum einen durchaus komplex werden können, zum anderen auch durchaus schwer zu Erlernen / Verstehen sind. Ich weiß ehrlich gesagt nicht wie viele Stunden ich schon damit zugebracht habe komplexe Regex für URL-Rewrites von Agenturen zu erstellen. Ich hatte seinerzeit sogar ein Tutorial für Regex erstellt. SRL ist eine interessante Library für PHP, die versucht Regular Expressions in eine lesbare Form zu bringen. Nicht das es so etwas nicht schon gäbe,  aber das Ergebnis von SLR ist dennoch recht interessant. So erstellt es aus: /^(?:[0-9]|[a-z]|[\._%\+-])+(?:@)(?:[0-9]|[a-z]|[\.-])+(?:\.)[a-z]{2,}$/i in der SRL Syntax folgende Anweisung: begin with any of (digit, letter, one of "._%+-") once or more, literally "@", any of (digit, letter, one of ".-") once or more, literally ".", letter at least 2 times, must end, case insensitive Das Konzept der Sprache ist durchaus etwas weiter gefasst. Die Bibliothek existiert nämlich nicht nur für PHP, sondern für fast jede größere Programmiersprache inklusive JavaScript. Direkt in PHP sieht das Ganze dann so aus: $query = SRL::startsWith() ->anyOf(function (Builder $query) { $query>digit() ->letter() ->oneOf('._%+-'); })->onceOrMore() ->literally('@') ->anyOf(function (Builder $query) { $query->digit() ->letter() ->oneOf('.-'); })->onceOrMore() ->literally('.') ->letter()->atLeast(2) ->mustEnd()->caseInsensitive(); Ganz interessant wie ich finde, man sollte sich allerdings auch mit der Geschwindigkeit innerhalb der einzelnen Sprachen beschäftigen. Regex an sich sind in der Regel schon langsam und eine eigene Sprache davor zu setzen wird es nicht besser machen. Dennoch kann die Library für viele eine große Hilfe sein. Zur allgemeinen Homepage der Simple Regex Language geht es hier entlang. Die PHP-Umsetzung findet sich hier. Und die Umsetzung für weiter Sprachen kann hier gefunden werden.
** LINK **
Chatbots in PHP mit BotMan
Die größte Sau die in 2017 bisher durchs Dorf getrieben wird, ist der Chatbot. Ein zugegeben sehr komische Entwicklung denn die Bots gibt es schon ewig und insbesondere in IRC. Genutzt werden sie nicht selten als Kaufberater in Onlineshops oder bei komplexen Seiten als eine Art erweiterte Suche. Natürlich durchaus Dinge die man durch ein geschicktes UI auch lösen könnte. Allerdings gibt es ja da noch den Faktor Mensch, der sich besser fühlt, wenn er kommunizieren kann. Nicht auszuschließen das ein gewisses Klientel denkt, sie redet mit einem realen Menschen. Chatbots sind auch als eine Art Anrufbeantworter denkbar. Vor allem aber für die derzeit sehr beliebte Methode fatale Fehler einer Anwendung mal eben in einen Channel bei Slack zu hauen, anstatt etwas sinnvolles damit anzustellen. Es ist also mehr oder weniger nur eine Frage der Zeit, bis dieser Hype in einer realen Anfrage endet. Also ist nun der richtige Moment sich mal anzuschauen, wie man das umsetzen könnte.  Der BotMan funktioniert zumindest, und ist sehr einfach zu programmieren. Man kann Fragen vordefinieren, und die entsprechenden Antworten senden. Neben ein paar anderen Netzen funktioniert das in Slack, und natürlich in Facebook. Twitter muss draußen bleiben. Dummerweise muss die eigene Homepage auch draussen bleiben, denn scheinbar hat keiner dran gedacht das ich einen Chatbot am liebsten da einbinden würde. Prinzipiell sieht das Ganze recht einfach aus: $botman->hears('I want cross-platform bots with PHP!', function (BotMan $bot) { $bot->reply('Look no further!'); }); Letztens Endes ist das aber Quatsch, denn eigentlich erwarte ich an der Stelle eine KI. Das ist jetzt nicht so schwer, weil quelloffen und insbesondere schon 1966 verfügbar. Mit der guten Eliza habe ich mich schon vor 20 Jahren rumgeschlagen. Führt also somit zu dem, was BotMan Conversations nennt. Letzten Endes ist das eine Art Entscheidungsbaum, also wieder keine KI. Ich denke für einfache Sachen durchaus brauchbar, weil schnell umgesetzt, aber wenn es komplex wird wohl eher nichts. Empfehlungen für weiter Bots in den Kommentaren wäre ganz ok, vielleicht habt ihr ja noch einen Tipp?
** LINK **
Unsichtbares reCaptcha für WordPress
Ich für meinen Teil verwende schon seit Ewigkeiten kein Captcha mehr, zum einen weil ich es affig finde, zum anderen weil ich durchaus Probleme hatte die tollen Captchas da draußen im Internet überhaupt zu erkennen / zu verwenden. Ich arbeite an der Stelle immer mit verdecktem JavaScript. Was einigermaßen funktioniert ist reCaptcha, was durchaus auch affig ist (welche drei der sechs Bilder haben wohl einen grünen Postkasten). Aber von den existierenden Lösungen her ist es durchaus die angenehmste, weil lösbar. Was man natürlich auch machen kann ist das unsichtbare reCaptcha von Google zu verwenden (Stichwort: I’m not a Robot!). Und genau dafür gibt es jetzt ein WordPress Plugin. Dieses Plugin kann direkt im Theme manuell verwendet werden, es integriert sich allerdings auch in WooCommerce und vor allem in Contact Form 7. Letzteres ist in der Regel meine Wahl in Sachen Formulare in WordPress, allerdings mit einem anderen Sicherheitsplugin. Das Contact Form 7 Honeypot Plugin macht eigentlich genau was ich will: es ist wirklich unsichtbar und Fenster wie bei reCaptcha in der Art von „I’m not a Robot“ kommen erst gar nicht. Ferner weiß man ja nicht wirklich was Google durch einbinden des reCaptcha alles so erfährt, deshalb vielleicht dann doch den Honeypot. Letzten Endes ist es Geschmackssache ob man reCaptcha, den Honeypot oder was eigenes nimmt, aber bitte nehmt keine bunten Bilder! ;)
** LINK **
Font Awesome in den Advanced Custom Fields von WordPress
Gab es ein Leben vor Font Awesome? Es gibt kaum eine Seite die den Webfont nicht benutzt. Genau sowenig gibt es noch eine WordPress-Seite die ohne die Advanced Custom Fields klar kommt. Fast jedes dieser wahnsinnig überfüllten käuflich zu erwerbenden Themes setzt auf das Plugin. Zumindest die Advanced Custom Fields (oder auch ACF) sind eine feine Sache und in der Pro-Version in vielen meiner WordPress-Installation zu finden. Was bisher allerdings immer ein mittelprächtiges Drama war, war das Zusammenspiel mit Font Awesome. Es gab durchaus Gelegenheiten wo ein Kunde selber das Icon aussuchen wollte (zum Beispiel für sich ändernde Buttons), aber ich (und später auch der Kunde) vor einem Problem stand. Es ist immer so geendet, das der Kunde den passenden Klassennamen des Icons in ein Textfeld setzen musste. Ergo musste er diesen erst einmal heraus bekommen und was viel schlimmer war: in der Regel hat er es nicht geschafft den Klassennamen korrekt zu übernehmen. Ein relativ neues Plugin für ACF schafft da nun Abhilfe. Es fügt den Advanced Custom Fields den neuen Feld-Typen „Font Awesome“ hinzu, in dem mittels eines Select2-Auswahlfeldes zwischen den verschiedenen Icons gewählt werden kann. Dadurch das Select2 verwendet wird, funktioniert natürlich auch eine Suche über alle Icons hinweg. Ferner lässt sich für das Feld ein Default Icon setzen. Auch das eigentliche Einbinden von Font Awesome (im Footer) kann das Plugin übernehmen.
** LINK **

Diese Texte sind Eigentum der oben genannten Autoren und Webseiten. Dieses Script ist lediglich ein Tool zum Anzeigen von RSS-Feeds, wobei die Daten in Echtzeit von der entsprechenden XML/RSS-Seite ausgelesen und angezeigt wird. Rss-Suche.eu Übernimmt weder Garantie für die Richtigkeit der Texte und Informationen, noch stehen diese Texte in irgendeinem Bezug zu RSS-Suche. Sie unterliegen den Rechten der jeweiligen Autoren.