WebMaster – Seite 2 – web-entwickler.me

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/

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.

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

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

Kano

Bietet Hardwarekits, eigenes Betriebssystem für den Raspberry Pi und viele Tutorials. Sehr für Kinder und extreme Anfänger geeignet!
http://t3n.de/news/kanos-computer-kit-861499/
https://kano.me/store/eu/products/computer-kit
https://kano.me/store/eu/products/computer-kit-complete

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:

https://developers.facebook.com/products/social-plugins
Einbetten eines Seiten-Feeds – so schauts dann aus:

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

https://www.thecssninja.com/talks/dnd_and_friends/

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:

https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop
- Selfhtml zeigt in ein paar Zeilen Code, wie man Drag’n’Drop umsetzen kann. Wirklich easy erklärt, mit wenig Code aber sehr rudimentär.
https://developer.mozilla.org/en-US/docs/Web/Events/drop
- Mozilla bietet eine gute Zusammenstellung zu dem Thema.

Dragon Drop – einzige tastaturbedienbare Lösung

http://www.harris-schneiderman.com/demos/dragon-drop/index.html
https://github.com/schne324/dragon-drop
Accessibility ist bei allen andren Bibliotheken ein Fremdwort. Dragon Drop hat als Alleinstellungsmerkmal, dass es per Tastatur bedient werden kann!
Mit der Tab-Taste wird das Element ausgewählt mit der Space-Taste wird die Auswahl bestätigt und per Pfeiltasten kann das Element verschoben werden

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

https://bevacqua.github.io/dragula/
https://github.com/bevacqua/dragula
Dragula braucht kein jQuery, ist touchfähig und ist einfach zu implementieren

Draggabilly

https://draggabilly.desandro.com/
Klein, leicht, mulittouchfähig

jquery.shapeshift

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

Hootsuite Grid/Gridlist

Ebenfalls ähnlich wie Masonry aber mit Drag’n’Drop
https://github.com/hootsuite/grid

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.ä.

https://mxtoolbox.com/SuperTool.aspx?action=dns%3awordpress.org&run=toolpage# DNS
https://mxtoolbox.com/SuperTool.aspx?action=whois%3awordpress.org&run=toolpage# WHOIS
http://viewdns.info/reverseip/?host=wordpress.org&t=1 – Welche anderen Webseiten liegen auf dem gleichen Server oder der gleichen IP-Adresse?

Sicherheit, DDOS, Blacklists

http://labs.sucuri.net/?is-my-wordpress-ddosing=wordpress.org – Wurde meine Seite gehackt und DDOSt andere?
https://sitecheck.sucuri.net/results/wordpress.org – Spamt meine Seite? Wird sie geblockt?

Servertechnologien, CMS, Tracking, Betriebssystem, Hoster

https://builtwith.com/wordpress.org
http://toolbar.netcraft.com/site_report?url=wordpress.org
http://wppluginchecker.earthpeople.se/?wordpress-site=wordpress.org – Welche WordPress Plugins werden verwendet

Performance / Develop-Fehler

https://developers.google.com/speed/pagespeed/insights/?url=wordpress.org

Die besten Firefox-Plugins

Alltag

Adblocker uBlock origin

https://addons.mozilla.org/de/firefox/addon/ublock-origin/

dict.cc Übersetzung

Bestes Plugin für direkte Übersetzung.
https://addons.mozilla.org/de/firefox/addon/dictcc-translation/
Einfach auf Wort klicken (während man eine vordefinierte Taste hält) und es erscheint die Übersetzung in einem kleinen Pop-Up:
https://github.com/Lusito/dict.cc-translation

Sitzungsmanager

Oft verliert man seine Tabs, wenn Firefox abstürzt. Der Sitzungsmanger hilft da weiter!
https://addons.mozilla.org/de/firefox/addon/session-manager/
http://sessionmanager.mozdev.org/

Video DownloadHelper – Videos (Youtube, Vimeo usw) herunterladen

Privatsphäre / Sicherheit

Random Agent Spoofer

https://addons.mozilla.org/de/firefox/addon/random-agent-spoofer/
Gaukelt Webseiten einen anderen Browser vor. Es folgt der Hinweis, unter welchen User-Agent der Browser sich meldet:
Dadurch ein gewisser/geringer Schutz vor Tracking und Profiling
https://github.com/dillbyrne/random-agent-spoofer

Firefox Multi-Account Containers – Mehre private Tabs aufmachen die voneinander getrennt sind

Mit dem Plugin kann ich mehrere Identitäten in einem Browserfenster verwenden.
- Man kann zb drei mal mit verschiedenen Gmail-Accounts eingeloggt sein, oder drei mal bei GMX oder im selben Forum mit zwei Usernamen.
- Die Tabs/Container sind voneinander getrennt!
https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/
https://m.heise.de/newsticker/meldung/Firefox-Multi-Account-Containers-fuer-getrennte-Online-Identitaeten-3834831.html
https://github.com/mozilla/testpilot-containers#readme
https://blog.mozilla.org/firefox/introducing-firefox-multi-account-containers/

Webentwicklung / Developer

whatruns – Womit wird eine Webseite betrieben

Wenn man herausfinden willl, mit welchem CMS (WordPress, Joomla, Typo3 usw) eine Seite gemacht wurde, hilft das Plugin es herauszufinden
https://addons.mozilla.org/en-US/firefox/addon/whatruns/
https://www.whatruns.com/

Was tun gegen DDos Angriffe? Ein paar kurze Lösungsvorschläge

Was ist ein DDos-Angriff?

DDos steht für Distributed-Denial-of-Service. Also der Angriff von vielen, vielen verschiedenen Angreifern auf die eigene Seite.

Angriff ist dabei kein Hacken, sondern kann einfach das Zugreifen auf die eigene Seite sein. Wenn zu viele Besucher auf meine Seite wollen, dann kann der Server die Last nicht mehr verarbeiten und geht ein. Der Server ist dann nicht mehr erreichbar.

Lösung

Hoster wählen, der selbst Anti-DDos-Maßnahmen setzt. Also ein Hoster, der deine Webseite/deinen Server vor DDos-Attacken schützt.
Cloudflare oder andere Reverse-Proxys einsetzen. Dann geht die Last der Angriffe auf die über. Cloudflare betreibt ein riesiges Netzwerk an Servern und kann die Angriffslast besser abfedern.
Den Hostingplan wechseln, und auf einen stärkeren Server upgraden.

Responsive Webseiten testen – ein schneller Überblick über diverse Browsergrößen und -auflösungen

Wenn man responsive Webseiten baut, dann spielt das Testen eine große Rolle.

Folgende Tools helfen dabei:

Browser Devtools

Firefox bietet zb in den Devtools (F12) die Möglichkeit, responsive Ansichten auszutesten.

Einfach Strg+Shift+M und schon kommt man in die Ansicht zum Testen, wo man im ersten Dropdown die Auflösung auswählen kann:

mattkersley.com/responsive/

http://mattkersley.com/responsive/
Man bekommt die responsive Webseite in diversen Größen nebeneinander dargestellt:
https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler/

Gratis Fotos, Icons, Vektoren, Stockfotos – eine Übersicht

Egal ob für das Aufpeppen von Blogartikeln, als Hintergrund bei Visitenkarten, als Vorlage für eine Broschüre oder einen Flyer oder für die nächste Bilderverschönerungen.

Professionelle Fotos, Icons, Vektoren und Stockfotos braucht man fast täglich.

Daher hab ich eine kleine Übersicht zusammengetragen. Alle Ressourcen sind immer für kommerzielle Nutzung freigegeben!

Fotos

unsplash

https://unsplash.com/
Alle Bilder unterliegen der Creative Commons und können ohne Nennung verwendet werden