Category Archives: Development

Anton Peck Made Me Write This!

Posted on by

Anton Peck did not really make me write this article, it was after reading his blog post the yesterday about “Beating Writer’s Block“ that got me thinking about my lack of writing blog posts too. Anton has been having trouble being able to write blog posts as of late. In his post he goes on to say how he was working to get around the problem. I like his analogy of blog post writing to taking a road trip. Sometimes when going on a road trip at first your not completely sure where your going, but all you know is you need to be going somewhere. Which means sometimes when writing you just have to start writing something and the idea or an article will come to you once you have begun.

My Problem

Part of my problem is not the same, as Anton’s with not knowing what to write. I seem to have the opposite problem in that I have some great blog posts and ideas for them, I just don’t have the drive or ambition to do them. I have about six to eight blog posts started, that I began last year. I usually create the article by coming up with subject (title) and then put a bunch of summary information about it into WordPress, that I go back to later create the post with.

My problem with getting my blog posts done is that normally they are more technical in nature and usually end up needing some kind of technical code example. These examples take time and I’m also trying to make sure the articles are written correctly, since I’m not an English major as I have always said, I’m a developer/coder.

The other thing that slows me down is once I get writing an post it tends to be long and verbose. I never seem to write short blog post like my friend Justin Thorp. He usually writes posts that are three to five paragraphs that get right to the point, with a few sentences in each one (his last few seem to be bit longer than normal). His are still much shorter than mine.

Mine on the other hand, end up having a dozen or so long paragraphs with really long sentences. I might have to work on being more succinct with my writing for the readers sake and my own.

I believe this is part of the same reason I have been fiddling with a few web application ideas/prototypes off and on for like almost two years. I tend to get them started and then find a better way to do them, by making them more accessible or more efficient from new techniques I have learned. I have even started to re-write one so I can start to learn PHP, being that I have been a classic ASP developer that uses XHTML, CSS, and bit of JavaScript for the first attempt at them.

My Burnout

Another thing that might be putting a damper on my blog post writing and enthusiasm for doing other web work after hours was also brought to my attention again from the A List Aparts article about “Burnout” by Scott Boms. Over the course of my technology career, I think I have been burned out or at least darn close, probably a good half dozen times. This is not something to be proud of at all. It first started while I was in college trying to finish large school projects while working 20 to 40 hours a week.

It also happened a few other times over the last 20+ years while working on projects for work and being responsible for making sure the production mainframe nightly jobs worked and ran smoothly. Because of this I now believe I try and spend more time away from the computer after work, besides checking e-mail and twitter, so I have a better life balance.

Life Balance

To have more life balance, I seem to spend more time watching mindless TV, keeping up with friends on Twitter, and just a lot of time reading others blog posts, instead of spending my time DOING real work and getting things done. As of late I have been doing a lot of reading and thinking about ways to help myself get over these issues so I can get back to building and creating more blog posts and finishing my web applications.

The sooner I can do this the more likely I will be able to help others with them and maybe if I’m lucky make some money to at least pay for themselves (hosting costs). And if they really get going I might be able to do one or all of them full time. My other big issue is which web application should I build first or at all, instead of trying to work on all of them and not making any real progress.

Conclusion

If you have any suggestions on ways to help me or others with any of these issues I would be glad to hear about them. Here’s hoping others will help you write that much needed blog post or build the next big thing.

Thanks, Anton Peck for making me write this blog post!

BarCampDC2 – October 18, 2008 – 9:00 AM – 6:00 PM

Posted on by

As you may have heard the registration for the for the BarCampDC2 event will open this evening (September 22, 2008) at around 8:00PM.

Here is some of the important information before registering you will need to know.

When

Saturday, October 18th, 2008, 8:00 AM – 6:00 PM

Where

Center for Digital Imaging Arts at Boston University
1055 Thomas Jefferson Street NW
Washington, DC 20007

Please make sure to only register if you know for sure that you can make it, since space is limited to the first 180 – 190 people. Also at time of registration you must choose your t-shirt size. The shirts should be American Apparel as I have been told and we will have women’s and men’s shirt sizes. For us larger guys, like myself we are planning on having sizes up to 3XL.

The ONLY place to register for the BarCampDC2 event is at the EventBrite website. Putting your name on the BarCamp wiki will NOT get you a seat at this event. Currently we have panel suggestions and will be adding more stuff there as time gets closer.

We are planning to have the panels be 45 minutes long and then have 15 minutes between sessions to get to the next room or mix and mingle with other BarCamp participants. Some more information to keep in mind.

  • Registration at 8:00 AM – 8:45 AM (submit panel talks at this time to help move things along)
  • Welcome BarCampers at 8:45 AM – 9:30 AM
  • Panels – 10:00 AM -6:00 PM
  • Lunch – around 12:30 PM
  • Event Ends at 6:00 PM
  • Clean up 6:00 PM -7:00 PM
  • Bar hopping afterwards 7:30 PM

We are looking for a few people to help set up Friday night (Oct 17) from 6:00 PM – 8:00 PM (?). Along with others to help out with registration, handing out t-shirts, helping with food, people to monitor rooms that others are not bring in food or drinks into the rooms, lunch, clean up after, etc.

So if you want to help please e-mail me at jfciii [at] jfciii [dot] com or on direct message me on twitter – @jfc3.

If we have not contacted you about sponsoring part of the event (max $250) and you would like to please contact me. For your sponsorship you will get your name on the back to the t-shirt (if payment in t-shirts are sent to printing), plus like two minutes in front of one of the panels about you or your company.

Hope you all will enjoy the event that a bunch of us have been working really hard to pull off.

How to Hide “Required” from Visual Users, but Make it Available for All Others

Posted on by

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”><em>Required<em>User Name</label>

To hide the word“Required” you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EM“ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”><em>Required<em>User Name<strong>must not contain spaces<strong></label>

<input type=“text” name=“username” id=“username” size=“25” maxlength=“50” value=“”/>

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.

How to Set Up and Use Access Keys

Posted on by

Access keys allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples use of your website.

Example HTML Code

The code involved to adding access keys to your website is very simple, you just have to add one extra piece of code to the links as shown below.

<li id=”about”><a href=”about.html” ACCESSKEY=”1″ tabindex=”300″>About</li>

Internet Explorer(IE), Firefox, Opera, and Safari each have their own way of using access keys. In most web browsers, the user uses the access key by pressing “ALT“ (on PC) or “CTRL“ (on MAC) simultaneously with the appropriate character on the keyboard.

The following are the different ways to use the access key function combinations broken by PC or MAC and then browser type.

PC

  • IE – press the “ALT“ key + access key and then press the “ENTER“ key to active the action.
  • Firefox 2.0 – “ALT“ + “SHIFT“ and access key.
  • Firefox 3.0 – “ALT“ + “SHIFT“ + access key and the“ENTER” key are required. I finally personally tested Firefox 3.o on Vista Basic and sometimes you need to hit “ENTER“ and other times you don’t. (UPDATED)
  • Opera – the user presses “SHIFT“ + “ESC“ followed by the access key (without “ALT“). Doing this will display the list of access keys over the current web page.

MAC

  • Firefox 2.0 -“CTRL“ + access key.
  • Firefox 3.0 – this has been changed so that the key combination only focuses on the link, “CTRL“ + access key and an “ENTER” is required after the access key combo. I have not personally tested Firefox 3.o as of yet.
  • Opera -“SHIFT“ + “ESC“ followed by the access key (without “ALT“). Doing this will display the list of access keys over the current web page.
  • Safari – “CNTL“ + access key.

Example Key Combinations

Here is an example of three access key combinations you can use for IE:

Text sizing buttons with Small (S), Medium (M), and Large (L) options.

  • “ALT“ + “S“ to change to small text
  • “ALT“ + “M“ to change to medium text
  • “ALT“ + “L“ to change to large text
  • Finally you must click or press the “Enter “ button.

These key combinations are for IE on the PC and are used to set the text sizes that you want. You can make the text larger or smaller based on your preferences. This is what we have set up on my work website.

From some of the reading I have done I noticed that people that are creating mobile websites and applications, when doing so they are using just the numbers to make it easier for their users to navigate the website and application.

Please give these a try on your websites. I have access keys set up on my website, so please try using them with different browsers. If you have any issues please leave a comment.

Key Points Learned at PodCampDC 2008

Posted on by

This blog post about PodCampDC (April 20, 2008) is way over do. I noticed it in my work in progress post list. I had started the post a long time ago and decided I would still post the few items I had listed. That I after making them into full thought and not just a short scribble of a few words.

Below are the main points I took away from the day.

When creating a podcast you should have consistent branding and highlight the program or product not the people in podcast. That way if you ever have to get new people for the show it will be less likely to die.

Justin Thorp said “You should make stuff sharable across communities”. Meaning that if you have content you need to let others be able to get at it no matter the way or where they are.

It is very important to make sure to use the same name across communities (MySpace, Facebook, Twitter, blog, Mixx, Digg, etc.) so people can easily find you. When new applications/websites start up make sure to get your use name and any other user names that you are know for so other can not grab them and then start bad mouthing you or your products.

I noticed during Aaron Brazell (Technosailor.com) and Geoff Livingston’s live podcast District of Corruption some people where getting hung up on names of websites and the like. Sometimes a website may start out as one thing and then morphed into what it is today. The real important piece is the content not the name.

There were a few things that I thought could have been better and they were? Not needing two locations, meaning that I saw no point in having to get to the Spectrum Theatre an hour early just to go over to the final location after about ten minutes of announcements. The other issue had to do with having multiple five plus rooms on three different floors and having to take the stairs to get to them.

Hope these points are useful even though they are like two months over do.