tutorial 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


My Name In Print

I hope you’ll forgive a little self-promotion, as I’d just like to play a few quick notes on my own trumpet. The latest issue of Net magazine is now on sale, and features a tutorial article, Create A Dynamic Content Panel, written by me.

In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.

I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).

Printed TutorialPrinted TutorialPrinted Tutorial

On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.


Create a studio-style backdrop with CSS3

Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.

As the title makes clear, the tutorial is for creating the effect in Photoshop – but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.

Read the full article


Checking for installed fonts with @font-face and local()

Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).

One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.

The way to get around that is quite simple; use local() to check if the font is on the user’s system first.

Read the full article


Custom markup for Microformats

A mistake which seems to be fairly common when taking the first steps in learning about Microformats (and one which I have made) is to presume that the markup which is generated by the generation tools – for example, the hCard Creator – is the markup that must be used in the page.

That’s not the case, of course; with a few notable exceptions, the markup is completely customisable, and it is the order of the class names (and other attributes) which matters.

Read the full article


Generated content – Part One: Content

One of the pieces of good news from the Internet Explorer 8 announcement is that the new browser will support generated content. This is something the IE team have been resisting for a while, but it’s a very useful and flexible extension to CSS (whether or not it should be included is an argument for a different time).

At it’s most basic level of usage, content allows you to append strings at the beginning or end of an element. In this first example I’m going to use the :after and :before pseudo-classes to append content to both ends of the h1 element:

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.