Redesigning Intonarumori.com

The release of the first Intonarumori album in a few years gave me a good excuse to redo the website and bring it into the modern internet age.

The old site (still available here) had served me well and the design mostly was still working, but since the updates had been infrequent and minor, it seemed like a big redesign would also be a good way to signal that the site (and band) had not been abandoned, just quiet for a while.

The old site:
Old Intonarumori Site

 

The old site was also using a lot of stale HTML tricks (yes tables for layout!). I did do some prototypical responsive design though (resize the window on the old site and watch how the title area resizes smoothly). The site itself also was really bad on mobile devices, and even was using a lot of (horrors!) Flash for audio playback. It had been in place for eight years though, replacing the second design which was from the mid-to-late 90s.

I also thought that the information design was pretty lacking, superfluous information and overly complicated navigation for a musical artist site, ie: way too many pages.

I decided that I was going to try and do it right this time. CSS-based, responsive design, a reasonable layout, retina and mobile ready. I also wanted to follow a true process where I would spend some time sketching and wire-framing before I started in.

I didn’t want to go overly fancy though with unnecessary javascript or dynamic pages, since the site itself should not change too significantly once it is deployed (the last one was in place for eight years).

I spent a bunch of time sketching ideas for layouts and looking at other artist sites to get a better feel for what others had done. Musicians sites are fairly staid I found. Usually relatively minor affairs with a small number of pages and mostly links out to other sites with the content. I didn’t want to make Intonarumori.com into a big destination site, but I wanted to make sure that it had enough information for a curious visitor to get a feeling for the project and it’s output.

Once I had a rough idea of what I wanted to do, I got into coding the first page. I started in with Dreamweaver CS6. I have been using Dreamweaver since it was a Macromedia product, almost since it was released. My earlier sites had been done completely in notepad and e-macs, but I loved being able to do WYSIWYG HTML and having a built-in FTP server. Dreamweaver also has really good CSS. I had been finding its’ limitations though on some projects over the last few years. Especially on sites like kevingoldsmith.com and parts of unitcircle.com where I was mixing PHP elements in. Dreamweaver started to be more of a hinderance than a help there.

I decided that I didn’t want to use Dreamweaver’s built-in support for responsive design. Not that it wouldn’t have made things much easier, but I wanted to really understand how to do it right myself before I started using tools. Also, I had just had to rip out a lot of old Dreamweaver template crap from one of my old sites and I didn’t want to get stuck into anything Dreamweaver-specific.

I did want to use JQuery, so I could learn it better. So, I did use that and I also spent some time looking at different responsive design libraries. They were all a lot more than I needed, so I decided to do stuff myself. Again, a goal was to really wanted to understand responsive design better.

As I got into using more Javascript for messing around with the DOM, Dreamweaver immediately became useless for viewing the content. The split view, which I had really loved, was basically worthless. Dreamweaver became a pretty-good text editor with pretty-bad FTP support added in. (aside: the FTP support in Dreamweaver seems to have been stuck in maintenance mode for the last several releases, which would have been fine if it actually worked well, but it never has). I found myself editing code in dreamweaver and then having to FTP it to my server to test. Dreamweaver used to let you preview in a browser locally, but either that got removed or just moved to where I couldn’t find it. This process became unworkable to me. I decided that it was time to move on to a different process.

I have been using TextWrangler for a bunch of different code editing projects, so I decided to try it out for this. I came up with a new process where I edited the code in TextWrangler, previewed by reloading the page in Chrome, and then pushed it to the server to check on other devices by using SFTP in a terminal window. While this might have seemed like taking a big step backwards, it actually worked ok. At least as well as Dreamweaver, if not a bit better. The lack of code completion was starting to bug me though, and having to type FTP commands constantly was also getting annoying. So, I decided to look into better tools now that I knew I had to drop Dreamweaver.

My first change was buying a copy of Transmit 4. I have to say that I love this app! Being able to mount the webserver as a virtual drive and edit the files directly was awesome as I was messing with the media queries in the CSS and modifying the layout for mobile. It was also amazingly faster and more reliable than Dreamweaver or shell FTP.

I wanted a better editor though and I asked on Twitter to check with the zeitgeist. Of course my pals at Adobe put in plugs for Brackets:

I had known some of the Brackets guys and I liked that Adobe was doing this kind of open source project, so I grabbed a build. For an early build of a code editor, I thought that it was pretty good, but I found some of its quirks a bit frustrating. I was doing a lot of refactoring of layout code at this point and I was finding myself fighting the tool a lot. It was better than Text Wrangler and Dreamweaver, but it wasn’t really working for me. I decided that I need to keep looking. I did like the live update in the browser feature though, that is pretty cool.

Of course I was well aware of Sublime text, but I had never actually tried it. The videos on its site scared me a bit. It seemed way overly complicated for my needs, and the idea of having to use code and to hand-edit preferences files to use a text editor were not really appealing. I might as well have dug up my old .emacs files and started there again. I decided to give it a shot though given multiple recommendations from folks I trust.

While Sublime isn’t perfect, it is definitely the best one I’ve tried yet and seems to work. I’m using Sublime 2 now, but will probably check out Sublime 3 soon.

I also realized that rather than use my devices all the time to check out how the site worked on mobile I realized I could just use the iOS Simulator that comes with X-Code. That was a massive improvement to my workflow as well.

So new workflow is:

  1. Edit code in Sublime
  2. Test in Chrome locally for desktop
  3. Test in the iOS simulator for mobile
  4. Push to the web server using Transmit
  5. Double check on mobile devices
  6. Use a local version of git for version control

I didn’t mention GIT before, but I’ve been using it on all my sites for a while now. Especially the WordPress ones. In addition to being able to roll-back a site and try out some stuff worry-free, it is also great hacker repair. If any of my sites diverges from the local HEAD then I can figure out what files have been messed with. I haven’t used this to actually use remote repositories as ways to update a site, but I may eventually.

With my workflow in place and a few pages done, I pretty much had the process of building responsively going pretty well.

At first, I was trying to make the site smoothly re-lay itself out for different sizes dynamically. This was way too much work for too little gain as HTML does a pretty good job of that on desktop and it isn’t an issue on mobile. So, after wasting some time on that I switched to doing more with CSS Media Queries. This was fine, but I got way too narrowly-targeted there which meant a lot of work targeting different mobile platforms. Eventually, I switched to having a few basic layout for different widths, roughly one for phones and one for tablets and then one extra one for phones in landscape mode. This worked well on the devices I have, and it kept the effort to be reasonable, but I still need to test on friends devices to make sure.

Now the new site was pretty much done:

The new Intonarumori.com site
The new Intonarumori.com site

There are still some things I’m going to tweak and probably a few issues here and there, but overall I’m happy with it as a new starting point.

There were a couple other resources that I used that I want to give a shout out to. One was the icon set I got from G. Pritiranjan Das. For the photo page, I used the Camera Slideshow JQuery plugin. I also used Matt Kersley’s Responsive Design Testing tool and found it useful.

Development is more fun with kittens – three fun placeholder tools

Place Kitten gives you place holder images that make you wonder if you should bother ever replacing them, like:

Cupcake Ipsum generates much better Lorem Ipsum text that your run-of-the-mill tools, like:
Cupcake ipsum dolor sit amet. Toffee I love cake I love gummi bears cotton candy I love cookie. Wafer dragée lemon drops jelly-o jelly I love lollipop.
Fruitcake lollipop sweet roll muffin caramels. Cake I love macaroon biscuit candy canes dessert pie. Sweet apple pie lollipop jelly beans cheesecake gummies biscuit. Wypas I love croissant macaroon halvah.
Sweet roll tart toffee lemon drops candy canes soufflé bonbon. Ice cream tart cupcake I love icing tootsie roll jelly. Soufflé biscuit topping topping caramels pudding sugar plum cheesecake.
Halvah ice cream macaroon lollipop donut. Dessert gingerbread toffee gummies I love gingerbread applicake. Icing marshmallow cupcake.
Topping jelly beans fruitcake tootsie roll. Faworki soufflé chocolate cake. Dessert sesame snaps biscuit tiramisu cookie I love sesame snaps.

Placehold.it is where placekitten.com got their idea, it is also useful, but not quite as fun

(via Chuck Rose)

[Update 2/29/12]
Adding also PLACESHEEN.COM, yow!

(via Bob Archer)

Having problems with the Adobe Connect add-in on OS X? Here is how to uninstall it.

I’m posting this here because it took me more than 20 minutes of googling to find the answer (and I’m an Adobe employee).

The Adobe Connect uses Flash and sometimes if you do an update to Flash on your system, Connect gets into a bad state. The way you’ll see this is that when the Add-in tries to launch it will get stuck with a small window that says “Loading Adobe Connect…” that never finishes.

The way to fix this problem is to uninstall Adobe Connect. Unfortunately, Adobe doesn’t make it easy for you to do that. there is no uninstaller and no information on the Adobe web site. Here is where the add-in is installed

~/Library/Preferences/Macromedia/Flash Player/www.macromedia.com/bin/connectaddin

Delete that directory and you have now uninstalled the add-in. Your connect sessions will now be hosted in your web browser until the next time you need add-in functionality, at which time you’ll be prompted to re-install it.

Hopefully this solves your problem and you found it faster than I did.

(tip of the hat to Aral Balkin who had to do this a few years ago too)

HPC on the (relative) cheap using public cloud providers

For the past several years, I’ve been working on leveraging high-performance computing techniques for high-throughput data intensive processing on desktop computers for stuff like image and video processing. Its been fun tracking what the multi-processing end of HPC has been doing, where the top 100 super-computer list has been very competitive and very active. Countries, IHVs and universities vie for who can generate more teraflops; spending millions and millions of dollars on the cooling plants alone for their dedicated data centers. These super computers exist to solve the BIG PROBLEMS of computing, and aren’t really useful beyond that.

At the same time, I’ve been following the public computing clouds like Amazon’s EC2, Google’s App Engine and Rack Space’s Public Cloud. These have been interesting for providing compute on the other end of the spectrum, occasional compute tasks, or higher average workloads with the occasional spike capability (like web apps). The public clouds are made up of thousands of servers and certainly rival or best the super computers in numbers of cores and raw compute power, but they exist for a different purpose.

This article in The Register really got me excited. Especially when I read this:

Stowe tells El Reg that during December last year, Cycle Computing set up increasingly large clusters on behalf of customers to start testing the limits. First, it did a 2,000-core cluster in early December, and then a 4,096-core cluster in late December. The 10,000-core cluster that Cycle Computing set up and ran for eight hours on behalf of Genentech would have ranked at 114 on the Top 500 computing list from last November (the most current ranking), so it was not exactly a toy even if the cluster was ephemeral.

The cost of running this world-class super computer?

Genentech loaded up its code and ran the job for eight hours at a total cost of $8,480, including EC2 compute and S3 storage capacity charges from Amazon and the fee for using the Cycle Computing tools as a service.

Real world HPC is now coming into price points where it is accessible to even small companies or research groups. This seems like a ripe opportunity for companies who can apply HPC-techniques to solve real problems for others, and for tools vendors who can make using these ephemeral clouds easier for companies who want to take advantage of them without having to build up high-end expertise in-house.

Unit Circle Magazine Archive re-launched

In 1993, I decided that I wanted to create a magazine. I don’t remember the exact reasons why. Zine culture was on the rise at the time and I was living in San Francisco, which was one of the epicenters, so it was definitely in the air. The first few issues were xeroxed and distributed around San Francisco, but were also posted at Postscript files on sgi.com’s FTP site and word was spread on the early internet newsgroups and mailing lists. The first issues were put together by myself, Jane Underwood and Derek Chung.

I moved to Seattle in 1994 and continued to put out the zine. Now, Dan Appelquist (editor of early science fiction e-zine, Quanta) had hipped me to this amazing site created by Paul Southworth, etext.org. Etext.org was all about celebrating literature on-line. In the proto-internet days of 1994, getting a website up was no mean feat, and keeping it up at no cost to the people being hosted on it was frankly amazing. Issues 3-6 were printed on paper, but were also hosted on etext.org. As one of the early culture e-zines it got some noteriety (including a write-up in the book “webworks: e-zines” by Martha Gill). Now that early HTML looks laughably primitive, but for the time I was quite proud of it. Issues 3-6 of the magazine were put together by myself, Derek Chung and Nita Daniel with some contributions by an occasional other writer as well.

After issue #6, I got very busy with Unit Circle Rekkids, and it also seemed like zines (both on-line and off-line) were just exploding. I realized that the tools were now in the hands of the artists that we’d covered and that the zine itself was no longer necessary. We left the site up so that the content was available, but it became a historic archive. I have to admit that I didn’t even check it out often any more to make sure that it was still up. The last content was added in 1996, I think, although some minor changes were made to the site afterwards based on requests from contributors.

Eventually, etext.org had run its course and the site itself stopped hosting its content. Unit Circle zine is still available from the internet archive, but I wanted to bring it back home and host it here as well so that it could live on as a time capsule. I have cleaned it up slightly (fixed up some of the links, scrubbed some of the e-mail addresses), but it is pretty much the same as it was when it was last updated.

I want to thank everyone who contributed to The Unit Circle Magazine, especially Derek, Nita and Jane, and I really want to thank Paul Southworth for creating an early home for culture on the internet. I also want to thank all the artists, authors and musicians who allowed us to showcase their work. I hope that all are successful and continuing to create. Finally, I want to thank everyone who ever read an issue, on-line or on paper.

The Unit Circle Magazine archive is now at http://www.unitcircle.com/zine/

Google vs. Microsoft: Peter Wilson’s view

Peter Wilson spoke at Ignite Seattle last night (How do I keep missing these?!?). Having been a senior dude at both Microsoft and Google, he has some true insider perspective on each. It is through the lens of what he cares about (cloud computing), it does have some good perspective. What is interesting to me as a former softie myself is that while he doesn’t say anything horrible about either place he definitely seems to still be a lot more supportive of his more recent employer than his previous one. While I love the concept of the Ignite talk being limited to 5 minutes, I would have really liked to hear more on this topic. Maybe he’ll do a longer version at some other local tech meet-up that I’ll completely miss as well 🙂

via TechFlash: Google vs. Microsoft: The view from a guy who worked for each

iTunes hack warning!

My iTunes account was hacked on Friday, I didn’t find out until Sunday night though because that was when I tried to log in to my account after it had happened.

Watch out for these signs (Apple support didn’t even consider that I had been hacked when I contacted them):
The hackers changed my account ID and my e-mail address to something similar to what they had been before but different. This allowed them to charge two $50 iTunes gift certificates to my card without me being notified (because they had changed the e-mail address on the account).

When I tried to log into my account on iTunes, I got weird errors about my account id or password being incorrect. When I tried to recover my password on Apple.com, I got an error saying that my account ID was not in the system. When I tried to get my account ID, they couldn’t find it (since the hackers changed my e-mail address). Of course, I could not log into the support site to try to report the issue since it requires my Apple ID. Luckily I found the iTunes store form that let me contact support via the web without logging in and they were able to tell me that I had changed my account ID and e-mail address. I was able to log into the new ID that the hackers made with my old password, which was really lucky since Apple support was clueless about what had happened.

Why didn’t Apple notify my previous e-mail address when the change was made? That is a basic security process that many other sites use. There is a pretty clear pattern of fraud here as well, account information is changed and then large purchases are immediately made. Shouldn’t Apple be looking for this kind of thing?

I have contacted support to find out if they have a process for dealing with fraud, but I can’t help but feel that Apple’s security is somewhat to blame here. I’ll let you know what Apple suggests I do.

I also posted the above on the Apple support site here. Please spread the word so that others aren’t ripped off.

On a side note, I can’t help but wonder how my account got hacked. I’m pretty wary of phishing scams, and that kind of thing. I’m always extremely careful with this kind of stuff. The only thing that occurs to me is that the same day my iTunes account got hacked, I created an account on artaculous.com. I used the same e-mail address (of course) and in this case I was lazy and used the same password as my iTunes account. I generally try to avoid using the same password twice, but it does get hard to remember them all without reusing them sometimes. I have since gone and changed every password on every site that I have accounts on, just in case. I’m not saying that artaculous.com is some phishing scam, but the coincidence is rather odd…

I’ll update this post as I get more info from Apple. Please add a comment if you have heard about this scam or have more information or suggestions.

[Update: 6/29/09, 11:26pm]
Of course, I changed all my passwords on every site I could find an account on today. My e-mail is full of account update notices from a zillion large and tiny companies… Except Apple. I changed my Apple ID (Twice!), my password (Twice!), my security question, my mailing address. Exactly zero messages from Apple letting me know in case it wasn’t me. This really is pretty weak security on Apple’s part.

[Update: 6/30/09 9:09am]
One of the iTunes gifts certificates had been sent to a gmail address. I tried to find a way on the gmail site to let them know that an account was being used or involved in a crime, but couldn’t find a way to do it. Seems weird because I don’t think you need the certificates mailed to you to use them, just the code. The second certificate had not been mailed or had the e-mail addy cleared. Can’t Apple track the IP address of whomever uses the gift certificates to track back to the people who hacked my account? Will they bother? Still waiting to hear back from Apple on letting them know that my account was hacked. Would call their number or try to see a genius, but I’m in jury duty right now.

[Update: 6/30/09 2:04pm]
Apple has responded (excerpt):
I understand you are concerned about purchases that were made with your iTunes Store account without your permission or knowledge.

I know it can be discouraging when fraudulent charges are made on any type account whether it’s your bank or iTunes.

I urge you to contact your financial institution as soon as possible to inquire about canceling the card or account and removing the unauthorized transactions. You should also ask them to launch an investigation into the security of your account. Your bank or credit card company’s fraud department should then contact the iTunes
Store to resolve this issue. The iTunes Store cannot reverse the charges.

Basically, they are pushing this back onto me to deal with my credit card company on. Not overjoyed with this, but fair enough, most people thought that was what they would do. I am a bit concerned that they believe that my credit card could also have been compromised because of this. I thought that my credit card info wasn’t exposed. If credit card info is exposed through iTunes and their security is so lax, I’m going to be wary of giving them any info in the future. I’m also concerned that they aren’t saying that they will do anything to pursue the person who did this. I would like to feel that Apple actually cares about this instead of just blowing it off.

[Update 6/30/09 10:36pm]
Found these links with more info about iTunes account hacks:

[Update 7/2/2009 9:43am]
Apple (correctly) disabled my iTunes account when I reported that it was hacked. They didn’t actually tell me this though, so I didn’t find out until I tried to use it to update my iPhone apps. What did they need to re-enable it? My billing address. Where was my billing address info stored? In my iTunes account. Since that was pretty unlikely to change after a hack, it seems a pretty weak way to verify my identity. I pointed that out in my return mail, but so far iTunes support has ignored all my questions and comments in my messages to them. I guess that is policy, but also a bit lame. I also may have figured out why the hackers didn’t change my iTunes password. I did find a message from Apple in my spam folder notifying me that my password had changed (from when I changed it after getting my account back).

There was enough info in my account that I’ve had to cancel my credit card, and I’m going to need to be extra vigilant for identity theft moving forward. Since then, I’ve changed my payment method to none in the iTunes store. I may have to enter credit card info each time, but that now seems like a minor inconvenience. I have also changed all my other info to be completely bogus so that if someone does hack it again, they won’t have any useful info on me. Why does Apple need by birthday (not birth date for age verification, but birthday)? I’m going to do the same with my other accounts and would suggest it to anyone else concerned about this kind of stuff.

[Update 7/6/2010]
A year later, tons of reports of other accounts being hacked, including several on this blog. Thanks for adding your voices. Meanwhile, Apple has changed NOTHING on their iTunes security processes. They continue to push the blame and responsibility on their customers and the credit card companies. Now, there are reports that iTunes store and account hacking is not only more widespread than has been thought, but also very well organized. When will Apple take some responsibility?

Seriously, set your payment method to None now if you want to avoid having to deal with this pain. It sucks to have to enter in the data every time you make an iTunes purchase, but it sucks a lot less that having to get a new credit card because someone hacked your iTunes account. Trust me on this one.

[Update 12/26/2010]
I was buying some apps on iTunes today. I still keep my payment info set to none and my address set to my non-billing address as a rule and change them when I want to actually buy anything. It is still a massive PITA, but probably helps me avoid dumb impulse purchases 🙂

I noticed something different today, when I changed my payment and address info, I immediately got a message from Apple about the change, and then another one when I changed it back. This is new, and this is good. A trivial change from Apple, and certainly long overdue, but a very positive step.

[Update 3/22/2013]
Apple has now enabled two-factor authentication on Apple accounts. If you are worried about your account being hacked, it would be a good idea to take advantage of this. Here are instructions from lifehacker on how to turn it on.