Amount of inefficient HTML in Strawman


* Completely unscientific measurement

<div class="profileAttribute">
    <label>Account Name</label>
        <span data-bind="text: accountName"></span>
        <span data-bind="if: hasDefaultFlag" class="commentGrayed">
              |  Default for 
            <span data-bind="text: defaultAccountString"></span>
    <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" />
    <button onclick="submitTo('/EmailPreview/SendEmailPreview')"
        class="btn btn-default">
<span style="float: right">
    <button type="button" onclick="toggleViewModelForm()"
        style="width: 160px" class="btn btn-default" id="toggleModelData">
        Show ViewModel

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.

    class="vp-button primary">

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>




Cuong-ponents make life better.

<Vp-Alert />

<Vp-Modal />

<Vp-Typeahead />

<Vp-Button />


By David Khourshid