Geschreven door: Luuk Arends, Webdesign Arnhem
Mozilla Firefox is niet voor niets geliefd onder webdesigners en developers. Één van de grootste redenen waarom deze browser een favoriet is, is de gigantische bibliotheek vol met extensies. Hieronder vind je een opsomming met de 3 beste extensies die het leven van een webdesigner een stuk makkelijker maakt. Want, het leven van een webdesigner gaat tenslotte niet over rozen.
1. Web Developer
Deze extensie is perfect om de lijst mee af te trappen. Web Developer voegt een hoop extra functies toe aan je browser, waarmee je de kwaliteit van je code kan waarborgen. Het grootste voordeel van Web Developer is de mogelijkheid om JavaScript, CSS en media bestanden te wijzigen, terwijl je de website bekijkt.
Deze extensie heeft een apart CSS Menu, waarmee je CSS regels kunt controleren, ordenen en ook kunt kijken naar betere manieren om je CSS code te schrijven.
Het extra Image Menu zorgt ervoor dat je in één oogopslag de ‘ALT’ tekst, paden en afmetingen kunt zien. Daarnaast is het ook mogelijk om direct afbeeldingen te wijzigen, zonder dat je eerst terug hoeft te gaan naar je FTP client.
Uiteindelijk zul je je bestanden wel moeten updaten en moeten uploaden naar je server via FTP. Wil je hier meer over weten? Lees dan het artikel “Bestanden uploaden en bewerken via FTP”.
2. ColorZilla
Ben je er helemaal klaar mee om de console in te duiken voor de juiste kleurcode? Dan is ColorZilla de oplossing. Met deze plugin kun je de kleurcode ophalen van iedere pixel op je scherm. ColorZilla heeft de volgende functies voor je klaarstaan:
Eyedropper
Hiermee kun je iedere pixel op je scherm selecteren om de kleurcode (rgb en hex) te achterhalen.
Ultimate CSS Gradient Generator
Perfect om gelijk een beeldschone gradient achtergrond te maken en het effect te zien op je website.
Element information
ColorZilla zorgt er niet voor dat alles er visueel goed uitziet, maar toont ook alle relevante informatie. Je moet denken aan tag names, classes, id’s, afmetingen etc.
Dynamic hover elements
Normaal gesproken duik je je console in en selecteer je een element, om vervolgens de :hover functie te activeren. ColorZilla haalt deze stap ertussenuit, door gelijk de codes achter de :hover te tonen. Super handig!
Color History
Potjandorie. Die kleurcode die je eerst had was toch perfect, maar je hebt het nergens opgeslagen… Geen enkel probleem. ColorZilla houdt alles netjes bij in een overzichtelijke log. Zo kun je op ieder moment alle kleuren die je gebruikt hebt, terugvinden.
3. Font Finder
Extensie voor het regelen van je code? Check. Extensie voor het gebruik van kleuren? Check. Dan is het vinden van het juiste lettertype het volgende.
Font Finder is ideaal voor designers, ontwikkelaars en typografen. Het zorgt er voor dat je ieder font op een website kunt analyseren en informatie kunt kopiëren. Het is natuurlijk niet mogelijk om de fonts met een licentie te downloaden (dat is niet de reden waarom je hier bent? Toch!?).
De volgende informatie kun je verkrijgen door Font Finder te gebruiken:
1. Font color (rgb en hex)
- Background color (rgb en hex)
- Font family
- Font size
- Line-height, vertical-align, letter en word spacing
- Font weight, style en varianten
- Text transform, decoration, align en indent
- Element’s type, class en IDOok beschikbaar voor Chrome
Zo, hopelijk kun je weer even vooruit en je zult merken dat deze add-ons toch een hoop ontwikkel tijd uit handen nemen. Bovenstaande extensies zijn ook beschikbaar voor Chrome. Heb je het gevoel dat er een ander op nummer #1 had moeten staan? Of kun je mij overtuigen om weer Chrome te gaan gebruiken (no way), dan kun je contact met mij opnemen.
Plaats een Reactie
Meepraten?Draag gerust bij!