Autor: WebMaster

Autovervollständigung – Überblick über verschiedene JavaScript Tools für Suche, Filterung und Autocomplete

Autovervollständigung in Eingabefeldern erleichtern das Leben wieder mal ungemein.

Nachfolgend eine Auflistung von Bibliotheken, die Autovervollständigung von mehreren Datenquellen können.

at.js

 

AutoCompleteJS

 

VisualSearch.js

* http://documentcloud.github.io/visualsearch/

Der große Vorteil ist, ähnlich wie bei autocomplete.js, dass die Auswahl zweistufig erfolgen kann.

Also zuerst nach der Hauptkategorie suchen und auswählen und im zweiten Schritt dann die Unterkategorie:

http://documentcloud.github.io/visualsearch/

Screenshots von Webseiten als Bild oder PDF abspeichern

Mit der Veröffentlichung von Chrome-/Chromium-Headless ist es recht einfach, Screenshots zu erstellen.

Früher musste man zb auf PhantomJS zurückgreifen, doch PhantomJS war nicht ganz so zuverlässig.

Wie also Screenshots erstellen?

Screenshots mit Puppeteer (node.js) und Headless-Chrome

Puppeteer kommt vom Chrome-Team und ist eine Node.js Bibliothek.

Puppeteer bietet eine API um einfach mit Chrome-Headless zu sprechen.

Was kann Puppeteer?

  • PDFs und Bilder von Webseiten screenshotten
  • Webscraping, Contentscraping
  • Formulare abschicken
  • Tastatureingaben
  • UI-Testing

Beispiele für die Verwendung findet man auf der GitHub Seite.

Folgendes Tutorial bietet auch einen Startpunkt:

https://tutorialzine.com/2017/08/automating-google-chrome-with-node-js

Screenshots mit Chrome-Headless und Linux-Terminal

Mit einem Terminal lassen sich leicht Screenshots als PDF oder Bild speichern:

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Ein guter Artikel und Anleitung dazu findet sich hier:

Echter Headless Chrome (oder Chromium) – Bedien deinen Browser per Kommandozeile, Selenium oder node.js!

Was ist Chrome-Headless?

  • Mit Chrome-Headless kann man den Browser per Kommandozeile/Terminal, Selenium, node.js oder C++ verwenden.
  • Chrome kann daher ressourcenschonend ohne grafische Ausgabe am Server laufen.
  • Man kann per Code Screenshots oder PDFs erstellen, Webseiten debuggen, Formulare ausfüllen und versenden und eben alles machen, was man auch mit der Maus, Tastatur oder per Touch machen kann!

 Gibt es auch Chromium Headless?

Natürlich lässt sich Chromium auch headless starten, und das geht zb im Linux-Terminal so:

$ chromium-browser --headless

Verwendung

Speichern als PDF

$ chromium-browser --headless --disable-gpu --print-to-pdf https://www.kaoh.at

Dieser Befehl erzeugt ein PDF von der angegebenen Seite. Das Ergebnis schaut dann zb so aus:


Es wird also ein PDF mit mehreren Seiten generiert.

Screenshots

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Der normale Screenshot liefert folgendes Bild:

Der Screenshot mit der Nexus 5x Auflösung schaut so aus:

Hilfestellungen

Brauche ich die –disable-gpu Flag?

Ja, weil dadurch ein paar Bugs umgangen werden

Wo liegt der Unterschied zu PhantomJS?

PhantomJS verwendet eine ältere Renderengine (eine ältere WebKit-Version).

Viel wichtiger: PhantomJS ist unzuverlässiger, liefert nicht so gute und nachvollziehbare Ergebnisse und macht Probleme mit manchen JavaScript-Dingen.

 

Interessante Links

nginx Problem 502 Bad Gateway beim Hosting mit Plesk – Hier die Lösung!

Wer schon mal mit Plesk zu tun hatte, kennt das Problem:

 

  • Die Seite ist erreichbar
  • Das SSL-Zertifikat wird ausgeliefert
  • Die Domain wird aufgelöst
  • Es kommt aber keine Homepage sondern der Fehler:
    • 502 Bad Gateway

[error] 10485#0: *1947668 connect() failed (111: Connection refused) while connecting to upstream, client:

GRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR!!!!

nginx macht also Probleme! Und man kommt nicht und nicht drauf warum…

Lösung

Lösung 1: nginx deaktivieren ( don’t! )

nginx deaktivieren! Hahahah. Ja, das behebt das Problem. Dann hat man aber keinen reverse proxy mehr am Laufen.

 

Echte Lösung: IP neu lesen

Im Plesk-Panel in den Menüpunkt Tools & Einstellungen -> IP-Adressen gehen und auf den Button IP neu einlesen drücken:

Gehe zum Menüpunkt Tools & Einstellungen -> IP-Adressen
Drücke auf IP neu einlesen

Plesk sagt dazu im Original:

Grund für das Problem

Höchstwahrscheinlich fail2ban.

Das Problem tritt mit der Zeit auf, wenn man neue Domains anlegt oder an der IP herumfummelt.

Plesk selbst sagt dazu:

Fail2Ban blocks server's IP addresses.

Das ist ein bisserl strange, dass Fail2Ban die eigenen IP-Adresse blockiert, ist nunmal aber so. Deal with it! 😀

Links

 

Whatsapp mit Link vom Browser öffnen – Link zum eigenen Whatsapp Profil, zur eigenen Whatsapp Nummer

Einen Link zur eigenen Telefonnummer einzugeben ist recht einfach:

<a href="tel:+43147">Ruf mich auf der Telefonnummer 147 an!</a>

Der wichtige Teil ist das href=“tel…

href="tel:+43147"&gt;

Wie bekomme ich nun einen Link zur WhatsApp-Nummer?

whatsapp photo
Photo by clasesdeperiodismo

Für Desktop-Browser

Einfach einen Link zu Whatsapp-Web angeben, und schon öffnet sich Whatsapp!

Also so:

href="https://web.whatsapp.com/send?l=en&amp;phone=43147"

Der wichtigste Teil ist, die eigene Telefonnummer hinter phone= anzupassen:

...phone=43147"

Für Smartphones (Android, iOS)

href="https://api.whatsapp.com/send?l=en&amp;phone=43147"

So wär der Link also: https://api.whatsapp.com/send?l=en&phone=43147

Tricky Part

Mit Browser Sniffing muss nun der Link ausgetauscht werden. Am Handy funktioniert der Link zu WhatsApp Web nämlich nicht!

 

Die WhatsApp-Doku sagt dazu:

Links:

SSH Keys am Server geändert? Was tun unter Linux?

Werden am Server die Keys geändert, kommt es oft zu solchen Meldungen:

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!

Was ist zu tun?

Es steht dann eh dabei was zu tun ist:
 ssh-keygen -f "/home/deinusername/.ssh/known_hosts" -R meine.domain.at

Dein Benutzername wird anders als „deinusername“ heißen – der muss also angepasst werden.

Wenn nicht diese Warnung kommt sondern eine Passwort dann weiß dein SSH nicht, welchen Key es verwenden soll.

Dann musst du entweder deine ~/.ssh/config anpassen (dort kannst du reinschreiben welcher Server welchen Benutzernamen und welchen Key haben will) oder du fügst mit ssh-add deinen Schlüssel zum SSH-Agent hinzu.

Der Schlüssel schaut circa so aus „ssh-add ~/.ssh/id_rsa“.
Achtung! Nicht die .pub-datei verwenden!

 

Alternative mit dem Holzhammer

Man kann die known_hosts Datei auch komplett löschen! Dann braucht man nix herumfummeln.

Es kommt dann aber halt bei jeder SSH-Verbindung wieder erneut die
Key-Fingerprint-Abfrage, weil keine Keys von den anderen Servern mehr
als bekannt angesehen werden.

Man muss halt immer das Zertifikat bestätigen. Hozhammermethode eben. Aber viele Wege führen…aus dem Wald heraus!

Beitragsbild SSH by xmodulo

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:

 

 

Welches CMS steckt hinter einer Webseite? Womit wird die Webseite betrieben? So findest du das heraus!

Oft stellt man sich die Frage, mit welchem CMS eine Webseite betrieben wird. WordPress? Joomla? Typo3?

Und welches Design/Theme steckt dahinter? Welcher Server? Welche JavaScript Tools werden verwendet?

Wenn man wissen will, womit eine Webseite gemacht wurde, gibt es einige Tools um das herauszufinden.

builtwith.com und Netcraft – kompletter Seiten-Striptease!

Mit beiden online Tools kann man so ziemlich jedes Detail zur verwendeten Seitentechnologie herausfinden. Darunter:

  • IP-Adresse
  • Domain-Registrar
  • Land, in dem die Seite gehostet wird
  • Firma, die den Hosting-Server betreibt
  • Betriebssystem des Servers
  • Welcher Server – Apache? nginx?
  • Welche WebTracker verwendet werden, zb Google Analytics, Piwik
  • Welche Programmiersprache verwendet wird
  • Wie es um den SSL-Zustand steht
  • Welches Client-Side-Framework verwendet wird, zb JQuery, Bootstrap usw
  • Welches CMS verwendet wird
  • uvm..

whatruns – Firefox- und Chrome Plugin

 

  • https://addons.mozilla.org/en-US/firefox/addon/whatruns/
  • https://www.whatruns.com/
  • Ein kleines aber feines Plugin, dass in einem Pop-Up alle wichtigen Infos anzeigt:
    • Das Beispiel zeigt die Seite wordpress.org. Alle verwendeten Plugins, das Theme, die Verwendung von Google Analytics und reCAPTCHA und die Einbettung von Youtube-Videos werden hier auf einen Blick angezeigt!
    • Hin und wieder funktioniert das Plugin nicht – das kann ein Problem mit dem Adblocker sein! Einfach kurz den Adblocker deaktiveren, dann gehts!

whatwpthemeisthat.com WordPress-Themes und Plugins erkennen

  • http://whatwpthemeisthat.com/
    • Seite zeigt nicht nur das Theme an, sondern auch die verwendeten Plugins!

 

Welchen vServer? Günstig und gutes Hosting – ein Vergleich

Anforderungen

  • Mindestens eine eigene IP
  • Weitere IP-Adressen sollen zubuchbar sein
  • SSD Speicherplatz
  • Verwaltungssoftware zum einfachen Administrieren ( bevorzugt Plesk)
  • Upgrade auf bessere Pakete sollte möglich sein
  • Rascher und hilfreicher Support

Vergleichstabelle

AnbieterPreisSpeicherplatz in GB (SSD)RAM in GBvCores
1blu7,9 (3,9 für 12m)12062
1blu12,9 (6,9 für 12m)240124
netcup RS 1000 G7 SE7,994062
netcup RS 000 G7 SE14,9960124
webtropia vServer M 6.09,9915042
webtropia vServer L 6.014,9925048

Netcup

https://www.netcup.de/vserver/

1Blu

https://www.1blu.de/server/vserver/

  • Sehr günstig, gutes Preis-Leistungsverhältnis
  • Plesk gratis dabei, mit WordPress Toolkit!!!
  • Viel SDD-Speicherplatz bereits bei den günstigsten Angeboten!!!
  • Support meist recht schnell (per E-Mail getestet)
  • Server „fühlen“ sich (reaktions) schnell an.
  • Schlechte Bewertungen
  • Wurden vor einiger Zeit mal gehackt und haben sich als Noobs outen lassen müssen. Hatten Kundendaten im Klartext auf ihren Servern herumliegen.
  • https://www.hosterz.de/anbieter/1blu/

hetzner

  • https://www.hetzner.de/cloud
  • https://forum.golem.de/kommentare/pc-hardware/hetzner-cloud-cloud-ressourcen-fuer-wenig-geld-aber-mit-zusatzkosten-mieten/8-euro/115217,5004270,5004270,read.html#msg-5004270

Hetzner hat seine vServer-Angebote auf Cloud umgetauft und punktet mit günstigen Kosten und einer neuen API.

Die Instanzen können zudem noch heruntergefahren werden um Geld zu sparen. Dann kommen Abschläge zum Preis hinzu. Berechnet nach Stunden.

Aber Achtung, die neuen Angebote haben keine Traffic-Flatrate mehr!

https://www.hetzner.de/cloud

ovh

Von OVH kann ich selbst nur abraten. Für meinen Geschmack ist die Performance nicht mit zb 1blu oder Netcup vergleichbar und das Kundencenter hakt.

Außerdem verbockt OVH gefühlt sehr viel. Will ich einen Vserver upgraden, so kommt die Leistung gefühlt nicht an.

Und im November 2017 hat ein simpler Stromausfall zwei Rechenzentren komplett vom Netz genommen.

Ein.

Simpler.

Stromausfall!

Die Zeiten, wo Server wegen Stromproblemen ausfallen, sollten lang lang laaaaaaaaaang hinter uns sein!

Meldung von OVH dazu:

https://blog.ovh.com/de/statement-zu-den-beiden-zwischenfaellen-am-09-november-2017/?ct=t(Basis_Training_DE6_20_2017)

 

Witzigerweise hat das auch den Booking.com-Konkurrenten Seekda/Kognitiv komplett vom Netz genommen:

https://kognitiv.com/ Meldung zum Ausfall

webtropia

 

Diverse

 

Benchmarks

 

Geschwindigkeit messen

 

 

 

 

Beitragsbild by midom

Checkbox / Radio Design-Sammlung

Das hier wird ein Sammelartikel für interessante Checkbox-Designs.

Der Artikel wird laufend um spannende Designideen erweitert

 

 

Sammlung von diversen Ideen

https://freebiesupply.com/blog/css-checkbox-styles/

Alle Beispiele sind mit Code versehen und linken zu Codepen

 

 

Hippe Radiobuttons

https://codepen.io/tutsplus/pen/bgqYJz

 

http://cssdeck.com/labs/ldmtsmfk
https://codepen.io/billyysea/pen/CHmiE
https://codepen.io/msisto/pen/lCofE
http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/demo.html
https://codepen.io/AngelaVelasquez/pen/Eypnq

 

 

 

 

 

 

Witzige

Spiegelei