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

Anatomy Of The Web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.1k
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
150
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
8.4k
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
320
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
200
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
140
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
260
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
180
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
600
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
280
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
400
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
570
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
300
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
570
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
500

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