For Design

Photoshop

A staple in any designer’s arsenal, Photoshop has become the de-facto standard for web design. I’m hoping that another company will come out with a true competitor. Pixelmator is looking promising, but it’s not quite there yet.

I have one of the suites, but it seems like Photoshop is the only one I actually use in any regularity.

Fontcase

Fontcase, by Bohemian Coding, allows a designer a way to manage their fonts that isn’t the default font book in OSX, which leaves much to be desired. This tool allows you to not only categorize your fonts and tag them, but to give a line of text several treatments in seconds.

xScope

I found this little tool on accident, and I’m glad. The price, at $27, is a little steep. What the tool does is give you a measurement tool on steroids. It lets you find dimensions, gives you rulers, previews screen-sized viewing ports, magnification, guides, rules, and crosshairs right on your screen. This has been invaluable for PSD to HTML work.

For Development

Coda

I started with Panic’s Coda when I first got my Mac and it hasn’t failed me since. It provides an easy, clean way to edit HTML, JavaScript, PHP, and CSS files. One of the beautiful things are snippets, which allow me to create new pages from templates or to toss in quick bits of saved code.

TextMate

Sometimes I need something bigger than Coda, or Coda’s easy workflow becomes too much for a PHP script to be written in. Strip it down to it’s basics, and you get TextMate, which touts itself as the missing text editor for the Mac. I’m inclined to agree with them.

MAMP

Once in a while I run into something that I have to test locally. WordPress Theme development is easiest when done in an environment where a refresh of the page is all you need. Working on the server can be a nightmare, and that’s where MAMP comes in handy. It gives you all of the LAMP stack, but chops off the L to give it to you on your M(ac).

Cyberduck

I’m not sure I’m willing to pay $35 for Panic’s Transmit, so I’ve stuck with Cyberduck, which is a free FTP client for the Mac. It’s reliable, saves the bookmarks, and asks if I want to overwrite files. What more do I need?

For Administrative

Billings

When I first struck off in the freelance market, I dug around for an invoicing software for quite a bit. I tried several web-based products, a few software-as-a-service bits, and finally settled on Billings. It does basic things, like estimates and invoices, while allowing me to do freelancy bits, too. Retainers are standard, as are what Billings calls “slips”, which allow me to break a website into design, coding, and anything else I’d like. Most of the custom bits are templated, which allow you to create defaults that you reuse again and again.

Pages

Pages is Apple’s version of Word. At $80 for the whole iWork Suite, it’s significantly less than Microsoft Office’s similar Home & Office Suite which rolls in at $150. It has some absolutely gorgeous built-in templates, which provide numerous layout options. The best part is that it’s not difficult to create your own templates, in effect allowing your corporate branding to be consistent between all documents.

I just had one of these wonderful errors, and Twitter came to my rescue.

What Happened

I’d spent nearly two hours attempting to fix a single bug in IE7, and it was wearing on my nerves. After taking a bit of a break for lunch, I came back to the problem and it was just as bad. Regardless of what I tried, it wouldn’t fix.

Then, I thought I found a solution. I should just float the element instead of positioning it absolutely. This, however, came with it’s own set of problems. Those problems didn’t need to just be fixed in IE7. They were across the board. Ghhaaa!!

So, back to the original method and then to the frustration of the still unsolved IE problem.

Crap, I Need Help!

It occurred to me that I have a large amount of followers who are involved with the tech and design community. So, I whipped up a web page that included the following information:

• A paragraph explaining my issue.
• The CSS associated with the offending element and its immediate surroundings.
• The HTML associated with the offending element and its immediate surroundings.
• Screen shots of the element in FF and IE7.

With that taking no more than five minutes, I let out the call on Twitter.

Dude, This Is Awesome

Within an hour, six people had messaged me with various hypotheses. They were all super helpful. What’s more is that they had real information. It wasn’t just “lol, ur dum” sort of comments.

So, thank you @tedgrafx, @thebeerrun, @barneycarroll, @fairheadc, and especially @shimoroka. You all helped me solve the problem that I spent longer than I should have on in record time.

It also turns out that I was being dumb… hadn’t dealt with a hasLayout bug in so long that I had forgotten both what causes and what fixes them. Two points for a complicated design.

What SXSW Is

Getting All Ready

South by Southwest is a convention where computers, the web, film, and music come together to form an interesting harmony. With an international draw, SXSW offers a more diverse crowd of people with similar interests than seems possible to begin with.

It is a place where you can get fired up about current technology. It’s a venue for you to discover new relationships. It is a platform for new technology and ways to view the world.

In short, what SXSW is difficult to explain succinctly.

Who Will You Find There?

The interactive and film sections happen simultaneously, which offers social media dudes, bloggers, programmers, designers, producers, photographers, and film nerds some real face time with one another.

When I say ‘international’, I really mean that. In my time there, I met individuals from Norway, England, France, Germany, and all over the United States. The sheer mix of accents, languages, and slang was fascinating.

The Best Part

One of the Massive Parties

It is difficult to decide what the main draw of the interactive section of SXSW is, even after having been there. The panels, solo speakers, core conversations, and keynotes have wide draws and much to offer. The parties and interactions with other individuals grant those willing to participate an experience not quite like any other.

What really nailed the SXSW experience for me was the people. The convention proper was informative and filled with great ideas, but I’m not entirely sure that’s the point of the experience. The point of the festival is the atmosphere, and what makes the atmosphere is the people.

Without the people being so excited about what they are doing, passionate about their involvement in the community, SXSW would be nothing. Like so many speakers stressed in their presentations, community is what matters.

What I Brought Home

While it’s impossible to keep a SXSW schedule at all times, you can take some of the feel home. And that, unsurprisingly, has to do with the community around you.

We should all work towards building a community like SXSW in our own cities, whether it’s Tucson, Phoenix, or anywhere else in the US and beyond. It is the community that allows us to reach heights we would otherwise never dream of. We, as a team, are more than simply the sum of the parts.

SXSW provided me with an opportunity to really see what a community getting together looks and feels like. The convention is only a fraction of what it can accomplish.

It’s a Great Idea

Sales Amount!

Now, I see the ability of the language. It works on all platforms, compiles and packages well, and can be served off the web. These are great things in it’s favor.

It provides the ability to build computer games and mobile information. It has a huge API and you can access numerous types of databases with it. It touts that you have to write less code than with C++.

This is a great start…

But, Something is Missing

Cloogy error messages!

My main problem with Java, as we’re learning it, is that there seems to be a better and easier way to do everything we’re doing in class, particularly if it’s meant to be accessed via the web.

We created a small program to calculate the commission on a sales amount. First, the user was prompted for the sales amount. Then, they were asked to enter the identification number of their role from a list given. This dictated what percent commission they received. Finally, it outputted a final number.

Go go gadget data errors!

I’m completely overwhelmed by questions…

Why is this not just on the web? Why are we not using lighter-weight technologies to accomplish this same thing? We could even throw in a little JavaScript to pull some real interactivity.

Why are we making them input the number on their own rather than selecting it from a drop down or radio button? Why are we not giving the information in the same window? Why are we making them bounce from window to window? This doesn’t even cover the errors that a person can enter.

The Learning Curve

Oh look, data errors.

The problem I’m having here is a problem I have frequently. When I think that I know a simpler, easier way to accomplish the same objective, I want to use that instead. I always want to use the best tool for the job, if I can.

I always want to run before I can walk. Learning to crawl is beyond painful for me.

At least in the next class, we’ll be making a game.

The Rundown

I started with a slightly unrealistic time line and a barrel of good intentions. It took me a week to build my first theme for WordPress, but that didn’t mean anything to me of course. How hard could it be to theme a system I have no experience with?

A Shopify theme seems to always come organized in the same way. The main folder contains the following sub folders: templates, assets, and layout.

Not that complicated, right?

The layout folder always contains the theme.liquid file. It is the main page of your website, and all content gets shoved into the little space you give it based on which page is navigated to. It’s quite ingenious.

The assets folder contains all javascript, stylesheets, and image files. This would also contain flash, video, and audio if you were using them.

The template folder is where all of the pages reside. Whether it’s your index page, product page, collection page, or blog, it goes here. All of the files get the .liquid extension.

What Went Wrong

To start, I didn’t calculate properly how long it would take me to familiarize myself with someone else’s code. The code was also meant to act as a general framework for the store. It was not meant to be taken wholesale and contained only a single page as an example. Even some of that example was not right for what we were trying to do.

Beyond that, none of the moving bits on the webpage worked. There was a counter on the bottom that was broken. The rotating slot for images didn’t rotate. The footer links were just empty anchor tags. While none of this was a real problem, it all added to the time the project took. The different files in the template folder all had to be planned and created largely from scratch.

Categories are actually collections.

What really frustrated me was the difference in terminology between a regular shopping cart and Shopify. Categories, for example, are broken up into two separate Collections groups: regular and smart. I’m still not sure what a smart collection does. Finding the loop to dig through all of the collections took a bit of searching. It was ridiculously easy to find once I corrected my vocabulary. So much for finishing before Christmas.

In my own special way, I also messed up the forms for the shopping cart. My fail came from my inability to remember that input=”button” does not work like a button in my mind does. Inputs set as images do, however. What a way to waste an hour.

What I Learned

Even though we have Hofstadter’s Law on the wall, I didn’t re-estimate what I thought it would take until it was obvious I wasn’t going to make the deadline by any stretch of the imagination.

In the future, I need to learn the appropriate terminology before diving right in. I need to do a bit more research before I can just say “Oh, I got this”. Even when the knowledge is valuable and useful in the future, we need to accurately estimate what we can do for it and how much time it’s actually worth to us.

Thankfully, the ability to use liquid theming is pretty big.