Affyn’s been released! Previously Affinity, this theme has gone a name change after an unfortunate naming collision. Affyn is a free WordPress theme with a clean yet grunge design, a modular form of widget layout that allows for mason-like layout in the footer, and other great features that make it a great WordPress theme.

What’s with the wait?

I’d like to apologize for the eight month wait game I have been keeping everyone in. I promise that it was not a publicity stunt nor a cheap way to get more visitors, but rather an inconvenient mix of time constraints and other tasks. I’ve been lately working on writing as well as starting some other large-scale and small-scale projects.

I made this problem even worse. I had originally checked for naming conflicts in November 2009. RocketTheme released a theme called Affinity in January of 2010. They are commercial and larger and it has forced me to undergo a name change so I won’t have to fight for the namespace.

I asked my followers on Twitter what the new name should be. I’d like to remind everyone that I value every comment and tweet that is addressed to me (@bradr) and employ TweetDeck to catch them all. I appreciate everything.

Where can I get Affyn?

You can get more information on my WordPress page.

Download it here: Affyn download from BW servers.

• Changed default setting of Custom Font (Cufon) to off.
  More people than I expected use an alternate language that the font file didn’t support, and a lot of people report having problems with this in Internet Explorer. I’ve changed the default to off.
• Moved RSS logo to right, removed on hover effect.
  I’ve moved the RSS logo more to the right so it doesn’t interfere as much with the name of your blog. I’ve also disabled the on hover effect because I don’t like how it looks.
• Changed default Twitter logo, now options available.
  I’ve changed the default Twitter logo to one by Komodo Media. The older one is also available for selection through the Theme Options interface.
• Removed default fluer-de-lis.
  I never really liked how the thing looked. I’ve removed it for now.

Available for download on the official WordPress servers or through my WordPress page.

Working late the night before Thanksgiving, I wanted to release Affinity on Thanksgiving Day. It featured grunge touches without losing its elegance, focusing all the attention on your content. But it’s not here.

Affinity is not complete yet. I really wanted to release it on Thanksgiving Day, and as such, many features are missing. I decided to wait until I finished those features before I released Affinity to the public.

Features to be implemented:

• Widgets. Widgets will be implemented to appear at the footer in three columns, each can fit one widget (of course, you can put more, but that would look funny).
• Options page. An options page to edit text, information, etc.

Right now, the lack of widgets is a biggie. The rest is almost complete. When I get more time, I will finish that up. Just a quick heads-up: Affinity is almost here. Don’t give up hope.

Update: Affinity’s been released (it’s now called Affyn). Check the newer entries on this blog.

How did you learn web design? For years, I’ve been asked this question. After being featured on Lifehacker, I’ve received an influx of these questions.

I have developed an unspoken method of learning that has helped me learn six programming languages and hundreds of applications like InDesign or Photoshop.

With these tips, you should be able to learn anything. Most are programming-focused, but you should find that they work with many things in life. In addition, you’ll be able to gain knowledge quickly and with results.

Without further ado, I present my methods.

Find (or create) a project to work on.

To learn PHP and MySQL I created a online website that complimented a school magazine I was working on in third grade. Though it was stupid not to use a CMS, I gained valuable coding advice. To learn CSS, I upgraded that website to run off divs instead of tables.

Later on, I told my friend I was going to make a website for him, and I started to learn jQuery and JavaScript. The point of the story? Learning always works best when you have an application. If you don’t have a portfolio yet, make one! If you want to learn, find a friend and imagine you are creating it for them.

If it’s learning a program, bring it up and start staring. Try basic controls. If this doesn’t work (for example, I was completely lost when it came to InDesign’s interface) then Google is your friend. Simply Google whatever it is and you should find it very soon.

Find a friend (or a community) to support you.

Sometimes lone coders don’t realize how much the help of a friend can be. When you’re someone like me who is arguably at an age where most people don’t… code, then every friend that loves to code can be amazing to you, for example, my friend Kevin who has supported me, or my other friends who’ve never laughed at me for loving programming.

If you’re lacking on the social side, create something for the community, like a WordPress theme. Submit it to directories. People will most always begin to email you with praise or questions, and you will begin to feel loved. I did, when over fifty people emailed me with praise or questions about Stunning Silence.

When making something for a community, it is best to exploit a community full of people and love. For example, without knowing it, by making a WordPress theme I was creating something for a thriving community.

Things like CSS templates, while useful, will probably not generate such a response. When making your creation, remember to submit it to directories so you will get recognized. It’s a win-win situation: you get appreciation and they get an amazing theme.

Contribute to forums.

When you’re lacking knowledge and need to find out something fast, submit a question to forums. You will be able to generate quick answers to your questions when you post them.

Remember to pick a forum that is thriving. In the past, I have used several forums. Since my questions are mostly focused on the programming / computing areas, I have found Stack Overflow (programming) and Super User (computing) most helpful.

When you post a question, you may be helping others. But don’t just post questions for others to answer. Remember to contribute to these forums as well by answering questions. For places like Stack Overflow, whenever a person asks a question, reply with code bits.

By helping others, you will be learning too. Each question can be considered as a mini project. With this in mind, although you are not building your portfolio, you’re building your knowledge. In addition, when you make a mistake, others will be quick to point them out. You will learn much.

Apply pressure to yourself.

If all else fails, give yourself a time limit. If you’re a freelancer, treat your learning as a time-tracked project. Since you should have found (or made) a project, simply count this project as work.

Track time on your learning. Make sure you’re not wasting too much time on something. However, this being said, there is a difference between wasting time on something and understanding something thoroughly.

Write down what you’ve learned in a Google Docs document or a notebook. It doesn’t matter where it is as long as you write it down. It will help you learn and it becomes a helpful resource in the future.

If you’re feeling especially ambitious, blog about it. By blogging, you’ll let other people know you’re learning. Provide helpful tutorials to those who like tutorials. While we’re on the topic, please make suer you are not following tutorials when learning. Tutorials defeat the purpose of creativity. Make your own.

And last but not least, collect examples of good work. If you’re a graphic designer, collect examples of good art in an Evernote notebook or an actual notebook. When I see a cool logo, I will usually take a screen capture of it and save it in my Evernote notebook.

When you have time, look through your collections. They provide great inspiration. In addition, instead of staying on the computer, take a walk outside. It will relieve your head when learning. When you come back, you should find that nature has soothed your mind.

–

Please bookmark this resource if you liked it. I thrive on your compliments and comments. If you have anything to add, let me know.

Photo credits: pagedooley, chitrasudar, 1Happysnapper.

1. Sizing (width, height)
2. Positioning (position, z-index, float)
3. Padding and Margins (padding, margin)
4. Typography (font, line-height, text-decoration)
5. Color, Background, Opacity (color, background, opacity)
6. Borders (border)
7. Content Specific Settings (list-style)
8. Usability Hacks* (text-indent)
9. Miscellaneous

Bookmark this page for easy reference. Let me know how it works out for you!

Good design is timeless and just simply so important. When you visit websites like CNN.com or a design blog, you simply don’t realize how important the role of the design is. It is the unspoken warrior, not overtaking your content but rather pushing it forward.

Recently GeoCities shut down, and a portion of the Internet shut down with it. It represents the loss of millions of table-based websites, the final whisper of even more websites with bad graphics and cheesy animations.

So one would think that in this age, for a major company or a major website to not hire a decent designer, not take the time to design, not take the time to think, it would be insanity, would it? Akin to selling Lamborghinis from behind a McDonalds?

So why is it, that as a student, I have to deal with bad design all the time? It’s one thing to see WordArt in a fellow classmate’s PowerPoint (I spoke out on that), but to see this on a major websites?

That’s ridiculous, and it makes me mad.

Our school recently introduced Gaggle.Net, a email service for students that supposedly alleviated all the problems of traditional email for students by having a hyperactive spam blocker which automatically forwards emails to teachers. It costs our school district over $50,000 a year, not to mention teacher training costs.

Words on the FAQ are mispelled (pun intended). The home page looks like something out of the 1980s. Each student gets an amazing 100 megabytes of storage. The logon process redirects you (quite visibly) through four pages before finally settling on a page that takes forever to load.

Lets compare this to Gmail: no ugly design, a brilliant interface, over seven gigabytes of storage, chat, storage, archiving, labels, and it’s free. It’s no surprise all of my friends (me included) have Gmail accounts.

Do you, school administrators, honestly think that students will choose your poorly designed systems over something like Gmail or Facebook? When people were surprised on the amount of under-13s that use social networks, I rolled my eyes.

Then there’s our school library catalog and our county library catalogs. The interface is built on tables, the Back button never works, if you scroll down while it’s loading when it’s done loading it’ll jump you back to the top, and all these other little things that add up to a ridiculous user interface.

Why? Why can’t they take the time to redesign? Now is the time to redesign! It’s the change of the century, and if you leave yourself behind, there’s nothing you’ll do one day. You can complain about the cost it’ll take to update your interface, but if you don’t, the cost is even greater!

I took a few minutes to make a quick mockup at what a catalog I design might look like. If a twelve year old can do it, why can’t a dedicated team of 30, all from a design agency, make a mockup and implement it? I wanted to make this into a user-style script for anyone stuck using SirsiDynix catalog systems, but it isn’t worth the time making a table-based layout look better.

Please.

The time and money invested into making a quality design is always worth it. It’s why graphic and web designers still exist. According to WDW, 24.2% of users care about design. 51% care about slow load times, and 25% care about poor text. The catalog systems I use fail at all three.

If one does not place time and effort on design, then in the end, you are doomed to fail. MySpace and countless websites have demonstrated this. So why is it that companies who roll in dough can’t put a little bit of that back and make a nice bread?

soul log does not employ any sort of advertising. I experimented with Google Adsense as well as networks like Entrecard but they never really worked out. I have several widgets on the page, notably a page view tracker (for public view), a private Google Analytics tracker, and a Maps Among Us visitor map.

I examined the source code but there was nothing interesting. Then I decided to inspect the page, and, tada, I found two scripts in the header, added using document.write() or some other devious method.

One of the scripts was a copy-tracking script, and the other… a advertising injection script. I had added neither, so I began to turn off and on different widgets on the sidebar, and what was the result?

Maps Among Us.

I always thought it a good company so I disabled all other scripts and sure enough, it was MAU. I fired off an email to their team but have received no reply.

What does this mean?

It’s sad how outsourcing can do this kind of thing to our sites. When we put your JavaScript script link on our websites, its because we trust the companies who have made these scripts, and it disturbs me how companies have decided to abuse this trust.

Admittedly, not all companies practice such behavior, but when one company does so it hurts the entire swarm. I ended up removing all script references on my page other than that of my own and Google Analytics.

Don’t abuse our trust. Because users, clients, customers— they are your source of power, revenue, and everything. Without us you are nothing. What would be smarter: maintaining a set of good customers or abusing their trust and injecting advertisements?

The truth is, if you can find no other source of revenue, then you should have thought out your business plan more thoroughly. Only a small number of companies (say, Twitter) without a very good source of monetization eventually work out.

Ending the story: solving the conflict.

After contacting the Maps Among Us staff, they alerted me that this was not something they had intended to happen; apparently some “partners” are given access to their user base. It’s wonderful to know that companies I don’t know can inject code onto my website.

In addition, they told me that the copy-tracking script was an intended feature: they were planning on rolling this out to all their widgets.

Now it’s wonderful that they provide copy-tracking… if they were a copy-tracking company, that is. Truth be honest, I can’t stand it when companies add “features” I’ve never wanted.

The official response from the team:

We are always looking to provide new and exciting stats and we feel that this will be one of them, once we get it fully launched on the stats pages. whos.amung.us is a suite of stats, using any of our widgets gathers all the stats, for instance putting our real time user counter widget or a map widget on your blog both collect the same set of stats – as you can see when you click on your map – there is more then just a map being displayed, historical data and a list of who’s on your site are also available.

When you do push this out, please give your users the ability to turn this off. In the meantime, the maps widget is staying in the inactive area.

Photograph Lara604.

All of these methods work but they all have caveats, and there is no method that can be used that will, in effect, not have caveats. By far the most usable method is the JavaScript method as it allows the user to select the email, but the downside is that JavaScript has to be enabled.

That’s why when I found out about <bdo> I was surprised people weren’t using it more. I hope with this blog post to be able to alert people to this usage, and perhaps, give myself more insight on this practice with your comments and such.

What is <bdo>?

<bdo>, in layman terms, is something you wrap a block of text around to change the direction of text. It only applies for this little area, which makes it incredibly helpful to use.

For example, if I were to reverse the word test backwards, I would use <bdo dir=”rtl”>test</bdo> and the result would display as tset, which is test backwards. Similarly, if you were in a right-to-left language and you needed to type something left-to-right, you would use <bdo dir=”ltr” />.

This practice isn’t used much, and spam bots usually don’t pick up on the use of <bdo>, making it useful for obfuscating information to deter the recognition of them by bots.

What are the uses for <bdo>?

There are many uses for <bdo>. When I learned about <bdo> I gradually incorporated this into my websites (I like to call it my “network”). Right now, I’m using it for:

• Email addresses. By typing in your email address backwards and wrapping it with <bdo> you can make your email address hidden. The downside is that the email address cannot be highlighted (or rather, it can, but the result will be backwards).
  This is the method I use (at the time of writing) on my contact page for users who do not want to use the contact form. I recommend it only be used for email addresses relatively short or easy to type.
• CAPTCHA questions. In an effort to simplify the interface to my contact page, I removed the reCAPTCHA and replaced it with a simple math question, “What is five minus two?”, wrapped in <bdo>.
  While this was probably not the most secure method, it works. I frequently change the question, and so far there have been no spam to my inbox that have come through my contact form.

Support for <bdo>

At the time of writing, <bdo> is supported by all major browsers, including Internet Explorer 6 and up, Mozilla Firefox, Safari (after version 2), Chrome, and Opera. It basically stands for Bidirectional Override.

There may be a small chance of an error when the page is formatted right-to-left (say, in an Arabic language). However, simply do not use this code in these cases and you should be all right.

Wow. It was amazing, seeing all the comments, all the views. Google Analytics wasn’t reporting any new views (it seems to have a day lag) but I knew people were looking: my website went down with all the views, I got more comments than before, and I felt good.

It’s amazing how the world treats us: it seems to be so passive and it waits to let us reap results. As of writing, this website has gone through its seventh revision already. Although I call it version 6.5, there’s been more, I just don’t want to look so desperate.

And now I had the wonderful delight of being featured on Lifehacker, a blog I myself read daily, and have two thousand people (according to Analytics) look at my website, over fifty people email me with compliments, job requests, and just love. Not to mention all the new Twitter subscribers I have now.

It’s hard to decide what I should call this phenomenon: beautiful, perhaps? I’m enjoying every second of this, but I can’t remember those who have helped me… Jason Fitzpatrick, for example, for writing the amazing post about me. I almost cried when I read it. Or my friends who listened to me hyperventilate when I found out Lifehacker had talked about me.

Of course, it does truly show that I am a twelve year old: I make mistakes. But I’m learning, and this is perhaps the best part of being a kid: it’s having an ever-changing life with crazy things going on every day. I’m working on starting a school magazine right now, and who knows what to happen a few years from now?

–

Affinity Update: A lot of you have been asking about Affinity. I am hard at work at it, and I currently have the front pages done. Still left to complete are the post pages, the page pages (haha), the archive pages, the widget areas, and the comment area.

I know I’m taking my sweet time to finish this, but I really want to make it good, and so I am proud to say that I can offer a limited screenshot of Affinity:

As you can see, Affinity will be a grunge-themed layout with clean aspects at the same time. I hope I will please all of you. Follow me on Twitter for continuous updates, and feel free to provide suggestions. You, my readers, are the greatest source of joy for me. There is nothing more wonderful about this whole experience than reading all those beautiful messages and emails you’ve given to me.

Thirty minutes later, I wasn’t thinking this “feature” was so neat anymore: it wouldn’t work at all, no matter what I did with it. Finally, I gave in and put in the CD into my computer. Lo and behold: the SharePort installer.

Once the software was installed, everything worked, although the interface was less than sleek. But now whenever I need my printer I need to have a memory-consuming software running.

Really, guys? Is this the best you can do? And for that matter, isn’t this what all software does?

Virtually every single application I have installed has put itself onto the desktop with a distracting icon. Half of those will start up automatically (eg. MagicISO virtual CD application). And maybe a tenth of those will work the way I want them to work.

It’s sad that every camera I buy comes with a CD that installs a load of photo tools I don’t need… I have Photoshop CS4, and I don’t need your stupid image software.

It’s sad that all the computers in my house came with so much junk (like games and apps) pre-installed that it ran slower than a sloth. It’s even sadder that all the HP computers I had came with a stupid HP Advisor software that ran 24/7.

It’s sad that printers force you to run their CD, and even drivers come with junk (see the stupid HP dialog box that runs every time you print, reminding you to use Vivera inks). Because with every single time this happens, I just feel like cowering.

Whenever I get gadgets these days, I don’t run the CD. I plug it in and see if it works. And you know what? A lot of the time, Windows 7 detects it. I smile, and I’m happy for the rest of the day because I didn’t even open that CD.

What has happened? Why are all applications so obnoxious? TI Connect (application to install software to my graphic calculator) doesn’t need a special spot in my Control Panel list! It doesn’t need a desktop icon either, nor does it need to start automatically.

Take a look at the below two options. Which one seems more intuitive?

1. You decide you want to install a application onto your graphing calculator. You open up TI Connect. When it prompts you, you plug in your calculator. TI Connect finally recognizes your calculator after minutes of searching through parallel ports just in case (?) and opens a Windows 95-esque interface.
2. You decide you want to install an app onto your graphic calculator. You plug in your calculator and Windows detects it as a storage device. Opening up Windows Explorer, you drag and drop the app file onto your calculator.

Which one’s more intuitive? I say the second one. I hope you agree.