I segnalibri possono essere strumenti preziosi per i web designer e gli sviluppatori che amano sperimentare e risolvere i problemi nel browser. Oggi abbiamo raccolto un'incredibile raccolta di bookmarklets gratuiti per qualsiasi cosa, dalla convalida del tuo HTML alla riorganizzazione di elementi su una pagina senza codice. Godere!
WHATFONT
Qual è il modo più semplice per scoprire i caratteri utilizzati in una pagina Web? Firebug o Webkit Inspector? No, è troppo complicato. Dovrebbe essere a portata di clic. Quindi ho scritto questo strumento, con il quale puoi facilmente ottenere informazioni sui caratteri sul testo su cui stai passando il tempo.
Syntaclet
Come programmatore è molto comune navigare sugli interwebs per vari frammenti di codice ed esempi. Il problema è che molti siti Web hanno metodi scadenti per la visualizzazione del codice di esempio che lo rende difficile da leggere. È qui che entra in gioco Syntaclet. Basta fare clic sul Bookmarklet Syntaclet e applicherà automaticamente la colorazione della sintassi specifica della lingua con i numeri di riga a tutto il codice sulla pagina.
Collezione Bookmarklets
Questa pagina ha un sacco di bookmarklets creati appositamente per designer e sviluppatori. Ci sono molti strumenti utili qui per qualsiasi cosa, dalla verifica dei fogli di stile all'attivazione automatica delle caselle di controllo.
FFFFALLBACK
I caratteri Web sono qui, scatenando una nuova era emozionante nel web design. FFFFALLBACK rende facile trovare i caratteri di fallback perfetti, in modo che i tuoi disegni si degradino con grazia.
Firebug Lite
Un piccolo bookmarklet per installare facilmente Firebug Lite su qualsiasi pagina web.
SpriteMe
Le immagini di sfondo rendono le pagine più belle, ma le rendono anche più lente. Ogni immagine di sfondo è una richiesta HTTP aggiuntiva. C'è una soluzione: combinare le immagini di sfondo in uno sprite CSS. Ma creare gli sprites è difficile, richiede conoscenze arcane e molti tentativi ed errori. SpriteMe rimuove i problemi con il clic di un pulsante.
CSSESS
Sono felice di annunciare il rilascio di cssess (pronuncia secess, come secession), un bookmarklet che ti aiuta a trovare selettori CSS inutilizzati su qualsiasi sito.
Mobile Perf
Visualizza un menu con collegamenti che caricano altri bookmarklet tra cui Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess e Zoompf. Il menu Mobile Perf viene aggiornato man mano che vengono rilasciati nuovi bookmarklet, in modo da ottenere automaticamente gli strumenti più recenti.
DOM Monster
DOM Monster è un bookmarklet cross-platform e cross-browser che analizzerà il DOM e le altre funzionalità della pagina in cui ti trovi e ti darà il suo conto.
RAGGI X: guarda sotto la pelle
XRAY è un bookmarklet per Internet Explorer 6+ e browser Webkit e Mozilla (inclusi Safari, Firefox, Camino o Mozilla). Usalo per vedere il modello di box per qualsiasi elemento su qualsiasi pagina web.
MRI: prova i tuoi selezionatori
La risonanza magnetica è un bookmarklet per Internet Explorer 6+ e browser Webkit e Mozilla (inclusi Safari, Firefox, Camino o Mozilla). Usalo per testare e giocare con i selettori.
FontFriend
Utile strumento di Matt Wiebe che ti consente di sperimentare rapidamente la tipografia di qualsiasi pagina di tipi di fogli CSS, senza aggiornare o aprire una nuova finestra. Guarda questo screencast, prendi il bookmarklet e inizia a scherzare con la tipografia che trovi online
Design
Il design è una suite di strumenti di web design e sviluppo assistito che possono essere utilizzati su qualsiasi pagina web. Comprende utilità per il layout, la misurazione e l'allineamento della griglia, Design è un bookmarklet JavaScript unico e potente.
W3C convalidare questa pagina
Questa è la base? Convalida questa pagina? Favelet. Invia semplicemente l'URL per la pagina attualmente visualizzata al Validator per l'elaborazione. I risultati appaiono nella stessa finestra.
Booklet Grid layout
Applica semplicemente un'immagine della griglia di layout al corpo della pagina. Ho anche creato un booklet Sovrapposizione griglia di layout che crea un div, lo posiziona in modo assoluto e quindi applica l'immagine di sfondo al div. Poiché l'immagine è trasparente, ottieni un bell'effetto di sovrapposizione. Cambiando la posizione del div a? Fisso? puoi anche creare un bel booklet di Sovrapposizione Fissa Layout Grid che può essere utile occasionalmente.
ReloadCSSEvery
Un aspetto fastidioso della scrittura di un foglio di stile è il dover ricaricare la pagina nel browser per vedere le modifiche incrementali. Ci sono modi per aggirare questo problema, ma li trovo meno che ideali, quindi ho creato ReloadCSSEvery. Aggiorna solo il CSS di una pagina caricata ogni 2 secondi in modo da poter utilizzare l'editor CSS preferito e vedere le modifiche in tempo reale nel browser quando si salva.
Bookmarklet per installare un plugin WordPress
Ho creato un bookmarklet che puoi usare per installare un plugin per WordPress. Durante la visualizzazione di un plug-in nella directory dei plugin di WordPress, fai clic su questo bookmarklet e verrai guidato nell'installazione di quel plug-in sul tuo sito.
PrintWhatYouLike
Stanco di stampare pagine web solo per scoprire che la tua stampa è piena di pubblicità, spazio vuoto e altra roba che non vuoi? PrintWhatYouLike è un editor online gratuito che ti consente di formattare qualsiasi pagina web per la stampa in pochi secondi!
Pagina liquida
Stavo ancora una volta cambiando il design di uno dei miei siti Web quando ho capito che sarebbe stato grandioso se potessi semplicemente spostare le cose su una pagina per visualizzare in anteprima le modifiche, senza alcuna codifica. A quanto pare, c'è una soluzione a questo problema: un bookmarklet e poche righe di JavaScript hanno fatto il trucco. Usando jQuery e la sua estensione UI, questo si è rivelato essere piuttosto semplice da implementare.
Bookmarkleter
Questo strumento crea bookmarklets dal codice JavaScript.
