Les bookmarklets peuvent être des outils inestimables pour les concepteurs Web et les développeurs qui aiment expérimenter et dépanner dans le navigateur. Aujourd'hui, nous avons rassemblé une collection impressionnante de bookmarklets gratuits, allant de la validation de votre code HTML à la réorganisation d'éléments sur une page sans code. Prendre plaisir!
QUEL EST
Quel est le moyen le plus simple de connaître les polices utilisées dans une page Web? Firebug ou inspecteur Webkit? Non, c'est trop compliqué. Il devrait être juste un clic. C'est pourquoi j'ai écrit cet outil, avec lequel vous pouvez facilement obtenir des informations sur les polices concernant le texte que vous survolez.
Syntaclet
En tant que programmeur, il est très courant de naviguer sur les interwebs pour trouver des extraits de code et des exemples. Le problème est que de nombreux sites Web ont de mauvaises méthodes d’affichage de l’exemple de code, ce qui le rend difficile à lire. C’est là que Syntaclet entre en jeu. Il suffit de cliquer sur le signet Syntaclet pour appliquer automatiquement la coloration syntaxique spécifique à la langue avec les numéros de ligne à tout le code de la page.
Collection de bookmarklets
Cette page contient un ensemble de bookmarklets créés spécifiquement pour les concepteurs et les développeurs. Il y a beaucoup d'outils utiles ici pour tout, de l'extraction des feuilles de style à l'activation automatique des cases à cocher.
FFFFALLBACK
Les polices Web sont ici, ouvrant une nouvelle ère passionnante dans la conception Web. FFFFALLBACK facilite la recherche des polices de secours parfaites, de sorte que vos conceptions se dégradent avec élégance.
Firebug Lite
Un petit bookmarklet pour installer facilement Firebug Lite sur n’importe quelle page Web.
SpriteMe
Les images d'arrière-plan donnent un aspect satisfaisant aux pages, mais les ralentissent également. Chaque image de fond est une requête HTTP supplémentaire. Il y a un problème: combinez des images d'arrière-plan dans un sprite CSS. Mais créer des sprites est difficile, il nécessite une connaissance arcanique et beaucoup d'essais et d'erreurs. SpriteMe supprime les tracas avec le clic d'un bouton.
CSSESS
Je suis heureux de vous annoncer la sortie de cssess (prononcez secess, comme sécession), un bookmarklet qui vous aide à trouver des sélecteurs CSS inutilisés sur n’importe quel site.
Mobile Perf
Il affiche un menu avec des liens qui chargent d'autres bookmarklets, notamment Firebug Lite, Ressources de page, DOM Monster, SpriteMe, CSSess et Zoompf. Le menu Mobile Perf est mis à jour au fur et à mesure de la publication des nouveaux bookmarklets - vous obtenez ainsi automatiquement les derniers outils.
DOM Monster
DOM Monster est un bookmarklet multi-plateformes et multi-navigateurs qui analysera le DOM et les autres fonctionnalités de la page affichée et vous donnera son état de santé.
XRAY: regarde sous la peau
XRAY est un bookmarklet pour Internet Explorer 6+, ainsi que pour les navigateurs Webkit et Mozilla (y compris Safari, Firefox, Camino ou Mozilla). Utilisez-le pour voir le modèle de boîte pour n'importe quel élément d'une page Web.
IRM: testez vos sélecteurs
MRI est un bookmarklet pour Internet Explorer 6+, ainsi que pour les navigateurs Webkit et Mozilla (y compris Safari, Firefox, Camino ou Mozilla). Utilisez-le pour tester et jouer avec les sélecteurs.
FontFriend
Outil pratique de Matt Wiebe qui vous permet de tester à la volée la typographie de n'importe quelle page de types CSS, sans rafraîchissement ni ouverture d'une nouvelle fenêtre. Découvrez ce screencast, prenez le bookmarklet et commencez à jouer avec la typographie trouvée en ligne.
Conception
Design est une suite d'outils d'aide à la conception et au développement Web qui peuvent être utilisés sur n'importe quelle page Web. Utilitaires englobant pour la disposition, la mesure et l'alignement de la grille, Design est un bookmarklet JavaScript particulièrement puissant.
W3C Valider cette page
Ceci est la base? Valider cette page? Favelet. Il soumet simplement l'URL de la page actuellement affichée au validateur pour traitement. Les résultats apparaissent dans la même fenêtre.
Bookmarklet de grille de présentation
Applique simplement une image de grille de mise en page au corps de la page. J'ai également créé un marque-page superposition grille de présentation qui crée un div, le positionne absolument et applique ensuite l'image d'arrière-plan à la div. Parce que l'image est transparente, vous obtenez un bel effet de superposition. En changeant la position de la div en? Fixed? vous pouvez également créer un joli bookmarklet à superposition fixe de grille de présentation qui peut être utile à l’occasion.
ReloadCSSEvery
Un aspect ennuyeux de l'écriture d'une feuille de style est de devoir recharger la page dans votre navigateur pour voir vos modifications incrémentielles. Il existe des moyens de contourner ce problème, mais comme je les trouve moins qu'idéaux, j'ai créé ReloadCSSEvery. Il actualise uniquement le CSS d'une page chargée toutes les 2 secondes afin que vous puissiez utiliser l'éditeur de votre choix CSS et voir les modifications en temps quasi réel dans votre navigateur lorsque vous enregistrez.
Bookmarklet pour installer un plugin WordPress
J'ai créé un bookmarklet que vous pouvez utiliser pour installer un plugin WordPress. Lors de la visualisation d'un plugin dans le répertoire de plugins WordPress, cliquez sur ce bookmarklet et vous serez guidé pour installer ce plugin sur votre site.
ImprimerWhatYouLike
Fatigué d'imprimer des pages Web uniquement pour trouver que votre impression est pleine de publicités, d'espaces vides et d'autres indésirables que vous ne voulez pas? PrintWhatYouLike est un éditeur en ligne gratuit qui vous permet de formater n'importe quelle page Web pour l'impression en quelques secondes!
Page liquide
Une fois encore, je changeais la conception de l'un de mes sites Web lorsque je réalisai qu'il serait formidable de pouvoir déplacer les éléments sur une page afin de prévisualiser les modifications - sans codage. En fin de compte, il existe une solution à ce problème: un bookmarklet et quelques lignes de JavaScript ont fait l'affaire. En utilisant jQuery et son extension d’UI, cela s’est avéré plutôt simple à implémenter.
Bookmarkleter
Cet outil crée des bookmarklets à partir de code JavaScript.
