Gabe Harris

That was a neat use of JavaScript

Wednesday, May 11th, 2011

I’ve been intrigued by JavaScript templating lately, enough so that I did a little bit of playing with a few options (mustache and I Can Haz JS). I made this page from I Can Haz JS, and it was very easy to implement.

In a nutshell, here’s how it went:

1. Link to all the right JS files
2. Create a <script> block with the template for my data
3. Use Google Feed API to snag an RSS feed
4. jQuery voo-doo to make these JavaScripts render something on the screen
5. Muck with the look/feel to make it entertaining

I don’t believe I have hardly scratched the surface with what is possible. It seems to me these templates would be very useful in pages with lots of Ajax calls to the server sending/receiving/updating data. Of course I have no projects going right now that need any of that action, so I put together a super-simple quick-hitting test page. Go look at the page and view the source, and have fun at the rest of the playground, too.

The hardest part was thinking of some (almost useful) data source to use and then remembering that I couldn’t violate any security measures (ahem, must implement Google Feed API to pull an RSS feed.) I’m potentially biased, but I dig the color scheme and design I’ve put together here. Additionally, I was stoked to see all the new fonts the Google Font API has now! It had been a while since I checked them out, been sticking with Font Squirrel.

Anyone want to help me think of a project where we can use this templating? I don’t have a lot of free time, but would love to build something. Ping me here, or on the Twitters!

• tagged: ajax, css, Google APIs, html5, icanhazjs, jQuery
• categorized: css, javascript
• no comments »

Just for fun

Friday, July 9th, 2010

I like fun things, but getting tattoos all the time is rather cost prohibitive. So I have built a little playground area, for learning and trying new stuff. Some of it is just following along through tutorials I’ve seen online, and some if it is testing out new things as I read about them. Most of it is front-end related (CSS(3), HTML(5), and JavaScript/jQuery), but there is some coding going on as well (CodeIgniter) that you won’t see. At any rate, check out the playground for some good times.

BE WARNED: if you’re using IE, you probably won’t love it so much… sorry?

• tagged: css, design, development, front-end, javascript, jQuery, playground
• categorized: css, design, development, javascript, php
• no comments »

Redesigned Another Site

Wednesday, March 10th, 2010

I redesigned my wife’s web site, MelissaHarrisPhotography.com. It was built with Photoshop, Illustrator, jQuery, CodeIgniter, CSS3, and tender loving care. You will want to look at it in a browser that understands CSS3 to get the full effect (Firefox, Chrome, or Safari – sorry Opera, I did not check on you, but I’m guessing it’s much better than good ol’ Internet Explorer.) You can’t tell by looking – but it does have an entire custom built back-end for administering the portfolio and proofing sections of the site. The blog portion of the site will be updated very soon to match the new style.

She’s happy with it, so I’m happy with it. If you need a photographer – get in touch with her!

Leave me a comment to let me know what you think of the new design!

• tagged: codeigniter, css3, jQuery, php
• categorized: css, design, development, javascript, php
• no comments »

Quick jQuery Lesson – Events

Thursday, April 2nd, 2009

Just learned a quick lesson about jQuery events (think .focus, .blur, etc.) while talking through an issue with a new twitter friend. In order to make an event work it has to be inside your $(function(){}); (also known as $(document).ready(function() {}); also known as “once the DOM is ready”). So if you’re pulling your hair out because an event isn’t firing, make sure you’ve got it in the right place. Keep reading…

• tagged: jQuery
• categorized: development, javascript
• no comments »