Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Anatomy Of The Web

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
180
Introduction to Ionic Framework
Avatar for landish landish
0
110
PHPUnit
Avatar for landish landish
0
120
Some Modern Tools for Developers
Avatar for landish landish
0
150
Introduction to GIT
Avatar for landish landish
0
78

Other Decks in Programming

See All in Programming
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
650
分散システム、なんですぐ死んでしまうん？耐障害性を高めたいあなたのためのレジリエンスパターン入門
Avatar for Mitsuhiro Shibuya mshibuya
7
6.7k
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.6k
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
1.8k
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
540
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
190
The Bowling Game - From Imperative to Functional Programming - Part 1
Avatar for Philip Schwarz philipschwarz
PRO
0
340
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
130
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
180
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
3k
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
240
えっ!!コードを読まずに開発を!?
Avatar for はなのうち hananouchi
0
230

Featured

See All Featured
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.1k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
450
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
750
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
910
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
640
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
390
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k

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