tools Archive

Remote debugging with weinre

Remote debugging of sites on mobile and tablets is getting a little easier, but still has too many pain points; for example, while you can debug iOS Safari through desktop Safari, you can only do so with a single device at a time; and to debug on Android you have to download and install the full SDK, and even that only works with Chrome.

Adobe Edge Inspect is useful for remote debugging but is limited by many requirements: you must install an app on each target device, so it won’t work on any platform other than Android or iOS; it uses Chrome desktop for the debug tools (although a new open API may open that to other browsers); and you must buy a subscription to unlock multi-device debugging.

If you want to do truly cross-platform remote debugging on the cheap you need weinre, a free and open source project which is actually the basis of Edge Inspect; Adobe bought the technology, then released the original source under an open license. weinre’s quite easy to install, although it doesn’t appear to be, so in this article I’m going to lay out the few simple steps required to get it up and running.

Read the full article


Firefox 16’s Web Developer Toolbar

Firefox 16 should be released today, and as well as the new web platform features for devs – the meter element, Microdata API, dppx unit, and unprefixed calc(), Animations, Gradients, and Transforms – there’s also a very useful new tool, the Developer Toolbar. Called by Shift + F2 (on the Mac at least), it provides links to Firefox’s suite of native developer tools and a very impressive command line, which gives a range of shortcut commands to control the tools.

Read the full article


50 fantastic tools for RWD

As part of .Net magazine’s Responsive Week, I’ve updated an article by Denise Jacobs to now bring you 50 fantastic tools for responsive web design.


On Adobe Muse

Today Adobe released a preview of their new WYSIWYG website creator, Muse. Shortly after, I had a good old moan about it on Twitter. Not, as you may think, because I feel threatened by website creation being made easy – it’s been easy for ages, but ‘easy’ doesn’t always mean ‘good’ – but because it gets a few fundamental things badly wrong.

My code purist side rejected it because the markup it outputs is horrendous; if you don’t believe me, take a look at the code for one of their example sites, ‘Lucid Synergy‘. My educator side rejected it because it teaches you nothing about how a web page is made; I learned to code by using Microsoft FrontPage many (many) years ago, and understood HTML by editing the source of the document and tweaking it until I got it the way I wanted – but Muse has no code view, so this is made very difficult.

But the real problem with Adobe Muse is deeper than that: it’s that all semantic sense is completely removed from the page. There are no headings, no lists, all text is in p elements, inline styles are applied with span rather than em/i/b, etc; this gives no structure, no meaning, no aboutness to your page, which at the very least means penalties for SEO.

And worse still is that there’s no document flow; all the elements you add to the page are positioned relatively to their parent and follow no particular order, which is pretty bad for search engine spiders (and hence your SEO), but absolutely terrible for visitors using assistive technology.

It’s the product of a company that cares only about appearance, and nothing for content. As @paulrobertlloyd said on Twitter:

It’s not that the code Adobe Muse generates is ugly, it’s that it’s meaningless.

The issue with the lack of semantic elements is not insurmountable, it just needs some work by Adobe before the final release. The lack of document flow and content order is more serious, however, and will need a complete rethink; I hope that this happens.


Bespin, the cloud, and Canvas

Mozilla recently launched a very early version of Bespin, their online IDE (Sitepoint have a nice overview). It’s hard to make too much of it at this early stage, although it is impressively fast and responsive; time will tell if that continues to be the case as new features are added.

This responsiveness seems to come from the front end being created using JavaScript (only 62kb compressed, apparently) and the HTML5 canvas element (update: more on that implementation). Seeing other examples of what its capable of, I really need to start learning more about canvas.


Immediate uses for Microformats

One of the hardest things about Microformats is explaining their benefits to people. You can say “It’s a standardised format of marking-up content, which is both human and machine readable!” until you’re blue in the face, but until you can show people a practical benefit they usually remain unmoved.

Luckily there are a few tools out there which will help you show off the benefits of using Microformats, and involve little work from you.

Read the full article


Aside

I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.