Code Standards & Front-end Development Best Practices | Hacker News Reader

Code Standards & Front-end Development Best Practices

na.isobar.com

98 pointsoewolf22 comments

A very detailed and well-written document. My favorite line:

   Use CSS sprites generously. They make hover states easy, 
   improve page load time, and reduce carbon dioxide emissions.

Funny and true.

I gave up on IE a long time ago. If they don't support the standards, I don't support them.

Of course my pages still render on IE, but I don't do any quirks mode stuff, that just causes too much pain.

Oh, well, that's not strictly true, since I have to have two different things in the CSS for rounded corners (webkit vs mozilla), but apart from that I try to keep quirks to a minimum, and IE can go die in a fire for all I care.

Do you not worry about viewers that still use IE?

He just implied he doesn't. Not that his pages doesn't render, he just don't care to polish them for IE.

Correct.

Take border-radius for instance. It is 'fluff'. It makes no functional difference to the page whether it is there or not.

Now, for Moz and Webkit, I get nice looking rounded corners for negligible effort. In order to duplicate that look on IE there are any number of ways to do it, but all of them involve enormously much more effort, and are much more fragile (anything where you need pixel perfect positioning is fragile and easily broken by different browser versions).

Additionally, the longer WE support IE's blatant disregard of standards, the less incentive they have to adhere to those standards.

The difficulty with such "standards" and "best practices" is that what is standard can often be subjective. For example, under Indentation, they have:

  For all code languages, we require indentation to be 
  done via soft tabs (using the space character). Hitting 
  Tab in your text editor shall be equivalent to four spaces.

Umm, who died and made you king? <tongue and cheek> I don't like using 4 spaces. I find it a waste of space, literally. In ruby community, 2 spaces is generally accepted.

With that said, it's probably not a bad idea to have discussions around such standards with the understanding that there may be more than one good way to skin a cat.

But they have a standard, and this is good for consistency across their development. What may be better is "follow the standard that you are working on", meaning, don't change coding style because you prefer your own, adopt what is already there, or the norms for a project (e.g. 2 space indents for all that Ruby code we have).

Agreed. Maintaining consistency is key.

On that note, I like the parting words in Google's JavaScript Style Guide ( http://google-styleguide.googlecode.com/svn/trunk/javascript... ):

BE CONSISTENT.

If you're editing code, take a few minutes to look at the code around you and determine its style. If they use spaces around all their arithmetic operators, you should too. If their comments have little boxes of hash marks around them, make your comments have little boxes of hash marks around them too.

The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you're saying rather than on how you're saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this.

I second that consistency is something that is lacking in web development at the moment

Count your blessings that you work in a language that doesn't have ambiguity around indentation rules. These poor fellas obviously don't.

I agree. I personally like 8 spaces, but I code in a way so others can choose their own preferences. Meaning, I use the tab character and avoid ASCII art in my source / comments. This way people can set up their tab width in their editor as they like and don't have to put up with my style de jure.

That's part of collaboration basics:

* Try to find an acceptable middle ground for the minor things and focus on coding and not politics.

* Don't be a douche.

~2¢

Coding standards are helpful and not uncommon when collaborating within a team.

As much as you don't like using 4 spaces, it's much worse to have a codebase littered with some sections using 4 spaces, some sections using tabs, some sections using 2 spaces, some sections using 8 spaces, and some sections using a random assortment of nothing in particular.

Just as you accept the apparent standard of 2 spaces when working within the Ruby community, for consistency's sake I'd hope you would accept the standard of whatever other team you're working with.

Hey,

Isobar front end engineer here...

What you're looking at is a document that serves as OUR internal standard. We just made it public because we think people might find it useful. We understand what we do internally may not work for everyone, but that's part of the fun of sharing documents like this. We learn too.

I think whether you agree with the specific technical points or not, this is a great article. I don't know if "best practices" exist, but consistent practices do, and they make it a lot easier understand other people's code. (and impose a minimum quality standard on people not familiar with the tech yet).

For example, Adobe never really bothered with specifying best practices for Flex, so now every Flex developer's code looks different, and there is a lot of unnecessary trial and error. (Although I like Flex as a framework)

The W3C HTML validator gives up after the second line of the document:

http://validator.w3.org/check?uri=http%3A%2F%2Fna.isobar.com...

Here's the source:

  <!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8">
  <title>Code Standards | Isobar</title> 
  <link rel="stylesheet" href="assets/master.css" /> 
  </head> 
  <body> 



  <!--  
                _^_
               / _)         
        .-^^^-/ /          we like dinosaurs as much as you  do.
    __/       /              
    <__.|_|-|_|             
    
    -->

I see a couple of problems. First up, they're not indenting. The validator is spitting the dummy because of two things, the first is the spurious whitespace before the doctype tag, the second is the title (which it thinks is missing), but the real problem is with the meta tag which isn't properly closed.

But hey, free dinosaur. With hat.

Using html5 (or 4) the meta tag doesn't need to be closed. Personally I prefer to do close or self-close tags anyway as I entered the game with xhtml, whose syntax I still prefer.

Lots of the content (and most of the styling) was adapted from here: http://developer.fellowshipone.com/patterns/code.php

I'm fond of the original because it also includes some great UI design patterns.

Let's take a vote. All in favor of never using the term 'Best Practices' ever, ever, again?

(no offense to the article's author.. actually looks really lucid and well written. I just tire of the idea that Best Practices™ exist. They don't.)

Wow this was very informative and I hope that people will actually take note and start to follow these standard more. The question I have is when should we stop building for certain versions of browsers for example ie7

Great resource. It shall aid me in writing a book about this!

Reply on news.ycombinator.com