$30 off During Our Annual Pro Sale. View Details »

HTML5

Edd S
April 18, 2012
Programming
11
1.6k

 HTML5

Slides from an internal talk I gave at MintDigital. The first section was on new things we got with HTML5 and the second half was pointing out how we could improve our code internally.

Edd S

April 18, 2012
Tweet

More Decks by Edd S

See All by Edd S
Using React at Deliveroo - LRUG
edds
0
540
Accessibility and how to get the most from your screenreader - EpicFEL
edds
1
450
What even is a table? A quick look at Accessibility APIs
edds
8
2k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
280
Accessibility and how to get the most from your screenreader - Front End North
edds
3
800
Using D3.js to visualise your analytics data
edds
0
630
GOV.UK Case Study - Fronteers 2013
edds
2
840
Using Sass on GOV.UK
edds
8
730
What the flash - Photography Introduction
edds
64
11k

Other Decks in Programming

See All in Programming
Unity Searchを拡張して高度な検索型UIを実現する
trapezoid
0
550
ニフティ社内ISUCON開催への道のり - NIFTY Tech Day 2023
niftycorp
0
140
VimConf 2023 Tiny
skanehira
1
220
「defineCustomElement」を活用した サービス共通のUIコンポーネントライブラリ
piyoppi
0
230
WantedlyでFeature Storeを導入する際に考えたこと
zerebom
1
410
集団意思決定の落とし穴と誰も望まない技術的負債
h0r15h0
0
2.7k
エンジニア秘書が通訳する異文化コミュニケーションのあれこれ / engineer-communication
assu_ming
0
130
ニフティ開発インターンで使うAWS環境をできるだけ楽に構築した話 (LT) - NIFTY Tech Day 2023
niftycorp
0
120
TypeScript_コンパイラの内側に片足を入れる
ryounasso
1
220
個人から始める開発生産性向上
takamin55
1
220
コンピュータグラフィクスの空
fadis
5
1.4k
DIY Python Debugger
parttimenerd
0
960

Featured

See All Featured
Happy Clients
brianwarren
91
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k
For a Future-Friendly Web
brad_frost
168
8.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.7k
The Brand Is Dead. Long Live the Brand.
mthomps
48
7.5k
Clear Off the Table
cherdarchuk
81
300k
How STYLIGHT went responsive
nonsquared
89
4.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.7k
The Cost Of JavaScript in 2023
addyosmani
10
3.1k
Designing for humans not robots
tammielis
246
24k

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. HTML

    View Slide

  5. Benefits

    View Slide

  6. Semantics

    View Slide

  7. Accessibility

    View Slide

  8. New Features

    View Slide


  9. View Slide

  10. "http://www.w3.org/TR/html4/strict.dtd">

    View Slide

  11. "http://www.w3.org/TR/html4/strict.dtd">

    View Slide


  12. View Slide



  13. View Slide


  14. View Slide


  15. View Slide


  16. View Slide

  17. “The aside element represents a section of
    a page that consists of content that is
    tangentially related to the content around
    the aside element, and which could be
    considered separate from that content.”
    - http://dev.w3.org/html5/spec/Overview.html#the-aside-element

    View Slide


  18. View Slide


  19. tel
    url
    email
    range
    date and time
    search
    color

    View Slide

  20. <% form_for :user do |f| %>


    <%= f.label :email %>
    <%= f.email_field :email %>


    <% end %>

    View Slide






  21. View Slide

  22. How did you hear about us?


    please choose...
    Television
    Radio
    Newspaper
    Other

    If other, please specify:


    View Slide

  23. View Slide


  24. or in rails
    <%= f.email_field :email, :required => “required” %>

    View Slide


  25. or in rails
    <%= f.text_field :state, :pattern => “[A-Z]{2}” %>

    View Slide


  26. or in rails
    <%= f.number_field :age, :min => “17”, :max => “65” %>

    View Slide


  27. or in rails
    <%= f.number_field :age, :step => “1” %>

    View Slide


  28. View Slide



  29. View Slide

  30. Browser Support?

    View Slide

  31. View Slide

  32. View Slide


  33. BRAND_NAME


    BRAND_NAME

    View Slide


  34. BRAND_NAME


    BRAND_NAME
    FAIL

    View Slide

  35. Meet:

    View Slide

  36. The SHIM
    Meet:

    View Slide

  37. JavaScript?

    View Slide

  38. What do we
    do Edd?

    View Slide


  39. ...

    Edd’s
    Top Tip

    View Slide

  40. POSH
    Code

    View Slide


  41. 10 Loves

    View Slide


  42. 10 Loves

    BAD!

    View Slide


  43. 10 Loves

    View Slide


  44. 10
    ...

    View Slide


  45. 10
    ...

    BAD!

    View Slide


  46. 10
    ...

    View Slide


  47. ...
    ...

    View Slide


  48. ...
    ...

    BAD!

    View Slide


  49. ...
    ...

    View Slide


  50. ...

    View Slide


  51. ...

    BAD!

    View Slide


  52. ...

    View Slide


  53. Submit

    View Slide


  54. Submit

    BAD!

    View Slide


  55. Submit

    View Slide


  56. ...
    ...

    View Slide

  57. BAD!

    ...
    ...

    View Slide


  58. ...
    ...

    View Slide