Productiviteitstools voor ontwikkelaars: de 40 die ik eigenlijk elke week open

Ik houd een browservenster open op mijn tweede monitor, dat niets anders is dan tabbladen voor hulpprogramma's. JSON-formatter, tijdstempelconverter, regex-tester, hash-generator. Het is er al jaren, via WP Adminify-releases, via Laravel-zijprojecten, tijdens elke nachtelijke foutopsporingssessie waarbij een webhook-payload wordt verkleind en ik moet zien wat er eigenlijk in zit.

Lange tijd wezen die tabbladen op zeven verschillende websites Sommige waren prima Sommige waren ad farms die mijn payload uploadden naar een server I' had nog nooit gehoord Een van hen - I' ga het niet noemen - Ik plakte een enscenering JWT in voordat de gedachte me inhaalde: Dat token ging gewoon over de draad naar de doos van iemand anders. Het was een staging-token, niets verbrandde, maar het gevoel bleef hangen. Ik heb Toolz.dev gebouwd, deels omdat ik mijn eigen tabstrip wilde, en deels omdat ik die specifieke fout nooit meer wilde maken.

Dit is dus geen lijst met 500 tools die uit een directory zijn geschrapt. het is de set die echt voortleeft Toolz.dev op dit moment - zo'n 40 - organiseerden ze de manier waarop ik ze gebruik: op het moment op de werkdag dat ik er één bereik. Iedereen draait in uw browser. Niets uploadt. Er is geen account.

tl;dr: De vijf die ik het meest open, met een mijl: JSON-formatter Voor onleesbare API-reacties, tijdstempel converter Voor log forensisch onderzoek, regex-tester Voor patroonwerk, Base64-converter voor JWT's en data-URI's, en UUID-generator voor het seeden van testgegevens Alles hieronder draait client-side - uw payload verlaat nooit het tabblad Als u slechts een bladwijzer voor één ding maakt, maak dan een bladwijzer voor de JSON-formatter.

Waarom niet gewoon de CLI gebruiken?

Eerlijke vraag, en ik gebruik de CLI. jq is beter dan welke webtool dan ook voor scripting. base64 -d zijn twee toetsaanslagen. Als een taak in een shellscript gaat, hoort deze in een shellscript.

Maar er zijn drie situaties waarin een browsertabblad echt wint, en na ongeveer tien jaar dat ik dit heb gedaan, voel ik me niet meer schuldig over hen:

1. Visuele feedbackloops. Regex is de voor de hand liggende. Het zien van 14 wedstrijden die oplichten in een voorbeeld van echte tekst terwijl je typt, is een andere activiteit dan het uitvoeren van grep -P en een ja/nee krijgen Hetzelfde geldt voor gradiënten en kleuren: u kunt geen hex-code bekijken.
2. De machine is niet van jou. Client-laptop, vergrendelde werkmachine, het bureau van iemand anders tijdens een koppelsessie. heel weinig jq, geen installatierechten, geen tijd.
3. De taak is echt eenmalig. Ik schrijf geen Python-script om één CSV naar JSON te converteren. Ik ga het plakken, klikken en verder gaan met mijn leven.

Hier is de eerlijke vergelijking die ik een junior dev zou geven die vraagt welke te gebruiken:

Die laatste rij is de eigenlijke regel die ik volg. Als ik iets meer dan twee keer ga doen, gaat het in een script. Al het andere krijgt een tabblad.

Welke tools open ik tijdens een slechte API-dag?

Dit is het cluster dat zijn donjon verdient. Een API van een derde partij gedraagt zich misdragen, je hebt een payload en je moet het begrijpen voordat je iets kunt repareren.

JSON Formatter - degene die I' zou behouden als ik er maar één kon houden

Verminderde JSON is onleesbaar, en erger, als het is gebrekkelijk De browserfout vertelt je "onverwachte token" en een karakteroffset die niets betekent voor een mens. de JSON-formatter pretty-prints het met echte inspringing en wijst op de werkelijke lijn that' s gebroken Negentig procent van de tijd is de dader een achterliggende komma, wat legaal is in JavaScript object literals en illegaal in JSON - een onderscheid dat me meer uren heeft gekost dan ik wil optellen Diepere duik: Hoe JSON online te formatteren.

Base64 Converter - voor JWT's en data-URI's

Een JWT is drie base64url-segmenten gescheiden door stippen. Plak de middelste in de Base64-converter en u kunt de claims - uitgever, vervaldatum, scopes - lezen zonder het token naar een decoder van derden te verzenden. (Ik gebruik de JWT-decoder wanneer ik alle drie de segmenten tegelijk wil laten ontleden, maar ik nog steeds naar rauwe Base64 grijp als een payload er raar uitziet en ik de bytes wil zien.) De Unicode gotcha, en waarom btoa() gooit op een emoji, is in de Base64-coderingsgids.

Timestamp Converter - log forensics

1752278400. Is dat gisteren of 2029? de tijdstempel converter draait Unix seconden, milliseconden, en ISO 8601 in iets waar een mens over kan redeneren, in de tijdzone waar je om geeft Twee derde van mijn incidentfoutopsporing is het op een rij zetten van tijdstempels van drie services die elk in een ander formaat zijn ingelogd, en een daarvan is in UTC terwijl de andere zijn't.

YAML Validator - omdat inkeping dragend is

Kubernetes manifesteert, GitHub-acties, docker-componeren. Yaml is een witruimte-significant en het zal uw intentie stilletjes opnieuw interpreteren in plaats van een fout te maken. de YAML-validator vangt de tab-vs-space en de niet-geciteerde no Dat YAML 1.1 op een handige manier boolean false. (Ja, echt. Het probleem van Noorwegen is echt: de landcode NO HALD false tenzij je het citeert.)

JSON Diff - wat is er eigenlijk veranderd?

Twee API-antwoorden, één werkend en één niet. Ze naast elkaar staren in een teksteditor is een verliezend spel. JSON-differentiatie Laat je de drie sleutels zien die verschillen en negeert de 200 die dat niet doen.

De rest van de debugging plank

• SQL-formatter- voor de 90-regelige query met vier joins die iemand op één regel schreef.
• Hash-generator- MD5/SHA-1/SHA-256/SHA-512, meestal voor het verifiëren van een download- of cachesleutel.
• croonparer- omdat 0 */2 * * * en */2 * * * * Verschillen door één personage en ongeveer zestig keer de belasting.
• niet aantoonen- PHP serialize() output uit een wp_options Rij. Als je ooit een debugg van een WordPress-plug-in hebt opgeslagen, weet je precies waarom dit bestaat.

Wat gebruik ik als ik code schrijf, niet debug ik?

regex, zonder te raden

Ik schrijf regex in de regex-tester voordat het ooit een codebase raakt. Plak een realistisch voorbeeld, schrijf het patroon, bekijk de markeringen van de wedstrijden. de Regex-bouwer is de andere helft hiervan - it's voor als je weet wat je wilt in het Engels en can't onthoud of het 's \b of \B. Het volledige patroon spiekbriefje, plus de catastrofale terugtracking-val die een server kan bevriezen met één geneste quantifier, bevindt zich in de Regex Builder-gids.

UUID's voor het zaaien

Twintig testrijen, twintig unieke ID's, nu. UUID-generator doet v1, v4, en v7 in bulk Gebruik v7 voor nieuwe primaire sleutels - it' s tijd-geordend, dus je B-boom index doet ' t worden versnipperd door willekeurige invoegingen Ik leerde dat de dure manier en schreef het op in de UUID-generatorgids.

Codering, beide smaken

URL-encoder Voor queryreeksen die bevatten & en = En een ruimte. HTML-entiteiten Voor het moment moet u weergeven <script> op een pagina als tekst in plaats van als een incidentrapport. Deze twee zijn saai en ik gebruik ze constant.

Formaat geruzie

Gegevens komen ongeveer altijd in de verkeerde vorm aan. De conversieset dekt de bewegingen die ik eigenlijk maak:

• JSON naar CSV- wanneer een stakeholder vraagt om " de data" en betekent een spreadsheet Geneste objecten worden platgedrukt in kolommen met puntnotatie Details in de JSON naar CSV-gids.
• CSV naar JSON- het omgekeerde, voor zaaien.
• json naar yaml- om van een config-blob iets te maken dat een mens zal bewerken.
• XML naar JSON- elke oudere SOAP-integratie, voor altijd.
• binaire vertaler- tekst ↔ binair/hex/decimaal/octaal Meestal voor lesgeven en voor de oneven protocolbyte.

Het hele codeerschap, met de redenering achter elk, is in de Handleiding voor coderingshulpmiddelen.

Welke gebruik ik voor tekst en inhoud?

Ik schrijf veel - plugin docs, changelogs, deze blog Dit zijn de tools tussen concept en publish.

• woord teller- woorden, karakters, leestijd Ook de snelste manier om een meta beschrijving te controleren aan de hand van het budget van 160 tekens voordat Google het afkapt Meer in de Woord teller gids.
• doosomvormer- camelCase, snake_case, kebab-case, PascalCase. Ik hernoem variabelen vaker in bulk op deze manier dan ik mijn editor en#39;s refactor-tool gebruik, wat vaag gênant maar waar is. Case Converter Guide.
• slotenprogramma- titel van URL, waarbij diakritische tekens correct worden afgehandeld. Café Décor zouden moeten worden cafe-decor, niet caf-dcor.
• tekst diff- twee configuratiebestanden, of twee versies van een alinea, naast elkaar.
• Lorem ipsum- tijdelijke kopie voor een lay-out die nog geen inhoud heeft.
• String omgekeerd- niche, maar het komt meer naar voren in de voorbereiding van interviews en in palindroomcontroles dan jij ' zou denken.

De volledige tekstset is gedekt in de Handleiding voor teksthulpmiddelen.

Hoe zit het met ontwerp en frontend werk?

Ik ben een ontwikkelaar die dingen er acceptabel uit moet laten zien, geen ontwerper. Dat is een specifieke baan, en deze drie doen het.

• kleurenkiezer- HEX ↔ RGB ↔ HSL, met contrastcontrole zodat u don't verzendt 3:1 bodytekst HSL is het formaat dat hover states een aftrekking maakt in plaats van een gok Volledige behandeling: Kleurkiezer & suppletiegids.
• Gradiëntgenerator- lineair, radiaal, kegelsnede, met een live preview en kopieerbare CSS. Schrijven conic-gradient() Blind is een speciaal soort ellende. CSS-Gradiator Generatorgids.
• CSS-minifier en html-minifier- voorlopig moet je iets in een lijn brengen <style> Tag en wil het klein.
• Meta-tag-generator- titel, beschrijving, grafiek openen, Twitter-kaarten, en JSON-LD in één keer Ik heb dit gebouwd omdat ik met de hand dezelfde veertien tags schreef op elk project.

Wat gebruik ik voor bestanden - Afbeeldingen, PDF's, al het andere?

De afbeeldingen van de afbeelding lopen allemaal door de Canvas API van de browser, wat betekent dat een 4 MB PNG uw machine nooit verlaat. Dat is geen marketing, het is gewoon wat er gebeurt als de verwerking een <canvas> En geen postverzoek.

• Afbeelding samendrukken- kwaliteit slider, live grootte uitlezing De meeste screenshots die ik verzend dalen 70-85% zonder zichtbaar verschil Zie de Afbeeldingscompressiegids.
• Afbeelding wijzigen- exacte afmetingen of een percentage, beeldverhouding vergrendeld.
• Formaat converter- PNG/JPEG/WebP/AVIF. WebP is de standaard die ik nu verzend.
• Achtergrondverwijderaar- voert het segmentatiemodel uit in de browser. It' is het enige hulpmiddel waarbij ik de eerste belasting opmerk.
• QR-generator- URL's, WiFi-referenties, vCards. Ik schreef de ISO/IEC 18004-encoder hiervoor met de hand, foutcorrectie en zo, wat een geweldig gebruik van een weekend of een verschrikkelijk weekend was.
• Wachtwoordgenerator- gebruik crypto.getRandomValues(), niet Math.random(). Dat onderscheid is belangrijker dan de lengteschuifregelaar.

En een paar kansen en doelen die ik heb gebouwd omdat ik ze een keer nodig had en ze toen nodig had: eenheidsconverter, Percentage rekenmachine, Datumverschil, tekst naar handschrift.

De bredere beeldset is in de Gids voor afbeeldingenhulpmiddelenen pdf's krijgen hun eigen behandeling in de Handboek voor PDF-hulpprogramma'.

Hoe ketenen deze aan elkaar in echt?

Individueel bespaart elke tool een minuut. De compounding gebeurt wanneer je ze ketent. Hier is een echte reeks van een week geleden, het debuggen van een integratie die 401s met tussenpozen terugbracht:

1. Kopieer het falende verzoek's Authorization kop. Splits op de stippen, plak segment twee in de Base64-converter. zich laten lezen exp.
2. exp is een Unix-tijdstempel. in de tijdstempel converter. Het verliep 41 seconden voordat het verzoek werd afgevuurd.
3. Dat is een klok scheef probleem, geen auth-probleem. Controleer de vernieuwingscron met de croonparer- het was het verfrissen van het token elke 60 minuten voor een token met een TTL van 60 minuten Geen marge Race conditie.
4. Verander de cron in 50 minuten. Klaar.

Vier tools, misschien drie minuten, en het antwoord was een verandering van één teken in een cron-expressie. Het alternatief - loggen toevoegen, opnieuw implementeren, wachten tot het terugkeert - was een halve dag.

De andere keten die ik constant voer is de inhoud één: concept → woord teller → slotenprogramma → Afbeelding samendrukken voor de kopafbeelding → Meta-tag-generator → publiceren.

Waarom doet "cliënt-side" er eigenlijk toe?

Vanwege het staging-token-verhaal bovenaan dit bericht, meestal. Maar laat me precies zijn over de bewering in plaats van met de hand golvend, aangezien "privacy-first" een zin is die van alle betekenis is verwijderd.

Wanneer een tool aan de clientzijde is, wordt het bestand of de tekenreeks die u plakt afgehandeld door JavaScript die op uw tabblad wordt uitgevoerd. Het gaat in een variabele in het geheugen van uw browser en komt als resultaat terug. er is geen fetch(), nee FormData, geen upload. Je kunt dit in ongeveer tien seconden zelf verifiëren: open devTools, ga naar het tabblad Netwerk, plak iets in een tool op Toolz.dev en kijk hoe er niets gebeurt. Dat is het hele bewijs. Als een netwerkverzoek wordt geactiveerd wanneer u op "Converteren" klikt, staan uw gegevens op de server van iemand.

Wat dat je concreet koopt:

• Je kunt geheimen plakken. Staging-tokens, interne API-antwoorden, CSV van een klant. Het gaat nergens heen.
• Het is snel. Geen rondreis. Een 5 MB JSON-bestandsindelingen in de tijd die de browser nodig heeft om het te ontleden.
• Geen bestandsgrootte plafond Voorbij je eigen RAM.
• Geen tarieflimiet, Omdat er geen server is om u te beoordelen.

De afweging is echt en ik zal het noemen: zwaar werk (een video van 200 MB, een OCR-pass meer dan 500 pagina's) is echt langzamer in een browser dan op een server met een GPU. Client-side is de juiste standaard, geen universeel antwoord.

Veelgestelde vragen

Zijn deze productiviteitstools voor ontwikkelaars eigenlijk gratis?

Ja - geen account, geen gebruiksplafond, geen proefversie die verloopt De gereedschappen draaien op uw machine, wat betekent dat ze me effectief niets per gebruik kosten, wat betekent dat er & # 39; niets te meten is.

Heb ik een account nodig om ze te gebruiken?

heel weinig Open een tool, gebruik deze, sluit het tabblad. Er is geen aanmeldingsmuur en omdat de verwerking aan de clientzijde is, is er in de eerste plaats geen sessie om uw gegevens aan te koppelen.

Is het veilig om gevoelige gegevens zoals API-sleutels of tokens te plakken?

Voor de client-side tools, ja - en je kunt het bevestigen in plaats van mij te vertrouwen Open je browser' s DevTools Network tab, plakken, en kijken voor uitgaande verzoeken Er zijn't een. Het enige dat I'd nog steeds overal vermijdt, ook hier, is plakken a product geheim dat u kunt't roteren - niet vanwege de tool, maar omdat klemborden, schermshares en browserextensies allemaal echte aanvalsoppervlakken zijn.

Werken deze tools offline?

De pagina moet één keer laden. Daarna blijven de meeste tools werken als je verbinding wegvalt, omdat het JavaScript dat het werk doet al in je tabblad staat. Laad de pagina opnieuw terwijl je offline bent en je krijgt niets.

Hoe verhouden deze zich tot CLI-tools zoals JQ of OpenSSL?

Verschillende taken CLI wint voor alles wat gescript, herhaald of in CI - it' samengesteld en reproduceerbaar is Browsertools winnen voor eenmalige taken, alles wat baat heeft bij een visuele preview (regex, gradiënten, kleuren, beeldkwaliteit) en machines waar je ' t software kunt installeren Ik gebruik zowel dagelijkse als don't think it's een wedstrijd.

Welke tools moet ik als eerste bookmarken?

Als u code schrijft: JSON-formatter, tijdstempelconverter, regex-tester, base64-converter. Als u inhoud schrijft: Word-teller, Slug Generator, Image Comprimeren. Als u frontend doet: kleurenkiezer, verloopgenerator, meta-taggenerator. Maak een bladwijzer voor ze als een map en klik met de middelste klik op de map om ze allemaal tegelijk te openen.

Werken de tools op mobiel?

Zij' reageren en ze functioneren, maar I' zal eerlijk zijn - Ik heb ze ontworpen voor een toetsenbord en een brede viewport Plak-en-kopieer taken zijn prima op een telefoon Alles wat een kleurenspectrum of een regex sample gaat een gevecht te worden.

Is er een API voor deze tools?

Momenteel niet Alles is client-side by design, wat fundamenteel haaks staat op een server-side API Voor programmatisch gebruik zijn de onderliggende bewerkingen allemaal één bibliotheekoproep verwijderd in welke taal je ook schrijft ' al aan het schrijven bent - json_encode, base64_decode, preg_match, enzovoort.

Wat zijn de beste gratis online tools voor ontwikkelaars?

Het hangt af van uw werk, maar een solide kern omvat formatteren en inspectie (JSON-formatter, Base64-converter), tijd en tekst (timestamp-converter, woordteller, slug-generator), patroonwerk (regex-tester) en media (afbeeldingscompress, kleurkiezer). Toolz.dev houdt er 600+ op één plek, allemaal gratis en aan de clientzijde. Het beste gereedschap is meestal degene die al open is in een tabblad wanneer u de wrijving raakt.

Kan ik deze ontwikkelaarstools gebruiken zonder iets te installeren?

Ja - er is niets te installeren en geen extensie toe te voegen Elke tool is een webpagina die zijn logica in uw browser uitvoert, dus u opent een URL en begint te werken op een besturingssysteem Zodra de pagina is geladen blijft het werken, zelfs als uw verbinding daalt.

De korte versie

De productiviteit van ontwikkelaars is niet één grote ontgrendeling. Het is de verwijdering van honderd kleine wrijvingen: de lading die je niet kunt lezen, de tijdstempel die je niet kunt ontleden, de regex die je moet raden, de screenshot die 4 MB wanneer het 400 kb zou moeten zijn. Geen van die individueel is een blogpost waard. Gezamenlijk zijn ze het grootste deel van het verschil tussen een dag waarop je iets hebt verzonden en een dag waarop je het druk had.

Alles hier is bij Toolz.dev, gratis, in uw browser, met uw gegevens op uw machine. beginnen met de JSON-formatter- als je maar één tabblad uit dit bericht haalt, dan is dat ' is degene die zichzelf tegen lunchtijd terugbetaalt.