Ritocchi per GitHub e i siti per sviluppatori con JustZix
Se leggi codice tutto il giorno, il layout predefinito di GitHub spreca spazio: colonne di diff strette, intestazioni di file che scorrono via, barre laterali che non usi mai. Le regole JustZix limitate a github.com ti permettono di mettere a punto l'esperienza di lettura senza flag del browser o estensioni che non puoi controllare.
Usa la piena larghezza della finestra
GitHub limita la larghezza dei contenuti su molte pagine. Su un monitor largo questo lascia enormi margini vuoti attorno a una colonna sottile di codice. Crea una regola CSS che corrisponde a *://github.com/* e riconquista lo spazio.
/* Lascia che le pagine di repo e codice si estendano nel viewport */
.container-xl,
.container-lg,
.repository-content {
max-width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
}Questo è un cambiamento di solo layout. Nulla riguardo a navigazione o funzionalità si sposta — smetti semplicemente di fissare le grondaie vuote.
Fissa l'intestazione del file mentre scorri
Quando scorri un file lungo, l'intestazione con il nome del file, il blame e i link raw sparisce. Un'intestazione fissa mantiene il tuo contesto. GitHub marca già la barra delle azioni del file, quindi ti serve solo il posizionamento.
/* Tieni visibile la barra delle azioni del file */
.file-header,
.react-blob-header-edit-and-raw-actions {
position: sticky !important;
top: 0;
z-index: 20;
background: var(--bgColor-default, #fff) !important;
}Nella vista diff, la stessa idea fissa l'intestazione di ogni file così sai sempre a quale file appartiene un blocco:
/* Intestazioni fisse per file nei diff delle pull request */
.file.js-file .file-header {
position: sticky !important;
top: 0;
z-index: 5;
}Codice più grande e più leggibile
La dimensione del font del codice predefinita va bene per scorrere, meno per la revisione. Aumentala e stringi l'interlinea in una sola regola.
/* Tipografia del codice confortevole */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
font-size: 14px !important;
line-height: 1.6 !important;
}Scegli una dimensione che si adatta al tuo display. Poiché la regola è limitata a GitHub, non tocca mai i blocchi di codice su altri siti.
Nascondi ciò che non usi
Molti pannelli di GitHub sono puro rumore per il lavoro quotidiano — il badge "Usato da", i pulsanti sponsor, il feed di attività sulla tua dashboard. Tagliali.
/* Disordine della barra laterale del repo */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }Adatta l'elenco a piacere — ogni riga è indipendente, quindi rimuovere un selettore mostra di nuovo solo quel pannello.
Salta al diff con una pressione di tasto
Una piccola regola JavaScript può aggiungere una scorciatoia. Limita una regola JS a *://github.com/*/pull/* e premi d per scorrere direttamente alla scheda "File modificati".
document.addEventListener('keydown', (e) => {
// Ignora la digitazione in input e textarea.
const tag = (e.target.tagName || '').toLowerCase();
if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
return;
}
if (e.key === 'd') {
const filesTab = document.querySelector('a[href$="/files"]');
if (filesTab) filesTab.click();
}
});Legge solo gli eventi di tasto e clicca un link esistente — nessuna richiesta di rete, nulla scritto da nessuna parte. Pura comodità.
Costruisci il tuo profilo da sviluppatore
Lo stesso approccio funziona su GitLab, MDN, Stack Overflow o qualsiasi sito di documentazione: limita una regola CSS al dominio, allarga il contenuto, correggi la tipografia, nascondi l'interfaccia. Tieni separate le regole di ogni sito così un redesign su uno non rompe mai un altro.
Trova altre ricette focalizzate sugli sviluppatori nei nostri esempi pronti all'uso, e se vieni da un gestore di userscript, leggi come migrare da Tampermonkey a JustZix. Pronto a iniziare? Scarica JustZix e incolla prima la regola della piena larghezza.
Valuta questo articolo
Nessuna valutazione — sii il primo.