Rails Summer of Code, Week 3, July 8, 2010 from Cindy Royal on Vimeo.

This week I cover functional testing, has_many, belongs_to, HABTM, has many :through, and the association database structure. I finish up the section with some impromptu hacking to demonstrate how you can move controller logic to the model, to create re-usable code chunks.

Side note: neither the X or Y axis are labeled with units, a personal pet peave of mine…thank youGeorgia Tech ME department.

So what would I propose to help out my color-blind brethren? What about an online utility that took a picture, and mapped its RGB values to a coordinate system, then overlayed a clickable interface, so when i clicked on the color in the legend, all other pixels on the screen of the same RGB value would flash, or change colors to something user selectable. That would be AMAZING!! Is that dark green, or blue? Who cares! The one i’m interested in is flashing! It wouldn’t just be useful to color blind people, but to anyone with an indecipherable graph on their hands! Making graphs easy to read, and still containing all useful information is very difficult, so I’m sure this scenario occurs more often than not.

How hard would it be, what tools would i use? I ‘m not 100% sure. Ideally, the mapping would occur server-side, i’m fairly comfortable with RMagick, then the overlay and color changing would occur client side, maybe some awesome javascript image manipulation library. The point is, this would be super helpful to me, and maybe kinda sorta helpful to other people. Would any other color-blind (or not) people be interested in this type of functionality? Any other types of color-blind conundrums a similar situation may be able to help out?

Power to the (color-blind-ish) people!!

So I started taking note of what I liked and didn’t like about site designs. I made a delicious list and tagged the sites i liked with “webdesign-inspiration” if they have something that specifically stood out to me. Design is an art, and every artist learns by imitating. Find a feature you enjoy and try to duplicate it. Firebug is your friend.

But never get too attached. Just because a child spends hours on a macaroni picture doesn’t mean everyone will love it. Listen to your users/friends and take their advice with a grain of salt. Re-design, is just part of design.

Find a few design blogs that you can relate to, i like css-tricks, and check them every once in a while. If you like sparten designs, read http://www.alistapart.com/ . A typography based webpage design takes more skill and patience to make look good than just throwing some blue web 2.0 buttons on your nav bar.

Keep a folder of screen shots of web designs you like and constantly ask yourself what makes you like them, and how can you incorporate those features in your site. Check out http://www.designmeltdown.com/ for some good ideas. Some people have also recommended the non-designers design book.

Mockup your design in photoshop or another graphical programming, to seperate your method (css, html) from the design process. It may feel like your wasting time when your not putting text into an editor, but being able to generate several potential mockups and pick the best can save you huge amounts of time.

Finally, if you have any limitations (mine is colors) there are plenty of resources to help you out, just search for them. Such as http://www.colourlovers.com/ Good luck!

Check out my webdesign in action and let me know what you think of my Free Email application.

Teva Mush

I am also the webmaster for waterloolabs.com, the rascals who enjoy riding on  top of iPhone controlled cars and playing first person shooters with real guns. And they  agree that WhySpam.Me is the coolest app in the cloud http://twitter.com/WaterlooLabs/status/7951520586. So don’t wait, vote today!

Update: I lost by 100 votes…boo. But i’m still donating $50  to Hati. Just because I lost doesn’t mean that they have to lose out.

http://github.com/guides/changing-your-origin

Essentially you need to go to your git repository and then type in

.git/config

and then just change the appropriate line, its that easy!

Its a great way to get data out of my head quickly, if i need it in another place later i can always copy and move the data…but the important thing is the information is there if i ever need it again. After doing this for a little under a year, i’ve created quite the nifty personal cheat-sheet.

Can’t remember some bit of javascript, or how to restart my nginx process? It’s only a quick Ctrl+F away.

Though its only a simple text document, it is extremely convenient and very flexible, it may not be for everyone but I encourage you to find a way to get all the stuff floating around in your head and find a place for it. That way when you need it again, you don’t have to wonder “man, what was that great idea i had”, or “do i really have to google ‘rails rake db:’ commands…again”. Whatever you put in there, no one will judge you, consider it your very quiet always on call personal assistant!

How Do I Generate A Disposable Email?

Let me know what you think!

http://pastie.org/761588

Also check out this sweet page of DOM attributes you can get with javascript http://www.howtocreate.co.uk/tutorials/javascript/domstructure

Sample Dom-
<body>
<h1> Hello World</h1>
<div id="america">
 I am an <em> american</em>, but I wish I was <span id="superman">superman</span>.</div>
<form>
 <input onclick="guess();" type="button" value="What Am I?" />
 </form>
</div>
</body>

Sample JS

var element = document;
 alert(element.lastChild.nodeName);// will return "HTML"
 alert(element.lastChild.nodeValue); // will return "null"

var element = document.getElementById("america");
alert(document.getElementById("america").parentNode.nodeName); // will return 'body'
alert(document.getElementById("america").nodeName ) ; // will return 'div
alert(document.getElementsByTagName("h1")[0].firstChild); // will return " Hello World"

document.getElementById("superman").firstChild // will return text "superman"
Valid Selectors
parentNode            // returns immediate parent node
childNodes            // returns an array of child nodes
firstChild            // gets first child of element
lastChild             // gets last child of element
getElementsByTagName    // gets element by tag name, such as "div" for <div> and "p" for <p> and "h1" for <h1>
getElementById          // gets element by id such as 'Element:something' for <div id="something">
getAttributeNode        // gets the attributes of element getAttributeNode("id") returns id attribute