robsite

In webdev

netbeep

Meine kleine nervige Browserextension, die bei jedem Netzwerk-Request einen Ton abspielt. Same-Origin Requests klingen nett, Cross-Origin, Tracker und Malware zunehmend harsch. Da weiß man Adblocker umso mehr zu schätzen.

Gut, um die Performance einer Website direkt zu hören. Oder einfach als piepsender Hintergrundsound á la Film-Computer.

Womöglich auch zum Musik machen.

Für Chrome
Für Firefox
Auf GitHub

· webdev, sound, meins · ★

font2png

Manchmal braucht man ein Icon, nur eins, aus einem Icon-Font. Und manchmal braucht man es als PNG, mit Transparenz und in der genau passenden Größe.

down-arrow

font2png.com

Früher gabs fa2png.io um Icons als PNG zu speichern. Aber die Seite ist tot.
Auch wäre es nett, an einem Ort durch viele frei benutzbaren Icons zu scrollen um sich inspirieren zu lassen.

font2png.com enthält zwar nicht alle frei benutzbaren Iconsets, aber die besten, die ich fand. Fehlt eins? → Sag

· meins, tool, webdev · ★

https und www in Chrome

Chrome macht es einem immer schwerer die volle URL in der Adresszeile zu sehen. Standardmäßig werden "triviale" Teile wie www und m, Suchparameter und das Protokoll versteckt. Womöglich gut für Normalbenutzer, aber unpraktisch bei der Webentwicklung.

Schlecht: Chrome Omnibar ohne volle URL

Gut: Chrome Omnibar mit voller URL

Es gibt Flags in chrome://flags, die das beheben, aber diese sind seit Chrome 76 wiederum hinter einem Flag versteckt...

Also:

  1. chrome://flags/#temporary-unexpire-flags-m76 aktivieren, Chrome neustarten.

  2. Die nun sichtbaren chrome://flags/#omnibox-ui-hide-steady-state-url-trivial-subdomains, chrome://flags/#omnibox-ui-hide-steady-state-url-scheme und chrome://flags/#omnibox-ui-hide-steady-state-url-path-query-and-ref deaktivieren, Chrome neustarten.

Chrome Flags

Oder mal wieder Firefox benutzen, dem Web täts gut.

· webdev · ★

Let's Encrypt

Let's Encrypt hat gerade sein einmillionstes Zertifikat ausgestellt. Ist erstaunlich einfach einzurichten, vor allem mit Apache auf Debian/Ubuntu:

$ git clone https://github.com/letsencrypt/letsencrypt
$ cd letsencrypt/
$ ./letsencrypt-auto --help
$ ./letsencrypt-auto --apache -d robsite.net

Dann Mailadresse eingeben, ToS zustimmen, HTTP/HTTPS oder HTTPS-only wählen, fertig.

Bildschirmfoto 2016-03-08 um 08. März | 17.38.06

Wenn HTTP komplett verboten ist und man noch irgendwo hardcodierte HTTP-Links drin hat, mault der Browser über unsichere Verbindungen. Also alle URLs wenn möglich zu https://bla... ändern und in Zukunft lieber gleich das flexiblere //bla... nehmen.

Das Zertifikat ist 90 Tage gültig, wobei Let's Encrypt in der Beta-Phase noch kein Auto-Renewal bietet. Stattdessen dann gelegentlich
./letsencrypt-auto certonly --apache --renew-by-default -d robsite.net -d zweitedomain.de
ausführen. Oder einfacher, do.co/le-renew per Cron laufen lassen:

$ sudo vim /usr/local/sbin/le-renew # Script reinkopieren, vorher lesen
$ sudo crontab -e
0 0 * * 1 /usr/local/sbin/le-renew robsite.net >> /var/log/le-renew.log

Prüft jeden Montag um 00:00, ob die Certs in den nächsten 30 Tagen ablaufen und erneuert sie dann.

Mit nginx auch nicht viel komplizierter.

· apache, https, linux, webdev · ★

pngquant

Commandline-Tool zum optimieren von PNGs. Nimmt 24-Bit PNGs und generiert daraus 8-Bit PNGs, wobei der Alphakanal beibehalten wird. Sieht durch clevere Farbreduktions- und Dithering-Algorithmen fast aus wie das Original, ist aber bis zu 70% kleiner.

Ein Beispiel Anhand des pngquant-Logos mit Schatten. Einmal als PNG-24 und PNG-8 (mit diesen Settings) , gespeichert mit Photoshop CS3s "Save for Web & Devices"-Funktion und einmal mit pngquant optimiert, ausgehend vom PNG-24:

pngquant-logo_photoshop_png24 Photoshop PNG-24 - 38.4 KB
pngquant-logo_photoshop_png8 Photoshop PNG-8 - 12.8 KB
pngquant-logo_pngquant_png8 pngquant PNG-8 - 14.4 KB
· png, tool, webdev · ★
Mastodon