Become	
  a	
  Frontend	
  Developer	
  Ninja	
  
using	
  HTML5,	
  JavaScript	
  and	
  CSS3
	
  
Marco Casario
CTO Comt...
Chi	
  sono
Www.Marcocasario.Com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
Friday, April 11, 14
I	
  miei	
  ulCmi	
  libri
Www.Marcocasario.Com 3
Friday, April 11, 14
I	
  miei	
  corsi
Www.Marcocasario.Com 3
HTML5, RWD, JS
training.codemotion.it
Friday, April 11, 14
AGENDA
Friday, April 11, 14
Agenda
Www.Marcocasario.Com 28
AutomaCng	
  &	
  TesCng
Best	
  PracCces
OpCmizaCons
Friday, April 11, 14
WHAT	
  MAKES	
  YOU	
  A	
  
FRONTEND	
  NINJA	
  DEVELOPER	
  
Friday, April 11, 14
Www.Marcocasario.Com 28
Friday, April 11, 14
Languages	
  +	
  Libraries	
  +	
  Frameworks
Www.Marcocasario.Com 28
Friday, April 11, 14
Velocity
What are the the ingredients of
a Frontend Developer Ninja ?
Www.Marcocasario.Com 28
Friday, April 11, 14
Page	
  weight	
  grows
http://httparchive.org/trends.php?s=Top1000&minlabel=Nov
+15+2010&maxlabel=Apr+1+2014#bytesTotal&r...
Mobile	
  Devices	
  &	
  Large	
  Screens
Www.Marcocasario.Com 28
https://www.flickr.com/photos/lukew
Friday, April 11, 14
Velocity
Desktop users are more or less
satisfied with the status quo
(but pages are going bigger)
Www.Marcocasario.Com 28
...
Measuring	
  the	
  load	
  Cme
Www.Marcocasario.Com 28
Friday, April 11, 14
Velocity
Take your time to code.
When you invest time you can
get closer to a core of a
problem.
Www.Marcocasario.Com 28
F...
Velocity
DISCLAIMER.
Www.Marcocasario.Com 28
Friday, April 11, 14
OPTIMIZATIONS
Friday, April 11, 14
Why	
  is	
  it	
  important	
  ?
You can’t optimize
what you can’t measure
Www.Marcocasario.Com 28
Friday, April 11, 14
Why	
  is	
  it	
  important	
  ?
Learning how the browsers
load your web pages, helps you:
make better decisions,
justify...
Browser’s	
  rendering	
  flow
Www.Marcocasario.Com 28
Friday, April 11, 14
Browser’s	
  rendering	
  flow
It’s not a linear flow.
Each time a resource needs to
be downloaded, it blocks the
rendering....
How	
  to	
  opCmize
In order to optimize you:
1. identify & mesure a scenario
2. define what the fastest you
can get is
Ww...
How	
  to	
  opCmize
The Speed Index
Www.Marcocasario.Com 28
https://sites.google.com/a/webpagetest.org/docs/
using-webpag...
How	
  to	
  opCmize
The Speed Index is the average time at
which visible parts of the page are
displayed.  It is expresse...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the
curve" calculated in ms and using 0.0-...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the
curve" calculated in ms and using 0.0-...
How	
  to	
  opCmize
Identify the Load Time & the
End of Activity
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Get a visual representation of
the user’s perception of what’s
happening
Www.Marcocasario.Com 28
Frid...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0
Frid...
How	
  to	
  opCmize
Focus on:
the speed index value
the total load time
the render time
the bandwidth
Www.Marcocasario.Co...
How	
  to	
  opCmize
Is the bandwidth so important
for faster pages ?
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
For getting fast pages, what is
the right number of requests
and optimal page size ?
Www.Marcocasario...
How	
  to	
  opCmize
Measuring performance by the KB is
like measuring effectiveness of your
diet by the pound.
Measuring p...
How	
  to	
  opCmize
Moreover, not all requests are
made equal.
Where are they initiated?
What part of the UX do they
bloc...
How	
  to	
  opCmize
Moreover, not all the bytes are
made equal.
Bytes of different content-types
have different impact on
p...
How	
  to	
  opCmize
What's the critical path on
loading a page ?
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Bandwidth + Latency =
Performance
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
You need to understand the
components of an HTTP
request
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
1. DNS lookup to resolve the hostname
to IP address
2. New TCP connection requires a
handshake roundt...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
http://www.webpagetest.org/result/
140410_XJ_CHT/1/details/
Friday, April 11,...
How	
  to	
  opCmize
Focus on:
DNS Lookup
TCP connection
HTTP requests
Bandwidth used
Www.Marcocasario.Com 28
Friday, Apri...
How	
  to	
  opCmize
What does it happen when
there is a gap in the bandwidth
chart ?
Www.Marcocasario.Com 28
Friday, Apri...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
http://chimera.labs.oreilly.com/books/1230000000545/
ch10.html#LATENCY_BOTTLE...
How	
  to	
  opCmize
Latency is the performance
bottleneck for HTTP as well as
all the web.
Www.Marcocasario.Com 28
Friday...
How	
  to	
  opCmize
Focus on how resources that
are requested from a different
origin consume network time
http://www.webp...
How	
  to	
  opCmize
What will your gain be if you
load zeptojs instead of Jquery ?
What if you reduce the blocking
resour...
How	
  to	
  opCmize
How can you write better code
to render the page faster ?
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Eliminate render-blocking JS
Load JS asynch
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
<script src="file.js" defer></script>
<script src="file.js" async></script>
Www.Marcocasario.Com 28
Fri...
How	
  to	
  opCmize
Use a library like RequireJS
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Double check the size of the
Cookies
(Resources Tab of the Dev Tools)
Www.Marcocasario.Com 28
Friday,...
How	
  to	
  opCmize
Serve the content in the initial
part of html
Avoid redirects for html
Www.Marcocasario.Com 28
Friday...
How	
  to	
  opCmize
Use Gzip.
http://www.gidnetwork.com/tools/gzip-
test.php
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
No really, Use Gzip.
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Don't F*#k Around, use gzip.
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Have a look at SPDY: An
experimental protocol for a
faster web
Www.Marcocasario.Com 28
Friday, April ...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Friday, April 11, 14
How	
  to	
  opCmize
Minimize your JavaScript and
CSS files.
It's easy and it can be
automated.
Www.Marcocasario.Com 28
Fri...
How	
  to	
  opCmize
Minimize render-blocking CSS:  
separate critical from non
critical CSS if your CSS payload
is larger...
How	
  to	
  opCmize
Talking about rendering, how
you can write better CSS to
render the page faster ?
Www.Marcocasario.Co...
How	
  to	
  opCmize
External CSS stylesheets are
render-blocking, meaning the
browser won’t paint content to
the screen u...
How	
  to	
  opCmize
The solution to this is inlining
the initially needed (above-the-
fold) CSS for your page and
loading...
How	
  to	
  opCmize
Inline CSS
Ready and available for the
page.  
Single HTTP request to view
content.
Www.Marcocasario....
How	
  to	
  opCmize
Inline CSS
Shave 500-700 ms off start
rendering the
DOMContentReady
Use only for the critical CSS
Www....
How	
  to	
  opCmize
How can you define your critical
content?
What the user expects to first
see on the page when it’s
load...
How	
  to	
  opCmize
Load CSS from local storage
http://addyosmani.github.io/
basket.js/
Www.Marcocasario.Com 28
Friday, A...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Remove	
  orphan	
  CSS	
  statements.
www.sitepoint.com/dustmeselectors/
Fri...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Op9mize	
  images
Use	
  the	
  Sprite	
  technique.
h>p://alistapart.com/ar9...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Use	
  the	
  icon	
  fonts
h>p://icomoon.io/
Friday, April 11, 14
How	
  to	
  opCmize
Compress images
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.so...
How	
  to	
  opCmize
Www.Marcocasario.Com 28
Friday, April 11, 14
AUTOMATING	
  &	
  TESTING
Friday, April 11, 14
Author,	
  TesCng,	
  Automate
Use the right tool to author,
testing and automate
Www.Marcocasario.Com 28
Friday, April 11...
Yeoman
Www.Marcocasario.Com 28
It’s a tool to help optimize your workflow
when developing web applications
http://www.yeoma...
Yeoman
Www.Marcocasario.Com 28
Friday, April 11, 14
Yeoman
Before Yeoman
Make a list of libraries to use in your
project (es. Bootstrap, HTML5
Boilerplate, Backbone etc)
Down...
Yeoman
With Yeoman
yo webapp
HTML5 Boilerplate
Twitter Bootstrap
Project Structure
RequireJS (optional)
Modernizr (optiona...
Yeoman
yo webapp
# scaffold out a skeleton web app
project
bower install underscore
# install a dependency for your project...
Yeoman
One of the sub-tsk that Grunt executes
is the -usemin that makes the following:
<!-- build:js scripts/main.js -->
<...
Yeoman
Www.Marcocasario.Com 28
Bower is a package manager
for web application
www.bower.io
Friday, April 11, 14
Yeoman
bower.json
{
"name": "yowebapp",
"version": "0.1.0",
"dependencies": {
"sass-bootstrap": "~3.0",
"requirejs": "~2.1...
Chrome	
  Dev	
  Tools
Chrome Developer Tools
Www.Marcocasario.Com 28
Friday, April 11, 14
Chrome	
  Dev	
  Tools
Remote Debugging
Www.Marcocasario.Com 28
Friday, April 11, 14
Become	
  a	
  Frontend	
  Developer	
  Ninja	
  
using	
  HTML5,	
  JavaScript	
  and	
  CSS3
	
  
Marco Casario
CTO Comt...
Upcoming SlideShare
Loading in...5
×

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

1,044

Published on

Slides from Marco Casario talk @ codemotion roma 2014

Published in: Technology, Design

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

  1. 1. Become  a  Frontend  Developer  Ninja   using  HTML5,  JavaScript  and  CSS3   Marco Casario CTO Comtaste - m.casario@comtaste.com Friday, April 11, 14
  2. 2. Chi  sono Www.Marcocasario.Com 2 Marco Casario CTO Comtaste www.linkedin.com/in/marcocasario Friday, April 11, 14
  3. 3. I  miei  ulCmi  libri Www.Marcocasario.Com 3 Friday, April 11, 14
  4. 4. I  miei  corsi Www.Marcocasario.Com 3 HTML5, RWD, JS training.codemotion.it Friday, April 11, 14
  5. 5. AGENDA Friday, April 11, 14
  6. 6. Agenda Www.Marcocasario.Com 28 AutomaCng  &  TesCng Best  PracCces OpCmizaCons Friday, April 11, 14
  7. 7. WHAT  MAKES  YOU  A   FRONTEND  NINJA  DEVELOPER   Friday, April 11, 14
  8. 8. Www.Marcocasario.Com 28 Friday, April 11, 14
  9. 9. Languages  +  Libraries  +  Frameworks Www.Marcocasario.Com 28 Friday, April 11, 14
  10. 10. Velocity What are the the ingredients of a Frontend Developer Ninja ? Www.Marcocasario.Com 28 Friday, April 11, 14
  11. 11. Page  weight  grows http://httparchive.org/trends.php?s=Top1000&minlabel=Nov +15+2010&maxlabel=Apr+1+2014#bytesTotal&reqTotal Www.Marcocasario.Com 28 Friday, April 11, 14
  12. 12. Mobile  Devices  &  Large  Screens Www.Marcocasario.Com 28 https://www.flickr.com/photos/lukew Friday, April 11, 14
  13. 13. Velocity Desktop users are more or less satisfied with the status quo (but pages are going bigger) Www.Marcocasario.Com 28 Friday, April 11, 14
  14. 14. Measuring  the  load  Cme Www.Marcocasario.Com 28 Friday, April 11, 14
  15. 15. Velocity Take your time to code. When you invest time you can get closer to a core of a problem. Www.Marcocasario.Com 28 Friday, April 11, 14
  16. 16. Velocity DISCLAIMER. Www.Marcocasario.Com 28 Friday, April 11, 14
  17. 17. OPTIMIZATIONS Friday, April 11, 14
  18. 18. Why  is  it  important  ? You can’t optimize what you can’t measure Www.Marcocasario.Com 28 Friday, April 11, 14
  19. 19. Why  is  it  important  ? Learning how the browsers load your web pages, helps you: make better decisions, justify the approaches and the development best practices. -- Paul Irish Www.Marcocasario.Com 28 Friday, April 11, 14
  20. 20. Browser’s  rendering  flow Www.Marcocasario.Com 28 Friday, April 11, 14
  21. 21. Browser’s  rendering  flow It’s not a linear flow. Each time a resource needs to be downloaded, it blocks the rendering. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ Www.Marcocasario.Com 28 Friday, April 11, 14
  22. 22. How  to  opCmize In order to optimize you: 1. identify & mesure a scenario 2. define what the fastest you can get is Www.Marcocasario.Com 28 Friday, April 11, 14
  23. 23. How  to  opCmize The Speed Index Www.Marcocasario.Com 28 https://sites.google.com/a/webpagetest.org/docs/ using-webpagetest/metrics/speed-index Friday, April 11, 14
  24. 24. How  to  opCmize The Speed Index is the average time at which visible parts of the page are displayed.  It is expressed in milliseconds and dependent on size of the view port. It measures when pixels are shown on screen. Www.Marcocasario.Com 28 Friday, April 11, 14
  25. 25. How  to  opCmize Www.Marcocasario.Com 28 The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0 for the range of visually complete. Friday, April 11, 14
  26. 26. How  to  opCmize Www.Marcocasario.Com 28 The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0 for the range of visually complete. Friday, April 11, 14
  27. 27. How  to  opCmize Identify the Load Time & the End of Activity Www.Marcocasario.Com 28 Friday, April 11, 14
  28. 28. How  to  opCmize Www.Marcocasario.Com 28 Friday, April 11, 14
  29. 29. How  to  opCmize Get a visual representation of the user’s perception of what’s happening Www.Marcocasario.Com 28 Friday, April 11, 14
  30. 30. How  to  opCmize Www.Marcocasario.Com 28 http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0 Friday, April 11, 14
  31. 31. How  to  opCmize Focus on: the speed index value the total load time the render time the bandwidth Www.Marcocasario.Com 28 Friday, April 11, 14
  32. 32. How  to  opCmize Is the bandwidth so important for faster pages ? Www.Marcocasario.Com 28 Friday, April 11, 14
  33. 33. How  to  opCmize For getting fast pages, what is the right number of requests and optimal page size ? Www.Marcocasario.Com 28 Friday, April 11, 14
  34. 34. How  to  opCmize Measuring performance by the KB is like measuring effectiveness of your diet by the pound. Measuring performance by the number of requests is like measuring your diet by number of things you ate - in both cases, who cares about what you actually ate, right ? Www.Marcocasario.Com 28 Friday, April 11, 14
  35. 35. How  to  opCmize Moreover, not all requests are made equal. Where are they initiated? What part of the UX do they block ? Www.Marcocasario.Com 28 Friday, April 11, 14
  36. 36. How  to  opCmize Moreover, not all the bytes are made equal. Bytes of different content-types have different impact on performance. Www.Marcocasario.Com 28 Friday, April 11, 14
  37. 37. How  to  opCmize What's the critical path on loading a page ? Www.Marcocasario.Com 28 Friday, April 11, 14
  38. 38. How  to  opCmize Bandwidth + Latency = Performance Www.Marcocasario.Com 28 Friday, April 11, 14
  39. 39. How  to  opCmize You need to understand the components of an HTTP request Www.Marcocasario.Com 28 Friday, April 11, 14
  40. 40. How  to  opCmize 1. DNS lookup to resolve the hostname to IP address 2. New TCP connection requires a handshake roundtrip to the server 3. HTTP request requires minimum of a one roundtrip to the server plus server processing time Www.Marcocasario.Com 28 Friday, April 11, 14
  41. 41. How  to  opCmize Www.Marcocasario.Com 28 http://www.webpagetest.org/result/ 140410_XJ_CHT/1/details/ Friday, April 11, 14
  42. 42. How  to  opCmize Focus on: DNS Lookup TCP connection HTTP requests Bandwidth used Www.Marcocasario.Com 28 Friday, April 11, 14
  43. 43. How  to  opCmize What does it happen when there is a gap in the bandwidth chart ? Www.Marcocasario.Com 28 Friday, April 11, 14
  44. 44. How  to  opCmize Www.Marcocasario.Com 28 http://chimera.labs.oreilly.com/books/1230000000545/ ch10.html#LATENCY_BOTTLENECK Friday, April 11, 14
  45. 45. How  to  opCmize Latency is the performance bottleneck for HTTP as well as all the web. Www.Marcocasario.Com 28 Friday, April 11, 14
  46. 46. How  to  opCmize Focus on how resources that are requested from a different origin consume network time http://www.webpagetest.org/video/compare.php? tests=140410_AT_DST-r:1-c:0 Www.Marcocasario.Com 28 Friday, April 11, 14
  47. 47. How  to  opCmize What will your gain be if you load zeptojs instead of Jquery ? What if you reduce the blocking resources and make parallel loading ? Www.Marcocasario.Com 28 Friday, April 11, 14
  48. 48. How  to  opCmize How can you write better code to render the page faster ? Www.Marcocasario.Com 28 Friday, April 11, 14
  49. 49. How  to  opCmize Eliminate render-blocking JS Load JS asynch Www.Marcocasario.Com 28 Friday, April 11, 14
  50. 50. How  to  opCmize <script src="file.js" defer></script> <script src="file.js" async></script> Www.Marcocasario.Com 28 Friday, April 11, 14
  51. 51. How  to  opCmize Use a library like RequireJS Www.Marcocasario.Com 28 Friday, April 11, 14
  52. 52. How  to  opCmize Double check the size of the Cookies (Resources Tab of the Dev Tools) Www.Marcocasario.Com 28 Friday, April 11, 14
  53. 53. How  to  opCmize Serve the content in the initial part of html Avoid redirects for html Www.Marcocasario.Com 28 Friday, April 11, 14
  54. 54. How  to  opCmize Use Gzip. http://www.gidnetwork.com/tools/gzip- test.php Www.Marcocasario.Com 28 Friday, April 11, 14
  55. 55. How  to  opCmize No really, Use Gzip. Www.Marcocasario.Com 28 Friday, April 11, 14
  56. 56. How  to  opCmize Don't F*#k Around, use gzip. Www.Marcocasario.Com 28 Friday, April 11, 14
  57. 57. How  to  opCmize Have a look at SPDY: An experimental protocol for a faster web Www.Marcocasario.Com 28 Friday, April 11, 14
  58. 58. How  to  opCmize Www.Marcocasario.Com 28 Friday, April 11, 14
  59. 59. How  to  opCmize Minimize your JavaScript and CSS files. It's easy and it can be automated. Www.Marcocasario.Com 28 Friday, April 11, 14
  60. 60. How  to  opCmize Minimize render-blocking CSS:   separate critical from non critical CSS if your CSS payload is larger that 15kb Avoid including large data URIs Www.Marcocasario.Com 28 Friday, April 11, 14
  61. 61. How  to  opCmize Talking about rendering, how you can write better CSS to render the page faster ? Www.Marcocasario.Com 28 Friday, April 11, 14
  62. 62. How  to  opCmize External CSS stylesheets are render-blocking, meaning the browser won’t paint content to the screen until all of your CSS – specifically, media=’screen’ CSS – arrives. Www.Marcocasario.Com 28 Friday, April 11, 14
  63. 63. How  to  opCmize The solution to this is inlining the initially needed (above-the- fold) CSS for your page and loading the rest of your CSS when the page is ready. Www.Marcocasario.Com 28 Friday, April 11, 14
  64. 64. How  to  opCmize Inline CSS Ready and available for the page.   Single HTTP request to view content. Www.Marcocasario.Com 28 Friday, April 11, 14
  65. 65. How  to  opCmize Inline CSS Shave 500-700 ms off start rendering the DOMContentReady Use only for the critical CSS Www.Marcocasario.Com 28 Friday, April 11, 14
  66. 66. How  to  opCmize How can you define your critical content? What the user expects to first see on the page when it’s loaded. Www.Marcocasario.Com 28 Friday, April 11, 14
  67. 67. How  to  opCmize Load CSS from local storage http://addyosmani.github.io/ basket.js/ Www.Marcocasario.Com 28 Friday, April 11, 14
  68. 68. How  to  opCmize Www.Marcocasario.Com 28 Remove  orphan  CSS  statements. www.sitepoint.com/dustmeselectors/ Friday, April 11, 14
  69. 69. How  to  opCmize Www.Marcocasario.Com 28 Op9mize  images Use  the  Sprite  technique. h>p://alistapart.com/ar9cle/sprites h>p://spriteme.org/ Friday, April 11, 14
  70. 70. How  to  opCmize Www.Marcocasario.Com 28 Use  the  icon  fonts h>p://icomoon.io/ Friday, April 11, 14
  71. 71. How  to  opCmize Compress images http://imageoptim.pornel.net/ http://developer.yahoo.com/yslow/smushit/ http://pmt.sourceforge.net/pngcrush/ Www.Marcocasario.Com 28 Friday, April 11, 14
  72. 72. How  to  opCmize Www.Marcocasario.Com 28 Friday, April 11, 14
  73. 73. AUTOMATING  &  TESTING Friday, April 11, 14
  74. 74. Author,  TesCng,  Automate Use the right tool to author, testing and automate Www.Marcocasario.Com 28 Friday, April 11, 14
  75. 75. Yeoman Www.Marcocasario.Com 28 It’s a tool to help optimize your workflow when developing web applications http://www.yeoman.io Friday, April 11, 14
  76. 76. Yeoman Www.Marcocasario.Com 28 Friday, April 11, 14
  77. 77. Yeoman Before Yeoman Make a list of libraries to use in your project (es. Bootstrap, HTML5 Boilerplate, Backbone etc) Download the libraries Organize the folders Include the libraries to the project Write the code Maintain and update the libraries Www.Marcocasario.Com 28 Friday, April 11, 14
  78. 78. Yeoman With Yeoman yo webapp HTML5 Boilerplate Twitter Bootstrap Project Structure RequireJS (optional) Modernizr (optional) Build process ... Www.Marcocasario.Com 28 Friday, April 11, 14
  79. 79. Yeoman yo webapp # scaffold out a skeleton web app project bower install underscore # install a dependency for your project from Bower grunt # build the application for deployment Www.Marcocasario.Com 28 Friday, April 11, 14
  80. 80. Yeoman One of the sub-tsk that Grunt executes is the -usemin that makes the following: <!-- build:js scripts/main.js --> <script src="bower_components/jquery/jquery.js"></script> <script src="scripts/main.js"></script> <!-- endbuild --> After your grunt build task completes, you will end up with this: <script src="scripts/c155266f.main.js"></script> Www.Marcocasario.Com 28 Friday, April 11, 14
  81. 81. Yeoman Www.Marcocasario.Com 28 Bower is a package manager for web application www.bower.io Friday, April 11, 14
  82. 82. Yeoman bower.json { "name": "yowebapp", "version": "0.1.0", "dependencies": { "sass-bootstrap": "~3.0", "requirejs": "~2.1.4", "jquery": "~1.9.1", "angular":"1.0.7" }, "devDependencies": {} } Www.Marcocasario.Com 28 Friday, April 11, 14
  83. 83. Chrome  Dev  Tools Chrome Developer Tools Www.Marcocasario.Com 28 Friday, April 11, 14
  84. 84. Chrome  Dev  Tools Remote Debugging Www.Marcocasario.Com 28 Friday, April 11, 14
  85. 85. Become  a  Frontend  Developer  Ninja   using  HTML5,  JavaScript  and  CSS3   Marco Casario CTO Comtaste - m.casario@comtaste.com Friday, April 11, 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×