training-day-html

View Github Repository Open presentation in a new window

yargalot

See all presentation from yargalot

training-day-html

1 0

training-day-html

Carsales html training

On Github yargalot / training-day-html

Front end Series

HTML, CSS, JS and Performance

HTML

The Living standard

How bad does that sound

HTML 4 to 5

Whats new you can use right now

<!DOCTYPE html>
<html lang="en" class="html5">
  ...
</html>
Put your speaker notes here. You can see them pressing 's'.

Whats New

  • Different Syntax
  • New Element Tags
  • New API's (drag & drop, localstorage etc)
  • New Attributes (placeholder)

W3C

New Layout Tags

Layout tags should be used for semantics

Mozilla Network Can I use

####Main The HTML main element represents the main content of the body of a document or application ####Nav The HTML Navigation Element nav represents a section of a page that links to other pages or to parts within the page: a section with navigation links. (A document may have several nav elements, for example, one for site navigation and one for intra-page navigation.) ####Aside The HTML aside Element represents a section of a page that consists of content that is tangentially related to the content around it, which could be considered separate from that content.

How the hell does that work?

  <header></header>
  <nav></nav>
  <main role="main">
    <section>
      <article></article>
      <article></article>
    </section>
    <aside></aside>
  </main>
  <footer></footer>

SVG

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

Other Tags

Whats the other tags

The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. The HTML Element represents an integration point for an external application or interactive content (in other words, a plug-in).

Typing

Heading tags importance are reset when they are placed in a section or an article tag

<h1>Page Heading</h1>

<article>
  <h1>Article Heading</h1>

  <h2>Article Subheading</h2>
</article>

figure and figcaption

Naysayin like a boss
<figure>
  <img src="images/naysay.jpg" alt="Macaque in the trees">
  <figcaption>Naysayin like a boss</figcaption>
</figure>
The img element represents an image. and the The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Things you should use

<h1></h1> through to <h6></h6>

<b></b> -> <strong></strong>
<i></i> -> <em></em>

<small></small>

<dl>
  <dt></dt><dd></dd>
</dl>

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
For purely visual emphasis, <i> and <b> are still valid and the preferred tags.

I ❤ forms

New <input> types

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Do they work in Old Browsers?

Yes, it will fall back to type="text"

WHAT ABOUT VALIDATION OMG

Thats why new validation libraies use the 'required' attribute

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <label for="cname">Name (required, at least 2 characters)</label>
    <input id="cname" name="name" minlength="2" type="text" required/>
    <label for="cemail">E-Mail (required)</label>
    <input id="cemail" type="email" name="email" required/>
    <label for="curl">URL (optional)</label>
    <input id="curl" type="url" name="url"/>
    <input class="submit" type="submit" value="Submit"/>
  </fieldset>
</form>

jQuery Validation

Attributes

Here are some examples

  • Autofocus
  • dropzone
  • data-*
<article
  id="electriccars"
  data-columns="3"
  data-indexnumber="12314"
  data-parent="cars">
</article>

var article = document.querySelector('#electriccars'),
              data = article.dataset;

article::before {
  content: attr(data-parent);
}

Read about them here Mozilla Developer Network

Autofocus - The element should be automatically focused after the page loaded. Dropzone - Indicates that the element accept the dropping of content on it. Data - This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.

APIs for HTML

Media elements (video and audio) have APIs for controlling playback, syncronising multiple media elements, and timed text tracks (e.g. subtitles).

An API for commands that the user can invoke.

An API that enables offline Web applications, with an application cache.

Editing API in combination with a new global contenteditable attribute.

Drag & drop API in combination with a draggable attribute.

The manifest attribute references a cache manifest file, which is a text file that lists resources (files) that the browser should cache for your application.

API

An API that exposes the components of the document's URL and allows scripts to navigate, redirect and reload the Location interface.

An API that exposes the session history and allows scripts to update the document's URL without actually navigating, so that applications don't need to abuse the fragment component for "Ajax-style" navigation the History interface.

An API for printing the document (print()).

The Window object has been defined.

Fullscreen API

API

Just look at the examples instead

Mozilla Network HTML5 Guide HTML API

Deprecated

  • acronym Defines an acronym
  • applet Defines an applet
  • basefont Defines an base font for the page.
  • big Defines big text
  • center Defines centered text
  • dir Defines a directory list
  • font Defines text font, size, and color

Deprecated

  • frame Defines a frame
  • frameset Defines a set of frames
  • isindex Defines a single-line input field
  • noframes Defines a noframe section
  • s Defines strikethrough text
  • strike Defines strikethrough text
  • tt Defines teletype text
  • u Defines underlined text

Deprecated

Blink

Marquee

Degredation

Modernizr is your friend

How do I use it in js?

Simply put

if (Modernizr.localstorage) {
  localstoage.set('herp', 'derp')
} else  {
  $.cookie('jquery sucks')
}

How do I use it in css?

In css

.no-csstransforms .your-element {}

or less 

.your-element {
  -webkit-transform: 34534534;

  .no-csstransforms & {
    display:none;
  }
}

Shiving IE8

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.

Youll need to style these elements with normalize.css

Accessibility

Automatically test it

Why?

Lets use a screenreader on carsales

Semantics

Rule 1: Dont be a dick

Rule 2: Read this

Do this

<article>
  <h1>Welcome</h1>
  <p>This is your <span>First day</span></p>
</article>

Dont do this

<p>
  <div class="header">Welcome</div>
  <section>
    This is your <article>first day</article>
  </section>
</p>

Tooling around

ul>li*5

produces

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Preprocessors

Examples

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple templating language with a
        strong focus on performance and powerful features.

Markdown example

## Semantics

Rule 1: Dont be a dick

Rule 2: [Read this](http://diveintohtml5.info/semantics.html)

How does that work bro

Lets find out

Maintenence

  • Seperation of Jade files - footer, header
  • Proper templating
  • Consistence in naming conventions (for the love of god)

None of this

Pick one and stick with it

<div class="area-header" id="areaHeader"></div>

None of that

HTML is for data, CSS is for presentation

<div style="width:80px; I-am-a-giant-douche:true"></div>

And especially none of these

Follow the pattern in your project, not your code editor

<section>
  <article>
    <span>
<p>Who cares abour indenting</p>
    </span>
  </article>
</section>

The Future

Web components and the shadow dom

( In a nutshell, they allow us to bundle markup and styles into custom HTML elements)

Brace yourselves, Flexbox is coming

by ryen margherrtuits

Resources