Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発

kadoppe
October 26, 2013

まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発

2013/10/26に大阪で開催されたInnovation EGG 第1回のセミナーで使ったプレゼン資料です。

http://eventregist.com/e/InnovationEGG01

kadoppe

October 26, 2013
Tweet

More Decks by kadoppe

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ  !LBEPQQF • ৬ۀ •

    ιϑτ΢ΣΞΤϯδχΞ • ॴଐ • )5.-8&45KQגࣜձࣾγΣΞ΢Οζ
  2. ग़ձ͍ •  • ژ౎(56()5.-ϋοΧιϯʹࢀՃ • +BWB4DSJQU)5.-ॳ৺ऀͰͨ͠ • ͦͷޙ •

    )5.-ಡॻձ΍ϋοΧιϯʹͭ͘͜͠ࢀՃ • ίΞϝϯόʔͱ͓ͯ͠༠͍Λ͏͚Δ
  3. .box { animation: an-animation 2s infinite; } @keyframes an-animation {

    0%, 100% { left: 0px; } 50% { left: 100px; } }
  4. <canvas id="canvas" width="150" height="150"></canvas> <script> ! var canvas, ctx; canvas

    = document.getElementById('canvas'); ! ctx = canvas.getContext('2d'); ! ! ctx.strokeStyle = "#FF0000"; ! ctx.strokeRect(25, 25, 100, 100); ! ! ctx.fillStyle = "#FFCC00"; ! ctx.fillRect(25, 25, 100, 100); </script>
  5. BQQσΟϨΫτϦͷத਎ • IUNM • CPXFS@DPNQPOFOUT • JNBHFTը૾ϑΝΠϧΛ഑ஔ • JOEFYIUNM •

    SPCPUTUYU • TDSJQUT+BWB4DSJQUϑΝΠϧΛ഑ஔ • TUZMFT$44ϑΝΠϧ
  6. <html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius

    boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
  7. require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: {

    exports: 'd3' } } }); NBJOKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ
  8. .wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover

    { text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }