Name CSS Classes More Descriptive
October 30th, 2008 by Aaron
One thing I remember being pounded into my head is to not create CSS classes after their physical attributes. So, for example, if your error text is red, do not call the class red. Instead, be more descriptive of the content.
BAD!
1 | .red { color: red } |
1 | <span class="red">There was an error!</span> |
Instead, I was always encouraged to give the class something more descriptive, such as ‘error’.
GOOD!
1 | .error { color: red; } |
1 | <span class="error">There was an error!</span> |
Well, that seems pretty cut-n-dry for a simple example like that. However, in my most recent design, I’ve come across some more complex situations. For example, when you’re visiting the webpage, the background of an element might be a really dark grey. When you’re an authenticated user, however, I need it to be a medium grey (hey don’t ask - just wait for WhereIsTheBand.com to be done!).
Of course, during design, I went to the dark side right away:
BAD!
1 2 | .darkGrey { color: #101011 } .mediumGrey { color: #212122 } |
Now, I know I should come up with some descriptive name, perhaps something like “userLoggedIn” or something, but I plan on using these classes in different areas as well. They might not be dependent on the user being logged in - just might look better that way. I didn’t want to make a lot of duplicate CSS code either.
The compromise: be semi descriptive.
COMPROMISE!
1 2 | .lowContrastBackground { color: #101011 } .mediumContractBackground { color: #212122 } |
Not perfect, but seems like a better alternative.
Don’t focus me, bro!
September 20th, 2008 by Aaron
I hate filling out login forms to discover that half of my password is in the username box. Lets talk about why - and then a solution.
Why?
Slow Loading Pages
Slow loading pages, or sites with a lot of content on the login page (see: a no-no for login pages), take a while to finish loading the content. The ‘onload’ handler is usually the whole on-load and not just the domloaded event. Tons of extra content delay the onload handler.
Dialup
Yes, people still have this. Even with the smallest amount of extra content, dialup users will experience some delay.
So what is happening?
People who jump the gun - like me (and 93% of everyone else) are clicking in the username box, filling it in, and then tabbing to the password box. While typing in the password, the page finally finishes loading, and focuses the username. We don’t notice, so we keep typing.
What is the solution
Quickly: activeElement
Firefox 3, and IE4+ support activeElement. (there are other ways around this for other browsers - see the end of this article). Check to see if the body is the active element - before focusing the username. If it is, means that they haven’t started typing anywhere.
Give me an example?
Ok! You should use a better ‘onload’ handler - but I’m being lazy just for this example.
1 2 3 4 5 6 | function loginFormInit() { if (document.activeElement == document.body) { document.getElementById('username').focus(); } } |
1 2 3 4 5 6 7 8 | <body onload="loginFormInit()"> <h1>Login</h1> <form> username: <input type="text" id="username" name="username" /><br /> password: <input type="password" id="password" name="password" /><br /> <input type="submit" /> </form> </body> |
Oh Noes! I need to support more than IE4 and FF3
No worries, citizen! If you need to support something else, besides those two lovely browsers, you could write a function to getElementsByTagName(’input’) and add an onfocus element. That element could set a global variable to ‘true’. Finally, your onload function could check to make sure that that variable is not true - and then do the focus.
dtemplate: dynamic template system for static designed files
September 16th, 2008 by Aaron
One of the biggest time wasters I deal with is parsing out static web designs given to me by designers. They don’t know programming, so they design it with static HTML in mind. Even if you’re using a tool like dreamweaver, updating static pages can be a hassle. Then, a lot of times, they have to remove their ‘lorem ipsum’ text and send it to me - and then I continue to chop it up. Now, I’m talking about smaller 5 to 10 page sites here, not huge sites like JEMDiary or something. However, that idea birthed…
Welcome dtemplate!
The purpose of dtemplate was to read in an existing design from a designer or a static site that already exists, and make certain parts parse-able for replacement content. This way the designer can give the developer a complete xhtml package and move on. As long as the files are verified as valid xhtml, they’re good to go. Then the developer will write whatever programming/content needs to be replaced. It would be even possible for the designer to put basically all ‘lorem ipsum’ if necessary - and it could all be replaced.
How does it work?
dtemplate takes existing URLs and rewrites them to be used in the template. The template then reads in the xhtml files, looks for any specified IDs or classes, and replaces the content. It finally renders the content out to the screen. Any non .html file gets rewritten to be found in the new directory.
Implementation Steps
Its easy to put dtemplate into use. If all else fails, check out the comments in the files.
Create source directory
In order to have the content be read in by the template file correctly, you must make a new folder at the base of the site called dtemplate_sourcehtml. Move all of the files in the current root into that folder.
Modify .htaccess
The last line of the .htaccess file specifies the real URL of the site. In our example, its http://myrx8.local. You need to change this to be your site. Put this in the root of the site.
Add additional files
Place the dtemplate_controller.php, dtemplate folder and the verify folder in the root of the site.
Verify each xhtml file
Before surfing to the site, you should visit http://yoursite.com/verify and upload each file, and check for any id’s and classes that you’d like to replace. This way you know if the file will parse fine and if the required classes and IDs are located in the file.
Modify the dtemplate_build_content() function in dtemplate_controller.php
This function is made to replace any content for your file. It is commented - plus you can see an example in the download. It is recommended that you create your own class(es) and use this function only for adding the content to the template when needed - don’t place all your logic in this file.
Surf!
You should be good to go! If you want, you can remove the ‘verify’ folder.
Example
I’ve included a really simple frames website as an example with the download. This was originally on http://myrx8.local as a test.
Todo and Known Issues
- make sure you don’t have to edit out the website in .htaccess
- support multiple directories for html files.
- is pretty rewrite intensive.
The download
Why your company needs a System Architect/Analyst
September 10th, 2008 by Aaron
In this post, I’m going to cover what a System Architect/Analyst (SA from now on) is and why you need one.
A System Architect/Analyst is…
A top level programmer with a lot of experience.
Experience is king here. No matter how many theoretical classes or book knowledge, experience can trump all of those. It is just impossible to run into as many situations in the class room as in the real world. This person should be continually updating their knowledge of programming concepts as well as …
Still keeps hands in the code.
A common problem with the SA’s I’ve seen is that their programming time continually declines until there is no more hands on involvement from them. It is still important for an SA to keep their hands in the code, whether it is making quick bug fixes, creating complex algorithms or, at the very least, making shells of classes and methods.
Understands advanced architecture concepts and can implement if need be.
While the current project or code base may not necessarily be in the place where advanced concepts can be applied, the SA should still understand these concepts and be able to apply them in other projects. This helps cement the fact that this individual will be the first person that is consulted on a rewrite… which means…
Knows where the code base is going.
Code bases, for the most part, are more of a living/moving entity than a stable patch based system. There is always a need to add more features while refactoring. The SA should know about where the code is going in order to give design guidance to make the new features partially on the road to the refactored code or a rewrite.
Understands where the company is going
It is important for the SA to understand some of the company’s strategic plans for future development and planning. This way they can make design suggestions about existing projects’ architecture to afford for easy upgrading to the future planned additions. This familiarity is accomplished by working somewhat with the management team or decision makers as well as the project managers.
Why You Need One
Heads off problems ahead of time.
When you have an SA in the mix, a good portion of their time is dedicated to analyzing and thinking about the current projects. Having a good knowledge of all of these projects helps them foresee any projects and take care of them ahead of time. Additionally, with all of this knowledge, they can help make educated decisions without having to bother the stakeholders. A lot of times, however, stakeholders will suggest throwing an SA into the mix for the wrong reasons - to code faster, to push out product quicker, etc. This is never a good idea. Once you pull them away from looking at the big picture, its almost as if you don’t have one - or sometimes even in a worse place than before.
Makes recommendations on how teams can accomplish work.
I’ve covered this before, but it bears repeating. While not actually accomplishing a lot of work themselves, they do get involved in many of the projects and give guidance to the team and team leaders on how to best work in the current constraints as well as plan for the future.
Authority from a technical aspect on how code is finished, peer reviewed.
When teams are having some issues solving something or a peer review doesn’t go right, the SA would be the authority on what is the solution. For example, if one peer reviewer says the code isn’t right but the other feels like it is, the SA, from their experience and other understanding, will resolve that issue immediately.
Analysis first saves work later.
Time and time again, analysis is cut short because there are not enough resources to work on the projects as well as analyze the stuff. Well, just off the bat, if you’re suffering from this problem, it sounds like you’re not putting a lot of emphasis on the analysis - or not learning from mistakes. I can’t point to ANY example where analysis first was the ‘failure’ of the project - but I can name a million where it could have helped or did help (search “software” on google for a million examples). Point being, this SA’s primary responsibility is analyzing past, existing, and future code and ideas. This is an important part of any project’s success. Just like every other skill, with practice, this becomes better. It is important to dedicate a person to this task so they can continue to become better at the analysis as well as protect from any project design misses.
Reduces work for managers.
Since the SA knows both the future plans of the business as well as has an eye for the technical solutions, they can jump in and resolve a lot of questions before they have to get queued against a manager. This is not to say that an SA should be at all responsible for personnel issues or anything - but they can help make snap decisions with the notion of what is best for the company and the architecture.
Do you agree?
I’d love to see any comments talking about if you agree with this summary/description, if you’ve recently acquired an SA and any positive or negatives you’ve seen, or if you have other things I missed. Thanks!
Does your design leave an unknown size gap? navigationFiller.js!
September 2nd, 2008 by Aaron
If you’ve ever worked with a customer’s CMS pages and heard the term “Oh but I want some images underneath the links” - you need this script. Whether your using old style tables or the coolest CSS tricks, filling in space to the bottom of the page can be useful.
Enter navigationFiller.js
With this js file and some configuration in the HTML, you can solve the problem of having that blank space below the navigation bar. For example, see our before screen…
Minus it being very very ugly and boring, you’ll see the huge blank space below the list on the left - or the ‘navigation’ links - if they were a tags. Now, lets imagine that the content on the right side may be variable lengths - this is where navigationFiller.js falls in.
navigationFiller.js will calculate the available space and fill with images from your pre-configured list.
See the after picture - of our equally as AWESOME demo pics?
This is from a simple script include and then some configuration options. The script has public methods for populating the images that you want to use.
Its easy - lets see how:
How to Use
First thing’s first, include the js file in the head of your document.
1 2 3 4 | <head> <script type="text/javascript" src="navigationFiller.js"></script> ... </head> |
Next, configure your options. First, you must make a new instance of the object. Then, you can add images 1 by 1. The order you add them is the order they may appear. Check out this javascript:
1 2 3 4 5 6 7 | var oFiller = new navigationFiller(); oFiller.add('1.gif'); oFiller.add('2.gif'); oFiller.add('3.gif'); /** add using your normal onload() handler **/ window.onload = function() {oFiller.create('fillerDiv');} |
As you can see, you finally run the oFiller.create() function with the ID of the div that you wish to populate with these images.
So What Happens?
If you have a div with an ID passed to the oFiller.create() in the above example, the script will calculate the height of the current document, and the location of the div, and then load images in until there is no more room left. It will not extend past the height of the existing document.
Bugs or Limitations?
I have a huge todo list - so this is more of a proof of concept. It should be noted that it only works with FireFox at this point. Also, the code is sloppy and possibly buggy. You can see the top of the js file for my expanded todo list.
Download!
You can download it here: Navigation Filler Zip (with Examples)
Subscribe