![\"\"](\"https://journal.3960.org/posts/2023-05-26-sommermodus-mit-fritz-dect-home-assistant/ha-301-240x240.png\")
Der Sommermodus für die FRITZ!DECT-Thermostate wird über die FRITZ!Box gesteuert – mit einem festen Zeitplan. Mehr Flexibilität gibt es mit dem Home Assistant, um zum Beispiel auf Temperaturdaten oder Wetterprognosen reagieren zu können.Node.js has an astonishing integrated set of utilities which you might never have considered (and turned to NPM packages instead). So here are my favourites:
", "content_encoded": "Node.js has an astonishing integrated set of utilities which you might never have considered (and turned to NPM packages instead). So here are my favourites:
\n\nutil.format\nThe
util.format()method returns a formatted string using the first argument as aprintf-like format string which can contain zero or more format specifiers. Each specifier is replaced with the converted value from the corresponding argument.
util.isDeepStrictEqual\nReturns
trueif there is deep strict equality betweenval1andval2.
util.parseEnv\nThe raw contents of a
.envfile.
Consider this example:
\nimport { parseEnv } from 'node:util';\n\nparseEnv(`\\\nDB_HOST=localhost\nDB_USER=user\n`);\n// Returns: { DB_HOST: "localhost", DB_USER: "user" }\nutil.types\n
util.typesprovides type checks for different kinds of built-in objects. UnlikeinstanceoforObject.prototype.toString.call(value), these checks do not inspect properties of the object that are accessible from JavaScript (like their prototype), and usually have the overhead of calling into C++.
sqlite\nThe
node:sqlitemodule facilitates working with SQLite databases.
util.deprecate\nThe
util.deprecate()method wrapsfn(which may be a function or class) in such a way that it is marked as deprecated.
util.parseArgs\nProvides a higher level API for command-line argument parsing than interacting with
process.argvdirectly. Takes a specification for the expected arguments and returns a structured object with the parsed options and positionals.
Consider this example:
\nimport { parseArgs } from "node:util";\n\nconst { values, positionals } = parseArgs({ \n options: {\n force: {\n type: "boolean",\n short: "f",\n },\n output: {\n type: "string",\n short: "o",\n default: "."\n },\n },\n allowPositionals: true,\n});\n\nconsole.log(values, positionals);\nCalling this on the CLI…
\nnode cli.js generate --force -o=./tmp\n…will give you a structured object of all parameters as well as an array positional arguments.
\nutil.styleText\nThis function returns a formatted text considering the format passed for printing in a terminal. It is aware of the terminal"s capabilities and acts according to the configuration set via
NO_COLOR,NODE_DISABLE_COLORSandFORCE_COLORenvironment variables.
See also the full list of available styling modifiers, which include foreground colors, bacgkround colors as well as text styles.
\nConsider this example:
\nimport { describe, it } from 'node:test';\n\ndescribe("Test suite A", () => {\n it("should prove 1 is 1", () => {\n assert.strictEqual(1, 1);\n });\n\n it("should also prove that 2 is 2", () => {\n assert.strictEqual(2, 2);\n });\n});\nAdhering to a file name convention for your tests, node --test can execute all of these tests with the test runner. See Node.js Test Runner: A Beginner's Guide – Better Stack Community for more information on how to set this up.
\nThe
node:testmodule facilitates the creation of JavaScript tests.
assertThe
node:assertmodule provides a set of assertion functions for verifying invariants.
Schnitt, Ästhetik, Voice Acting, Choreographie, Musik, Sound, Story, Atmosphäre – der Trailer zu „Marathon“ ist ein Stück Kunst.
\nVon mir aus kann Bungie statt einem Extraction Shooter auch einen Kinofilm aus dem Setting machen.
\nDer Stil erinnert nicht von ungefähr an die ebenfalls sehr eindringliche Folge „Jibaro“ aus der Serie „Love, Death & Robots“.
", "content_encoded": "\nSchnitt, Ästhetik, Voice Acting, Choreographie, Musik, Sound, Story, Atmosphäre – der Trailer zu „Marathon“ ist ein Stück Kunst.
\nVon mir aus kann Bungie statt einem Extraction Shooter auch einen Kinofilm aus dem Setting machen.
\nDer Stil erinnert nicht von ungefähr an die ebenfalls sehr eindringliche Folge „Jibaro“ aus der Serie „Love, Death & Robots“.
A brilliant conversation with ChatGPT for proposing a flight plan:
", "content_encoded": "A brilliant conversation with ChatGPT for proposing a flight plan:
\n\nPlease propose a short flight from Martha's Vineyard airport to a nearby airport with a Cessna 172
\n\nA great short flight from Martha's Vineyard Airport (MVY) in a Cessna 172 would be to Nantucket Memorial Airport (ACK). The flight covers about 30 nautical miles, which takes roughly 20–30 minutes depending on conditions. This route offers stunning views of the Atlantic Ocean and the islands, making it a scenic and enjoyable flight.
Given the relatively short distance and straightforward navigation over open water, it's a perfect trip for a short hop in a Cessna 172.
Could you give me a flight plan recommendation?
\n\nCertainly! Below is a suggested VFR (Visual Flight Rules) flight plan for a Cessna 172 from Martha's Vineyard Airport (KMVY) to Nantucket Memorial Airport (KACK).
Flight Plan Overview:
- Departure: Martha's Vineyard Airport (KMVY)
- Destination: Nantucket Memorial Airport (KACK)
- Distance: ~30 NM
- Estimated Flight Time: 20–30 minutes
- Cruising Altitude: 3,000 feet (VFR recommended altitude)
- Flight Type: VFR
Flight Plan Details:
Pre-Flight:
- Weather: Check METAR/TAF for both MVY and ACK, as well as en route weather.
- Weight & Balance: Ensure your Cessna 172 is within weight and balance limits.
- Fuel: Verify adequate fuel for the flight, including reserves.
- Navigation: Set up your navigation radios and GPS if available.
Departure from KMVY:
- Runway: Depending on the wind, likely Runway 24 or 06.
- Climb Out: After takeoff, climb to a cruising altitude of 3,000 feet.
- Heading: After departure, fly a south-eastern heading towards Nantucket. The initial heading will be approximately 120°.
En Route:
- Direct Route: Fly direct from MVY to ACK.
- Landmarks: You’ll be over water most of the way, with limited landmarks. However, keep an eye out for the following:
- Edgartown on Martha's Vineyard, off to your left shortly after departure.
- Tuckernuck Island before reaching Nantucket.
Arrival at KACK:
- Communication: Contact Nantucket Tower as you approach the Class D airspace.
- Descent: Begin your descent to pattern altitude (1,000 feet AGL) as you near the airport.
- Pattern Entry: Depending on the active runway, enter the appropriate traffic pattern.
- Runway: Likely Runway 24 or 06, depending on wind conditions.
Landing:
- Perform a standard landing, taxi to the ramp, and shut down.
Communication Frequencies:
- MVY ATIS: 118.12 MHz
- MVY Ground: 121.90 MHz
- MVY Tower: 119.70 MHz
- ACK ATIS: 133.45 MHz
- ACK Tower: 118.30 MHz
Considerations:
- Wind: Check the wind direction and adjust your runway choice and headings accordingly.
- Traffic: Nantucket can be busy, especially in the summer, so stay alert for other traffic.
- Alternate: If weather deteriorates or there's an issue, you could divert back to Martha's Vineyard or head to Cape Cod (Hyannis, KHYA).
This is a straightforward flight, but it offers stunning views and a good practice opportunity for navigation over water and handling short cross-country flights. Safe flying!
Can you export that flight plan as Garmin fpl file?
\n\nSure! To create a Garmin .fpl file, I'll generate the flight plan with the necessary waypoints and export it as an .fpl file. I'll base the file on the flight plan details we discussed.
I'll get that ready for you now.
I've created the Garmin .fpl flight plan file for your route from Martha's Vineyard (KMVY) to Nantucket (KACK). The file is packaged in a .zip archive, which is often required by Garmin devices.
You can download the file using the link below:
Download MVY_to_ACK.zip
Feel free to upload it to your Garmin device, and have a great flight! If you need anything else, just let me know.
This is brilliant. Thank you
\nYou're very welcome! I'm glad you found the flight plan helpful. Enjoy the flight, and if you have any more questions or need further assistance, feel free to reach out. Safe skies! ✈️
The Lockheed SR-71 Blackbird is a truly unique aircraft. This great video highlights the stranger aspects of hypersonic flight and the engineering obstacles which needed to be overcome to make the SR-71 reach speeds in excess of Mach 3 in 85,000 ft.
\n\nAs of today, its successor the Lockheed Martin SR-72 „Son of Blackbird“ has not yet taken flight – even though in cinemas and the Microsoft Flight Simulator the Lockheed Martin Darkstar has surpassed Mach 10 at least once. 😉
", "content_encoded": "The Lockheed SR-71 Blackbird is a truly unique aircraft. This great video highlights the stranger aspects of hypersonic flight and the engineering obstacles which needed to be overcome to make the SR-71 reach speeds in excess of Mach 3 in 85,000 ft.
\n\nAs of today, its successor the Lockheed Martin SR-72 „Son of Blackbird“ has not yet taken flight – even though in cinemas and the Microsoft Flight Simulator the Lockheed Martin Darkstar has surpassed Mach 10 at least once. 😉
Manche Künstler trifft man mehrfach im Leben. Erik Wernquist ist so ein Künstler. „One revolution per minute“ zeigt uns das Leben an Bord eines Kreuzfahrtraumschiffs…
", "content_encoded": "\nManche Künstler trifft man mehrfach im Leben. Erik Wernquist ist so ein Künstler. „One revolution per minute“ zeigt uns das Leben an Bord eines Kreuzfahrtraumschiffs…
Die Portfolio-Seite von Ivan Tantsiura ist eine wunderbare Fundgrube. Tantsiura arbeitet als Principal Concept Artist bei Crytek, und hat Unmengen an futuristischen Designs geschaffen – unter anderem das RIDON Hoverbike.
\nVerglichen mit dem Speederbike aus Star Wars sieht man beim RIDON Hoverbike, warum das Hoverbike schwebt – und auch, dass diese Art von Schweben schon etwas sehr dynamisches hat. Der Mechanismus (wie auch die Welt des Hoverbikes) erinnern an Simon Stålenhag und seine schwebenden Schiffe.
\nMan bekommt direkt Lust, selber eine kleine Spritztour mit dem RIDON Hoverbike zu machen. Wo bleibt also der Arcade-Automat beziehungsweise das VR-Spiel zum Thema?
", "content_encoded": "\nDie Portfolio-Seite von Ivan Tantsiura ist eine wunderbare Fundgrube. Tantsiura arbeitet als Principal Concept Artist bei Crytek, und hat Unmengen an futuristischen Designs geschaffen – unter anderem das RIDON Hoverbike.
\nVerglichen mit dem Speederbike aus Star Wars sieht man beim RIDON Hoverbike, warum das Hoverbike schwebt – und auch, dass diese Art von Schweben schon etwas sehr dynamisches hat. Der Mechanismus (wie auch die Welt des Hoverbikes) erinnern an Simon Stålenhag und seine schwebenden Schiffe.
\nMan bekommt direkt Lust, selber eine kleine Spritztour mit dem RIDON Hoverbike zu machen. Wo bleibt also der Arcade-Automat beziehungsweise das VR-Spiel zum Thema?
Der Sommermodus für die FRITZ!DECT-Thermostate wird über die FRITZ!Box gesteuert – mit einem festen Zeitplan. Mehr Flexibilität gibt es mit dem Home Assistant, um zum Beispiel auf Temperaturdaten oder Wetterprognosen reagieren zu können.
Der Sommermodus für die FRITZ!DECT-Thermostate wird über die FRITZ!Box gesteuert – mit einem festen Zeitplan. Mehr Flexibilität gibt es mit dem Home Assistant, um zum Beispiel auf Temperaturdaten oder Wetterprognosen reagieren zu können.
Dummerweise lässt sich der Sommermodus an den Thermostaten vom Home Assistant aus nicht einfach auslösen. Und selbst die im Home Assistant vorhandene Möglichkeit, den Thermostat einfach auszuschalten, funktioniert nicht wirklich gut – der nächste Schaltbefehl an den Thermostat hebt die Abschaltung wieder auf. Außerdem kann der Sommermodus deutlich mehr als nur die Heizung abzuschalten – unter anderem kümmert er sich um das gelegentliche Bewegen der Ventile, um sie vor dem Steckenbleiben zu bewahren.
\n…ist zweiteilig: In der FRITZ!Box legen wir mittels Vorlagen das ein- und ausschalten des Sommermodus' an – und im Home Assistant lösen wir dann die Vorlagen aus.
\n![\"Vorlagen](\"https://journal.3960.org/posts/2023-05-26-sommermodus-mit-fritz-dect-home-assistant/fritz-heizen.png\")
Vorlagen in der FRITZ!Box - nützlicher, als gedacht
Den Druck auf einen dieser Knöpfe könnt ihr im Hone Assistant abfangen und zusätzliche Aktionen auslösen.
\nDazu müsst ihr eine Automatisierung bauen, die beim Druck auf die Knöpfe neben den Vorlagen in der FRITZ!Box noch zusätzliche Aktionen auslösen:
\nalias: "Heizungen: Sommermodus an"\ndescription: ""\ntrigger:\n - platform: device\n device_id: 5f6c4925f76d4ef27407160a968bb7fd\n domain: button\n entity_id: button.heizungen_sommermodus_an\n type: pressed\ncondition: []\naction:\n - service: notify.notify\n data:\n title: "Sommermodus an"\n message: >-\n Alle Heizungen sind nun abgeschaltet, willkommen im Sommermodus.\n enabled: true\nmode: single\nWir haben aber ja die ganze Arbeit nicht auf uns genommen, um im Home Assistant selber auf Knöpfe drücken zu müssen. Tatsächlich können wir Automatisierungen des Home Assistants für uns auf den Knopf drücken lassen.
\nDabei kann in jeder Automatisierung als Aktion der Druck auf die Knöpfe ausgelöst werden:
\naction:\n - service: button.press\n data: {}\n target:\n entity_id: button.sommermodus_an\n enabled: true\nSomit könnt ihr euch nun beliebige Auslöser im Home Assistant konfigurieren, die eure Heizung in den Sommermodus schicken.
\nDie selbe Methode lässt sich neben dem Sommermodus auch für den Urlaubsmodus und eigentlich jede andere Vorlage in der FRITZ!Box anwenden. Dafür müsst ihr nur jeweils in der FRITZ!Box das gewünschte Verhalten als Vorlage definieren, um danach den zugehörigen Button im Home Assistant drücken zu können – beziehungsweise durch eine Automatisierungen auslösen zu können.
\nTheoretisch könnt ihr darüber auch abweichende Zeitpläne oder geänderte Spar-/Komforttemperaturen oder zeitlich begrenzte EInstellungen wie Boost oder Fenster-Modus aktivieren.
![\"\"](\"https://journal.3960.org/posts/2023-03-05-24h-uhr-als-web-component/24h-clock-240x240.png\")
Web Components zu bauen ist gar nicht so kompliziert, selbst ohne Framework. Nach meinen vorherigen Überlegungen zur Verwendung von SVGs in Web Components war es also höchste Zeit, eine 24-Stunden-Uhr zu bauen.
Web Components zu bauen ist gar nicht so kompliziert, selbst ohne Framework. Nach meinen vorherigen Überlegungen zur Verwendung von SVGs in Web Components war es also höchste Zeit, eine 24-Stunden-Uhr zu bauen.
24h-Uhren sind analoge Uhren, die einen feinen Unterschied zu herkömmlichen Uhren aufweisen. An Stelle von 12 Stunden pro Umdrehung des Stundenzeigers zeigen sie 24 Stunden an. Damit braucht also der Stundenzeiger einen kompletten Tag für einen Vollkreis.
\nDamit ist es möglich, die vierundzwanzig Stunden auf dem Ziffernblatt grafisch in Tag, Dämmerung und Nacht einzuteilen. Da diese sich in Bezug auf das Datum und die geografische Position verändern, brauchte die Uhr also auch diese Informationen. In meinem Fall habe ich eine Skala auf dem Stundenring angebracht, die sich für die Nacht dunkelblau, für die Dämmung mittelblau und für den Tag hellblau verfärbt.
\n![\"Im](\"https://journal.3960.org/posts/2023-03-05-24h-uhr-als-web-component/24h-clock-2.png\")
Im hohen Norden scheint die Sonne heute nur kurz
Der Bau als Web Component erlaubt es nun, die Uhr mit relativ wenig HTML in eine beliebige Seite einzubauen. Unter der Github-Seite zur 24h-Uhr findet sich eine knappe Anleitung, der Einbau einer Web Component muss aber nicht komplizierter sein als:
\n<twentyfour-hours-clock></twentyfour-hours-clock>\nWeitere Attribute erlauben es, die Component vorher mit Werten zu bestücken – die sich auch im Nachhinein mit JavaScript ändern lassen:
\n<twentyfour-hours-clock width="128" height="128" datetime="2011-10-10T14:48:00" longitude="auto" latitude="auto"></twentyfour-hours-clock>\nAuch das Einfärben, Vergrößern und Verkleinern von Einzelteilen der Web Component sind mit CSS Custom Properties möglich:
\n<style>\ntwentyfour-hours-clock {\n --color-watchhand: pink;\n --color-night: #111111;\n}\n</style>\n<twentyfour-hours-clock></twentyfour-hours-clock>\nDie Web Component selber wurde mit TypeScript gebaut. Tatsächlich wäre auch der Bau direkt in Vanilla JavaScript möglich gewesen. Meine letzten Abenteuer in TypeScript sind aber so angenehme Erfahrungen gewesen, dass ich die Unterstützung bei der Typisierung in JavaScript nicht mehr missen möchte, und die Web Component in TypeScript gebaut habe. Inzwischen halte ich bei JavaScript die Verwendung von TypeScript für so hilfreich, dass ich auf ESLint zur Überprüfung meiner Programmierung bei Privatprojekten gerne verzichte.
\nEin funktionierendes Beispiel für die fertige Uhr findet sich auf der Demonstrationsseite für die 24h-Uhr.
![\"\"](\"https://journal.3960.org/posts/2023-02-14-pragmatische-heizungssteuerung-home-office/ha-301-240x240.png\")
Mein neuestes Abenteuer mit dem Home Assistant in Verbindung mit FRITZ!DECT 301 beschäftigt sich mit einer smarten Heizungssteuerung für das Home-Office.
Mein neuestes Abenteuer mit dem Home Assistant in Verbindung mit FRITZ!DECT 301 beschäftigt sich mit einer smarten Heizungssteuerung für das Home-Office.
Ach, was habe ich alles gebaut und gebastelt. Los ging es mit einem einfachen Zeitplan in der FRITZ!Box, der jeden Montag bis Freitag in der Arbeitszeit die Heizung ein- und danach wieder ausschaltete. Ich war's zufrieden.
\nAber an Feiertagen, die zwischen Montag und Freitag lagen, lief die Heizung immer noch. Höchste Zeit, den Werktags-Sensor über den Home Assistant zu verbauen und in die Heizungssteuerung mit einzubeziehen. Dafür musste ich dann den Zeitplan aus der FRITZ!Box entfernen und ebenfalls in den Home Assistant übertragen.
\nUnd im Urlaub? Urlaube sind ja keine Feiertage. Also noch einen Kalender in den Home Assistant integriert, der an Urlaubstagen die Heizung ebenfalls ausgeschaltet hält.
\nOha, Gleitzeit und Überstunden: Mal starte ich früher, mal höre ich später auf. Also diesen Teil von Hand steuern? Und wie ist es am Wochenende, wenn man im Arbeitszimmer am privaten PC etwas bastelt?
\nWie man es auch dreht und wendet – der Plan hatte inzwischen viel zu viele Variablen bekommen. Eigentlich wollte ich doch nur, dass die Heizung läuft, wenn ich im Raum bin! Aber wie kann ich das dem Home Assistant beibringen?
\nGanz einfach! Ob im Büro jemand arbeitet kann man daran erkennen, dass einer der PCs im Büro eingeschaltet ist. Ein super-simples Rezept kann also prüfen, ob mindestens einer der Rechner dort an und im Netzwerk sichtbar ist, und schaltet entsprechend die Heizung an. Wenn keiner der Rechner im Netzwerk ist, wird die Heizung entsprechend ausgeschaltet.
\n![\"\"](\"https://journal.3960.org/posts/2023-02-14-pragmatische-heizungssteuerung-home-office/network-240x240.png\")
Dazu bauen wir uns einen Zustand, der eingeschaltet ist, wenn irgendeiner der PCs angeschaltet und im Netzwerk ist – und erst ausgeschaltet ist, wenn alle PCs ausgeschaltet sind. Das funktioniert wie folgt:
arbeitspferd und daddelkiste.device_tracker beginnt. In meinem Beispiel gehen wir von zwei PC-Trackern aus, device_tracker.arbeitspferd und device_tracker.daddelkiste.configuration.yaml nun so erweitert werden, dass die beiden Tracker (oder beliebig viele Tracker) zu einem Sammel-Tracker zusammengefasst werden.- name: "Home-Office PCs"\n unique_id: device_tracker_homeoffice\n state: "{{ is_state('device_tracker.arbeitspferd', 'home') or is_state('device_tracker.daddelkiste', 'home') }}"\n icon: "mdi:lan-connect"\n device_class: presence\nNach einmaligem Neustart sollte unter „Entwicklerwerkzeuge > Zustände“ der neue Tracker sichtbar sein. Er heißt dann wahrscheinlich binary_sensor.device_tracker_homeoffice.
Unser neuer kleiner Device-Tracker „Home-Office PCs“ kann nun zum Beispiel auf dem Dashboard verbaut werden. Sobald eines der Geräte eingeschaltet wird, wird auch der Tracker eingeschaltet – beim Ausschalten gibt es knapp zwei Minuten Verzögerung, bis der Home Assistant das Gerät wirklich als offline annimmt.
\nDer Home Assistant kann nun die Programmierung der FRITZ!Box verbessern. Dafür wird in der FRITZ!Box die Heizung zu 100% in den Spar-Modus geschickt, weil ab sofort der Home Assistant die Heizung zwischen Spar- und Komfort-Modus hin- und herschaltet. Die Verbindung ist dabei einfach:
\nUnter „Einstellungen > Automatisierungen & Szenen“ fügen wir dazu ein einfaches Rezept hinzu:
\n# Replace all occurences of `office` with your thermostat's identifier\n# `device_id` has to be assigned via GUI\nalias: "Office: Someone is there"\ndescription: "Be nice, and turn on the heating if someone is using a PC in the office"\ntrigger:\n - platform: state\n entity_id:\n - binary_sensor.device_tracker_homeoffice\n from: "on"\n - platform: state\n entity_id:\n - binary_sensor.device_tracker_homeoffice\n to: "on"\naction:\n - if:\n - condition: state\n entity_id: binary_sensor.device_tracker_homeoffice\n state: "on"\n then:\n - device_id: b46c4851235fb8c90f4a659b6e9a953d\n domain: climate\n entity_id: climate.office\n type: set_preset_mode\n preset_mode: comfort\n else:\n - device_id: b46c4851235fb8c90f4a659b6e9a953d\n domain: climate\n entity_id: climate.office\n type: set_preset_mode\n preset_mode: eco\nmode: single\nErst mit der Zusammenfassung der beiden Zustände zu einem Tracker ist es sauber möglich, zwischen Spar- und Komfort-Modus hin- und herzuschalten. Wenn wir die Tracker trennen würden könnte es ansonsten passieren, dass das Ausschalten eines Rechners die Heizung deaktiviert, obwohl der andere Rechner eigentlich noch läuft.
\nTatsächlich kann man diese Idee auch auf andere Geräte ausdehnen, wie zum Beispiel Fernseher und Spielekonsolen, die ebenfalls im Internet hängen. Eine kleine Automatisierung könnte also abends die Heizung noch etwas länger an lassen, solange der Fernseher läuft.
\nOder wie wäre es mit einem Sammel-Tracker, der die Smartphones aller Haushaltsteilnehmer als Schalter verwendet?
![\"\"](\"https://journal.3960.org/posts/2023-01-01-fritz-box-home-assistant-remote/ha-301-240x240.png\")
Der Home Assistant hat gegenüber vielen anderen Smart-Home-Lösungen einen Vorteil: Er benötigt keinen Internet-Dienst, um zu funktionieren. Damit ist er von vorne herein sehr sicher, da initial keine Daten aus eurem Smart-Home ins Internet entweichen.
Einen kleinen Nachteil hat diese Konstruktion aber: Euer Home Assistant lässt sich nicht außerhalb eures Heimnetzwerks steuern. Oder?
", "content_encoded": " Der Home Assistant hat gegenüber vielen anderen Smart-Home-Lösungen einen Vorteil: Er benötigt keinen Internet-Dienst, um zu funktionieren. Damit ist er von vorne herein sehr sicher, da initial keine Daten aus eurem Smart-Home ins Internet entweichen.
Einen kleinen Nachteil hat diese Konstruktion aber: Euer Home Assistant lässt sich nicht außerhalb eures Heimnetzwerks steuern. Oder?
\n\nNatürlich stimmt das nicht: Direkt im Home Assistant wird Werbung für die Home Assistant Cloud gemacht. Mit diesem kleinen Dienst kann eure vormals nicht im Internet erreichbare Lösung auch außerhalb eures Heimnnetzwerks angesprochen werden. Neben der Tatsache, dass ihr damit ein Sicherheitsfeature eures Home Assistants über Bord geworfen habt, kostet dieser Dienst aber auch Geld.
\nTatsächlich ist der entscheidende Satz, dass euer Home Assistant nur aus eurem Heimnetzwerk zugreifbar ist… beziehungsweise, wenn ihr Zugriff auf euer Heimnetzwerk habt. Wenn ihr also mittels eine Virtual Private Networks auch außerhalb eurer WLAN-Reichweite euch in euer Heimnnetz einwählen könnt, könnt ihr natürlich auch auf euren Home Assistant zugreifen.
\nDas schöne an dieser Lösung: Der Zugang zu eurem System ist somit nur durch eine VPN-Verbindung möglich; die Daten eures Systems wie auch der Zugang zum Home Assistant sind nicht direkt im Internet verfügbar.
\nDie AVM FRITZ!Box bietet netterweise einen eingebauten VPN-Dienst, der euch mit beliebigen Betriebssystemen für PCs, Laptops und Smartphones eine VPN-Verbindung erlaubt. Die Einrichtung ist nicht schwierig, aber voller Fallstricke.
\nRichtet also auf eurer AVM FRITZ!Box einen VPN-Zugang ein, aber mit einer wichtigen Änderung: Wenn euer Home Assistant bereits mit der FRITZ!Box eingerichtet wurde, solltet ihr keinesfalls (wie von AVM vorgeschlagen) eure FRITZ!Box (und damit alle anderen Netzwerkteilnehmer) mit neuen IPs versehen. Denn der Home Assistant merkt sich für so ziemlich jedes Gerät explizit die IP, und eine Änderung ist ein größerer Schmerz. Tatsächlich könnt ihr die IP eurer FRITZ!Box so belassen – und verliert nur die Möglichkeit, über einen Router mit der selben IP das VPN zu benutzen. Tatsächlich erhaltet ihr aber bei einer Mobilverbindung immer eine IP außerhalb des Heimbereichs, könnt also problemlos das VPN nutzen.
\nAn eurem Home Assistant muss keine weitere Änderung vorgenommen werden. Sobald ihr die VPN-Verbindung aufgebaut habt, könnt ihr sowohl im Browser als auch über die App den Home Assistant benutzen, als ob ihr im Heimnetzwerk wärt.
\nInteressanterweise kann eure Home Assistant App (zumindest unter Android) auch außerhalb des Heimnetzwerks Benachrichtigungen eures Home Assistants empfangen. Das liegt daran, dass der Home Assistant mit dem Übertragen der Benachrichtigungen einen Android-Dienst außerhalb eures Netzwerks beauftragt, der euch die Nachrichten über das Internet zustellt.
\n![\"\"](\"https://journal.3960.org/posts/2022-11-08-fritz-dect-301-home-assistant/ha-301-240x240.png\")
Heizungssteuerung ist in aller Munde. Als Besitzer einer FRITZ!Box habe ich mir also ein paar FRITZ!DECT 301 Thermostate der Firma AVM zugelegt, um meine Heizung sparsamer zu machen.
Und dann bin ich dummerweise auf Home Assistant aufmerksam gemacht worden, mit dem man die etwas spartanischen Möglichkeiten der Thermostate gewaltig aufbohren kann.
\nBegleitet mich auf meiner Reise in den Kaninchenbau.
", "content_encoded": " Heizungssteuerung ist in aller Munde. Als Besitzer einer FRITZ!Box habe ich mir also ein paar FRITZ!DECT 301 Thermostate der Firma AVM zugelegt, um meine Heizung sparsamer zu machen.
Und dann bin ich dummerweise auf Home Assistant aufmerksam gemacht worden, mit dem man die etwas spartanischen Möglichkeiten der Thermostate gewaltig aufbohren kann.
\nBegleitet mich auf meiner Reise in den Kaninchenbau.
\n\nBei der Steuerung der Thermostate ist wichtig zu wissen, dass der Home Assistant (wie auch die FRITZ!Box selber) nur in festen Intervallen Aufträge an die Thermostate übertragen kann. Im schlimmsten Fall dauert es bis zu 15 Minuten, bis euer Auftrag dort angekommen ist. Wenn ihr also Automatisierungen oder eine Steuerung bastelt, müsst ihr etwas Vorlauf in Kauf nehmen.
\nMeine Philosophie bei der Integration des Home Assistant war wie folgt:
\nNach der Installation wird man von den etwas überzüchteten Heizkörperreglern in der Oberfläche des Home Assistant begrüßt. Meine Regler sollen nur aus drei Teilen bestehen:
\nDas ist tatsächlich schön konfigurativ zu lösen…
\n![\"\"](\"https://journal.3960.org/posts/2022-11-08-fritz-dect-301-home-assistant/ha-301-config-400x225.png\")
…oder mit dem folgendem YAML als schnelles Rezept für das Dashboard:
\n# Replace all occurences of `wohnzimmer` with your thermostat's identifier\ntype: thermostat\nfeatures:\n - style: icons\n preset_modes:\n - eco\n - comfort\n type: climate-preset-modes\nentity: climate.wohnzimmer\n(Update 2024–02: Die neuen Konfigurationsmöglichkeiten des Home Assistant haben den Einbau weiterer Knöpfe deutlich vereinfacht.)
\nDurch den Home Assistant werden die FRITZ!DECT 301 Thermostate folgerichtig als Thermostate erkannt. Tatsächlich beinhalten sie aber auch einen Temperatur-Sensor, den man mit etwas Bastelei auch im Dashboard anzeigen kann.
\nMit dem Home Assistant Community Add-on: Visual Studio Code kann die configuration.yaml um die folgenden Zeilen erweitern werden:
# Converting thermostats into thermometers\n# Replace all occurences of `wohnzimmer` with your thermostat's identifier\ntemplate:\n - sensor:\n - name: "Wohnzimmer Heizung Temperatur"\n unique_id: wohnzimmer_heizung_temperatur\n state: "{{ state_attr('climate.wohnzimmer', 'current_temperature') }}"\n unit_of_measurement: "°C"\n device_class: temperature\nDanach können diese Sensoren im Dashboard angezeigt werden:
\n# Replace all occurences of `wohnzimmer` with your thermostat's identifier\ntype: gauge\nentity: sensor.wohnzimmer_heizung_temperatur\nmin: 10\nmax: 32\nseverity:\n green: 21\n yellow: 23\n red: 25\nDie FRITZ!DECT 301 Thermostate können in einen Urlaubsmodus geschickt werden – ein Zustand, der im Home Assistant ebenfalls ausgelesen werden kann. Besonders luxuriös geschieht das mit einem eigenen Binär-Sensor.
\nMit dem Home Assistant Community Add-on: Visual Studio Code kann die configuration.yaml um die folgenden Zeilen erweitern werden:
# Replace all occurences of `wohnzimmer` with your thermostat's identifier\ntemplate:\n - binary_sensor:\n - name: "Wohnzimmer Heizung Urlaubsmodus"\n unique_id: wohnzimmer_heizung_urlaubsmodus\n state: "{{ state_attr('climate.wohnzimmer', 'holiday_mode') }}"\n icon: "mdi:bag-checked"\nAnalog lässt sich auch der Sommermodus der Heizung in der configuration.yaml als eigener Sensor einrichten:
# Replace all occurences of `wohnzimmer` with your thermostat's identifier\ntemplate:\n - binary_sensor:\n - name: "Wohnzimmer Heizung Sommermodus"\n unique_id: wohnzimmer_heizung_sommermodus\n state: "{{ state_attr('climate.wohnzimmer', 'summer_mode') }}"\n icon: "mdi:hvac-off"\nIn der FRITZ!Box hatte ich die Steuerung meiner Büro-Heizung bisher stumpf an die Wochentage Montags bis Freitag gekoppelt. So lief die Heizung auch, wenn ein Feiertag das eigentlich unnötig machte. Höchste Zeit also für den Arbeitstag-Sensor.
\nMit dem Home Assistant Community Add-on: Visual Studio Code kann die configuration.yaml um die folgenden Zeilen erweitern werden:
# Workday sensor\nbinary_sensor:\n - platform: workday\n country: DE\n province: NI # Niedersachsen, Lower Saxony\nDer Home Assistant kann nun die Programmierung der FRITZ!Box verbessern. Dafür wird in der FRITZ!Box die Heizung zu 100% in den Spar-Modus geschickt, weil ab sofort der Home Assistant die Heizung auf den Komfort-Modus schaltet, wenn ein Arbeitstag vorliegt.
\nVorher legen wir uns einen Zeitplan an, den wir in folgende Automatisierung einbinden:
\n# Replace all occurences of `office` with your thermostat's identifier\n# `device_id` has to be assigned via GUI\nalias: "Home Office"\ndescription: Only trigger comfort mode on work days\ntrigger:\n - platform: state\n entity_id:\n - binary_sensor.office_heizung_home_office\ncondition:\n - condition: and\n conditions:\n - condition: state\n entity_id: binary_sensor.workday_sensor\n state: "on"\n - condition: state\n entity_id: binary_sensor.office_heizung_urlaubsmodus\n state: "off"\naction:\n - if:\n - condition: state\n state: "on"\n entity_id: binary_sensor.office_heizung_home_office\n then:\n - device_id: b46c4851235fb8c90f4a659b6e9a953a\n domain: climate\n entity_id: climate.office\n type: set_preset_mode\n preset_mode: comfort\n else:\n - device_id: b46c4851235fb8c90f4a659b6e9a953a\n domain: climate\n entity_id: climate.office\n type: set_preset_mode\n preset_mode: eco\n enabled: true\nmode: single\nHier können aber auch die Vorlagen in der FRITZ!Box hilfreich sein, um aus dem Home Assistant in der FRITZ!Box komplexere Szenarien auslösen zu können.
Die GNOME Shell-Erweiterungen sind für Ubuntu (und andere Linux-Betriebssysteme) ein schöner Weg, um das eine oder andere Verhalten des Betriebssystems aufzubohren.
", "content_encoded": "Die GNOME Shell-Erweiterungen sind für Ubuntu (und andere Linux-Betriebssysteme) ein schöner Weg, um das eine oder andere Verhalten des Betriebssystems aufzubohren.
\n\nDazu muss „GNOME Shell Extensions“ und „GNOME Tweaks“ zuerst installiert werden:
\nsudo add-apt-repository universe\nsudo apt install gnome-tweak-tool\nsudo apt install gnome-shell-extensions\nMeine Lieblings-GNOME-Erweiterungen sind diese:
\n![\"Eine](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet.jpg\")
Da ich mich in letzter Zeit verstärkt mit der Jagd-Fliegerei des Zweiten Weltkriegs beschäftigt habe, musste ich mich wohl oder übel verstärkt mit Flug-Navigation ohne GPS oder sonstige technische Unterstützung auseinandersetzen. Dabei hilft es enorm, den Zusammenhang zwischen Fluggeschwindigkeit und zurückgelegter Strecke zu kennen.
Mittels eines Taschenrechners oder einer App sind solche Berechnungen trivial. Aber wie wäre es, diese Berechnungen ohne elektronische Hilfsmittel zu lösen? Zum Beispiel mit einer Rechenscheibe?
", "content_encoded": " Da ich mich in letzter Zeit verstärkt mit der Jagd-Fliegerei des Zweiten Weltkriegs beschäftigt habe, musste ich mich wohl oder übel verstärkt mit Flug-Navigation ohne GPS oder sonstige technische Unterstützung auseinandersetzen. Dabei hilft es enorm, den Zusammenhang zwischen Fluggeschwindigkeit und zurückgelegter Strecke zu kennen.
Mittels eines Taschenrechners oder einer App sind solche Berechnungen trivial. Aber wie wäre es, diese Berechnungen ohne elektronische Hilfsmittel zu lösen? Zum Beispiel mit einer Rechenscheibe?
\n\nSchon in meinen Ausführungen zum Sichtflug ohne technischen Schnickschnack war eine der entscheidenden Hilfen beim Navigieren ohne elektronische Hilfen (neben der Kenntnis des Geländes und der Ziel-Richtung) vor allen Dingen die Kenntnis der Zeit, die man für eine bestimmten Streckenabschnitt auf dem Flugplan benötigt. Dabei kann bei einer genauen Kenntnis der Streckenlänge und der eigenen Geschwindigkeit über dem Boden relativ exakt berechnet werden, zu welchem Zeitpunkt die Strecke zurückgelegt sein müsste.
\nDie eigentlichen Rechnungen für die Navigation sind recht übersichtlich, solange man die Einheiten korrekt mitführt:
\nDabei gibt es die folgenden Herausforderung beim Kopfrechnen:
\nDie Einheiten umzurechnen ist wegen der nicht ganzzahligen Multiplikatoren teilweise etwas schwierig im Kopf zu vollziehen:
\n| Imperial unit | \nSymbol | \nMetric unit | \n
|---|---|---|
| 1 nautical mile | \n1 NM | \n1852m | \n
| 1 knot | \n1 kn | \n1.852 km/h | \n
| 1 statute mile | \n1 mi | \n1609.344m | \n
| 1 mile per hour | \n1 mph | \n1.609 km/h | \n
…ganz zu schweigen von der Tatsache, dass eine Stunde aus sechzig Minuten besteht und damit eine Stundenangabe mit Nachkommastellen im Kopf schwierig in eine Angabe in Minuten umzurechnen ist.
\nDie Komplikation, dass die gemessene Fluggeschwindigkeit (air speed) nicht zwangsläufig mit der Geschwindigkeit über dem Boden (ground speed) übereinstimmt, ignorieren wir vorerst – können aber bei Kenntnis der Windrichtung und -stärke dies ebenfalls näherungsweise per einfacher Arithmetik mit einbeziehen.
\nIm Regelfall kann man sich mit einzelnen Faustformeln behelfen, die man vorher durchgerechnet haben sollte.
\n\nBei Variablen Strecken und Geschwindigkeiten wird es aber höchste Zeit, sich mit nicht-elektronischen Rechenhilfen auseinanderzusetzen: Rechenschiebern beziehungsweise Rechenscheiben.
\nRechenscheiben sind kompakte, runde Ausführung eines Rechenschiebers. Je nach Findigkeit ihres Konstrukteurs sind sie in der Lage, eine ganze Menge mathematische Operationen rein grafisch-mechanisch durchzuführen. Gerade lineare Zusammenhänge sind mit Hilfe logarithmischer Skalen gut zu lösen. Dabei werden zwei logarithmische Skalen gegeneinander verschoben, das Ergebnis ist dann auf einer dritte Skala ablesbar.
\nSo bietet zum Beispiel der klassische mechanische Navigationsrechner E6-B eine ganze Reihe von Möglichkeiten, Umrechnungen zwischen verschiedenen Einheiten durchzuführen, die für die (Flug-)Navigation hilfreich sind. Ich persönlich wollte aber einen nicht ganz so komplexen Rechner. Stattdessen sollte er übersichtlicher sein, und gleichzeitig alle Grundbedürfnisse eines Jagdfliegers abbilden.
\nHöchste Zeit also, das Grafikprogramm anzuwerfen und sich mit Logarithmen und Winkelberechnungen zu beschäftigen, um einen eigenen Navigations-Drehrechner zu entwerfen.
\nZiel meiner Bemühungen war eine Navigations-Rechenscheibe, die man mit heimischen Hilfsmitteln herstellen konnte. Mein Navigationsrechner sollte folgendes beherrschen:
\nDie ungewöhnliche Ansammlung von verschiedenen Einheiten hat nicht zuletzt damit zu tun, dass je nach Kartenmaterial und Fluggerät sowohl imperiale als auch metrische Angaben wild miteinander kombiniert werden können. So hatten west-alliierte Jagdflugzeuge Angaben in Meilen pro Stunde, während Flugzeuge der Achsenmächte und der Sowjetunion stattdessen Kilometer pro Stunde verwendeten. Andersherum wird zum Beispiel in IL-2 Great Battles ein 10km-Kartenraster verwendet, während Streckenabschnitte in Meilen oder Kilometern angegeben werden können. Bei modernen Simulatoren wiederum werden Geschwindigkeiten in Knoten angegeben, während Strecken gerne in nautischen Meilen gemessen werden.
\n![\"Eine](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet-detail.jpg\")
Nach einigen Papierprototypen habe ich mit dem Distanz-Gerät DG21 eine für mich passable Lösung gefunden, kompakt und übersichtlich alle Anforderungen zu erfüllen. Das Distanz-Gerät besteht aus zwei gegeneinander verdrehbaren Scheiben. In einem Sichtfenster kann dabei die Geschwindigkeit eingestellt beziehungsweise ausgegeben werden, während zwei aufeinander treffende Ringskalen den Zusammenhang zwischen Strecke und Zeit abbilden.
\nDie Funktionsweise ist dabei einfach:
\nSolange zwei der Werte bekannt sind, ergibt sich automatisch der dritte Wert. Darüber hinaus werden alle Zusammenhänge zwischen Strecke und Zeit grafisch angezeigt, ohne die Scheibe weiter manipulieren zu müssen.
\nDie Umrechnungen für Strecke und Geschwindigkeit sind dabei als nebeneinanderliegende, fest miteinander verbundene Skalenringe ausgeführt.
\nDabei habe ich zwei Varianten gebaut, die hier zum Herunterladen, Ausdrucken und Zusammenbasteln bereitstehen:
\nBeide Do-it-yourself-Navigationsrechner können mit einem Drucker auf Papier oder Pappe in der Größe DIN A4 ausgedruckt und mit einem scharfen Messer ausgeschnitten werden. Die beiden Scheiben werden mit einer Musterklammer verbunden, und können danach für die Berechnung gegeneinander verdreht werden.
\nDie Rechner sind außerdem Open Source. Die SVG-Dateien können mit jedem beliebigen Vektor-Programm geöffnet und bearbeitet werden. Und da beide Dateien unter der „Creative Commons“-Lizenz stehen, ist das rechtlich auch ohne Probleme möglich.
Als Fortsetzung von Microsofts Überlegungen zu Augmented Reality:
\n\nAuch wenn es nicht im Fokus des Videos steht: Interessant ist die Verknüpfung von Headsets für Augmented-Reality (z.B. die Microsoft HoloLens) und Virtual-Reality zu einer gemeinsamen Umgebung.
", "content_encoded": "Als Fortsetzung von Microsofts Überlegungen zu Augmented Reality:
\n\nAuch wenn es nicht im Fokus des Videos steht: Interessant ist die Verknüpfung von Headsets für Augmented-Reality (z.B. die Microsoft HoloLens) und Virtual-Reality zu einer gemeinsamen Umgebung.
![\"\"](\"https://journal.3960.org/posts/2020-05-17-ausstattung-fuer-home-office/homeoffice-400x225.jpg\")
Mit wenigen Handgriffen kann man den häuslichen Arbeitsplatzes (aka „Home Office“) deutlich angenehmer und produktiver gestalten.
", "content_encoded": "
Mit wenigen Handgriffen kann man den häuslichen Arbeitsplatzes (aka „Home Office“) deutlich angenehmer und produktiver gestalten.
\n\nIn der Regel erhält man von seinem Arbeitgeber einen Laptop nebst Netzteil ausgehändigt – für ein echtes Büro braucht es aber dann doch etwas mehr als einen Tisch, einen Stuhl und eine Lampe.
\nInspiriert von den Home-Offices von Basecamp-Mitarbeitern folgt hier eine Liste der Dinge, mit der der heimische Arbeitsplatz deutlich angenehmer werden kann.
\nGrundsätzlich muss das Home-Office folgende Eigenschaften erfüllen:
\nHome-Office-Arbeit ist sitzende Arbeit – mehr noch als normale Büro-Arbeit. Und so sollte für die 35–40 Stunden pro Woche der Arbeitsplatz so ergonomisch wie möglich eingerichtet werden. Dreh- und Angelpunkt ist ein vernünftiger Schreibtischstuhl.
\nEin Küchenstuhl oder billiger Schreibtischstuhl (ohne verstellbare Rücken- und Armlehnen) kann das Arbeiten aber schnell zur Tortur machen. Tatsächlich ist ein guter Schreibtischstuhl in der Regel eine nicht unerhebliche Investition – aber eine kleine dreistellige Summe ist hier langfristig betrachtet eine gute Investition in die eigene Rückengesundheit.
\nEin anständiger Monitor vergrößert nicht nur die Bildschirmfläche, sonder erlaubt ein ergonomischeres Sitzen bei der Arbeit. Monitore ab 23 Zoll aufwärts sind zu erschwinglichen Preisen zu haben. Wenn man sowieso einen heimischen PC besitzt, hat man möglicherweise auch bereits einen Kandidaten für den Zweitmonitor herumstehen. Denn an vielen Monitoren gibt es mehrere Monitor-Eingänge.
\nSo kann man heimischen PC und Arbeits-Laptop gleichzeitig anschließen, und am Monitor die gerade aktuelle Quelle auswählen – oder der Monitor ist sogar so schlau, auf die zuletzt aktive Quelle zu wechseln.
\nFalls ihr dagegen einen neuen Monitor anschaffen müsst, lohnt eine kurze Überprüfung, ob euer Laptop nicht DisplayPort via USB-C beherrscht. In diesem Falle kann ein USB-C-Monitor angeschafft werden. Im günstigsten Fall hat der Monitor einen USB-Hub integriert, der gleichzeitig als einfache Docking-Station fungiert – weiteres Zubehör für euren Laptop wird nicht an dem Laptop selber eingestöpselt, sondern am Monitor!
\nDie meisten Laptop-Tastaturen und ihre eingebauten Trackpads eignen sich nur bedingt für längere Tipp-Arbeiten. Schon preisgünstige Tastaturen (wie z.B. die Cherry Stream 3.0 ab ~€20,-) machen nicht nur das Tippen einfacher, sondern bieten auch Medienknöpfe, mit denen man z.B. laufende Musik schnell für ein Telefonat pausieren kann.
\nGleiches gilt für preisgünstige Mäuse (wie z.B. die Logitech M500 ab ~€20,-) – zusätzliche Bedienmöglichkeiten wie ein Scrollrad oder die praktische „Zurück“-Taste erleichtern die Bildschirm-Arbeit ungemein.
\nWenn (wie in meinem Fall) noch ein zweiter Rechner auf dem Schreibtisch steht, kann man entweder mehrere Tastaturen und Mäuse anschaffen. Es gibt aber auch Funktastaturen und -mäuse (wie die Logitech MX-Serie), die problemlos zwischen mehreren Empfängern hin- und herschalten können. Damit liegt nur eine Tastatur und eine Maus auf eurem Schreibtisch, die sich Heim- oder Arbeits-PC verbinden können.
\nSelbst wenn der Laptop an einen Monitor angeschlossen ist, kann er trotzdem weiterhin als Zweit-Monitor dienen. Da mit angeschlossener Maus und Tastatur die Tastatur des Notebooks nicht mehr benötigt wird, kann das Notebook auch in eine ergonomischere Position gebracht werden.
\nDafür gibt es entweder einen Stapel Bücher – oder einen Laptop-Ständer (wie z.B. der Nulaxy C3 ab ~€35,-). Die meisten Laptop-Ständer erzeugen dabei unterhalb des Laptops einen Freiraum, in dem man zusätzliche Dinge ablegen kann – wie zum Beispiel Maus und Tastatur, wenn sie nicht mehr in Verwendung sind. Und ganz nebenbei verbessert die Luft unter dem Laptop die Belüftung bzw. Kühlung des Laptops.
\nFür Telefonate und Videokonferenzen sind die in Notebook eingebauten Mikrofone meist nur ein Notbehelf. Interessanterweise ist bei so ziemlich jedem modernen Notebook der eingebaute 3,5mm-Klinkenstecker nicht nur für normale Kopfhörer geeignet, sondern vor allen Dingen für die von Smartphones bekannten Kombinationen aus Kopfhörern und Mikrofonen.
\nDie Klinken an dem Kopfhörer unterscheiden sich darin, dass sie statt zwei schwarzer Ringe auf dem blanken Teil des Steckers drei Ringe haben. In das Notebook eingesteckt wird dann nicht nur die Audio-Ausgabe in die Kopfhörer gelenkt, sondern die Aufnahme über das Mikrofon des Kopfhörers abgewickelt.
\nIhr könnt also den bei eurem Smartphone mitgelieferten Kopfhörer mit 3,5mm-Klinke einfach in euer Notebook einstecke. Das kostet euch keinen Cent und ist zumeist eine überraschend leistungsfähige Lösung.
\nUnd falls ihr schon einen Bluetooth-Kopfhörer mit integrierten Mikrofon besitzt: Die meisten Notebooks haben ebenfalls Bluetooth eingebaut, so dass ihr diese Kopfhörer ebenfalls mit all ihren Features am Notebook nutzen könnt.
\nWenn ihr mit eurem Notebook öfter zwischen Arbeitsplätzen wechselt, kann die Umstöpselei etwas nerven. Folgende Anschlüsse müssen dann imer wieder angedockt werden:
\nAnstatt sich eine teure (und meist nur für den aktuellen Laptop geeignete) Docking-Station zuzulegen, kann ein USB-Hub (ab €10,-) schon Wunder wirken, um die Anzahl der benötigten Kabel zu reduzieren. Einen schon vorhandenen USB-Hub kann man übrigens preisgünstig zu einer Dockingstation aufrüsten, indem man folgende USB- beziehungsweise USB-C-Zubehörteile ansteckt:
\nFalls euch der Sinn weniger nach Bastelei ist: Auch hier lohnt eine kurze Überprüfung, ob euer Laptop USB-C beherrscht. Schon preisgünstige USB-C-Hubs (ab ~€30,-) bieten nicht nur die Möglichkeit, weitere USB-Geräte anzuschließen, sondern auch Netzwerkkabel, Kopfhörer oder (je nach USB-C-Anschluss) Monitore.
\nEtwas teurer sind dann USB-C-Hubs mit Power Delivery, die euren Laptop mit Strom versorgen können. Hier müsst ihr aber überprüfen, ob euer Laptop auch über den USB-C-Port geladen werden kann, und wieviel Watt er für den Betrieb benötigt. In den meisten Fällen wird man um eine Original-Dockingstation nicht herum kommen, wenn die Stromversorgung gewährleistet sein soll.
\nDie Regelungen für die ergonomische Einrichtung von Arbeitsplätzen sollten auch (oder gerade) daheim beherzigt werden. Mit ein paar kleinen Investitionen und Teilen, die man wahrscheinlich sowieso daheim herumliegen hat, ist das schnell bewerkstelligt.
Der Artikel „How we build the site and use Web Components“ deutet im Nebensatz eine wunderbare Methode an, um in Content-Management-Systemen auf Markdown-Basis redaktionell Web Components zum Einsatz zu bringen.
", "content_encoded": "Der Artikel „How we build the site and use Web Components“ deutet im Nebensatz eine wunderbare Methode an, um in Content-Management-Systemen auf Markdown-Basis redaktionell Web Components zum Einsatz zu bringen.
\n\nMarkdown hat eine oft gar nicht benötigte Eigenschaft: Inline-HTML. In Markdown auftretendes HTML wird nach dem Umwandeln von Markdown in HTML vollkommen unverändert wieder ausgegeben. Also wird folgendes Markdown…
\n![Distanz-Gerät DG21A2](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet_dg21a2.svg\"){kind=link}
![Distanz-Gerät DG21A3](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet_dg21a3.svg\"){kind=link}
This **Markdown example** will <i>output HTML tags</i> as well.\n…zu folgendem HTML:
\n<p>This <strong>Markdown example</strong> will <i>output HTML tags</i> as well.</p>\nWir erinnern uns: Web Components sind durch JavaScript-Bibliotheken definierte HTML-Tags, die mit ihrem eigenen Verhalten und Layout versehen sind. So kann man Web Components wie HTML im Markdown verwenden, z.B. word-count:
<word-count>\n Lorem ipsum _dolor_ sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et _dolore magna_ aliquyam erat, sed diam voluptua.\n</word-count>\n…wird damit zu…
\n<word-count>\n <p>Lorem ipsum <em>dolor</em> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et <em>dolore magna</em> aliquyam erat, sed diam voluptua.</p>\n</word-count>\n…was wiederum im Browser dann den obigen Absatz mit einem kleinen Wort-Zähler dahinter anzeigt.
\nDieser Weg funktioniert unabhängig von der Art des eingesetzten Content Management Systems, solange das CMS redaktionelles Markdown verwendet. Für den Redakteur ist diese Lösung so einfach oder so kompliziert wie einen Wordpress-Shortcode einzusetzen.
\nDazu muss die zu verwendende Web-Component natürlich vorher geladen sein. Dies kann entweder im Template mit einem simplen <script>-Aufruf geschehen – oder (je nach Sicherheitseinstellung des CMS') auch direkt im Markdown des Artikels:
<script type="module" src="https://unpkg.com/@lrnwebcomponents/word-count@2.6.5/word-count.js?module"></script>\nSo oder so steht Redakteuren nun eine hinreichend bedienbare Methode zur Verfügung, in ihren Artikel Web Components zu verwenden. Alleine für diesen Zweck hatte ich schon ein paar Ideen, welche Web Components Redakteuren helfen könnten:
\n<twitter-tweet> zum Einbetten von Tweets<video-embed> zum Einbetten von Videos, zum Beispiel YouTube<map-embed> zum Einbetten von Karten, wie z.B. Google Maps<pull-quote> zum Anzeigen von aus dem Text herausgezogenen Zitaten<linkbox-category> oder <linkbox-tag> zum Einbetten einer Linkbox, die verwandte Artikel anzeigt<chess-board> oder <bar-chart> zum Darstellung von Spezialgrafiken wie einem Schachbrett oder Säulengrafiken (wir erinnern uns: Web Components können auch SVG-Grafiken anzeigen)Zu berücksichtigen wäre nur, dass einige ältere Browser Web Components nicht darstellen können. Das betrifft zum Beispiel auch einige RSS-Reader und E-Mail-Clients, so dass Artikel in diesem Umfeld nur eingeschränkt dargestellt werden. Das kann aber sogar erwünscht sein – denn dann wird das innerhalb des Web-Component-Tags verwendete Markdown bzw. HTML ausgegeben.
Schlaue Beispiele gefällig, was man mit Web Components alles bauen könnte, um HTML zu erweitern?
", "content_encoded": "Schlaue Beispiele gefällig, was man mit Web Components alles bauen könnte, um HTML zu erweitern?
\n\nWeb Components eignen sich ganz hervorragend, um von der Darstellung und/oder Funktionalität her komplexe Aufgaben gekapselt und wiederverwendbar zu lösen. Zudem können Web Components (ähnlich wie <iframe>, <object> und viele andere neue Tags) in ihrem Inneren einen Fallback enthalten, so dass Browser ohne die Fähigkeit zur Darstellung von Web Components trotzdem etwas anzuzeigen haben.
Außerdem können Web Components dieses Fallback gleichzeitig via slot-Mechanismus auswerten, um die Fallback-Inhalte entweder wieder anzuzeigen, oder aber aus dem HTML noch weitere Informationen zu ziehen.
\nAn unnamed
<slot>will be filled with all of the custom element's top-level child nodes that do not have the slot attribute.
Im Sinne des progressive enhancement könnte man also mit Web Components viele alltägliche Probleme lösen:
\n<twitter-status status="https://twitter.com/Interior/status/463440424141459456">\n <blockquote>Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset</blockquote>\n <cite>US Department of the Interior</cite>\n</twitter-status>\nDiese Komponente zieht datenschutzzkonform Tweets von Twitter – und als Fallback braucht sie gar keine weiteren Requests, da der Content bereits auf der Seite zu sehen ist. 😉
\n<video-embed url="https://www.youtube.com/embed/G2dGWH90aew?autoplay=1">\n <a href="https://www.youtube.com/embed/G2dGWH90aew?autoplay=1">Youtube-Video</a>\n</video-embed>\nDiese Komponente verwandelt mittels einfacher Magie den Link zu einem Video in eine Video-Einbettung. Redakteure werden es lieben, nicht mehr mit Embed-Codes herumzuhantieren, sondern einfach den Link zum Video aus der URL-Leiste ihres Browsers kopieren zu können – und trotzdem im fertigen Artikel ein eingebettetes Video zu sehen. (Ein Trick, den das Blogophon auch beherrscht.)
\nMit lite-youtube schon ähnlich umgesetzt: Mit dieser Komponente bekommt man eine deutlich datenschutzkonforme Darstellung eines eingebetteten Videos von YouTube, Viemo oder ähnlichem – ähnlich wie in diesem Blog YouTube-Videos in die Seite eingebettet werden.
<code-highlighted lang="javascript">\n <pre>\n <code>\n …\n </code>\n </pre>\n</code>\nMit dieser Komponente kann ich Code-Beispiel mit Syntax-Highlighting versehen. In dem lang-Attribut wird dabei die verwendete Programmiersprache vermerkt.
<map-embed provider="google-maps" coordinates="53.246, 10.412">\n <a href="https://www.google.de/maps/place/53°14'45.6"N+10°24'43.2"E">Die wunderschöne Stadt Lüneburg</a>\n</map-embed>\nKarten in redaktionellen Kontext sind immer wieder hilfreich, um Orte und ihre Umgebung darzustellen. Als Fallback kann immer noch ein Link zu einer Karten-Plattform angeboten werden.
\n<input-coordinates provider="google-maps">\n <input name="coordinates" type="coordinates" step="0.001" value="53.246, 10.412" />\n</input-coordinates>\nGetreu meiner Idee, ein Eingabefeld für Geo-Koordinaten in HTML anzubieten, könnte diese Komponente eine Geo-Lokalisierung und Kartendarstellung beinhalten, um den Nutzer die Auswahl eines Standorts zu erlauben.
\n<textarea-special type="text/html">\n <textarea name="html">\n …\n </textarea>\n</textarea-special>\nWie lange haben wir schon auf einen einfach im Browser funktionierenden Rich-Text-Editor gewartet. Die Komponente ist sogar so schlau, das generierte HTML wieder in das über ihm liegende Formular zurückzugeben.
\nTheoretisch könnte sie ja aber auch ganz andere Dinge zur Bearbeitung anbieten. text/markdown? text/csv? text/yaml? Warum nicht? Das könnte man alles über das type-Attribut lösen.
![\"\"](\"https://journal.3960.org/posts/2020-04-05-svg-web-components/hsi-240x240.png\")
Web Components erlauben in modernen Browsern, eigene Tags mit beliebig komplexen Verhalten zu definieren. Und wie der Name „Komponente“ schon nahelegt, kann man diese kleinen Bibliotheken beliebig oft weiterverwenden, sobald diese einmalig geladen wurden.
Mit einigen kleinen Kniffen kann die Entwicklung solcher Komponenten noch schneller von der Hand gehen.
", "content_encoded": " Web Components erlauben in modernen Browsern, eigene Tags mit beliebig komplexen Verhalten zu definieren. Und wie der Name „Komponente“ schon nahelegt, kann man diese kleinen Bibliotheken beliebig oft weiterverwenden, sobald diese einmalig geladen wurden.
Mit einigen kleinen Kniffen kann die Entwicklung solcher Komponenten noch schneller von der Hand gehen.
\n\nFür den Einstieg in das Thema Web Components empfiehlt sich die Lektüre der ausgezeichneten Einführung von Google und CSS-Tricks. Andere Anleitungen basieren teilweise auf älteren Ideen, die getrost ignoriert werden können.
\nUpdate 2020–09: Die Vielzahl der Wege, wie man eine Web Component bauen kann, hat webcomponents.dev veranlasst, eine Auflistung aller möglichen Wege zum Erstellen einer Web Component zusammenzustellen.
\nAußerdem lohnt es sich immer, moderne Beispiele anzuschauen. Ich für meinen Teil habe entsprechend versucht, einen Horizontal Situation Indicator als Vanilla-JavaScript Web Component mustergültig zu bauen. Der daraus resultierende Quellcode der „Horizontal Situation Indicator“ Web Component wird im Rahmen dieses Artikels immer wieder als Beispiel herangezogen.
\n\nDie größte Hürde für den angehenden Komponenten-Bauer ist das Verständnis, wie all die schönen Teile zusammenpassen.
\nDa eine Web Compoment gekapselt ist, kann nur über eine vorher definierte Schnittstelle von außen Zugriff auf ihr Verhalten genommen werden. Es ist also sehr sinnig, die Konzeption und den Bau einer Web Component wie den Bau einer Schnittstelle bzw. eines Interfaces zu verstehen.
\nAls Beispiel nehmen wir einfach die fertige Implementation der HSI-Web-Component:
\n<horizontal-situation-indicator id="hsi" heading="45.0" heading-select="0.0"></horizontal-situation-indicator>\nBeim Bau einer Web Component müssen neben dem Namen der Web Component auch die Attribute der Web Component und ihre möglichen Werte definiert werden.
\nDiese Attribute verwandeln sich innerhalb der JavaScript-Repräsentation der Web Component in Properties, die mit den Attributen synchronisiert sind:
\nconst el = document.getElementById('hsi');\nel.getAttribute('heading'); // "45.0"\nel.heading; // "45.0"\n\nel.setAttribute('heading', '60.0');\nel.getAttribute('heading'); // "60.0"\nel.heading; // "60.0"\n\nel.heading = '135.0';\nel.getAttribute('heading'); // "135.0"\nel.heading; // "135.0"\nBei dem Zugriff auf eine Property mit einem - im Namen funktioniert der Zugriff leicht anders:
el.getAttribute('heading-select');\n//el.heading-select existiert nicht\nel['heading-select']; // korrekte Schreibweise in `[]`\nDie Schreibweise mit [] erlaubt auch den dynamischen Zugriff auf Properties:
let attrName = 'heading-select';\n\nel.getAttribute(attrName);\nel[attrName];\nDarüber hinaus kann der Entwickler einer Web Component noch festlegen, dass die Komponente JavaScript-Methoden anbietet. Diese erlauben zum Beispiel von außen der Komponente zu befehlen, komplexe Prozesse innerhalb der Komponente zu erledigen.
\nel.synchronizeHeading();\nDa JavaScript keine Sichtbarkeiten wie public und private für Methoden hat, hat sich als Konvention herausgebildet, private Methoden mit einem _ zu beginnen.
Außerdem kann eine Web Component noch JavaScript-Events erzeugen, die außerhalb der Komponente registriert werden können. So emittiert z.B. das <video>-Tag Events, wenn ein Video beendet wurde, was ohne dieses Event außerhalb des Tags keiner wissen könnte.
Web Components können fast alles darstellen, was auch regulär in einem Browser dargestellt werden kann. Besonderes Augenmerk muss aber darauf gelegt werden, dass alle benötigten Bestandteile in der einen JavaScript-Datei enthalten ist, die die Web Component definiert.
\nAm Einfachsten einzubinden sind die folgenden Dinge:
\nAlle anderen Ressourcen (Bilder, Videos, Töne) können mit einem Trick eingeschmuggelt werden: Mittels Data URLs können Binär-Dateien in Base64-Zeichenketten umgewandelt werden, die dann z.B. im src-Attribut eines <img> eingebunden werden können.
Besonders spannend: SVG-Bilder sind nicht nur schön kompakt in Bezug auf ihren Speicherplatz, sondern können auch direkt in das HTML eingebunden werden – benötigen also den Base64-Trick nicht.
\nIn der Tat gibt es eine ganze Menge Tools, um das Zusammensetzen der einzelnen Teile einer Web Component zu unterstützen. In der Regel reicht aber ein kleiner flotter Node.js-Mehrzeiler als Web Component Build Tool, der aus einzelnen Dateien die eigentliche Web Component zusammensetzt. Die Kurzfassung:
\nconst fs = require('fs');\n\nlet source = fs.readFileSync(`horizontal-situation-indicator.js`).toString();\nlet templateCss = fs.readFileSync(`src/horizontal-situation-indicator.css`).toString();\nlet templateSvg = fs.readFileSync(`src/horizontal-situation-indicator.svg`).toString();\n\nsource = source.replace(/(<style>).*(<\\/style>)/ms, templateCss);\nsource = source.replace(/(<\\/style>).*(`)/ms, templateSvg);\nfs.writeFileSync(`horizontal-situation-indicator.js`, source);\nDas tatsächliche Skript ist zwar etwas komplexer, das Grundprinzip ist aber ein denkbar einfaches: Die Entwicklung von SVG und CSS (oder jedem anderen Dateitypen) findet in separaten Dateien statt, die mit dem obigen Skript einfach in das JavaScript der Web Component hineinkopiert werden. Unter anderem könnte hier auch die Konvertierung von Binär-Daten in ihre Base64-Entsprechung durchgeführt werden.
\nget und set für jede Property abkürzen?Da jeder Web Component eine Liste der zu synchronisierenden Attribute / Properties mit der Methode observedAttributes bekannt gemacht werden muss, kann genau diese Liste im constructor auch zum programmatischen Erzeugern von Gettern / Settern verwendet werden.
this.constructor.observedAttributes.forEach((attrName) => {\n Object.defineProperty(this, attrName, {\n get() {\n return this.getAttribute(attrName);\n },\n set(attrValue) {\n this.setAttribute(attrName, attrValue);\n }\n });\n});\nDiese Methode hat in einigen Web-Components-Frameworks möglicherweise Nachteile – für die Vanilla-Nutzung ist sie aber weitestgehend ungefährlich.
\nDa Web Components sowieso nur in aktuellen Browsern zuverlässig funktionieren, kann man sich gleichzeitig auch auf fortgeschrittene CSS-Möglichkeiten verlassen. Um CSS innerhalb der Komponente von außen zu beeinflussen, verwende ich CSS-Variablen bzw. CSS-Custom-Properties. Innerhalb des CSS' des Komponente definiere ich sie direkt an der DOM-Wurzel der Komponente:
\n:host {\n --background-color: black;\n --foreground-color: white;\n --heading-select-color: cyan;\n --stroke-width: 0.5;\n}\n/*…und verwende diese CSS-Custom-Properties dann später in Variablen - bei mir z.B. als SVG-CSS-Eigenschaften:*/\n\n#background {\n fill: var(--background-color);\n}\n* {\n fill: var(--foreground-color);\n}\n*[stroke] {\n stroke-width: var(--stroke-width);\n}\n\n#heading-select {\n fill: var(--heading-select-color);\n}\nWer nun auch immer diese Komponente verwendet, kann diese CSS-Custom-Properties von außen beeinflussen:
\nhorizontal-situation-indicator {\n --heading-select-color: red;\n --stroke-width: 1;\n}\nBei der Beispiel-Implementation von <horizontal-situation-indicator> kann auch bewundert werden, wie durch JavaScript diese CSS-Custom-Properties am lebenden Objekt verändert werden, und in der Komponente sich alles fröhlich verfärbt.
Ganz nebenbei haben wir für die Komponente eine weitere Schnittstelle geschaffen – in diesem Fall eine Styling-Schnittstelle.
\nUpdate: Andererseits können aber auch einzelne DOM-Knoten ohne CSS-Properties zum expliziten Styling freigegeben werden. Eine Anleitung zum Freigeben von DOM-Knoten aus dem Shadow-DOM zum CSS-Styling bei CSS-Tricks zeigt die notwendigen Anpassungen im HTML:
\n<div part="style-me">…</div>\n…und dem CSS im Eltern-Dokument:
\nhorizontal-situation-indicator::part(style-me) {\n font-weight: bold;\n}\nAuch hier hat wieder der Autor der Komponente die Herrschaft über die Elemente, die er nach außen freigibt – wie bei einer Schnittstelle.
\nDer eigentliche Clou der HSI Web Component ist die generelle Fähigkeit von JavaScript, DOM-Elemente und ihre Eigenschaften zu verändern. Dies können sowohl CSS-Eigenschaften als auch generelle Attribute von DOM-Elementen sein.
\nBei SVG bieten sich die folgenden Operationen an:
\nstroke und stroke-width zur Beeinflussung von Linienfill zur Veränderung der Füllfarbeopacity zur Veränderung der Durchsichtigkeit eines Elementstransform<text>-Knoten mittels .textContentBei SVG gibt es dabei die Möglichkeit, nicht nur via CSS diese Eigenschaften zu beeinflussen, sondern auch durch das Setzen von Attributen innerhalb des SVGs an einzelnen SVG-DOM-Knoten.
\nAuch das ist in der Beispiel-Implementation von <horizontal-situation-indicator> zu bestaunen – hier sind die Attribute der Komponente mit Animationsmethoden verknüpft, so dass Änderungen an den Attributen bzw. Properties der Web Component zeitgleich die Darstellung des eingeschlossenen SVGs ändert.
Da eine Web Component im Endeffekt eine Schnittstelle ist, muss es dazu eine Schnittstellen-Dokumentation geben. Ohne diese Dokumentation können andere Entwickler, die die Komponente verwenden möchten, nicht zuverlässig wissen, wie die Komponente zu bedienen ist.
\nAls Minimum muss eine Dokumentation enthalten:
\n## Properties\n\n| Name | Type | Default | Description |\n| -------------- | ------- | ------- | ------------ |\n| `heading` | `float` | `null` | Lorem ipsum… |\n\n## Methods\n\n| Name | Parameters | Description |\n| -------------- | ---------- | ------------------- |\n| `revHeading` | none | Lorem ipsum… |\n\n## Events\n\n| Name | Description |\n| -------------- | -------------------------------- |\n| `synchronized` | Lorem ipsum… |\n\n## Styling\n\n```css\ncomponent-name {\n --background: color; /* Lorem ipsum… */\n}\n\ncomponent-name::part(part-name) {} /* Lorem ipsum… */\n```\nDer fertige Horizontal Situation Indicator als Web Component ist in einem GitHub-Repository gelandet, und einen Blick auf die fertige Implementation der HSI-Web-Component erlaubt einen interaktiven Blick auf die Zusammenhänge in der Komponente.
Seit geraumer Zeit spinnt meine „Windows Mixed Reality“-Brille. Hin und wieder startet sie nicht, sondern beglückt mich mit der folgenden Fehlermeldung:
\n\nCheck your display cable. Make sure your headset's display cable is plugged in correctly.
Da ich mir furchtbar sicher war, die Brille eigentlich korrekt angekabelt zu haben, und das Kriechen unter den Schreibtisch lästig wurde, habe ich doch tatsächlich eine halbwegs elegante Lösung für dieses Problem gefunden.
", "content_encoded": "Seit geraumer Zeit spinnt meine „Windows Mixed Reality“-Brille. Hin und wieder startet sie nicht, sondern beglückt mich mit der folgenden Fehlermeldung:
\n\nCheck your display cable. Make sure your headset's display cable is plugged in correctly.
Da ich mir furchtbar sicher war, die Brille eigentlich korrekt angekabelt zu haben, und das Kriechen unter den Schreibtisch lästig wurde, habe ich doch tatsächlich eine halbwegs elegante Lösung für dieses Problem gefunden.
\n\nNach einer Recherche zum der WMR-Fehlermeldung mit dem angeblich nicht eingesteckten Kabel wurde mir angeraten, den „Windows Perception Service“ neu starten. Der Vorgang dazu sieht wie folgt aus:
\nspectrum bezeichnet.)Anschließend ertönt das Geräusch, dass für frisch erkannte USB-Geräte reserviert ist, und die WMR-Brille startet ganz normal.
\nDa das Problem inzwischen dauerhaft bei mir auftritt, habe ich diesen Prozess noch weiter abgekürzt. Auf dem Desktop habe ich eine Datei namens restart-mixed-reality.bat angelegt, und in diese Datei die folgende Zeile eingefügt:
net stop spectrum && net start spectrum\nWenn man diese Datei nun mittels Rechtsklick als Administrator ausführt, wird der ganze obige Prozess am Stück durchgeführt, und das Mixed Reality Portal startet.
![\"\"](\"https://journal.3960.org/posts/2019-12-22-firefox-weniger-werbung-mehr-speed-unter-android/firefox-240x240.png\")
Werbung nervt. Tracking nervt. Nerven nervt. Und gerade mobil habe ich eigentlich keine Zeit, meine geringe Download-Rate mit dem Herunterladen von hässlichen Werbemitteln zu verbringen. Aber welche Optionen hat man schon auf einem Smartphone?
Werbung nervt. Tracking nervt. Nerven nervt. Und gerade mobil habe ich eigentlich keine Zeit, meine geringe Download-Rate mit dem Herunterladen von hässlichen Werbemitteln zu verbringen. Aber welche Optionen hat man schon auf einem Smartphone?
Schon vor einiger Zeit war ich auf Firefox für Android gestoßen. Da ich schon immer ein Herz für Mozilla hatte und Firefox einer der wenigen Browser unter Android war, in dem ein AdBlocker funktionierte, war ich von Chrome für Android auf Firefox für Android umgestiegen.
\n\nOh, ein Nerd-Telefon! Android, Firefox und DuckDuckGo.
Ein Wermutstropfen hatte damals Firefox für Android aber: Im Vergleich zu Android-Chrome war er nicht wirklich schnell. Das fiel augenscheinlich auch Mozilla auf, so dass sich in der stetig vergrößernden Palette an Mozillas Android-Apps eine neue Version von Firefox für Android fand: Mozilla Firefox Preview – und die Früchte dieser Arbeit sind nun im regulären Mozilla Firefox integriert worden.
\nVon seinem Vorgänger unterscheidet Firefox Preview neben einer etwas kompakteren Oberfläche vor allen Dingen seine rasante Geschwindigkeit. Bei den Plugins für diesen Browser gibt es auch bekannte AdBlocker, der eingebaute AdBlocker (Enhanced Tracking Protection bzw. ETP genannt) funktioniert aber auch bereits ausgezeichnet (so das meine Bastelei für den FritzBox-AdBlocker für diesen Browser überflüssig wird).
\n![\"Neulich](\"https://journal.3960.org/posts/2019-12-22-firefox-weniger-werbung-mehr-speed-unter-android/firefox-blocked-240x240.png\")
Neulich auf einer ganz normalen Nachrichtenseite.
Nebenbei kann Firefox auch den Webview auf Android ersetzen. Damit sind alle Apps auf dem Telefon, die Webview verwenden, nicht nur mit der Rendering-Engine sondern auch mit dem AdBlocker von Firefox ausgestattet.
Nicht zuletzt ist in Firefox der Dienst „Firefox Sync“ eingebaut. Sobald man sich einen kostenlosen Firefox Account zugelegt hat, können alle anderen mit diesem Account registrierten Firefox-Browser Historie und Lesezeichen teilen. Damit ist das Erlebnis wie bei Google Chrome mit aktivierten Google Account.
\nÜbrigens: Mozillas Bemühen um neue Privatsphären-Services hat Firefox Monitor hervorgebracht. Mit einem Firefox-Account kann man sich so informieren lassen, ob die eigene E-Mail-Adresse von einem Datenleck betroffen ist. Ein sinnvoller Service, der mich zum Beispiel darauf gebracht hat, dass einige von mir benutzte Dienste meine E-Mail-Adresse nebst Passwort-Hash verloren hatten – und merkwürdigerweise ein nicht von mir benutzter Dienst, womit sich hier möglicherweise der Kreis zum Trackingschutz von Mozilla Firefox schließt. 😉
\nUpdate 2020–08: Inzwischen hat sich die Browser-Palette von Mozilla für Android leicht verändert: Der reguläre Mozilla Firefox verbindet die Vorteile vom Firefox Preview mit der Stabilität vom regulären Firefox.