Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
490
Accessibility and how to get the most from your screenreader - EpicFEL
edds
0
410
What even is a table? A quick look at Accessibility APIs
edds
8
1.8k
Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns
edds
2
260
Accessibility and how to get the most from your screenreader - Front End North
edds
3
740
Using D3.js to visualise your analytics data
edds
0
600
GOV.UK Case Study - Fronteers 2013
edds
2
790
Using Sass on GOV.UK
edds
8
670
What the flash - Photography Introduction
edds
64
10k

Other Decks in Programming

See All in Programming
Jongler en asynchrone avec Symfony HttpClient
alli83
1
540
クローズドなサービスをIdentity-Aware Proxyを使って安全に公開する
yamato_sorariku
0
110
一緒にスクラム開発___GPT-4と人間が共創するプロダクトの進化.pdf
itohiro73
5
6.5k
AT Protocol (BlueSky Social)仕様解説 ～ W3C DID仕様を添えて ～
gpsnmeajp
0
140
Symfony ImportMaps: Manage Your JavaScript Dependencies Without Node
dunglas
1
1k
ふんわり使うPlantUML
suzuki
0
240
本当に 0 からの 関数型プログラミングの歩き始め方 / How to Walk into Functional Programming from Scratch
guvalif
1
440
私がSymfonyはいいぞ、Doctrineはいいぞと言い続ける理由
77web
3
220
K/NとNSKeyedArchiverと私
ryunen344
0
180
どこでも動くWebフレームワークをつくる
yusukebe
13
6.7k
ChatGPTによるデータ変換がもたらすインパクト
masahiro_nishimi
3
4.2k
Laravelへの異常な愛情 または私は如何にして心配するのを止めてEloquentを愛するようになったか
kentaroutakeda
8
3.6k

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
65
7.9k
Statistics for Hackers
jakevdp
785
210k
YesSQL, Process and Tooling at Scale
rocio
159
13k
Robots, Beer and Maslow
schacon
154
7.4k
The Language of Interfaces
destraynor
149
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
5.1k
BBQ
matthewcrist
75
8.2k
In The Pink: A Labor of Love
frogandcode
133
21k
Product Roadmaps are Hard
iamctodd
38
7.9k
Stop Working from a Prison Cell
hatefulcrawdad
264
18k
GraphQLの誤解/rethinking-graphql
sonatard
39
8k
Code Review Best Practice
trishagee
50
12k

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. br/>"http://www.w3.org/TR/html4/strict.dtd">

    View Slide

  11. br/>"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. 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
    “required” %>

    View Slide


  25. or in rails
    “[A-Z]{2}” %>

    View Slide


  26. or in rails
    “17”, :max => “65” %>

    View Slide


  27. or in rails
    “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