Scripting

Ramblings and links to interesting snippets


Rails for Zombies

I recently completed the Ruby on Rails tutorial “Rails for Zombies.” I really like it’s “edutainment” zombie filled format, and on top of that it’s a very well written and easy to follow tutorial.

The tutorial consists of five “chapters.” Each chapter is broken up into an approximately 10 minute video and then a lab portion where you get to do exercises related to the video.  It’s really great to try out the code right after hearing about it, and I like that it doesn’t get drearily technical at the get go with needing to get Rails up and running.  A lot of RoR tutorials start with installing and runing your own local server, which a least for me is the least pleasant part.

A nice take away is the free PDF download it offers, which has all the slides from the video and is a nice reference back to everything you learned from the tutorial.  You also get a coupon for some paid rails tutorials after you finish.  They have “Rails for Zombies 2” in the works so I’m thinking of saving it for that :3

At their Code School website they also offer a “Rails best practices” class which sounds a little advanced for diving into right after Rails for Zombies, but if it’s anywhere as well put together as Rails for Zombies I’d like to come back to it later.

http://railsforzombies.org/

Permalink » No comments

Images Cut Off in the WordPress Image Editor

So, I’ve just spent the last half hour tracking down this annoying bug in WordPress 😛

I’m really glad I use an outdated theme (or at least one without custom header support) so I could track this puppy down.

I have been working on building a theme that is a child theme of good ‘ol 2010 (2011 wasn’t out when I started building :()

I uploaded a portrait image and noticed it got cut off in the image editor like so:


The editor’s will really need to be able to adjust that thumbnail image, so I went digging around and found that a theme called “Modfolio” had this exact same problem.  So, I figure, it’s gotta be something with the theme.  Especially since I didn’t get a whole lot of results…if it was a core issue and everyone was seeing this then I would assume there would be a lot more complaints.

I switched around from my child theme, to 2010, and even 2011, but the same error kept popping up :/  Then I figured I’d check it out in my blog here.  I’m currently using a slightly modified version of Uchilla theme – which hasn’t been updated in ages.  And lo-and-behold the image is coming up fine and dandy in the editor.  I could be wrong on this, but I believe the only file in a theme that can mess with the admin side of things is the functions.php file.  So I just kept hacking away at it until I found the bit of code that was causing me grief.

It’s lines 117 & 188 in the functions file for 2010:

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

That was somehow adding a constraint to the editor preview and for me simply commenting out those two lines did the trick 🙂  I did have to re-upload all the affected images though…

I don’t know what effect that might have on the custom headers…I’m not using them myself so it wasn’t an issue for me.

Permalink » No comments

Try Ruby

I’m trying to come to grips with Ruby on Rails, and the website Try Ruby was suggested to me.

It was a really impressive online tutorial set-up as a user prompt.  I really appreciate that it’s one Ruby tutorial that doesn’t require me to be download and installing packages willy-nilly to get started 😛  It’s extremely newbie-friendly and is well written and utilizes some light humor to help you get through it 🙂  I think the last chapter was a bit clumsy…but may have just had one too many typos along the way.

Regardless, I’d say the “15 minute” bit is no lie and well worth the time if you’re trying to get better acquainted with Ruby or RoR such as myself.

http://tryruby.org/

Permalink » No comments

350s gallery

I randomly made this little webpage to showcase a lot of 350×200 openers I made for online articles 🙂

It’s a pretty simple script built on top of jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
body {
    margin:0;
    overflow:hidden;
}
</style>
<script type="text/javascript">
$(function(){
    $("div").mousemove(function(e){
      height = $(window).height();
        width = $(window).width();
        percent = e.clientY * 100 / height;
        move = ($("#box").height()-height) * percent / 100;
        $("body").scrollTop(move);
 
        percent2 = e.clientX * 100 / width;
        move2 = ($("#box").width()-width) * percent2 / 100;
        $("body").scrollLeft(move2);
    });
});
</script>

The CSS hides the scrollbars and removes the default margins from the body.

Then the Javascipt adds an event handler that will fire every time the mouse moves on top of a div – which is always since the page is pretty much just one giant div.  After that it determines what percent of the window you cursor is currently sitting at, and then translates that to the same percentage of the size of that giant div and scrolls the window accordingly.  So regardless of the size of the window you’ll be able to move it around to see all the contents of the div.

Scroll around the box below to see the random goodness:

Permalink » No comments

Pure CSS GUI icons

Tags:

While I was listening to Sitepoint’s 118th Podcast the other day and they mentioned a very interesting CSS 3 experiment.  Sadly this won’t be working with IE just yet so it’s not something we can put to use right away, but the idea of Pure CSS icons is quite neat 🙂  The use of pseudo elements to create the icons out of pure CSS is truly innovative and makes me start to think about all the code that could be cleaned up by taking advantage of pseudo elements as opposed to adding in more DIVs to get certain background and border effects…

Regardless, it’s an interesting peek in to what we’ll be able to achieve once CSS 3 is fully supported

http://nicolasgallagher.com/pure-css-gui-icons/demo/

Permalink » No comments