Web Dev

Nashville real estate dashboard web app with some html5 goodies (part 1)

kelseywynns : January 16, 2012 2:40 pm : all, home, web

My wife and I are just now beginning our first home search. Being able to look up drive times, street view, photos, estimated home values, and everything in between meant lots of time browsing and SO many open tabs. It’s a frustrating mess. So I hacked up a little dashboard to make things so much easier. My favorite part was not writing it for anyone but myself. I make the rules!

After spending a weekend writing the app I’m pretty happy with it. Works great! You simply type in the street number and name, hit enter and everything appears. No need for city or state since I’m only searching in Nashville.  It even works well on my Android phone! Perfect if we see a for sale sign while out and about. As of now it’s customized to our personal search, I may generalize the code later on. (and make the JS less awful).

Hurdles

Creating a Realtracs link Just an awful site all around, everything is just so difficult. You can’t directly link to a home for more than 15 minutes as it timeouts or confuses it with another home.  Took me forever to find the search by mls feature. Problem solved? Nope! Although GET substituted just fine for the POST search, there were 2 keys created at page load that needed to be submitted with the post. So when my app initializes, it scrapes those 2 keys from a realtracs page. To finish building the URL I just need the MLS number…

MLS#. The zillow API inspired me to start making this app. It provides tons of very useful information about a home. What it doesn’t supply is agent submitted data if the agent hasn’t allowed it (photos, description, etc). I didn’t find one home that allowed that info :(. Of course the MLS number is a part of this agent submitted data.  More scraping. This time using the home details link that is returned from the zillow property details call. While scraping pages may not be kosher for real life apps, this is mine, I do what I want!

JSONP. I tend to live in JavaScript land. The zillow API does not return JSONP, or even JSON. Just XML. Instead of using some 3rd party resource to convert the feed into JSONP I took at stab at it in PHP. So easy! To get the file, load it as xml, and convert it to JSON only takes ONE line:

echo json_encode(simplexml_load_string(file_get_contents('zillow query goes here')));

 

In part 2 I’ll write a little bit about using the new html5 feature localStorage. Super simple! In this case not quite  as useful as storing to a db, but not dealing with log-ins and keeping it client side was my goal.

Leave a response »

Chrome OS Cr-48: a sorta brief review

kelseywynns : February 11, 2011 8:30 am : all, home, web

CR-48 Chrome OS notebook

CR-48 Chrome OS notebook

If you’ve never heard of Chrome OS go here first.

There are quite a few Chrome OS Cr-48 reviews out there, so I’ll try to keep this brief (didn’t happen), and actually stick to the OS

Top 5 pros:

  1. Instant on. It really feels like it never went to sleep.
  2. Battery life. While this is obviously a combination of hardware and software, since this notebook does not have extraordinary hardware I’d like to give the software most of the credit.  8 hours is great.
  3. Speed. Considering it runs a wimpy 1.66 GHz single core atom processor I’m very impressed. Granted, my core i7 laptop would kill any day in a speed test, but I’m thinking with this next generation of ultra-low-voltage processors you will get a lot of bang for your buck when combined with Chrome OS.
  4. Ease of use. It does take a little getting used to but really couldn’t be more simple. As soon as I open the lid I have grooveshark, facebook, tweetdeck, gmail, news.google, and google cal pinned and open at all times. I have the google talk and scratchpad app installed which can be used on top of any page. I also have google voice installed that dings every time I get a text and lets me connect calls. The Google reader extension is installed, and tweetdeck has native notifications that pop-up from time to time. It just works like you’d expect Chrome to work, with some extra helpful OS tweaks.
  5. Google cloud print. No, we don’t, nor should print as much crap as we do, but I found this feature pretty sweet. It’s not limited to Chrome OS either, but when setup (basically just signing in), it gives me access to print on my home printer or any printer available to my work computer (which is like 15 printers) at anytime. I can print on any of these printers as long as I’m connected to the internets, even while I’m sitting here at Frothy Monkey in Nashville. As much as a pain in the ass printing can be with drivers and the evil demons that make printers rebel against humanity, I just found this sweet. Although rare for me, when I need to print, I usually REALLY need to print.

Top 5 cons:

  1. Video. I’m an HD freak. This makes watching video rough. Playing HD youtube video is disabled, but really they are just saving you the the trouble of failing. Not enough umph. Enabling HD on vimeo comes out to be about a frame a second (not actually tested). Maybe mp4 hardware acceleration will be introduced? I just find this unlikely with the WebM ordeal. I haven’t looked into this yet.
  2. Too many tabs! With too many tabs comes sluggishness. It’s fairly easy to rack up 30+ tabs these days. You have to be a little more conscious about that. I’m guessing with a zippier dual core low-voltage processor that won’t be an issue.
  3. Claustrophobia. This wasn’t a huge issue with me. You’re stuck on a browser with no view of a “Desktop”. Technically your desktop is a fresh tab which shows your installed apps. There is no familiar start button, fancy dock, or file viewer (yet). Just ctrl + t. I personally love it, but I can see this as a con for many people.
  4. Buggy. They are adding features quickly. This means bugs. This isn’t a huge con for me as it’s in for reals beta, but it still sucks when an update kills Grooveshark (working now). They are pretty Johny-on-the-spot with fixes though with frequent updates. Tabs can crash too, though it has yet to freeze.
  5. Change. Google–or anyone for that matter–aren’t so great at throwing anything radically new at consumers…even if it’s amazing. The major exception would be Apple. Apple has Steve Jobs stand before millions and simply tell them what to like. Then they like it.  I feel like Google likes to silently throw new products up in the air and see what lands on it’s feet (except for the whole buzz thing of course). Unfortunately 99% of the population HATES change (at first). Every time Facebook changes their interface people throw rocks and try to start a revolution. A month later no one remembers what the previous incarnation even looked like. For the revolutionary idea to be successful it also has to be game changing, and I think Chrome OS is game changing. If the manufactures that decide to sell them don’t jack up the hardware, and the prices are fair, I wouldn’t hesitate to purchase one when they come out. Who would have thought that in order for Linux to become popular you merely had to scale it down and market it under a different name (Android). Linux is currently being adopted at a rate far exceeding the expectations most ever imagined (unless Linux geeks had an imagination). I would like to think Chrome OS will be a welcomed companion, but in reality it will probably see a long road to wide spread adoption, if that even happens.

Some fun things to do if you get one, and the conclusion after the break…

more »

1 Comment »

Custom color profiles, do they work in your favorite browser?

kelseywynns : November 29, 2010 3:31 am : all, web

saved as Prophoto RGBNot too long ago my favorite browser was Chrome. When I realized it does not support color profiles (on the windows version) I reverted back to firefox.

With Chrome everything is built around speed. Not only does the browser load faster but web pages render speedily. There are also the little things. When I save a bookmark, it shows up on all of my computers. When I start typing a location in my phone, the correct version pops up first on the list if I had just searched for it in my browser on my home computer (which happens more than you would think).

Although Firefox is still king of add-ons; with several Chrome extensions I can have every phone number on every webpage become a link.  I can simply click these links when I want to make a call on my cell phone. With a click of a button I can send a youtube video or webpage to my phone in seconds.

All of this is lost without color support, browsing the web with Chrome on a color calibrated screen is disgusting. In my case everything is over-saturated.

Here is a quick test to see if your browser supports embedded profiles.

On my Windows7  machine, Firefox supports version 2 (fails version 4). IE and Chrome of course fail both version 2 and 4 color profiles.

Who does this affect? Well, really it affects everyone. Much like the Internet Explorer effect, if the most popular browser doesn’t support something, it makes it extremely hard to implement an additional feature for just the minority of web traffic. When coding my photography portfolio I suppose I could detect color management support and then show a ProPhoto RGB version for those users with that feature. Being able to embed a large gamut color space like ProPhoto RGB would be pretty sweet for viewing photos on a portfolio, or even a site like flickr.

Who does this actually hurt? Well, it kinda hurts anyone using a color corrected system who wants to use a browser that doesn’t support color management. This is not the majority. Read: Users with color maintained systems who prefer Chrome (on Windows) or IE. If you color correct and prefer IE, well, you don’t exist. If everyone who should color correct their displays did, well, it would be a heck of a lot more people. And no, just because you use a Macbook Pro or have the latest expensive Dell monitor doesn’t mean you are in the free and clear when it comes to color correction. Every single web developer, web designer, video editor, photographer (let’s face it, even my mother’s dog’s favorite couch is one of those), animator, or anyone else who does not like to view red as orange should get their monitor calibrated.

This is how all the major browsers currently stand:

Browser              / Platform             / ICCv2   / ICCv4
Chrome               / Win, Ubuntu           / no      / no
Chrome               / OSX Leopard          / yes     / yes
Firefox 3.5 to 4.0   / Win, OSX Leop., Ubuntu/ RGB only/ no
Safari 5.0           / OSX Leopard          / yes     / yes
IE < 9               / all Windows          / no      / no
IE 9                 / all Windows          / yes     / yes

After IE9 comes out that really just leaves Chrome. I really hope they get this fixed soon!

Leave a response »

W3 Total Cache is fancy

kelseywynns : November 11, 2010 7:27 am : all, home, web

Screen shot of w3 total cache admin page

Wow! I can’t emphasize how amazing of a WordPress plugin W3 Total Cache is! As far as plugins specializing in speed and optimization, I don’t see how it can be beat. Lets see, it can…

  1. Minify and combine all of your JS and CSS files (a feat in itself)
  2. Sync Wordpress with a CDN. This can be as simple as syncing with your own sub-domain, Amazon simple storage, or using Amazon CloudFront. I tried out all 3. As I’m just starting out with this blog I won’t have to pay a dime (you pay for what you use and this small blog won’t get much traffic). Oh, and everything loads sick fast.
  3. User Agent Settings: When you browse to my site in a smartphone it will load a mobile template. If you browse to my site in a stupid phone it will choose another mobile template. Pretty slick.
  4. Caching…and lots of it. It enables browser caching with custom expire times and gzip compression.
  5. Hard drive based caching of database’s and objects. Non caching for logged in users.
  6. Page caching as well (not for logged in users)

All in all I can’t believe plugins like this exist for free. I can’t imagine how much hard work goes in to the creation and upkeep of such a complicated piece of code. With browser cache enabled I can now get page loads close to 500ms (which includes GA). Dang!

No I don’t have a ton going on yet, but for shared hosting that’s still not bad. I also plan to tweak settings some more.

Without browser cache I’m still easily looking at sub 1 second page loads (again including GA).

Even if you don’t feel like paying for Amazing S3 or Amazon CloudFront I think this is an extremely important plugin to take the time to install and configure properly. Unless you don’t care about load times.

Leave a response »

Imagine No Malaria

kelseywynns : November 8, 2010 9:57 pm : all, web

Ended up redesigning and styling this site in one day! I think it turned out okay considering. The feature is powered via RSS, jQuery, and a jQuery plugin called jQuery cycle. Very handy simple and lightweight plugin that gives you plenty of transition options.

Screen grab of imaginenomalaria.org

Leave a response »

wynnsphoto.com

kelseywynns : November 8, 2010 6:53 am : all, web

The first site I’d like to show of is my photography portfolio. Styled using just 15 styles I think it does a great job of showcasing the photos. The unique menu font is rendered using google’s web font api. The photos themselves live on flickr. I simply organized each menu category into a flickr set, then simply ajax in each set via JSON. This is great for several reasons. The first and best reason: as I keep flickr updated I will then automatically keep my portfolio updated. I can’t tell you how many photographers websites I’ve seen where the most recent photo is over a year old. Secondly, flickr sizes and sharpens the photos for me. I just upload my highest quality photo, then I have all of the sizes at my disposal. I simply use a javascript replace to change the urls which point to the photo size I desire.

The rest is jQuery fun. The site was originally very simple. Just last week I gave it some more bells and whistles (read: performance sucks on IE now), so it’s a bit more complicated. I’m thinking about adding a facebook connect button which would pull in your facebook profile photos as an extra category in the menu. If I go that route I will for sure rewrite the code in a much easier to understand object.

screen grab of wynnsphoto.com

Leave a response »
« Page 1 »