JS Bibliotheken – Ein Beispiel dafür, dass man das Rad nicht immer neu erfinden muss.

Auf dev.to gibt es einen interessanten Artikel für eine JavaScript-Bibliothek, die den Umgang mit Listen vereinfachen sollte:

https://dev.to/lars124/dealing-with-lists-in-javascript—listingjs-664

Die Kommentarsektion hat mittlerweile eh einige Kritikpunkte vorgebracht und auch wir haben dazu eine kritische Stimme beizusteuern.

Der Artikel ist ein gutes Beispiel dafür, dass man nicht alles neu machen muss. Dass man gerne andere Bibliotheken oder Lösungen verwenden kann und nicht alles von Grund auf selbst neu bauen muss.

Ich stelle mir listing.js für die meisten Usecases deutlich langsamer als
Lodash oder Underscore vor.

Natürlich hat listing.js auch ein bisserl seine Daseinsberechtigung, wenn ich keine der Anderen Bibliotheken verwenden:

Wenn man als Input sowieso schon einen String bekommt  (zb aus einem CSV oder von einer API oder vom Browser), und man will nur ein oder zwei Funktionen drauf anwenden und wieder einen String als Ergebnis bekommen,  dann könnte man das mit listing.js lösen.

Wenn man dagegen große Datenmengen sehr komplex auswerten will, dann wär lazy.js am Besten!

Wenn man nicht genau weiß, welche Funktionen man noch so brauchen könnte, ist Lodash sicher eine gute Wahl!

email in eigenen Projekten verwenden – Klassen und Bibliotheken für das Auslesen und Verschicken von E-Mails

E-Mails sind tot!

Definitiv.

Alle steigen um auf Slack, Mattermost, den Facebook-Messenger oder auf WhatsApp.

Seit es E-Mails gibt, sagt man ihnen ein baldiges Versterben nach.

Dennoch halten sie wacker die Fahne hoch. Mails dürften nach wie vor das meistverbreitete Kommunikationsmittel im Web sein.

Wie bekomm ich nun Mails in meine App? Easy! Denn dafür gibts mehrere Möglichkeiten/Klassen/Bibliotheken:

php-imap-client

Diese php-Bibliothek ist vor geraumer Zeit umgebaut worden und setzt jetzt auf moderneren PHP-Code.

Die Bibliothek ist eine nette Abstrahierung der PHP eigenen IMAP Funktionen.

php-imap-client erfüllt alle Wünsche wenn’s darum geht, mit IMAP Mailkonten umzugehen.

Ich kann dafür also eine Empfehlung aussprechen!

php-imap-client – https://github.com/SSilence/php-imap-client/

Die Doku ist auch aufgemotzt worden und recht umfangreich und verständlich:

Afterlogic Webmail Light API

Dieser PHP-Code ist nicht direkt dafür gedacht, als Code im eigenen Projekt integriert zu werden, kann aber so verwendet werden.

Eigentlich ist das ein Webmail-Skript.

Der Code lässt es aber zu, dass man Webmail Light auch einfach so als Klasse/Bibliothek im eigenen Code verwendet – vor allem, weil die Doku dazu sehr gut ist:

Super Doku für Afterlogic Webmail Lite

Als Beispiel, hier der Code für das Auslesen der Anzahl aller ungelesenen Mails:

https://afterlogic.com/docs/webmail-lite/integration-and-development/getting-number-of-all-or-unread-mails

Weitere Interessante

 

Lazy Loading + Bild Platzhalter + Bilder ersetzen, bis das Original geladen wurde

Lazy Loading ist eine super Sache, weil eine Webseite dadurch flotter aufgebaut wird.

Ohne Bilder schauen Seiten aber nicht gerade schön aus, daher braucht es einen Platzhalter, bis das Originalbild geladen wurde.

Dafür gibt es einige Bibliotheken, Plugins und Funktionen.

Ein interessanter Ansatz wäre es, das Bild durch ein SVG zu ersetzen. Also einfach durch ein paar Textnodes, Vektorgrafiken.

Ein Gedankenexperiment findet sich hier:

https://twitter.com/jmperezperez/status/920179771748900865

SVG-Platzhalterbilder

SVG als Platzhalter – again

https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

Datepicker – JS-Bibliotheken für die Datumsauswahl

Datepicker sind für die Usability wichtig. Punkt.

Datpicker erleichtern die Auswahl von Datumseinträgen enorm und helfen, die Dateneingabe angenehm zu machen.

Gerade für Webshops und Buchungsplattformen ist Usability wichtig.

Wenn der Kunde beim Eingeben der Daten zu viel Frust verspürt, brechen Umsätze weg.

Usability kostet und bringt also Geld!

Daher hier eine Übersicht von Datepickern: (in Aufbau)

jQuery Datepicker – das Original

* https://jqueryui.com/datepicker/

https://jqueryui.com/datepicker/

Womit alles begann. Könnte man betiteln. Der jQuery-Datepicker ist halt das Urgestein, mit dem jeder schon irgendwann mal in Kontakt kam.

Daher brauch ich darüber nicht viel schreiben. Den jQuery-Datepicker kennt jeder!

pickdate.js

* http://amsul.ca/pickadate.js/

http://amsul.ca/pickadate.js/

pickdate.js schaut sehr brauchbar aus!

Touchfreundlich, einfache Eingabe vom heutigen Tag, Leeren der Eingabe und Auswahl sind ohne Stress möglich.

Drag and Drop JavaScript Bibliotheken Sammlung – Ziehen, verschieben und fallenlassen, Daten hochladen per Drag’n’Drop uvm

Ich glaube, das ist eine der schwierigsten und kompliziertesten und uninteressantesten Überschriften für einen Artikel.

Dabei ist das Thema Drag’n’Drop gar nicht so unwichtig.

Viele Webapps hängen von leichter Bedienung ab, was Sortierung oder Einordnung von „Elementen“ betrifft.

Eine gute Drag’n’Drop-Library hilft da zb schon ungemein, es gibt aber auch native Lösungen.

 

 

Also hier mal Infos dazu

Folien zum Thema

Native Lösungen ohne Bibliotheken

Die Zeit bleibt nicht stehen, daher werden viele Dinge, die früher durch JavaScript-Skripte gelöst wurden, direkt als native Funktion in den Browser integriert.

Es gibt daher Anweisungen für drag-Events, Notierung für draggable = true, ondragover, ondrop, dropzone usw.

Man kann sich also seine Lösung ohne andere Bibliotheken zusammenbauen – die Frage ist oft nur: Warum? Das Rad neu zu erfinden ist jetzt nicht gerade erstrebenswert. Aber wer’s will, bitteschön! Hier ein paar Links dazu:

Dragon Drop – einzige tastaturbedienbare Lösung

Draggable von Shopify

  • https://shopify.github.io/draggable/
  • Responsive, touchfreundlich, modern
  • Die Demo schaut gut aus, hat nette Toneffekte und könnte für GameDevs interessant sein. Außerdem steht dahinter eine potente Firma, die Interesse an einer Weiterentwicklung hat.
  • Draggable ist relativ neu und wurde in letzter Zeit oft erwähnt und geteilt.

 

Dragula

Diese JS-Bibliothek gibt es schon länger und ist bei uns daher auch schon länger am Radar

Draggabilly

jquery.shapeshift

  • http://mcpants.github.io/jquery.shapeshift/
  • Ähnlich wie jQuery-Masonry aber mit Drag and Drop.

Hootsuite Grid/Gridlist

Goold old jQuery Draggable, Sortable und Konsorten

Natürlich darf hier jQuery in der Auflistung nicht fehlen. Einer der Kernkompetenzen von jQuery war Drag’n’Drop. Gerade jQuery hat das Web einfacher und bedienbarer gemacht.

URL-Striptease – Was lässt sich alles mit einer URL herausfinden

Der Artikel ist ein Sammelbecken für alle Research-Webtools.

Gelistet werden nur solche Dienste, die man mit einer Url in einer URL aufrufen kann.

Damit kann ich mit wenigen Klicks komplette Seiten und Dienste identifizieren, ohne großen Aufwand betreiben zu müssen:

Domain, Whois, DNS o.ä.

Sicherheit, DDOS, Blacklists

Servertechnologien, CMS, Tracking, Betriebssystem, Hoster

Performance / Develop-Fehler

Mehrere IPs bei vHosts und Plesk verwenden – zusätzliche IPs beim Hosting

Manchmal mag man mehrere Webseiten auf einem vHost/Host ablegen, aber für jede Seite mit einer eigenen IP versehen.

Geht das? Ja, geht!

Wie geht das?

Mehrere IPs bei normalen vHosts (Apache)

Einem eigenen Apache ist es einfach beizubringen:

apache photo
Ein Apache 😀

Einfach statt

<VirtualHost *:80>

ein

<VirtualHost 1.2.3.4:80>

schreiben und gut ist’s! Wobei 1.2.3.4 bitte die IP-Adresse ist, ok?

 

Mehrere IPs bei Plesk

Plesk bietet auch einfach die Möglichkeit, eine IP einer Domain zuzuweisen.

Damit kann man mit einer Plesk-Instanz mehrere Domains und Webseiten mit unterschiedlichen IPs betreiben.

Unter deinpleskurl/admin/ip-address/list (= Menü Tools & Einstellungen -> IP Adressen) kann man die neue IP hinzufügen:

Die neue IP-Adresse kann man dann auswählen, wenn man eine neue Domain hinzufügt:

 

 

WhatsApp API? WhatsApp per Code ansprechen. Ein paar Lösungsansätze mit WA-Web und Selenium

tl;dr

Selenium Docker (oder Vagrant) + WhatsApp Web + Selenium + Python Skripte bringen uns zum Ziel!

Lesen und schreiben von Nachrichten an einzelne und in Gruppen funktioniert!

Mit Headless-Chrome und Puppeteer (node.js) kommt man auch zum Ziel!

Links

WhatsApp Web + Selenium (+ Python)

Der wahrscheinlich beste Weg um mit WhatsApp per Code zu arbeiten dürfte Selenium sein. Also die Weboberfläche von WA im Browser per JavaScript ansteuern.

WhatsApp-Web

WhatsApp Web Bot

https://github.com/nosahama/whatsapp-web-bot
Exkurs: Selenium Gschichtln

Diverse Bibliotheken

yowsup – Funktioniert (bald) nicht mehr

Alte, nicht mehr funktoinierende Chat-API:

  • https://github.com/mgp25/Chat-API

WordPress Code Highlighting Plugins

Code ansehnlich darzustellen gehört für einen WebDev-Blog sicher automatisch dazu.

Welches Plugin könnte man da verwenden? Hier ein paar Vorschläge und Meinungen zu Plugins, die getestet wurden:

Wir  haben hier nur Plugins getestet, die auf GeSHi basieren. Warum?

Mit GeSHi wird das Highlighten des Codes per PHP erledigt.

Vorteil:

  • Dadurch funktioniert das Highlighten immer und überall, auch dort wo JavaScript ausgeschalten ist.
  • Code schaut in jedem Browser gleich aus
  • Performance auf mobilen Geräten ist besser, weil das Smartphone nicht fürs Darstellen des Highlightings zuständig ist

CodeColorer – AKTUELL

WP-Syntax

  • https://wordpress.org/plugins/wp-syntax/
  • Hat bei unseren Tests nicht funktioniert!
  • Probleme:
    • Absolutes Ausschlusskriterium: Plugin funktioniert nicht im visuellen Editor!
    • Kein Button zum Einfügen der Codeteile
    • Man muss selbst pre-Tags eingeben

 

Ungetestete

Code Snippet

 

Developer Formatter

Links

Newsletterversand

Newsletter sind nach wie vor ein wichtiges Tool um Kunden, Seitenbesucher oder Interessenten zu erreichen.

Was man dabei nicht machen sollte:

Mails von einem shared Host oder von einem stinknormalen Webhost zu verschicken.

Dadurch werden Mails oft als SPAM beim Empfänger markiert oder rausgefiltert, man überlastet den eigenen Server und handelt sich generell Probleme mit dem eigenen Standing ein.

Daher der Rat:

Verwendet Newsletter-Versender:

 

newsletter2Go

Deutscher Anbieter mit deutschen Servern. Anbieter ist auf die DSGVO vorbereitet und muss als deutscher Anbieter stark auf deutsches Recht eingehen.

cleverreach

Sehr großer deutscher Anbieter, der gefühlt Mailchimp im deutschsprachigen Raum um nix nachsteht.

Sendy – Newsletterversand selbst auf AWS hosten

Mit Sendy kann man Newsletterversand selbst auf einer AWS Instanz hosten und verschickt dadurch Mails nicht vom eigenen Server.

Datenschutzrechtlich eventuell auch problematisch, da auf Amazon-Servern.

Um die DSVGO-Problematik muss man sich auch selbst kümmern.

Mailchimp

Der Gorilla und Platzhirsch unter den Versendern. Amerikanisch, zuverlässig und datenschutzrechtlich natürlich problematisch.