Web Classes Week 3 Topics

For tonight’s class, we’ll be learning a mixture of html and css.

As well as some good practical html tags, we’ll start looking at a bunch of css techniques which are collectively known as “the box model”, which are invaluable to laying out a page.

HTML

  • Linking within a page
  • The target attribute of links – options
  • lists and their uses with css, eg: navs
  • headers and footers

CSS

  • padding
  • margins
  • position
  • borders
Posted in Classes | Leave a comment

Web Classes Week 1: 21st February

This is a rough outline of what will be covered in week 1:

  • Course Introduction and saying hello
  • Introduction to the structure of a web page.
  • Demystifying html, css and javascript.
  • The html tag
  • Basic text tags
  • Your first web page
  • Making links
  • Including images in a page
  • Better-than-notepad code editors*

Kick-off is at 7pm (reasonably) sharp. Again, the suggested donations are €10 waged, €5 unwaged, and anything you donate is split 50/50 between Big Brother Big Sister Ireland and Seomra Spraoi. See you there!

*towards the end of the class, if there’s time, I’ll be showing you the benefits of Komodo Edit, which will make coding easier for you. To install it in advance, go to the Komodo Edit web page Don’t worry though, it won’t be essential, and I’ll have an install file on usb key.

To specify your interests, fill out this survey

If you have questions, or just want to say, “I’ll be there”, email davey.calcium@gmail.com

Posted in Classes | Leave a comment

Web Classes in Seomra Spraoi

Beginning in early spring I’ll be offering web classes in Seomra Spraoi. The classes will be structured in an adaptive way, teaching topics foundations from html, css and javascript up to administering blogs and search engine optimisation. Donations will be collected each week for Big Brother Big Sister Ireland and Seomra Spraoi.

Class Content

The goal of the classes is two-fold. The first goal is to provide students with the foundation skills for a life-time of making and modding websites and related technologies. It’s a lot easier than you might think, and anybody who is interested enough will be able to understand what’s involved. This vein of the course will lead up to coding from scratch a website with a series of linked pages, written in html, styled with css and using some practical javascript. For those who are interested, the same site can then be transposed into a content management system with a theme you create from your original code.

Of course, many people already have a website based on some open-source content management system or other, and simply want to be able to work with it better. To that end, there will also be a parallel vein in the course which involves practical use of plugins, comparisons of various blogging systems, how to set up a CMS, as well as how to write a search engine friendly site.

I’ll be trying to arrange the topics so that each individual class will be suited to one “vein” or the other, but in practice, nobody is really A or B, and initial responses show that everybody will have a unique motivation. To all intents and purposes it will be one continuous class, but people can determine whether an individual session suits their requirements on a week-by-week basis. There will be some universally important topics though, such as an introduction to html.

When & Where

Once we have enough people together we will begin classes, this is likely to be some time in February. The current plan is for the classes to be taught from 7-9pm on Thursdays.

The folks at Seomra Spraoi have agreed to provide us with a space, electricity and internet for the classes. In return, they have asked that donations be split 50/50. Directions can be found here: Contact / Location page for Seomra Spraoi

All Proceeds to a Good Cause

The other half of donations will go to Big Brother Big Sister Ireland (BBBS). BBBS have been operating for a number of years in Ireland, and run a mentoring programme which has been well received and has already made a great difference to a lot of young people. However, they rely exclusively on voluntary donations and have no public financial support. More funding means more matches can be set up, and could really mean something for some young people.

Neither the classes, nor myself are an official part of BBBS. The classes are being run on an independent volunteer basis, and I don’t represent BBBS. However, I have volunteered in the programme, which has highlighted to me how important it is that it can continue. I recommend having a look at their site and considering the ways in which you could get involved.

The suggested donations ( per class ):
Unwaged ( unemployed, students, etc ) : €5
Waged: €10

Register your Interest

If you’re interested in attending the classes, please fill out this survey of people’s interests, the results of which I hope to use to give everybody the best experience possible in the classes.

Thanks for taking the time,
Davey Faherty

Posted in Web Culture | Leave a comment

Font Looper – online mapping tool for icon fonts

So I’m a big fan of icon fonts in css, but they can be a little unwieldy to work with. The biggest issue I’ve faced with them is how impractical it can be to determine which character maps to which icon.

I’ve seen some good examples of how you can re-map a font in a font-editing application to make life easier. That’s a good approach for a lot of projects, but I felt there needed to be a quick fix solution  for those cases where it isn’t practical to add another application to your work flow.

So I’ve spent some time playing around with the File API and some borderline-hairy js and css, and I’ve made Font Looper, a web project that aims to make it dead handy to see which character you need to insert to display the desired icon in a font.

So far it works two ways. The first way is that you can map a font that’s on your local machine. The magic happens client side, so you don’t need to upload anything, which would be annoying, and a potential legal issue if you’re using a font with a restrictive license.

You can also provide the url of a font on a server, be it on localhost, a networked development server, or any location on the web. Keep in mind though, this technically constitutes hotlinking, and a site might not serve you a font if it the referring url isn’t part of that site. So be nice.

Have a play with it and do make suggestions. Font Looper

You can make suggestions in the comments here, of if you prefer, my twitter account for Calcium projects is @davey_calcium

And if you want to play with the code on your own machine, it’s up on github: github.com/daveycakes/font-looper

Posted in Css, font-face | Leave a comment

EMI Paint a Ridiculous Picture of How Irish People Consume Music and Use the Web

And They Want To Fuck With Our Shit


EMI Ireland's digital department having a board meeting

Unless things change soon, EMI and other multinational distributors are going to successfully bully our government into introducing unprecedented censorship to our internet access. To date, the only comparable action was Eircom’s voluntary blocking of the Pirate Bay, a result of an out-of-court settlement with distributors.

While the whole country, or even continent, is distracted by economic upheaval, a corporation is taking it’s chance to change our laws to tell private citizens what they can and can’t download, but only in the context that it affects them. There are no morally defensible considerations of blocking content that’s harmful to any society here. It’s just about protecting profits.

What They Want

They want the government to block sites that are accused of allowing people to download films and music illegally. There is no indication anywhere of what that constitutes. Chances are, anything from hosting a copy of a movie on a server to providing a link to a torrent file will fall under the law. That’s a lot of assuming, all I have to go on is how utterly pathetic the Irish Government have been in relation to all things internet-based, and what would be the best possible solution for EMI, which is what they’ll probably get.

Why is that Bad?

Censorship is, and should be, a controversial subject every time it’s rolled out.
In countries like China and Iran, people aren’t allowed to view sites that promote civil liberties or female emancipation, or criticise the government.
In Ireland, if the new laws come in, you may not be allowed view a site that somebody once used to post a link to a download of Click, starring Adam Sandler.

Citizens free access to information will be subject to the protection of the interests of multinationals.

Their Argument

They say that in the last 6 years, piracy has cost them €60,000,000 in CD sales.

Their Evidence

They haven’t provided any.

Now I’m not thick, and I know there are people out there who will download music instead of buying a CD. Some people will even do this exclusively. Another part of not being thick is being aware of services like iTunes, Amazon, Play.com. People are buying CDs online from abroad because it’s easier, and perhaps to an extent because shopping somewhere like HMV has the leisure appeal and personal touch of getting groceries in Aldi.

Also, people are buying downloadable albums instead of CDs because, let’s face it, CDs are a bit shit in this day and age. “What’s that? You want to me to pick up a physical object that stores one album on it and put it in something? And which Flintstones dinosaur gag plays this music?”. CDs are on the way out because they are now a sub-standard way to experience music, with .flacs and .mp4s offering better-than-CD music quality, unrivalled mobility and, vitally, not taking up half the shelves in your sitting room.

Davey you condescending bastard, EMI know all that!

You’re right, they do. They act like they don’t, because it suits them, but they do. They know that we do things digitally now, so of course they’ve altered their strategy to meet the demands of the modern consumer. For a shining example of their great digital strategy, let’s got to the wonderful, emimusic.ie . Please, open it in a new window, so you can read this at the same time, and we can enjoy it together.

Isn’t it beautiful! Look at all the information, look at all the music, why, there are ten whole albums being promoted! Seriously though, here’s a list of criticisms:

  1. There’s almost no content, ten tiny bits of info, and three tiny news articles.
  2. If you click on the covers of the ten albums, 7 of them will bring you to a 404 error page, because they weren’t written properly. Not only were they too fucking lazy to make proper links, they were too fucking lazy to see if they worked.
  3. The copyright date hasn’t been updated this year, see bottom left. Hey EMI! I thought you were going to marry copyright some day. Doesn’t look like it.
  4. Ha! Just noticed the huge Pink Floyd link is broken too. Stupid cunts.
  5. It looks like shit.

The Best Bit

Now, under those ten albums you see a bunch of links, “Buy”. Click on them there now.
Where do they take you? The Bosco one goes to the RTE shop. The other nine ALL. GO. TO FUCKING. ITUNES.

Surely EMI, so protective of CD sales, would be providing us with a list of brick and mortar stores where we can go and buy shiny discs packed full of about an hour of music? Are they not doing everything they can to protect CD sales? No of course they aren’t. If I wasn’t such a diplomatic lad, I might say something like the following:

“EMI are a bunch of lazy, greedy bastards. They can’t be bothered to do digital right and they can’t be bothered to drum up business for music retailers in the Republic who actually stock their wares. Rather than get their shit together, they want to fuck with our internet instead. They’d rather just shut down all the filesharing services than even pretend to try to provide a better alternative. They should not, and must not, be allowed to fuck with our shit. Any government official who complies with their demands is either completely incompetent when it comes to the web, or hopelessly resigned to protecting the rights of corporations over the rights of citizens. In either case, they aren’t fit to do their job”.

The original article that got me angry is here on the Irish Times

Posted in Web Culture | Leave a comment

Adobe drop Flash for mobile browsers: What it really means

So, during the week Adobe announced that they were discontinuing support of the mobile browser version of their Flash plugin.  Some people think it’s a triumph for the open web. Some think it’s a vindication of Apple’s former vilification of Flash. Some people think it’s the beginning of the end for Flash. In my opinion, it’s not really any of these things, though it is a sign of the times. Here’s why.

Flash Player in the mobile browser, and it’s significance

Flash in the mobile browser didn’t happen. It never became a de facto standard, like Flash in the desktop has, for rich web content. You still don’t get rich content in mobile browsers, by most people’s standards of what that means. A video is just a video, a song is just a song. Rich content means something more like an application, running as part of a website.  There are some pretty cool sites out there than run on smartphones and do fit that description, but visually or audibly, there’s nothing in them that couldn’t be displayed in a normal web page, once you leave aside some motion effects and the asynchronous loading of content. Flash in the mobile browser never took off. Is it really because it was just rubbish? Is that the standard of Adobe’s output to date?

Nobody developed flash for mobile browsers, because you’d automatically be splitting the mobile audience in two. Certainly, there were other considerations. Optimisation requirements would be strict, and even some of the mobile browsers that supported Flash wouldn’t automatically load flash content, opting instead to give you a place-holder button to play the flash. Those are two of a list of things you’d have to take seriously. In practice though, it never came to addressing such issues, because half the audience just wasn’t there. If you look at some mobile web stats you’ll see that these days, iOS and Android, to name the two main smartphone players, are about neck and neck. That’s after Android spending quite some time catching up. If you developed something in Flash for mobile browsers, maybe 40% of your intended audience would actually see it. For that reason, nobody was using it. Adobe weren’t seeing a return on their investment in mobile browsers.

This is why I say that mobile browser Flash never really happened, and it’s also why the plugin couldn’t really be considered a pillar of Flash in general. The plugin for mobile browsers is a failed venture, and it never became more than an appendix of the Flash project. From a technical perspective, there’s nothing to say they can’t develop it more. Commercially though, it’s pissing in the wind.

Steve Jobs vs Flash. Winning doesn’t make you right

In the tech press, there have been some frankly bizarre headlines about how the demise of the plugin has vindicated Steve Jobs’ opinion of it. Wired had a headline, “Jobs Was Right: Adobe Abandons Mobile Flash, Backs HTML5″. The problem with this is that it assumes that Adobe dropping the plugin proves that the opinions the late CEO gave on it were all correct, and that’s why it’s untenable. I’ve already shown why that isn’t the case.

Secondly, it suggests that Adobe weren’t supporting open standards before now. That’s completely wrong. For years Adobe have produced the definitive wysiwyg html editor, Dreamweaver. For most professional coders, it’s definitively horrendous, but that’s the problem with wysiwygs.

In reality, Adobe have been a member of the W3C since 1994. It’s THE organisation that promotes open standards for the web. Check the list of member organisations. While you’re there, look for Apple. Or Google. Or Microsoft. Let me save you time. They aren’t there. Safe to assume, Adobe are familiar with web standards.

They’ve also been developing a new application, Edge, for a while, which is pitched as the Html5 + Javascript + Css equivalent of Flash.

The Guardian had a more telling headline: “Adobe kills mobile Flash, giving Steve Jobs the last laugh”. This wasn’t a vindication, it was a victory. Mobile Flash didn’t die because it failed to evolve, it died because Apple refused to allow it on their platform. Sure, there was lots of PR spin, pointing out flaws in Flash, some real, some imagined, some exaggerated. But it was just PR, some of which was rendered laughable by their positing of “HTML5″ as the better alternative.

For example, they pointed out the unique security risks present in Flash. They do exist. However, they champion an alternative that leans heavily on javascript, which makes possible cross-site scripting attacks, which have done far more damage in the wild than Flash exploits.

If you want to understand why Apple didn’t want Flash on iOS, go look at any of the sites hosting thousands of flash games, which have been evolving for over a decade. If people had been able to play Crush the Castle on their iPhones, Angry Birds might have been perceived as little more than a cute rehash of an existing concept, rather than the immense success it is today. They did it first, but they did it in Flash. Why buy Apps when you can just go to Newgrounds? Because Newgrounds doesn’t work on an iPhone.

As many said at the time, Apple barred Flash from their phones because it would have been terrible for their business model. Their refusal to support it killed it. So they won, but that doesn’t make them right. They reduced the options for their customers, denied traffic to thousands of hard-working developers and said to the world “Unless you want to make an app and sell it with our blessing only, it better not run on anything fancier than javascript”. Fortunately for Flash developers, in the time since, Apple have been forced to allow apps developed with Flash into their store, but, the app store being what it is, they have retained their position as an enigmatic gatekeeper, who can deny an app without explaining why. To develop for iOS, is, as Jeff Atwood puts it, “serving at the pleasure of the king“. However, that’s a problem for all developers, not just those who develop in Flash.

What hasn’t been emphasized enough in the tech press is that Flash is still a technology with which you can develop for mobile. What has changed is that, in this arena it’s focus will be on creating apps, rather than in-browser Flash players offering similar sophistication. In practice, this is a recognition of how people currently use smartphones, and a successful repositioning of their tech.

“HTML5″ is not equal to Flash. Or HTML5

Mini web lesson for the uninitiated: what they call “html5″ is usually a combination of html5, css3 and javascript. Html 5 is the 6th html standard, though it’s still only a draft standard. That means it’s not a standard yet, but it will be, and most of the important things can be said to have nailed down. Why is it not Html 6 if it’s the 6th standard? Last time round things got a bit forked, and there were two competing standards, html4 and xhtml1.0 (yes, 1.0, I know). We’re all back in the same boat now though. That’s ok though, because html5 has lots of cool things in it, which will make the web better for everyone, and good browsers support most of the important bits. Html defines the structure and content of page.

css3 is the new standard for css, which defines the look and layout of web content. Again, it’s not final yet, but it’s really nice and a pleasure to work with, and good browsers support most of the important bits.

Javascript is the client-side processing language for web content. In essence, it tells your browser how to control and manipulate the content of a page, based on your interaction with it, or other factors. It’s about 16 years old, including upgrades, but does most of the heavy lifting in all the fancy things you see these days.

The above 3 things are commonly referred to now as HTML5. It’s marketing nonsense, and a complete bastardisation of what’s happening. So I’ll be calling them web standards instead. End of mini web lesson

So web standards are fantastic. They allow the wonderful practice of “write once, deploy anywhere”. That means anywhere that supports the standards, but that should be everywhere. The standards are open, so it costs nothing to use them, except time.

That “write once, deploy anywhere” is a really big deal. It means you can make a website, with lots of nice fancy things on it, and it will work on everything that has a web browser. For users, it’s egalitarian. For developers, it’s tremendously efficient. Unfortunately, if you want to do something really fancy, or more typically, you’re working in agency doing a promo for a client, and they want something really fancy, you’ll end up using Flash.

I’ve been there, several times. I worked in an agency, where we did lots of really nice stuff, and everyone was behind web standards. It wasn’t just the techy idealism of developers either, right to the top, there was no question that when you can give someone the same experience on their laptop, tablet or phone, that was a big win. Very often when we’d start devising the specification for a project, we’d consider whether we could do it using web standards. Sometimes we could, and it would be great, but once things got really fancy, it would have to be Flash. Because if you tried to make the same thing using html5 and javascript, it would just be too damn slow, too damn big to download, and you wouldn’t be able to do a whole pile with it. And it would be a pain to develop.

We put stuff out in Flash because if we tried to do the same thing using web standards, it would take ten or twenty times longer to open, and when you got it going it would be creaky as hell. When I say creaky, I mean “This is rubbish, people won’t use this” creaky. Once you work within your limits, you can do fantastic work using just html, css and javascript; but you must work within those limits. The results tend towards the Spartan.

Flash was the best way to give the clients what they wanted, too. They wanted to impress as many people as possible, as much as possible. More often than not, if they wanted a rich interactive experience, that meant Flash. Forget the people using smartphones, web use is too small a part of the market to sacrifice the experience to, and stuff won’t look as good on a screen that size anyway. Sure, you could develop an app, but that’ll double the cost of the project, and it better be damn compelling or people won’t bother to install it.

For your consideration: HTML5 Showcase and TheFWA (flash website awards).
Both of these show some really great work. You might notice however, there are a lot of things happening in the flash sites that won’t happen in “html5″ sites. I believe that eventually there will be an open standard that can do everything flash can do and more. It’s still a long way off though. Who knows, maybe Adobe will make Flash open-source.

A web without Flash would be an unnecessarily handicapped web. That’s why people who actually make websites haven’t turned their back on it. However, they have reduced their use of it. Since the arrival of javascript libraries, and reliable browsers, developers have found more ways to make a site appear more interactive, more alive without having to resort to using Flash. It’s a positive development, it’s made sites easier to maintain, quicker to load, and more friendly for non-typical devices like phones. For the big things, though: you still want Flash in your toolbox.

In summary

Apple successfully stopped Flash in the mobile browser from being a contender. It was an anti-competitive measure, and it worked.

Open web standards are great, but in practical terms, they’re still a long way behind Flash. Web shops around the world use open standards everywhere it’s practical, but when things get fancy, it has to be Flash, or it just can’t be that fancy. For that reason, we’ll continue to see Flash around the web for years yet.

As for people who dance on the grave of mobile Flash, and declare it a victory for open standards, well, the technology in that grave was assassinated by a corporation who wanted total control of their platform, and didn’t mind who they stepped on to do it. You know, the kind of thing that used to get Microsoft taken to court.

Someone ring Bill Gates and tell him he doesn’t need to run that charity any more. Being a dick is cool now. Controlling the market doesn’t get you sued, it gets you celebrated.

Posted in Browsers | Tagged , , , , , , | Leave a comment

w3c Bots, Age Gates and Validation

The following are the http_user_agent identifiers of several validation bots, and their respective services. The user agent strings are between inverted commas.
These are correct today, 18th February 2011, but may change.

“W3C_Validator” = W3C Markup Validation Service
W3C-checklink” =

Posted in validation | Tagged , , , | 2 Comments

Ireland has 33,132 twitter users who actively tweet. Maybe.

NOTE: this is obviously old information now.

I’ve seen a lot of estimates of how many people in Ireland use Twitter, and a lot of them seem a bit on the high side.

I recently saw an estimate as high as 150,000 . I don’t agree with the results, and felt the methodology was incomplete, so I though I’d do my own sums, from start to finish, to see what I’d come up with.

Starting figure: 200,000 unique visits to twitter.com happen every month.

Google estimate as much anyway1. Grand big number, so how do we chop it up? Well, according to google, this is based on cookies. A cookie, if you don’t already know, is a tiny piece of code your browser uses to identify itself to different websites. That’s browser, not computer, not your soul. So what’s called a unique visit is a unique instance of a particular browser, on a particular device, viewing twitter.com. If I clear my cookies, I get counted twice. If I log on at work as well as home, I get counted 3 times, if I view from my mobile browser, 4 times. That would be a bit extreme though. And a lot of people tweet commercially and so will only use their work machine to tweet.

I don’t know who uses twitter how, so this part is highly speculative. With that in mind, I’m going to make an educated guess. I think the unique visit:individual ration might be somewhere around 1.66:1. I think most people will check twitter on more than one browser over the course of a month, but I’m not going to assume they do it on 5 different browsers.

New Figure: 120,481 (but it’s using a divisor that I made up, it could be higher or lower)

How do we chop this down then, while we’re spoiling all the fun? Well first of all, this is visits to twitter.com. It’s not visits to the login page. So we’re talking about a figure for readers as well as active tweeters. So what’s the ratio? This is pretty tricky. I’d say of all the people I know who would read somebody’s tweets, maybe one in four would have a twitter account. This might be generous, I work in the web industry.

But that doesn’t mean the total is one quarter of the figure above. According to twitter themselves, 78% of tweets are made through their website, not a client or sms. 22% of the tweets involve not using the site, but do these people never use the site? This introduces a variable that’s very hard to guess. So I’m not going to.

If none of the client tweeters use the site, we could generously do the sums this way:
(120481/4)*1.2 = 36,144
If half of them do, it’s a bit lower:
(120481/4)*1.1 = 33,132
I think this one is more realistic

So, using educated guesses, pure opinion and spurious analysis, I reckon:

Ireland has 33,132 twitter users who actively tweet. Maybe.

…but don’t take my word for it. You can do your own sums with this form, add the values that you estimate yourself.

Enter your own figures and the estimate will appear beneath the form
(To twitter.com, from Ireland, according to Google)


(Average number of cookies, per user per month)


(Percentage of visitors to the site who actually tweet)

Estimate: 000 Irish People Tweet Regularly

((Total Visitors) / (Unique cookies)) x Percentage of Tweeters

I’d be interested to hear what values other people would use, so if you want to add your estimate to the mix, use the comments section for that.

Posted in Uncategorized | Leave a comment

Chrome drops h.264, provokes a storm in a teacup.

This week Google have announced that Chrome will stop supporting h.264 in the <video> tag. This has provoked a great wailing and gnashing of teeth, wholly out of proportion with what it means for the web. It doesn’t upset me for these reasons.

1. It’s good for the web

One of the best things brought about by the W3C is the creation of an even playing field. In the absence of a standardised video codec, Google bought and open-sourced WebM. It’s free to use forever, for software developers, web designers and the general public. It gets us one closer to being able to say, “this is a web video”.

While some have drawn attention to how low the royalties will be for h.264 when they come into effect initially, there are two things to take into account. Firstly, a couple of cent per download is fine if you make much more from each software license, for example, but what if you want to avail of the increasingly popular “freemium” model. If one in a hundred users is buying a paid-for version of my software, they have to cover the costs of one hundred royalty payments.

Another problem with h.264 is how the licensing costs appear to be the same worldwide, and so is disproportionately expensive to those in the developing world. The cost of a days production in Ireland and the cost of a days production in India are at odds, so the licensing cost of h.264 would punish an Indian developer much more.

WebM, on the other hand, is free to both, and so creates an environment for innovation and competition on a level playing field, globally.

2. The detrimental effects have been grossly over-stated by an insular tech community, hooked on iOS

It doesn’t matter how nice they are, iOS devices are not the sum total of internet-enabled devices, neither are they the future of the internet. In fact, they account for a tiny fraction of web use. Let’s use StatCounter‘s numbers, to illustrate. If 4.1% of web traffic is on a mobile device, 23.57% of mobile web traffic is on iOS devices, what percentage of trafic happens on hardware made by somebody who refuses to support WebM? Less than 1%.

In the scale of things: Not. That. Important.

Don’t forget, this is the world-wide web we’re talking about, not the EU-wide web, not the US-wide web. The real global web community doesn’t consist entirely of well-paid early adopters who run out and buy the best gadgets available. That’s the tech writing community, and too many of them seem to believe that an injury to iOS users is an injury to all. It really isn’t. In fact, it’s what they signed up for. Also, Apple could implement WebM tomorrow if they wanted to. And eventually, it looks like they’ll have to, when the dust settles.

3. The overwhelming majority of good browsers support WebM

There are a number of good browsers out there, the makers of which have committed to WebM already. The 3 most prominent of these, Firefox, Chrome and Opera, are the browser for 47% of web traffic. Safari has a bit under 5%, and the rest is almost entirely taken up by Internet Explorer.

I’ll tell you right now, the day the development community takes Internet Explorer seriously as the browser that sets the standard is the day I decide I’d rather be milking cows. That put to one side, the speed of upgrading among the IE-using community is slow. Really slow. It’s taken over 2 years for IE8 to be used by 2/3 of IE users. 2/9 are still on IE7, and 1/9 are still on IE6.

So good luck waiting for h.264 to become a de facto standard for html5 video.

That Said…

Most video content creators would benefit from h.264 being the standard, rather than WebM, because the former is so well-supported in video applications. You could output nice h.264 video in your editing program, ready for the web. WebM isn’t at that stage yet. But then, neither is the web. People are lamenting the death of a standard that never was.

If you’d like h.264 to be the standard, don’t ask Google to make it happen, it’s actually beyond their control. What you should do is start lobbying Apple, Microsoft and other owners of MPEG-LA, who control h.264, and ask them to make their codec free forever, just like Google did with WebM. They can afford it.

Posted in Uncategorized | Tagged , , , , | Leave a comment

Safari breaks a custom carousel, then Cycle breaks on IE when it’s used as a replacement – solution

A project required a navigation-controlled carousel, and I found a nice working solution using jQuery. Safari had problems with it in a bizarre way, so I had to use the Cycle plug-in instead. IE had problems with that, so I had to use both solutions, in a browser-detecting conditional statement.

The goal is to have a carousel containing five elements, with the elements being switched using a control outside of the carousel. They are to scroll from left to right, depending on which link is selected.

The quickest way for a developer to make this happen would be to use something like jQuery Cycle, it’s a great plug-in which does some really nice things, and it’s highly configurable. We’ve used it on a lot of projects. However, in the interest of having a smaller footprint, I thought I’d see if I could quickly come up with something small that does the same job, as there was very little required of the feature in it’s execution.

The css set up all the slides (class=”slide”) to be aligned horizontally inside #slides which is set in css to be the exact width of all 5 slides. This is contained inside #slides-outer, which has overflow:hidden, and the width of just one slide.

#slides-outer{
	height:330px;
	width: 690px;
	overflow: hidden;
}
#slides{
	position: relative;
	height:330px;
	width: 3450px;
}
.slide{
	width: 690px;
	float:left;
	height: 200px;
	position:relative;
}

The javascript (jQuery having been loaded), recognises the rel value of each link in the nav, these are set in html, and when each one is clicked, it changes the right value of #slides, which has position:relative, and jQuery is used to animate the change. In psuedo-code it goes as, “when a controlling link is clicked, get the number assigned to rel, multiply it by the width of a slide, and change the right value of #slides, moving the whole lot left by the appropriate amount of pixels”:

var psxoutercontainer = "#slides-outer";
	var psxcontainer = "#slides";
	var psxconwidth = $(psxoutercontainer).width();

	$('#nav a').click(
		function(){
			var psxpage = parseInt($(this).attr('rel') - 1,10);
			var psxposition = (psxconwidth * psxpage);
			$(psxcontainer).animate({'right' : + psxposition + 'px'});

			return false;
		}
	);

Html:

<div id="nav">
<ul>
<li><a href="#" rel="1">Link</a></li>
<li><a href="#" rel="2">Link</a></li>
<li><a href="#" rel="3">Link</a></li>
<li><a href="#" rel="4">Link</a></li>
<li><a href="#" rel="5">Link</a></li>
</ul>
</div>
<div id="slides-outer">
<div id="slides">
<div class="slide">
[content]
</div>
<div class="slide">
[content]
</div>
<div class="slide">
[content]
</div>
<div class="slide">
[content]
</div>
</div>
</div>

I tested it out and it was working well, until I checked it in Safari on a Mac. And it worked. Then a colleague told me that in Safari on their Mac, it didn’t. I checked on several different machines, and found that on some computers with the exact same version of Safari, on the exact same version of OS X, it would work on one and not the other. Incredibly frustrating, but there was no obvious way to fix it. Lots of googling turned up no solutions to the problem. So I swallowed my pride and commented out my code, instead pulling in the aforementioned jQuery Cycle, I had to change the width of #slides to 750px (why not 690px? because it didn’t want to happen that way.) and used the following code:

	$('#slides').cycle({
		fx: 'scrollLeft',
		timeout: 0,
		speed: 500,
		pager: '#nav',
		cleartype: 0,
		easingIn: 'easeOutBounce',
		easingOut: 'easeInBack',
		pagerAnchorBuilder: function(idx, slide) {
	        // return selector string for existing anchor
	        return '#nav li:eq(' + idx + ') a';
	    }
	});

So that had it working fine in everything, and I could be happy again. Except that IE was getting jealous of all the attention Safari was getting, so it decided that it didn’t want to play nice with Cycle. There was a gradient background behind the slides, and for whatever reason, IE was displaying a flat colour behind the slides, and it looked awful.

A bit of googling revealed that this was because of the Cleartype option being set in Cycle. Helpfully, they have a parameter for disabling this built into their plug-in, so I used that as part of the javascript. It can be seen above (cleartype: 0). That fixed the background problem, but caused a new problem, the text was now horribly pixelated in IE.

So in this instance, Cycle wouldn’t do on IE, not before I tried a bunch of different hacks or after. Then I thought, well, if I have something that works for each of these weird cases, I can put them in a conditional statement, detecting Safari, or not. So the final javascript looked like this:

if($.browser.safari){

		$('#slides').css('width','750px');

	$('#slides').cycle({
		fx: 'scrollLeft',
		timeout: 0,
		speed: 500,
		pager: '#nav',
		cleartype: 0,
		easingIn: 'easeOutBounce',
		easingOut: 'easeInBack',
		pagerAnchorBuilder: function(idx, slide) {
	        // return selector string for existing anchor
	        return '#nav li:eq(' + idx + ') a';
	    }
	});
}else{

	var psxoutercontainer = "#slides-outer";
	var psxcontainer = "#slides";
	var psxconwidth = $(psxoutercontainer).width();

	$('#nav a').click(
		function(){
			var psxpage = parseInt($(this).attr('rel') - 1,10);
			var psxposition = (psxconwidth * psxpage);
			$(psxcontainer).animate({'right' : + psxposition + 'px'});

			return false;
		}
	);
}

Finally, I had good-looking solution that worked perfectly in every browser worth worrying about. It was a uniquely weird situation, and I’m putting it up here in case it happens anyone else, so their web searches may be more fruitful than mine.

In case anyone is wondering, the original code workied fine on Chrome, so it wasn’t anything to do with Webkit, as far as I can tell. I never found out what was causing the highly unusual browser behaviour in Safari.

Posted in Uncategorized | Leave a comment