php – web-entwickler.me

Eine einzelne Datenbank pro User? Ist multi tenancy ein guter Weg?

Eine eigene Datenbank pro User zu anzulegen klingt nach einer guten Idee.

Dadurch ergeben sich keine unnötigen Wartezeiten bei Abfragen, Indices wachsen nicht in das Unendliche an und natürlich sind die Daten von anderen Benutzern abgegrenzt.

Es klingt wirklich verlockend, in einer Datenbank nur die Daten eines Benutzers zu haben.

Eine Umsetzung ist ja auch nicht so schwer.

Die Basis-Software läuft mit einer Datenbank und wenn man auf User-Daten zugreifen will, dann ändert man einfach die Einstellungen für die Datenbank-Verbindung.

Solche Umsetzungen gibt es genug in der freien Wildbahn.

WordPress Multisite-Umgebungen funktionieren so ähnlich.
In einer Datenbank gibt es eigene Tabellen pro Multisite.

Aber ist das ganze eine gute Idee?

Manche Experten sagen: NEIN!

Weil der Aufwand für das Migrieren viel zu groß ist:

Bekannte Services selbst hosten

Wow! Jemand hat sich die Mühe angetan, um diese Liste zu erstellen:

https://github.com/awesome-selfhosted/awesome-selfhosted

Was genau ist an der Liste so toll?

Das ist eine Auflistung an Diensten, die du selbst hosten kannst.

Deine eigenen Google Maps Alternative, deine eigenen Online-Buchhaltung oder Rechnungssoftware, dein eigenens Youtube.

Das sind Beispiele aber sollen zeigen, was gemeint ist und wo die Reise hingeht.

Es gibt für so ziemlich jeden erdenklichen Anwendungsfall eine open source Software, die man sich gratis herunterladen kann.

Herunterladen und auf eigenem Server installieren und betreiben.

Ich finde diese Auflistung umwerfend und inspirieren. Da ist viel Interessantes dabei!

Mit alten Internet Explorer Versionen testen? Virtuelle Maschinen von Microsoft helfen!

Der Internet Explorer ist tot!

Schon seit längerer Zeit schwindet der Marktanteil vom Internet Explorer.

Der richtige Schrecken begann 2007, als die Version 7 veröffentlicht wurde.

Der IE 7 hielt sich verdammt lange, zu lange. Aber im Corporate-Umfeld war der dennoch noch ein Jahrzehnt später anzutreffen, weil die Uhren halt langsam ticken.

Richtig weh tu auch der Internet Explorer 11 aus dem Jahr 2013. Wir Webentwickler mussten den bis vor nicht allzu langer Zeit immer noch unterstützen.

Für nicht eingeweihte: Der Internet Explorer war nie standardkonform. Man musste immer Hacks bauen, damit die eigenen (modernen) Lösungen auch am IE funktionierten. Bad!

Noch schlimmer: Entwickler arbeiten auf Linux und Mac-Geräten.

Wie komm ich da an einen Internet Explorer?

Hoch lebe der Internet-Explorer

Microsoft selbst schafft hier Abhilfe!

MS bietet virtuelle Maschinen (VM) zum Testen an.

Das sind Betriebssystem-Abbilder, die man, wie ein stinknormales Programm, starten kann.

Das bekannteste Programm um eine VM zu starten ist VirtualBox.

Ein super Programm, dass auf Linux, Mac und Windows läuft.

Auch andere Virtualisierungslösungen werden unterstützt:

Passwort = Passw0rd

Weil das oft übersehen wird, es ist einfach und es steht auf der Website selbst:
„The password to your VM is „Passw0rd!““

Das Passwort lautet also:
Passw0rd

Links

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Interessantes aus der Webentwickler-Welt im Jänner

Schöne Checkbox-Toggle Lösung

https://codepen.io/t_afif/pen/wvrmBNg

Object-Fit Fallback in Javascript

Object-Fit wird oft eingesetzt, um ein Bild in ein Element einzupassen.

Man macht das auch gerne mit background-image.

Das Ergebnis sind eingepasste Bilder, die ein passendes Seitenverhältnis haben und dadurch oben oder unten etwas abgeschnitten sind.

Leider wird object-fit nicht im Internet-Explorer unterstützt:

Jaja, der IE ist tot und wer interessiert sich noch dafür?

In manchen Branchen wie Versicherungen und Banken, wo IT-Umwälzungen aber dauern, trifft man noch öfter auf den IE.

Daher braucht es für object-fit einen Fallback, und hier gibt es eine schöne JS-Lösung und hier in jQuery.

Natürlich lässt sich das aber auch unfancy mit gutem, alten CSS lösen!

Umsortierung der Elemente bei display:table

Flexbox ist der neue Meister im Anordnen von Elementen.

Ich persönlich greife aber gerne zu display.table in manchen Fällen, auch wegen der Kompatibilität zu älteren Browsern:

Möchte ich, wie zb in dem Design hier:

Den blauen Block auf mobilen Geräten über dem weißen haben, kann ich das auch bei display:table lösen!

Wie? display: table-footer-group ist dein Freund und wird hier beschrieben: https://www.mediaevent.de/css/display-table.html

Element quadratisch machen

Das hört sich auf den ersten Blick ja gar nicht so schwer an, oder?

Einfach Höhe und Breite mit den gleichen Werten setzen.

Aber wie macht man das responsive?

Hier kommt der alte padding-bottom Trick zur Anwendung!

Wenn padding-bottom den gleichen prozentuellen Wert wie die Breite hat, dann wird die Höhe exakt an die Breite angepasst!

Also

height: 0;
padding-bottom: 50%;
width: 50%;

Apple TV UI 3D Bildeffekt nachmachen – Sag hallo zu atropos.js

Schöner 3D Bildeffekte mit atropos.js

Es ist gar nicht so einfach, diesen Effekt zu beschreiben, daher gibt es gleich ein GIF. Nur so viel: Auf Facebook sieht man oft diese Bewegtbilder, wo man mit der Maus hin und herfahren kann und das Bild bewegt sich mit.

Beim AppleTV gibt es für die Vorschaubilder auch so einen Effekt. Diesen hier:

Der Autor beschreibt atropos.js als „a stunning touch-friendly 3D parallax hover effect.“

Also einen atemberaubenden 3D-Parallax-Hover Effekt, der auch auf Touchscreens funktioniert.

Also das GIF oben erklärt es eindeutiger.

Anyway, ein sehr interessanter Effekt, den ich über
Timo Ernst gefunden habe. Er hat auch ein schönes Video dazu gemacht. Die Demodaten finden sich hier https://github.com/valnub/atropos-demo

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:

http://ssilence.github.io/php-imap-client/

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:

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

Inline SVGs as placeholders + lazy load image = awesomeness. See @mikaelainalem's codepen on https://t.co/1FspskMMe8 pic.twitter.com/8puWqrXj9b
— José M. Pérez (@jmperezperez) October 17, 2017

SVG-Platzhalterbilder

https://github.com/technopagan/sqip

SVG als Platzhalter – again

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

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/

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/

pickdate.js schaut sehr brauchbar aus!

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