Front End Development

“It is impossible for a man to learn what he thinks he already knows.”

- Epictetus, Discourses, Book II, ch. 17

A Tripartite Relationship on Front End Development

Introduction

W3C

prepares the rules and usage guidelines

Developer

crafts the imagination into reality

Browser

displays the reality in real

First

Things

First

Valid & Minimal Code

Chapter I

VALID & MINIMAL CODE

W3C Validated Code

  • Doctype declration
  • Style sheets on header
  • Meta tags on header
  • DOM manipulating JavaScripts on footer
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Awesome Website</title>

        <!-- META TAGS -->
        <meta charset="utf-8">

        <!-- STYLESHEETS -->
        <link href="path/to/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <p>My Awesome Website</p>

        <!-- JAVASCRIPTS -->
        <script src="path/to/javascript.js"><script>
    </body>
</html>

VALID & MINIMAL CODE

W3C Validated Code

W3C Markup Validation Service

https://validator.w3.org/

Can also be used from Firefox and Chrome's Web Developer extension

VALID & MINIMAL CODE

Other Validation Tools

HTML CodeSniffer

by Squiz Labs

https://squizlabs.github.io/HTML_CodeSniffer/

CSS Lint

by CSS Lint

https://github.com/CSSLint/csslint

  • Find more and more tools like searching with terms like "lint", "sniffer", "validator" etc.
  • And don't forget to check your Editor/IDE extensions

VALID & MINIMAL CODE

Valid & Minimal Code

Block element vs. Inline element

vs.

VALID & MINIMAL CODE

Block vs. Inline Element 

<p>My Bengal of Gold,<br>
I love you.</p>

My Bengal of Gold,

I love you.

<p>My Bengal of <div style="color: gold">Gold<div>,<br>
I love you.</p>
<p>My Bengal of <span style="color: gold">Gold<span>,<br>
I love you.</p>

My Bengal of Gold,

I love you.

My Bengal of

Gold

,

I love you.

Learn more:

https://www.w3schools.com/html/html_blocks.asp

VALID & MINIMAL CODE

Block element within Inline element 

<!DOCTYPE html>
<a href="http://example.com">
   <div class="left-content">Left Content with width 80%</div>
   <div class="right-content">Right Content with width 20%</div>
</a>

Left Content with width 80%

Right Content with width 20%

HTML4

a = inline element

div = block element

HTML5

a = phrasing content

div = flow element

invalid

valid

Learn more:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

“Simplicity is the most difficult thing to secure in this world; it is the last limit of experience and the last effort of genius.”

- George Sand

VALID & MINIMAL CODE

Minimal Code 

<div class="container">
    <div class="header" style="float: left; width: 100%">
        H
    </div>
    <div class="article" style="float: left; width: 80%">
        A
    </div>
    <div class="sidebar" style="float: left; width: 20%">
        S
    </div>
    <div class="footer" style="float: left; width: 100%">
        F
    </div>
</div>
<div class="container">
    <div class="header">
        H
    </div>
    <div class="article" style="float: left; width: 80%">
        A
    </div>
    <div class="sidebar" style="float: left; width: 20%">
        S
    </div>
    <div class="footer">
        F
    </div>
</div>

Semantic Coding

Chapter II

SEMANTIC CODING

Semantic?

Bring my blue t-shirt please...

SEMANTIC CODING

Semantic Markup 

<!DOCTYPE html>
<div class="container">
    <div class="header">H</div>
    <div class="article">A</div>
    <div class="sidebar">S</div>
    <div class="footer">F</div>
</div>
<!DOCTYPE html>
<div class="container">
    <header>H</header>
    <article>A</article>
    <aside>S</aside>
    <footer>F</footer>
</div>

SEMANTIC CODING

Semantic Markups: HTML5 

<!DOCTYPE html>
<!-- ... -->
<div class="container">
    <header>
        Header
    </header>
    <main>
        <section>
            Section
            <article>
                <header class="entry-header">
                </header>
                <div class="entry-meta">
                    <time>date/time here</time>
                </div>
                <div class="entry-content">
                    <figure>
                        <img src="path/to/image.ext" alt="Image Alternative text">
                        <figcaption>Caption of the figure above</figcaption>
                    </figure>
                    <p>Some text with <mark>highlighted text</mark> inside</p>
                </div>
                <footer class="entry-footer">
                </footer>
            </article>
        </section>
        <aside>
            Sidebar
        </aside>
    </main>
    <footer>
        Footer
    </footer>
</div>
  • header
  • footer
  • main
  • article
  • section
  • aside
  • time
  • mark
  • figure
  • figcaption
  • nav
  • summary
  • details

SEMANTIC CODING

Semantic Markups: HTML4

  • table
  • thead
  • tbody
  • tfoot
  • form
  • input
  • textarea
  • button
  • strong
  • em
  • pre
  • ...

Semantic markups are not just a HTML5 monopoly, they're dated back to HTML4 too.

Browser Compatibility

Chapter III

BROWSER COMPATIBILITY

Normalize.css

by Nicolas Gallagher

https://github.com/necolas/normalize.css/

Reset.css

by Eric A. Meyer

https://meyerweb.com/eric/tools/css/reset/

Tools

Remove Unwanted Glitches

BROWSER COMPATIBILITY

IE Conditionals

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Targeted for any version of IE

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target everything, but not IE

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target only IE 6

more & more variations...

https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Conditional comments only work in IE

BROWSER COMPATIBILITY

Vendor Prefixes

.some-class{
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
}

border-radius - once upon a time

.some-class{
    border-radius: 10px;
}

border-radius- now

Enabling interim supports to some newly available CSS declarations

-webkit-

Any webkit browsers, eg. Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS)

-moz-

Mozilla Firefox

-o-

Old, pre-WebKit, versions of Opera

-ms-

Internet Explorer and Microsoft Edge

BROWSER COMPATIBILITY

Vendor Prefixes

.some-class{
    -webkit-transition: all .5s;
         -o-transition: all .5s;
       -moz-transition: all .5s;
            transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

transition & user-select - now

BROWSER COMPATIBILITY

Modernizr

by Faruk, Paul, Alex, Ryan, Patrick, Stu, Richard

https://modernizr.com

The HTML5 Shiv

by Alexander Farkas

https://github.com/aFarkas/html5shiv

Tools

Add Missing Supports

Well Commented & Well Documented Code

Chapter IV

“Any fool can write code that a computer can understand.

Good programmers write code that humans can understand.”

- Martin Fowler

“If you ask a developer how they learned to code, most of them will not mention university or ... book that they read, most of them will mention 'code I read that was written by people who have more experience than me.'”

- Gitlab.com

COMMENTED & DOCUMENTED CODE

Indentation & Line-spacing

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Kauwa Kala</title>
    </head>

    <body>

        <h1>Kauwa Kala</h1>
        <p>Kaliya Kala</p>

        <div class="main-block">
            Main block content

            <div class="sub-block">
                Sub block content
            </div>

            <div class="sub-block">
                Another Sub block
            </div>

        </div>
        <!-- /.main-block -->

    </body>
</html>

Let your code breath

<!DOCTYPE html>
<html lang="en">
<head>
<title>Kauwa Kala</title>
</head>
<body>
    <h1>Kauwa Kala</h1>
    <p>Kaliya Kala</p>
    <div class="main-block">
        Main block content
    <div class="sub-block">
        Sub block content
    </div>
    <div class="sub-block">
        Another Sub block
    </div>
    </div>
    <!-- /.main-block -->
</body>
</html>

COMMENTED & DOCUMENTED CODE

HTML Commenting

<div class="meta-data">
    Meta data here
</div>
<!-- /.meta-data -->

Mark the ending

<?php foreach( $meta_data as $id => $data ) : ?>

    <div class="meta-data" id="<?php meta-<?php print($id); ?>">

        Meta data here

    </div>
    <!-- /.meta-data #meta-<?php print($id); ?> -->

<?php endforeach; ?>

Mark the ending dynamically

COMMENTED & DOCUMENTED CODE

CSS Commenting

/* Heading */
header{
    padding: 20px;
}


/**
 * HEADING
 * heading portion of the site from top, until main
 * ----------------------
 */
header{
    padding: 20px;
}

Segregate code with comment blocks

COMMENTED & DOCUMENTED CODE

SCSS/LESS Commenting

/*! Heading */
header{
    padding: 20px;
}


/**
 * HEADING
 * heading portion of the site from top, until main
 * ----------------------
 */
header{
    padding: 20px;
}


// Heading
header{
    padding: 20px;
}

Keep comments when minifying using "*!"

COMMENTED & DOCUMENTED CODE

Commenting Tools

.class-name|c

<div class="class-name"></div>
<!-- /.class-name -->

Emmet/Zen Coding

/**[↵ enter]

/**
 * [comment here]
 */

DocBlockr Plugin for Sublime Text

Find plugin/add-on/extension for your editor/IDE for easy commenting

COMMENTED & DOCUMENTED CODE

Developer Log

Maintain a developer log

where commenting can't serve the voice

you want to pass on

COMMENTED & DOCUMENTED CODE

Proper Version/Revision Control

Well versed comments in your revision will save you in hell

$ git commit -m "Modified"
$ git commit -m "District module will load based on Division

The district module will be called upon AJAX request based on the value of division

Closes #22"
$ git commit -m "District module changed"

and well-commented revision control is a nicer way of documenting code

Learn more at the Angular JS contributing guideline

https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md

Become a keyboard-freak

if you are a developer

you are not a common folk

COMMENTED & DOCUMENTED CODE

MVC for CSS!

BEM

Block-Elements-Modifiers

OOCSS

SMACSS

SUITCSS

Atomic

Learn more at GetBEM

http://getbem.com/introduction/

SMACSS

https://www.toptal.com/css/smacss-scalable-modular-architecture-css

COMMENTED & DOCUMENTED CODE

BEM

Block

Element

Modifier

.button{}
.button__cart{}
.button--green{}
.button--large{}

block components

elements depends on block

changes the style of the block

<a class="button button--large button--green button__cart" href="http://example.com">
      <span class="button__text">Add to Cart</span>
</a>

example

“Replace 'can you build this?' with 'can you maintain this without losing your mind?'”

- Nicolas (@necolas)

On-site SEO

Chapter V

ON-SITE SEO

The Basics

Search engines consume contents, I repeat, contents

texts

markups

audio-visuals

images

flash contents

ON-SITE SEO

The Basics

Search engines scour links, I repeat, links

<a href="http://link/to/content">Link Text</a>

ON-SITE SEO

HTML for SEO

Single <h1>

in a single DOM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    </head>
    <body>
        <h1>Site Title</h1>
        <h2>Site Description</h2>

        <div class="article">
            <h3>Content Title</h3>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>Site Title</h1>
        <h2>Site Description</h2>

        <article>
            <h1>Content Title</h1>
        </article>
    </body>
</html>

Multiple <h1>

in HTML5 block elements

ON-SITE SEO

HTML for SEO

<!DOCTYPE html>
<html>
    <head>

        <title>Page Title - Site Title Here</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="description">A description of the page</meta>

        <!-- META TAGS HERE -->

    </head>
    <body>
        <!-- body content here -->
    </body>
</html>

What could be in head - by Josh Buchea

https://github.com/joshbuchea/HEAD

Meta Tags

ON-SITE SEO

Link Juice and nofollow

Internal links

<a href="http://link/to/internal-content">Link Text</a>

External links

<a href="http://link/to/external-content">Link Text</a>
<a href="http://external-link" rel="nofollow">Link Text</a>

ON-SITE SEO

alt attribute for images

Describe what's in the image

<img src="path/to/image.ext" alt="A sheep is eating grass">

Facebook's Research on automatic alt text generation

https://research.fb.com/accessibility-research-developing-automatic-alt-text-for-facebook-screen-reader-users/

ON-SITE SEO

Breadcrumbs/Cookie Crumb/Navigation Path

Home » Category » Content Title

Breadcrumb schema

http://schema.org/BreadcrumbList

Accessibility

Chapter VI

ACCESSIBILITY

Understanding

A11y

A[ccessibilit]y

Web Content Accessibility Guidelines (WCAG)

https://www.w3.org/WAI/standards-guidelines/wcag/

ACCESSIBILITY

Type of Disabilities

What we need to care about:

 

  • Blindness/Deafness/Muteness
  • Color Blindness
  • Dyslexia
  • Motor Disability
  • etc...

Glossary

"What is the first business of one who practices philosophy? To get rid of self-conceit. For it is impossible for anyone to begin to learn that which he thinks he already knows."

- Epictetus, Discourses, Book II, ch. 17

unsorted >

ExtractCSS

Get all the inline CSS into an external stylesheet

https://github.com/adnantopal/extractcss

Tools

HTML Code Sniffer

https://squizlabs.github.io/HTML_CodeSniffer/

Law of UX

https://lawsofux.com/

  • Fitts’s Law
  • Hick’s Law
  • Jakob’s Law
  • Law of Prägnanz
  • Law of Proximity
  • Miller’s Law
  • Parkinson’s Law
  • Serial Position Effect
  • Tesler’s Law
  • Von Restorff Effect

Front End Development

By Mayeenul Islam

Made with Slides.com

Front End Development

  • 673

More from Mayeenul Islam