Archive: Nov 2012

  1. Audio and video embedding

    As well as sorting out image handling when putting together my halcyon days of Sinclair post, I did a little research on how best to embed the audio and video clips in that article.

    I decided to use the audio sharing site SoundCloud for the audio clip. Their embedded audio player looks good and scales nicely with a responsive web design like this one – so I didn’t need to make any additional changes to the site’s CSS. The whole process of creating an account, uploading the audio clip and generating the code for embedding in the article was really straightforward.

    The video clip was an existing YouTube video. Embedding YouTube clips is generally fairly easy, but to get their player to scale in the same way as the SoundCloud player requires a little work in CSS. Fortunately A List Apart came to the rescue with an article by Thierry Koblentz on Creating Intrinsic Ratios for Video.

    The HTML to embed the YouTube clip looks like this:

    <span class="embed-youtube" >
     <iframe class="youtube-player" type="text/html" 
     src="http://www.youtube.com/embed/It2PGpFppN8?version=3&amp;rel=1&amp;fs=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" 
     frameborder="0">
     </iframe>
    </span>

    Applying the techniques outlined in Thierry Koblentz’s article, results in this CSS:

    .embed-youtube {
        text-align: left !important;
        margin-bottom: 1em;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
    }
    
    .embed-youtube iframe,
    .embed-youtube object,
    .embed-youtube embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    In essence, it’s necessary to create a wrapper element (.embed-youtube) that does all of the scaling to hold the embedded video element (.embed-youtube iframe). The article explains this in detail, though the CSS is relatively self-explanatory except for the padding-bottom and padding-top declarations. These are actually the clever bits. The padding-bottom is set to create the 16:9 ratio for the video (9 divided by 16 = 0.5625); and the padding-top is some extra space for the YouTube controls (which are a fixed 25px). Setting a different padding-bottom percentage would result in a different box ratio. For example, 4:3 would be 75% (3 divided by 4 = 0.75).

    I’ll admit, I haven’t added some of the CSS manipulations necessary to get everything working in earlier versions of Internet Explorer, though it is possible if you don’t mind adding a little extra markup. I decided to keep it clean.

  2. Delivering the right images with the <picture> element

    One of the things I started looking at when writing about my Sinclair heritage was how to display images that looked good even when viewed on the latest higher resolution displays.

    Simply sending high resolution images regardless of whether they are required or not works of course, but results in web pages much bigger than they need to be for most people, and so slower load times. I’d already given a little thought to this when adding the images for the various project pages, but had cheated then by just serving up high resolution images (sorry).

    A lot has been written about how best to handle this particular issue. There is general agreement that something needs to be done, but no agreement as to the best way of doing it. There are two competing proposals – one extending the  <img> element and the other introducing a new <picture> element to work in a similar way to the existing HTML <video> element.

    The solution I’ve adopted uses the <picture> element. It seems the best solution of the two to me, but – more significantly – a javascript solution has been devised for implementing it now. There is no functional workaround that uses the proposed <img> element extensions.

    If you’re interested in this, a good starting point is A List Apart’s Responsive Images and Web Standards at the Turning Point. A draft of the proposed <picture> element can be found on github: The picture element

    The HTML for a given <picture> element  looks something like this:

    <picture class=" wp-image-249" title="Sinclair ZX Spectrum">
       <source srcset="IMG_1746-300x224.jpg 1x,
                          IMG_1746-1024x764.jpg 2x">
       <source media="(min-width: 44em)"
                  srcset="IMG_1746-1024x764.jpg 1x, IMG_1746.jpg 2x">
       <source media="(min-width: 85em)"
                  src="IMG_1746.jpg">
       <!-- Fallback content for non-JS browsers.
               Same img src as the initial, unqualified source element. -->
       <noscript>
            &lt;img src="IMG_1746-300x224.jpg"
                        class="wp-image-249"
                        title="Sinclair ZX Spectrum" /&gt;
       </noscript>
    </picture>

    Fortunately I don’t have to hand-craft that HTML for each image – it’s generated via my WordPress plugin that looks for and processes standard image elements automatically.

    In the above example, the default image size is the smallest – 300×224 pixels (IMG_1746-300×224.jpg). This is the image that is displayed unless the device requesting the page is using a high resolution display (x2) in which case a higher resolution image is sent – 1024×764 pixels (IMG_1746-1024×764.jpg). If the user’s browser window is greater than 44em wide, the default image is the 1024×764 pixel image, and the higher resolution version is the full size version of the image. If the browser window is greater than 88em wide, the full size version of the image is sent no matter what.

    Photo: Sinclair ZX Spectrum

    This is the image that is referred to in the HTML on this page – you’ll get a different version of it depending on your browser width and screen resolution

    The WordPress plugin I’m using is based on one developed by David Newton called wp-picturefill, which itself is based on Scott Jehl’s original Picturefill project. My revised plugin includes the matchMedia polyfill incorporated in Scott Jehl’s original project; some code to get things working when an image is captioned; and a fix for images suddenly disappearing in some browsers (Opera, Firefox) in some instances. It turns out the latter was because the image width was being set to 0. My fix just removed the bit of code that was doing that. At some point I should check whether it was important.

  3. Halcyon days of Sinclair

    I have been asked what the halcyon days of Sinclair looked like – and just who this Sinclair was. Clearly these questions come from overseas, because everyone in the UK would know that I am referring to Sir Clive Sinclair, inventor and father of home computing.

    Clive Sinclair had been involved in designing various electronic devices since the 1960s, including a miniature radio, a number of pocket calculators and televisions and the first mass-market digital watch. Some of these devices were successful, others less so. It was his home computers that were to provide his fortune though. His first complete computer was the ZX80 – the first machine available in the UK for less than a hundred pounds (just). It was followed by the ZX81, which sold over 1.5 million units in two years. But by far the most popular was the ZX Spectrum, his first colour computer, launched in 1982.

    The ZX Spectrum package. Sadly not my original model, which I sold to buy the QL.

    A 16K rubber-keyed Sinclair ZX Spectrum was my first introduction to Sinclair computing. It was on this machine that I began my very short early programming career by retyping sections of code from magazines like Computer Weekly. My Dad still recalls with horror the occasion when he gently knocked the Spectrum, causing it to reset just as I had finished entering one of the lengthier magazine programs. Even now he seems little comforted by the fact that the program would almost certainly not have worked – either because of a misprint or (more likely) my poor transcribing efforts.

    My 16K Spectrum was fairly soon upgraded to 48K, because the best new games were only available for 48K Spectrums. Yes, despite Sir Clive’s best intentions, my programming was put on hold, and the Spectrum became my games computer. So, I would get the latest game on cassette, attach the tape recorder to the computer, and issue the famous command: LOAD “”, before pressing play and waiting for the game to load. And waiting. Sometimes it would take as long as 4 or 5 minutes. Sometimes it wouldn’t load at all. My children, with their access to iPod Touches and iPads, have no concept of what this wait was like.

    But I found a recording of what that tape loading process sounded like (shortened, to be nice), so I could share it with them:

    Happy memories.

    In the process of finding that sound, I found the Museum of Endangered Sounds, the idea of which I love. It also scares me – in a how old am I? way – how many of the sounds available on that site mean something to me and nothing to my children.

    Some of the Spectrum games were very good – The Lords of Midnight, Ant Attack, Jet Set Willy were three of my favourites – but they all look terribly dated now. I recently showed my son a video of the gameplay of Match Day by Ocean Software, which I spent hours playing when I was his age. He laughed. I’m not sure he believes it was a real game.

    It was only really when the Sinclair QL (Quantum Leap) came along that I got interested in computers again. I purchased one when they’d been reduced in price after failing to sell well. I think I paid £150 in Dixons for a QL that came with a Serial 8056 thermal printer.

    The Dixons package. I’m as surprised as anyone that I still own that printer.

    The failure of the QL isn’t really a mystery. When first launched it was expensive (£399) and didn’t work very well (the early machines needed a special dongle because there hadn’t been enough time to finish the software), and they didn’t run any of the old Spectrum software. Efforts to cut costs also hampered the potential of the machine. The main processor was a bus restricted version of a faster chip (meaning it was slower than it might have been); there wasn’t enough memory on board for day to day usage – so the dual microdrives that were included for storage got more of a workout then they were really designed for, swapping data in and out of memory (slowly); and the keyboard – though a vast improvement on earlier Sinclair keyboards – had its limitations.

    But once some of the early issues had been ironed out, the QL was a very capable computer. Despite the bus limitations it was still fast for the day and those dual microdrives were eventually pretty reliable, even though they really didn’t look as if they ought to be. And there were plenty of people ready to improve on the original. By the end of its working days my QL had a Trump Card memory expansion (adding a mighty 768K), dual disk drives and an external keyboard. Others went further, developing whole new computers based on the QL architecture – including the Thor which, if my memory is accurate, the makers hoped to make the IBM PC equivalent for the Soviet Union.

    The CST Thor 1

    I really wanted one of those Thor computers.

    There were plans for further development of the QL too, like the QL wafer stack model. I still want one of these.

    I’d still very much like one of these please.

    This is from Rick Dickinson’s Sinclair photos on Flickr. He’s the design genius behind most of Sinclair’s best products. (And it’s worth looking at all the photographs on that Flickr photostream if you like this sort of thing.)

    But further development of the QL was abandoned when Sinclair was forced to sell the rights to his computers and brand name to Alan Sugar, mostly as a result of the financial disaster that was the Sinclair C5 electric vehicle (yes, I loved it).

    My university kit, including the Z88, Canon printer and some spare EPROMs.

    Sir Clive persevered though and brought out one more great computer – the portable Z88 (again designed by Rick Dickinson) – with his new company Cambridge Computers. I paired mine up with a Canon inkjet printer, and headed off to university.

    Sir Clive is still trying to build a successful electric vehicle.

    Updated: 11 November 2013, with a new YouTube video.