User See, User Do

Posted on December 12th, 2009 in Web Development | No Comments »

Creating an online experience that people will use doesn’t have to be hard. However, with all the various sites and apps available on the web right now, it can be a daunting task to meet the needs of every user. But then again, that’s not the point and it never should be. Every person is unique and will do things differently, in different environments, with different hardware, and different… Well, you get the point.

Anyway, this is a small rant, but it shouldn’t be taken lightly. Some things to remember:

You are NOT the ONLY user. This is very important to keep in mind as you develop your site or application. Too many times have gone by where I have forgot to think about someone else using the site other than myself.

Users will do what they normally do. We all have habits when it comes to interacting with software and websites. Try not to reinvent the wheel when creating the process or how something gets done. For instance, we all use email the same way. Folders are on the left, messages subjects are on top, and content below that. There’s no reason to move any of this around.

Test, test, test. Don’t forget to test before, during and after the website is built. You’ll be surprised by the feedback you get along the way and will be glad you knew about early on and not after you release the site to the masses. Testing doesn’t have to be done in closed quarters behind mirrored windows either. Keep it simple. And always test the user in the environment they would normally be in.

Try to apply these tips as you develop your next website or application. You’ll build a better product and have a better reputation from your users. And remember: What the user wants, they get… Or they leave and rarely come back.

10 Lessons We MUST Teach Our Children

Posted on November 4th, 2009 in Family | No Comments »

I love my kids. All 5 of them. Often I think about what I can do as their father to help them each grow and reach their fullest potential. That said, here’s a list of 10 things I believe we, as parents, should teach our kids while they are young (and teachable). Because before you know it, they will be on their own and even parents themselves.

For Sons

  1. Work hard, even when no one is watching. The definition of integrity is doing the right thing, even when no one is watching.
  2. Honesty actually is the best policy. Teach your son the value of honesty from an early age.
  3. Have a good handshake. Inspire confidence in your son. Encourage him to look people in the eye when he talks to them and to approach every situation with confidence (not pride, but confidence).
  4. Always treat women with respect. This is an area where your son will do as you do, more so than listen to what you say. It is essential that you talk to him explicitly about what it means to respect women – starting with his mothers and sisters – and also show him in your actions and the way you treat his mother.
  5. Serve your community. So often, the decisions we make affect so many other people. Talk to your son about how his decisions and actions affect others, and serve with him. Find a local shelter or soup kitchen, give to a clothing drive – or let him pick how he wants to serve. It is never to early to start volunteering together.
  6. Don’t be afraid of or ignore emotions. So often, it seems that manhood today is associated with “strong and silent.” However, your son will be happier and healthier if he learns to acknowledge his emotions and work through them. Encourage your son to talk to you about how he feels about certain situations. Who knows – it could be good for your emotions, too!
  7. Be able to cook and clean for yourself. Your son will probably live on his own for at least a few years. Don’t let him depend on mom for everything. Even if his cooking skills stop at scrambled eggs, it is important that he learn to take care of himself.
  8. Be smart about the risks you take. Boys tend to be natural risk-takers, which can be good, but these tendencies also need to be guided. Encourage adventure while teaching your son to think through his decisions.
  9. Know your weaknesses. Today’s culture is filled with temptations and distractions – particularly for young men. Talk to your son about the importance of knowing yourself well enough to know your weaknesses – and how to avoid and walk away from risky situations.
  10. Don’t take your blessings for granted. Remind your son how fortunate he is. It’s easy to lose sight of our blessings, and it is a good reminder for all of us.

For Daughters

  1. Work hard, even when no one is watching. The definition of integrity is doing the right thing, even when no one is watching.
  2. Honesty actually is the best policy. Teach your daughter the value of honesty from an early age.
  3. Modesty isn’t an old fashioned ideal. You can be modest and still be trendy. Emphasize that there is nothing wrong with “leaving something to the imagination.”
  4. Protect your heart. Encourage your daughter to proceed cautiously in dating relationships.
  5. Serve your community. So often, the decisions we make affect so many other people. Talk to your daughter about how her decisions and actions affect others, and serve with her. Find a local shelter or soup kitchen, give to a clothing drive – or let her pick how she wants to serve. It is never to early to start volunteering together.
  6. Focus on the beauty on the inside. Our culture puts so much focus on outer beauty and it is difficult for girls to develop positive body images. Affirm your daughter’s beauty – inside and out – and encourage her to focus on true beauty: inner beauty.
  7. Don’t be afraid to take risks. Encourage your daughter to pursue her dreams and take (reasonable) risks to advance her learning, her career, and provide enriching learning experiences.
  8. Gossip is dangerous. Girls are known to gossip. Deal with this habit early on and talk to your daughter about how destructive gossip can be.
  9. Don’t be afraid to walk into a room alone. This is all about inspiring confidence in your daughter. Teach her to have a firm handshake, look people in the eye when she talks to them, and to be able to be confident even if she’s not surrounded by her three giggilng best friends.
  10. Don’t take your blessings for granted. Remind your daughter how fortunate she is. It’s easy to lose sight of our blessings, and it is a good reminder for all of us.

Yes, some things overlap, and some things that you teach your son, you should also teach your daughter – and vice versa. It’s important to know your kids’ personalities so you can know what they need to learn and how they need to grow.

Writing Good CSS

Posted on October 2nd, 2009 in Web Development | No Comments »

css_reset

It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are three tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you (or those you work with) a headache.

1.) Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.

It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a structure that works best for you while keeping future edits and other developers in mind.

best-css-02

2.) Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.

best-css-05

3.) Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.

Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

Sure, you could just reposition that left column to the right and keep the id as #col-left, but how confusing is that? If the id says left, one should expect that it will always be on the left. This doesn’t leave you much room to move things around later on.

One of the major advantages of CSS is the ability to separate styles from content. You can totally redesign your site by just modifying the CSS without ever touching the HTML. So don’t muck up your CSS by using limiting names. Use more versatile naming conventions and stay consistent.

Leave position or style specific words out of your styles and id’s. A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.

Name your elements based on what they are, not what they look like. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

With these three simple suggestions in mind, not only will you write better looking CSS, but you’ll communicate your intentions to coworkers more clearly and you won’t be lost when it comes to a future updates. Enjoy and happy coding!

Bonus: Here are 20 more useful CSS tips from HONGKIAT.com

Busy, Busy

Posted on September 3rd, 2009 in General | No Comments »

Sorry for the lack of updates the past few weeks. I have been busy working on so many things that I barely have time to keep up. I hope to be able to dedicate more time to focus on the blog in the months ahead.

Of course, you can always catch me babbling at twitter.jaredlewandowski.com

Web Design & Development Checklist

Posted on August 7th, 2009 in Web Development | No Comments »

Whenever I’m working on a new website, I often review it at every stage, making sure the site is W3C & WCAG compliant, whether or not the overall design is properly targeting the audience, verifying compatibility across the most common browsers (and yes, IE6 as well), and so on. I have a pretty good mental review process and every critical area is covered before deployment. I often wanted to have a list of everything I reviewed, verified and approved, but just never had the time to compile it. Then a few weeks ago, I came across a web design checklist by Mert Tol which contains a very concise and detailed list of items to look for when building a website.

I’ll forewarn you, the list is lengthy and very tedious, but all the points mentioned are spot on to ensure a smooth design and development process. And while some of you might think it replaces some of the freedom in design work, it actually gives back so much more. After all, there is balance and order in great design.

View the Design Checklist by Mert Tol >>

Keep Your Characters Straight

Posted on July 16th, 2009 in General | No Comments »

dock

Twenty-six letters aren’t enough for many of the projects I work on. I need accented letters, symbols and all the characters that make up a full character set. I also need a way to easily use those characters that don’t appear on my keyboard. Not all software apps come with built-in glyph tools and, if you routinely switch back and forth between different programs, a built-in tool may not be enough. Whether you’re typing up a technical document or laying out an ad, having a character selection tool that beats the standard Character Map can help you get the right glyph every time.

Character Tools on Mac

Since I’m an avid Mac user, I’m going to focus on the software I use first. And surprisingly enough, there are a number of character management widgets for Macs. Personally, I use Symbol Caddy — it’s a Dashboard widget that allows you to copy symbols from the widget into whatever app you’re using. It also offers an HTML mode, which provides you the HTML entity code for the character. It’s particularly easy to use, with characters organized into specific groups.

The fact that Symbol Caddy is located on the Dashboard makes it easy to quickly access and then switch back to the program I’m working in. It significantly speeds up my work because I don’t have to launch a separate program or hunt around for where Character Map might have hid a particular symbol.

An alternative that also operates through the Dashboard is CharacterPal, which provides shortcuts for individual characters as you mouse over them. CharacterPal offers a few more tools than Symbol Caddy, including the ability to view special characters in different fonts before copying them as well as the ability to choose between a variety of different keyboard layouts. There are also other character management tools available for Macs, including both stand-alone applications and other Dashboard options.

Character Tools on Windows

While the various versions of Windows come with Character Map, there have been some efforts to improve on that particular tool. GlyphThis is one alternative, offering features like the ability to change grid dimensions as well as improved capabilities for including symbols and characters from Wingdings and other glyph fonts without having to constantly switch back and forth between fonts. GlyphThis is the work of one person, Matthew Fowler, but he’s been very good about updating the program as needed.

The alternatives beyond GlyphThis for PCs are relatively limited. The updates made to Character Map in recent versions of Windows does make it a more useful tool than previous versions. Depending on how heavily you use special characters — and how willing you are to memorize a long list of keyboard shortcuts — you can make Character Map work for you if need be. Additionally, many font management applications can provide you with a way to look through individual characters. A few options include Suitcase and MasterJuggler; prices can vary significantly.

Protecting Your Child’s Privacy Online

Posted on June 15th, 2009 in Family | No Comments »

My 8-yr old son, Nicholas, on the laptop.

My wife and I have five kids, all under the age of 10 years old. The three oldest (ages 5, 8, and 10) are already familiar with the Internet and Google for searching for kids games and activities, and the eventual school report. We have recently taken the steps to ensure they will not accidentally stumble across a inappropriate sites by configuring OpenDNS on our home network. Also, we’ve found there are additional methods we can take as parents when it comes to protecting your child’s personal information and privacy online.

  • Check out sites your kids visit, and see what kind of information the sites ask for or allow kids to post.
  • Talk to your child about the risks and benefits of disclosing certain information, especially in a public forum.
  • Take a look at the privacy policy, which should say what the site does with the information it collects. Then you can decide how you feel about it.
  • Ask questions. If you’re not clear on a site’s practices or policies, ask about them.
  • Be selective with your permission. In many cases, websites need your okay before they’re allowed to collect personal information from your kids.
  • Know your rights. For example, as a parent, you have the right to have a site delete any personal information it has about your child.
  • Report a website. If you think a site has collected or disclosed information from your kids or marketed to them in a way that violates the law, report it to the FTC.

We’re all familiar with the web by now and over the years have come to know first-hand the dangers that are out there. When it comes to our children, we can never to be too safe.

To expand on the points above and to learn more about how you can protect your child’s online privacy, please visit OnGuardOnline.gov.

Web Developer Extras for Safari 4

Posted on June 9th, 2009 in Web Development | No Comments »

webdeveloperI use Firefox as my regular browser, but that may be changing very soon. I recently discovered the web developer tools available for Safari and other WebKit browsers like Google Chrome. These features are almost identical to Firebug for Firefox, and that’s a HUGE plus for me.

To enable the developer extension, type the following into Terminal:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Once you restart Safari, you should see an “Inspect Element” option if you right-click anywhere on a web page. So far, I am very impressed with the interface and debugging options it provides, along with the overall speed of WebKit browsers.

22 Icon Design Tutorials

Posted on June 1st, 2009 in General | No Comments »

icon_tutorials_4Icons are important. The way they look to the end user can make or break an application, or they can used to help identify folders and better organize your data. If you’ve ever wondered how to design an icon, and a good at that, check out the link below for some excellent tutorials on how to design a good icon.

22 Icon Design Tutorials – WebDesignLedger.com

15 Terminal Commands to Supercharge Mac OS X

Posted on May 20th, 2009 in General | No Comments »

terminal-config-728-75

There was a time was that Mac users would stare blankly or visibly shudder when the words ‘command line interface’ were uttered. But with Mac OS X being a Unix variant, Apple bundled Terminal right from the start, enabling Mac users to geek out as much as their PC-based colleagues.

Although you can replicate the results or functionality offered by most Terminal commands via various bits of freeware and shareware, it’s simpler to fire up the command line and paste in a handy command. Below are my favorites, centering on workflow efficiency and system streamlining and improvements.

* Note: If Terminal becomes a mess at any point, ‘clear’ removes everything from the current window or tab.

Terminal commands to tweak your system

Starting with the system itself, here are four workflow-orientated tips:

1. Kill a process

killall (process name) 

If a process is misbehaving or needs a restart, use the above command. For example, ‘killall Finder’ restarts Finder. Note that process names are case-sensitive.

2. Show hidden files

defaults write com.apple.finder AppleShowAllFiles true 

This shows hidden files in Finder. Take care to not trash something you shouldn’t. Replace ‘true’ with ‘false’ to put things back to normal.

3. Force expanded dialogs

defaults write -g NSNavPanelExpandedStateForSaveMode -boolean true 
defaults write -g PMPrintingExpandedStateForPrint -boolean true 

These commands force expanded dialog boxes for saving (top) and printing (bottom), if an app doesn’t already have a custom setting. Use ‘false’ to reverse the commands.

4. Declutter your ‘Open With’ menu

/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain system -domain user 

The ‘Open With’ menu often gets full of junk. The above command, which must be pasted/typed as a single line, clears it out and starts again.dock-recent-420-90

Terminal commands to tweak the Dock

The commands below can help to improve your Dock and Stacks. When you’re done inputting commands, restart the Dock with ‘killall Dock’.

5. Make the Dock 2D

defaults write com.apple.dock no-glass -boolean yes 

Switch ‘yes’ to ‘no’ if you go temporarily insane and hanker for reflective ‘glass’.

6. Make hidden app Dock icons semi-transparent

defaults write com.apple.Dock showhidden -boolean yes 

This turns Dock icons of hidden apps slightly transparent, making hidden apps easier to spot. Again, ‘no’ reverses this.

7. Make Dock app icons spring-loaded

defaults write com.apple.dock enable-spring-load-actions-on-all-items -boolean yes 

Dock stacks are spring-loaded, but app Dock icons aren’t. To change this, use the above command. This unhides and focuses an app when you hover an item over its icon.

8. Turn on stacks highlights

defaults write com.apple.dock mouse-over-hilte-stack -boolean yes 

When a stack is set to ‘Display as Stack’, a highlight appears behind icons when you navigate using the keyboard. The above command forces the highlight to appear when using the mouse also.

9. Create recent-item stacks

defaults write com.apple.dock persistent-others -array-add '{ "tile-data" = { "list-type" = 1; }; "tile-type" = "recents-tile"; }' 

Make sure the above is pasted as a single line. On restarting the Dock, you’ll see a stack next to Trash. Click-hold and you can set it to show recent apps, documents or servers, or ‘favorite’ volumes or items. Run the command again for further instances that can be set to different display options.

Terminal commands to tweak Dashboard

Some Mac users hate Dashboard so much they want rid of it, whereas others want widgets to stay put when Dashboard closes. The following tips enable these things. Use ‘killall Dock’ after entering commands for changes to take effect. (Dashboard is part of the Dock process.)

10. Disable Dashboard

defaults write com.apple.dashboard mcx-disabled -boolean yes 

Reverse this by using the same command, but replace ‘yes’ with ‘no’.

11. Drag widgets to the desktop

defaults write com.apple.dashboard devmode yes 

This command activates developer mode for Dashboard. Once it’s active, click-hold a widget and close Dashboard. The widget will stay put, floating above other windows. To put it back, click-hold, open Dashboard and ‘drop’ the widget. (This is fine for one-offs, but if you’re a massive widget junkie, consider buying Amnesty Singles, a $10 app that converts widgets to Mac OS X applications.)

Terminal commands for better screen grabs

Mac OS X bungs screen grabs on the desktop in PNG format. When taking multiple grabs, regularly moving them is annoying, and you might prefer a different format…

12. Change your screen grab format

defaults write com.apple.screencapture type jpg 

Alternate formats are ‘tiff’ and ‘pdf’ or the default, ‘png’. Logout and back in for changes to take effect.

13. Amend your screen capture location

defaults write com.apple.screencapture location (path)

If you don’t like typing a full path, add a space after ‘location’ and drag a folder to Terminal from Finder – the location will be added automatically. Again, a logout/login will be required for this change to be made. A more likely place for screen captures is a folder within ~/Pictures.

Terminal commands to make your Mac more fun

14. Make your Mac talk

say (string) 

Replace ‘[string]‘ with some words to make your Mac talk.

15. Play Tetris

This isn’t technically a Terminal tip, but you can use Terminal to access Emacs and play a little Tetris. Type ‘emacs’, hit Return, wait for Emacs to load, hit Escape, type ‘x’, then ‘tetris’ and then Return. Arrow keys and Space control the falling blocks.

Finally, if you don’t like opening Terminal and typing commands, many of these changes can be done via TinkerTool and Secrets. But Terminal is where the action’s really at for a generation of Mac users finally getting comfortable with typing (or at least copying and pasting) the odd command.