Everything In Between

For those of you who don’t already know, I’ve been a blogger over at SitePoint for a few months now. Today, I’m even happier to be a participant in the SitePoint community because, for a limited time only, SitePoint is offering the sale of the century: buy 5 SitePoint books for the price of 1. Every last cent of the proceeds from the sale of these books will go towards relief efforts for the recent Victorian bushfires that have claimed over 300 lives and are among the worst fire disasters on record.

The books are full-color PDF downloads, and include some really awesome titles. These are precisely the kinds of books you want as PDFs, too, since you can search through them and always keep them with you while you’re coding and looking for inspiration or a reference (even when you’re without Internet access). I couldn’t help but pounce on this deal, and I’m now the proud owner of the following books, which have all received some pretty great reviews:

• No Nonsense XML Web Development With PHP
• Build Your Own AJAX Web Applications
• The Principles of Beautiful Web Design (on Raena‘s recommendation)
• The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
• The Art & Science Of JavaScript

In just 3.5 hours, SitePoint has managed to raise over $15,000 AUD, according to employee Kevin Yank on Twitter. And that’s just on this side of the world. All my North hemisphere friends were asleep when this was announced, but not to worry. SitePoint’s sale will last until this Friday, so there’s plenty of time to take advantage of it.

Obviously, I think you should do so. Not only are you getting some really quality content and helping disaster victims at the same time, you’re also sending a loud and clear message that companies whose humanity outshines their accounting are the ones you’re going to support. I’m thrilled to see that SitePoint is one of these human companies, and ever more thrilled to be a part of it.

Clickjacking or, more formally, user interface redressing, is a class of security vulnerabilities similar to phishing scams. The technique uses web standards to trick unsuspecting victims into performing actions they were not intending to.

Clickjacking does not rely on bugs in any software. Instead, the technique is simply an abuse of the growing graphical capabilities that advanced web standards like CSS provide to web browsers. A good introduction to clickjacking is provided by Steve Gibson and Leo Laporte on their Security Now! podcast.

As far as I’m aware, only Firefox when combined with the NoScript add-on and Internet Explorer when combined with the GuardedID product provide any measure of protection against clickjacking attacks. To date no other browser can detect, alert, or otherwise help you to avoid or mitigate the risks of clickjacking attacks.

That said, there’s gotta be something users of other browsers can do. Well, it may not be as much as what NoScript can do, but there is something: use a user style sheet to help expose common clickjacking attack attempts.

clickjane.css helps detect clickjacking attacks for all browsers

Until browser manufacturers provide built-in protections against clickjacking attacks in their software (which is arguably the best place for such logic in the first place), I’ve started putting together a user style sheet I’m calling clickjane.css that attempts to instantly reveal common clickjacking attempts. Since it’s a CSS user style sheet, this approach should be cross-browser compatible so that users of any browser including Safari, Opera, and other browsers that don’t have other means of protecting against clickjacking attacks can use it.

I’ve only recently learned about this class of exploits and so I’m not supremely well-informed on the topic. As a result, the clickjane.css file is relatively sparse and currently only reveals what I’m sure is a small set of clickjacking attmpts. However, as I research the topic further and learn more about the actual underlying HTML and CSS that clickjacking uses, I’ll be updating the clickjane.css code to reveal those attempts as well.

Naturally, contributions and assistance in any form are most welcome! Learn more about clickjane.css as well as how to use it at the Clickjane CSS Github wiki.

Before and after clickjane.css

Here are two example screenshots of a benign clickjacking demo.

1. Before:
   

   Screenshot of Safari before clickjane.css is used to expose clickjacking attempts.

2. After:
   

   Screenshot of Safari after clickjane.css is used to expose clickjacking attempts.

Good habits you should get into to mitigate clickjacking risks

Here is a list of behaviors that you should make habitual while you browse the web. Engaging in these behaviors can dramatically reduce the likelihood that you will be victimized by a clickjacking attack.

• Explicitly log out of any service you have logged in to when you are done. That log-out button is there for a reason: use it!
• Avoid providing your browser with “Auto-Complete” information for critical sites, such as your bank.
• Make sure you are running Flash Player 10 or greater, which mitigates this vulnerability for Adobe Flash content.

More resources to learn about clickjacking

• Hackademix.net – More clickjacking links to the OWASP presentation, the white paper, and a blog post showing several CSS-based exploits.

Last month, 37signals published a short but sweet post about why web designers should do the HTML/CSS implementations for their own designs. The bottom line is, as we’ve all been saying for a long time now, that the Web is not the same kind of medium as other mediums like print. It is a fundamentally different kind of canvas than most web designers are used to using. As a result, if you as a web designer are not intimately familiar with it, you’re not going to do great work.

designing for the web is a lot less about making something dazzle and a lot more about making it work. The design decisions that matter pertain directly to the constraints of the materials. What form elements to use. What font sizes. What composition. What flow. Those decisions are poorly made at an arm’s length.

I’ve worked with many web designers in the past who only did abstractions and then handed over pictures to be chopped and implemented by “HTML monkeys”. It never really gelled well. The things that got strong attention were all the things that Photoshop did well. Imagery, curvy lines, and the frame. All the around stuff, never the it stuff.

In other words, to do great web design you have to design in the Web, not in some other medium for the Web. I mean, serious magazine firm employs designers who don’t understand how to work with page layout programs like InDesign. Why, then, do so many web design agencies employ designers who don’t know how to work with web technologies, or even how to use programs like Dreamweaver? It doesn’t really make any sense, and it’s no wonder that the resulting implementation is rarely top-notch work.

But if you’re a graphic designer who doesn’t know much about Web technologies, what are you to do? Well, as a first step, I think you should pick up my new book, Foundation Website Creation. It’s available from all good booksellers (and probably some crappy ones) as of today. The book is targeted towards all manner of web professionals, including graphic designers and website producers, who want to learn more about what it takes to actually implement a site.

If I do say so myself, the chapters on XHTML and CSS are exceptionally thorough. The book doesn’t try to turn you into an exceptional programmer. Instead, it will explain the foundational concepts you need to know to understand how XHTML and CSS actually work, and in so doing will enable you to use the tools you already know to solve problems and get things done.

I think this book will be an excellent starting point for lots of designers and other web professionals. However, it is not going to take you from zero to hero—no book can. That’s why I recommend that, after you read Foundation Website Creation and have a solid grasp of what the technology can do for you and how it actually does it, you next take a look at these excellent books:

• DOM Scripting by Jeremy Keith — if you’re a designer that needs to add a behavioral layer with JavaScript and Ajax to your pages, you need to read this book next.
• Mastering CSS with Dreamweaver CS3 – if you’re familiar with Dreamweaver and want to keep using it to create standards-based web sites, then I recommend you follow Foundation Website Creation with this book by Stephanie Sullivan and Greg Rewis to take your Dreamweaver skills to the next level.

As always, most of all, have fun. Because if you’re not having fun, you’re not going to make good web sites no matter what you know.

Note: As of this writing, the book listing on Amazon still publishes the wrong author list, which is very frustrating but out of my hands. At least the image of our book’s front cover lists the correct authors.

For those who have been wondering what is keeping me so busy these days, the answer is that I’m working on the final stages of a book that is getting published as one of three co-authors. Not only am contributing three chapters (the technical chapters on (X)HTML and CSS, specifically), but I am also technically reviewing the entire book.

My co-authors on the book, called Foundation Web Standards Foundation Website Creation (you can pre-order now) and published by Friends of ED, an Apress company, are Jonathan Lane of Industry Interactive, Inc. and Joe Lewis, who blogs at Sanbeiji.com. I’m not going to say much more until after the book is released in late July.

For the eager, here’s the description of the book posted on the Friends of ED website:

Foundation Website Creation explores the process of constructing a web site from start to finish. There is more to the process than just knowing HTML! Designers and developers must follow a proper process to flush out goals and objectives and determine requirements both prior to, and during project development.

Large Web projects are rarely completed by a single person. Producers, project managers, designers, developers, writers, and editors all play critical parts in a project’s evolution. This book provides an overview of the entire process, and also shows project development from the perspective of these different roles. It introduces the key concepts and duties performed by every member of such a team, and gives you the skills necessary to tackle projects like a professional.

It’s quite exciting getting a book out, and it’s quite a bit more work than I’d have ever originally thought. That being said, it’s extremely rewarding. There’s a lot more work I need to do on it between now and the time it gets released to publishing, so, well…back to work I go.

Now you all know where I’ve been spending my time writing.

I’ve been told that not updating this blog is an unacceptable use of my time, so here’s an obligatory “Here’s-what’s-going-on-with-me” update. The short answer: a lot! The long answer is the rest of this entry.

Necessity Necessitates Invention

Shortly after returning the apartment to a liveable state, I met with a man I had first been introduced to at an NYPC Web Design meeting I attended some months before my road trip. We met to finally put into action a plan we’d been working on before I left for the summer. I was to provide a kind of special consulting and tutoring service on all things technical and help him and his business grow with the use of technology. Put simply, it’s rather like an elaborate friendship which is centerd around teaching him how to better use technology in the whole of his life, including his photography business.

So needless to say, I’ve been spending some of my time with him discussing technical things, showing how to use computers in various ways, and advising on what I think the best course of action is for him in regards to his technology requirements. In the mean time, I’ve also been doing some research on digital printing and scanning and looking for ways to improve my own photo manipulation and creative skills with programs like PhotoShop.

One of the things I needed to create for myself after starting this tutoring/consulting work is an easy way to keep track of and calculate how many billable hours I’ve worked with him. It occured to me that the simplest way of doing this might be to use iCal, Mac OS X’s built-in calendaring program, since I already use it to keep track of the appointments I have with him. After some brainstorming, I came up with a very simple PHP script that parses an exported iCal calendar (that is, a vCalendar 2.0 [aka iCalendar] formatted file), grabs all the appointments with a certain special note in them and adds up all the billable hours at whatever rate was set. I’m still adding to it piece-meal style, but eventually I hope to use it as a primary means of keeping track of per-hour billing appointments.

At the moment, I’m imagining some sort of AppleScript-based automation to keep the whole system glued together (at least on Macs), though I’m not sure if that’s what will end up happening. Either way, it’ll give me an opportunity to learn some AppleScript. I’ve been wanting to learn more about it ever since I discovered Terminal’s osascript command.

Hard-Up for Hardware

Another major thing going on for me right now is that I’m intensively studying about computer hardware and looking for as much hands-on practice replacing, repairing, and troubleshooting hardware issues as I can. The recent abysmal string of computer failures that I’ve experienced has left me feeling rather helpless and to combat that feeling I’m trying to fill in all the weak spots in my computing knowledge. That means I’m boning up on my hardware skillz, since they were pretty weak.

I’ve purchased a replacement logic board for my iMac DV (that’s what the folks at Tekserve told me was wrong with mine when I brought it in), and intend on attempting to replace it myself. In the mean time, I’m going to grab the hard drive from the iMac and put it in an enclosure to use as an external hard drive for one of my other PowerMac G3 towers. (Hey, why not?)

In a funny way, all of this couldn’t have come at a better time. At around the time when the dust in my apartment was settling, I had a phone interview with an Apple retail staffer looking to hire people to work as Mac Geniuses at their new Apple Store’s Genius Bar in midtown Manhattan. I think the interview went pretty well; he seemed excited to be talking with me and invited me to the initial group interview sometime in the middle of December. The only points to be made was that the Mac Genius position had very little to do with software or web development (the thing I’m most comfortable doing) and a lot to do with hardware and software troubleshooting.

Studying more about Apple hardware would be required learning for the Mac Genius position. This gave me yet another reason to dive right in and get a hold of some AppleCare Technician Training. My dad was generous enough to give me this as an early Christmas present. I’m expecting it to arrive sometime tomorrow or the next day.

Backups for Everything

Even if I don’t do well enough to be hired by Apple, I’m really excited to be studying about Apple hardware and taking the AppleCare Technician Training course. It’s a prepatory course for taking the ACDT tests, which I intend to eventually take whether or not I’m employed by Apple. One reason for that is because I want to prepare myself for the possibility of making money with this newfound hardware knowledge. Something that’s been on my mind for quite a while in various forms is the idea of a tech support side business. Over the summer, I finally chose a name for that: Mayday Tech Support. I’ve already gone ahead and got the domain name (maydaytechsupport.com) and hopefully sooner rather than later I’m going to merge it under the Maymay Media umbrella. Naturally, a web site is forthcoming.

Anyway, all this hardware training can now be put to two good uses. If I get hired by Apple as a Mac Genius, great! If not, I’ll still have the AppleCare Technician Training and will take the ACDT tests, which I’m sure will come in handy for Mayday Tech Support.

Backburners On High

Most everything else is on the backburner right now, but the range is still turned up high. I’m working on programming the back-end to a site my father’s gotten a contract for, I have a meeting with another client who needs help with their ASP.NET web site, I’m still pursuing a Doing-Business-As certificate for Maymay Media, there are countless chores around the house that are slowly being done, the web site for Deux Amis Designs is in the works, I’m reading two new excellent books (The Pragmatic Programmer and The Art of Deception by Kevin Mitnick), and still found enough time to spend a good chunk of the weekend with family.

So, yeah, that’s what’s going on with me.

Tonight, I’ve finished preliminary work on switching the Maymay Media site over to its new design. Things are still a little shaky right now, so expect the dust to get kicked up again before it has too much of a chance to settle. The weblog is still using the old design, but the other sections are brand new.

Again, some things are still being worked on, but I wanted to show the new face of Maymay Media as soon as possible.

After quite the ordeal over the last two days, the Web site for Sapphire Group, LLC finally launched today. It marks my first work-for-hire Web site that launches (semi-)publicly.

During the process, I found myself scrambling to learn as much as I could about DNS entries across the Internet. Did a lot of reading over at Wikipedia about it and had to communicate and translate some of the technical aspects of how to achieve what we wanted to both tech support folks and business folks alike. In the end, though, the biggest lesson I learned is that proper previous planning prevents piss poor performance. (Thanks, Char!)

On a side note, I’m really happy to see HBX Networks’ free shell project back online after a lightning strike took out Nova, their old server.

Sandor Szenassy is an awe-inspiring artist who is most widley known for his series of paintings of boxer’s heads. Today I started and completed a project which takes his web site and transforms its old, bloated code requiring JavaScript rollovers and was entirely composed of images in a table and made it accessible.

The new version uses only the main pictures and optimized versions of the interface image elements, adds a range of accessibility features — most important of which are descriptive alt text for the images — and uses CSS for the visual design.

As Sandor says, "I wanted to produce a body of art of monumental ambition which, though extreme and uncompromising in its formal language, would be as accessible to ordinary people as to the cultural elite." Now, I am proud to inform him, his Web site truly echoes that sentiment. You can read more about it at SandorSzenassy.com’s Accessibility Statement.