Best Practices for CSS Style Sheets

Posted by Scott on 23. January 2009 05:10

A while back Microsoft released a program called "StyleCop".  StyleCop is almost like a style guide for code, kind of like what CSS is for HTML.  It gives the rules for how HTML should be setup and react.  Now I only wish someone released a stylecop for CSS.  In my many years of dealing with CSS I had to come up with a best practice or thought on how I would like all my Style Sheets to look and feel.  This would help me determine exactly where to look over each sheet.  I realized that this guide was in my head and I had never put it down on paper.  So here today, I won't put it down on paper, but will post it here for all to see.  I have seen many style sheets and this is the guide that I use when I start to build my sheets.

• Style sheets should always have the basic essential styles which are things like underline, bold, italics, predefined h1, h2, and h3 fonts, colors, link variations, and sizes of fonts.  This allows for a similar look and feel on every page of the site.
• Style sheets should be downloaded as fast as possible from the server and therefore must have the least possible white space while still allowing for the ability to separate styles with the human eye.  This is where a one line per style should come into practice.  For each style used, it should only take up one line of the style sheet.  No longer should you use one line per declaration of style.  This new way is an easy way of looking over each feature of the style while still allowing for fast downloads of the sheet. For Example:

• Style names should be camel cased starting with the name/abbreviation of the tag the style applies to and then the name of the div tag/style. 
  
  • For Example:  I have a Div tag with an id of userName, I should name the style divUserName. 
    
  • If I have no name for the tag, I should name a type of ID for the style.  For Example: divPageInformation. 
    
  • Unless it is a standard id like .bold, .italic, etc... I will not declare what the style does, rather I would declare where the style belongs. For example for links: aPageTitle
• Style grouping is a way to organize your sheet for better readability and navigation of the sheet.  In the past, people used to just put styles up on the sheet and forget it.  Not thinking that they would have to later come back to the sheet for editing.
  • If the style is generic through out the entire site, I group it at the top of the sheet with all the other generic styles.
  • I then group all the styles by page and then control/object it styles.  I then alphabetize the styles in each group for a fast skimming rate.

For Example:  I have an accordion that is generic along the entire site, so I would group the entire accordion together and then alpha sort the tags.

/* Accordion */
.accordionContent { border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }
.accordionHeader { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeader a { text-decoration: none; }
.accordionHeader a:hover { text-decoration: underline; }
.accordionHeaderSelected { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeaderSelected a { text-decoration: none; }
.accordionHeaderSelected a:hover { text-decoration: underline; }

For another Example:  I have a reports page.  I group the reports page together separated by one line and then group the report styles together while sorting them.

.liReportChkbxs { list-style: horizontal; margin: 0 5px 0 0; display: inline; }
.ulReportChkbxs { float: left; margin: 0 5px 0 0; }

.liReportsList { list-style: none; padding: 5px 0 5px 5px; }
.liReportsListHorizontal { display: inline; }
.ulReportsList { text-align: left; display: block; list-style: none; }

I hope that helps in your style sheet endeavors.  I sure do wish I didn't have to go through the learning phase of this type of style.  I would love to hear my readers thoughts on this guide and how they differ from it.

Create a Demo for Me? Ahh, No Thank You.

Posted by Scott on 19. January 2009 05:57

In dealing with customers and potential customers you have to be clear and precise with them.  You have to make clear your requirements from up front.  As a full time employee of a company,  I would suggest you read My Bill of rights as a Programmer, on the other hand if your a freelancer or contractor you must tell your customers up front what you expect.  If you do not, then you will be stuck in an endless grind working for low income while doing mountain loads of work.  A customer once came to me and asked if I can show them a mock up. 

They said that we have a few potentials and need to choose between them. They asked if they can see a mock up or an example of what I would create for them.  Now in my early days as a contractor/freelancer, I would have given it some thought, but in today's world where everyone and their mother and daughter need a website, well I respectfully decline.  For those new programmers out there reading this, move on to another job.  For those experienced programmers, show them some of your passed work.  If they aren't happy with what they see, then say thank you, but we can't do business together at this moment.  Now, you will get one of these two replies.  Alright, lets talk about what you can do for me OR okay and thank you very much for your time.  You have to be able to walk away as a person in order for them to want you back.  This doesn't happen with big companies very well, because you have to draw up a "free" proposal and be picked among many.  When you have a small business that is in need and talks to you personally, well it works better for everyone when you can walk away. 

Taken by mikebaird

The point is you need to be able to say NO when they ask for a mock up or an example of what you can create for them. Don't do work for free.  Most likely, you will just be wasting your time anyway.

To Thread or Not To Thread Comments

Posted by Scott on 15. January 2009 05:24

With building a Social Site you always have to weigh the needs to have interaction with the site.  The current standard for any interaction is the comments section of the sites. The comment section is the talk back, the conversation to the site.  It is what allows for user participation and what most people would declare what Web 2.0 really is.  It allows the comment section to enable user interaction.  In building a site that would be used as a somewhat social site, you have to ask your self do you want to see a conversation another one sided page that has no interaction.  Would you rather get user feedback or just be one sided in everything you write or have to say.  You can't get feedback to see if they enjoy what your posting. You won't get a conversation going which inevitably makes the user want to come back to the site. The fact is, we need comments in the internet, we need conversation.

So in building a site, you have to worry about if you want it to be web 2.0 or web 1.0.  Comments in general are becoming standard on any site out there.  It is on all major social sites and it allows for more interaction between the users.  I don't see any problems with comments.  But I would like to start calling it something different.  A Conversation.  I call it a conversation today because more and more people are commenting.  More and more people are clicking that button to get a notification on what people say.  When you comment you save a part of your self on that site.

The Point

Comments are good, but threaded comments are better.  We are trying to build an online world.  We are trying to create a conversation that any person of any race of any creed and color can voice their ideas on.  Comments allow for anonymous participation in the world of tomorrow.  Free Speech.  Governments ban it and people are killed over what they say, but on the internet, you have all the free speech you want.  To create a conversation, you have to allow talk backs, you have to allow the user to reply to any other user.  You have to make sure a conversation can be had with any other user on the Web 2.0 site.  So in developing my site, I chose to use threaded comments as the default. Flat Comments can be chosen if they want to see flat comments.  Some people just can't handle threaded comments.  But if you think about it, Flat comments can also be threaded.

Just think of when someone posts:

@John,
Your Wrong!

@Tim,
I don't care what you have to say, threaded is better.

A conversation is happening right here if you like it or not. Threaded comments are at least for now the way of the future.  Someone else will invent a better way to have a conversation over a website, but for now threaded is my default and it should be yours too! Help carry on the conversation of the world and thread your comments.

Ask the Readers: What do you think, should threaded comments be a default?

Shameless Plug: DrinkingFor, it is still in Beta.

My Projects

Posted by Scott on 24. December 2008 22:34

At the time of writing this, I finally got my second real website out for customers and would like to publish my profile online.  So at the time of writing this, I have completed two sites for customers.  This list will grow with time with each new project I create.

• Lumber by Lance - 12/24/2008 – This site is for a customer that produces logs to lumber and then has a kiln to dry the lumber out.
• Indialantic Volunteer Fire Department - 6/20/2008 – This site is for a volunteer fire department out of Indialantic Beach, Fl.  I was quite happy with this project because all the white space is completely updatable before I found out the concept of what a CMS is.
• DotNet Instant Messenger - 12/28/2008 - This site was designed by a friend without a website.  I designed and created DotNet IM.  Pretty proud of this one actually.  First real engine I have put out on the internet.
• DrinkingFor -1/09/2008 - Been working on this site with my partner in crime.  I knew asp.net and he knew only java.  Since C# and Java go hand and hand, he wanted to jump onto a simple project.  This is it.  We are working on it to make sure it up to web 2.0 standards but it has been launched.
• UtopiaPimp -6/30/2009 - I started this site well over a year ago and gave it a break so I could work on DrinkingFor.  I am back at this site and it is working well for me. The site is built for a Online game at Utopia.Swirve.com.  It is a game that requires a bit of intellect and collaboration.  The learning curve has said to be high, but it is still one of the best and if not oldest online games in the world.  UtopiaPimp currently has over 13k users.
  

Life is like Code, you never know what you will create next

Posted by Scott on 10. December 2008 04:21

Appreciate the Beauty – Code can be amazingly beautiful.  It can be written in five lines to express what could also be written in 20 lines.  When I write beautiful code, I will often take a moment to step back and realize what I have just done.  You need to do this in life as well.  When you complete something that took a long time, step back and appreciate your time spent.

Be In the Now – I have always enjoyed coding. I could "get in a zone" and wouldn’t miss a bracket or a semi-colon.  In software development, you need to be in the now.  You need to hack away at the code until you get it just right. In life, you need to also figure out how to be in the “now”.  You need to live in the present.

Be Honest – Don’t mess around, be truthful to those you work for.  Coding is an art, be honest in how you code and what you code.  Take shortcuts, but don’t infringe on patents.  You will lead a much more satisfying life if you were just an honest person.

Plan ahead – Good programmers don’t just start coding.  Think about what you do before you do it.  Good coders make sure they have a game plan before they start writing.  Even if you’re an extreme programmer, think about what you do, before you do it.  In life, you need to ask, "Are the actions your taking now going to work well in the future?"

 
Picture taken by Amagill

Narrow Your Focus – Code is completed in functions.  Something goes into the box and something different comes out of the box.  You need to narrow your focus so you write the best functions possible to make you code complete the first time around on that particular function.  You need to apply that same level of attention and narrowness of focus to your everyday activities. You could get a lot more done if you jumped into one task or function a time and got that function done and then moved on.

Keep Your Eye On the Ball – To make great code, you have to know what’s at the end of the code.  You need to make sure it works well with everything.  If you’re an extreme programmer, make sure your correct in all your goals for the next release. It’s the same in life.  If I find that I’m not making the progress I want toward my goals, it is usually because I’ve let myself get "busy".

Mind Your Manners – Coders will tolerate a lot from a newbie.  They will help him along and make sure he doesn’t screw up, but most coders really don’t appreciate poor etiquette.  You should approach everyone in the world that way.  Peace on earth is easy if you just gave a bit more common courtesy.

The More You Do It, The Better You’ll Be- "Practice makes perfect" is the mantra every coder should follow.  Keep working and you will write better code than before.  I look back on old code I wrote and see a vast improvement than what I was doing 2 years ago.  How much richer would you be if you practiced better communication, compassion, and empathy?

Leave the Code Better then You Found It – I learned this in Boy scouts very early on.  It’s the same with code.  If you do a refactor, leave it in better condition than you made it.  Write better code than the lines you wrote before.  Make it do greater things.  You would be a much better friend and person if you made a concentrated effort to leave everything and everyone better than you found them.

How to Convince your Customers they need a CMS

Posted by Scott on 20. November 2008 19:21

Currently, I am dealing with one of my current clients.  They control a multi-national non-profit organization.  In the past they have used basic html to do the work for them in the web side of things.  They came to me through a person I knew and asked me to do very minor things for their web site. I agreed and started working with them.  There last request was to accept payment through the website and I told them to look at PayPal.  I thought it was the best bang for their buck.  Banks can charge an arm and a leg to manually enter things in while PayPal does it just fine. Most of the time, PayPal is much cheaper than what banks charge too. So I built them a PayPal system straight from Rick Strahls site. The next thing they started asking was a bunch of questions as in what can I do next, what can they do next and what can be done to improve apon this? Now they aren't very big, with a membership only in the thousands and much of the money is spent through the year.  So I decided to write them an email explaining what could be done with this organizations site. I decided to post it to show others why there is a need to have a Content Management System and hope it helps any other programmer trying to convince their customer to buy into a CMS.

I would like to title it "How to Convince you Customers they need a CMS"

Here is the deal.  I decided to go with the cheapest hosting possible when I purchased the space for $60.00 because of your budget.  It is another server hosted by GoDaddy.  Since its PayPal we are talking about. You are not required to have another server from another Service Provider to use PayPal, but for me to work using my programming languages ASP.NET, C# and SQL I needed another type of server other than what the company you were using had to offer.  Basically, since you wanted my work I needed to use GoDaddy (which is the cheapest hosting so far). PayPal doesn't have  restrictions as to what it uses as a server, but the application I build for you and the programming I do for you does have the restriction.  The $60.00 will be an annual expense once a year on or around the same date of this past week.

The way I look at it is that we are in the very early stages of development on what is formally known as a Content Management System(CMS). The best place to loosely define it would be Wikipedia at http://en.wikipedia.org/wiki/Content_management_system. If we look at your organization at the base level.  We can see the organization requires most if not all of the following:

Required:

• A membership database.
• An event calendar and scheduling feature for the calendar.
• A money management system.
• A payment system. 

Extra/Additional:

• A place to hold all your images and review them in a photo gallery.
• A place to hold all your official documents.
• A place to publicly display all your public information (Website).
• A place to download any and all forms or documents relating to events and organizations.
• A place to write and read all the news of your organization.
• A place to create newsletters that can be emailed out to all your members once completed.
• A blog for your organization.
• A place to email all your members on a regular basis.
• A place to host a forum which would allow all your members to communicate and chat amongst each other.
  

• Because your organization has several other organizations below it in a tiered approach, you could also host webpages for those different organizations.  It could have something like a main page for each and every member in your organization or team.  This can be seen for example in another online application such as facebook.com or linkedin.com.  This of course is above and beyond, but it is available.

ASP.NET and C# is not regular HTML that you might be used to.  It is an entirely new platform for developing web applications.  When I say new, I must say that’s it has been around for about nine years and is owned by Microsoft, so I do not see it going anywhere soon.

You will get all this with the $60.00 a year hosting through GoDaddy and along with my working costs.  You can achieve this with your other hosting company, but it would not be through me.  I am sorry to say, but I do believe the other languages that are used to develop applications like this could not compare with what could be built with ASP.NET and C#.

P.S. As an organization, I must imagine you do have a membership management system in place along with some sort of news letter system.  Both those systems could/would cease to exist once I built this for you.

Side note: All this information is completely dynamic. Once I build a “component” for your application, it will then pull data dynamically from the database.  This means that you can have an extensively large amount of information on a webpage without very many things to develop or need a programmer for.

What Gives? Microsofts Code Generation Tool

Posted by Scott on 17. November 2008 21:48

In a world of Microsoft and third party applications, out comes t4.  t4 is a code generation tool that can compete with CodeSmith, but its FREE and built right into Visual Studio. It has been years since the first edition with very little publication of the actual application. t4 is a free code generation engine from Microsoft that underpins the Domain Specific Languages and Software Factory toolkits.  t4 is a rich code generation and has the ability to stand up against and compete with CodeSmith.  I have used both Codesmith and MyGeneration a lot in the past few years, so I have seen the competition.  What is nice about this old/non publicized tool is that it is built directly into Visual Studio 2008.

t4 is being spear headed into the open source market for free templates by Oleg Sych.  It brings a long a toolbox which can also be download with extra templates along with a GREAT T4 Editor which of course is also free.  There is not more need to spend money on CodeSmith, when Microsoft will do it right out of the box with Visual Studio.

Some have speculated, why hasn't Microsoft published this tool to a greater extent.  We can only think that it has to do with being a Gold Partner.  Microsoft doesn't like to lose Gold Partners and therefore hasn't truly publicized this tool.  The next question you have to ask your self is what can be generated?

• Site Maps.
• Database schemas.
• Session Variables. 
• Store Procedures.
• Text Documents.
  

As of October 2008, t4 Editor has been officially placed as a plug in to Visual Studio 2010, which will boost the ability to generate t4 code through other means besides CodeSmith.

Demos and Other information can be found below.

• Extending the template class 
• t4 Editor
• Oleg Sych - t4 evangelist.
• Free Templates for Code Generation
• CodeSmith
  

Point of concern: If your company currently uses CodeSmith, wouldn't it be nice to tell your boss what you found could save the company a few hundred dollars by using something that is already built into Visual Studio? So why not give it a try and save a little money doing it?

In programming, clever != smart.

Posted by Scott on 10. November 2008 21:52

You ever have one of those days where you think you are the smartest man in the world and the best programmer at your place of work?  Then some clever kid comes along and does something that speeds up your code by a few seconds/minutes?  Ease your self.  Just because that person just solved your problem, doesn't mean they are smart.

"In programming, clever != smart." - anonymous

You work all day on a certain project, take a step back and look at it.  Its some of the beautiful code you just created, but you are hung up on this little issue.  Along comes some programmer and they solve it for you. When I was in high school or middle school and I was getting off the bus.  One day I heard one of my bus drivers say to a girl.

"You might be book smart, but your not street smart" - anonymous 

I tend to think that I am about in the middle of this quote.  I tend to think I am both book and street smart.  I imagine most people do.  Book smart programmers tend to be better at writing code then their street smart counter part.

The book smart programmer (smart):

1. tended to focus more in school on classes including algorithms.
2. tended to have less of a social life due to studying more or less depending on how fast they got solutions to projects.
3. tended to be either inside playing video games or working on a cool project that could solve the way USB drives communicated to computers.
4. tended to have soda cans and candy around while staying up late around his computer.
5. tended to get better grades.

The street smart programmer (clever):

1. tended to focus a bit more on going out and socializing.
2. tended to focus a bit more on girls.
3. tended to copy and paste code.
4. tended to join a social organization.
5. tended to have a bit more fun in the activities they thought up.
6. tended to get a little lower grades.

This reminds me of the movie "Real Genius". Where Chris seems to have both of these types of people tackled.  He sees Mitch and he sees the old him.  The book smart programmer(laser tech).  Mitch is stuck with trying to do the best in college that he can. Then one day, Chris gives Mitch a little lesson. He lets Mitch know that college and life can't just be all books.  It has to be books and fun.  It has to be smart and clever. Sure clever != smart, but wouldn't it be good to be both? Wouldn't it be satisfying to be Chris and let Mitch slack off a bit.  They are both geniuses.

I went to college for four years, I did my fair share of partying and I didn't graduate with the best GPA.  For a Computer Engineer, it is a pretty shameful GPA.  Though I got a real job before even graduating.  I had done some work on the side while still in school.  I got an intern with my college Fraternity. This advanced my ability to show my future employer I can have a real job and keep it.  I am not saying stop all your studies now, but live life.

Programmers need to both be smart and clever. Not just smart and not just clever.  If you want to tackle the real issues, you can't keep writing code all day and every day.  You need to just step out and have some fun.

"Don't let Life pass you by..." - Scott

I am not trying to be a philosopher, but what I am saying is find your true happiness in life.  Be smart and clever.  Don't get stuck on always trying to be the best or smartest, but make sure you Get the Job Done at the same time.

P.S. I always tend to start on one subject and completely finish with another by the end of the post.  This one is no different. hah.

The Art of Programming

Posted by Scott on 24. October 2008 15:00

Do you think of programming as an art or as a necessity?  Do you think of programming as a passion or just something to make money off of?  Do you find that when you write a program you are brought to a place that can no longer be called a job, but a life changing experience?

"A man can be an artist... in anything, food, whatever. It depends on how good he is at it. Creasey's art is death. He's about to paint his masterpiece." - Man on Fire

I currently hold a 9-5 job as a software engineer.  I consider my self good at the job as does everyone else in my little cubicle.  I think the thing that separates the man from the boy or the woman from the girl is the passion one shows has.  Do they enjoy the work or do they just come to work for the money?  Have you found your dream programming job yet?  I personally have not found a job that currently excites me when I code in 1s and 0s.  My job has its perks like my ability to do a lot of research into new technologies, but at the end of the day I don't truly enjoy my job.  I do it for the money while at work. When I am at home, I do it for the passion.  For the fun of seeing things be created from nothing.

At home I spend my time with my family, but my spare time is devoted to hacking (coding).  The problem with this is that families and friends can't seem to figure it out.  They say "that you do it all day at work, can't you just put down the keyboard and spend some time with us?"  I tend to think that some times they might be jealous or ignorant of my computer, but that isn't the case. While I do sit at work all day in front of a computer working on problems, they are problems of need.  Hacking at work isn't particularly enjoyable nor does it spark the creative muscle. So, in my spare time I choose programming at home to open that creative muscle.  It needs to be freed and fed.

Too often programming is found as a boring task by many of the people I am around.  They don't understand its like building a bridge with your mind.  You build the bridge up piece by piece and when its finally done, you have a ribbon cutting ceremony and people start traveling on it.  They use it and stress test the beautiful code you just wrote.  You are completing a part of their lives with your creative imagination.  Not by the muscle on your back, but by the thoughts in your head.

This is what excites me about coding. I don't wear gloves that build a bridge, but I write beautiful code that gets used over and over again and solves a real problem in a person's life. It's like a piece of art in a national museum.  I don't look at it because its there.  I look at it because it is elegant and just plain imaginative.  When I code at work its out of necessity for the money. When I go home its to use my creative imagination. At work I am a boy, but at home I am a man.

I hope everyone is able to express their creative imagination sometime of each day even if its not at work.

Programming is an ART for me. I paint my masterpiece each day when I get home.

Looking for a Venture Capitalist or Angel Advisor

Posted by Scott on 23. October 2008 08:51

I have come to the point in my life where I want to start my own business.  I am in a job that is decent, but I don't see my self going anywhere with the position I am in.  I am in need of some advice from a venture capitalist or angel investor out there.  I would like to share my ideas with this person and see if they think money could actually be made from the ideas I have.  I am truly interested in moving up and outside my set "working for the man" career path.  I can't move to Silicon Valley because of my current personal situation, so it would have to be a long distance thing.

I have about fourteen ideas that I would love to propose to someone.  I am not looking for financing, just an insight on whether my ideas would work and be able to sustain my current low level, low income software engineer lifestyle.

If you know someone that could help or are someone that could help, let me know at spoiledtechie [at] gmail.com.

I just want to get out of the every day grind and work on my own projects.  I can take constructive criticism, let don't worry about hurting my feelings if all my ideas stink.

Scott