• Posts Tagged ‘conference’

    Time to build a better web – my talk at Heart and Sole (video, slides and notes)

    Friday, February 18th, 2011

    Heart and sole

    I just got back from Heart and Sole in Portsmouth where I was asked to give an inspiring talk about HTML5. I thought it is high time to make an audience like the one at Heart and Sole (students and small business owners) aware that HTML5 is not only a plaything of large companies and “web development rockstars” but that everybody can be part of the cause and that we really need people’s input and real life implementations to make the new open tech revolution a reality. The feedback was very positive. Here are the slides and notes with links. The conference was filmed so keep your eyes open for the recording of the talk.

    The Video

    Slides

    The slides are available on Slideshare:

    Notes

    Open tech rocks

    I am a big fan of open web technologies. Right now we are working on some great things that will make the web more responsive, allow for more creativity and extend the text based web to richer media like video, audio and 3D without resorting to closed development environments or having to pay licenses.

    HTML5 showcases

    There are a lot of great showcase sites that feature all the beautiful things we can do: HTML5 rocks by Google, Apple’s HTML5 showcase and there was even an advent calendar with daily HTML5 goodies throughout December.

    Making HTML5 impact our work

    This is all great, but I really think it is time to take HTML5 out of the labs and into our day to day jobs. We should start now to make HTML5 part of our deliveries and get clients excited about the new opportunities there are. Instead of celebrating HTML5 rockstars we should celebrate the opportunity to make our work more predictable, open to everybody and easy to use.

    Help promote HTML5

    This change needs promotion – by you. If you work on the web you should help make new open technologies succeed by using them in real products.

    Why should you care about this?

    Well, first of all we have to make our work professional and be more accountable for what we do.

    There should not be any magic in web development.

    You should not have to use some technology you cut and paste and have no clue what it really does. “It works, just use it” is not a sustainable environment.

    When things go bad, you should be able to trace the reason and fix it. Right now I get the feeling that a lot of web development is putting together random building blocks to build an interface that looks like a design we got handed down to us. That is the wrong way around. If we build from blocks we understand the interface can mutate and change to our needs and likes. If we start with a fixed idea any change later on will mean we need to replace everything. We’re not re-using enough.

    Take pride in the invisible

    Clients still don’t care much about our code and markup but we should. When I interview people I take a look at the source of the things they send me. The markup and CSS and JS code you leave behind is the message you give to the next developer. If it is unreadable or hard to maintain you come across as not caring. It is like a blog post with a very important message that gets lost because of abysmal grammar.

    Avoid repeating mistakes from the past

    I’ve been complaining about the quality of the underlying markup of HTML5 demos before and I think it is very ironic that we say view-source is the future but show bad code when you, well, view source.

    In the past we wrote browser specific code and omitted elements as the browser fixed it for us. Just because browsers are forgiving it shouldn’t mean it is OK to rely on them to do fix things. No other programming language allows you to write code like that. If we want to be taken seriously, we should take pride in our work. Not one browser will ever rule supreme, so if you rely on one for your product to work you add to the problem of people not upgrading their browsers. This is not innovation.

    HTML5 is not perfect

    There are a few things we should worry about. As with every change, we will have to face a lot of people who are against it.

    Adversity to change

    A lot of propaganda is being thrown around right now about HTML5 not being ready for prime time and open technologies being dangerous as you have no control over them and there is nobody to back them up. This has been a long-standing problem with any open source technology.

    No one size fits all

    The fact is that HTML5 and open technologies will not fit every problem out there. HTML5 is not there to replace Flash or Silverlight – it is there to offer an alternative.

    Open media can be downloaded

    A few days ago Serge Jespers of Adobe released an article about the problem of HTML5 that there is no DRM solution. The article had a good point, but the title “Stealing content was never easier than with HTML5” was very misleading. I have complained about this as it just heated the debate unnecessarily. Fact is that right now there is no file level protection of video in HTML5. If you want a protected stream that people can’t download, then you need to use Flash or Silverlight. The real question though is that if you want to protect something, why allow it to be in the open in the first place?

    New attack vectors

    With HTML5’s API allowing for deep access into the browser and the system it runs on we will also have new attack vectors for malicious code to deal with.

    Open means you can fix without asking for permission

    The great thing about any HTML5 issue like the ones above is though that the technology is open and everything can be analysed and fixed – if we can make it a priority. A closed system is a pain to patch and upgrade. Open systems are easier to fix and with the attack research being available we have the chance to patch problems before they get implemented in browsers. Security through obscurity was never a clever idea. If you commit a crime and plead in court that you didn’t know that what you did was illegal you won’t get away with it either.

    Welcome to the sweet spot

    The other great news about HTML5 is that you are in the sweet spot.

    Take part in the process

    First of all, it is not a secret club and you are invited to take part. The WHATWG Mailing List is where things happen and all you need to do is sign up.

    Free and open documentation

    How about learning HTML5? You don’t need fancy trainings or buy books (but there are some awesome ones out there). HTML5 Doctor is a great independent blog talking about everything HTML5. Mark Pilgrim’s book Dive into HTML5 is freely available on the web and if you want to meet a lot of enthusiasts of HTML5, just pop by on the IRC channel #html5 on freenet.

    Tools to make your life easier

    One of the main stumbling blocks for people to use for example HTML5 video instead of Flash is that you need to create the video in different formats. There are some services though that make it easy for you. I have listed a lot of them in my notes of my HTML5 multimedia talk at MIT but here is a reminder about two great services.

    Archive.org for video hosting

    Archive.org does not only store video for you when you release it under Creative Commons but also automatically creates an MP4 and OGG video from your movies for you.

    Vid.ly for online conversion and dynamic redirection

    A very new service by Encoding.com is Vid.ly which creates not only all the formats needed for different browsers for you, but also special versions for different mobile devices and HTTP streaming optimised versions for iOS devices. Furthermore, it creates one simple URL that redirects automatically to the right format. You can try it out yourself with the invite code HNY2011.

    Modernizr to test for support

    If you want to safely use all the new HTML5 features, there is Modernizr for you, a script that tests what the browser does support and ads classes to the HTML element that you can use in your CSS selectors and in your JavaScripts.

    Polyfills to support legacy browsers

    If you want to use the new features and make old browsers get the same functionality via other technologies, you can pick and choose from the selection of legacy browser polyfills available based on the same research.

    Large web sites using new features

    If you want to convince people that this is not only a toy for geeks, point out some of the big sites that are already using HTML5 to deliver high fidelity content like Nike’s better world, Oprah’s web site (using HTML5 video for rollovers) or the latest Apple redesign.

    Help us and join the ride

    We need you to make this work – you have the tools, your input is valuable and please drop by and say hello. Also, check out the Mozilla Developer network as we’ll be releasing some cool things you can be part of very soon!

    Maintainable JavaScript at the ThinkVitamin JavaScript online conference

    Monday, September 13th, 2010

    Today I spoke at the ThinkVitamin JavaScript online conference alongside Simon Willison, Stuart Landgridge and Drew McLellan.

    Topic and slides

    My topic was “Maintainable JavaScript” and I managed to pack 150 slides into the 50 minutes of my talk. The Slides are available on Slideshare.

    Maintainable Javascript carsonified

    View more presentations from Christian Heilmann.

    What I covered

    I went through a few of the tricks you should apply when you want to write maintainable JavaScript:

    • Using, not abusing libraries
    • Separation of concerns
    • Building for extensibility
    • Documenting your work
    • Planning for performance
    • Avoiding double maintenance
    • Live code vs. development code

    A few of the topics got repeated by the other speakers but frankly I am always fascinated just how many people do not know about the X-requested-with header JavaScript libraries add to Ajax requests and how you can use it to render different content for Ajax requests and for include() requests. This allows you to maintain your whole content and HTML on the server and have all the Ajax goodness rendering out a simple HTML string.

    The code example for the validation is available on GitHub.

    Another thing that is missing a lot in people’s approach to JS is a proper build process. That’s why a lot of people try to optimise for performance during development and leave hard to maintain, specialist code behind.

    In essence, I showed that by building logical backend code you can save yourself a lot of JavaScript and you build things that work instead of things you hope will work.

    The conference experience

    Speaking at pure online conferences is weird. For starters we had to change the order as Simon Willison is on his honeymoon world-tour and currently in Marrakesh, which meant his connection was flaky. The audio during his talk was not the best and he didn’t even bother with video.

    It is a strange experience to sit there with a headset and talking to your desktop as you cannot see the audience. Talks get much better when you can interact with the audience, ask questions, see them falling asleep or seething with rage – that kind of thing. In an online conference this is missing and you cannot read the chat whilst you present as this is too distracting. Drew was suffering the most from this lack of interaction and I had my audio drop out once which meant I had to repeat some slides.

    All in all I find these things work better when there is a discussion going on – like a moderator interviewing a speaker over Skype and people asking questions. The other option of course would be to record the talks beforehand and play them instead of hoping all works out fine live – it never does. Recording the talks and then having a pure Q&A session with the speaker on skype afterwards seems to me a better way to work with these issues.

    The benefits of these conferences are quite cool. People do not have to travel, you can pay one ticket and let a whole office watch, speakers don’t need to wear trousers and the liver of the speakers doesn’t need to suffer as much as it does at normal conferences. I am not quite convinced about the “green” argument of these events as they do use up energy, too but hey, at least it helps people thinking “green”.

    Online conferences are a good idea as an add-on but I don’t think they’ll replace conferences as the networking and “meeting in the flesh” aspect is lost and that makes them feel a bit clinical and cold. That said, Carsonified are doing a good job with these right now and are lovely people when you interact with them as a speaker.

    La Red Innova – Yahoo – opening the web for you

    Tuesday, June 15th, 2010

    I am currently in Madrid, Spain for the La Red Innova conference. My talk was a hybrid of explaining the social graph and Yahoo Firehose and showing off some of the free technologies Yahoo has for publishers and bloggers.

    I’ve recorded the audio of the talk and will publish it once I checked the quality (the stage was very noisy so I am not sure if it worked out). I’ll also upload the official Yahoo slide deck once the connection here is a bit more stable.

    Here are my slides and links:

    The slide deck

    Yahoo – opening the web for you

    Notes and links of the conference

    Blogs I write for:

    Links:

    Speaking out – public speaking made easy (for women) was an amazing success!

    Thursday, February 11th, 2010

    Yesterday night was the first Speaking out – public speaking made easy event in London and I was lucky enough to be one of the speakers. Speaking Out was the idea of my friend Laura North who hates public speaking and has been pestering me for a while for private tutoring on the matter. Instead, I told her we should organise a bigger event and this was it.

    Speaking Out - Public speaking made easy by  you.

    With help from Imagination and the Soho location of Sense Worldwide we successfully pulled off the first event of this kind.

    Our not-too-hidden agenda was that we encourage more women to get out there and do more public speaking – be it in a meeting room or at conferences in front of hundreds of people.

    The event is open to all, but women are especially encouraged to attend and subjects include speaking in public from a woman’s perspective.
    Speakers include Katie Streten, Head of Digital Strategy at design agency Imagination, Christian Heilmann from Yahoo!, and Dave Bell from Merrill Lynch, who has been helping young women in Tower Hamlets make public presentations. All the speakers share the same aim of helping participants to communicate in a more relaxed and informal way.

    On the day about 45 attendees (5 of which were men) got up the 4(!) flights of stairs to see what this is all about.

    The introduction

    The first surprise was that Katie made Laura do the introduction talk and thus put the money where her mouth is and take the plunge into her first public speaking appearance (and if you wonder, she mastered it brilliantly).

    Dave Bell: Focus on presentation styles & contexts

    Speaking Out - Public speaking made easy by  you.

    Right after this was Dave Bell who talked about dealing with public speaking in smaller groups, boardrooms and in pitches.

    Dave’s main conclusions were:

    • Connecting with your audience is vital
    • Preparation is the key to being relaxed
    • Be selective with your material – think big picture!
    • Your style will develop over time and comes with practice
    • Presentations are performances – sometimes they go better than others.
    • And please remember: Everyone gets nervous – you aren’t the only one!

    Katie Streten: Reasons not to like public speaking and some suggestions for dealing with them

    Speaking Out - Public speaking made easy by  you.

    Katie Streten delivered a very engaging talk with a much better focus on the women’s perspective to public speaking than Dave or me (strange, that). She listed a bunch of reasons why people are afraid of public speaking and gave tips how to work around them. The reasons Katie managed to debunk during her talk were:

    • No one will be interested in what I’ve got to say
    • I will start speaking and go completely blank
    • I’m afraid that everyone will find out that I’m a fraud
    • I will look out over the crowd, see their faces and go blank
    • I will lose my place and just stall!
    • I will ask something that everyone else understands. I will look like a complete idiot.
    • It feels artificial. It should feel like a conversation, I hate the awkward feeling.

    Katie’s slides are below and the audio recording will be available soon and I encourage you to check them out – there is some very good detail in there and I loved the way she kept it personal by introducing the people she got the above reasons from instead of quoting them as de facto truths.

    After loosening up the crowd with free drinks and food, Laura thought it safe to let them hear what I had to say.

    Christian Heilmann – How to inspire as a speaker

    Speaking Out - Public speaking made easy by  you.

    My talk was all about finding peace with yourself about doing a public speech. There is a lot of information out there about being a great public speaker but most of it is hokum and no matter how trained and well dressed you are – in the end it is you on stage. If you are not happy with being the speaker or if you are forced to be someone else or talk about things you don’t believe in you will do a terrible job. If you are yourself – with all your flaws and problems – then you will be believable and go off stage with a smile on your face.

    Here are the slides of my talk on SlideShare synced with the audio:

    I also did an audio recording of the whole thing:

    Photos

    There are some photos on Flickr:

    What now?

    This was a great little get-together and I hope we managed to relax some of the people who came. I think we should do this much more often – maybe next time do some PowerPoint Karaoke, lightning talks and only one talk one a more detailed sub-topic. I am very happy that we ran this event and can only hope that there will be more of those. Thanks to everyone involved and thanks for coming!

    Update: Suw Charman-Anderson has taken some very detailed notes of the event, cheers Suw!

    Of Hamsters, Feature Creatures and Missed Opportunities – my talk at Fronteers 2009

    Thursday, November 5th, 2009

    The outline

    In this session Chris Heilmann will show how some of the traits we have as developers keep us from evolving and our market from maturing. Instead of picking and choosing from already amazing products we tend to want to build and maintain everything ourselves – and fail at keeping up the quality leaving both security holes and carwrecks on the information superhighway behind. There is another way and Chris will show just how much more fun we can have with the web if we use systems that are available for us for free, remix the web with simple meta-mixing systems and liberate our developer minds from the barriers technology throws at us. If you always thought that there has to be more to our jobs than fixing bugs, this session is for you.

    Slides

    The audio recording

    You can download the MP3 of the talk at archive.org – 42MB.

    Following are the notes which will resemble what I am talking about…

    Remember, remember the 5th of November…

    First of all, how cool is it to have a conference on Guy Fawkes? Whoever can recite the “V” alliteration later on flawlessly I will buy a beer for.

    Hamstering

    Here’s a thing that happened in my garden in London the other day. My friend keeps putting bird feed in the garden to, well, feed the birds. She also wonders why she keeps having weeds in her garden. Well, the reason is this: a squirrel keeps coming and takes the bird feed and buries it a meter away from the bird feeder (video of the theft). This is stupid as we keep replenishing the bird feed anyways. However in the mind of the squirrel it is a safe idea to keep a cache. Luckily we humans are cleverer, right?

    No. One very human trait we have is that we want to collect things – especially when they are free. If you followed my exploits this year you’d have seen that I travelled – a lot. What I found myself doing is collecting both inflight sock and toothpaste packs and little soap/shampoo/body lotion bottles. I am amazed just how many of these things I accumulated without ever needing them.

    This is exactly what we do with knowledge and code examples. I have about 20GB of e-books on all kind of technical subjects. All of these I haven’t looked at for years as most of the topics are outdated. However, we accumulate knowledge and think we do a great job once we found the solution to end all solutions. That doesn’t work any longer. We should not fill up our head with useless information about how some browser fails to do one thing or another. This secured our jobs during the first .com crash but it is time to let go.

    Amazing resources

    Nowadays we have amazing resources for beginners to learn what we are doing. The times of copy and paste and then try to understand someone else’s code is over. We should not put random stuff on the web. Both the Opera Web Standards Curriculum and the WaSP interact curriculum needs your input.

    Evolving the web

    Our job as developers is to evolve the web to something more than it is now. However, we are not really concentrating on that. There are a few things that are in our way.

    Specialising without caring about the consequences

    One thing is that we tend to become specialists in a certain area and forget about the others. Web development is a task of working together with other specialists to build amazing interfaces that make a change in people’s lives. If you are not passionate about a certain aspect of it, don’t do that job – instead partner with somebody who is passionate about it.

    Fanboys.

    The amount of energy wasted every day fighting each other on forums, mailing lists and other resources about which technology is best and what library to use pains and bores me. It is not helpful and it doesn’t make any sense to try to make the world fit your tool of choice.

    Be a librarian

    Good developers should be like librarians. You don’t need to know everything, but you need to know where to find the right information at the right time.

    Use libraries

    And for that, use libraries like Dojo, jQuery, YUI, mootools or whatever to work around the browser problems so that you can concentrate on what you want to build rather than how it fails.

    Libraries fix browsers

    Our main enemy to build cool products are browsers. The technologies and standards that drive the web are dead easy – we just don’t have time using them as we spend most of our time testing and wondering why browsers don’t implement them in a predictable manner. This is where libraries come in and my plea here is to use them. Using libraries you can write predictable applications built on a base that can be altered for all the browsers to come – if you build towards the browsers in use today you build for the past. We’ve done that before and paid dearly for it.

    Use don’t abuse libraries

    Libraries give you an amazing amount of power to do quick solutions. Be aware that when you use them though, you use them wisely. Do not mix HTML, CSS and JavaScript in the same script. This creates unmaintainable solutions and we had years and years of those.

    The feature creature

    The first time I heard about the feature creature was in 2004 here in Amsterdam at the PHP conference. I loved the image of every developer having a little creature on their shoulder that keeps telling us what we should be doing. Most of the time the feature creature tells us that whatever is out there is not nearly as good as the thing we can come up with. It also keeps telling us that whatever we do needs more features. This leads to something I call the feature loop.

    The feature loop

    As developers we are driven to writing simple, elegant and clever solutions for complex issues. Then we do the right thing and release those to the whole world. Then we do the wrong thing by listening to everybody who wants to have an extra feature and support for some very esoteric edge case. We add all of these extensions and build something complex again that another developer might find and simplify again.

    Breaking the loop

    The only way to break this vicious circle is by broadening our horizons and being cleverly lazy. I talked about this before in detail at the web expo in Prague. In essence what I am saying is that a lot of what we think is our job to do has been done for us already. And now I am going to show you some of these things.

    Missed opportunities

    The thing is that by building on tested and working solutions we can build faster, more secure and working solutions. While we think that we need to squeeze the last out of everything we do ourselves very successful web sites are being built in other countries where developers are very pragmatic of what has to be done. Questioning an out-of-the box solution is a good safety measure but you also need to draw the line at trying to replace them. Instead, why not add to the already existing system – all of them are open source!

    The other thing we keep forgetting as web developers is that the technologies we are experts in right now reach much further than the browser world.

    Our technologies are hot right now

    Mobile development, W3C mobile widgets, iPhone development, TV widgets and applications running inside Facebook, Yahoo or iGoogle are all based on CSS, HTML and JavaScript and run in much more defined and easier to use environments. We can take our knowledge and finally work without the sword of damocles of bad browser support hanging over our head.

    Changing the idea of what the web is

    The web is not web sites, it is not even code. Deep down all of it is about data and information. The Yahoo homepage for example moved from a directory of bookmarks to a portal full of third party content to a starting point for users where they can mix and match content of the web to their liking. This goes as far as now allowing people to update Facebook from the Yahoo homepage or you to write an application that is shown on it.

    Building with components

    Interfaces like that are only possible when you move away from the old idea of having a single page but you think of small components in the interface that could hold whatever the end user pleases. This is were we run into issues with the web standards, but that is another talk.

    Based on APIs

    All the data to remix and show is available for us on the web already – offered as APIs and listed on sites like Programmable Web.

    Kobayashi Maru

    Looking at the sheer amount of APIs – over 1500 right now – and knowing full well that all of them were built by developers with the feature creature on their shoulder it seems impossible to use a lot of them at the same time as you need to read up on all the documentation, get developer keys, learn the authentication and so on. We have that same problem internally at Yahoo, which is why we tackled it.

    YQL is there for you

    YQL is a meta language for the web that over a single, simple REST service turns the whole web into a giant database for you to explore and take part in. Let’s see some examples:

    Photos from Flickr?

    select * from flickr.photos.search where text = "cat"

    Headlines of the New York Times?

    select * from nyt.article.search where query="spontaneous combustion"

    Latest commits on a GitHub repo?

    select * from github.repo.commits where id='yql' and repo='yql-tables'

    Latest headlines of the Volkskrant?

    select title from html where url="http://www.volkskrant.nl/" and xpath="//h2[@title]"

    Latest “English” headlines of the Volkskrant?

    select * from google.translate where q in (select title from html where url="http://www.volkskrant.nl/" and xpath="//h2[@title]") and target='en'

    Updating Twitter?

    use 'http://www.yqlblog.net/samples/twitter.status.xml';
    insert into twitter.status
    (status,username,password)
    values (
    "In your fronteers, blowing ur mindz",
    "codepo8",
    "didyoureallythinkIshowit?"
    )

    Updating WordPress?

    insert into wordpress.post
    (title, description, blogurl, username,
    password)
    values
    ("Test Title", "This is a test body",
    "http://ajaxian.com", "codepo8", "iedoesitright")

    Updating the internet?

    delete&nbsp;from&nbsp;internet&nbsp;where&nbsp;user_agent="MSIE"&nbsp;and&nbsp;version&nbsp;< 8;
    – Not yet, sorry

    Search one term in Google, Bing and Yahoo?

    select&nbsp;*&nbsp;from&nbsp;query.multi&nbsp;where&nbsp;queries='
    select&nbsp;*&nbsp;from&nbsp;microsoft.bing&nbsp;where&nbsp;query="Jimmy&nbsp;Hoffa"&nbsp;and&nbsp;source&nbsp;in&nbsp;("web");
    select&nbsp;*&nbsp;from&nbsp;google.search&nbsp;where&nbsp;q&nbsp;=&nbsp;"Jimmy&nbsp;Hoffa";
    select&nbsp;*&nbsp;from&nbsp;search.web&nbsp;where&nbsp;query&nbsp;=&nbsp;"Jimmy&nbsp;Hoffa"
    '

    You can do all of this in the REST API

    https://query.yahooapis.com/v1/public/yql?q={uri-encoded-query}&#38;
    format={xml|json}&#38;
    diagnostics={true|false}&#38;
    callback={function}&#38;
    env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys

    Things you can do in YQL

    • You can mix and match whatever you want.
    • You can sort and limit.
    • You can extend with your own data tables by writing a schema and putting it on GitHub.
    • You can store information on the YQL servers (the cloud, the cloud)

    Where’s the catch?

    • 10k hits an hour (20k with oAuth).
    • 100k hits a day.
    • Data is cached for 15 minutes (soon customisable).
    • Execution limit on the server is 30 seconds (for now).

    That’s all!

    An example – loading photos for a location from Flickr

    Find Amsterdam

    select&nbsp;*&nbsp;from&nbsp;geo.places&nbsp;where&nbsp;text="amsterdam"

    Define Amsterdam and get photos taken there

    select&nbsp;*&nbsp;from&nbsp;flickr.photos.search&nbsp;where&nbsp;woe_id&nbsp;in&nbsp;(
    select&nbsp;woeid&nbsp;from&nbsp;geo.places&nbsp;where&nbsp;text="amsterdam"
    )

    Get all the information about these photos

    select&nbsp;*&nbsp;from&nbsp;flickr.photos.info&nbsp;where&nbsp;photo_id&nbsp;in&nbsp;(
    select&nbsp;id&nbsp;from&nbsp;flickr.photos.search&nbsp;where&nbsp;woe_id&nbsp;in&nbsp;(
    select&nbsp;woeid&nbsp;from&nbsp;geo.places&nbsp;where&nbsp;text="amsterdam"
    )
    )

    Get only what we need

    select
    farm,id,secret,owner.realname,server,title,urls.url.content
    from&nbsp;flickr.photos.info&nbsp;where&nbsp;photo_id&nbsp;in&nbsp;(
    select&nbsp;id&nbsp;from&nbsp;flickr.photos.search&nbsp;where&nbsp;woe_id&nbsp;in&nbsp;(
    select&nbsp;woeid&nbsp;from&nbsp;geo.places&nbsp;where&nbsp;text="amsterdam"
    )
    )

    Select format JSON, define a callback and copy and paste the URL.

    http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid%20from%20geo.places%20where%20text%3D%22amsterdam%22))&#38;format=json&#38;diagnostics=false&#38;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&#38;callback=flickr

    Copy into a script src and write some DOM scripting to display

    &lt;script&nbsp;type="text/javascript"&gt;
    function&nbsp;flickr(o){
    var&nbsp;f&nbsp;=&nbsp;document.getElementById('flickr');
    var&nbsp;out&nbsp;=&nbsp;'';
    var&nbsp;photos&nbsp;=&nbsp;o.query.results.photo;
    for(var&nbsp;i=0,j=photos.length;i&lt;j;i++){
    var&nbsp;cur&nbsp;=&nbsp;photos[i];
    out&nbsp;+=&nbsp;'&lt;li&gt;&lt;a&nbsp;href="'&nbsp;+&nbsp;cur.urls.url&nbsp;+&nbsp;'"&gt;&lt;img&nbsp;src="http://farm'&nbsp;+
    cur.farm&nbsp;+&nbsp;'.static.flickr.com/'&nbsp;+&nbsp;cur.server&nbsp;+&nbsp;'/'&nbsp;+
    cur.id&nbsp;+&nbsp;'_'&nbsp;+&nbsp;cur.secret&nbsp;+&nbsp;'_s.jpg"&nbsp;alt="'&nbsp;+&nbsp;cur.title&nbsp;+
    '"&gt;&lt;/a&gt;&lt;/li&gt;';
    }
    f.innerHTML&nbsp;=&nbsp;out;
    }
    &lt;/script&gt;
    &lt;script&nbsp;type="text/javascript"&nbsp;src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid%20from%20geo.places%20where%20text%3D%22amsterdam%22))&#38;format=json&#38;diagnostics=false&#38;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&#38;callback=flickr"&gt;&lt;/script&gt;

    And you have a mashup!

    Well, to a degree. You can see that it pulls photos from Flickr and shows them on a page.

    You also have FAIL

    As much as we love it, JavaScript is not reliably available in browsers and cannot be trusted for providing very important content. Or can it?

    Moving JavaScript solutions server-side with YQL execute

    Open data tables providing YQL with data can contain JavaScript that will be executed on the server to convert information. That way you can take the script just shown and make it a server-side conversion. The benefit of this is that you are not bound by client security flaws and you have full language support, including E4X for XML. The earlier script will thus become the following:

    var&nbsp;amt&nbsp;=&nbsp;amount&nbsp;||&nbsp;10;
    var&nbsp;query&nbsp;=&nbsp;'select&nbsp;farm,id,secret,owner.realname,server,title,'+
    'urls.url.content&nbsp;from&nbsp;flickr.photos.info&nbsp;where&nbsp;'+
    'photo_id&nbsp;in&nbsp;(select&nbsp;id&nbsp;from&nbsp;flickr.photos.search('+
    amount&nbsp;+&nbsp;')&nbsp;where&nbsp;';
    if(location!==null){
    query&nbsp;+=&nbsp;'woe_id&nbsp;in&nbsp;(select&nbsp;woeid&nbsp;from&nbsp;geo.places&nbsp;where&nbsp;text="'&nbsp;+
    location+'")&nbsp;and&nbsp;';
    }
    query&nbsp;+=&nbsp;'&nbsp;text="'&nbsp;+&nbsp;text&nbsp;+&nbsp;'"&nbsp;and&nbsp;license=4)'
    var&nbsp;x&nbsp;=&nbsp;y.query(query);
    var&nbsp;out&nbsp;=&nbsp;&lt;ul/&gt;;
    for&nbsp;each(var&nbsp;cur&nbsp;in&nbsp;x.results.photo){
    var&nbsp;li&nbsp;=&nbsp;&lt;li/&gt;;
    var&nbsp;a&nbsp;=&nbsp;&lt;a/&gt;;
    a.@["href"]&nbsp;=&nbsp;cur.urls.url;
    var&nbsp;img&nbsp;=&nbsp;&lt;img/&gt;;
    var&nbsp;url&nbsp;=&nbsp;'http://farm'&nbsp;+&nbsp;cur.@farm&nbsp;+&nbsp;'.static.flickr.com/'&nbsp;+
    cur.@server&nbsp;+&nbsp;'/'+cur.@id&nbsp;+&nbsp;'_'&nbsp;+&nbsp;cur.@secret&nbsp;+
    '_s.jpg';
    img.@["src"]&nbsp;=&nbsp;url;
    img.@["alt"]&nbsp;=&nbsp;cur.title;
    a.img&nbsp;=&nbsp;img;
    li.a&nbsp;=&nbsp;a;
    out.li&nbsp;+=&nbsp;li;
    }
    response.object&nbsp;=&nbsp;out;

    This, embedded in an open table means you can retrieve photos from Flickr as a UL now using the following YQL statement:

    use&nbsp;"http://github.com/codepo8/yql-tables/raw/master/flickr/flickr.photolist.xml"&nbsp;as&nbsp;flickr;
    select&nbsp;*&nbsp;from&nbsp;flickr&nbsp;where&nbsp;text="me"&nbsp;and&nbsp;location="uk"&nbsp;and&nbsp;amount=20

    You can then display the photos returned either with PHP:

    &lt;?php
    $url&nbsp;=&nbsp;'http://query.yahooapis.com/v1/public/yql?q=use%20%22http://github.com/codepo8/yql-tables/raw/master/flickr/flickr.photolist.xml%22%20as%20flickr;%20select%20*%20from%20flickr%20where%20text=%22me%22%20and%20location=%22uk%22%20and%20amount=20&#38;format=xml&#38;diagnostics=false';
    $ch&nbsp;=&nbsp;curl_init();
    curl_setopt($ch,&nbsp;CURLOPT_URL,&nbsp;$url);
    curl_setopt($ch,&nbsp;CURLOPT_RETURNTRANSFER,&nbsp;1);
    $output&nbsp;=&nbsp;curl_exec($ch);
    curl_close($ch);
    $output&nbsp;=&nbsp;preg_replace('/.*&lt;ul&gt;/','&lt;ul&gt;',$output);
    $output&nbsp;=&nbsp;preg_replace('/&lt;/ul&gt;.*/','&lt;/ul&gt;',$output);
    $output&nbsp;=&nbsp;preg_replace('/&lt;?.*?&gt;/','',$output);
    $output&nbsp;=&nbsp;preg_replace('/&lt;!--.*--&gt;/','',$output);
    echo&nbsp;$output;
    ?&gt;

    Or you can of course use JavaScript:

    &lt;div&nbsp;id="jsflickr"&gt;&lt;/div&gt;
    &lt;script&nbsp;type="text/javascript"&nbsp;charset="utf-8"&gt;
    function&nbsp;flickrlist(o){
    var&nbsp;ct&nbsp;=&nbsp;document.getElementById('jsflickr');
    ct.innerHTML&nbsp;=&nbsp;o.results;
    }
    &lt;/script&gt;
    &lt;script&nbsp;type="text/javascript"&nbsp;src="http://query.yahooapis.com/v1/public/yql?q=use%20%22http://github.com/codepo8/yql-tables/raw/master/flickr/flickr.photolist.xml%22%20as%20flickr;%20select%20*%20from%20flickr%20where%20text=%22me%22%20and%20location=%22uk%22%20and%20amount=20&#38;format=xml&#38;diagnostics=false&#38;callback=flickrlist"&gt;
    &lt;/script&gt;
    

    Be part of the movement

    If you have other practical solutions like that, please write them and add them to the GitHub repository so they can become part of the interface.

    Read the YQL documentation

    Other than that you can read the YQL docs, there’s a YQL Blog and a Forum available. See you there.

    Be clever, not busy

    I think it is time we find solutions like libraries and YQL for our problems rather than doing everything by hand. Spend your time on making the web fun for humans, not on pleasing machines. If you are clever, you are allowed to be lazy. Replacing the web would be tough, so use it well.