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

Colorbox – eine jQuery Lightbox

Colorbox ist eine oft empfohlene und umfangreiche Lightbox.

Screenshot der Seite zu Colorbox
Screenshot der Seite zu Colorbox

Die Library ist nur 10KB groß, wenn man die Daten komprimiert sogar nur 5KB.

Beispiele findet man hier: https://www.jacklmoore.com/colorbox/example1/

Hooks und Callbacks

Einer der wichtigsten Dinge in der Webentwicklung bei solchen Librarys sind Hooks und Callbacks.

Weil Lightboxen oft nicht nur zum stupiden Anzeigen von Bildern und Inhalten benötigt wird, sondern oft in umfangreiche Funktionalitäten eingebaut wird.

Daher werden Funktionen benötigt, um Usereingaben auch in der Lightbox zu triggern, und das ist bei Colorbox möglich:

Mehrsprachigkeit

Will man die Texte/Beschriftung ändern, so ist das easy möglich:

Zeigt die Einstellungen zur Mehsprachigkeit

 

Mehr vom Autor von Colorbox kann man hier einsehen:

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!

Erfahrungsbericht ovh als Hoster – ovh kann ich nicht weiterempfehlen

OVH gilt ja als recht günstiger Hoster, war aber schon früher in Verruf geraten.

Als aufgeschlossener Webentwickler sollte man trotzdem seine eigenen Erfahrungen gemacht haben. Das ist passiert.

Ich hab mir einen günstigen VPS der SSD-Serie geholt:

https://www.ovh.de/virtual_server/vps-ssd.xml

 

Der Preis klingt gut und PLESK als Managementtool ist auch gratis dabei.

Grundsätzliche Erfahrungen

Von Anfang an fühlte sich Plesk träge an. Auch das OVH-Verwaltungstool war nicht superwieselflink.

Auffällig war auch, dass die testweise installierten Webapps wie WordPress auf dem VPS überraschend viel Last produzierten.

Und auch viel Traffic angezogen haben, obwohl das unbekannte Testinstanzen sind.

OVH wird also anscheinend von irgendwelchen Bots o.ä. durchgescannt denke ich.

OVH Kundencenter

Das OVH Kundencenter ist manchmal einfach nicht erreichbar. Teile davon sind in französischer Sprache.

Und besonders ärgerlich sind die falschen Daten.

Hier wird zb angezeigt, dass der Host nicht erreichbar ist, ja sogar die eigenen Monitoring-Informationen können nicht geladen werden:

Fehlerhafte Anzeigen bei der Server-Übersicht. Da hat’s was…

Der Host/VPS ist sehr wohl erreichbar, FTP und SSH funktionieren….oO

 

Probleme mit Produkt-Upgrades

OVH bietet an, dass man Produkte einfach über das Kundencenter upgraden kann.

Ok! Das probieren wir aus, weil das kann im Produktivbetrieb ja auch notwendig sein.

Ursprünglich wurde der VPS SSD 1 bestellt, ich hab auf das Paket SSD 2 (siehe Screenshot oben) upgegradet.

Nun müsste ich 20GB an Festplatte zur Verfügung haben.

Naja, müsste.

Was zeigt mir Plesk an:

10GB Festplatte statt 20GB

Plesk zeigt mir 10GB Festplattenkapazität an.

Huch…sollten das nicht 20GB sein?

Zusatzoptionen

Ok, das Upgraden zu einem anderen Paket hat nicht funktioniert.

Mehr Speicherplatz wär aber schön!

Daher hab ich eine zusätzliche Festplatte dazugebucht und bezahlt.

Der  Screenshot oben ist aber gleich geblieben, es hat sich nix an der Festplattengröße geändert.

Dafür macht das Kundencenter jetzt Probleme mit diesem Menüpunkt:

Gebuchte Fesplatte? Fehlanzeige!

Ergebnis

Ich kann OVH nicht empfehlen. Der VPS war gefühlt viel langsamer als ein stinknormaler Uberspace-Shared-Webspace, es gibt Probleme beim Paketupgrade und hinzugebuchte Optionen scheinen nicht auf und können nicht verwerndet werden.

OVH ist für mich daher ein Nogo!

 

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

 

Welches Webhosting / shared Hosting nehmen? – Übersicht über Webhoster und vergleichende Meinung dazu!

Hier eine kleine Übersicht von Webhostern, die unserer Meinung nach verwendendswert sind!

Uberspace

Der Klassiker aus Deutschland!

Performant, günstig, kompetent und mit allen Freiheiten.

Die Leutz rund um Uberspace sind Auskenner und machen oder machten eigentlich managed Server im Brotberuf.

Uberspace lässt einem alle Freiheiten, man kann also so ziemlich alles installieren, was man will.

Der Support von Uberspace ist absolute Spitzenklasse!

 

Webhosting mit eigener IP-Adresse

Für SEO-Zwecke oder „interessante Kunden“ will man Webseiten nicht auf dem eigenen Server laufen lassen. Es ist oft unerwünscht, von einer Seite auf andere Seiten und Kunden über die IP kommen zu können.

Eine eigene IP-Adresse für eine Webseite ist daher äußerst hilfreich.

Dafür gibts:

Manitu

Hetzner

Infos zur eigenen IP-Adresse vom Hetzner-Support:

Sie können auf den Webhosting-Paketen eine eigene IP-Adresse im Rahmen der SSL-Verschlüsselung erhalten.

Siehe dazu:
https://www.hetzner.de/webhosting
–> „Account Addons“ -> „SSL-Verschlüsselung (https) mit dedizierter IP“

Diese ist primär für Clients gedacht, die noch kein SNI unterstützen. Die IP-Adresse kann auch nicht für andere Zwecke als für die Bereitstellung einer Website über HTTPS verwendet werden.

Die Sinnhaftigkeit hält sich allgemein in Grenzen, da nur sehr wenige Clients heutzutage SNI nicht unterstützen. In der Regel handelt es sich dabei um Exoten oder veraltete Software wie Android 2.3, Internet Explorer 6, …

In der Übersicht von Hetzner ist der Punkt „eigene IP“ also nicht offensichtlich erkennbar. Aber Hetzner bietet das an!

Eigene IP kostet dann monatlich € 2,9 mit einer Einrichtungsgebühr von € 9,90.

 

 

Andere

 

Andere Vergleichsseiten

Es gibt genügend andere Webseiten, die shared Hosting vergleichen.

Leider gibt es keine Seite, die komplette Infos liefert. Oft fehlt zb die Möglichkeit, nach hinzuschaltbarer IP zu durchsuchen:

Vergleich von shared Hostern bei webhostlist.de – ohne IP suche

Fileupload über den Browser – ein Überblick über diverse Lösungen

Beim Upload von Dateien über den Browser hat sich in den letzten Jahren viel getan.

Vor allem mit Canvas und JavaScript gibt es jetzt viele geniale Möglichkeiten wie

  • Bildvorschau vor dem Upload
  • Datei umbenennen
  • Bilder mit Watermarks versehen
  • Bildgröße anpassen
  • Bilder drehen, beschneiden und verändern
  • Text aus Dokumenten vor dem Upload auslesen

 

Hier also ein Überblick über diverse Möglichkeiten

filepond.js

https://pqina.nl/filepond/

Die Goodies:

  • Vanilla JavaScript – keine Abhängigkeiten zu jQuery o.ä.
  • Kann mit Base64-Dateien, Ordnerpfaden, Einzeldateien, mehreren Dateien und Links umgehen!
  • Funktioniert mit React, Vue and Angular und ist als jQuery-Plugin erhältlich.

 

jQuery-File-Upload

https://github.com/blueimp/jQuery-File-Upload

Goodies:

  • Drag’n’Drop
  • Fortschrittsanzeige
  • Kann angefangene und unterbrochene Uploads fortsetzen

Für micht interessante Links zu dem Tool, was Bildvorschau betrifft:

 

Übersicht anderer:

Webseiten und SSL – Webseiten auf SSL umstellen und betreiben

Mit let’s encrypt haben wir ja eine günstige und einfache Möglichkeit bekommen, um Seiten mit SSL-Zertifikaten abzusichern.

Es gibt aber einige Fallstricke und Dinge zu berücksichtigen, wenn man Seiten richtig mit SSL absichern will. Der Artikel soll weiterhelfen und auch Links zu interessanten anderen Artikeln liefern.

Grundsätzlich wichtige Schritte

  • 301 Redirects einrichten
  • HTTP Strict Transport Security (HSTS) einrichten – das ist wichtig, weil bei einer 301er Weiterleitung immernoch über eine unsichere Verbindung kommuniziert wird. Cookies können so zb unverschlüsselt ausgelesen werden!
  • Mixed Content aufspüren und ausbessern – oft werden Bilder per HTTP ausgeliefert. Das gibt im Browser eine Mixed-Content-Warnung!

Interessante Artikel

 

https://www.troyhunt.com/the-6-step-happy-path-to-https/ – Super Zusammenfassung zu allen wichtigen Schritten und weiterführende Infos. Absolute Leseempfehlung!

 

 

Post Thumbnail by Sean MacEntee

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

SVG-Tools zum Vektorisieren von Bildern und Umwandeln in SVGs – eine Sammlung von Tools

Das SVG-Format bietet einige Vorteile gegenüber anderen Grafikformaten.

SVGs sind Vektorgrafiken, können also verlustfrei vergrößert werden.

Da es sich bei Grafiken im SVG Format um Textknoten handelt, kann man auch die einzelnen Knoten direkt ansprechen und manipulieren.

Nachfolgend eine kleine Sammlung an Tools, Helferleins und Seiten im Web die beim Umgang mit SVGs helfen

SVG OMG

Code/Repo hinter SVG OMG

halftone.svg

 

Bild in SVG umwandeln mit JPNG.svg

Inkscapes Bild in SVG Umwandelfunktion „Bitmap nachzeichnen“

  • Macht aus Bild eine Vektorgrafik. Wahlweise Schwarz/Weiß, Graustufen oder farbig. Umwandlungsschritte kann man sich aussuchen, so dass man eine Vektorgrafik mit 2, 20, 100 oder x Layern bekommt!

Bild in ein Lineprint umwandeln

Pixels to SVG

Diverse Funde

 

Links