Arc and Angle

Solution: Contact your webhost and ask them to change your ftp server to ProFTPd.

Oh my goodness, WordPress upgrades have been giving me such a headache! As previously posted in “Automatic Update Fail” I was only able to upgrade my accounts either manually or after deleting the “upgrade” folder myself. I had hoped that this would solve future problems, but with the release of WordPress 3.0.1, all my blogs were failing to upgrade (including plugin updates) giving me a variety of changing error messages saying some variation of “cannot copy /public_html/…” and it would give me a path to different files, usually ending in dev.css. After countless hours of messing around with file permissions through Filezilla and/or through the file manager in CPanel, after deactivating my plugins, after manually deleting the upgrade folder and the .maintenance.html file…I was extremely frustrated and nothing was solving the problem.

The repeated “solution” posted on several forums was to simply manually upgrade when things don’t automatically upgrade…which works, but I’m a “why” person. It bugs me to not know why something is occurring and it’s a pain to have to repeatedly manually upload & upgrade when you have several different WordPress blogs & plugins, as is my case.

The solution has been found and is resolved (knock on wood).  I had read a few forums where people had mentioned a thing or two about ftp user permissions and how sometimes there are permissions problems with your ftp server. I honestly didn’t understand it all (and still don’t entirely) as I’m not a server person by any means, but my understanding was that it wasn’t a permission issue that I was going to be able to manually change through Filezilla or the CPanel file manager  and it had something to do with dhappache user or Nobody User permissions.

On a whim, I decided to check out my web host’s forum to see if other folks were have similar issues. I found out they were, but there were no posted solutions besides the usual manual upgrade. Argh. I then checked out their twitter account and they had posted a link to a WordPress forum thread that explained this:

“From what I’m able to tell by looking at the logs during an upgrade or plugin installation, the script attempts to write to an invalid path (usually /public_html/somefile rather than /home/username/public_html/somefile) before using the correct path. It does this for each and every file, so during a major operation like an upgrade where a lot of files are involved it takes a very long time. Eventually the script freaks out and tries to access more memory than is allowed by our suhosin php security module. In most cases it attempts to access 256MB while our default limit is 32M. Suhosin blocks the script and the installation fails.”

This made sense to me because I had used an .htaccess file to increase the amount that PHP memory could use and it helped for a plugin I was trying to upgrade, but it didn’t solve my overall upgrading problems.

Long story short, I needed to contact my web host to change my ftp server so that instead of using pureFTPd, it uses proFTP. For now, whenever I want to upgrade, I have to send them a ticket (thankfully they respond quickly) and have them change it. When that is done, I do my upgrades and then let them know when I’m done so that they can change it back. Hopefully this will be fixed in the future, but for now, it’s nice to know what the problem is and how to go about easy upgrades.

I host two WordPress blogs on my hosting plan and the past few upgrades have been a pain in the arse to put it mildly. In simple terms, the “automatic upgrade” failed giving a variety of error messages. One time I was simply having permissions issues; that was a while ago and wasn’t a difficult one to fix.

The previous automatic update didn’t work, so I did it manually and that worked fine for a little bit, until I got an error message about duplicate header information. After a bit of research I found out that Dreamweaver had inserted a space after one of my php files and it was causing all sorts of havoc.

Now, the most recent update to WordPress 3.0 failed, but I wasn’t getting any error message whatsoever, just a frozen screen that said something along the lines of “unpacking core updates…”. Finally, I solved the problem…sort of.

I had to delete my wp-content/upgrade folder. I don’t know why this happens and would love it if someone does know and can explain it to me, but sometimes WordPress fails to delete the temporary files in your upgrade folder from a previous upgrade. This causes problems. So, all you have to do is go delete that entire folder and try running your update.

I was having some trouble using the automatic update for several plug-ins and that solved those problems as well. Unfortunately, I still have to go delete the upgrade folder myself before doing any automatic updates, but at least that’s easy to do and blog life moves forward.

Side Note: It’s amazing how much disk space is freed up after deleting the upgrade folder. I did it for both blogs and checked the disk space in CPanel, wow. I highly recommend you do this occasionally.

I love logos. They’re pretty. I love the constraints that a designer is given to work with and seeing how creative people can be. They look easy, but they actually need to accomplish a lot. They need to be readable. They need to communicate a feeling or an idea. They need to be unique and memorable. I think they’re fabulous little things.

I’ve been working on my own logo for a little while now as one of the first steps in designing a portfolio site. It’s usually a better idea to spend a lot of time on the logo before jumping into actually making a website because the logo needs to work with the rest of the site and can inform other thematic or color-specific choices. It’s one of those pieces that’s worth spending extra time on and making sure it’s right before going too far forward.

The reason I’m thinking about logos this Sunday is because I sat down at my elderly laptop with a cup of coffee and put on some excellent music to check out my feedly page (which for anyone that subscribes to feeds, I HIGHLY recommend. It’s a much more pleasant way of reading your feeds than Google Reader or other similar readers). I came across a Smashing Magazine article titled “Design a Print-Ready Promotional Ad Using Photoshop and Illustrator”. It mentioned BrandsoftheWorld.com as a place that print designers can go to find vector-based (easily editable) logos of tons of major corporations. It eliminates a lot of emails and phone calls trying to track down high-quality logos.

It’s an awesome place to go to just check out some logos and then, if you’re so inclined, you can download them and work with them yourself. Eeeexceeellent.

I particularly enjoyed this recently uploaded logo:

A few weeks ago I posted a blog about my ideal work environment. I ended it by saying “If I blog it, it will happen.” Well, it happened, so there ya go.

Well, it didn’t EXACTLY happen as I blogged it. There is not a a workout room (unless a nerf basketball hoop suctioned to a dry erase board counts). There’s no pool. There is not a rooftop patio, although there is a collection jar for a “retractable rooftop” which seems to have roughly $5-$10 in it at any given time. It also doesn’t have a Mexican restaurant with great happy hours and I’m completely shocked because really, what office doesn’t have at least that these days???

I got a job at a web design company that specializes in search engine optimization (SEO). I’ve been there approximately a month and have already learned a few very useful things and put into practice a lot of tools and lessons that I haven’t used in quite a while. I also have a longer list of things I want to learn better and brush up on, which is a good thing. So, all in all, I stand by that statement.

“If you blog it, it will happen.” (Or perhaps the real lesson is, “If you clearly define what you want, it helps you know what to look for and how to communicate that, which also improves your chances of getting what you want.”)

I hope you are looking forward to exciting articles about search engine optimization. Don’t laugh, I’m being serious.

Nearly every creative person I know has or wants an online portfolio to showcase their work. Web designers, photographers, painters, set designers, writers, event planners…almost everyone is using the Internet to display their work .

I’m taking a course that is meant to help students define and market themselves, and today’s class brought up a lot of great things to think about when creating an online portfolio. These are taken largely from notes I took during class, so it is a combination of stuff the teacher said or wrote on the screen and my own thoughts as I went.

Things to consider when creating your online portfolio:

• Your interface should not interfere with your work. There is a reason that art galleries have simple, plain white walls. People aren’t there to check out the gallery’s stunning vintage wallpaper and fancy woodwork; they are there to check out the art on display. Visitors to your portfolio aren’t there listen to your background music or to watch a three-minute Flash intro. They want to see your work, so let them!
• It should be easy to update. The number one way to keep a closet organized is to make sure everything is easy to take out and easy to put away. If you have to move the stand-up fan and then the tool box and lift up the guitar before you can put your folded blanket away, you’re just going to put the blanket on top of the fan. Whatever is easiest almost always wins in the end. The same rule applies to your portfolio for the same reason. If it isn’t easy to update, you probably won’t do it often and you probably won’t spend enough time making sure it looks right.
• Be aware that most visitors spend a surprisingly brief amount of time at your site. Either make your navigation load and display quickly so that visitors can browse as much of your content as fast as possible, or make sure your content is engaging enough that they will willingly linger around your site.
• Know how professional you need to be. Who do you want to hire you? Your portfolio design needs to speak the language of the industries that you want to attract. A portfolio for a web designer who builds sites for rock bands will probably have a much different feeling than a designer who builds sites for law firms. What kind of client are you interested in? Research and compare portfolios of people doing the kind of work you want to be doing.
• Be as truthful as possible in communicating your skills and what you’ve contributed to projects. There really is nothing to gain from lying. Clients are going to know if you can’t do something and it will piss them off if you waste their time and money (and your own). There’s nothing wrong with saying something was a collaborative effort; tell them specifically what you contributed and sometimes it will be a match and sometimes it won’t be. Also, if you worked on something that a client chose not to go with, it’s perfectly fine to show it. Your value comes in the work you did and your ability to explain your choices, not necessarily what a client chose in the end.
• Start Now. While you should always be striving for perfection, you should never wait for it. (Here’s a secret: Perfection doesn’t actually exist.) If you’re challenging yourself, learning and growing, then you will always be thinking of another way you can improve your work. You will probably constantly look back at your previous work and hate it because you can think of a dozen ways it could be better. That’s how it should be. Don’t let the desire for perfection immobilize you. Know when it is good enough and put it out there. Redesigns/revisions/etc can and always will happen.
• Show the human element. This is meant literally. Create an about section. Write up a short bio. Give a brief history of the company. Put up a picture. Introduce yourself in some way. There are a million ways to do it, but there needs to be a human at the other end of that portfolio. The work is the most important part, but clients don’t want to work with a complete stranger.

Any other thoughts or suggestions?

There come a few times in a budding web designer’s life when they discover something very useful and incredibly helpful and they wonder, “Why on earth did nobody tell me about this before!?” And, being the collaborative souls that they are, they think, “I will share the news with all of the others so that they too will reap the benefits of this new knowledge!”

It is then that the cold truth rises to the surface. The fact is, this news is completely geeky and the topic is completely, assuredly boring to just about everyone except our inspired little geek.

Well, lucky for me I have a blog for this sort of thing. It may not interest my loved ones and does not merit an “I made a new post!” announcement on my various social networking sites, but I know that I have an audience out there. Somewhere out in the vast hinterland of the Internet, a lone shivering geek must also be asking, “Is there another way to make my web site faster!?!?!?”

And like me, they shun the easy non-standards solutions of image maps. Like me, they have read and re-read countless articles on how to optimize photos for the web. And like me, they felt there just must be something else out there. Something warm and fuzzy, like a tiny piece of code.

Today on my journeys, I learned a few new things on topics whose keywords involve GZip, htaccess, Live HTTP Headers, and YSlow. Don’t go away! Now’s where it gets exciting!

Just about every web developer uses Firefox add-ons, especially the Web Developer Toolbar. There are two others that are particularly useful when trying to increase the loading speed of a site and for some silly reason, I never used them until today: Yslow analyzes a site’s performance based on Yahoo’s rules for web performance and Live HTTP Headers displays the live communications between your browser and a site’s server.

I used YSlow to analyze one of my sites. I got an “A” in everything except GZip compression. Huh? I did some reading and discovered that I might need to configure my server to output GZip compression. To check this, I scanned the dialog between my browser and the server using Live HTTP Headers. I saw that my browser sent this request: “Accept-Encoding: gzip, deflate.”

This is the browser telling the server, “FYI, I accept compressed files if you have any.”

The server ignored that request, meaning that it was not set-up to Gzip my content. Bah!

I have a shared-hosting plan and never realized that I have access to certain server set-up options. Web hosts who put dozens of clients’ sites on one server would be insane to allow everyone access to the server’s config file. I thought I’d just have to send them a message if I needed something on the server changed. It turns out that individual accounts may have access to certain set-up options by using an .htaccess file (hypertext access).

First, locate the file. I signed into CPanel, went to the file manager, clicked on a little check box to allow me to view hidden files, and then went into my home directory. There it was, “.htaccess”. I clicked on it to edit it and added code from BetterExplained to configure the server to allow compression output.

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

I saved the file.

I then reloaded my site and behold! The load time was four times faster! My work here is done.

For great reading, check out these articles:

• BetterExplained: “How To Optimize Your Site With GZIP Compression”
• Yahoo! Developer Network: “Best Practices for Speeding Up Your Web Site”

“An overview of PubSubHubbub, a simple, open, web-hook-based pubsub protocol & open source reference implementation. Brett Slatkin and Brad Fitzpatrick demonstrate what PubSubHubbub is and how it works. For more information, visit pubsubhubbub.googlecode.com” –The Google Code Channel on Youtube.

(Random completely irrelevant side note: I know that Brad Fitzpatrick works at Google. Is it safe to assume that some of these shots are inside the Googleplex? And what ever happened to computer nerds looking nerdy?)

This blog entry covers:

• Why it is important to use relative text sizing units (ems and percentages)
• Why NOT to use pixel units
• Why NOT to use point units
• Why NOT to use keywords
• Helpful resources

When designing web pages, you might think that choosing a font size should be amongst the easiest and quickest decisions a web designer makes: simply choose a readable pixel size and move on right? Well, that is one way to do it…but it certainly isn’t the most thoughtful, adaptable and accessible. It is, for several reasons, bad practice and anyone designing a website should seriously consider getting acquainted with the relative way of sizing text. It takes more work, but it’s a more efficient method that produces better results across multiple browsers and devices and allows your content to be accessible by a wider audience.

Pixels are not the only way to size text. The units available to web designers for sizing text are pixels, points, percentages, ems, and even keywords.

So which should you use?

Ems and percentages are considered the desirable units for sizing fonts using CSS because they avoid the pitfalls of pixel and point sizing (explained below), are re-sizable in all browsers that support resizing, AND are relative to a user’s font size preferences.

Yeah, well, computer screens display in pixels. I love pixels. Why shouldn’t I design in pixels?:

That would be lovely if everyone used the same browser, the same monitor and if we all had the same vision. We, however, don’t live in that world and good design keeps functionality at the forefront. A well-designed website will allow text resizing and will do its best to look the same across different browsers, platforms, devices, etc. The proper text sizing tool in the web designer’s arsenal is not the pixel, it is the em (with a little help from the %).

When it comes to text (and line-heights), our usual friend The Pixel, ignores user preferences and doesn’t re-size in Internet Explorer. This makes pixel-defined text sizes a bad idea when considering accessibility issues and we must consider accessibility issues. Accessibility to equal information and services is not only a human rights issue (which is reason enough), but also about making sure your code can be adaptable to a variety of devices and applications.

The resizing issue can’t be underestimated. Internet Explorer stills claims the largest audience and small text is a very real problem for countless users.

Another drawback, albeit one that I am guessing is not an issue for the majority of websites, is an inconsistency amongst browsers on how to handle non-integer pixel values (i.e. some can handle 12.5 px, while others can not). This matters if pixel-perfect sizing is desired on every major browser. I doubt designers regularly (if ever) code non-integer pixel units for text sizes, but it can accidentally happen when a pixel value is applied to a parent and a percentage or em to its child.

Ok, what about points?:

No! Don’t do it! Points were not designed for screen-based design. They are a great desktop publishing unit, but not a great web design unit. When being converted to pixels, the math is extremely inconsistent amongst different browsers. It’s a confusing explanation best left at: don’t use points for text sizing unless you are writing a print-media style sheet.

Hm, well, that leaves keywords?:

No again and I find them too confusing to explain very well, but they offer up the same issues as points regarding consistency and control problems. For a detailed explanation by someone much better at explaining these than me, feel free to read this concise explanation.

Helpful Resources:

The Em Calculator: Converts pixel sizes into em sizes

A List Apart article: Explains how to use ems and percentages to size text using CSS

After taking several computer-based design classes, I’ve come to expect at least one assignment per course to be some sort of variation of recreating an image as accurately as possible using the tools and techniques taught in class. We did this twice in Illustrator and I’m amazed at how much progress is visible between my first recreation project and my last one. The first attempt was much harder and looks much worse, BUT it was part of the learning process. I struggled to get Illustrator to recognize specific objects as selections. I struggled to get colors to work. It was a pain and I hated how it looked! HOWEVER, that assignment made me much more grateful for everything I learned later.

Early in the course, we were to recreate an image from a list of themes (being a bookseller, I chose the literary theme.) Here it is in all its glory:

original image (L), my frustrating attempt at recreating it (R)

The end of our course culminated in a three-part final project, part of which was to recreate a wine label as accurately as possible. I have to say, everyone in my class improved so much. It was awesome. We had to get each of our three illustrations printed and mounted to present on the final day of class and some of the work was simply breathtaking. I went to (risd)prints by concept link in Providence because they work with the RISD community. I had my wine label printed on a huge piece of archival paper that would normally cost about $75, but as a student, cost closer to $25. I recommend them, although they can get really backed up at the end of a school semester; I was lucky and was able to get all of my stuff done within about two hours.

original wine label (L), my recreation of the label (R)

The vast majority of the time spent on the wine label project was spent using the pen tool to create all of the shapes. The text for “Orangedale Sunflower Brand” was also created using the pen tool, but I typed in the smaller pieces of text with fonts from my computer that matched closest to the original poster fonts.

To create the shapes, I placed the original image on its own layer and lowered the opacity to somewhere around 50%. Then, I put on some good music and settled in with the pen tool.

original image with lowered opacity and the beginnings of the shape tracing

near the end of the tracing period w/ the original image turned off

larger image of my recreated wine label

The trickiest part to recreate was the center of the flower. It’d be nearly impossible to trace because it is simply too detailed and busy. My teacher asked me how I planned on doing the center of the flower, and I said I was thinking of using the symbol tool to spray a bunch of custom symbols inside of a circle shape. She told me one of my classmates was having a huge issue with his file size after using the spray tool for a similar issue (in his case, he was trying to recreate plants in a field).

I told her I’d try using a pattern instead. She suggested creating a few circle shapes on different layers with transparent backgrounds. That would create a more random detailed effect. I think it was a time-saving tip that worked pretty well. Now I have nice print that I’m going to frame and put somewhere in our new apartment.

This was one of my first “exercises” in Illustrator class. I can’t even recall the specific instructions. I think we were supposed to use basic shape/line tools, some color, a little text, and stick to only a few specific themes (I remember choosing the “spring” theme). My teacher showed us this fun little technique using the tilde key (it’s that sideways looking “S” to the left of your 1 key). If you hold the tilde key down with a shape tool selected, Illustrator will rapidly repeat the shape as you move your mouse. It can create some complex looking designs in a matter of seconds. I’m probably going to be saying this over and over again, but I love Illustrator. It’s amazing. So in the spirit of this entire blog, I am posting some of my “training-wheel” pieces.

It’s amazing to look back at the exercises and assignments I did at the beginning of the course and remember how I struggled to get things to look the way I wanted them too, simply because I wasn’t familiar enough with Illustrator to know how to do them better/easier.

On this one, I was testing out the tilde technique, the gradient window, the pathfinder window, and text on a path.