More Web Design: Learning Rails Online

So, if you haven't seen my other post, as a part of the application process for a more advanced Tech Theatre class in 11th grade, I need to have a digital portfolio.*

Now technically I could just have my every project hard-coded into each page using html and CSS, but that sets off every alarm bell I've got. It's just bad code. I don't want to have to type all that out over and over again! It would be much easier if I could create and projects without having to program each one in individually.  So, I visited my good friend Codecademy again to take a crack at one of their newer, longer, tutorials: Ruby on Rails.

* I have since been informed that a powerpoint would have been fine, but where's the fun in that?

I picked Rails over PHP or the other options because I've had more experience coding in Ruby than any other language (except possibly Java, through iTunes U's Stanford CS101 course, but that was a while ago). I wanted at least some sort of base to start from because, and let me make this very clear: I had no clue what I was doing. I'd never done any sort of web applications before. I'd never done any programming projects where I had to juggle multiple files or languages. So I figured if I was going to take my trial by fire, I might as well wear some sturdy shoes.

I installed Rails through Homebrew (a package manager that mimics linux) for my mac. All the files I  created defaulted into Xcode and not Textmate, which surprised me, and then I used Brackets to edit my views and stylesheets.

So like this, but with at least seven more windows open, and a cat lying on the keyboard.

The rails tutorial has a very, VERY slow start, especially if you already know how to code in Ruby. It's essentially a Ruby and a Rails intro all in one, and I couldn't find any way to skip. Prepare to spend a good hour on 'hello world!' type lessons before getting to the good stuff. And the good stuff is good, but I had one major problem through the tutorial - some of the code doesn't translate well to building your own app because it leaves out bits to simplify the tutorial.  Which meant I saw an awful lot of this:

Add your own hair pulling and incomprehensible screeching.

And don't get me started on associations. For the basic structure of my web app, I want each project to belong to a category, and each picture to belong to a project. It turns out that Codecademy's take on explaining how to create these associations... assumes a lot, in the best of cases. In the worst, trying to replicate the code structure just doesn't work because they leave pieces out.

Sometimes though, it's your own fault and you know it.

So, I supplemented my learning with this Rails Guide. The great thing about this guide is that it can act as a sort of cheat sheet. Every time I looked at something in the codecademy tutorial  and had no clue what was going on, I could look back to this page, and find the no-fluff method to getting done what I want to do. In my opinion, it does a much better job of explaining the structure of Rails than Codecademy. But the benefit of Codecademy is being able to type in the code for yourself and see the different files side by side in the simulator. For better or for worse, I really needed both.


Of course, neither of these things stopped me from spending hours on stackoverflow because my CSS wasn't updating as I refreshed the page, or my migration wasn't taking, or every single one of my pictures was apparently owned by every single one of my projects. That's just part of the learning process: you can't really, truly learn a programming language until you start to program something in it.

So now my website is finally coming together functionally!

CSS could still use some work though.

 I've started to look at options for hosting. I'm going to try out Heroku, because it's free to start out, and I've heard good things about it so far. Any thoughts or suggestions? Questions about the tutorials, or where to learn more? Ask away!

Trying out Web Design

So, as I posted here earlier, I'm planning on revamping this blog's appearance. This isn't a random burst of inspiration: this year, for my Technical Theatre class, we're required to create a digital portfolio. That's practically what I've been using the blog for so far, so, although I'm creating a separate website for the portfolio specifically, I'd like the two to have a unifying theme. Also, I may be using this blog to document my Gold Award project (which was approved yesterday! Expect the post to FINALLY make it up later this week.) I want it to look more professional, and, in general, more "me." So, here are the steps I've taken so far to try a whole new kind of coding.

Step One:  Learn how to code.

I'm going to be painfully honest here: prior to this project, I had never used HTML before. Never. Not once in my life. Not even a little. It's one of those things that would have been useful that I just never did. Thankfully, it's 2014 and the internet flourishes. I tried out a couple of different online tutorials, and by far the best one was the Codecademy: Make a Website tutorial, covering HTML and CSS. It's straightforward, it's fast (I did an hour here and there over a week and finished easily), and it's what I needed to know.

Even later, when I actually started coding, I could check the Codeacademy HTML and CSS glossaries, which made for handy cheat sheets, and had everything covered in the course, and more.

A word of warning though: The website recommends the javascript-based "Build an Interactive Website" tutorial immediately after the one I took. For that tutorial, you really do need to have a decent understanding of Javascript before you take the plunge. I left it pretty thoroughly confused after the first few problems.  I started the Javascript tutorial a few days ago, and it's pretty basic stuff, but I'm hoping when I finish I can take another stab at it.

Step Two: Get a good editor to work in.

For most of my day-to-day programming, I use Textmate. But I got a good recommendation from a friend as far as a good Wed-Design specific text editor: Brackets.
And I have to agree: Brackets is the best.

There are two things that make Brackets really useful:
One, it keeps all your files organized in the sidebar, where they're easily accessible without making you go dig through folders and directories. All of them. Pictures, HTML, CSS, add-on libraries. I'm not very organized on my own, so this was a LIFE CHANGING revelation, and the second most useful thing about the program.

Two, it comes with a way of previewing your website live as you make changes. It comes with the download, and you need Google Chrome to use it. But there was nothing better than being able to tap away on my keyboard and see the elements of the website come to life in front of me. It's not always perfect. I usually had to reload the page on chrome after any big changes. But it was helpful both in designing the page and understanding the code I was designing with.

Step Three: Start Designing!

I'm working specifically on the Portfolio website right now. I have a plan drawn out (which I'll upload once I redraw on something that isn't my English HW). Once I figured out how everything fit together , it was really fun to manipulate. I used Bootstrap to make the designing a little easier, which was super handy, and there's a lot of support out there for it. This was what I had at the end of the day:

The idea is to have each project organized on the timeline from most to least recent. Each one will be contained in a box with it's title, a short description, a picture, and a link to a page with more information. What's here isn't quite right either - I want the red timeline thinner, but that's a challenge for another day.

I think I want to try and use Rails to make adding and updating projects easier. I tried the Rails for Zombies tutorial a few months ago, but I never felt really comfortable with the material. I guess it's time to retry, maybe with the Codecademy tutorial as well? I figure that will be useful for a blog design too! At least I don't need anything solid to turn in until April.

So that's my Thanksgiving break plan. I'll also be working on my Makerspace plans (Look for a post! I promise!), school work (bleck), and an interesting proposal I got from my Tech Director about using robots to move set pieces for this year's musical (More on that later, I hope).  Not much of a break, but I'm just happy to have a few days I don't have to get up at 7 am if I don't want to. How about you guys? What are your plans?