Anatomy Of The Web

Transcript

1. Lado Lomidze www.singular.uk ANATOMY OF THE WEB
2. WHAT IS A WEB-PAGE?
3. WEB-PAGE IS A HUMAN…
4. … WITH HEAD AND BODY
5. HTML
6. HTML = BONES
7. CSS
8. CSS = SKIN COLOR, HAIR, HEIGHT….
9. JAVASCRIPT
10. JAVASCRIPT = ATHLETIC
11. JAVASCRIPT? YEEES!
12. SOMETIMES…
 …WEB CAN BE… SICK/SLOW
15. POSSIBLE REASONS - NOT OPTIMISED CODE (DB/BACKEND) - HUGE IMAGES - REDNER-BLOCKING CSS & JS - MULTIPLE HTTP REQUESTS - HOSTING - CAUCASUS ONLINE
17. ANALYSE
19. https://developers.google.com/speed/pagespeed/insights/
20. SHOWCASE
21. GULP http://gulpjs.com/
22. NODE.JS
23. NODE.JS - “Server-Side Javascript” https://nodejs.org/
24. NPM - Node Package Manager https://www.npmjs.com/
25. /NODE_MODULES & /PACKAGE.JSON /node_modules Directory to store all node.js modules /package.json Node.js specification file
26. NPM COMMANDS npm install <package-name> —save Install node package by name Example: npm install gulp —save npm update Update all packages npm help Get some help
27. INSTALL GULP npm install gulp -g
28. gulpfile.js
29. GULP TASKS gulp <your task-name> Run gulp task by name Example: gulp css gulp js gulp watch
30. IMAGE OPTIMISATION https://tinypng.com/
31. IMAGE OPTIMISATION https://github.com/imagemin/imagemin imagemin
32. YOUR ASSISTANTS
33. ;)