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

API bitte! Öffentlich ansprechbare APIs für jeden Zweck – darf’s APIssl mehr sein?

Viele Webseiten sind heutzutage kleine Webapps. Sie transportieren Daten oder Mehrwert für ihre Besucher.

Wie schön wär es da, wenn man diesen Mehwert auch weiterverwenden könnte?

Das ultimative Mitmachweb. Das revolutionäre am Web waren die Links – also von einem Thema zum anderen springen, Querverweise setzen, die einen Mehrwert bringen und ein Netzwerk an Ideen knüpfen.

APIs bringen uns Codern das gleiche auf Codeebene. APIs sind daher nicht weniger revolutionär.

Aber welche APIs gibt es? Welche Daten kann ich von anderen anzapfen und für mich selbst verwenen?

Dazu gibt es folgende Sammlungen:

 

Mache das Web  zur API

Wie gesagt, es wär schön, wenn jede Seite eine API hätte.

Da sind wir schon auf einem guten Weg, denn WordPress bringt automatisch eine JSON-API mit!

WordPress ist das meistbenutze CMS und ein großer Teil aller Seiten im Web laufen damit.

Mit der JSON-API von WordPress lassen sich also alle Daten einer Seite auslesen, so man das nicht deaktiviert!

Mehr Infos dazu gibt es hier:

MySQL/mariaDB Performance verbessern – query_cache_size anpassen

Manche Webentwickler, vor alem WordPress-Menschen, kennen folgenden Screenshot wahrscheinlich:

Was sagt uns das?

MySql/mariaDB speichern die Abfragen nicht zwischen – es wird also nix gecachet!

Dabei wär das so schön! 😀

MySQL könnte nämlich die Abfragen in einem eigenen Zwischenspeicher lagern und so ähnliche/gleiche Abfragen aus dem Cache fischen, und nicht gegen die Datenbank fahren müssen.

Wie aktiviere ich den MySQL-Cache mit query_cache_size?

Easy!

Einfach folgende Zeilen in die MySQL-Konfig schreiben, den MySQL-Server neu starten und done:

query_cache_type=1

query_cache_size=268435456

query_cache_limit=1048576

Cache und MySQL/MariaDB-Konfig in Plesk aktivieren und anpassen

  1. Zuerst muss man sich mit dem Plesk-Server per SSH verbinden, zb
    $ ssh root@155.666.77.88
  2. In das etc-Verzeichnis gehen:
    $ cd /etc
  3. Status der Datenbank-Konfiguration ansehen – also die Datei my.cnf ansehen:
    $ cat my.cnf

    Das schaut dann ca so aus:

    [mysqld]
    bind-address = ::ffff:127.0.0.1
    local-infile=0
    datadir=/var/lib/mysql
    socket=/var/lib/mysql/mysql.sock
    # Disabling symbolic-links is recommended to prevent assorted security risks
    symbolic-links=0
    # Settings user and group are ignored when systemd is used.
    # If you need to run mysqld under a different user or group,
    # customize your systemd unit file for mariadb according to the
    # instructions in http://fedoraproject.org/wiki/Systemd[mysqld_safe]
    log-error=/var/log/mariadb/mariadb.log
    pid-file=/var/run/mariadb/mariadb.pid#
    # include all files from the config directory
    #
    !includedir /etc/my.cnf.d

    Wir sehen hier, dass wir MariaDB und nicht mit MySQL arbeiten. Das ist wichtig! Später mehr 🙂

  4. Ändern der my.cnf mit Vim:
    $ vi my.cnf
  5. Dann geht man in den [mysqld]-Bereich. Wichtig, dass man noch nicht in den nächsten „Bereich“ geht. Der nächste Bereich wäre in unserem Beispiel zb [mysqld_safe]. Schreibt man darunter, befindet man sich schon in einer anderen Datenbank-Konfiguration!
  6. Mit dem Befehl
    *i

    kommt man in den Editierbereich und kann neue Zeilen einfügen und Zeilen in die Datei reinkopieren!

  7. Mit Druck auf die Taste ESC beenden wir die Bearbeitung.
  8. Mit dem Befehl
    :x

    speichern wir die Änderungen und beenden Vim

  9. Jetzt muss MySQL neu gestartet werden, das geht zb mit
    # sudo service mysql restart
    1. Oft kommt folgende Fehlermeldung:
      Redirecting to /bin/systemctl restart mysql.service
      Failed to restart mysql.service: Unit not found.
    2. Dann checken wir mal den mysql-Dienst
      # mysl
    3. Gibt es MySQL nicht als Dienst, kommt folgende Meldung
    4. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
    5. Ok, also was benutzen wir? Das finden wir so heraus
      # systemctl list-unit-files | grep enabled | grep -iE '(sql|db)'
    6. Wir bekommen zb folgende Ausgabe:
      dbus-org.fedoraproject.FirewallD1.service enabled
      mariadb.service enabled
    7. Wir wissen jetzt also, dass wir MariaDB verwenden! Daher müssen wir diesen Dienst neu starten!
  10. MariaDB neu starten geht über folgende Befehle:
    1. # sudo service mariadb.service restart
    2. Oder auch über folgenden Befehl
      # systemctl restart mariadb
  11. Fertig!

Infos

nginx, Apache und Plesk – Was macht nginx in Plesk wirklich?

https://talk.plesk.com/threads/what-does-nginx-for-plesk-actually-do.282233/

Bei Problemen mit nginx und Plesk stellt sich dann oft die Frage:

Wofür ist nginx in Plesk wirklich zuständig?
Wie ist die Arbeit zwischen nginx und Apache aufgeteilt?

 

 

Die Antwort

  • Apache lässt sich bei Plesk nie ganz deaktivieren
  • Standardmäßig ist nginx nur ein Reverse-Proxy
  • nginx leitet alle Anfragen an Apache weiter

Die magischen 3 nginx-Häkchen

Plesk bietet 3 Häkchen an um Einstellungen für nginx vorzunehmen:

 

  • Das dritte Häkchen bedeutet, dass nginx statische Daten ausliefert, ohne rewrite-Rules oder .htaccess-Regeln einzuhalten!

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.

Programmieren lernen

Jeder Web-Entwickler fängt mal klein an und jeder lernt irgendwie anders.

Wie bringt man anderen daher Programmieren einfach bei?

There’s an app for that!

Es gibt genügend Dienste, Seiten und Services, die einem beim Erlernen von Code helfen.

Interessante Ansätze dafür? Bitteschön, hier lang:

Welche Programmiersprache soll ich zuerst lernen?

http://carlcheo.com/startcoding

http://carlcheo.com/startcoding
http://carlcheo.com/startcoding

 

Konzepte die jeder Programmierer kennen sollte

In dem verlinkten Repo sind Artikel verlinkt, die grundsätzliches Verständnis von Programmierkonzepten verdeutlichen sollen.

Die Sammlung ist recht umfangreich und bietet wahrscheinlich wochenlangen Lesespaß:

https://github.com/mr-mig/every-programmer-should-know

https://github.com/mr-mig/every-programmer-should-know

Kano

 

Tutorials / Lernunterlagen

For Loop in verschiedenen Programmiersprachen

Wichtig am Programmierenlernen sind ein paar Grundlagen. Kann man die, ist alles andere nicht mehr so schwer.

Zu den absoluten Grundlagen gehören Loops. Folgender Artikel zeigt, wie man For Loops in verschiedenen Sprachen schreibt:

https://dev.to/rattanakchea/for-loop-for-different-programming-languages-bgb

Facebook Inhalte einfach einfügen

Es gibt mehrere Möglichkeiten, Inhalt von Facebook in die eigene Seite einzubinden. Hier ein paar Infos dazu:

Per iframes / Code von Facebook

Facebook bietet viele Codegeneratoren an, um Bereiche von Facebook anzeigen zu können. Es handelt sich dabei um einfaches Einbetten:

Mit der Graph-API von Facebook

  • Mit API-Abrufen bin ich flexibler, biete mehr Datenschutz und Privacy, kann die Requests cachen und kann eigene Styles einfacher verwenden
  • Andererseits hab ich mehr Arbeit und Aufwand und muss mich um mehr Problemfelder kümmern, als wenn ich nur iFrames einbinden würde

Infos dazu:

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