Writing

Awesome

Code

Hans Christian Reinl

Front-End Developer, Freiburg/Germany

drublic.de • info@drublic.de • @drublic

Projects

and others: github.com/drublic

Writing

Awesome

Code

Today

Good code style is what matters in your team!

Code smell weakens your project!

Be practical.

2013 is the year you will write awesome code.

Code Style

Everyone’s code is different

Changing behavior is hard

Don’t force people

To change behavior you need to understand

Changing Bevior

Biological reasons and logical thinking.

Choice and models of agency.

Social belonging.

Goals and feedback.

~

Create code-conventions together

Code Conventions

Why?

Maintenance.

Improve readbility and understanding.

How?

Best practices.

Use resources.

2013

is the year to focus on your coding conventions.

Code Smell

Code Smell

"Bad Code"

not a bug - not technically incorrect

error prone

weaknesses in design

deeper problem in your code

~

CSS Smell

div.gray-button.button-big {
    color: #bada55;
}

.button-big {
    color: hotpink !important;
}

JS Smell

$('.class-1').data('select', 1)
    .text('Select 1').hide();

$('.class-2').data('select', 2)
    .text('Select 2').hide();

$('.class-3').data('field', 'indication')
    .text('Select 1');

If it stinks, change it.

citet by Kent Beck in "Refactoring: Improving the Design of Existing Code"

Principles

Don‘t repeat yourself

DRY

Don‘t write code in advance

YAGNI

Worse is Better

Simplicity

Correctness

Consistency

Completeness

Worse is better

Good Code

Don‘t confuse others!

Awww, this is so smart!

var ಠ_ಠ = ლ_ಠ益ಠ_ლ === ☃ ?
           (☃ + π == 0 ? "\u2603" : ß) :
           3.1415926535897931159979634685

No, it‘s not!

Code is written for humans

not machines

Detect Code Smell

Stick to Principles

Front-end

HTML

Build it awesome.

Douchy Soup

<div class="article">
    <div class="article-header">
        <div class="article-headline">Some stupid headline</div>
        <span class="article-date">04.10.2012</span>
    </div>
    <div class="article-body">...</div>
</div>

Awesomeness

<article>
    <header>
        <h1>Some stupid headline</h1>
        <time>04.10.2012</time>
    </header>
    <div class="article-body">...</div>
</article>

CSS

Naming conventions & robust patterns.

Re-use code.

JavaScript

Use naming conventions.

Decouple things.

JavaScript

var peter = "<div class=\"person\">\
            <div class=\"some-classname\">\
            </div></div>";

    $peter = $('body').css({ display: "block" }).append(peter);

    var classText = "Douchy Text";
    var text = $('.person').find('.some-classname').text(classText);

Use JSHint

Test your code

As a Result…

"Easier to read"-code.

Faster development.

Prevents confusion.

More "real" work.

Guide for this year

Set up coding conventions

Detect and eliminate potential code smells

Improve consistently

Questions?

♥