tools Archives - Broken Links Archive

Remote debugging with weinre

Remote debug­ging of sites on mobile and tablets is get­ting a lit­tle eas­i­er, but still has too many pain points; for exam­ple, while you can debug iOS Safari through desk­top Safari, you can only do so with a sin­gle device at a time; and to debug on Android you have to down­load and install the full SDK, and even that only works with Chrome.

Adobe Edge Inspect is use­ful for remote debug­ging but is lim­it­ed by many require­ments: you must install an app on each tar­get device, so it won’t work on any plat­form oth­er than Android or iOS; it uses Chrome desk­top for the debug tools (although a new open API may open that to oth­er browsers); and you must buy a sub­scrip­tion to unlock mul­ti-device debugging.

If you want to do tru­ly cross-plat­form remote debug­ging on the cheap you need weinre, a free and open source project which is actu­al­ly the basis of Edge Inspect; Adobe bought the tech­nol­o­gy, then released the orig­i­nal source under an open license. wein­re’s quite easy to install, although it does­n’t appear to be, so in this arti­cle I’m going to lay out the few sim­ple steps required to get it up and running.

Read the full article

Firefox 16’s Web Developer Toolbar

Fire¬≠fox 16 should be released today, and as well as the new web plat¬≠form fea¬≠tures for devs ‚ÄĒ the meter ele¬≠ment, Micro¬≠da¬≠ta API, dppx unit, and unpre¬≠fixed calc(), Ani¬≠ma¬≠tions, Gra¬≠di¬≠ents, and Trans¬≠forms ‚ÄĒ there‚Äôs also a very use¬≠ful new tool, the Devel¬≠op¬≠er Tool¬≠bar. Called by Shift + F2 (on the Mac at least), it pro¬≠vides links to Fire¬≠fox‚Äôs suite of native devel¬≠op¬≠er tools and a very impres¬≠sive com¬≠mand line, which gives a range of short¬≠cut com¬≠mands to con¬≠trol the tools.

Read the full article

50 fantastic tools for RWD

As part of .Net mag­a­zine’s Respon­sive Week, I’ve updat­ed an arti­cle by Denise Jacobs to now bring you 50 fan­tas­tic tools for respon­sive web design.

On Adobe Muse

Today Adobe released a pre¬≠view of their new WYSIWYG web¬≠site cre¬≠ator, Muse. Short¬≠ly after, I had a good old moan about it on Twit¬≠ter. Not, as you may think, because I feel threat¬≠ened by web¬≠site cre¬≠ation being made easy ‚ÄĒ it‚Äôs been easy for ages, but ‚Äėeasy‚Äô does¬≠n‚Äôt always mean ‚Äėgood‚Äô ‚ÄĒ but because it gets a few fun¬≠da¬≠men¬≠tal things bad¬≠ly wrong.

My code purist side reject¬≠ed it because the markup it out¬≠puts is hor¬≠ren¬≠dous; if you don‚Äôt believe me, take a look at the code for one of their exam¬≠ple sites, ‚ÄėLucid Syn¬≠er¬≠gy‚Äô. My edu¬≠ca¬≠tor side reject¬≠ed it because it teach¬≠es you noth¬≠ing about how a web page is made; I learned to code by using Microsoft Front¬≠Page many (many) years ago, and under¬≠stood HTML by edit¬≠ing the source of the doc¬≠u¬≠ment and tweak¬≠ing it until I got it the way I want¬≠ed ‚ÄĒ but Muse has no code view, so this is made very difficult.

But the real prob¬≠lem with Adobe Muse is deep¬≠er than that: it‚Äôs that all seman¬≠tic sense is com¬≠plete¬≠ly removed from the page. There are no head¬≠ings, no lists, all text is in p ele¬≠ments, inline styles are applied with span rather than em/i/b, etc; this gives no struc¬≠ture, no mean¬≠ing, no about¬≠ness to your page, which at the very least means penal¬≠ties for SEO.

And worse still is that there’s no doc­u­ment flow; all the ele­ments you add to the page are posi­tioned rel­a­tive­ly to their par­ent and fol­low no par­tic­u­lar order, which is pret­ty bad for search engine spi­ders (and hence your SEO), but absolute­ly ter­ri­ble for vis­i­tors using assis­tive technology.

It’s the prod­uct of a com­pa­ny that cares only about appear­ance, and noth­ing for con­tent. As @paulrobertlloyd said on Twit­ter:

It’s not that the code Adobe Muse gen­er­ates is ugly, it’s that it’s meaningless.

The issue with the lack of seman­tic ele­ments is not insur­mount­able, it just needs some work by Adobe before the final release. The lack of doc­u­ment flow and con­tent order is more seri­ous, how­ev­er, and will need a com­plete rethink; I hope that this happens.

Bespin, the cloud, and Canvas

Mozil¬≠la recent¬≠ly launched a very ear¬≠ly ver¬≠sion of Bespin, their online IDE (Site¬≠point have a nice overview). It‚Äôs hard to make too much of it at this ear¬≠ly stage, although it is impres¬≠sive¬≠ly fast and respon¬≠sive; time will tell if that con¬≠tin¬≠ues to be the case as new fea¬≠tures are added.

This respon­sive­ness seems to come from the front end being cre­at­ed using JavaScript (only 62kb com­pressed, appar­ent­ly) and the HTML5 canvas ele­ment (update: more on that imple­men­ta­tion). See­ing oth­er exam­ples of what its capa­ble of, I real­ly need to start learn­ing more about canvas.

Immediate uses for Microformats

One of the hard¬≠est things about Micro¬≠for¬≠mats is explain¬≠ing their ben¬≠e¬≠fits to peo¬≠ple. You can say ‚ÄúIt‚Äôs a stan¬≠dard¬≠ised for¬≠mat of mark¬≠ing-up con¬≠tent, which is both human and machine read¬≠able!‚ÄĚ until you‚Äôre blue in the face, but until you can show peo¬≠ple a prac¬≠ti¬≠cal ben¬≠e¬≠fit they usu¬≠al¬≠ly remain unmoved.

Luck¬≠i¬≠ly there are a few tools out there which will help you show off the ben¬≠e¬≠fits of using Micro¬≠for¬≠mats, and involve lit¬≠tle work from you.

Read the full article


I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.