JavaScript, life, webdev

Advanced jQuery & Javascript For Your Web App

This is an excellent 25min that (the one and only) John Resig gave at the Future of Web Apps conference in Miami 2010.
If you don’t know when to use the new features of jQuery 1.4.2 like: .live and .delegate events – you must see it.

Main points to take home with you:

  1. Event delegation –  Event delegation is a technique that routes around the traditional method of binding events. You must understand it and start using it if you have apps that use a lot of DOM elements. The example he gave was of a table with 10,000 cells. You do not need to bind the event to each cell but rather one event to the table element and by using the bubbling of events in the browser these events will be executed with less code and more efficiency.
  2. Use CDN. What is a CDN you ask? Well, A CDN is short for Content Delivery Network and what that effectively translates into is a bunch of geo-position data centers around the globe. Not all of us have the finances to build a whole bunch of data centers all around, but there are a number of great services that handle this. Amazon CloudFront is one that we (at High Gear Media) use and they are good and cheap.
  3. Minifying and gzipping your JavaScript. Easy and save lots of time. Performance – performance – performance (like Steve balamer like to say).
  4. Use jQuery UI and don’t re-invent the wheel. jQuery UI is a set of components and set of widgets that you can use, you can drop into your application, and they will just work. I’ve used them over and over again and each time they are getting better and better with a great API that let you (the developer) all the power to customize and work with them.
Standard
webdev

How To Deal With High Gear Media API Using PHP And XPath

For the serious players in the automotive industry on the net there is a new way to improve their sites. We had this feed for a while, but now with the new improvements and after big players (e.g. yahoo autos) have been happy with it, we wanted to share it with others around the world.
For developers that are not used to work with XML, XPath and other goodies, here is a short sample of code that will show you how easy it is to fetch our full feed. Unlike the previous post about our regular RSS feed, I’ve used here some basic functionality that anyone that used php (5.2+) will have under their belt.

<?php
/**
* @author Ido Green
*
* @since 04/10/2010
*
* @abstract Simple example how to fetch High Gear Media Full API using xPath
*
* @see greenido.wordpress.com
*
* @copyright HighGearMedia INC. 2010
*
*/error_reporting(E_ALL); // Always good to have it in development mode
$feed = new DOMDocument();
$feed->load('http://www.thecarconnection.com/api?uid=YourApiUserKey&cat=bottom-line');
if (isset($feed->documentElement)) {
$xpath = new DOMXPath($feed);
// Lets register TheCarConnection namespace
$xpath->registerNamespace('tcc', 'http://www.thecarconnection.com/rss');
// Now we looping on all the items and for each one we are extracting some data
foreach ($xpath->evaluate('//item') as $entryNode) {
// Simple way to get the title,desc per item
echo "Title: " . $xpath->evaluate('string(title)', $entryNode), "\n";
echo "Description " . $xpath->evaluate('string(description)', $entryNode), "\n";
// and some more interesting capabilities of xPath - we fetching the spec that is under tcc namespace for car details
echo "Make: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:make[1])', $entryNode), "\n";
echo "Model: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:make[1])', $entryNode), "\n";
echo "Rating: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:rating[1])', $entryNode), " Out of 10\n";
echo "============\n";
}
} else {
echo 'Error: Could not fetch the feed';
}

 

You can also clone this code from github using: git clone git://gist.github.com/865542.git gist-865542

So it’s easy, right? You can load these feed for each site from our network.
For example: http://www.motorauthority.com/api?uid=YourUserKey&cat=reviews
Will give you all the reviews from Motor Authority.
For more specific custom calls you may use these parameters:

  • uid – your user ID
  • cat – you can choose: reviews / bottom-line / tips / blogs
    If you wish to get just the summaries of the bottom-line use: bottomline-summary
  • media – Use 0 for strip html and media=1 to have our HTML format in the call.
  • from/to – Use unix time stamp (e.g. 1206514800 and yes… the ‘from’ need to be lower then the ‘to‘)
  • limit – Up to 100 items. The default is 10.
  • limited-links – When it’s equal 1 we will give you just 5 links per item.
  • version – You will only need it if you wish to get reviews for cars that are older then 2008. Then use: version=0
  • morelinks – Use 1 if you wish to get links from thecarconnection.com or 0 if you don’t want links.

(*) Note that the bold parameters are mandatory.

If you wish to have quality automotive content on your site please feel free to approach High Gear Media
(feedback at HighGearMedia.com) and get a user ID. With more then 1000 new items of content per month, there are something for every car lover girl.

Standard
webdev

How To Work With High Gear Media RSS Feed In (less then) 4 Minutes


For all the girls that asked me time after time ‘How/Who/When/Why?’ and for all the ones that want to have on their blog the best automotive content around the web… This short code example will harness you with a knowledge to fetch High Gear Media customizable feed and have it on your site. The first thing you need to do in order to save yourself some leg work is to install Zend Framework.

Why reinvent the wheel, right?

The good people that work with Zend build for us some nice components that save us lots of work. For example, to parse an Atom (or RSS) feed – you should use their class and in few lines of code, you can be productive and happy.

After the installation, you can copy & paste the code below and you good to go.

<?php
/**
* @author Ido Green
*
* @since 04/01/2010
*
* @abstract Simple example how to fetch High Gear Media API (XML feed).
* You should have Zend Framework (1.9.4 and above).
*
* @see greenido.wordpress.com
*
* @copyright HighGearMedia INC. 2010
*
*/
// Set error reporting to ALL - Always good when you developing new features
error_reporting(E_ALL);
// Lets make sure we can find Zend Framework lib. (You might want to change it base on your local
// environment.
set_include_path(get_include_path() . PATH_SEPARATOR . "../");
// get the feed library
require_once 'Zend/Feed.php';
try {
$rss = Zend_Feed::import('http://feeds.highgearmedia.com/?sites=thecarconnection,greencarreports,allaboutprius');
} catch (Exception $e) {
echo $e->getMessage(); // In case something didn't work - lets see it.
exit (-1);
}
$feedItems = array();
// Loop through the items in the feed
foreach ($rss as $item) {
$itemElements = array(
'title' => $item->title(),
'description' => $item-<description(),
'link' => $item->link(),
'pubDate' => $item->pubDate(),
'author' => $item->author()
);
array_push($feedItems, $itemElements);
}
echo "\nThe HGM feed we got:\n";
// dump all items
var_dump($feedItems);
// In case some other process want to check if we finished correctly.
exit(0);
?>

The feeds can be fully customize according to your interested topics. For example:

Please feel free to share you experience using the comments.

Standard
Business, life, webdev

Java Posse Roundup 2010 – Suggested Books

books
With so many great recommendations…
I felt it was right to share it with the world. Here are some of the books that people in the Java Posse Roundup 2010 recommended you to read (quickly).

Agile Books

Testing Books

Complex Event Processing


Version Control

Scala

JavaScript

Career Books

Business

Software Projects and Their Teams, Groups, Processes and People

Release It! writing and maintaining software from an operations perspective

On Intelligence by Jeff Hawkins – How a new understanding of the brain will lead to the creation of truly intelligent machines

Standard
webdev

Google – Microsoft is moving fast behind you

Very impressive (and short) talk at TED that show that maps.bing.com is moving fast in the direction of Google maps.

Standard
webdev

PHP is now faster then Java (almost)

It was great to read this blog post Facebook HipHop for PHP. I always like to see big companies like: Yahoo, Google, Facebook etc’ contributing back to the open source community. It seems ‘only’ fair to do it after you leverage open source product in order to build business that worth billions. After read it, I found one big mistake in the middle of the post:
“…This is compared to more traditional compiled languages like C++ and interpreted languages like Java.”

C’mon guys, I guess you wanted to write java script and not Java. Any way, it’s very good new approch that will help us (and lot of other) to improve their hardware usage.
As for Java – it’s still much faster then PHP and other languages. But like in other cases, if you take into consideration that TCO (Total cost of ownership) it’s much better to use languages like PHP, Python, Perl for web development due to the freedom they give you to make lots of changes quickly.

Thank you FB.

Standard
Design, webdev

Web Design in 2010 is not what you think

Very good, short (less then 5min) video from SXSW 2009. Just as early filmmakers struggled to break free from the conventions of live theater, after 10+ years Web designers are still trapped in the structures of the past. Forget pages, linear text and other archaic vestiges of design’s print ancestry; the separation of content from presentation has already changed everything. I sign on every word…

Standard
Business, life, webdev

Good Developers And The Real World (part 1)

I’ve been programming since I was 6. It was the good old days of Commodor (64 and Vic) and then apple IIe and IIc.

code and more code*Sign* ahh… I was so young and passion about computers back then + life seems to be very good back then.

Everything was black or white. Simple 🙂

Here are my most memorable lessons I’ve remember in the past 22 years of coding:

  1. Always search before you build. There is no point in building the same wheel (anyone, said framework?) again and again and again.
  2. Don’t over design. Build first something that works and solve your problem and later come back and improve: code, performance etc’.
  3. Don’t fall into the student syndrome – In other words, don’t push your work and try to hack something in the last minute. You (=the student and the project) will fail.
  4. Use the right tool for the job – choose a language, framework, design pattern that solve you problem in the best way. Never the other way around. Moreover, don’t get in love with a language (e.g. Java) just because it is cool.
  5. Always backup your code – trivial… specially, after the first time your harddisk is ‘gone’ and you lost 4months (or years) of work.
  6. Learn and then learn and then keep Learning more – You must keep yourself updated with new stuff. In these days, every day/week there is something new you should be on top of. You must keep with the flow of info in order to be better coder.
  7. Change is constant – Your knowledge of technology/programming/life should be similar to how you treat stocks: Diversify.
    Don’t get too comfortable with a particular technology. If there’s not enough support for that language or technology, you might as well start updating your resume now and start your training period. Who said “Java” and who said “Python”?
  8. Open good communication between all the experts in the company or in other words, creative collaboration of domain experts and developer experts.
    This is one of the critical and key success factor to any successful project. You must nature and advocate to open good communication. People should feel comfortable to speak their mind and to point that the king is naked as soon as they recognize it. We all know that the ‘answer’ is some where in the organization and the people that need it should be able to get to the right people on the right time.
  9. How is your web application / software / feature is going to change and help the organization?
    This is one of the most important question you need to ask yourself and push in a direction that will answer it in the best way.

I have a lot more, but I had enough time to write a short post. If you have some more urgent lessons, please feel free to add them here in the comments.

Standard
Business, webdev

Yahoo Finance (hidden) API

London vis a vis Finance
I was looking for long time after a way to get some finance data from sources like: google, yahoo etc’ without the need to parse long html pages. Than, a friend point me to some simple pipe that fetch this information. From there it was a short step to gain access to this nice (hidden) API was inevitable.

In a nutshell, if you want to get data on some stocks you can use this request:
http://finance.yahoo.com/d/quotes.csv?s=GE+PTR+MSFT&f=snd1l1yr

where some special tags:

a Ask a2 Average Daily Volume a5 Ask Size
b Bid b2 Ask (Real-time) b3 Bid (Real-time)
b4 Book Value b6 Bid Size c Change & Percent Change
c1 Change c3 Commission c6 Change (Real-time)
c8 After Hours Change (Real-time) d Dividend/Share d1 Last Trade Date
d2 Trade Date e Earnings/Share e1 Error Indication (returned for symbol changed / invalid)
e7 EPS Estimate Current Year e8 EPS Estimate Next Year e9 EPS Estimate Next Quarter
f6 Float Shares g Day’s Low h Day’s High
j 52-week Low k 52-week High g1 Holdings Gain Percent
g3 Annualized Gain g4 Holdings Gain g5 Holdings Gain Percent (Real-time)
g6 Holdings Gain (Real-time) i More Info i5 Order Book (Real-time)
j1 Market Capitalization j3 Market Cap (Real-time) j4 EBITDA
j5 Change From 52-week Low j6 Percent Change From 52-week Low k1 Last Trade (Real-time) With Time
k2 Change Percent (Real-time) k3 Last Trade Size k4 Change From 52-week High
k5 Percebt Change From 52-week High l Last Trade (With Time) l1 Last Trade (Price Only)
l2 High Limit l3 Low Limit m Day’s Range
m2 Day’s Range (Real-time) m3 50-day Moving Average m4 200-day Moving Average
m5 Change From 200-day Moving Average m6 Percent Change From 200-day Moving Average m7 Change From 50-day Moving Average
m8 Percent Change From 50-day Moving Average n Name n4 Notes
o Open p Previous Close p1 Price Paid
p2 Change in Percent p5 Price/Sales p6 Price/Book
q Ex-Dividend Date r P/E Ratio r1 Dividend Pay Date
r2 P/E Ratio (Real-time) r5 PEG Ratio r6 Price/EPS Estimate Current Year
r7 Price/EPS Estimate Next Year s Symbol s1 Shares Owned
s7 Short Ratio t1 Last Trade Time t6 Trade Links
t7 Ticker Trend t8 1 yr Target Price v Volume
v1 Holdings Value v7 Holdings Value (Real-time) w 52-week Range
w1 Day’s Value Change w4 Day’s Value Change (Real-time) x Stock Exchange
y Dividend Yield

Simple, right? 🙂

As for historical data you can use something like:

http://finance.yahoo.com/q/hp?s=WU&a=01&b=19&c=2010&d=01&e=19&f=2010&g=d

where the FROM date is: &a=01&b=10&c=2010
and the TO date is: &d=01&e=19&f=2010
You can also get it as CSV file with link like:

http://ichart.finance.yahoo.com/table.csv?s=WU&a=01&b=19&c=2010&d=01&e=19&f=2010&g=d&ignore=.csv

Now, if you want to play with the data you are getting from yahoo! you can run some fun SQL like:

Getting the Standard divination of a specific stock:

SELECT stock, STD(Close-Price) from `historic_prices` where stock = "NFLX" AND date > "2010-01-01" group by stock

This will give you the Standard divination on Netflix (hot hot stock these days) from the beginning of 2010 (and like the meaning of the universe… it’s 42!)

Here is another way to work with finance data from NodeJS.

Happy hacking!

Standard
webdev

Some usefull jQuery Plugin for the weekend

jQuery is making our life so much more productive (e.g. !(‘do less – write more’).

Here are some useful plugins I’ve being using in the past few weeks:

  • http://malsup.com/jquery/cycle/ – simple, nice and powerful way to throw some nice slides shows.
  • http://plugins.jquery.com/project/PseudoDiv – This is a div with transparent background. and layout. It gives interective look without attaching any background image.
  • http://plugins.jquery.com/project/Realtime-Related-Tweets-Bar
    This is a highly customizable real-time Twitter search-driven bar of tweets related to your post. With all the buzz lately about Twitter real-time search. Why don’t you add a real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geo code coordinates.
  • http://plugins.jquery.com/project/Jcrop – Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
  • http://plugins.jquery.com/project/floatobject
    Make DOM object float on screen to follow the users while they scroll the page.
    This plug-in can be used for floating menus AND Floating headers in long tables
Standard