Web Development Best Practice #1

WebDevelopmentBestPractice1.md

Web Development Best Practice #1

Compress all images

• All image type (png, jpeg, git)
• Resize (Max size possible to show)
• Keep a certain quality (Not grubby-looking)

Why?

• Don't spend more than enough time for waiting to load a page
• Most Visitors from mobile will never access the slow website again
• Keep within 1MB per page, if possible

Standardize coding rules

• Make indent rules (e.g. 4 spaces, Keep indent line)

Bad

<?php
    if( true ){
            if( true ){
        echo "Hello, World!";
    } else { return; }
    }
?>

Good

<?php
    if( true ){
        if( true ){
            echo "Hello, World!";
        } else {
            return;
        }
    }
?>

Why?

• Easily viewable and editable
• Keep bugs to a minimum
• Result in a rapid web development

Refer to other company's rules

• Google
• Mozilla
• airbnb

Separate JavaScript codes from HTML

• Don't write a lot of JavaScript codes in HTML

Bad

<!-- html -->
<div class="greeting"></div>
<script>
    var element = document.getElementsByClassName('greeting')[0];
    if( element ){
        element.innerHTML = 'Hello!';
    }
</script>

Good

<!-- html -->
<div class="greeting"></div>

// JavaScript
(function(){
    var element = document.getElementsByClassName('greeting')[0];
    if( element ){
        element.innerHTML = 'Hello!';
    }
})();

Why?

• Easily viewable and editable
• Cacheable the codes
• Compressable the codes

But, you can include tiny JavaScript code in limited instances.

Separate CSS styles from HTML

• For much the same reason

Define variables in local scope

• Don't define variables and functions in global scope

Bad

var element = document.getElementsByClassName('greeting')[0];
function renderHello(el){
    el.innerHTML = 'Hello!';
}
renderHello(element);

Good

(function(){
    var element = document.getElementsByClassName('greeting')[0];
    var renderHello = function(el){
        el.innerHTML = 'Hello!';
    }
    renderHello(element);
})();

Why?

• Easily editable
• Keep bugs to a minimum

Use a class of css in HTML

Bad

<div id="contents"></div>

Good

<div class="contents"></div>

Why?

• Variable of JavaScript is defined in global scope if you use the id of CSS in HTML

Use a template engine

• Don't be included HTML in server-side codes

Bad

<?php
    $html = '';
    foreach( $users as $user ){
        $html .= '<div class="user"><div class="userName">';
        if( $current_time==='morning' ){
            $html .= 'Good Morning!';
        } elseif( $current_time==='afternoon' ){
            $html .= 'Hello!';
        }
        $html .= '<br>My name is ';
        $html .= $user->name;
        $html .= '.</div></div>';
    }
?>

Bad

<?php foreach( $users as $user ): ?>
    <div class="user">
        <div class="userName">
            <?php if( $current_time==="morning" ): ?>
                Good Morning!
            <?php elseif( $current_time==="afternoon" ): ?>
                Hello!
            <?php endif; ?>
            <br>
            My name is <?php echo $user->name; ?>.
        </div>
    </div>
<?php endforeach; ?>

Good (In the case of Twig)

{% for user in users %}
    <div class="user">
        <div class="userName">
            {{ greeting }}
            <br>
            My name is {{ user.name }}.
        </div>
    </div>
{% endfor %}

Why?

• Easily viewable and editable
• For Separation of logic and view
• Most designer are weak in server-side code