Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Anatomy Of The Web

Avatar for landish landish
December 02, 2015
Programming
210
1

Anatomy Of The Web

Avatar for landish

landish

December 02, 2015

More Decks by landish

See All by landish
Markdown
Avatar for landish landish
0
190
Introduction to Ionic Framework
Avatar for landish landish
0
150
PHPUnit
Avatar for landish landish
0
130
Some Modern Tools for Developers
Avatar for landish landish
0
160
Introduction to GIT
Avatar for landish landish
0
90

Other Decks in Programming

See All in Programming
AI-Powered Domain-Driven Design
Avatar for Alberto Brandolini ziobrando
0
410
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
230
地方こそサーバーレス — 10年続けた、顔が見えるチームで確かな基盤を / Serverless Matters Most in Regional Areas — 10 Years of Building Reliable Foundations with Close-Knit Teams
Avatar for shiro seike seike460
PRO
1
230
Rails初心者がパスキーを実装してみて大変だったこと
Avatar for とんとんぼ ktombow
0
150
AI Augmentation Techniques with Liberty
Avatar for ivargrimstad ivargrimstad
1
390
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
Avatar for Kosuke Saigusa kosukesaigusa
0
200
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
11k
Coding with AI: How to trust the storyteller (AWS Community Day Adria, Ljubljana 2026)
Avatar for Slobodan Stojanović slobodan
0
140
Enforcing Your Architecture with Unit Tests in the AI Era (Swift Connection X)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
150
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
600
Distance field of Julia set
Avatar for kinakomoti-321 kinakomoti321
0
300
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
Avatar for viviON vivion
0
330

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.5k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
11k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
600
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.8k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
290
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.3k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
740
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k

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

  13. None
  14. None

  15. POSSIBLE REASONS - NOT OPTIMISED CODE (DB/BACKEND) - HUGE IMAGES

    - REDNER-BLOCKING CSS & JS - MULTIPLE HTTP REQUESTS - HOSTING - CAUCASUS ONLINE
  16. None

  17. ANALYSE

  18. None

  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. ;)