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

Anatomy Of The Web

Avatar for landish landish
December 02, 2015
Programming
1
180

Anatomy Of The Web

Avatar for landish

landish

December 02, 2015
Tweet

More Decks by landish

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

Other Decks in Programming

See All in Programming
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
1
240
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.3k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
260
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
Avatar for Kuu fumiyakume
21
10k
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
220
MCPで実現できる、Webサービス利用体験について
Avatar for syumai syumai
7
2.4k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
11
2.9k
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
130
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Avatar for azukiazusa azukiazusa1
3
780
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
250
構文解析器入門
Avatar for ydah ydah
7
2k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
KATA
Avatar for Megan Lloyd mclloyd
31
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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