Amount of inefficient HTML in Strawman

87%*

* Completely unscientific measurement

<div class="profileAttribute">
    <label>Account Name</label>
    <span>
        <span data-bind="text: accountName"></span>
        <span data-bind="if: hasDefaultFlag" class="commentGrayed">
              |  Default for 
            <span data-bind="text: defaultAccountString"></span>
        </span>
    </span>
</div>
<p>
    <label for="Amount">Amount</label>
    $<input data-bind="value: amountMin"
        name="AmountMin" type="text" placeholder="min" class="formInputShort inline" />
    $<input data-bind="value: amountMax"
        name="AmountMax" type="text" placeholder="max" class="formInputShort inline" />
</p>
<span>
    <button onclick="submitTo('/EmailPreview/SendEmailPreview')"
        class="btn btn-default">
            Send
        </button>
    </span>
<span style="float: right">
    <button type="button" onclick="toggleViewModelForm()"
        style="width: 160px" class="btn btn-default" id="toggleModelData">
        Show ViewModel
    </button>
</span>
<div>
    <br/>
</div>

Accessibility (A11y)

  • Add Alternative Text to Your Logo
  • Add Basic ARIA Landmarks
  • Enhance Focus Indicators
  • Identify Required Form Fields
  • Make Your Page Title an <h1>
  • Identify Table Headers
  • Identify Table Captions
  • Avoid “Click Here” Links
  • Only use 0 and -1 tabindex
  • Check Your Page in WAVE

Semantic Structure

"What is everything?"

- Socrates, probably

The EAV Model 

  • Entity - the item being described
  • Attribute - what of the entity is being described
  • Value - the value of the specified attribute

Introducing ANTES*.

* I just wanted a catchy name.

<button
    class="vp-button primary">
</button>

This changes everything. Again.

  • Anterior
  • Nomenclature for
  • Terse and
  • Expressive
  • Selectors

The world's most efficient HTML.

  • Entity prefixed with vp-
  • Traits unprefixed
  • Attribute-Traits dashed
  • 35% better
<div class="vp-modal">

 16.9 mm ------ [

<div class="vp-panel text-center">
    <h2>You have useless Feebies.</h2>
    <p>Lorem ipsum dolor sit amet, carpe diem. Amen.</p>

    <button class="vp-button primary block">
        <span>I agree.</span>
    </button>
</div>

Entity

Attribute-Value

(Attribute)-Values

Cuong-ponents make life better.

<Vp-Alert />

<Vp-Modal />

<Vp-Typeahead />

<Vp-Button />

The

By David Khourshid

Loading comments...

More from David Khourshid