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

Anatomy Of The Web

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for landish landish
December 02, 2015
Programming
200
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
150
Introduction to GIT
Avatar for landish landish
0
86

Other Decks in Programming

See All in Programming
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
240
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
560
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
230
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
310
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.2k
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
270
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
120
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
400
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
220
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
540
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
120

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
730
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
360
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k

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