Aktuelle Position der Alex II

Featured

Dank modernster Technik kann ich jetzt stündlich die Position der “Alexander von Humboldt II” aktualisieren und auf einer Karte darstellen – und zwar auch mitten auf dem Ozean, fernab der Reichweite aller (landgestützen) Systeme, die ich bisher zur Verfügung hatte .

Die Wetterdaten (Temperatur, Luftdruck, Wind) werden stündlich für die gemeldete Position von openweathermap abgerufen und in die Karte eingearbeitet; die letzten Positionen sind als rote Linie sichtbar. Über die Schaltfläche oben rechts kann die Kartendarstellung verändert werden.

Elementor Page Builder: Hintergrundbilder optimieren

Ich habe mir mal den Elementor Page Builder für WordPress näher angeschaut (für ein anderes Projekt) – und bin gleich darüber gestolpert, dass Hintergrundbilder immer in voller Größe ausgeliefert werden. Gut, in Zeiten von DSL und LTE mit Flatrates mag das egal sein, aber überflüssig ist es irgendwie schon: man kann doch auch einfach ein passendes Bild ausliefern anstatt im Browser zu skalieren. (Das gibt dann auch gleich Bonuspunkte im Google Ranking, wegen mobile first und so)

Auch wenn WordPress inzwischen responsive images besser unterstützt als früher und man mit Plugins diese Unterstützung noch verbessern kann: Hintergrundbilder sind da eiegntlich immer außen vor (Genau wie auch Titelbilder von Seiten und Artikeln). Dabei sind media queries in CSS nicht wirklich kompliziert….

Langer Rede kurzer Sinn: In den Tiefen des Internets habe ich (hier) eine Lösung für mein Problem gefunden, die ich einfach mal hierher kopiere.


Peter Nelis
August 4, 2017 at 6:09 PM

Got another bit of CSS fiddling here related to increasing background image control. This is a bit more weighty than the previous one posted in my earlier comment, and probably best used sparingly, but it’s got the potential to be very useful depending on what level of control you want…

What It Is:
Some (VERY) manual media queries that’ll let you pull a different hero/background image depending on the max and minimum viewport width

Why It Might Be Useful for You:
Fixed height background images are a pain in the butt to find a one-size-fits-all solution, even if you move things around with background-position and media queries. SOOOO this actually lets you control which image is loaded based on the screen size (note: it ONLY loads the image that is set to display, so no undue increase in page size – in fact it could help make your sizes smaller)

How It Works:
SRCSET doesn’t play all that nicely with backgrounds (read: it doesn’t play at all without some JS, which I didn’t want to add), so I did a little playing with media queries on the Elementor row element I wanted to control the background for.

To prep for this, create the various versions of the image you need, and name them based on their width (eg a 1280px wide image should be image-name-1280.jpg). Do this for each image based on your break points.

Next, you upload a 1x1px transparent png – this is the “holding” image that will never display, but which will help cut down on the amount of code needed by letting you control default position, overlay, transparency etc within Elementor.

Next, save and view the page, find the background row element class (which will look like .elementor-element.elementor-element-******* where the *s are alphanumerical characters).

Next, add this CSS to your page/stylesheet (adjust the min max break points however you like):

@media screen and (max-width: 767px) {.elementor-element.elementor-element-******* {background-image: url(http://***/767.jpg) !important;}}
@media screen and (max-width: 1024px) and (min-width: 768px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1024.jpg) !important;}}
@media screen and (max-width: 1280px) and (min-width: 1025px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1280.jpg) !important;}}
@media screen and (max-width: 1440px) and (min-width: 1281px){.elementor-element.elementor-element-******* {background-image: url(http://***/1440.jpg) !important;}}
@media screen and (max-width: 1920px) and (min-width: 1441px){.elementor-element.elementor-element-******* {background-image: url(http://***/1920.jpg) !important;}}
@media screen and (min-width: 1921px) {.elementor-element.elementor-element-******* {background-image: url(http://***/2650.jpg) !important;}}

Et voila – you’ve now got a hero/background image that will only display at native width or lower, will change based on the viewport width, and that only loads when necessary.

It’s probably a little clunky and impractical for most use cases, but if you’re obsessive about larger-than-native images, unsightly artefacts, and backgrounds that just won’t do what you want them to, then this might be for you!


 

Matomo archive.php: ‘curl_exec: SSL certificate problem’

Was für eine Überschrift…. Dabei ist sie noch nicht mal vollständig, denn eigentlich ist die Fehlermeldung

curl_exec: SSL certificate problem: self signed certificate in certificate chain.

Die Ursache ist in der Meldung ja schon erklärt: das aufgerufene curl kann das selbst signierte SSL-Zertifikat des Servers nicht validieren – weil es eben selbst signiert ist und nicht von einer “offiziell” vertrauenswürdigen Stelle. Da es sich in meinem Fall aber komplett um Server innerhalb meines eigenen Netzwerks handelt, ist das selbst signierte Zertifikat vollkommen ausreichend.

Die Lösung ist – wenn man sie erstmal kennt – relativ trivial und schnell implementiert; das Finden dauert länger als das Machen. Letztendlich war es bei mir die Kombination aus zwei Beiträgen:

  1. Herunterladen des eigenen CA Zertifikats (siehe hier)
  2. Aktualisierung der vertrauenswürdigen Zertifikate in meiner Matomo Installation (siehe hier)

1. Eigenes Zertifikat für curl herunterladen

Zunächst mal holt man sich die aktuellste Liste direkt von curl (Link) und speichert sie lokal ab.

Danach speichert man das Zertifikat der eigenen Webseite ebenfalls lokal ab; die genaue Vorgehensweise unterscheidet sich je nach verwendetem Browser. In der Regel fängt es mit einem Klick auf das Schloß in der Adresszeile an, dann hangelt man sich durch bis man irgendwann an den Punkt kommt, wo man das Zertifikat exportieren kann. Ob es als .crt oder .pem gespeichert wird ist vollkommen egal, letztendlich ist es nur eine Textdatei.

Zum Abschluss öffnet man beide Zertifikatsdateien (cacert.pem von curl und das eigene) mit einem Texteditor und hängt das eigene Zertifikat am Ende der cacert.pem an. Abspeichern (als reiner Text), fertig.

2. Aktualisieren der Matomo Installation

Noch einfacher und schneller als der vorherige Schritt: die eben erweiterte cacert.pem muss in das Verzeichnis piwik/core/DataFiles/ – und fertig.

Beim nächsten Archivierungslauf wird auch das eigene Zertifikat als gültig akzeptiert :)

Allerdings hält diese Lösung vermutlich nur bis zur nächsten Aktualisierung von Matomo und muss dann wiederholt werden – aber da kann man ja dran denken bzw. erinnert man sich spätestens daran, wenn die automatische Archivierung per cronjob nicht funktioniert. (Achtung: der cronjob an sich gibt keine Fehlermeldung und läuft normal durch, da muss man schon in die Protokolle schauen)

Update: Es geht noch viel einfacher…

Eigentlich nicht empfohlen, aber für meinen Anwendungsfall (Webserver im Intranet ohne Verbindung zur Außenwelt) vollkommen ausreichend; es gibt einen zusätzlichen Schalter, der genau das tut, was sein Name verspricht: –accept-invalid-ssl-certificate

Damit verhindert man auf jeden Fall Problemmeldungen beim Matomo Systemcheck – der merkt nämlich auch, dass die cacert.pem verändert wurde.

Das komplette Kommando für den Cronjob ist dann also

/path/to/matomo/console core:archive --url=http://example.org/matomo/ --accept-invalid-ssl-certificate

 

Comodo Free S/MIME certificates (es war schön mit euch…)

Schon seit ein paar Jahren nutze ich S/MIME mit kostenlosen Zertifikaten von Comodo, um meine Mails digital zu unterschreiben. Diese Zertifikate müssen zwar jedes Jahr neu erzeugt und eingebunden werden, kosten aber eben genau nichts – da rentiert sich der Aufwand schnell.

Wie denn zufällig gerade kürzlich ein Zertifikat abgelaufen war, wollte ich es wieder neu beantragen (auf https://www.comodo.com/home/email-security/free-email-certificate.php wie immer) – doch siehe da: Comodo heißt inzwischen Sectigo und bietet keine kostenlosen Mail-Zertifikate mehr an :-o

LetsEncrypt bietet keine S/MIME Zertifikate an, sondern nur SSL für Webseiten (u.a. diese hier), und auch sonst scheint es nur sehr wenige Anbieter zu geben, bei denen man für den Privatgebrauch ein kostenloses Zertifikat bekommen kann, dem auch allgemein vertraut wird. Selbst signiert stand bei mir nie zur Diskussion….

Tatsächlich habe ich die Lösung dann über Wikipedia gefunden: die schweizerische Secorio AG (nach eigenen Angaben ein strategischer Partner von Sectigo, ehemals Comodo) bietet jetzt die kostenlosen Comodo Zertifikate an. Der entsprechende Link [https://secure.comodo.net/products/frontpage?ap=Secorio&area=SecureEmailCertificate&product=9&days.] ist gut versteckt in den FAQ [https://www.secorio.com/de/faqs/smime-zertifikate/78-how-much-does-an-email-certificate-for-private-use-cost], führt aber schließlich auf das (für mich) altbekannte Registrierungsformular von Comodo, nur mit dem Logo von Secorio :-D

Update 30. April 2019:

Wie unten in den Kommentaren bereits richtig angemerkt wurde, hat Sectigo jetzt endgültig den Sack zugemacht – die kostenlosen Zertifikate gelten nur noch 30 Tage, wer mehr Laufzeit will muss zahlen. Da hat wohl jemand beim Thema DSGVO seine Chance gewittert, nochmal so richtig Geld zu machen….

Zitat von der Webseite: “Email encryption is now a requirement to stay compliant with many regulations including: US Federal – DFARS, NIST & ITAR, GDPR, HIPAA”

Dann werde ich mich mal wieder auf die Suche machen, im Moment sieht mir WISeKey sehr vielversprechend aus (gefunden in den Kommentaren auf Frankys Web). Noch habe ich keine richtigen Aussagen dazu gefunden, ob bei denen der private Schlüssel lokal oder auf dem Server erzeugt wird – wer den privaten Schlüssel hat, kann signierte Nachrichten verändern ohne die Signatur zu kompromittieren…..

Und weil sie für meine Zwecke nutzlos geworden sind, deaktiviere ich die beiden Links unter denen die kostenlosen Jahreszertifikate noch erhältlich waren.

PageSpeed von 68 auf 91 in 5 Minuten

Google PageSpeed ist ja nach wie vor eine wichtige Messlatte, wenn es um Seitenoptimierung geht. Auf gute Werte zu kommen, ist gar nicht so schwierig – es dauert nur ein paar Minuten, um zumindest in den grünen Bereich zu kommen.

Ich habe es mal auf einer Demoseite (WP 4.9.1) mit einem Standardtheme (twentyseventeen) ausprobiert und konnte tatsächlich nach ein paar Minuten deutlich gesteigerte Bewertungen sehen:
Mobil “ab Werk” 68%, gesteigert auf 91%
Desktop “ab Werk” 74%, gesteigert auf 97%

Ohne Plugins geht es nicht, ich habe folgende Plugins verwendet:

  • Autoptimize
    optimiert lediglich HTML und CSS (auch inline)
  • Responsify WP
    läuft mit den Standardeinstellungen
  • WP Super Cache
    läuft mit Experteneinstellungen (Seiten komprimieren, Header cachen), der Cache wurde manuell vorgeladen

Zusätzlich habe ich in der .htaccess nochmal explizit die Komprimierung aktiviert und das Ablaufdatum erhöht:

# BEGIN browser caching
<FilesMatch "\.(html|htm)$">
  FileETag None
  <ifModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT"
  </ifModule>
</FilesMatch>

# BEGIN Gzip
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/ico
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
# END Gzip
# BEGIN LBC
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A0
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/ico "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
	ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
	ExpiresByType text/html "access plus 1 month"
	ExpiresByType text/plain "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/ico "access plus 1 month"
    ExpiresByType application/x-icon "access plus 1 month"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType application/xhtml-xml "access plus 600 seconds"
  </IfModule>
  <IfModule mod_headers.c>
    Header set Expires "max-age=2592000, public"
    Header unset ETag
    Header set Connection keep-alive
  </IfModule>
  FileETag None
</FilesMatch>
# END LBC
# END browser caching

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

Das war schon alles

Ja wirklich.

Autoptimize brachte mobil 70%, Desktop 77%.
WP Super Cache brachte mobil 85%, Desktop 93%
Cache vorgeladen brachte dann die letzten Punkte: mobil 91%, Desktop 97%

come to the geek side

I can explainSprüche auf T-Shirts sind ja fast schon wieder out, aber manchmal trifft es eben doch den Nagel auf den Kopf. Dieser Tage hatte ich so einen Moment der Erkenntnis – DER passende Spruch zur aktuellen Situation, besser kann man es manchmal nicht ausdrücken.

Kurzum: der Shop ist es wert, verlinkt zu werden.

Und damit es neben der persönlichen Belustigung auch einen guten Zweck hat, wird der Link über das Boost Project geschaltet, d.h. ein Teil des gemachten Umsatzes wird vom Shopbetreiber direkt an die “Alexander von Humboldt II” gespendet – ohne Mehrkosten für den Besteller, einfach so im Hintergrund.

getdigital banner

11 Rules of Life

Zitat

Someone gave a speech at a High School about eleven things they did not and will not learn in school.
He talks about how feel-good, politically correct teachings created a generation of kids with no concept of reality and how this concept set them up for failure in the real world.

  1. Life is not fair – get used to it!
  2. The world doesn’t care about your self-esteem.
    The world will expect you to accomplish something BEFORE you feel good about yourself.
  3. You will NOT make $60,000 a year right out of high school.
    You won’t be a vice-president with a car phone until you earn both.
  4. If you think your teacher is tough, wait till you get a boss.
  5. Flipping burgers is not beneath your dignity.
    Your Grandparents had a different word for burger flipping: They called it opportunity.
  6. If you mess up, it’s not your parents’ fault, so don’t whine about your mistakes, learn from them.
  7. Before you were born, your parents weren’t as boring as they are now. They got that way from paying your bills, cleaning your clothes and listening to you talk about how cool you thought you were: So before you save the rain forest from the parasites of your parent’s generation, try delousing the closet in your own room.
  8. Your school may have done away with winners and losers, but life HAS NOT. In some schools, they have abolished failing grades and they’ll give you as MANY TIMES as you want to get the right answer.
    This doesn’t bear the slightest resemblance to ANYTHING in real life.
  9. Life is not divided into semesters.
    You don’t get summers off and very few employers are interested in helping you FIND YOURSELF. (Do that on your own time.)
  10. Television is NOT real life.
    In real life, people actually have to leave the coffee shop and go to jobs.
  11. Be nice to nerds. Chances are you’ll end up working for one.

(found it on Facebook and worth keeping)