Entwicklerproduktivitätstools: Die 40, die ich tatsächlich jede Woche eröffne

Ich halte auf meinem zweiten Monitor ein Browserfenster geöffnet, das nur Dienstprogramme ist. JSON-Formater, Zeitstempelkonverter, Regex-Tester, Hash-Generator. Es gibt es seit Jahren durch WP Adminify-Releases durch Laravel-Seitenprojekte durch jede nächtliche Debugging-Sitzung, bei der eine Webhook-Nutzlast minimiert eintrifft und ich sehen muss, was tatsächlich darin ist.

Lange Zeit zeigten diese Tabs auf sieben verschiedene Websites Einige waren in Ordnung Einige waren Ad-Farms, die meine Nutzlast auf einen Server hochluden I' d nie gehört Eine davon - I' werde es nicht benennen - ich habe einen Staging-JWT eingefügt, bevor mich der Gedanke einholte: Dieser Token ging einfach über den Draht zu einer anderen Box. Es war ein Inszenierungszeichen, nichts brannte, aber das Gefühl blieb. Ich habe Toolz.dev teilweise gebaut, weil ich meinen eigenen Tab-Strip wollte, und zum Teil, weil ich diesen bestimmten Fehler nie wieder machen wollte.

Dies ist also keine Liste von 500 Tools, die aus einem Verzeichnis gekratzt werden. Es ist das Set, von dem tatsächlich leben Toolz.dev Gerade jetzt - etwa 40 - haben sie sich so organisiert, wie ich sie nutze: bis zu dem Moment am Arbeitstag, an dem ich nach einem greife Jeder läuft in Ihrem Browser Nichts lädt hoch Es gibt kein Konto.

tl; dr: Die fünf öffne ich am meisten, um eine Meile: JSON-Formater Für nicht lesbare API-Antworten, Zeitstempelkonverter Für Log-Forensik, Regex-Tester Für Musterarbeit, Base64-Konverter für JWTs und Daten-URIs und UUID-Generator Für Seeding Testdaten Alles unten läuft clientseitig - Ihre Nutzlast verlässt nie den Tab. Wenn Sie nur eines mit einem Lesezeichen versehen, markieren Sie den JSON-Formatierer mit einem Lesezeichen.

Warum nicht einfach die CLI verwenden?

Faire Frage, und ich benutze die CLI. jq ist besser als jedes Web-Tool für Skripter. base64 -d ist zwei Tastenanschläge. Wenn eine Aufgabe in ein Shell-Skript geht, gehört sie in ein Shell-Skript.

Es gibt jedoch drei Situationen, in denen ein Browser-Tab wirklich gewinnt, und nach ungefähr einem Jahrzehnt habe ich aufgehört, mich wegen ihnen schuldig zu fühlen:

1. Visuelle Rückkopplungsschleifen. Regex ist das Offensichtliche. 14 Übereinstimmungen leuchten in einer Stichprobe von echtem Text, während Sie eingeben, ist eine andere Aktivität als das Ausführen grep -P Und ein Ja/Nein erhalten. Das Gleiche gilt für Farbverläufe und Farben - Sie können sich keinen Hex-Code ansehen.
2. Die Maschine gehört nicht Ihnen. Client-Laptop, gesperrte Arbeitsmaschine, jemand anderes während einer Pairing-Sitzung. kein jq, keine Installationsrechte, keine Zeit.
3. Die Aufgabe ist wirklich einmalig. Ich schreibe kein Python-Skript, um eine CSV in JSON zu konvertieren. Ich werde es einfügen, klicken und mit meinem Leben weitermachen.

Hier ist der ehrliche Vergleich, den ich einem Junior-Entwickler geben würde, der gefragt wird, welchen ich verwenden soll:

Diese letzte Zeile ist die tatsächliche Regel, die ich befolge. Wenn ich etwas mehr als zweimal machen werde, geht es in einem Skript. Alles andere bekommt eine Registerkarte.

Welche Tools öffne ich während eines schlechten API-Tages?

Dies ist der Cluster, der seinen Aufenthalt verdient. Eine API eines Drittanbieters benimmt sich falsch, Sie haben eine Nutzlast und müssen sie verstehen, bevor Sie etwas reparieren können.

JSON-Formatierer - der, den ich & #39;d behalten würde, wenn ich nur einen behalten könnte

Der minimierte JSON ist unlesbar und schlimmer, wenn es ist ungültig Der Browserfehler sagt Ihnen "unerwartetes Token" und einen Zeichenversatz, der für einen Menschen nichts bedeutet. der JSON-Formater Druckt es hübsch mit echter Einrückung und zeigt auf die eigentliche Zeile, die & #39; s gebrochen Neunzig Prozent der Zeit ist der Schuldige ein nachlaufendes Komma, was in JavaScript-Objektliteralen legal und in JSON illegal ist - eine Unterscheidung, die mich mehr Stunden gekostet hat, als ich zusammenzählen möchte Tiefer tauchen: So formatieren Sie JSON onlinedrohen

Base64 Converter - für JWTs und Daten-URIs

Ein JWT besteht aus drei durch Punkte getrennten Base64URL-Segmenten. Fügen Sie die mittlere in die Base64-Konverter Und Sie können die Forderungen - Emittent, Ablauf, Geltungsbereich - lesen, ohne den Token an einen Decoder eines Drittanbieters zu versenden. (ich verwende die JWT-Decoder Wenn ich möchte, dass alle drei Segmente auf einmal analysiert werden, aber ich greife immer noch nach roher Base64, wenn eine Nutzlast seltsam aussieht und ich die Bytes sehen möchte.) Die Unicode Gotcha, und warum btoa() wirft auf ein Emoji, ist in der Base64-Codierungshandbuchdrohen

Zeitstempelkonverter - Protokoll Forensik

1752278400drohen ist das gestern oder 2029? der Zeitstempelkonverter Unix Sekunden, Millisekunden und dreht ISO 8601 In etwas, worüber ein Mensch nachdenken kann, in der Zeitzone, die Ihnen wichtig ist Zwei Drittel meines Incident-Debugging besteht darin, Zeitstempel von drei Diensten aufzureihen, die sich jeweils in einem anderen Format angemeldet haben, und einer davon ist in UTC, während die anderen & #39; t.

YAML-Validator - weil die Einkerbung tragfähig ist

Kubernetes Manifeste, GitHub-Aktionen, Docker-Compose. YAML ist ledspace-signifikant und interpretiert Ihre Absicht still und nicht aus. der YAML-Validator Fängt den Tab-Vs-Space und den nicht zitierten no dass YAML 1.1 hilfreich als boolean analysiert falsedrohen (Ja, wirklich. Das Norwegen-Problem ist real: der Ländercode NO wird false es sei denn, Sie zitieren es.)

JSON Diff - was hat sich eigentlich geändert?

Zwei API-Antworten, eine funktionierende und eine nicht. In einem Texteditor nebeneinander anzustarren ist ein Spiel, das verloren geht. json diff Zeigt Ihnen die drei unterschiedlichen Tasten an und ignoriert die 200, die es nicht tun.

Der Rest des Debug-Regals

• SQL-Formater- für die 90-Zeilen-Abfrage mit vier Joins, die jemand auf eine Zeile geschrieben hat.
• Hash-Generator- MD5/SHA-1/SHA-256/SHA-512, hauptsächlich zur Überprüfung eines Downloads oder eines Cache-Schlüssels.
• Cron Parser- weil 0 */2 * * * und */2 * * * * unterscheiden sich um ein Zeichen und etwa sechzig Mal die Last.
• unterwürgen- PHP serialize() Ausgabe aus a wp_options Reihe Wenn Sie jemals die gespeicherten Einstellungen eines WordPress-Plugins debuggen, wissen Sie genau, warum dies existiert.

Was verwende ich, wenn ich Code schreibe und nicht debugge?

Regex, ohne das Verraten

Ich schreibe Regex in der Regex-Tester bevor es jemals eine Codebasis berührt. Füge ein realistisches Beispiel ein, schreibe das Muster, schaue dir die Spiele an. der Regex-Builder Ist die andere Hälfte davon - it's für wenn Sie wissen, was Sie auf Englisch wollen und können' erinnern Sie sich nicht, ob es 's \b oder \Bdrohen Der Spickzettel mit vollständigem Muster sowie die katastrophale Rückverfolgungsfalle, die einen Server mit einem verschachtelten Quantifizierer einfrieren kann, befindet sich in der Regex Builder-Anleitungdrohen

UUIDs zum Säen

Zwanzig Testreihen, zwanzig eindeutige IDs, gerade jetzt. UUID-Generator Macht v1, v4, und v7 in Massen Verwenden Sie v7 für neue Primärschlüssel - it' s zeitbestellt, so dass Ihr B-Baum-Index tut' nicht zerfetzt werden durch zufällige Einfügungen Ich habe gelernt, dass die teure Art und Weise und schrieb es in der UUID-Generator-Anleitungdrohen

Codierung, beide Geschmacksrichtungen

URL-En für Abfragezeichenfolgen, die enthalten & und = Und ein Raum. HTML-Entitäten Für den Moment müssen Sie anzeigen <script> auf einer Seite als Text und nicht als Vorfallbericht. Diese beiden sind langweilig und ich benutze sie ständig.

Formatstreit

Daten kommen ungefähr immer in der falschen Form. Der Umbausatz umfasst die Bewegungen, die ich tatsächlich mache:

• JSON zu CSV- wenn ein Stakeholder nach & quot; the data" fragt und eine Tabellenkalkulation bedeutet Verschachtelte Objekte werden in Punktnotationsspalten abgeflacht Details in der JSON zu CSV-Leitfadendrohen
• CSV zu JSON- umgekehrt, für die Aussaat.
• json zu Yaml- um einen Config-Blob in etwas zu verwandeln, das ein Mensch bearbeiten wird.
• XML zu JSON- jede ältere SOAP-Integration für immer.
• Binärübersetzer- text ↔ binär/hex/dezimal/oktal. Meistens für den Unterricht und für das ungerade Protokollbyte.

Das gesamte Codierungsregal mit den hinteren Argumenten befindet sich in der Anleitung für die Coding-Toolsdrohen

Welche verwende ich für Text und Inhalt?

Ich schreibe viel - Plugin-Dokumente, Changelogs, dieser Blog Das sind die Tools zwischen Entwurf und Veröffentlichung.

• Wortzähler- Wörter, Zeichen, Lesezeit Auch die schnellste Möglichkeit, eine Meta-Description mit dem 160-Zeichen-Budget zu vergleichen, bevor Google sie kürzt Mehr in der Wortzähler-Anleitungdrohen
• Gehäusekonverter- camelCase, snake_case, kebab-case, PascalCase Ich benenne Variablen in Massen auf diese Weise häufiger um, als ich mein Editor' s Refaktor-Tool verwende, was schwach peinlich, aber wahr ist. Fallkonverter-Anleitungdrohen
• Schneckengenerator- Titel zu URL, mit diakritischen Zeichen, die richtig gehandhabt werden. Café Décor sollte werden cafe-decor, nicht caf-dcordrohen
• Textdiff- zwei Konfigurationsdateien oder zwei Versionen eines Absatzes nebeneinander.
• Lorem Ipsum- Platzhalterkopie für ein Layout, das noch keinen Inhalt hat.
• String Reverse- nische, aber es zeigt sich in der Interviewvorbereitung und in Palindrom-Checks mehr als Sie' denken.

Der Volltextsatz wird in der Handbuch für Textwerkzeugedrohen

Was ist mit Design und Frontend-Arbeit?

Ich bin ein Entwickler, der Dinge akzeptabel aussehen lassen muss, nicht ein Designer. Das ist eine bestimmte Arbeit, und diese drei machen es.

• Farbpflücker- HEX ↔ RGB ↔ HSL, mit Kontrastprüfung, damit Sie don't 3:1-Körpertext versenden HSL ist das Format, das Hover-Zustände zu einer Subtraktion statt zu einer Vermutung macht Vollständige Behandlung: Farbauswahl & Konverter-Anleitungdrohen
• Gradientengenerator- linear, radial, konisch, mit Live-Vorschau und kopierbarem CSS. Schreiben conic-gradient() Blind ist eine besondere Art von Elend. CSS-Gradientengenerator-Anleitungdrohen
• CSS-Minifizierer und HTML-Minifire- für den Moment müssen Sie etwas in eine inline <style> Tag und will es klein.
• Meta-Tag-Generator- Titel, Beschreibung Grafik öffnen, Twitter-Karten und JSON-LD in einem Durchgang. Ich habe das gebaut, weil ich bei jedem Projekt die gleichen vierzehn Tags von Hand geschrieben habe.

Was verwende ich für Dateien - Bilder, PDFs, alles andere?

Die Bildwerkzeuge laufen alle über die Canvas-API des Browsers, was bedeutet, dass ein 4-MB-PNG niemals Ihre Maschine verlässt. Das ist nicht Marketing; es ist genau das, was passiert, wenn die Verarbeitung ein <canvas> und keine Post-Anfrage.

• Bildkompresse- Qualitäts-Slider, Live-Größenauslesung Die meisten Screenshots, die ich versende, fallen ohne sichtbaren Unterschied 70 –85% aus. Siehe die Bildkomprimierungshandbuchdrohen
• Bildgröße ändern- genaue Abmessungen oder ein Prozentsatz, Seitenverhältnis gesperrt.
• Formatkonverter- PNG/JPEG/WebP/AVIF. WebP ist die Standardeinstellung, die ich jetzt versende.
• Hintergrundentferner- führt das Segmentierungsmodell im Browser aus It' ist das eine Tool, bei dem ich den ersten Ladevorgang bemerke.
• QR-Generator- URLs, WLAN-Anmeldeinformationen, vCards. Den ISO/IEC 18004-Encoder für diesen hier habe ich von Hand geschrieben, Fehlerkorrektur und so, was entweder eine tolle Nutzung eines Wochenendes oder eine schreckliche war.
• Passwort-Generator- Verwendungen crypto.getRandomValues(), nicht Math.random()drohen Diese Unterscheidung ist wichtiger als der Längenschieber.

Und ein paar Kleinigkeiten, die ich gebaut habe, weil ich sie einmal brauchte und dann immer wieder brauchte: Einheitenkonverter, Prozentualer Rechner, Datumsdifferenz, Text zur Handschriftdrohen

Der breitere Bildsatz befindet sich in der Anleitung für Bildwerkzeuge, und PDFs bekommen ihre eigene Behandlung in der PDF-Tools-Anleitungdrohen

Wie knüpfen diese in der realen Arbeit an?

Individuell spart jedes Werkzeug eine Minute. Die Verbundenheit erfolgt, wenn Sie sie anketten. Hier ist eine tatsächliche Sequenz von vor einer Woche, bei der eine Integration intermittierend zurückgegeben wurde:

1. Kopieren Sie die fehlgeschlagene Anfrage Authorization Kopfball. Auf den Punkten aufteilen, Segment zwei in die Base64-Konverterdrohen lesen expdrohen
2. exp ist ein Unix-Zeitstempel. in das Zeitstempelkonverterdrohen Es lief 41 Sekunden vor dem Anforderung ab.
3. Das ist ein Uhrverzerrungsproblem, kein Auth-Problem. Überprüfen Sie den Aktualisierungs-Cron mit dem Cron Parser- es wurde der Token alle 60 Minuten für einen Token mit einem 60-minütigen TTL aufgefrischt. Keine Marge. Rennbedingung.
4. Ändern Sie den Cron auf 50 Minuten. fertig

Vier Tools, vielleicht drei Minuten, und die Antwort war eine Änderung eines Cron-Ausdrucks mit einem Zeichen Die Alternative - Protokollierung hinzufügen, neu einstellen, warten, bis es wiederkehrt - war ein halber Tag.

Die andere Kette, die ich ständig leite, ist der Inhalt einer: Entwurf → Wortzähler → Schneckengenerator → Bildkompresse Für das Headerbild → Meta-Tag-Generator → Veröffentlichen.

Warum ist "Klientenseite" eigentlich wichtig?

Vor allem wegen der Story-Token-Geschichte oben in diesem Beitrag. Aber lassen Sie mich eher auf die Behauptung als auf die Hand eingehen, da "Privacy-First" ein Satz ist, der von jeder Bedeutung abgeleitet wurde.

Wenn ein Tool clientseitig ist, wird die Datei oder die Zeichenfolge, die Sie einfügen, von JavaScript behandelt, das auf Ihrem Tab ausgeführt wird. Es geht in eine Variable in den Speicher Ihres Browsers und kommt dadurch wieder heraus. Es gibt keine fetch(), nein FormData, kein Upload. Sie können dies in etwa zehn Sekunden selbst überprüfen: Öffnen Sie DevTools, gehen Sie auf die Registerkarte Netzwerk, fügen Sie etwas in jedes Werkzeug auf Toolz.dev ein und beobachten Sie, wie nichts passiert. Das ist der ganze Beweis. Wenn eine Netzwerkanforderung ausgelöst wird, wenn Sie auf "Konvertieren" klicken, befinden sich Ihre Daten auf dem Server eines anderen.

Was das Sie konkret einkauft:

• Sie können Geheimnisse einfügen. Staging-Tokens, interne API-Antworten, Kunden-CSV. Es geht nirgendwo hin.
• Es ist schnell. Keine Rundreise. A 5 MB JSON-Dateiformate in der Zeit, die der Browser benötigt, um es zu analysieren.
• Keine Dateigröße Decke Jenseits Ihres eigenen RAM.
• Keine Ratengrenze, Weil es keinen Server gibt, der Sie begrenzen kann.

Der Kompromiss ist real und ich werde ihn nennen: Heavy Work (ein 200-MB-Video, ein OCR-Pass über 500 Seiten) ist in einem Browser wirklich langsamer als auf einem Server mit einer GPU. Client-Seite ist die richtige Standardeinstellung, keine universelle Antwort.

Häufig gestellte Fragen

Sind diese Entwicklerproduktivitätstools tatsächlich kostenlos?

Ja - kein Konto, keine Nutzungsobergrenze, kein Test, der abläuft Die Tools laufen auf Ihrer Maschine, was bedeutet, dass sie mich pro Verwendung effektiv nichts kosten, was bedeutet, dass dort' nichts zu messen ist.

Benötige ich ein Konto, um sie zu verwenden?

kein . Öffnen Sie ein Werkzeug, verwenden Sie es, schließen Sie die Registerkarte. Es gibt keine Anmeldewand, und da die Verarbeitung clientseitig ist, gibt es keine Sitzung, an die Ihre Daten überhaupt angehängt werden können.

Ist es sicher, sensible Daten wie API-Schlüssel oder Token einzufügen?

Für die clientseitigen Tools ja - und Sie können es bestätigen, anstatt mir zu vertrauen Öffnen Sie Ihren Browser' s DevTools Network Tab, fügen Sie ein und achten Sie auf ausgehende Anfragen Es gibt't irgendein. Das Einzige, was I'd noch überall vermeiden, auch hier, ist das Einfügen eines Erzeugung Geheimnis, das Sie & #39; t drehen können - nicht wegen des Tools, sondern weil Zwischenablagen, Bildschirmfreigaben und Browsererweiterungen allesamt echte Angriffsflächen sind.

Funktionieren diese Tools offline?

Die Seite muss einmal geladen werden. Danach funktionieren die meisten Tools weiter, wenn Ihre Verbindung unterbrochen wird, da sich das JavaScript, das die Arbeit erledigt, bereits auf Ihrem Tab befindet. Laden Sie die Seite offline neu und Sie erhalten nichts.

Wie vergleichen sich diese mit CLI-Tools wie JQ oder OpenSSL?

Verschiedene Jobs. CLI gewinnt für alles, was Skripten, Wiederholungen oder in CI - it' s zusammensetzbar und reproduzierbar ist Browser-Tools gewinnen für einmalige Aufgaben, alles, was von einer visuellen Vorschau profitiert (Regex, Farbverläufe, Farben, Bildqualität), und Maschinen, wo Sie & #39; t Software installieren können Ich verwende sowohl täglich als auch don' think it& #39; s ein Wettbewerb.

Welche Tools sollte ich zuerst mit einem Lesezeichen versehen?

Wenn Sie Code schreiben: JSON Formatter, Timestamp Converter, Regex Tester, Base64 Converter. Wenn Sie Inhalt schreiben: Wortzähler, Slug-Generator, Bildkomprimierung. Wenn Sie Frontend tun: Farbauswahl, Gradientengenerator, Meta-Tag-Generator. Lesezeichen als Ordner und klicken Sie mit der mittleren Maustaste auf den Ordner, um sie alle gleichzeitig zu öffnen.

Funktionieren die Tools auf dem Handy?

They' reaktionsschnell sind und sie funktionieren, aber I & #39; sei ehrlich - ich habe sie für eine Tastatur und einen breiten Ansichtsfenster entworfen Paste-and-copy-Aufgaben sind in Ordnung auf einem Telefon Alles, was ein Farbspektrum oder ein Regex-Sample betrifft, wird ein Kampf sein.

Gibt es eine API für diese Tools?

Nicht aktuell Alles client-side by design, was grundsätzlich im Widerspruch zu einer serverseitigen API steht Für die programmatische Nutzung sind die zugrundeliegenden Operationen alle ein Bibliotheksaufruf entfernt in welcher Sprache auch immer Sie're bereits schreiben - json_encode, base64_decode, preg_match, und so weiter.

Was sind die besten kostenlosen Online-Tools für Entwickler?

Es hängt von Ihrer Arbeit ab, aber ein solider Kern umfasst Formatierung und Inspektion (JSON Formatter, Base64 Converter), Zeit und Text (Zeitstempelkonverter, Wortzähler, Slug-Generator), Musterarbeit (Regex-Tester) und Medien (Bildkomprimierung, Farbauswahl). Toolz.dev hält mehr als 600 davon an einem Ort, alles kostenlos und clientseitig. Das beste Werkzeug ist normalerweise das, das bereits in einer Registerkarte geöffnet ist, wenn Sie die Reibung treffen.

Kann ich diese Entwicklertools verwenden, ohne etwas zu installieren?

Ja - es gibt nichts zu installieren und keine Erweiterung hinzuzufügen Jedes Tool ist eine Webseite, die ihre Logik in Ihrem Browser ausführt, also öffnen Sie eine URL und beginnen mit der Arbeit an einem beliebigen Betriebssystem Sobald die Seite geladen wurde, funktioniert sie auch dann weiter, wenn Ihre Verbindung abbricht.

Die Kurzversion

Die Produktivität der Entwickler ist kein großes Freischalten. Es ist das Entfernen von hundert kleinen Reibungen: die Nutzlast, die Sie nicht lesen können, den Zeitstempel, den Sie nicht analysieren können, die Regex, die Sie erraten, den Screenshot, der 4 MB beträgt, wenn es 400 KB betragen sollte. Keiner von diesen Einzelnen ist einen Blog-Beitrag wert. Insgesamt sind sie der größte Unterschied zwischen einem Tag, an dem Sie etwas versandt haben, und einem Tag, an dem Sie beschäftigt waren.

Alles hier ist bei Toolz.dev, kostenlos, in Ihrem Browser, mit Ihren Daten auf Ihrem Computer. Beginnen Sie mit dem JSON-Formater- wenn Sie nur einen Tab aus diesem Beitrag nehmen, dann ist das & #39; ist derjenige, der sich bis zur Mittagszeit amortisiert.