I picked up development again for one of my favorite projects: My Reading List. In this post the new features for current release 1.1

New features / improvements

• My Reading List is now hosted on its own domain: fbreadinglist.com . All bobbelderbos.com/books… links should be redirected (301) to the new domain
• User data: no email storage, I only use the email once (from the Facebook session) to send a welcome email with links and as an option for the user to provide input (early user feedback is really valuable)
• Post to FB wall is opt-in instead of opt-out. Although it was always clearly visible in the “add book” form, I think it is better to let users actively toggle the select box when they want to post.
• Slight changes in the querying of the Google Books API: putting a % instead of a + between the words yielded me books I couldn’t find earlier, even putting % before and after the keywords helped, I also cropped duplicate titles, because the first hit is usually the book (googleID) with the most reviews/data, so that is the one you want users to grab from the autocomplete.
• URL txt-to-html conversion in the book comments (for example )
• See same URL for improved share buttons, like my blog they take you outside of the page to sharer URLs where you have more options to customize your sharing.
• Better og: properties to share books with their appropriate thumbnail.
• The Facebook Canvas App is back.
• Some small cleanups in the design, but overall I left it the same, because I think it is simple and clean. It also fits perfectly in the smaller width of the FB Canvas.

Next

• I’d love this to be available on an iphone and/or ipad!
• Provide / link more info for each book. It would be great to fetch Amazon reviews. Personally I use those a lot deciding whether to read and/or buy a new book.

#app #autocomplete #css #database #facebook #finder #fonts #git #inspiration #instagram #instant #jquery #json #kindle #mac #php #productivity #python #sublime #texteditors #unix

** Note I do a monthly tweet digest post now. I don’t tweet that often and a digest once a month is enough I think

#git fetch and merge, don’t pull http://t.co/Rxo3uN7B – interesting read

— Bob Belderbos (@bbelderbos) April 29, 2012

#app: send to #kindle: it even converts PDF documents to Kindle format !

— Bob Belderbos (@bbelderbos) April 29, 2012

nice #app: send to #kindle: http://t.co/MOn2qLdf

— Bob Belderbos (@bbelderbos) April 29, 2012

Sorting an associative array in PHP – Stack Overflow http://t.co/UMIS7EAp #php #arrays – nice to know

— Bob Belderbos (@bbelderbos) April 13, 2012

CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts http://t.co/QjGD4UPd #css #font

— Bob Belderbos (@bbelderbos) April 12, 2012

@sublimehq wow I used it on windows today, it is totally awesome, maybe even nicer than textmate. check out #sublime folks #texteditors

— Bob Belderbos (@bbelderbos) April 12, 2012

Build a Billion Dollar App, the Sale of #Instagram – SitePoint http://t.co/JwNRs2j8 via @sitepointdotcom

— Bob Belderbos (@bbelderbos) April 11, 2012

Good article about #fonts in web design #css http://t.co/RYEs54DG

— Bob Belderbos (@bbelderbos) April 11, 2012

#Facebook to Buy Photo-Sharing Service #Instagram for $1 Billion http://t.co/3G3Aspc6

— Bob Belderbos (@bbelderbos) April 09, 2012

Shark the Market http://t.co/DzRLJeQa via @sharkthemarket

— Bob Belderbos (@bbelderbos) April 08, 2012

Building Fast Client-side Searches – http://t.co/Dy6CCXvM #json #autocomplete

— Bob Belderbos (@bbelderbos) April 07, 2012

Taking CSS1k to the Garden of CSS-​​3den via @designfestival http://t.co/h0CTgTzN #css cool: nice design in 1k !

— Bob Belderbos (@bbelderbos) April 06, 2012

Validating WordPress Comment Forms with jQuery and a Custom Plugin – SitePoint » http://t.co/lnhejajU via @sitepointdotcom #jquery

— Bob Belderbos (@bbelderbos) April 06, 2012

Interesting and I think very true and relevant these days #productivity http://t.co/Ur0VYK7q

— Bob Belderbos (@bbelderbos) April 06, 2012

Show full directory path in Finder window title bars http://t.co/vwn36D8n – nice! #mac #finder #unix

— Bob Belderbos (@bbelderbos) April 06, 2012

#python #database access http://t.co/GT8jIktA

— Bob Belderbos (@bbelderbos) April 05, 2012

My Reading List | Great by Choice http://t.co/77GChOiO via @fbreadinglist

— Bob Belderbos (@bbelderbos) April 05, 2012

Always have your stuff when you need it with @Dropbox. 2GB account is free! http://t.co/SCve02V2

— Bob Belderbos (@bbelderbos) April 05, 2012

Get Inspired » http://t.co/FDc2pF6w http://t.co/IYNaOhmY #inspiration

— Bob Belderbos (@bbelderbos) April 02, 2012

Facebook Instant Search! Searching Facebook In RealTime !!! http://t.co/tzQIM2TW via @TeckZoneIn – nice! #facebook #instant #search

— Bob Belderbos (@bbelderbos) April 02, 2012

I finished reading a copy of Sencha Touch Mobile JavaScript Framework that Packt Publishing provided me with. In this post a review of the book.

What is this book about / what will you learn?

See also packtpub:

Overview

• Learn to develop web applications that look and feel native on Apple iOS and Google Android touchscreen devices using Sencha Touch through examples
• Design resolution-independent and graphical representations like buttons, icons, and tabs of unparalleled flexibility
• Add custom events like tap, double tap, swipe, tap and hold, pinch, and rotate
• Plenty of well-explained sample code with the essential screenshots added in for thorough understanding

You will learn:

• Make use of technologies such as HTML5 and CSS3 to provide native-quality application experiences without the need for plugins



• Create a sample application using Sencha Touch that will run on Apple iOS and Google Android
• Efficiently use the list of components available in Sencha Touch framework libraries such as tab panels, scrollable list views, and toolbars
• Add custom touch events like tap, double tap, swipe, tap and hold, pinch, and rotate
• Discover the rich event communication that is available in every Sencha Touch component, allowing you to quickly respond to your users and create intuitive, native-quality applications
• Completely control the look of your application with Sencha Touch themes and styling options.
• Quickly put together simple components backed by the data package
• Allow your users to store information with forms, or access remote information from other services like Google maps and Flickr
• Learn about web storage features to store data offline, or communicate with online databases for richer storage options.
• Explore expert topics like syncing data and compiling applications for sale on an App store.

My review

++ Easy accessible

The entry level is low, somebody with a general idea about touch devices and having some HTML/CSS skills, preferably also some knowledge of Javascript, can jump in with great ease.

++ Clear and concise explanations

The explanations and code examples were comprehensive and well structured (one caveat with the code, see further down). Especially Chapter 8 was useful: it combined the concepts building a Flickr Finder app – cool.

++ Wide range of technologies make it an interesting read

Apart from Sencha Touch a lot of other technologies are introduced like writing CSS with SASS, the Safari Error console, REST / building an API and AJAX, PhoneGap/ NimbleKit, working in offline mode. I liked this, it gives you some relevant context you need as a developer.

– - All code == Sencha Touch 1.1.0, you want to use Sencha Touch 2.x !

Here is where the book lost a bit my appetite. It uses Sencha Touch 1.1.0 and this is not the latest release. Release 2.x is out and contains important changes. The Sencha Touch 2 Developer Preview was already presented in October last year, yet this book came out if February 2012. I don’t understand it doesn’t take a sneak preview at least as the Facebook graph title I reviewed did with the Open Graph that was even fresher when that book was released.

I noted that when I loaded the 2.x library files into the 1.1.0 code examples things started to fail. This demotivated me a bit because I didn’t see any use in trying examples of an older release especially knowing that performance was the key improvement between 1.x and 2.x. I guess this is inherent to writing a book about any software topic, but I had expected a bit more here, knowing that Packt books are heavily focussed on practical code samples.

++ Overall: good book

That aside, as I already stated the material was presented in a clear and wide scope. It was an interesting and joyful ride to get familiar with the Sencha Touch framework. After reading I can clearly see this is a good approach to mobile web development. I am looking forward to dive into the release 2 documentation soon to actually build something myself.

More info

You can read more about the book here. Please let me know in the comments if you have any experience and/or example apps built with Sencha Touch.

Beautiful Soup is a Python library to do screen scraping. I think it is a powerful tool which can be used in many situations. See here for examples where it is used. In this post I will show you two examples how to crawl websites using this library.

Get started

Best way to start is to download the latest source and start playing with the many examples from the documentation page. In this post I will scrape the paging of a Dutch tv program site. In the second example I scrape the data of top ranked artists. Another interesting one would be to replicate the Facebook sharer.php which shows you different thumbnails found on the page you want to share. Reddit uses BeautifulSoup for this as well. Maybe a nice exercise for you?

2 practical examples

As you can read and practice yourself with above links, without further ado the two examples:

6 lines to get all RSS feeds of uitzendinggemist.nl

One of my future plans is to build an iphone app to see programs from Dutch television. I couldn’t download the existing “uitzendinggemist” app because Apple only gives you access to one store per credit card, mine is Spain. I didn’t actively look for a workaround, however this limitation is actually good to start building something myself. I will need to leave it for the future due to current work, but the below example gets me at least all RSS feeds which are hidden behind a paging navigation of 93 pages, see http://www.uitzendinggemist.nl/programmas/

  #! /usr/bin/env python

  import urllib
  from bs4 import BeautifulSoup as Soup
  base_url = "http://www.uitzendinggemist.nl"
  program_url = base_url + "/programmas/?page="

  for page in range(1, 93):
    url =  "%s%d" % (program_url, page)
    soup = Soup(urllib.urlopen(url))

    for link in soup.find_all(attrs={'class': 'knav_link'}):
      print link.get('title').encode("utf-8")," :: ",
      print "%s%s.rss" % (base_url, link.get('href') )

download

Notes:

• For version 4 the import statement is : from bs4 import BeautifulSoup as Soup
• soup = Soup(urllib.urlopen(url)) -> holds the whole page
• the for loop retrieves all elements with the “knav_link” class (you should look at the HTML source while coding) and gets the title and href attributes.

Get details about top ranked artists

This example is a little bit more challenging because we have to do more parsing on the HTML. See http://www.musicrow.com/charts/top-ranking-country-artists/: we want to get the name, twitter/facebook page, number of likes/followers of top ranked artists. Moreover, we want to save that data into a database table.

  #! /usr/bin/env python
  import urllib
  from bs4 import BeautifulSoup as Soup
  from time import time
  import MySQLdb

  db = MySQLdb.connect("localhost","bob","cangetin","bobbelde_models" )
  cursor = db.cursor()

  url = "http://www.musicrow.com/charts/top-ranking-country-artists/"
  soup = Soup(urllib.urlopen(url))

  for row in soup.find_all(attrs={'class': 'row'}):
    artist = [text for text in row.stripped_strings]

    name = artist[1]
    followers = artist[5]
    likes = artist[7]

    thumb = row.select("img")[0]['src']
    twitter = row.select("a")[0]['href']
    facebook = row.select("a")[1]['href']
    tstamp = int(time())

    sql = """INSERT INTO top_ranking (id, name, followers, likes, thumb,
            twitter, facebook, audit_who, audit_ins, audit_upd) VALUES
            (NULL, '%s', '%s', '%s', '%s', '%s', '%s', 'admin', '%d', NULL);
            """ % (name, followers, likes, thumb, twitter, facebook, tstamp)

    try:
      cursor.execute(sql)
      db.commit()
    except:
      db.rollback()
      db.close()

  db.close()

download

Notes:

• We loop through all elements with class “row” which are the table rows in this case
• artist = [text for text in row.stripped_strings] -> strips away all html and leaves us with bare text only. This gets us almost everything except the thumb “img src” attribute and the Twitter and Facebook URLs. Hence the extra row.select(“..”)[0]['...'] statements. This does the job, but I expect that a BeautifulSoup ninja would use less code to get this :)
• We concat all together and execute the insert statement. See this article to get started with MySQLdb.

More examples?

I hope you enjoyed this post. If you have interesting use cases yourself, I invite you to share them in the comments …

Last week I finished my new portfolio design. It shows some websites I have built the last couple of years. As my blog I integrated bamboo in the design. There is a light and dark theme. And most important it is responsive: it is compatible with the iphone and ipad.

Before designing this portfolio site, I used a WordPress plugin which was pretty good. The downside was that I could not fully control the look and feel of your portfolio. That’s why I designed something myself!

I started to take screenshots with this nice command line tool.

Then I used the HTML5 boilerplate and reset.css to get optimal defaults. I use both tools for every site now, and it is really prevents headaches later on in the process. Big thanks to the developers of these tools!

The fetching of the works is done with PHP and a MySQL Database backend.

Functionality

• Click on a thumbnail and you can browse through a carousel of all the works (done with Fancybox).
• Under each work is a link to its page which is a slug based on the website’s URL (for example exploringtheweb.net/bobbelderboscom). Clean URLs is another practice I use often and are done with a simple RewriteRule in .htaccess. On the work’s page you can read about the site, browse to the next/previous project, etc. It also links to any related blog if it exists. Examples: Friends Jukebox or Globe Explorer
• In the footer there is a Feedback link that slides a Facebook Comment box open when clicked. You can also change the theme from: light to dark or vice-versa in the footer of the site. This sets a session variable and/or cookie to remember the theme you have selected. I first had the themes toggle each day when you’d enter the site, but I decided that I liked the light one better, so I left that as the default.

Media queries

As discussed earlier on my blog media queries can be quite powerful. I only made basic use of them, yet with sufficient result: the portfolio site supports ipad and iphone! It is done by targeting different stylesheets upon detection of the device width of these devices:

<link rel="stylesheet" href="css/iphone.css"
  media="only screen and (max-device-width: 480px)" type="text/css">
<link rel="stylesheet" href="css/ipad.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"
  type="text/css">

These stylesheets then overwrite / add styles on top of the main styleseet.

Below you can see some printscreens how the site scales on different devices:

1. Benefit screen estate: the Desktop

You see that the wider your screen the more works you see. This is done with a simple left float.

Homepage:

Homepage resizing the browser:

This is the experience of looking at a work’s site:

You see the description is at the left side, where on mobile devices it moves on top of the image.

2. Go smaller but mobile: Ipad

Ipad has two columns per default on the homepage.

On the work pages you see the text scales above the picture:

3. In your pocket, but be compact: Iphone

On the Iphone the homepage has a single column of works:

Secondly on a work’s page the text is also placed above the image. Note that also the header is smaller to gain screen estate:

Also note that the header has a fixed position so content scrolls behind it. See here how I did this. It is one of the details I like most about this design.

Let me know if you have any comments or suggestions. A followup plan could be to extend this site to let:

• users create their own portfolio site, potentially with a subscription option to have your unique URL at http://exploringtheweb.net. A challenge is how to process portfolio images, you take them with a tool like webkit2png which generates pretty heavy images, or you let your users upload their images. I think the latter is most practical in the end. I had to manually optimize the images for the web, because they were taking too much time to load.
• users edit the default design with a theme builder so that they can leverage the power of this layout but with customized banners, colors, fonts, etc.

#apc #api #books #chrome #computer #facebook #fbinstant #github #google #html #ipad #markdown #php #tools

** Note I stopped including the Twitter JS (platform.twitter.com/widgets.js) to avoid too much clutter and shave off some KBs. Curious about the styling? Here is the CSS which fits much better with my blog’s theme:

  blockquote { clear: both; float: left; width: 640px;
    background-color: rgba(100, 123, 82, .1); color: #7992A7;
    border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px;
    border-left: 5px solid rgba(100, 123, 82, .5);
    border-bottom: 1px solid  #ddd; margin: 10px 5px; padding: 10px; }
  blockquote p {padding: 0px; margin: 0px;}
  blockquote p a {text-decoration: none; color: #cc6600 }
  blockquote p:nth-child(2) {font-size: 75%; float: right; padding-top: 5px; }
  blockquote p:nth-child(2) a { color: #cc6633; }

Anyways … this week’s tweet digest

RT @adulau: What a beautiful day? “Piping Python Through Pipes” http://t.co/X0yD8CxJ a nice and clean replacement to “perl -e” #mapreduc …

— Bob Belderbos (@bbelderbos) April 02, 2012

RT @darrencauthon: Clean Code is still available for $10 (http://t.co/4AM5Wp3o). This book is one of the biggest influences on my caree …

— Bob Belderbos (@bbelderbos) April 02, 2012

http://t.co/348CNeES Featured Interview: Uncle Bob Martin – 4 important #computer science #books

— Bob Belderbos (@bbelderbos) April 02, 2012

facebook graph api search rules – Stack Overflow http://t.co/HzlFENRJ #facebook #api AND searches are possible, nice

— Bob Belderbos (@bbelderbos) April 01, 2012

RT @AkitaOnRails: This is the most hilarious lightning talk ever. If you haven’t seen it, you should https://t.co/6HCnnDRd by Gary Bernh …

— Bob Belderbos (@bbelderbos) April 01, 2012

Watch Paper by FiftyThree on Vimeo! http://t.co/1NaSJMQk #tools #ipad

— Bob Belderbos (@bbelderbos) April 01, 2012

#fbinstant Facebook Instant Search! Searching Facebook In RealTime !!! http://t.co/tzQIM2TW via @TeckZoneIn (via @TeckZoneIN)

— Bob Belderbos (@bbelderbos) April 01, 2012

Nice April Fools from Chrome: https://t.co/yTGffRZR (via @boagworld) ROFL #google

— Bob Belderbos (@bbelderbos) April 01, 2012

#google April Fools joke: Nintendo-style 8-bit Google Map via @gmanews http://t.co/ndyn4PeV – haha cool

— Bob Belderbos (@bbelderbos) April 01, 2012

A Basic #HTML5 Template http://t.co/HNWqA28t via @sitepointdotcom

— Bob Belderbos (@bbelderbos) March 31, 2012

Video Zuckerberg’s `Hacker Way’ to Guide #Facebook http://t.co/W1eYONih

— Bob Belderbos (@bbelderbos) March 31, 2012

How much is each #Facebook user worth? http://t.co/AhEAaejZ via @tnwsocialmedia – you are not their client, you are their product

— Bob Belderbos (@bbelderbos) March 31, 2012

how to cache the twitter api result? http://t.co/9xRGtVyU #php #apc (alternative php cache)

— Bob Belderbos (@bbelderbos) March 31, 2012

cool #facebook A hack of epic proportions: Building a QR code on the roof https://t.co/kKf7xZwA

— Bob Belderbos (@bbelderbos) March 27, 2012

#markdown basics http://t.co/sy8OYHRL for #github readme

— Bob Belderbos (@bbelderbos) March 26, 2012

Coding Horror: The Infinite Version http://t.co/Xm8u174G (via @TeckZoneIN) #chrome

— Bob Belderbos (@bbelderbos) March 26, 2012

In this post some simple CSS to get you started with a fixed sidebar or header design. I think it is a nice design option. I used the fixed header for my portfolio site. I found a fixed sidebar example at fooljs.com.

I like how Facebook and Twitter have a header with small height and how it always stays on top and in place when you are scrolling the content. In this post I will give you an example of this and of a fixed sidebar. The code can be downloaded from github or, as it is HTML/CSS, you can browse the files here

** I will use the Codesnippets repository on Github from now on to share blog and other code examples. I will migrate some of the code I have at http://bobbelderbos.com/src (previous posts) to have everything stored in one place.

Start clean

I first include a reset.css to wipe out any browser default styles. I think this is one of the best things you can do when starting to write CSS, to not find any surprises (“huh? it looks different even between modern browsers!”) later on.

Next, you can get a simple HTML5 template from this Sitepoint post. For bigger projects I tend to use the HTML5 boilerplate which includes a lot of best practices. So we are going to use some very simple markup, to provide the CSS necessary to get to these two layouts.

The markup

See here. We have a “nav” item that is the fixed content, a “content” div that holds “main” and “footer”.

	<nav>
	<h1>Fixed header</h1>
	<h2>Subheader</h2>
	<ul>
	..
	</ul>
	</nav>

	<div id="content">
		<div id="main">
			..
		</div>

		<footer>
			..
		</footer>

	</div>

Where are my content blocks?

A simple trick I use regularly is to put temporary borders around the building blocks of my sites:

  /* markers for design */
	nav {
		border: 1px solid #999;
	}
	#content {
		border: 1px solid red;
	}
	footer {
		border: 1px solid blue;
	}

CSS fixed sidebar

See here

  nav {
  	position: fixed;
  	left: 0;
  	top: 0;
  	bottom: 0;
  	background: #f2f2f2;
  	width: 180px;
  	padding: 10px;
  }
  ..
  #content {
  	margin: 0 0 30px 210px;
  	background-color: #eee;
  }
  #main {
  	padding: 10px;
  	line-height: 20; /* to fake lot of content / scrolling */
  }
  footer {
  	width: 100%;
  	background-color: #ddd;
  	position: fixed;
  	bottom: 0;
  	left: 200;
  }

• The position: fixed; in nav is responsible for taking the element out of the document flow and stick it to the position that you specify by left/top/bottom.
• You have to give a left margin to the #content that comes right of the fixed sidebar, in this case : the width of nav = 180px + its left and right padding = 2x 10px + and extra 10px = 210px total.
• The footer spans the whole width: 100%. Same here: position: fixed; + bottom: 0; make it stick to the bottom. I gave it a background-color so that you cannot see the content underneath it. A half-transparent background for the footer like http://fooljs.com/ is a nice option as well.

CSS fixed header

See here

  nav {
  	position: fixed;
  	left: 0;
  	top: 0;
  	background: #f2f2f2;
  	width: 100%;
  	heigth: 20px;
  	padding: 10px;
  	z-index: 20;
  }
  ..
  #content {
  	position: relative;
  	top: 40px;
  	background-color: #eee;
  	z-index: 10;
  }
  #main {
  	padding: 10px;
  	line-height: 20; /* to fake content with a huge height without much clutter content */
  }
  footer {
  	width: 100%;
  	background-color: #ddd;
  	position: fixed;
  	bottom: 0;
  	left: 200;
  }

• Same comment on nav as previous example, but I got rid of bottom: 0; and put a height (20px + 10px all-round padding = 40px) and width (100%) in so it is a small header bar across the whole width of the site, like Facebook
• I positioned the #content under the header with position: relative; top: 40px;
• Very important is the stacking of elements. Out of the box the #content would overlap the header when scrolling down:



After setting the stacking order with z-index it is better. As w3schools explains: “An element with greater stack order is always in front of an element with a lower stack order.”

So by giving “nav” a bigger z-index it stacks on top of #content. Interestingly I found out last week that, if you use plugins like Fancybox you should be conservative with this value. They use 100 for z-index, so when using the max. of 9999 for a block, that block will always sit on top, be careful there!

nav {
	z-index: 20;
}
#content {
	z-index: 10;
}

After this CSS it is much better:

And that is it: two simple templates to start a web design with a fixed vertical or horizontal navigation.

Little over a week ago I released Tweet Digest. It lets you create your Twitter digest in 3 simple steps. I used it today to publish a digest. I saved me time and offered me an easy way to customize the digest. In this post a bit more about the creation process.

Earlier experience and idea

I used a WordPress plugin in the past to automatically post tweet digests to my blog, then stopped it for some time. I think in retrospect I was bothered with the plugin to be too automatic, although it is true that you could save a digest as a Draft first.

I thought it was a good idea to build something myself, to customize it how I wanted, and as a programming / design exercise of course. I hope other Twitter fans will find this useful as well.

Enriched HTML

The other day I saw that Twitter provides embedded HTML. This inspired me to use this markup to leverage the enriched display and functionality that Twitter adds with some Javascript.

Interface

• After entering Tweet Digest you start by inputting your Twitter handle and number of tweets you want to retrieve. Or you specify them in the URL directly, for example http://tweetdigest.net/?user=bbelderbos&numTweets=50.
• You can then choose the tweets you want to include. Some jQuery appends them automatically to the preview below:



• At the right side you can copy the generated HTML. This is all you need to show your tweets with links to hashes, URLs and @users. However if you include the JS, you get an enriched view, see screenshot above and my last post for example. It is progressive enhancement at work: want to exclude the JS one day to speed up your page load, the tweets are HTML so will still be there. Apart from that you can get all the hashtags from your selected tweets. I usually put those in the teaser paragraph of my WordPress post.



• At the bottom there is a Feedback link, when you click it a div block slides out with the possibility to feedback via Facebook or Twitter.

Source

You can see the source at github.

Pending solution: Twitter Rate limit issue

The only bummer is that I get a “Rate limit exceeded” pretty quickly from twitter :(

  http code returned by Twitter: 400

  Dump request:
  string(150) "{"error":"Rate limit exceeded.
    Clients may not make more than 150 requests per hour.",
    "request":"\/statuses\/user_timeline\/bbelderbos.json?count=50"}"

Maybe they see multiple requests from this domain (IP) and block me for a certain interval. It is pretty random and only temporarily. However I am sure that I am making far less than 150 requests per hour ! (I deactivated another twitter widget on my blog to make sure I was not making any additional calls)

For the same reason I am not querying https://api.twitter.com/1/statuses/oembed.json?id=.. (more info ), I generate the HTML myself (good suggestion here).

Example:

Next: wrap this in a WP plugin

Building WP plugins is something I want to learn. I also hope this could be a workaround for the rate limit issue, because generally 1 user uses it per blog (instead of multiple users for a single IP). Anyone having this issue plus a solution please let me know …

#bluehost #browsers #code #css #digest #facebook #fancybox #ie #jquery #lovedtohate #mysqli #php #plugin #portfolio #programming #python #rails #ruby #snippet #tweetdigest #twitter #vim #web #webkit #work

http://t.co/oiBQXIXt – Exploring the Web / Portfolio of Bob Belderbos – via @bbelderbos #web #portfolio #work

— Bob Belderbos (@bbelderbos) March 25, 2012

#programming languages poll at HN: Which programming language makes you most sad/angry/annoyed? http://t.co/8U4fyZro

— Bob Belderbos (@bbelderbos) March 24, 2012

How to scrape a web page with #python (Criminal Minds) http://t.co/chX5q2vL via @alextrle – nice blog Alex

— Bob Belderbos (@bbelderbos) March 24, 2012

Add Syntax Highlighting To Your Blog With VIM http://t.co/o2FhevKO via @alextrle #vim – cool!

— Bob Belderbos (@bbelderbos) March 24, 2012

Good reference: Media Queries for Standard Devices http://t.co/E2mamNin #css

— Bob Belderbos (@bbelderbos) March 24, 2012

I like the z-index stacking feature in #css http://t.co/Nj2yHdcf

— Bob Belderbos (@bbelderbos) March 24, 2012

#bluehost how to install #python Third Party Module Install https://t.co/jwD1a3Gm

— Bob Belderbos (@bbelderbos) March 23, 2012

cool #python script to make screenshots of websites http://t.co/0AyxXPWO #webkit2png

— Bob Belderbos (@bbelderbos) March 23, 2012

#facebook improves photos – https://t.co/vQ6dp03c – interesting article with the details how they did it

— Bob Belderbos (@bbelderbos) March 23, 2012

nice #fancybox #jquery http://t.co/b1Ul8AnV

— Bob Belderbos (@bbelderbos) March 22, 2012

A behind-the-scenes look at the Rails Tutorial http://t.co/in7u3sdL #ruby #rails

— Bob Belderbos (@bbelderbos) March 22, 2012

the browser you #lovedtohate http://t.co/OtmK7Hmx #ie #browsers

— Bob Belderbos (@bbelderbos) March 22, 2012

#tweetdigest – http://t.co/RVPo8nUh – easy way to publish a #twitter #digest on your site or blog. next step: wrap it into a WP plugin

— Bob Belderbos (@bbelderbos) March 21, 2012

btw http://t.co/2c8Yzwqt has a very nice #code #snippet #css background for <pre>

— Bob Belderbos (@bbelderbos) March 20, 2012

#JQuery Cycle Lite #Plugin – http://t.co/ly0GlTuf – small and useful !

— Bob Belderbos (@bbelderbos) March 19, 2012

#PHP 5: #MySQLi Prepared Statements – http://t.co/xc21ZktF – way to go when dealing with databases in php / mysql

— Bob Belderbos (@bbelderbos) March 19, 2012

#Bitly #business #css #evernote #Hackathon #htmlparser #inspiration #jQuery #php #python #sed #Sencha #TextMate #twitterapi #WordPress

html – #jQuery – Post array of multiple checkbox values to #php – Stack Overflow – goo.gl/hXIyw – nice, just what I needed :)

— Bob Belderbos (@bbelderbos) March 18, 2012

22 Executives Share The Best Advice They Ever Received read.bi/zdEPFw #business #inspiration

— Bob Belderbos (@bbelderbos) March 18, 2012

Pair Programming Considered Extremely Beneficial techcrunch.com/2012/03/17/pai… via @techcrunch

— Bob Belderbos (@bbelderbos) March 18, 2012

The #Hackathon Is On: Pitching and Programming the Next Killer App | Wired Magazine | Wired.com wired.com/magazine/2012/…

— Bob Belderbos (@bbelderbos) March 17, 2012

Beautiful Soup Documentation — Beautiful Soup v4.0.0 documentation – goo.gl/Ea64B #python #htmlparser

— Bob Belderbos (@bbelderbos) March 17, 2012

playing with #Sencha , more info on release 2 : rww.to/yP9qzb via @RWW

— Bob Belderbos (@bbelderbos) March 17, 2012

Using #Bitly URLs in #WordPress and use them with Twitter and GooglePlus Scripts | Wptuts+ wp.tutsplus.com/tutorials/usin…

— Bob Belderbos (@bbelderbos) March 17, 2012

After Delay, Firefox 11 Arrives With Add-on Sync, Dev Tools pcmag.com/article2/0,281… via @pcmag

— Bob Belderbos (@bbelderbos) March 17, 2012

Does #TextMate has an easy way to indent 2 spaces… – Stack Overflow – goo.gl/igqvj

— Bob Belderbos (@bbelderbos) March 17, 2012

interesting learnpythonthehardway.org – another approach to learning #python – typing out the examples !

— Bob Belderbos (@bbelderbos) March 13, 2012

Using Twitter’s @Anywhere Service in 6 Steps | Nettuts+ net.tutsplus.com/tutorials/java…

— Bob Belderbos (@bbelderbos) March 11, 2012

#twitterapi adding a tweet box to your site is realy easy! dev.twitter.com/docs/anywhere/…

— Bob Belderbos (@bbelderbos) March 11, 2012

#evernote I found you again, best note taking tool! thanks

— Bob Belderbos (@bbelderbos) March 11, 2012

#sed tutorial grymoire.com/Unix/Sed.html

— Bob Belderbos (@bbelderbos) March 11, 2012

#jQuery ‘Tab Slide Out’ Plugin bit.ly/zCmNqZ – nice feedback side button

— Bob Belderbos (@bbelderbos) March 10, 2012

#css useful article:bit.ly/wl1WLF – Fixed Header & Footer Layout: A Beginner’s Guide | Noobcube

— Bob Belderbos (@bbelderbos) March 10, 2012