udacity · madhuni · Jul 19, 2017 · Jul 19, 2017 · Jul 19, 2017 · Jul 19, 2017
diff --git a/README.md b/README.md
@@ -1,55 +1,54 @@
 ## Website Performance Optimization portfolio project
 
-Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the [Critical Rendering Path course](https://www.udacity.com/course/ud884).
-
-To get started, check out the repository and inspect the code.
+This project is the part of Udacity Front-end Web Developer Nanodegree. The requirement for this project is to optimize the online portfolio for speed! 
 
 ### Getting started
 
-#### Part 1: Optimize PageSpeed Insights score for index.html
+#### Installing
+
+* To check the page speed score for the page, go to <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Google PageSpeed Insights Tool</a> and enter the url <a href="https://madhuni.github.io/frontend-nanodegree-mobile-portfolio/" target="_blank">https://madhuni.github.io/frontend-nanodegree-mobile-portfolio/</a>.
+
+* Run <a href="https://madhuni.github.io/frontend-nanodegree-mobile-portfolio/views/pizza.html" target="_blank">https://madhuni.github.io/frontend-nanodegree-mobile-portfolio/views/pizza.html</a> Or clone my github repository <a href="https://github.com/madhuni/frontend-nanodegree-mobile-portfolio.git" target="_blank">https://github.com/madhuni/frontend-nanodegree-mobile-portfolio.git</a> in your local machine and load the ```dist/views/pizza.html``` page in the browser. Run the chrome Dev Tool and check the performance of the page.
 
-Some useful tips to help you get started:
+### Requirements for completing the project
 
-1. Check out the repository
-1. To inspect the site on your phone, you can run a local server
+#### Part 1: Optimize PageSpeed Insights score for ```index.html```
 
-  ```bash
-  $> cd /path/to/your-project-folder
-  $> python -m SimpleHTTPServer 8080
-  ```
+##### Goal
 
-1. Open a browser and visit localhost:8080
-1. Download and install [ngrok](https://ngrok.com/) to the top-level of your project directory to make your local server accessible remotely.
+- [x] Achieve 90+ page speed score for Mobile.
+- [x] Achieve 90+ page speed score for Desktop.
 
-  ``` bash
-  $> cd /path/to/your-project-folder
-  $> ./ngrok http 8080
-  ```
+##### Optimization
 
-1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: [More on integrating ngrok, Grunt and PageSpeed.](http://www.jamescryer.com/2014/06/12/grunt-pagespeed-and-ngrok-locally-testing/)
+* Optimize images for index.html
+* Minify JS
+* Minify CSS
+* Minify HTML
+* Unblocking CSS for print style With Media Queries
+* Using web font loader
+* Inlining critical CSS
 
-Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!
+##### Screenshot of the result achieved
+
+![Screen shot of page speed achieved](/screenshots/page-speed-score.jpg)
 
 #### Part 2: Optimize Frames per Second in pizza.html
 
-To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js. 
+##### Goal
+
+- [x] Optimizations made to ```views/js/main.js``` make ```views/pizza.html``` render with a consistent frame-rate at 60fps when scrolling.
+- [x] Time to resize pizzas is less than 5 ms using the pizza size slider on the ```views/pizza.html``` page.
+
+##### Optimization
 
-You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: [Chrome Dev Tools tips-and-tricks](https://developer.chrome.com/devtools/docs/tips-and-tricks).
+* Reduced the number of images of pizzas to be shown in background.
+* Moved the selection of elements with class ```.mover``` outside the function ```updatePositions``` as we only need to select them once.
+* Calculation of ```topDistance``` is performed outside of the loop to improve performance by reducing time for 'style' and 'layout' in the pipeline.
+* Moved the selection of elements with class ```.randomPizzaContainer``` outside the function ```changePizzaSizes``` as we only need to select them once.
+* Calculation of ```dx``` and ```newwidth``` is taken out of the loop which was causing the ***Forced Layout***.
 
-### Optimization Tips and Tricks
-* [Optimizing Performance](https://developers.google.com/web/fundamentals/performance/ "web performance")
-* [Analyzing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp.html "analyzing crp")
-* [Optimizing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path.html "optimize the crp!")
-* [Avoiding Rendering Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.html "render blocking css")
-* [Optimizing JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript.html "javascript")
-* [Measuring with Navigation Timing](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp.html "nav timing api"). We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
-* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads.html">The fewer the downloads, the better</a>
-* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer.html">Reduce the size of text</a>
-* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization.html">Optimize images</a>
-* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching.html">HTTP caching</a>
 
-### Customization with Bootstrap
-The portfolio was built on Twitter's <a href="http://getbootstrap.com/">Bootstrap</a> framework. All custom styles are in `dist/css/portfolio.css` in the portfolio repo.
+##### Screenshot of the result achieved
 
-* <a href="http://getbootstrap.com/css/">Bootstrap's CSS Classes</a>
-* <a href="http://getbootstrap.com/components/">Bootstrap's Components</a>
+![Screen shot of the profile](/screenshots/frame-rate.jpg)
diff --git a/dist/css/print.css b/dist/css/print.css
diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/img/.gitignore → dist/img/.gitignore b/img/.gitignore → dist/img/.gitignore
diff --git a/img/2048.png → dist/img/2048.png b/img/2048.png → dist/img/2048.png
diff --git a/img/cam_be_like.jpg → dist/img/cam_be_like.jpg b/img/cam_be_like.jpg → dist/img/cam_be_like.jpg
diff --git a/img/mobilewebdev.jpg → dist/img/mobilewebdev.jpg b/img/mobilewebdev.jpg → dist/img/mobilewebdev.jpg
diff --git a/dist/img/pizzeria.jpg b/dist/img/pizzeria.jpg
diff --git a/dist/img/profilepic.jpg b/dist/img/profilepic.jpg
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content=" FILL ME IN "name=description><meta content=" FILL ME IN "name=author><title>Cameron Pittman: Portfolio</title><style>html{font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:none}body{margin:0;font-size:14px;line-height:1.61;font-weight:400}body,button,input,select,textarea{font-family:'Open Sans',sans-serif;color:#333}a{color:#12c}a:visited{color:#61c}a:focus{outline:thin dotted}a:active,a:hover{color:#c00;outline:0}b,strong{font-weight:700}code,pre{font-family:monospace,monospace;font-size:1em}ol,ul{margin:1em 0;padding:0 0 0 20px}img{border:0;max-width:100%}body{background:#fff}.container,footer,header{max-width:45em;margin:0 auto}header{padding:0 .5em;color:#c90b0b}header img{border-radius:40px;float:left}header p{font-size:1.5em;font-weight:700;padding-left:4em}header p span{font-size:.8em;font-weight:400}.hero{padding:2em;background-color:#f8f8f8;font-size:1.2em;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.content{padding:1em 1em}.content li{list-style-type:none;font-size:1.1em}li img{float:left;padding-right:1em}li p{font-size:.9em;font-style:italic}footer{padding:0 .5em;border-top:1px solid #ccc}footer span{float:right;font-style:italic}@media only screen and (max-width:480px){body{font-size:12px}header p{padding-left:4.5em}}</style><link href=css/print.css media=print rel=stylesheet><script async src=http://www.google-analytics.com/analytics.js></script><script async src=js/perfmatters_min.js></script><header><a href=/ ><img src=img/profilepic.jpg></a><p>Cameron Pittman<br><span>Course Developer</span></header><div class=container><div class=hero><strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of project that you want the world to see :)<br>Contact me: me@email.com</div><div class=content><ul><li><img src="https://lh4.ggpht.com/kJEnfqhPvtm4m3EneSZ4fWYGS8lW4YNhEjk6zPkyrQaBUHc-2Y_ElDic99NHI0h-UBLXVbRCjFybFvrWxdk=s100"> <a href=project-2048.html>Build Your Own 2048!</a><p>I made my own version of 2048. How cool is that!?<li><img src="https://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100"> <a href=project-webperf.html>Website Performance Optimization</a><p>Hey... this class looks familiar.<li><img src="https://lh5.ggpht.com/IKdCmTWn8a2nMhlwMYzryvzRN5CUZAOBr4tDrEAbszV7TIFe9pRAInA4kkYcgTXwrifJsBEsq1agTueuu-g=s100"> <a href=project-mobile.html>Mobile Web Development</a><p>Making mobile apps isn't so hard after all.<li><img src=img/pizzeria.jpg style=width:100px> <a href=views/pizza.html>Cam's Pizzeria</a><p>Who wants a performant pizza?</ul></div><footer><p>© Web Performance 2014 <span id=crp-stats></span></footer></div><script>!function(e,n){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date}(window,"ga"),ga("create","UA-XXXX-Y"),ga("send","pageview")</script><script>WebFontConfig={google:{families:["Open Sans:400,700"]}},function(e){var n=e.createElement("script"),o=e.scripts[0];n.src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",n.async=!0,o.parentNode.insertBefore(n,o)}(document)</script>
diff --git a/dist/js/perfmatters.js b/dist/js/perfmatters.js
diff --git a/dist/project-2048.html b/dist/project-2048.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content=" FILL ME IN "name=description><meta content=" FILL ME IN "name=author><title>Cameron Pittman: Portfolio</title><link href=css/style.css rel=stylesheet><link href=css/print.css rel=stylesheet><script>!function(e,n){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date}(window,"ga"),ga("create","UA-XXXX-Y"),ga("send","pageview")</script><script src=//www.google-analytics.com/analytics.js></script><script src=js/perfmatters.js></script><header><a href=/ ><img src=img/profilepic.jpg></a><p>Cameron Pittman<br><span>Course Developer</span></header><div class=container><div class=hero><strong>2048 is awesome!</strong> I loved making my own 2048 with Andy and Sarah. Below, I'm showing off a screenshot from the Udacity version of 2048.</div><div class=content><img src=img/2048.png class=img-responsive><p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.<p>Venison spare ribs dolor tri-tip duis turkey. Ut chicken proident ribeye est flank, sed frankfurter. Kielbasa exercitation ullamco leberkas. Landjaeger turkey culpa, tail short loin consectetur salami venison in corned beef eiusmod qui ad leberkas. Tri-tip adipisicing frankfurter ut sirloin rump consectetur. Chuck sint filet mignon labore eiusmod nulla. Venison shankle pork, consectetur nisi bacon spare ribs anim meatball sausage ball tip labore aute reprehenderit adipisicing.</div><footer><p>© Web Performance 2014 <span id=crp-stats></span></footer>
diff --git a/dist/project-mobile.html b/dist/project-mobile.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content=" FILL ME IN "name=description><meta content=" FILL ME IN "name=author><title>Cameron Pitman: Portfolio</title><link href=css/style.css rel=stylesheet><link href=css/print.css rel=stylesheet><script>!function(e,n){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date}(window,"ga"),ga("create","UA-XXXX-Y"),ga("send","pageview")</script><script src=http://www.google-analytics.com/analytics.js></script><script src=js/perfmatters.js async></script><header><a href=/ ><img src=img/profilepic.jpg></a><p>Cameron Pittman<br><span>Course Developer</span></header><div class=container><div class=hero><strong>Developing for mobile is important!</strong> If you haven't taken this class, I highly recommend it!</div><div class=content><p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.</p><img src=img/mobilewebdev.jpg><p>Venison spare ribs dolor tri-tip duis turkey. Ut chicken proident ribeye est flank, sed frankfurter. Kielbasa exercitation ullamco leberkas. Landjaeger turkey culpa, tail short loin consectetur salami venison in corned beef eiusmod qui ad leberkas. Tri-tip adipisicing frankfurter ut sirloin rump consectetur. Chuck sint filet mignon labore eiusmod nulla. Venison shankle pork, consectetur nisi bacon spare ribs anim meatball sausage ball tip labore aute reprehenderit adipisicing.</div><footer><p>© Web Performance 2014 <span id=crp-stats></span></footer>
diff --git a/dist/project-webperf.html b/dist/project-webperf.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content=" FILL ME IN "name=description><meta content=" FILL ME IN "name=author><title>Cameron Pittman: Portfolio</title><link href=css/style.css rel=stylesheet><link href=css/print.css rel=stylesheet><script>!function(e,n){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date}(window,"ga"),ga("create","UA-XXXX-Y"),ga("send","pageview")</script><script src=http://www.google-analytics.com/analytics.js></script><script src=js/perfmatters.js async></script><header><a href=/ ><img src=img/profilepic.jpg></a><p>Cameron Pittman<br><span>Course Developer</span></header><div class=container><div class=hero><strong>Thanks for taking this class!</strong> You are awesome for investing time and energy into your future :) We love making classes for you!</div><div class=content><p>Thanks to everyone at Udacity and Google who made this class happen! Now for a very true meme and some <strike>lorem</strike> bacon ipsum.</p><img src=img/cam_be_like.jpg><p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.<p>Venison spare ribs dolor tri-tip duis turkey. Ut chicken proident ribeye est flank, sed frankfurter. Kielbasa exercitation ullamco leberkas. Landjaeger turkey culpa, tail short loin consectetur salami venison in corned beef eiusmod qui ad leberkas. Tri-tip adipisicing frankfurter ut sirloin rump consectetur. Chuck sint filet mignon labore eiusmod nulla. Venison shankle pork, consectetur nisi bacon spare ribs anim meatball sausage ball tip labore aute reprehenderit adipisicing.</div><footer><p>© Web Performance 2014 <span id=crp-stats></span></footer>