Qazzian.co.uk

Vertical-align

2011-03-03T18:29:00.001Z

Having trouble with my vertical alignment.
It works in one example but not the other.

See test code at jsbin: http://jsbin.com/imecu4/5

A summary of 'Rethinking the Web' by Yiibu

2011-02-13T23:14:00.010Z

This post is a summary of the original slides by Yiibu which you can see on slideshare.
I have reworded, cut and added to make it more readable as a blog post.

Rethinking the Web

The point of the internet is to reach people, not devices. There are approx 6.8 billion people in the world, 3.4 billion of whom have access to a mobile device. 1.3 billion people use the internet on their devices ~19% of the population. Many of these are using old phones with outdated browsers.
The problem with web developers is that they mostly have iPhones and develop exclusively for that device, but most of the world are using non-html5 mobile devices. 6% of the US population have iphones and less than 4% for the rest of the world. That's 15% of the world population you're missing out on.

So let's look at the main mobile browsers

Webkit: - Open source, Excellent standards support, Used by many leading companies, and many leading phone OS's
Opera mini: - Free to install, Ajax, Excellent Standards, Available on the same phones as Webkit and even more (including older phones), Very efficient with low data usage, Proxy browser.

For more on this see PPK's recent blog series on Mobile browser market share:part1, part2, part3 and part4

Building a web app

Start with familiar territory in HTML5, css3 and JavaScript. Most smart phones support all these very well. Older devices will still struggle with some of the latest concepts. However HTML was designed so that if the tag is not recognised it's content is just displayed. We should be able to get an adaptive experience that works on all html supporting devices. (We'll forget about wap for now)
So what is the correct adaptive experience? First, you do not know what the screen size is going to be. For mobile devices, the screen size can be between 128x160 to 1280x800, with various aspect ratios & changeable orientations. Therefore we need an adaptive layout for the site.

Case study: Colly

Flexible, squishy layout which resizes based on the available screen width - except it doesn't work well for proxy based browsers. The proxy server renders the page the same way a desktop would, giving the user the full site rendered on a small screen as very small image, which you then have to scroll around. This is keyhole browsing, the viewport is much smaller than the content, like looking at a room through the keyhole.
In this case the site only really works on a webkit based browser. Challeng: Is webkit the new IE4? ("this site works best in IE4/Webkit").

Some guidelines for writing for mobile

see also LukeW's Mobile first Blog entry.

1. Mobile first

traditional thinking: Desktop site + @media queries = mobile site But most devices fail the @media queries so they end up with the desktop site anyway (partly because they are based on older standards). Also mobiles will still have to download and parse the default desktop content before getting to their bit.
New thinking: Mobile site + @media queries = desktop site. (also known as progressive enhancement) This works because the desktop browsers move faster and (generally) get updated more often then mobiles, so most desktop browsers now follow the @media queries. Older browsers will still get a usable site.

2. Use well structured meaningful markup.

Make use of the new elements in HTML5 to give the content semantic structure. Well defined class names make the structure even more meaningful. That way the browser can do some heavy lifting for you.

3. The Absence of @media queries is the fist @media query

An all in one css file helps with http requests, browser caching etc. but will include a lot of cruft that small devices (don't forget expensive bandwidth costs) do not need. Also putting mobile specific rules at the bottom of the file is backwards!
Instead, thinking of point 1, the default stylesheet should be mobile compatible then add a extra stylesheets afterwards to progressively enhance the site.
Which is really point 4...

4. Progressively enhance the site with JavaScript and @media queries

JQuery is a massive library for a mobile device to download and parse. Instead try using xui.js or jQuery-mobile.
Use CSS 3.1 for animations instead of JavaScript. less code and it's faster where supported. e.g.

.scrollto {
 transform: translate(540px, -200px);
}

Make sure the core of the site works without JavaScript.

5. Adapt content (Especially images) appropriately for mobile devices.

Use smaller images for smaller screens. Background images can be altered by the media's style sheet. Many cms systems (e.g. WordPress) can pre parse the html before sending it to the client. You can use info from the user agent or JavaScript+cookies to alter the image markup to use smaller/bigger images. Don't forget to alter the width and height attributes as well. Use relative sizes to ensure that element fit the width of the screen.

6. Compress content where possible, avoid sending unnecessary data.

If you do not display or use something on a mobile device make sure that it is not downloaded. Bandwidth costs more on mobiles. display: none on an image still causes the browser to download the image source. Fonts are still not supported on many devices and can also be quite large. Minify CSS & javascript before sending it (but you do that anyway, right?).

Why even bother?

Because the mobile web is growing fast, especially in developing countries which are skipping the wired/pc based internet and going straight to the relatively cheap mobile market.
This post is licensed under cc-by-nc-sa

More t-shirt sites

2011-02-11T10:16:00.001Z

Some funky Film geek t-shirts:
http://www.lastexittonowhere.com/shop/category/sci-fi/?paginate=0

Rethinking the Mobile Web by Yiibu

2010-09-22T15:56:00.001Z

Excellent presentation about building for the web with Mobil at the
forefront of your mind

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Chrome 6's API for site performance

2010-08-03T09:44:00.001Z

The latest version of Chrome 6 now has support in the API for measuring
the performance of the page.

You can access this with javascript via the object window.webkitPerformance

More info on the Chromium blog
<http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html>
and the Technical Spec <http://dev.w3.org/2006/webapi/WebTiming/>.

They also mention that a similar object is available in the IE9 preview
window.msPerformance and that Mozilla are also working on one.

Maybe we could have a unified object in the future with a standard
implementation?

Firefox Account manager

2010-04-30T13:40:00.001Z

Today Firefox have announced new plans to help users control their
online accounts.
The user should be able to select an account, log in or out from inside
the browser.

This should be easy to support for most web sites.

see http://hacks.mozilla.org/2010/04/account-manager-coming-to-firefox/
for more details.

SVG: double dose

2010-01-26T18:49:00.001Z

A List Apart have a double helping of SVG goodness including a quick
how-to on implementing a scalable background image cross-browser.

http://www.alistapart.com/issues/299

Firefox 3.6 File upload API

2009-12-23T11:04:00.001Z

Mozilla have announced a new file upload api allowing users to just drag
and drop files from other applications into the browser and then submit
them in a normal form. It even loads thumbnails into the page.

For a demo visit http://demos.hacks.mozilla.org/openweb/uploadingFiles/

oEmbed

2009-11-18T10:53:00.005Z

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Grep with Perl objects

2008-04-10T10:58:00.006Z

I was having trouble getting grep to work today. I'm a bit of a perl newbie so still unfamiliar with many of perls basics. Anyway I was trying to loop through a list of objects, get the id of the object and see of that was in another list. Looking through as many tutorals as I could find They all had the same basic example:

    @foo = grep(!/^#/, @bar);    # weed out comments

Or elaborated on the regexp theme. So I wrote the equivalent with a comparison operator instead of a regexp.

    my $temp = grep ($object->{'id'} eq $_, @object_id_list');

No, no, no, no! says the compiler, I don't like this at all! Talking to my colleague revealed one small fact. For regular expressions there is no problem with using

    grep(EXP, @array)

But, if you want to do something more complicated then you must use

    grep {BLOCK} @array

So my line becomes

    my $temp = grep {$object->{'id'} eq $_} @object_id_list';

My biggest bugbear with perl is that sometimes the documentation is not very clear and some more examples in perldoc would help to clarify a lot of confusion to the perl beginner.

Louise's wish list

2007-12-02T23:02:00.000Z

Here is a link to Louise's Amazon wish list, for those who may want to buy her a Christmas present.

Louise's wish list

Unfortunately she has lost her password so cannot update the list.
She no longer wants:

The Kite Runner,
Jane Austen: A Life,
Mao: The Unknown Story
Agnes Grey and the Tenant of Wildfell Hall.

STYLING FILE INPUTS WITH CSS AND THE DOM

2007-09-14T12:09:00.000Z

Shaun Inman Has an excellent post on styling file input buttons

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Make sure you check out the comments for similar techniques.

T-Shirts

2007-08-31T14:01:00.000Z

Not been here for a while but I wanted to post some cool t-shirts I wouldn't mind getting.

Run R2 t-shirt design @ © SplitReason.com

Bad Motivator t-shirt design @ © SplitReason.com

Robot Lovin t-shirt design @ © SplitReason.com

If you like these as well, then check out the rest of the site.

Wii Browser

2007-01-30T12:26:00.000Z

Some details on the Wii Opera Browser thanks to Shaun Inman

Window size: 800×500
User Agent: Opera/9.00 (Nintendo Wii; U; ; 1309-9; en)
JavaScript works (including alert() and XMLHttpRequest())
Cookies work
Flash version: 7.0 r68 if you believe in JavaScript (Wii 7,0,70,0 if you believe Adobe)
The buttons on the wii-mote result in the following JavaScript keyCodes:

Code Key Press

170 -

171 B

173 2

174 +

175 up directional

176 down directional

177 right directional

178 left directional

The browser doesn’t recognize the nunchuk.

Code	Key Press
170	-
171	B
173	2
174	+
175	up directional
176	down directional
177	right directional
178	left directional

Puzzle Games

2007-01-04T22:49:00.000Z

A web site full of logic puzzles. Could almost be heven on earth. http://www.conceptispuzzles.com/puzzlecenter/free_weekly_puzzles.asp

New Hertsdirect Interactive Map

2006-11-01T10:45:00.000Z

The new map has just gone live on www.HertsDirect.org It's only a soft launch so not advertised yet until we are convinced of its robustness but here is a link for beta testing (because all things web 2.0 have to have a beta) New Map If you don't want to search just hit 'Go' and it will go straight to the map Compare it to the old map to see why we changed. Look out soon for more updates, Ian

Javascript Objects and the button element

2006-10-03T13:13:00.001Z

Just wanted to link to some fantastic articles about the slightly more advanced elements of Javascript hosted on digital-web magazine

The first one is a guide to creating and using javascript objects and what the different methods mean in the real world. Objectifying Javascript

This second one is about the HTML button element, showing its versatility compared to the standard input element. Push my button

That's all for now but until next time try having a look at some more of digital web. Especially if you've not been there before.

Iliad Is out!

2006-09-21T15:48:00.000Z

Well after waiting for ages the iRex Iliad is now out, but at a whopping price of £4. Is it worth the wait? Maybe I'll find out at Christmas.

On another note. I've just downloaded the Aspell extension for Firefox and it will definitely make an improvement to this blog. the home page is here

The race for the first eInk eBook Readers

2006-06-01T08:55:00.000Z

Have now been waiting patiently for 4 months now for the iRex iLiad. Originally they announced a launch in April, then they put it back to May due to technical problems on their online shop. Now they're saying that they will prioritise B2B customers and the general consumer will have to wait until September! Well some of are getting impatient. So I did a search on the blogosphere and found this TeleRead.org - Irex Iliad postponed.... Again! which lead to this MobileRead And, a Google search later, this Jinke It looks like Jinke will be releasing samples of their V2 eReader near the end of June. The hardware doesn’t look as good as the iLiad but it's running on Linux so perhaps overall it might be cheaper. It also comes with an API so customisations galore! (Note the V2 is a later version than the V8) The race is getting closer now and chances are, who ever releases first will get the clear advantage. Personally I'm not looking to get the Sony reader, partly because of the promised DRM and the fact that Sony always over price their products, esp in the UK. If Jinke can get their V2 out by July/August then they will win it for me. Edit - Here is a link to E Ink, the company providing the ePaper for all three companies E Ink.com.

My Home Page gets a refresh

2006-05-30T16:04:00.000Z

I've finally made changes to my Wanadoo site to bring it up to standards compliance. The Qazzian.co.uk doesn’t exist yet but will in time. For now I'll have to put up with Wanadoo servers Unfortunately there's only two pages up at the moment Overview & News, both under Home. When I've got more time i will add the rest of the content. For now if you have any comments email Qazzian at hotmail dot com
Qazzian.co.uk > Qazzian.co.uk

AJAX Debugger

2006-05-17T16:19:00.000Z

Curiosity is bliss: AJAX Debugging with Greasemonkey This is a pretty cool site for all those AJAX developers. It's a Greasmonkey Script which instals a HTTPObject sniffer as a floting layer in your browser. It's great as you can see all the Posted and Recieved files from the HTTPObject, can also copy and past them into your editor. no more alert(responseText) lines in your code! To use it you need FireFox and the Greasmonkey Extension. Look at the home page for a MSIE version and any updates.

IIS & Tomcat cont.

2006-04-04T08:39:00.000Z

Unfortunatly we never did discover what happened to IIS. In the end Tech support had to reinstall it and copied the config file from the production server. It's a good job they were set up the same way!

XML Editors

2006-03-29T15:33:00.000Z

Interested in an xml editor ? Have a look at the following link for excellent reviews and comparison tables of most of the available editors. http://ahds.ac.uk/creating/information-papers/xml-editors/

IIS & Apache Tomcat

2006-03-28T16:30:00.000Z

Aghghhghgh! What a nightmare! It was working yesterday and now what's going on? We have a development webserver at work that uses IIS 5 and Tomcat 4 to display standard web content and run some Java servlets. For some reason after rebooting the servlets can no longer be accessed through port 80, but only through port 8080 (i.e. apache's standard port not IIS's). I've been through all the documentation I can find on the subject, checked all the setup options I can and still nothing. The only thing I can think of is that the filter has gone down for some reason (Big green arrow is still there though). It's very frustrating. Has anyone out there had and solved the same problem? Ian

Welcome

2005-04-22T07:18:00.000Z

Hello. welcome to my blog page. As this is my first blog i won't bore you with details but will hopfully add stuff on a regular basis. General stuff. I live in the Uk, Male and In a long term relationship. I currently work for the local council as an assistant database administrator. In my spare time I help out with a local youth group and enjoy walks. But my GF takes up most of my time with shopping!!! That's all for now, see you all soon.