Library Hat Rotating Header Image

Coding

The simplest AJAX: writing your own code (1)

*** This blog post has been originally published in ACRL TechConnect 0n September 12, 2012. ***

It has been 8 months since the Code Year project started. Back in January, I have provided some tips. Now I want to check in to see if how well you have been following along. Falling behind? You are not alone. Luckily there are still 3-4 months left.

Teaching oneself how to code is not easy. One of the many challenges is keeping at it on a regular basis. Both at home and at work, there seems to be always a dozen things higher in priority than code lessons. Another problem is that often we start a learning project by reading a book with some chosen examples. The Code Year project is somewhat better since it provides interactive tutorials. But at the end of many tutorials, you may have experienced the nagging feeling of doubt about whether you can now go out to the real world and make something that works. Have you done any real-time project yet?

If you are like me, the biggest obstacle in starting your own first small coding project is not so much the lack of knowledge as the fantasy that you still have yet more to learn before trying any such real-life-ish project. I call this ‘fantasy’ because there is never such a time when you are in full possession of knowledge before jumping into a project. In most cases, you discover what you need to learn only after you start a project and run into a problem that you need to solve.

So for this blog post, I tried building something very small. During the process, I had to fight constantly with the feeling that I should go back to the Code Year Project and take those comforting lessons in Javascript and JQeury that I didn’t have time to work through yet. But I also knew that I would be so much more motivated to keep learning if I can just see myself making something on my own. I decided to try some very simple AJAX stuff and started by looking at two examples on the Web. Here I will share those examples and my review process that enabled me to write my own bit of code. After looking at these, I was able to use different APIs to get the same result. My explanation below is intentionally detailed for beginners. But if you can understand the examples without my line-by-line explanation, feel free to skip and go directly to the last section where the challenge is. For what would your AJAX skill be useful? There are a lot of useful data in the cloud. Using AJAX, you can dynamically display your library’s photos stored in Flickr in your library’s website or generate a custom bibliography on the fly using the tags in Pinboard or MESH (Medical Subject Heading) and other filters in PubMed. You can mash up data feeds from multiple providers and create something completely new and interesting such as HealthMap, iSpiecies, and Housing Maps.

Warm-up 1: Jason’s Flickr API example

I found this example, “Flickr API – Display Photos (JSON)” quite useful. This example is at Jason Clark’s website. Jason has many cool code examples and working programs under the Code & Files page. You can see the source of the whole HTML page here . But let’s see the JS part below.

<script type="text/javascript">
//run function to parse json response, grab title, link, and media values - place in html tags
function jsonFlickrFeed(fr) {
    var container = document.getElementById("feed");
    var markup = '<h1>' + '<a href="' + fr.link+ '">' + fr.title + '</a>'+ '</h1>';
    for (var i = 0; i < fr.items.length; i++) {
    markup += '<a title="' + fr.items[i].title + '" href="' + fr.items[i].link + '"><img src="' + fr.items[i].media.m + '" alt="' + fr.items[i].title + '"></a>';
}
container.innerHTML = markup;
}
</script>
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cil2009&format=json">
</script>

After spending a few minutes looking at the source of the page, you can figure out the following:

  • Line 12 imports data formatted in JSON from Flickr, and the JSON data is wrapped in a JS function called jsonFlickrFeed. You can find these data source urls in API documentation usually. But many API documentations are often hard to decipher. In this case, this MashupGuide page by Raymond Yee was quite helpful.
  • Line 3-8 are defining the jsonFlickrFeed function that processes the JSON data.

You can think of JSON as a JS object or an associative array of them. Can you also figure out what is going on inside the jsonFlickrFeed function? Let’s go through it line by line.

  • Line 4 creates a variable, container, and sets it to the empty div given the id of the “feed.”
  • Line 5 creates another variable, markup, which will include a link and a title of “fr,” which is an arbitrary name that refers to the JSON data thrown inside the jsonFlickrFeed fucntion.
  • Line 6-8 are a for-loop that goes through every object in the items array and extracts its title and link as well as the image source link and title. The loop also adds the resulting HTML string to the markup variable.
  • Line 9 assigns the content of the markup variable as the value of the HTML content of the variable, container. Since the empty div with the “feed” id was assigned to the variable container, now the feed div has the content of var markup as its HTML content.

So these two JS snippets take an empty div like this:

<div id="feed"></div>

Then they dynamically generate the content inside with the source data from Flickr following some minimal presentation specified in the JS itself. Below is the dynamically generated content for the feed div. The result like this.

<div id="feed">
<h1>
<a href="http://www.flickr.com/photos/tags/cil2009/">Recent Uploads tagged cil2009</a>
</h1>
<a href="http://www.flickr.com/photos/matthew_francis/3458100856/" title="Waiting at Vienna metro (cropped)">
<img alt="Waiting at Vienna metro (cropped)" src="http://farm4.staticflickr.com/3608/3458100856_d01b26cf1b_m.jpg">
</a>
<a href="http://www.flickr.com/photos/libraryman/3448484629/" title="Laptop right before CIL2009 session">
<img alt="Laptop right before CIL2009 session" src="http://farm4.staticflickr.com/3389/3448484629_9874f4ab92_m.jpg">
</a>
<a href="http://www.flickr.com/photos/christajoy42/4814625142/" title="Computers in Libraries 2009">
<img alt="Computers in Libraries 2009" src="http://farm5.staticflickr.com/4082/4814625142_f9d9f90118_m.jpg">
</a>
<a href="http://www.flickr.com/photos/librarianinblack/3613111168/" title="David Lee King">
<img alt="David Lee King" src="http://farm4.staticflickr.com/3354/3613111168_02299f2b53_m.jpg">
</a>
<a href="http://www.flickr.com/photos/librarianinblack/3613111084/" title="Aaron Schmidt">
<img alt="Aaron Schmidt" src="http://farm4.staticflickr.com/3331/3613111084_b5ba9e70bd_m.jpg">
</a>
<a href="http://www.flickr.com/photos/librarianinblack/3612296027/" block"="" libraries"="" in="" computers="" title="The Kids on the ">
<img block"="" libraries"="" in="" computers="" alt="The Kids on the " src="http://farm3.staticflickr.com/2426/3612296027_6f4043077d_m.jpg">
</a>
<a href="http://www.flickr.com/photos/pegasuslibrarian/3460426841/" title="Dave and Greg look down at CarpetCon">
<img alt="Dave and Greg look down at CarpetCon" src="http://farm4.staticflickr.com/3576/3460426841_ef2e57ab49_m.jpg">
</a>
<a href="http://www.flickr.com/photos/pegasuslibrarian/3460425549/" title="Jason and Krista at CarpetCon">
<img alt="Jason and Krista at CarpetCon" src="http://farm4.staticflickr.com/3600/3460425549_55443c5ddb_m.jpg">
</a>
<a href="http://www.flickr.com/photos/pegasuslibrarian/3460422979/" title="Lunch with Dave, Laura, and Matt">
<img alt="Lunch with Dave, Laura, and Matt" src="http://farm4.staticflickr.com/3530/3460422979_96c020a440_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436564507/" title="IMG_0532">
<img alt="IMG_0532" src="http://farm4.staticflickr.com/3556/3436564507_551c7c5c0d_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436566975/" title="IMG_0529">
<img alt="IMG_0529" src="http://farm4.staticflickr.com/3328/3436566975_c8bfe9b081_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436556645/" title="IMG_0518">
<img alt="IMG_0518" src="http://farm4.staticflickr.com/3579/3436556645_9b01df7f93_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436569429/" title="IMG_0530">
<img alt="IMG_0530" src="http://farm4.staticflickr.com/3371/3436569429_92d0797719_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436558817/" title="IMG_0524">
<img alt="IMG_0524" src="http://farm4.staticflickr.com/3331/3436558817_3ff88a60be_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3437361826/" title="IMG_0521">
<img alt="IMG_0521" src="http://farm4.staticflickr.com/3371/3437361826_29a38e0609_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3437356988/" title="IMG_0516">
<img alt="IMG_0516" src="http://farm4.staticflickr.com/3298/3437356988_5aaa94452c_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3437369906/" title="IMG_0528">
<img alt="IMG_0528" src="http://farm4.staticflickr.com/3315/3437369906_01015ce018_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436560613/" title="IMG_0526">
<img alt="IMG_0526" src="http://farm4.staticflickr.com/3579/3436560613_98775afc79_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3437359398/" title="IMG_0517">
<img alt="IMG_0517" src="http://farm4.staticflickr.com/3131/3437359398_7e339cf161_m.jpg">
</a>
<a href="http://www.flickr.com/photos/jezmynne/3436535739/" title="IMG_0506">
<img alt="IMG_0506" src="http://farm4.staticflickr.com/3646/3436535739_c164062d6b_m.jpg">
</a>
</div>

Strictly speaking, Flickr is returning data in JSONP rather than JSON here. You will see what JSONP means in a little bit. But for now, don’t worry about that distinction. What is cool is that you can grab the data from a third party like Flickr and then you can remix and represent them in your own page.

Warm-up 2: Doing the same with JQuery using $.getJSON()

Since I had figured out how to display data from Flickr using Javascript (thanks to Jason’s code example), the next I wanted to try was to do the same with JQuery. After some googling, I discovered that there is a convenient JQeury method called $.getJSON(). The official JQuery page on this $.getJSON() method includes not only the explanation about JSONP (which allows you to load the data from the domain other than yours in your browser and manipulate it unlike JSON which will be restricted by the same origin policy) but also the JQuery example of processing the same Flickr JSONP data. This is the example from the JQuery website.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

As you can see in the first line, the data feed urls for JSONP response have a part similar to &jasoncallback=? at the end. The function name can vary and the API documentation of a data provider provides that bit of information. Let’s go through the codes line by line:

  • Line 1-6 requests and takes in the data feed from the speicified URL in JSONP format.
  • Once the data is received and ready, the script invokes the anonymous function from line 7-11. This function makes use of the JQuery method $.each().
  • For each of data.items, the anonymous function applies another anonymous function from line 9-10.
  • Line 9 creates an image tag – $(“<img/>”), attaches each item’s media.m element as the source attribute to the image tag – .attr(“src”, item.media.m), and lastly appends the resulting string to the empty div with the id of “images” – .appendTo(“#images”).
  • Line 10 makes sure that no more than 4 items in data.items is processed.

You can see the entire HTML page codes in the JQuery website’s $.getJSON() page.

Your Turn: Try out an API other than Flickr

So far we have looked through two examples. Not too bad, right? To keep the post at a reasonable length, I will get to the little bit of code that I wrote in the next post. This means that you can try the same and we can compare the result next time. Now here is the challenge. Both examples we saw used the Flickr API. Could you write code for a different API provider that does the same thing? Remember that you have to pick a data provider that offers feeds in JSONP if you want to avoid dealing with the same origin policy.

Here are a few providers you might want to check out. They all offer their data feeds in JSONP.

First, find out what data URLs you can use to get JSONP responses. Then write several lines of codes in JS and JQuery to process and display the data in the way you like in your own webpage. You may end up with some googling and research while you are at it.

Here are a few tips that will help you along the way:

  • Verify the data feed URL to see if you are getting the right JSONP responses. Just type the source url into the browser window and see if you get something like this.
  • Get the Firebug for debugging if you don’t already have it.
  • Use the Firebug’s NET panel to see if you are receiving the data OK.
  • Use the Console panel for debugging. The part of data that you want to pick up may be in several levels deep. So it is useful to know if you are getting the right item first before trying to manipulate it.

Happy Coding! See the following screenshots for the Firebug NET panel and Console panel. (Click the images to see the bigger and clearer version.) Don’t forget to share your completed project in the comments section as well as any questions, comments, advice, suggestions!

Net panel in Firebug

 

 

Console panel in Firebug

Tips for Everyone Doing the #codeyear

***   This post has been originally posted to the ACRL TechConnect blog.  ***

Learn to Code in 2012!

If you are a librarian interested in learning how to code, 2012 is a perfect year for you to start the project. Thanks to CodeAcademy (http://codeacademy.com), free JavaScript lessons are provided every week at http://codeyear.com/. The lessons are interactive and geared towards beginners. So even if you do not have any previous experience in programming, you will be able to pick up the new skill soon enough as long as you are patient and willing to spend time on mastering each lesson every week.

A great thing about this learn-how-to-program project, called #codeyear in Twitter (#libcodeyear and #catcode in the library-land) is that there are +375,443 people (and counting up) out there who are doing exactly the same lessons as you are. The greatest thing about this #libcodeyear / #catcode project is that librarians have organized themselves around this project for the collective learning experience.  How librarian-like, don’t you think?

Now, if you are ready to dive in, here are some useful resources.  And after these Resources, I will tell you a little bit more about how to best ask help about your codes when they are not working for you.

Resources for Collective Learning

Syntax Error: Catch the most frustrating bugs!

Now what I really like about #codeyear lessons so far is that some of the lessons trip you by trivial things like a typo! So you need to find a typo and fix it to pass a certain lesson. Now you may ask “How the hell does fixing a typo count as a programming lesson?”

Let me tell you. Finding a typo is no triviality in coding. Catching a similar syntax error will save you from the most frustrating experience in coding.

The examples of seemingly innocuous syntax errors are:

  • var myFunction = funtction (){blah, blah, blah … };
  • var myNewFunction = function (]{blah, blah, blah … };
  • for(i=0,  i<10, i++;)
  • var substr=’Hello World’; alert(subst);
  • –//This is my first JavaScript

Can you figure out why these lines would not work?  Give it a try! You won’t be sorry. Post your answers in the comments section.

How to Ask Help about Your Codes      

by Matteo De Felice in Flickr (http://farm4.staticflickr.com/3577/3502347936_43b5e2a886.jpg)

I am assuming that as #codeyear, #catcode, #libcodeyear project progresses, more people are going to ask questions about problems that stump them. Some lessons already have Q&A in the CodeAcademy site. So check those out. Reading through others’ questions will give valuable insight to how codes work and where they can easily trip you.

That having been said, you may want to ask questions to the places mentioned in the Resources section above. If you do, it’s a good idea to follow some rules. This will make your question more likely to be looked at by others and way more likely to be answered correctly.

  • Before asking a question, try to research yourself. Google the question, check out the Q&A section in the CodeAcademy website, check out other online tutorials about JS (see below for some of the recommended ones).
  • If this fails, do the following:
    • Specify your problem clearly.
      (Don’t say things like “I don’t get lesson 3.5.” or “JavaScript function is too hard” unless the purpose is just to rant.)
    • Provide your codes with any parts/details that are related to the lines with a problem.
      (Bear in mind that you might think there is a problem in line 10 but the problem may lie in line 1, which you are not looking.) Highlight/color code the line you are having a problem. Make it easy for others to immediately see the problematic part.
    • Describe what you have done to troubleshoot this (even if it didn’t work.)
      : This helps the possible commenter to know what your reasoning is behind your codes and what solutions you have already tried, thereby saving their time. So this will make it more likely that someone will actually help you. To believe it or not, what seems completely obvious and clear to you can be completely alien and unfathomable to others.

Some JavaScript Resources

There are many resources that will facilitate your learning JavaScript. In addition to the lessons provided by CodeAcademy, you may also find these other tutorials helpful to get a quick overview of JavaScript syntax, usage, functions, etc. From my experience, I know that I get a better understanding when I review the same subject from more than one resource.

If you have other favorite Javascript please share in the comment section.

ACRL TechConnect blog will continue to cover #libcodeyear / #catcode related topics throughout the year!  The post up next will tell you all about some of the excuses people deploy to postpone learning how to code and what might break the mental blockage!

Why Not Grow Coders from the inside of Libraries?

How fantastic would it be if every small library has an in-house developer? We will be all using open-source software with custom feature modules that would perfectly fit our vision and the needs of the community we serve. Libraries will then truly be the smart consumers of technology not at the mercy of clunky systems. Furthermore, it would re-position libraries as “contributors” to the technology that enables the public to access information and knowledge resources. I am sure no librarian will object to this vision. But at this time of ever-shrinking library budget, affording enough librarians itself is a challenge let alone hiring a developer.

But why should this be the case? Librarians are probably one of the most tech-savvy professionals after IT and science/ engineering/ marketing folks. So why aren’t there more librarians who code? Why don’t we see a surge of librarian coders? After all, we are living in times in which the web is the platform for almost all human activities and libraries are changing its name to something like learning and ‘technology’ center.

I don’t think that coding is too complicated or too much to learn for any librarian regardless of their background. Today’s libraries offer such a wide range of resources and services online and deploy and rely on so many systems from an ILS to a digital asset management system that libraries can benefit a great deal from those staff who have even a little bit of understanding in coding.

The problem is, I think, libraries do not proactively encourage nor strongly support their in-house library staff to become coders. I am not saying that all librarians / library staff should learn how to code like a wizard. But it is an undeniable fact that there are enough people in the library land who are seriously interested in coding and capable of becoming a coder. But chances are, these people will have no support from their own libraries. If they are working in non-technology-related areas, it will be completely up to them to pursue and pay for any type of learning opportunities. Until they prove themselves to be capable of a certain level of coding, they may not even be able to get hands-on experience of working in library technologies/systems/programming. And when they become capable, they may have to seek a new job if they are serious about putting to use their newly acquired programming skills.

It is puzzling to me why libraries neglect to make conscious efforts in supporting their staff who are interested in coding to further develop their skills while freely admitting that they would benefit from having a programmer on staff. Perhaps it is the libraries that are making the wrong distinction between library work and technology work. They are so much more closely intertwined than, say, a decade ago. Even library schools that are slow to change are responding and adding technology courses to their curriculum and teaching all LIS students basic HTML. But certainly libraries can use staff who want to move beyond HTML.

At the 2011 ALA Midwinter, I attended LITA Head of Library Technology Interest Group meeting. One of the issues discussed there was how to recruit and maintain the IT workforce within libraries. Some commented the challenge of recruting people from the IT industry, which often pays more than libraries do. Some mentioned how to quickly acclimate those new to libraries to the library culture and technology. Others discussed the difficulty of retaining IT professionals in libraries since libraries tend to promote only librarians with MLS degrees and tend to exclude non-librarians from the important decision-making process. Other culture differences between IT and libraries were also discussed.

These are all valid concerns and relevant discussion topics. But I was amazed by the fact that almost all assumed that the library IT people would come from the IT sector and outside from libraries. Some even remarked that they prefered to hire from the IT industry outside libraries when they fill a position. This discussion was not limited to programmers but inclusive of all IT professionals. Still, I think perhaps there is something wrong if libraries only plan to steal IT people from the outside without making any attempt to invest in growing some of those technology people inside themselves. IT professionals who come from the general IT industry may be great coders but they do not know about libraries. This is exactly the same kind of cause for inflexible library systems created by programmers who do not know enough about the library’s businesses and workflows.

So why don’t libraries work to change that?

One of the topics frequently discussed in librareis these days is open source software. At the recent 2011 Code4Lib conference, there was a breakout session about what kind of help would allow libraries to more actively adopt open source software adn systems. Those who have experience in working with open source software at the session unanimously agreed that adopting open-source is not cheap. There is a misconception that by adopting open source software, libraries will save money. But if so, at least that would not be the case in any short tem. Open-source requires growing knowledgeable technology staff in-house who would understand the software fully and able to take advantage of its flexibility to benefit the organization’s goals. It is not something you can buy cheap off the shelf and make it work by turning a key. While adopting open-source will provide freedom to libraries to experiment and improve their services and thereby empower lirbaries, those benefits will not come for free without investment.

Some may ask why not simply hire services from a third-party company that will support the open-source software or system that a library will adopt. But without the capability of understanding the source and of making changes as needed, how would libraries harness the real power of open-source unless the goal is just a friendier vendor-library relationship?

In his closing talk at the 2011 Code4Lib conference, Eric Hellman pointed out the fact that many library programmers are self-taught and often ‘fractional’ coders in the sense that they can afford to spend only a fraction of their time on coding. The fact that most library coders are fractional coders is all the more reason for having more coders in libraries, so that more time can be spent collectively on coding for libraries. Although enthusiastic, many novice coders are often lost about how certain programming languages or software tools are or can be applied to current library services and systems and need guidance about which coding skills are most relevant and can be used to produce immediately useful results in the library context. Many novice coders at librareis who often teach themselves programming skills by attending (community) college courses at night at their own expenses and scouring the web for resources and tutorials after work can certainly benefit from some support from their libraries.

Are you a novice or experienced coder working at libraries? Were/are you encouraged to further develop your skills? If a novice, what kind of support would you like to see from your libraries? If experienced, how did you get there? I am all ears. Please share your thoughts.

——————————

N.B. If you are a formally trained CS/E person, you may want to know that I am using the term ‘coding’ loosely in the library context, not in the context of software industry.  Please see this really helpful post “after @bohyunkim: talking across boundaries and the meaning of ‘coder'” by Andromeda Yelton which clarifies this. Will K’s two comments below also address the usage of this term in its intended sense much better than I did.  I tried to clarify a bit more what I meant below in my comments but feel free to comment/suggest a better term if you find this still problematic.  Thanks for sharing your thoughts! (2/22/2011)