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
89
PHPUnit
Avatar for landish landish
0
97
Some Modern Tools for Developers
Avatar for landish landish
0
130
Introduction to GIT
Avatar for landish landish
0
53

Other Decks in Programming

See All in Programming
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
140
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
390
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
870
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
160
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
360
関数型まつりレポート for JuliaTokai #22
Avatar for GOTOH Shunsuke antimon2
0
130
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
3
310
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
1
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
Avatar for hideki kinjyo o0h
PRO
1
120
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
11
2.8k
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
760
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
3
750

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k

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