Feb 08

FireBug: complement del firefox perfecte pels programadors de webs

Reading time: 3 – 4 minutes

Pensava que la extenció web developer toolbar del firefox era la bomba, però avui l’Ernest m’ha obert els ulls. Realment el Firebug li dona mil patades. És realment impresionant. El meu no és programar web ni molt menys varallar-me sovint amb els CSS, JavaScript ni HTMLs. Però sovint quan programes aplicacions ASP una eina d’aquestes t’estalvia moltes hores de feina. Per exemple, el model de templates que usa symfony no seria precisament un model WYSIWYG. Així doncs, quan toca escriure codi pelat, el Firebug ens pot fer anar molt al gra. La veritat és que l’Oriol ho hagués agraït en algún moment en que depurava un codi JavaScript, oi Oriol?

firebug.gif

Les funcions del Firebug són tantes que fa fins hi tot mandre repassar-les, però en faré una breu llista a base de copy/paste:

  • Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
  • Inspect and edit HTML Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
  • Tweak CSS to perfection Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
  • Visualize CSS metrics When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
  • Monitor network activity Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
  • Debug and profile JavaScript Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
  • Quickly find errors When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
  • Explore the DOM The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
  • Execute JavaScript on the fly The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.
  • Logging for JavaScript Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.
Jun 09

Google Browser Sync

Reading time: 2 – 2 minutes

Es tracta d’una eina programada per google que s’integra perfectament al firefox i que ens permet guardar les sessions, bookmarks, cookies, històric, passwords, etc. de les nostres màquines a internet, així quan canviem de màquina podem seguir la sessió de navegació en el punt ho varem deixar. A mi em va com l’anella al dit, ja que sovint navego per internet amb l’ordinador de casa sense connectar el portàtil i quan arribo a la feina sempre trobo a faltar passwords, historics i fins hi tot pàgines que tenia obertes i que encara no havia guardat. Potser el que menys m’interessa és el tema dels bookmarks, perquè uso el sitebar i ja ho tinc tot ben automatitzat amb els enllaços de la barra d’enllaços personals. Però si altero el contingut d’aquesta barra que en el fons és una carpeta dels bookmarks del firefox també es sincrontiza, m’encata. Ja era hora que sortis una eina com aquesta!

googlebrowsersync.png

A més funciona tan en firefox per windows, linux i mac. De fet, jo no tinc mac. Però fins hi tot dintre del propi portàtil quan estic en win i estic navegant i me’n vull anar a linux és un fàstig haver de passar les pàgines que tenia obertes de formes poc elegants. Per exemple, sovint el que feia era crear un fitxer .txt on copiava les URLs i quan entrava a linux obria altre cop els tabs amb aquestes urls usant una extensió que es diu linky.

Si voleu provar l’aplicació de google labs la teniu a Google Browser Sync. Realment de les millors aplicacions que m’he instal·lat ultimament 🙂

Apr 06

firefox add-on – IE tab

Reading time: 1 – 2 minutes

ie_tab-8.jpg

Sovint degut a la mala implementació dels estàndards del W3C els navegadors, especialment IE, no interpreten correctament les pàgines web i això fa com tots saben que molts dissenyadors mirin que aquestes pàgines funcionin bé en aquest navegador i no pas amb els altres, llavors molts cops algunes webs no funcionen correctament amb el nostre navegador preferit.

Doncs bé la gràcia del IE tab esta en fer correr una instància del MS IE dins d’una pestanya del firefox. Així no hem de carregar el IE a part. Realment el tema es molt útil, però ho seria més si realment el que es fes fos fer correr el motor d’IE dins del firefox. A més el add-on en qüestió només es suporta des de windows. O sigui, que on realment seria útil el tema no el podrem disfrutar, o sigui, en linux que és on sovint no ens funcionen les web’s pensades per IE.

Nov 19

Extensions de Firefox que uso

Reading time: 3 – 5 minutes

firefox.png

Per win ja fa temps que uso Firefox i totes les versions que han anat sortint fins a la versió 1, que tan soroll va fer fa uns dies. Però al linux fins avui usava el Mozilla, així que finalment m’he decidit a instal·lar la versió 1.0 de Firefox i disfrutar de les seves millores sobretot a nivell de velocitat. També he notat que usa una serie de fonts que no són iguals que les que em sortien en Mozilla, molt més boniques, és clar. Bé doncs com no li he posat algunes extensions que em són molt útils:

  • Linky permet administrar enllaços existens dis d’una pàgina, encara que no estiguin marcats com a tal en el codi HTML. La utilitat més interessant que li trobo és permetre verificar que tots els enllaços inclosos en un post publicat al weblog són vàlids. Per això només cal seleccionar l’entrada, primer el botó dret del ratolí­ i seleccionar l’opció Linky -> Open Selected Links in Tabs. D’aquesta forma tots els enllaços que tenim dins el text seleccionat es previsualitzen i, si volem, s’obren en pestanyes separades la qual cosa ens permet verificar que realment funcionen d’una forma encara més comode.
  • BUGMENOT ens dona un usuari i un pass en milers de pàgines que ho requereixen, sobre tot les més famoses. Tot i que jo dec ser gafe perquè al NYT no m’ha funcionat mai.
  • MozEx podem editar una ‘textarea’ amb l’editor que volguem. Aquesta extensió la vaig coneixer a partir del forum del Blog:CMS, concretament en aquest article, on es parla del mozex de mozilla.
  • Web Developer es tracta d’una barra de botons, que no tinc sempre carregada, però que és molt útil quan alguna de les webs personals que mantinc dona algún que altre problema de codi, és realment útils si toqueu webs a nivell de codi, o su uns ‘fisgons’.
  • AdBlock simplement una extensió que intenta bloquejar-nos tots els anuncis que porten les webs d’avui en dia, un ‘incordio’ realment. No va malament del tot.
  • Bloglines Toolkit permet sindicar-se als RSS a través de bloglines mentre estas navegant.
  • SiteBar aquesta extensió em permet usar el SiteBar a la sidebar del Firefox. Si no coneixeu el SiteBar, jo el trobo molt més útil que el del.icio.us. Fa temps vaig escriure sobre el SiteBar: SiteBar: Servidor de Bookmarks/Favoritos

Si busqueu alguna extensió més ‘rara’ que jo no uso, podeu passar-vos per la part d’extensions de la web de mozilla, concretament al producte firefox. Per altra banda també he trobat una pàgina amb una recopilació de les extensions que esta molt bé: Extensions Room de mozdev.org. Si algú vol desenvolupar extensions per Firefox he trobat una guia ràpida.

Una cosa que no sé fer amb el firefox i que m’agradaria saber fer, per si algú ho sap, és aconseguir que es guardin les pàgines de tots els tabs quan tanqui el navegador de forma que quan el torni a obrir es tornin a carregar automàticament.