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 »

In-line style? PLEASE DON’T

Thursday, July 22nd, 2010

Besides the more obvious reasons for not using them (if no reasons come to mind, stop reading and go play some place on YouTube), in-line styles suck on another level. Keep reading…

• tagged: class, css, id, in-line, style, styling
• categorized: asp.net, css, development, javascript, php
• 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 »

The Argument for HTML 5 and CSS3 – NOW

Tuesday, February 9th, 2010

A few months ago, I did a post about CSS3, and I was not sold on it at the time. I agreed that the possibilities it presented were useful, but the browser support was lagging too far behind to begin using it. We live on the web, and times change quickly, and I’ve changed my opinion. I’m flexible, I want to grow and adapt and do what makes the most sense. Keep reading…

• tagged: browser, css, design, development, html, web browser, web development
• categorized: css, design, development
• no comments »

CSS3 on Textboxes

Wednesday, November 4th, 2009

Discovered this “bug”, and its workaround. When applying the -moz-border-radius and the -moz-box-shadow to an input type=”text”, it didn’t work  immediately with their default stylings. Once I  set the border and background styles manually, it displayed quite nicely. Hooray for Firefox!

• tagged: css, css3, firefox, rounded corners, web design, web development
• categorized: css, design, development
• no comments »

CSS3 Demo

Tuesday, June 16th, 2009

I love web development. I like using new technologies, especially when it makes my job go more smoothly and produces better looking and functioning web sites. I did a little test of CSS3, just to see what all the buzz was about. Overall, I like where it’s headed, but it’s not ready for prime time yet. I will be happy when it is! Most of my observations are written up on the page, so check it out. Feel free to comment here and let me know your thoughts. Are you using it yet? Why or why not?

Check out my demo page (feel free to use a few browsers for the full effect): CSS3 Demo

• tagged: css, css3, web design, web development
• categorized: css, design, development
• no comments »

CSS Float Issue

Monday, April 27th, 2009

I didn’t think this up myself, but I just learned it, and it seems terrifically useful. I run into this problem regularly: I have a containing element (div usually) with a few floating elements inside of it. I like to use this technique when splitting an element in half – a left half and a right half. I’ll float the left half to the left, give it a width that’s a little less than half of the outer container, float the right half to the right with the same width.

“Great,” I think to myself. Let’s ctrl+s then refresh the browser to check this pig out. Then there’s the problem… Keep reading…

• tagged: css, float, layout
• categorized: css, development
• no comments »