Im Jahr 2020 habe ich meinen Job gekündigt und bin zu Hause geblieben, wo ich jeden Tag viel Zeit hatte. Also begann ich mit der Entwicklung einiger entwicklungsbezogener Tools, um Probleme zu lösen, die während der Entwicklung auftraten, oder um ein tieferes Verständnis bestimmter technischer Konzepte zu erlangen.

Jeden Tag kleine Werkzeuge schreiben, die Zeit verging Tag für Tag. Rückblickend war diese Erfahrung tatsächlich recht interessant.

Am Anfang war die Benutzeroberfläche dieser Tools tatsächlich recht rudimentär. Im Laufe der Zeit habe ich jedoch ihr Aussehen kontinuierlich verbessert. Auch wenn sie heute noch nicht als exquisit gelten, haben sie doch erhebliche Fortschritte gemacht.

Um ehrlich zu sein, verfügen diese Tools nur über sehr wenig Benutzerführung und Dokumentation, eher wie meine eigene kleine Welt. Anhand von Google Analytics-Daten habe ich herausgefunden, dass einige Tools möglicherweise nur mich selbst als Benutzer haben, wie zum Beispiel das Micro Image Hosting. Aber gerade weil ich sie selbst nutze, pflege ich sie konsequent, auch wenn die Häufigkeit des Hinzufügens neuer Tools in letzter Zeit zurückgegangen ist.

Was mich erfreut, ist, dass ich einige dieser Tools im Blog von Herrn Ruan Yifeng eingereicht habe und viele der kleinen Tools seine Empfehlung erhalten haben. Das war eine große Ermutigung für mich.

Einige Tools im Zusammenhang mit detaillierten Prinzipien

Diese Tools sollen Entwicklern helfen, ein tieferes Verständnis einiger grundlegender Konzepte und zugrunde liegender Prinzipien zu erlangen.

IEEE754-Gleitkommakonvertierung

Dieses Tool kann Ihnen helfen, die interne Darstellung von Gleitkommazahlen mit doppelter Genauigkeit im IEEE 754-Standard zu verstehen. Es kann Dezimalzahlen in ihre entsprechende Binärdarstellung umwandeln und dabei das Vorzeichenbit, die Exponentenbits und die Mantissenbits deutlich anzeigen. Dies ist sehr hilfreich, um zu verstehen, wie Computer mit Gleitkommazahlen umgehen.

Gemäß dem IEEE754-Standard lautet die Gleitkommakonvertierung für Infinity: Alle Exponentenbits sind 1, alle Mantissenbits sind 0.

Hier ist die Gleitkommakonvertierung für Infinity:

Gemäß dem IEEE754-Standard ist die Gleitkommakonvertierung für 0: Vorzeichenbit ist 0, alle Exponentenbits sind 0, alle Mantissenbits sind 0.

Hier ist die Gleitkommakonvertierung für 0:

UTF-8-Kodierungskonvertierung

UTF-8 ist eine Zeichenkodierung mit variabler Länge. Dieses Tool kann Ihnen helfen zu verstehen, wie Unicode-Zeichen in UTF-8 codiert werden. Sie können jedes Unicode-Zeichen eingeben und das Tool zeigt seine UTF-8-codierte Binärdarstellung an, sodass Sie den Codierungsprozess visuell verfolgen können.

Base64-Kodierungskonvertierung

Base64 ist eine häufig verwendete Codierungsmethode, insbesondere beim Umgang mit Binärdaten. Dieses Tool hilft Ihnen nicht nur, die Prinzipien der Base64-Codierung zu verstehen, sondern bietet auch praktische Codierungs- und Decodierungsfunktionen. Dies ist besonders nützlich für Szenarien, in denen Binärdaten in einer Textumgebung übertragen werden müssen.

Dateityperkennung

Dieses Tool kann Ihnen helfen zu verstehen, wie Sie Dateitypen mithilfe von File Magic Numbers bestimmen. Sie können eine Datei hochladen und das Tool liest die Binärdaten der Datei und ermittelt den Dateityp anhand der magischen Zahl. Dies ist sehr nützlich, wenn Sie mit unbekannten Dateien arbeiten oder Dateitypen überprüfen.

JPEG wird beispielsweise dadurch identifiziert, dass seine Magic Number FF D8 FF DB ist

Bildbezogen

Bildverarbeitung ist ein wichtiger Aspekt der Webentwicklung. Hier sind einige Tools zur Bildverarbeitung.

Mikrobild

Dies ist ein schnelles Bildkomprimierungstool, mit dem Sie die Größe von Bilddateien reduzieren können, ohne die Bildqualität wesentlich zu beeinträchtigen.

Es unterstützt verschiedene Bildformate und unterliegt keinen Einschränkungen hinsichtlich der Dateigröße oder -menge. Dieses Tool ist besonders hilfreich, um die Ladegeschwindigkeit von Websites zu optimieren.

Am wichtigsten ist, dass es mithilfe von Frontend-Technologien implementiert wird, sodass keine Serverkosten anfallen, sodass Sie sich keine Gedanken über Datenschutzprobleme machen müssen. Die Implementierung ähnelt Squoosh, beide nutzen WebAssembly.

Micro-Image-Hosting

Dies ist ein persönliches Image-Hosting-Tool, mit dem Sie ein GitHub-Repository als Ihren persönlichen Image-Host verwenden können. Es bietet einfache Upload- und Verwaltungsfunktionen, sodass Sie bequem auf Bilder in Artikeln oder Webseiten verweisen können. Dies ist ein sehr praktisches Tool für Entwickler, die häufig Bilder online teilen müssen.

Bildfreigabe

Mit diesem Tool können Sie schnell Bilder mit Text erstellen, die sich zum Teilen in sozialen Medien oder zum Erstellen einfacher Poster eignen. Es vereinfacht den Prozess der Kombination von Text und Bildern und ermöglicht Ihnen die Erstellung attraktiver Bilder ohne den Einsatz komplexer Bildbearbeitungssoftware.

Bildplatzhalter

Dies ist ein Bildplatzhalter-Generator-Tool, mit dem schnell Platzhalterbilder in benutzerdefinierter Größe und Farbe erstellt werden können, die sich sehr gut für die Verwendung während des Entwicklungsprozesses eignen. Es kann Ihnen helfen, die Integrität des Seitenlayouts aufrechtzuerhalten, wenn die tatsächlichen Bilder noch nicht fertig sind.

Kodierung und Verschlüsselung

Bei der Webentwicklung müssen wir uns häufig mit verschiedenen Kodierungen und Verschlüsselungen befassen. Hier sind einige verwandte Tools:

URL-Kodierung

Dieses Tool kann Ihnen bei der URL-Kodierung und -Dekodierung helfen, was sehr nützlich für die Verarbeitung von URLs ist, die Sonderzeichen enthalten. Es kann sicherstellen, dass Ihre URLs in verschiedenen Umgebungen korrekt übertragen und analysiert werden.

HTML-Entitätskodierung

Das Tool zur HTML-Entitätskodierung kann Ihnen dabei helfen, Sonderzeichen in HTML-Entitäten umzuwandeln und sicherzustellen, dass sie in HTML korrekt angezeigt werden. Dies ist wichtig, um XSS-Angriffe zu verhindern und die korrekte Darstellung von HTML-Dokumenten sicherzustellen.

Hash-Generator

Dieses Tool kann verschiedene häufig verwendete Hash-Werte generieren, einschließlich MD5, SHA1, SHA256 usw. Es ist sehr nützlich in Szenarien wie der Überprüfung der Datenintegrität und der Passwortspeicherung.

Farbwerkzeuge

Farbe ist ein wichtiges Element im Webdesign. Hier sind einige farbbezogene Tools:

Farbkonvertierung

Dieses Tool kann zwischen verschiedenen Farbmodellen wie RGB, HSL, CMYK usw. konvertieren. Es kann Designern und Entwicklern helfen, frei zwischen verschiedenen Farbdarstellungsmethoden zu wechseln.

Palettengenerator

Mit diesem Tool können Sie Farbtöne und Farbschattierungen erzeugen, was sich sehr gut zum Erstellen konsistenter Farbthemen eignet. Es ermöglicht Ihnen, schnell harmonische Farbschemata zu erstellen und so die Designeffizienz zu verbessern.

Kontrastverhältnis-Rechner

Dieses Tool kann das Kontrastverhältnis zwischen zwei Farben berechnen und Ihnen so helfen, die Lesbarkeit von Text auf Hintergründen sicherzustellen. Dies ist sehr wichtig für die Erstellung von Designs, die den Barrierefreiheitsstandards entsprechen.

Abschluss

Obwohl einige Tools möglicherweise nur von mir selbst verwendet werden, ist es dieser kontinuierliche Prozess des Lernens und Schaffens, der mir das Gefühl gibt, erfüllt und glücklich zu sein.

Ich werde diese Tools weiterhin pflegen und verbessern und heiße jeden willkommen, sie zu nutzen und Feedback zu geben.