Design With Crackers

A mod_userdir problem on Ubuntu and derived distros

2010-06-07T23:35:00.007-03:00

Nobody Likes unpleasant surprises and I'm not different. The latest such surprise for me was a problem with Apache mod_userdir, namely that it doesn't work anymore as of Ubuntu Lucid Lynx.

For patronizing "security" reasons the maintainers of the affected packages thought it was valid to change the default behavior from what it was since the first release of the distribution. The precise nature of the issue is that they disabled PHP parsing for "~/public_html/". The details, along with their reasons and an explanation of how to fix it are here.

What strikes me as the worst part of this whole issue is this extremely offensive to web developers piece of flawed reasoning

"Security note: Running PHP scripts in users' home directories was not disabled for a frivolous reason -- PHP is a full programming language, and as such, can be used by attackers in nefarious ways. Ideally, the PHP engine should only be enabled for users you (the system administrator) trust, and even then sparingly."

Anyone that willfully installs the PHP interpreter on it's system knows not to run scripts written by unverified/untrusted third parties without inspecting them first, period. If you have a multi-user environment, and you want to restrict who can do such and such things, the onus is on you to implement it as you see fit. Because of this whole mess I lost an entire hour of my day:

15 minutes checking my development enviroment installation procedure, because, as Jeff Atwood says: "It's always your fault".
Another 15 minutes sanity checking all the obvious configuration files, just to discover that they are all ok.
Lastly, I wasted 30 minutes reading dozens of Google search results (mostly forum posts at ubuntuforum.org) until I finally stumbled onto the Ubuntu Wiki link.

NOTE: I'm that odd kind of guy who actually READS the release notes from an update to his OS before moving to the new version. No warning about this change was to be found there.

This is just stupid.

Long time no see!

2010-04-23T20:53:00.004-03:00

I haven't been blogging for some time now, almost a year has passed and lots of things have changed.

IE8 is now a known quantity and an IE9 preview is already available. This new version of the browser from Redmond seems to signal a new dawn for web designers everywhere, with that old dream of consistent rendering and behavior across browsers that standards bodies have trumpeted for so long finally within reach.

Google Chrome too, has been a reason to rejoice. It managed to keep itself speedy while getting almost 100% rid of the frequent crashes which cursed it in it's earlier days. The good news don't end here, because now it also fully supports Linux and Mac OS X, even bookmark syncing is already possible on Chrome, through either Xmarks or it's built-in Google syncing functionality.

I've also been through a lot in these ten months, my development setup, tool set and workflow has changed considerably too:

I no longer use SVN, I'm a total Git convert now.
I no longer edit my code on Kate. I spent some time using Aptana Studio but that was mind-bogglingly slow and not that feature rich too. I've rediscovered Gedit with a coworker and have been making good use of it since then. It's a pretty bare bones editor, but its plugins make up for it.
My use of Inkscape has dwindled a lot since I rediscovered Xara Xtreme, which means I now spend much more time on my Windows XP VM than when its only use was to run IE Collection, and the other windows browsers for test purposes.
Hardware-wise, I've upgrade my Eee PC with more RAM (2 GB now) and, when in home, I'm running it from a very fast external HDD. My dreary old 17” 1280x1024 CRT has now been replaced by a 21.5” 1920x1080 LCD.

There have been lots of other stuff that changed too (HTML5/CSS3 anyone?), but these are better left for their own posts.

It's good to be back.

For beginners: next steps

2009-06-03T06:20:00.008-03:00

Now, assuming you've already read “Designing Web Usability: The Practice of Simplicity” and studied all of HTML Dog tutorials and examples. Assuming that you've read at least 30% of what is available at Web Design From Scratch (by the way, it's been beautifully redesigned since the last time I linked to it), these are the next things you ought to do:

Read “Prioritizing Web Usability” (by Jakob Nielsen and Hoa Loranger) and “Don't Make Me Think - A Common Sense Approach to Web Usability” (by Steve Krug).

Learn to touch-type, it will pay off before you notice! There are plenty of tools around that will help you to learn it in no time, some are even web based!

Study these resources that will help you to master CSS layout techniques and other key web concepts and technologies:

Dev.Opera lovely Introduction to The Web Standards Curriculum - It's a comprehensive course on the basics and a definitive can't miss for beginners.
CSS TRICKS All about Floats - Read it and you'll "get it".
Matthew James Taylor wonderful Website layouts - Those are pure gold, study them with care, take them apart, build them again.
BlueRobot's Layout Reservoir - Those are a bit old, but they are great nonetheless, study them and feel free to ignore the references to browsers no-longer used.
Alessandro's Layout Gala - Old too, study them, don't forget to test them with care in newer browsers before using one of them.
Blueprint.CSS and 960.gs CSS Frameworks - Take your time to study those two very carefully, even if you don't plan to use them at all, since you can learn a lot by figuring out how they work. I'll be posting a list of the best available CSS Frameworks along with some commentary about each one of them, I just don't know yet when I'll do it, so keep an eye out!
Dave Shea famous CSS Zen Garden - There's a lot to learn here!

Don't simply copy & paste from the layout galleries and tutorials! Study them thoroughly and then try to redo them without looking at their code! Be careful with the temptation to keep using pre-made CSS Frameworks indefinitely, you'll never be a pro if you don't bite the bullet and go all the way through CSS layout techniques learning curve!

Study these resources about design principles and start learning to use a Vector Imaging tool, I recommend Inkscape and it's on-line tutorials are an excellent place to start! Inkscape is available for Mac OS X, Linux and Windows!

Have fun with what you're doing! If you should become bored then probably this area is not for you, since you'll be competing against lots of people which are very enthusiastic about what they are doing.

And don't forget to come back here (preferably subscribe to my feed) to discover what to do once you have completed these steps!

Cheat Sheets!

2009-04-17T01:57:00.006-03:00

Back when I was in school, teachers told me that they were bad and I would be in serious trouble if I were to be caught using one of them. Then I went to college and the professors there told me to use them, they even printed and stapled them with some of my exams! But I never thought of them as something I would be using while working with the Web.

Then, on April 2005, while I was visiting IloveJackDaniels.com (now it's called “Added Bytes”), I saw that Dave had made an PHP Cheat Sheet! At first, I didn't knew what to think about it, but I downloaded and printed it and, not knowing where else to put it, I had it glued on the wall behind my monitor. Soon after, I noticed I was typing PHP code much faster than before, my visits to php.net had diminished a lot and, thus, I was remembering much more about it than I've ever did before!

A week or so later, Dave posted another one! This time it was an CSS one! Quickly I became addicted to it, to the point that I would turn on the lights (so that I could see them) whenever I was going to code.

As time went by, I downloaded the new ones he posted and scrapped the old ones. Still, I have a set of them on the wall in front of me even today, though I don't look at them not nearly as much as I did before.

Whether you are still learning HTML, CSS, etc. or if you're already a pro, take my advice: download them and have them glued to the wall behind your monitor, they'll be invaluable.

Web Development on the Eee PC

2009-04-02T21:33:00.004-03:00

I never liked notebooks, I think they are too expensive for what they can do and also too big/heavy/fragile to be called mobile. But I needed one, so a choice had to be made.

I choose the Eee PC 900, from ASUS because it isn't expensive, or big, or heavy, or fragile.

So I guess this is why they had to come up with a new name (netbook) for devices like this one.

Before you call me crazy for doing all my work on an Eee, let me tell you that I do have a much bigger monitor at home.

Small as it is, so far the Eee has met and even surpassed my needs as a web developer. Here's why:

The 8.9 inch LCD has a wide-screen resolution of 1024x600 and a dpi of 133.3. This means that most websites will fit quite nicely on it, since most people out there still doing fixed-width layouts optimize either for 800 or 1024 horizontal resolution, and that they are also easily readable.

The keyboard is small enough to be ultra-portable and still is (at least for me) big enough to be quite comfortable while touch typing. In fact, it took me little over an hour to get used to it!

The Celeron M 353 Ultra-Low-Voltage processor (900 MHZ) coupled with 1 GB of DDR2 memory and Intel GMA integrated graphics (915 gm chipset) makes it more than fast enough to handle my LAMP development setup along with a couple browsers open and more (Amarok, Kate, Krita, OpenOffice, Inkscape, Gimp etc.). The integrated graphics actually run KDE4 desktop effects nice and smooth!

The SSD devices (4 GB and 16 GB respectively) have more space than I need to work. I've installed Kubuntu 8.10 along with all the applications I wanted in the faster 4 GB SSD and still have roughly 400 MB left on it to spare. The 16 GB secondary SSD still has more than 10 GB left even after I copied all my work and most of my personal files to it.

The Wi-Fi and Ethernet connections are excellent and I've also used an USB 3G modem (HUAWEI E156) for long periods without problems.

Last but not least, I've got mine with a 5800 mAh battery which gives me, usually, almost three hours unplugged from the mains.

All in all, I'm very pleased with it, and I think I'll be using this one for a long time.

First impressions on IE8

2009-03-20T01:52:00.003-03:00

So, Windows Internet Explorer 8 is out. As is Google Chrome (In the sense that it is not a beta any longer).

I tried both today and here are my impressions on IE8:

It features better standard compliance, especially when dealing with CSS, but it somehow managed to misunderstand the CSS for the title of this blog, so I changed it even though it worked well in every other browser I tested.

The interface has grown bigger and now it takes an awful amount of the screen real-state for resolutions up to 1280x1024.

Fonts look weird. Some kind of font-edge enhancement must be the culprit, I just couldn't find where to disable it (if it is at all possible) in the five minutes I spent trying.

In the end of the day it is, still, the same old IE, the bad boy in the arena.

What about Chrome? It did not crashed a single time while I was testing it(about 45 minutes). It is as fast as it can be and it does not crashes every once in a while! I'm impressed. All it lacks now is a proper Linux port. That and Firefox extensions...

For beginners: self-education

2009-03-19T11:13:00.004-03:00

You might be wandering, if you've read my latest post, how and where are you supposed to learn all that?

Here are the answers:

Web Design From Scratch, by Ben Hunt. This should be your start point. You can't have read enough if you didn't read it all.

HTML Dog, by Patrick Griffiths. Read it all, from the beginners tutorials, even if it seems too easy at times, don't jump the basics! You'll regret that later on.

And, of course, my blog, where you'll be getting tips like these and even more links to excellent learning resources!

For beginners: my number one tip

2009-03-16T21:31:00.003-03:00

People often come to me with these questions:

How do I become a web designer/developer?
Do I need to have a Computer Science degree, or perhaps one in Design (as in design for printed media), or even both?
What should be my first step?

My answers:

To become a successful designer/developer, one needs to study the right stuff a lot, and practice it a lot, there is not much more into it.
No, see some of the reasons why here.
Read Jakob Nielsen's “Designing Web Usability: The Practice of Simplicity”.

The number one tip I mentioned in the title of this post?

Begin by concerning yourself with what you should do, only tackle the how part once it's clear to you what your clients need from you.

What to do? Create usable, accessible and compatible websites that are both visually appealing and engaging to its users. The keywords that should be roaming your head are Return On Investment, Conversion Rate, Optimization, and others alike!

How to do that? By learning and applying XHTML, CSS, Javascript, PHP and MySQL first. Other technologies (such as Ruby, Python, etc...) should come later and only when you have weighted their pros and cons for the type of services you'll be doing by then.

There are some details you should be aware of during this process but I'll leave them for other posts.

Good luck!

Minor fixes and gradual improvements

2009-03-12T13:24:00.007-03:00

All too often people loose great opportunities because of their perfectionism.

For a long time, I've been suffering with this and I've decided that I can't afford this no longer. So, when I was designing this blog, I took the approach of “implementing it first/improving it later" and I can say that I'm very pleased with the results. Just about every day I do minor changes in the code and images for this blog and test them in several browsers. So far this has led me to a gradual improvement model which hasn't brought me any problems.

Now, I think I'm confident enough to apply this new approach in my clients work and I think you should too, if you don't do it already.

I'll probably be coming back to this point a few posts later to tell you all about my results and new findings on this topic.

Flags and alternative versions

2009-02-28T02:33:00.001-03:00

Ever since I came up with the idea for this blog, I've decided to make it bilingual. I'm fluent in both Brazilian Portuguese and English so this was clearly a good way to broaden my audience.

After much consideration, I've chosen to place the alternative version link as the first one in my link list. To make it look more prominent, I thought it should have one of those little flags right beside it. Since I had already seen some nice flags in my BitTorrent client of choice, KTorrent, I went after it's docs to see where the developers grabbed them. Here's the link, the ones I'm using are from the world 25x15 pixels set. These are licensed under Creative Commons. They should come in handy whenever you need to have multiple language versions of a site.

Making the Template

2009-02-18T11:41:00.002-03:00

Designing the Template for this blog was a nice experience and I want to share with you some of the details from the process I used.

The first thing I did was a sketch of how it should look like with paper and pencil. This is great because it allows us the freedom to come up with said sketches quick and to scrap them even quicker if they don't come out quite as we expected, or if we just changed our mind in the middle of it. Afterwards, I did a mock-up design on Inkscape, which I used to test the colour scheme I choose and the general sizing of things. Then I moved to the actual coding and image crafting taking these steps:

I selected the classic Template type on Blogger dashboard and downloaded a copy of the default template, which I then stripped bare of all Blogger tags(such as BlogItemTitle ) and everything between the curly brackets of the CSS rules.
I pasted the usual Lorem Ipsum placeholder content and self-referencing links on the code so that I would have something to apply style to.
Then I started writing the CSS rules and debugging them on the fly with Firebug(lovely tool, by the way; consider getting it if you don't use it already).
Every once in a while I checked the layout on a stack of browsers(including, of course, IE from 5.0 to 7) and made sure it validated on the W3C Validator.
I decided which images were needed and began work on them.
When I had a working prototype which validated both XHTML/CSS-wise I began work on replacing the placeholder content and links with the appropriate Blogger tags.
As a final step, I uploaded my design back to Blogger and ironed out the last few bugs that showed up at this stage.

Sounds easy huh? Well, not quite so. For starters, there is the Blogger generated code validation problem. Up until the part where I was making the images for this blog, everything was fine validation-wise. Then, as soon as I had inserted the Blogger tags and made the first test by URL on the W3C Validator, it stopped validating. It seems that most of the code that Blogger inserts into the template is non-standard. There's not much I can do about it, so I've decided to just live with this. There's also a few details I rather talk about in another post, since this one has become quite big already.

So now, what?

I'm thinking about using what I learned by doing this template for creating free Blogger custom templates. So expect me to eventually be posting a link to my new Templates blog!

First One

2009-02-13T15:23:00.001-03:00

Hi, I'm called Thiago, and this is my new blog on Web Design and Development. Here I'll be writing some articles about the techniques I use on my own designs. I try to focus on Usability first, then on Accessibility and Multi-Browser Compatibility. I always code by hand, and as matter of fact, the last time I used a WYSIWYG web editor was back at the Netscape Composer 4.8 times.

My current tools of choice for design and development are:

Kubuntu Linux – My OS
Kate – Text Editor
Inkscape – Vector Image Editor
Krita and Gimp – Raster Image Editors

Feel free to comment, especially if you find any grammatical or code errors.

Hope you like it!