{"id":1125,"date":"2026-09-25T19:06:00","date_gmt":"2026-09-25T17:06:00","guid":{"rendered":"https:\/\/1337.click\/?p=1125"},"modified":"2026-09-26T10:49:31","modified_gmt":"2026-09-26T08:49:31","slug":"neue-tools-und-darkmode-praktische-upgrades-fuer-unsere-webseite","status":"publish","type":"post","link":"https:\/\/1337.click\/?p=1125","title":{"rendered":"Neue Tools und Darkmode: Praktische Upgrades der Werkzeugkiste"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Die erste \u00c4nderung f\u00e4llt sicher sofort ins Auge, denn endlich gibt es einen <mark style=\"background-color:#000000\" class=\"has-inline-color has-background-color\">Darkmode<\/mark> und dazu gesellt sich auch eine automatische Erkennung der bevorzugten Sprache. Ich habe erstmal nur Deutsch und Englisch hinzugef\u00fcgt. Sobald Deutsch erkannt wird, wird es Deutsch und f\u00fcr alle anderen Sprachen verwende ich Englisch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"957\" height=\"740\" data-attachment-id=\"1126\" data-permalink=\"https:\/\/1337.click\/?attachment_id=1126\" data-orig-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png\" data-orig-size=\"957,740\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;,&quot;alt&quot;:&quot;&quot;}\" data-image-title=\"image\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png\" src=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png\" alt=\"\" class=\"wp-image-1126\" srcset=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png 957w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image-300x232.png 300w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image-767x593.png 767w\" sizes=\"auto, (max-width: 957px) 100vw, 957px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Auf den zweiten Blick findet man auch zwei neue Tools, die neuerlich hinzugekommen sind: Kreditrechner und HLS-Stream-Downloader.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kreditrechner<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bisher habe ich unser Darlehen nur in Excel durchgerechnet &#8211; einfach weil es einfach war &#8211; aber man st\u00f6\u00dft leider schnell an die schw\u00e4chen von Excel. Flexibler geht das mit meinem Kreditrechner. Man kann beliebig Kredite hinzuf\u00fcgen, Sondertilgungen einplanen und sich die Gesamtkosten ausrechnen. Zus\u00e4tzlich hat man auch die M\u00f6glichkeit jeden Kredit wiederum mit einem Bausparer abzusichern. Am Ende erh\u00e4lt man einen Tilgungsplan in dem man wiederum auch nochmal eigene Sondertilgungen eintragen kann. Wie bei allen anderen Tools auch, wird die Eingabe komplett in URL Parametern &#8222;gespeichert&#8220;. So kann man einfach den Link zur eigenen Berechnung speichern und kann so auf einem Ger\u00e4t oder sp\u00e4ter weiter rechnen. Auf diese Weise muss ich nicht eure Daten haben. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HLS-Stream-Downloader<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4ufig ist es so, dass einem Webseiten die M\u00f6glichkeit geben, \u00fcber die Developer Tools und den Network Tab den Videostream einzeln anzuklicken, in einem neuen Tab zu \u00f6ffnen und so einfach herunterzuladen. Allerdings laden mittlerweile viele Webseiten die Streams nicht mehr als einzelne Datei, sondern laden den Stream in vielen kleinen Chunks. Diese werden zum Start der Wiedergabe \u00fcber eine Playlist-Datei bekannt gemacht, sodass der Client wei\u00df wie er im Video springen kann. Das praktische ist nun, dass man sich diese Playlist-Datei herunterladen kann und sie enth\u00e4lt die Links zu allen Chunks. So k\u00f6nnte man sich nun manuell alle Chunks laden, wieder zusammenf\u00fcgen und lokal abspielen. Das ist nat\u00fcrlich nicht besonders praktisch, weshalb ich daf\u00fcr ein <a href=\"https:\/\/1337.click\/tools\/m3u8-downloader\">Browsertool<\/a> gebaut habe. Es wird sowohl eine regul\u00e4re URL als auch ein cURL Befehl unterst\u00fctzt.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">QR-Code Generator Upgrades<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" data-attachment-id=\"1132\" data-permalink=\"https:\/\/1337.click\/?attachment_id=1132\" data-orig-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art.png\" data-orig-size=\"800,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;,&quot;alt&quot;:&quot;&quot;}\" data-image-title=\"art\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art.png\" src=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art.png\" alt=\"\" class=\"wp-image-1132\" srcset=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art.png 800w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art-150x150.png 150w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art-300x300.png 300w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/art-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited.png\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"719\" data-attachment-id=\"1134\" data-permalink=\"https:\/\/1337.click\/?attachment_id=1134\" data-orig-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited.png\" data-orig-size=\"719,719\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;,&quot;alt&quot;:&quot;&quot;}\" data-image-title=\"3dbuildings\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited.png\" src=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited.png\" alt=\"\" class=\"wp-image-1134\" srcset=\"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited.png 719w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited-300x300.png 300w, https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/3dbuildings-edited-150x150.png 150w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Der <a href=\"https:\/\/1337.click\/tools\/qr-code-generator?inputText=https:%2F%2F1337.click%2Ftools%2Fqr-code-generator&amp;resolution=800&amp;margin=2&amp;renderStyle=artistic&amp;dotRadius=62&amp;blurAmount=42&amp;softness=4&amp;borderWidth=11&amp;buildingHeight=35&amp;cameraAngle=90&amp;cameraRotation=-45&amp;zoom=160\">QR-Code Generator<\/a> unterst\u00fctzt ab sofort neben dem normalen Modus noch zwei alternative Modi: &#8222;K\u00fcnstlerisch&#8220; und &#8222;3D Geb\u00e4ude&#8220;. Der <em>K\u00fcnstlerische<\/em> Modus war entstanden, weil ich in einer Kunstgalerie einen selbst gemalten QR-Code gesehen habe und ich war einfach \u00fcberrascht, dass er sich tats\u00e4chlich problemlos scannen lie\u00df. Eine ganze Weile lang reifte dann die Idee in meinem Kopf, so einen algorithmisch zu generieren und tats\u00e4chlich war das gar nicht so kompliziert, da einem die QR-Code Library ein Canvas mit den einzelnen Quadraten gibt und so l\u00e4sst man diese einfach ein wenig wachsen, verschmelzen, etwas gl\u00e4tten und anschlie\u00dfend mit einem Rand versehen. Nat\u00fcrlich kann man mit den Parametern noch ein wenig spielen, die diese von der gew\u00e4hlten Aufl\u00f6sung abh\u00e4ngen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die 3D-Geb\u00e4ude bzw. Klemmbaustein-Optik lag den ebenfalls nahe. Bei dieser sei aber noch anzumerken, dass viele QR-Code-Reader Schwierigkeiten haben diese zu lesen. Die &#8222;Schattenseiten&#8220; der Geb\u00e4ude bzw. Bausteine st\u00f6ren den kontrastbasierten Algorithmus. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die erste \u00c4nderung f\u00e4llt sicher sofort ins Auge, denn endlich gibt es einen Darkmode und dazu gesellt sich auch eine automatische Erkennung der bevorzugten Sprache. Ich habe erstmal nur Deutsch und Englisch hinzugef\u00fcgt. Sobald Deutsch erkannt wird, wird es Deutsch und f\u00fcr alle anderen Sprachen verwende ich Englisch. Auf den zweiten Blick findet man auch [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-1125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5bxCn-i9","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1077,"url":"https:\/\/1337.click\/?p=1077","url_meta":{"origin":1125,"position":0},"title":"Clover nach einer Ubuntu Installation reparieren","author":"immo","date":"27. Juni 2020","format":false,"excerpt":"Neulich war es soweit und ich brauchte neben meinem Windows und macOS noch Ubuntu (20.04, um genau zu sein). Windows und macOS teilen sich bei mir eine NVMe SSD und werden von Clover gebootet. Ubuntu sollte auf eine weitere SSD, um das Triple Boot System nicht all zu kompliziert zu\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/1337.click\/?cat=1"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1114,"url":"https:\/\/1337.click\/?p=1114","url_meta":{"origin":1125,"position":1},"title":"Toolbox","author":"immo","date":"28. Februar 2025","format":false,"excerpt":"Einfach um mal wieder etwas Angular und Typescript aufzufrischen, habe ich mich dazu entschieden eine kleine Toolbox zu bauen. Die Toolbox soll mit der Zeit wachsen und wird sicherlich niemals fertig sein. Ziel ist es, dass m\u00f6glichst alles im Browser des Nutzers l\u00e4uft und kein Backend voraussetzt. QR Code Generator\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/1337.click\/?cat=1"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2025\/02\/app.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2025\/02\/app.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2025\/02\/app.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2025\/02\/app.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":608,"url":"https:\/\/1337.click\/?p=608","url_meta":{"origin":1125,"position":2},"title":"Dual ISO &#038; Lightroom (Mac)","author":"immo","date":"5. M\u00e4rz 2015","format":false,"excerpt":"Die Bilder, die eine Kamera mit dem Dual ISO Modul\u00a0produziert, sind leider nicht direkt nutzbar, da jede zweite Zeile mit einem anderen ISO Wert abgebildet wurde. Man erh\u00e4lt also ein Bild mit vielen horizontalen Streifen und falscher Belichtung. Gl\u00fccklicherweise gibts von den Magiclantern Entwicklern abgesehen vom Command Line Tool auch\u2026","rel":"","context":"In &quot;Fotografie&quot;","block_context":{"text":"Fotografie","link":"https:\/\/1337.click\/?cat=3"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":558,"url":"https:\/\/1337.click\/?p=558","url_meta":{"origin":1125,"position":3},"title":"Mac OS 10.10 Hackintosh","author":"immo","date":"6. Februar 2015","format":false,"excerpt":"Seit einiger Zeit lief\u00a0Mac OS 10.9.x relativ problemlos auf meinem Rechner. Irgendwann habe ich die Grafikkarte getauscht und den Bootloader runter geschmissen, sodass es einfach gar nicht mehr lief. Ich h\u00e4tte jetzt m\u00fchselig irgendwie die alten, f\u00fcr die alte Grafikkarte gepatchten, .kexts l\u00f6schen m\u00fcssen. Darauf hatte ich keinen Bock und\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/1337.click\/?cat=6"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/1337.click\/wp-content\/uploads\/2015\/03\/IMG_9176.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1105,"url":"https:\/\/1337.click\/?p=1105","url_meta":{"origin":1125,"position":4},"title":"Yourfone und die eSIM","author":"immo","date":"18. M\u00e4rz 2022","format":false,"excerpt":"In den Zeiten, in denen man seine Spiele und Software nur noch digital kauft, nimmt man nat\u00fcrlich auch eine eSIM, statt einer echten SIM. Ich habe gerade gemerkt, dass das gar keine so gute Idee ist, weil die Kuh (der Kunde, also ich & du) so nochmal gemolken werden k\u00f6nnen:\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/1337.click\/?cat=1"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":38,"url":"https:\/\/1337.click\/?p=38","url_meta":{"origin":1125,"position":5},"title":"Miniatur-\/Tilt-Shift Effekt mit Lightroom","author":"immo","date":"13. August 2014","format":false,"excerpt":"Ich finde besonders bei Luftbildern oder Bildern von hohen H\u00e4usern herab bietet sich der Miniatur Effekt besonders an. Gerade mit Adobe Photoshop Lightroom l\u00e4sst sich der Effekt leicht nachtr\u00e4glich ohne nachbauen, wenn man nicht gl\u00fccklicher Besitzer eines Tilt-Shift Objektivs ist. F\u00fcr mein Tutorial setze\u00a0ich Lightroom 5 und ein wenig Erfahrung\u2026","rel":"","context":"In &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/1337.click\/?cat=7"},"img":{"alt_text":"step1","src":"https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=700%2C400 2x, https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=1050%2C600 3x, https:\/\/i0.wp.com\/itlog.noip.me\/blog\/wp-content\/uploads\/2014\/08\/step1.jpg?resize=1400%2C800 4x"},"classes":[]}],"jetpack_featured_media_url":"https:\/\/1337.click\/wp-content\/uploads\/2026\/09\/image.png","_links":{"self":[{"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/posts\/1125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1337.click\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1125"}],"version-history":[{"count":3,"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/posts\/1125\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/posts\/1125\/revisions\/1136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1337.click\/index.php?rest_route=\/wp\/v2\/media\/1126"}],"wp:attachment":[{"href":"https:\/\/1337.click\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1337.click\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1337.click\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}