tutorial 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

My Name In Print

I hope you’ll for­give a lit­tle self-pro­mo­tion, as I’d just like to play a few quick notes on my own trum­pet. The lat­est issue of Net mag­a­zine is now on sale, and fea­tures a tuto­r­i­al arti­cle, Cre­ate A Dynam­ic Con­tent Pan­el, writ­ten by me.

In the arti­cle I explain how to build a dynam­ic Con­tact area, as we did on our recent redesign of Preloaded.com, using the Web Stor­age API and the BBC’s Glow Javascript library.

I’m not sure what the rights sit­u­a­tion is with this arti­cle, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the mean­time, you can buy a copy of Net mag­a­zine in the UK at all good newsagents, as the say­ing goes (I don’t know if it will be in over­seas edi­tions also).

Printed TutorialPrinted TutorialPrinted Tutorial

On the sub­ject of print, I’m also cur­rent­ly writ­ing a book about CSS3 which should be pub­lished lat­er this year. I’ll have more infor­ma­tion on that near­er the time.

Create a studio-style backdrop with CSS3

Site­point’s Web Design blog fea­tured an arti­cle this week called Cre­ate A Stu­dio Style Back­drop In Pho­to­shop, which pro­vides instruc­tions for mak­ing a glossy, reflec­tive sur­face effect, sim­i­lar to what you often see in adverts.

As the title makes clear, the tuto­r­i­al is for cre­at­ing the effect in Pho­to­shop — but real­ly, the same effect is fair­ly eas­i­ly achiev­able with some bleed­ing-edge CSS. That said, it won’t work in every brows­er, so cur­rent­ly it’s just a proof-of-con­cept piece.

Read the full article

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

Fire­fox 3.5 was released ear­li­er today, and joins Safari in sup­port­ing the @font-face rule with Open­Type and True­Type font fam­i­lies, allow­ing you to use a wider range of fonts in your designs (as long as they are cor­rect­ly licensed, of course).

One slight draw­back of the tech­nique is the blank space that’s dis­played as the new font is loaded into the brows­er; this is espe­cial­ly unnec­es­sary for users who already have that font native­ly on their system.

The way to get around that is quite sim­ple; use local() to check if the font is on the user’s sys­tem first.

Read the full article

Custom markup for Microformats

A mis­take which seems to be fair­ly com­mon when tak­ing the first steps in learn­ing about Micro­for­mats (and one which I have made) is to pre­sume that the markup which is gen­er­at­ed by the gen­er­a­tion tools – for exam­ple, the hCard Cre­ator – is the markup that must be used in the page.

That’s not the case, of course; with a few notable excep­tions, the markup is com­plete­ly cus­tomis­able, and it is the order of the class names (and oth­er attrib­ut­es) which matters.

Read the full article

Generated content — Part One: Content

One of the pieces of good news from the Inter­net Explor­er 8 announce­ment is that the new brows­er will sup­port gen­er­at­ed con­tent. This is some­thing the IE team have been resist­ing for a while, but it’s a very use­ful and flex­i­ble exten­sion to CSS (whether or not it should be includ­ed is an argu­ment for a dif­fer­ent time).

At it’s most basic lev­el of usage, con­tent allows you to append strings at the begin­ning or end of an ele­ment. In this first exam­ple I’m going to use the :after and :before pseu­do-class­es to append con­tent to both ends of the h1 element:

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.