{Carrer web log}

Hacker News Mobile (Front Page Reader )

Thursday, November 25, 2010 { 2 Comments }

One of my favorite web site is Hacker News. Hacker News is the probably the best community for the people who want to experiment with new technologies and make their own online businesses.

I decided to make mobile version for HN only for the front page news, mainly for the people who want to fast check front page news without consuming much bandwidth.
I basically striped everything leaving just the titles and the link pointing to the comments.

So here is image how I do it:


Everything is made with pure JavaScript and HTML and the content is optimized for iPhone, iPad and Android but can run almost in every browser with minimal JavaScript support (works even in IE5.5).

The application takes Hacker News RSS and with help of Yahoo YQL transforms into JSONP and then is processed by JavaScript.

If you don’t know what JSONP is here is my tutorial.

YQL is very cool technology here is one useful resource also see Christian Heilmann site . For now YQL is safe from being unplugging and I hope will it not have the same destiny like Yahoo BOSS.

All HTML, JavaScript, CSS and JSONP will weigh about 10kb. The Hacker News page is about 40kb so you will safe about 30kb.

But the main motivation behind this project wasn’t saving bandwidth but having clean essential page(yes, even more essential then now). I had trouble finding the story link among different links even I had clicked few seconds before on the link. So If you like it use it.

>>Link Hacker News Mobile

Did I mention that is compatible iPhone, iPad web app. Just tap to + bookmark button Add to Home Screen. It should also be compatible with Android.



Any suggestion, comments?

CSS Mobile Reset

Wednesday, November 17, 2010 { 12 Comments }

I’m not sure if the title of this project should be called CSS Reset or CSS Set or CSS Mobile Base. The goal is to provide default CSS for mobile devices.

I started with this objectives:

• It should be small


• It should reset only the necessary HTML elements


• Should set only the necessary HTML elements


• It should provide better typography solution

Few years ago I build Hartija CSS Print Framework, the great thing about Hartija is that you have very fast print ready page. The same thing I want to achieve with the Mobile Reset to have content ready fast solution.

It should be small

Internet connection for mobile phones are still expensive and slow so smaller CSS file will provide faster download and better user experience.

Reset only the necessary HTML elements

All the browser implement CSS reset by default. I don’t think that is always smart to reset the reset. If you building complete CSS Framework is OK to reset everything but in many cases it is better to reset just the main HTML elements or the critical HTML elements.

Set only the necessary HTML elements

After resetting some elements it would be nice to set some HTML elements optimized for mobile phones.
We want to images not to be bigger than the mobile screen or if one word is bigger than the screen the word should brake.

We should provide meaningful base typography solution

Have you tried reading from mobile phone without zooming? I suggest to start with bigger font size. I implement 16px default font size. Feel free to change it. I also picked Arial like default font. Sans-serif can work well in some older low resolution mobiles.

And here is CSS Mobile Reset:

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0; 
 border: 0;
}

body 
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

Download on GitHub

Demo1

Demo2



You can use CSS Mobile Reset with combination of Bulletproof CSS3 media queries.

Here is a Demo.

Any suggestions how CSS Reset can be improved?

About JSONP in JavaScript

Thursday, November 04, 2010 { 4 Comments }

Many people are confused about the use of JSONP. I want to explain the difference between JSON and JSONP in JavaScript.

JSON (JavaScript Object Notation) is a lightweight data-interchange format.
Example of JSON:
{
"firstName": "Vladimir",
"lastName": "Carrer",
"age": 32
}

JSON works well with XmlHttpRequest (AJAJ/AJAX) but the main problem with XmlHttpRequest that is limited with same-domain browser policy. Meaning that you can’t use JSON for remote requests.

For that we have JSONP or "JSON with padding" or remote JSON.

JSONP is a "hack" of JSON in order to make remote request from different domain servers.

Example of JSONP:

AnyNameYouLike ({
"firstName": "Vladimir",
"lastName": "Carrer",
"age": 32
});

In this format(JSONP) can be injected like Script Tag Injection.

<script type="text/javascript"
src="http://someremoteserver.com/jsonp.js">
</script>

Then you call JSONP like this

function AnyNameYouLike (data) {
alert(data.firstName);
}

In order to parse AnyNameYouLike JSONP we have to have function named AnyNameYouLike.

JSON(P) web service usually provide callback parameter. So it looks like this:

http://someremoteserver.com/jsonp.php?callback=AnyNameYouLike

Meaning that the function name should match with the callback parameter.

It is important to remember that JSONP is not AJAX and doesn’t use XmlHttpRequest but the script tag.

JSONP is faster than JSON.

Because JSONP is actually hack to bypass browser security issues is considered not safe.

In the future will probably have something like Cross-Origin Resource Sharing (CORS) that hopefully will provide more safety.

But for now JSONP remains fastest and easiest way to obtain JSON from remote servers with JavaScript.

Let’s build some practical example.

We will use Yahoo YQL to parse reddit.com RSS. YQL will help us to convert RSS to JSONP.

The working Demo. Look at the code.

Did I miss something?