Coding #6 Homework

19 Mar
I have some mixed feelings about using Scratch

I have some mixed feelings about using Scratch

After working with Scratch for a couple hours, I have mixed feelings about the tool. On one hand, I can see how its visual approach is a great way to introduce kids and beginners to programming in a way that is not so intimidating.  Snapping the puzzle pieces together is simple and easier to understand than lines of code. However, there doesn’t seem to be a very clear bridge between the visual approach and the actual code. As far as I saw, there is no way to show the code your puzzle pieces are generating. You can’t see what you’re creating, meaning the user isn’t going to be able look at that code and say, “I didn’t know I could do that. Maybe programming isn’t so hard.” Without transparency, the users are going to depend upon the visual interface rather than learning to create without it. Having had experience with Javascript in high school, I have to say I felt a bit handicapped with Scratch.

While I have a general idea of how the tool works, I think several things could make it more helpful. (I’m not sure if these things are possible and I just don’t know how to do them.) For one, having some visual feedback as to the current “step” in the puzzle chain would be useful, such as highlighting that piece.

For my game project, I want to make a game based around catching falling stars. The cursor will control a small cloud that will catch the falling stars to accumulate points. However, failing to catch 3 stars will end the game. I’m not sure how to get multiple stars to fall at the same time unless I make multiple sprites. I also wanted to have them fall at differing intervals so I need to figure out how to do that as well. Lastly, I’m not sure how to add text to the game short of making a sprite for it.


Domain Hosting Badge

11 Mar

My online portfolio

Oh domain hosting, how you hide your simplicity behind a cluster-cuss of obnoxious customer service.

I had purchased my domain ( several months ago through GoDaddy and built my online portfolio using Wix, which also hosted the site. For various reasons, I decided I wanted to scrap my Wix site and built an html site from scratch. Meaning, instead of being able to go about the normal process of purchasing a domain, finding a host, etc., I had to go through the rat race of transferring my domain to a new (less expensive) provider where I would also host my site.

I started the whole process by searching for general lists of web hosts which usually took the format of a top 10 list. I realized pretty quickly that I could get better options than what I could with GoDaddy, whose cheapest plan capped out disk space at 100GB. I ultimately decided on HostGator’s Hatchling Plan which ended up costing less than $5/month with unlimited disk space, bandwidth, etc. They also transferred my domain for free.

The actual process of transferring my domain was a bit of a hassle. I’m not sure if it was because I didn’t know what to except something else. My first request to transfer my domain was declined for some reason, so I had to go through customer support and have them re-initiate the transfer, which wasn’t as fast as I’d hoped. It took about 48 hours from the time I made my first request for a transfer to the time the transfers was complete. After that, I had to change my name servers so that my domain would no longer be connected to my old Wix site. That took about 24 hours to go into effect. Once that was complete, the process was simple though, as all I had to do was upload my files with Filezilla.

So far, everything is working great and I’m glad to have complete control over my site as opposed to with Wix’s interface.

A reflection on my time with the pen tool

1 Mar
In 2006, I was only using the pen tool to stroke my line art.

In 2006, I was only using the pen tool to stroke my line art.

I think I first started using the pen tool when I was around fourteen years old. At the time, I had already been using Photoshop for a couple years for illustrations and was frustrated with the less-than-perfect look of hand-drawn outlines I drew with my Wacom tablet. I wanted the line art to be pristine and perfect.

In 2007, I was using the pen tool in a different way, but still only for line art.

In 2007, I was using the pen tool in a different way, but still only for line art.

I searched online for line art tutorials and came across one that introduced the pen tool. I recall being incredibly confused by how it worked since I was only used to drawing in the traditional sense. I started experimenting with it and eventually got the hang of it. I initially only used it to stroke lines, but transitioned to filling paths to achieve the varied stroke weights I wanted. Looking back at my old work, it’s obvious that I was oblivious to more technical details. Furthermore, I was only using the pen tool for the outlines of my illustrations. I was still using the brush tool to color all of my images.

In 2012, I started using using the pen tool with vector masks for greater flexibility.

In 2012, I started using using the pen tool with vector masks for greater flexibility.

It was only a year ago that I started putting the pen tool’s potential to work by abandoning the brush tool all together and using it to make vector masks in Photoshop. Up until that point, I never had any need to resize my images because I rarely did anything with them once they were finished. When I started wanting to do more with my illustrations, it became painfully clear that I would need to be able to resize them and alter them.

When I finally got myself a copy of Illustrator this past November, I couldn’t help but kick myself for not taking notice of all it had to offer earlier. Everything was just so much easier and faster.

Several months ago, I started using Illustrator and the pen tool has never been better.

Several months ago, I started using Illustrator and the pen tool has never been better.

For the most part, I learned the pen tool through practice. I made more drawings that I could count. It really is one of those things that you can’t master unless you physically experiment with it and devote time to. For more nitty-gritty details, I found the book Vector Basic Training by Von Glitschka to be very informative. I have to say that the biggest help has definitely been the Xtream Path Illustrator plugin. It makes the whole process fast and intuitive, and allows for greater control over your paths. After the 15 day free trial, I had no regrets about spending the $140 for it.

I guess the reason I’ve never declared to hate the pen tool like so many people is because I felt it was the only way I could accomplish what I wanted to. I never spent time trying to resist it. I poured lots of time and energy into it, and I think it’s paid off immensely.

Be sure to check out my pen tool tutorial site.

Coding #5 Homework

1 Mar

This assignment was not the first time I’ve tried to use Photoshop to design a website, but it was the first time I really felt I knew what I was doing…well, kinda. I decided to make my design without actively considering what I thought I was capable of. I’d never made pure CSS ribbons like I did for my secondary navigation or really tried to make a style sheet without considering every bit of unique content. I just wanted to design what I hoped I could push myself to accomplish.

I was able to find a good tutorial for making the CSS ribbons, which I want to experiment with more in the future.

I’ve been using Photoshop for years, so that aspect of the assignment wasn’t really new for me.

I don’t really have any questions at this point, but I do want to take some time to do more personal projects like this.

Tea Time (Mini-Site #2)

18 Feb

Making this mini-site was a lot of fun for me thanks to the freedom we were given in making our designs. I decided to go with a “Tea Time” theme, basing my content around tea, cookie, and pastry recipes. Visually, I worked off the idea of blue and white Chinese export porcelain, specifically tea cups.

Screenshot of a recipe page

Screenshot of a recipe page

One of my biggest “issues” is my visual OCD. I like to make everything harmonious and clean, which means it’s not unusual for me to nit-pick over colors for 30 minutes. Sometimes I’ll get things to where they look good, but then I throw a wrench in the whole layout by trying out more “what if” scenarios and designs.  I’m not sure if this is a good or bad thing to be honest.

Another thing that caused a little trouble came to my attention when I thought I had completed everything. Previewing the finished site showed that the main content section (from the header to the footer) was shifting slightly horizontally between some pages. At first I couldn’t figure out what was causing it, but then it hit me: the scroll bar! Some pages were too short and did not have a scroll bar, while the longer pages did. When the scroll bar would appear it would shift the whole page slightly. At first I tried adding {min-height:100%;} to my CSS, but 1) I felt like that was a lazy fix 2) I didn’t like all the extra white space at the bottom of the shorter pages. In the end, I opted for {overflow-y: scroll;} to make the scroll bar appear by default, regardless of the page length.

Overall, I had a fun time with the assignment!

Coding #3 Homework

8 Feb
Exercise 15-1

Exercise 15-1

Screenshot 1: Floating images is pretty simple. It’s just like the different text alignment options in Microsoft Word. I just wish there was a float:center option just to simplify things though.


Customized Tab Menu.

Making the customized tab menu was interesting. If I hadn’t gone through that section I probably would have approached it in a much more difficult (and time-consuming) way.


Exercise 15-4

Once again, I probably would have approached this in a less precise way if I had not gone through the example. I really disliked how she put all the margins/padding on one line though since it does make it less readable. Just a nit-pick.






“Islands in the Stream”


Floated Definition of Maker Culture

The primary thing I took away from this part was that I love text cleaners. For real. It was mostly just a rehash of the the same content, just with more text. 

Using <span> was new for me, although it’s not really “new” because it’s so similar to a <div>.

CSS Framework Badge

7 Feb

Layout 1 | Layout 2 | Layout 3

For the CSS Framework Badge, I used the 960 CSS framework, specifically the 12 column framework. The first time I sat down to work on it, I opened the 960 zip file and just stared at my screen in horror. I went through Thomas Cannon’s article, “Using the 960 grid system as a design framework,” hoping it would make things magically fit together in my brain. Not so. I found his “tutorial” a bit ironic. One of the major benefits of the framework is that it eliminates a lot of tedious and precise coding, making the process of building a decent-looking website much more accessible to those who are new to coding. All I could think (or rather mentally scream) while reading Cannon’s instructions was “You say to do this but you don’t say HOW!?” Cue frustrated weeping, self-deprecating sputtering, etc.

Continue reading