Strumenti per la produttività degli sviluppatori: i 40 che apro effettivamente ogni settimana

Tengo aperta una finestra del browser sul mio secondo monitor che non è altro che schede di utilità. JSON Formattatore, Convertitore di timestamp, Tester Regex, Generatore di hash. È lì da anni, attraverso WP Administrate Release, attraverso progetti collaterali Laravel, attraverso ogni sessione di debug a tarda notte in cui arriva un carico utile di webhook e ho bisogno di vedere cosa c'è effettivamente dentro.

Per molto tempo quelle schede puntavano su sette siti web diversi Alcuni andavano bene Alcune erano ad farm che caricavano il mio payload su un server I & #39; non ne avevo mai sentito parlare Uno di loro - I & #39; non ho intenzione di nominarlo - ho incollato una messa in scena JWT in prima che il pensiero mi raggiungesse: Quel gettone è appena andato oltre il filo alla scatola di qualcun altro. Era un segno di sosta, niente bruciato, ma la sensazione è rimasta bloccata. Ho costruito Toolz.dev in parte perché volevo la mia striscia di schede, e in parte perché non volevo mai più commettere quel particolare errore.

Quindi questo non è un elenco di 500 strumenti raschiati da una directory. È il set che vive effettivamente Toolz.dev in questo momento - 40-dispari di loro - organizzato il modo in cui li uso: dal momento nella giornata lavorativa quando raggiungo per uno Ognuno viene eseguito nel vostro browser Niente carica Non c'è account.

tl; dr: I cinque che apro di più, di un miglio: Formattatore JSON Per risposte API illeggibili, Convertitore di timestamp per la ricerca legale, tester regex per il lavoro a modello, convertitore base64 per JWT e URI di dati e Generatore di UUID per il seeding dei dati di test Tutto ciò che segue viene eseguito lato client - il tuo payload non esce mai dalla scheda Se aggiungi solo una cosa ai segnalibri, aggiungi il formattatore JSON ai segnalibri.

Perché non usare semplicemente la CLI?

Domanda giusta, e uso la CLI. jq è meglio di qualsiasi strumento web per lo script. base64 -d sono due tasti. Se un'attività sta andando in uno script di shell, appartiene a uno script di shell.

Ma ci sono tre situazioni in cui una scheda del browser vince davvero, e dopo circa un decennio di farlo ho smesso di sentirmi in colpa per loro:

1. Circuiti di feedback visivi. Regex è quello ovvio. Vedere 14 corrispondenze si accendono in un campione di testo reale durante la digitazione è un'attività diversa dall'esecuzione grep -P e ottenere un sì/no. Lo stesso per gradienti e colori: non puoi osservare un codice esadecimale.
2. La macchina non è tua. Laptop client, macchina da lavoro bloccata, scrivania di qualcun altro durante una sessione di abbinamento. no jq, nessun diritto di installazione, non c'è tempo.
3. Il compito è davvero una tantum. Non sto scrivendo uno script Python per convertire un CSV in JSON. Lo incollerò, farò clic e andrò avanti con la mia vita.

Ecco il confronto onesto che darei a uno sviluppatore junior che chiede quale usare:

Quell'ultima riga è la regola effettiva che seguo. Se ho intenzione di fare una cosa più di due volte, va in una sceneggiatura. Tutto il resto ottiene una scheda.

Quali strumenti apro durante una giornata API non valida?

Questo è il cluster che si guadagna la sua mastio. Un'API di terze parti si sta comportando male, hai un carico utile e devi capirlo prima di poter risolvere qualsiasi cosa.

Formattazione JSON: quella I' manterrei se potessi tenerne solo uno

JSON minimizzato è illeggibile e peggio quando è infermo L'errore del browser ti dice "Token inaspettato e un offset di caratteri che non significa nulla per un essere umano. la Formattatore JSON pretty-stampa con rientranza reale e punti alla linea effettiva che's rotto Novanta per cento del tempo il colpevole è una virgola finale, che è legale in JavaScript oggetti letterali e illegale in JSON - una distinzione che mi è costato più ore di quanto voglio sommare Dive più profonda: Come formattare JSON online.

Convertitore Base64 - per JWT e URI di dati

Un JWT è composto da tre segmenti Base64URL separati da punti. incollare quello centrale nel convertitore base64 e puoi leggere i sinistri - emittente, scadenza, ambiti - senza spedire il token a un decoder di terze parti. (Uso il Decoder JWT quando voglio che tutti e tre i segmenti vengano analizzati contemporaneamente, ma continuo a raggiungere Base64 grezzo quando un payload sembra strano e voglio vedere i byte.) Il Unicode beccato, e perché btoa() lancia un emoji, è nel Guida alla codifica Base64.

Convertitore di timestamp - log forensics

1752278400. è ieri o 2029? la Convertitore di timestamp gira Unix secondi, millisecondi e ISO 8601 in qualcosa su cui un essere umano può ragionare, nel fuso orario a cui tieni Due terzi del mio debug degli incidenti sta allineando timestamp da tre servizi che hanno effettuato l'accesso ciascuno in un formato diverso, e uno di essi è in UTC mentre gli altri sono' t.

YAML Validator - perché la rientranza è portante

Manifesti di Kubernetes, azioni GitHub, Docker-Compose. YAML è significativo per gli spazi bianchi e reinterpreterà silenziosamente il tuo intento piuttosto che l'errore. la Condivisore di yam Cattura la scheda-vs-spazio e il non quotato no che Yaml 1.1 analizza utili come booleano false. (Sì, davvero. Il problema della Norvegia è reale: il prefisso internazionale NO diventa false A meno che non lo citi.)

JSON Diff - cosa è realmente cambiato?

Due risposte API, una funzionante e una no. Fissarli fianco a fianco in un editor di testo è un gioco perdente. JSON DIFF Ti mostra le tre chiavi che differiscono e ignora il 200 che non.

il resto dello scaffale di debug

• Formattatore SQL- per la query di 90 righe con quattro join che qualcuno ha scritto su una riga.
• Generatore di hash- MD5/SHA-1/SHA-256/SHA-512, principalmente per verificare un download o una chiave della cache.
• Cron Parser-perché 0 */2 * * * e */2 * * * * differiscono di un carattere e circa sessanta volte il carico.
• deselezionare- PHP serialize() output di a wp_options fila. Se hai mai eseguito il debug delle impostazioni memorizzate di un plug-in WordPress, sai esattamente perché questo esiste.

Cosa uso quando scrivo codice, non lo debug?

regex, senza indovinare

Scrivo regex nel tester regex prima che tocchi una base di codice. Incolla un campione realistico, scrivi il modello, guarda le partite in evidenza. la Costruttore di regex è l'altra metà di questo: it's per quando sai cosa vuoi in inglese e can't ricorda se it's \b oppure \B. Il cheat sheet completo del modello, oltre alla catastrofica trappola di backtracking che può congelare un server con un quantificatore nidificato, è in Guida alla creazione di regex.

UUID per la semina

Venti righe di prova, venti ID univoci, in questo momento. Generatore di UUID v1, v4 e v7 in blocco Usa v7 per le nuove chiavi primarie - it's ordinate nel tempo, quindi il tuo indice B-tree non viene triturato da inserti casuali Ho imparato che il modo costoso e l'ho scritto nel Guida al generatore UUID.

codifica, entrambi i gusti

codificatore URL Per stringhe di query che contengono & e = e uno spazio. Entità HTML Per il momento è necessario visualizzare <script> su una pagina come testo piuttosto che come rapporto sull'incidente. Questi due sono noiosi e li uso costantemente.

Formattazione

I dati arrivano nella forma sbagliata all'incirca sempre. Il set di conversione copre le mosse che faccio effettivamente:

• JSON a CSV- quando uno stakeholder chiede & quot; il data" e significa un foglio di calcolo Gli oggetti nidificati vengono appiattiti in colonne con annotazione a punti Dettagli nel Guida da JSON a CSV.
• CSV a JSON- il contrario, per la semina.
• JSON a Yaml- per trasformare un blob di configurazione in qualcosa che un essere umano modificherà.
• XML a JSON- ogni integrazione SOAP legacy, per sempre.
• traduttore binario- testo ↔ binario/esagono/decimale/ottale Principalmente per l'insegnamento e per il byte di protocollo dispari.

L'intero ripiano di codifica, con il ragionamento dietro ciascuno, è nel Guida agli strumenti di codifica.

Quali uso per testo e contenuti?

Scrivo molto - plugin docs, changelogs, questo blog Questi sono gli strumenti tra bozza e pubblicazione.

• Contatore di parole- parole, caratteri, tempo di lettura Anche il modo più veloce per controllare una meta descrizione rispetto al budget di 160 caratteri prima che Google la tronchi Altro nel Guida contatore di parole.
• convertitore di borsa- camelCase, snake_case, kebab-case, PascalCase. Rinomino le variabili in blocco in questo modo più spesso di quanto io usi il mio strumento di refactor editor's, che è debolmente imbarazzante ma vero. Guida al convertitore di casi.
• generatore di lumache- titolo all'URL, con i segni diacritici gestiti correttamente. Café Décor dovrebbe diventare cafe-decor, no caf-dcor.
• testo Differenza- due file di configurazione, o due versioni di un paragrafo, affiancati.
• Lorem Ipsum- copia segnaposto per un layout che non ha ancora contenuto.
• Stringa inversa- nicchia, ma si presenta nella preparazione delle interviste e nei controlli palindromi più di te' penserei.

Il set di testo completo è trattato nel Guida agli strumenti di testo.

E il design e il lavoro di frontend?

Sono uno sviluppatore che deve far sembrare le cose accettabili, non un designer. Questo è un lavoro specifico, e questi tre lo fanno.

• selettore- HEX ↔ RGB ↔ HSL, con controllo del contrasto in modo da non spedire il corpo 3:1. HSL è il formato che rende gli stati di hover una sottrazione invece di un'ipotesi Trattamento completo: Selettore di colori e guida al convertitore.
• Generatore di sfuma- lineare, radiale, conico, con anteprima live e CSS copiabile Scrittura conic-gradient() Blind è un tipo speciale di miseria. Guida al generatore di gradiente CSS.
• Minifier CSS e Minifier HTML- per il momento è necessario inlineare qualcosa in un <style> Tagga e lo voglio piccolo.
• Generatore di meta tag- titolo, descrizione, Grafico aperto, schede Twitter e JSON-LD in un unico passaggio. L'ho costruito perché stavo scrivendo a mano gli stessi quattordici tag su ogni progetto.

Cosa utilizzo per i file: immagini, PDF, tutto il resto?

Gli strumenti di immagine vengono eseguiti tutti attraverso l'API Canvas del browser, il che significa che un PNG da 4 MB non lascia mai la macchina. Questo non è marketing; è proprio quello che succede quando l'elaborazione è a <canvas> E non una richiesta POST.

• Comprimi immagine- cursore di qualità, lettura di dimensioni live La maggior parte degli screenshot I ship drop 70,85% senza differenza visibile Vedere il Guida alla compressione dell'immagine.
• Ridimensionamento immagine- dimensioni esatte o una percentuale, proporzioni bloccate.
• convertitore di formato- PNG/JPEG/WebP/AVIF. WebP è l'impostazione predefinita che spedisco ora.
• solvente per sfondo- esegue il modello di segmentazione nel browser It's l'unico strumento in cui noto il primo caricamento.
• Generatore QR- URL, credenziali WiFi, vCard Ho scritto a mano l'encoder ISO/IEC 18004 per questo, la correzione degli errori e tutto il resto, che è stato un ottimo uso di un fine settimana o terribile.
• Generatore di password- usi crypto.getRandomValues(), no Math.random(). Questa distinzione conta più del cursore di lunghezza.

E alcune cianfrusaglie ho costruito perché una volta ne avevo bisogno e poi continuavo a averne bisogno: convertitore di unità, Calcolatrice percentuale, DATA DIFFERENZA, Testo alla scrittura a mano.

L'insieme di immagini più ampio è in Guida agli strumenti di immagine, e i PDF ottengono il proprio trattamento nel Guida agli strumenti PDF.

Come fanno queste concatenate insieme nel lavoro reale?

Individualmente ogni strumento salva un minuto. Il compounding avviene quando li incatena. Ecco una sequenza reale di una settimana fa, il debug di un'integrazione che stava restituindo 401 in modo intermittente:

1. Copia la richiesta in errore Authorization testata. dividere sui punti, incollare il segmento due nel convertitore base64. leggere exp.
2. exp è un timestamp unix. dentro Convertitore di timestamp. È scaduto 41 secondi prima che la richiesta fosse attivata.
3. Questo è un problema di distorsione dell'orologio, non un problema di autenticazione. Controlla il cron di aggiornamento con il Cron Parser- stava rinfrescando il gettone ogni 60 minuti per un gettone con un TTL di 60 minuti Nessun margine Condizioni di gara.
4. Cambia il cron a 50 minuti. fatto.

Quattro strumenti, forse tre minuti, e la risposta è stata una modifica di un carattere a un'espressione cron. L'alternativa - aggiungere registrazione, ridistribuzione, attendere che si ripetesse - era mezza giornata.

L'altra catena che corro costantemente è quella del contenuto: Bozza → Contatore di parole → generatore di lumache → Comprimi immagine Per l'immagine di intestazione → Generatore di meta tag → Pubblica.

Perché "side-client-side" ha effettivamente importanza?

A causa della storia di messa in scena in cima a questo post, per lo più. Ma sia preciso sull'affermazione piuttosto che sulla mano, poiché "privacy-first" è una frase che è stata prosciugata di ogni significato.

Quando uno strumento è lato client, il file o la stringa che incolla viene gestita da JavaScript in esecuzione nella scheda. Va in una variabile nella memoria del tuo browser e di conseguenza torna fuori. non c'è fetch(), no FormData, nessun caricamento. Puoi verificarlo tu stesso in una decina di secondi: apri DevTools, vai alla scheda Rete, incolla qualcosa in qualsiasi strumento su Toolz.dev e guarda nulla accada. Questa è l'intera prova. Se una richiesta di rete viene attivata quando fai clic su "converti, i tuoi dati si trovano sul server di qualcuno.

Cosa ti compra concretamente:

• Puoi incollare i segreti. Token di staging, risposte API interne, CSV del cliente del cliente. Non va da nessuna parte.
• È veloce. Nessun viaggio di andata e ritorno. Un formato di file JSON da 5 MB nel tempo impiegato dal browser per analizzarlo.
• Nessun soffitto di dimensioni del file oltre la tua RAM.
• Nessun limite di tariffa, Perché non c'è nessun server per limitarti.

Il compromesso è reale e lo chiamerò: il lavoro pesante (un video da 200 MB, un OCR supera più di 500 pagine) è davvero più lento in un browser rispetto a un server con una GPU. Client-side è l'impostazione predefinita giusta, non una risposta universale.

Domande frequenti

Questi strumenti di produttività per gli sviluppatori sono davvero gratuiti?

Sì - nessun account, nessun limite di utilizzo, nessuna prova che scade Gli strumenti funzionano sulla tua macchina, il che significa che in effetti non mi costano nulla per utilizzo, il che significa che non c'è niente da misurare.

Ho bisogno di un account per usarli?

no Aprire uno strumento, usarlo, chiudere la scheda. Non c'è un muro di iscrizione e poiché l'elaborazione è lato client, non c'è una sessione a cui allegare i tuoi dati in primo luogo.

È sicuro incollare dati sensibili come chiavi API o token?

Per gli strumenti lato client, sì - e puoi confermarlo piuttosto che fidarti di me Apri il tuo browser's DevTools Scheda di rete, incolla e guarda per le richieste in uscita Ci sono' t qualsiasi L'unica cosa che I' eviterei ancora ovunque, incluso qui, è incollare a produzione segreto che puoi' t ruotare - non a causa dello strumento, ma perché appunti, condivisioni dello schermo ed estensioni del browser sono tutte superfici di attacco reali.

Questi strumenti funzionano offline?

La pagina deve essere caricata una volta. Successivamente, la maggior parte degli strumenti continua a funzionare se la connessione si interrompe, perché il JavaScript che fa il lavoro è già nella tua scheda. Ricarica la pagina mentre sei offline e non otterrai nulla.

Come si confrontano con strumenti CLI come JQ o OpenSSL?

Lavori diversi La CLI vince per qualsiasi cosa scritta in script, ripetuta o in CI - it' è componibile e riproducibile Gli strumenti del browser vincono per attività una tantum, tutto ciò che beneficia di un'anteprima visiva (regex, gradienti, colori, qualità dell'immagine) e macchine in cui puoi' t installare software Uso sia quotidianamente che don' t think it' s un concorso.

Quali strumenti devo aggiungere per primo ai segnalibri?

Se scrivi codice: JSON Formatter, Timestamp Converter, Regex Tester, Base64 Converter. Se scrivi contenuto: contatore di parole, generatore di lumache, compresso dell'immagine. Se fai frontend: selettore di colori, generatore di gradiente, generatore di meta tag. Aggiungili ai segnalibri come una cartella e fai clic con il pulsante centrale della cartella per aprirli tutti in una volta.

Gli strumenti funzionano su dispositivi mobili?

Loro' sono reattivi e funzionano, ma io' sarò onesto - li ho progettati per una tastiera e un ampio viewport Le attività di incolla e copia vanno bene su un telefono Tutto ciò che coinvolge uno spettro di colori o un campione di regex sarà una lotta.

esiste un'API per questi strumenti?

Attualmente no. Tutto è client-side by design, il che è fondamentalmente in contrasto con un'API lato server Per l'uso programmatico, le operazioni sottostanti sono tutte una chiamata di libreria in qualsiasi lingua tu' stai già scrivendo - json_encode, base64_decode, preg_match, e così via.

Quali sono i migliori strumenti online gratuiti per gli sviluppatori?

Dipende dal tuo lavoro, ma un nucleo solido copre la formattazione e l'ispezione (formattatore JSON, convertitore Base64), ora e testo (convertitore di timestamp, contatore di parole, generatore di lumache), pattern (regex tester) e media (compresse di immagini, selettore di colori). Toolz.dev ne mantiene oltre 600 in un unico posto, tutti gratuiti e lato client. Lo strumento migliore è solitamente quello già aperto in una scheda quando si colpisce l'attrito.

Posso utilizzare questi strumenti per sviluppatori senza installare nulla?

Sì - non c'è niente da installare e nessuna estensione da aggiungere Ogni strumento è una pagina web che esegue la sua logica nel tuo browser, quindi apri un URL e inizi a lavorare su qualsiasi sistema operativo Una volta caricata la pagina continua a funzionare anche se la tua connessione diminuisce.

la versione breve

La produttività degli sviluppatori non è un grande sblocco. È la rimozione di cento piccoli attriti: il carico utile che non puoi leggere, il timestamp che non puoi analizzare, la regex che stai indovinando, lo screenshot che è 4 MB quando dovrebbe essere 400 KB. Nessuno di questi individualmente vale un post sul blog. Collettivamente sono la maggior parte della differenza tra un giorno in cui hai spedito qualcosa e un giorno in cui eri impegnato.

Tutto qui è a Toolz.dev, gratuito, nel tuo browser, con i tuoi dati che rimangono sulla tua macchina. Inizia con il Formattatore JSON- se prendi solo una scheda da questo post, quella & #39; è quello che si ripaga da solo all'ora di pranzo.