CSS in-depth - pluralsight.com

July 20, 2016

Plan to find 6 hours to work on this course: 30 minutes a time, one by one. 

CSS in-depth  6 hour course
http://app.pluralsight.com/author/estelle-weyl

1. Go over the slides on the website: (plan to take 1 hour first)
http://lanyrd.com/profile/estellevw/slides/

2. Julia's favorite - great input for Julia to build great mobile website! 

http://estelle.github.io/mobilecss/#slide4

3. Get to know a new tool: YSlow
http://yslow.org/

Read 34 rules of web performance best practices and rules:

Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable. Click each performance rule below to see the details.

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Avoid empty src or href
4. Add an Expires or a Cache-Control Header
5. Gzip Components
6. Put StyleSheets at the Top
7. Put Scripts at the Bottom
8. Avoid CSS Expressions
9. Make JavaScript and CSS External
10. Reduce DNS Lookups
11. Minify JavaScript and CSS
12. Avoid Redirects
13. Remove Duplicate Scripts
14. Configure ETags
15. Make AJAX Cacheable
16. Use GET for AJAX Requests
17. Reduce the Number of DOM Elements
18. No 404s
19. Reduce Cookie Size
20. Use Cookie-Free Domains for Components
21. Avoid Filters
22. Do Not Scale Images in HTML
23. Make favicon.ico Small and Cacheable

4. Julia loves the CSS Filter Effects

http://html5-demos.appspot.com/static/css/filters/index.html

(memorize 10 keywords: b b c d g h i o s s)
blur
brightness
contrast
drop-shadow
grayscale
hue-rotate
invert
opacity
saturate
sepia

5.
http://static.lukew.com/TouchGestureGuide.pdf

Core gestures:
Tap,
double tap,
Drag,
Flick,
Pinch,
Spread,
Press,
Press and tap,
Press and drag,
Rotate

6. Google page speed tools
- Analyze your site performance -

https://developers.google.com/speed/pagespeed/?csw=1


6B. Page Speed - Go over each main point for 5 minute study:
1. leverage browser caching

Leveraging Browsing caching for images, CSS and JS
https://www.siteground.com/kb/leverage-browser-caching/

http://stackoverflow.com/questions/23923039/wordpress-leverage-browser-caching

2. Enable compression
3. Defer parsing of JavaScript
4. Minimize request size
5. Specify a cache validator
6. Optimize images
7. Minify JavaScript
8. Minify HTML
9. specify image dimensions
10. Specify a character set
11. Specify a Vary: Accept Encoding Header
12. Avoid long-running scripts
13. Avoid CSS @import
14. Avoid bad requests
15. Enable Keep-Alive
16. Make landing page redirects cacheable
17. Minify CSS
18. Minimize redirects
19. Optimize the order of styles and scripts
20. Put CSS in the document head
21. Remove query strings from static resources

7. Sprites - reduce requests -

8. ImageAlpha

Reduce image file size - lossy compression

9. https://pngmini.com/

10. Responsive design - RDS

http://estelle.github.io/rwdpanacea/#slide12


11. Debugging tools for mobile website:

1. Charles proxy

https://www.charlesproxy.com/


2. fiddler

3. browser stack
www.browserstack.com

4. device anywhere
www,keynotedeviceanywhere.com

Julia's comment:
1. Great teaching, first CSS expert Julia knows - love the course - CSS in-depth - pluralsight.com
2. web performance best practices and rules - how many Julia breaks?