Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Anatomy Of The Web
Search
landish
December 02, 2015
Programming
1
170
Anatomy Of The Web
landish
December 02, 2015
Tweet
Share
More Decks by landish
See All by landish
Markdown
landish
0
120
Introduction to Ionic Framework
landish
0
83
PHPUnit
landish
0
88
Some Modern Tools for Developers
landish
0
110
Introduction to GIT
landish
0
46
Other Decks in Programming
See All in Programming
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Securify_エンジニア採用資料
3shake
0
100
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
A New Era of Testing
mannodermaus
2
510
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
Featured
See All Featured
Bash Introduction
62gerente
608
210k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
GitHub's CSS Performance
jonrohan
1030
450k
Optimizing for Happiness
mojombo
375
69k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Producing Creativity
orderedlist
PRO
340
39k
A better future with KSS
kneath
235
17k
Transcript
Lado Lomidze www.singular.uk ANATOMY OF THE WEB
WHAT IS A WEB-PAGE?
WEB-PAGE IS A HUMAN…
… WITH HEAD AND BODY
HTML
HTML = BONES
CSS
CSS = SKIN COLOR, HAIR, HEIGHT….
JAVASCRIPT
JAVASCRIPT = ATHLETIC
JAVASCRIPT? YEEES!
SOMETIMES… …WEB CAN BE… SICK/SLOW
None
None
POSSIBLE REASONS - NOT OPTIMISED CODE (DB/BACKEND) - HUGE IMAGES
- REDNER-BLOCKING CSS & JS - MULTIPLE HTTP REQUESTS - HOSTING - CAUCASUS ONLINE
None
ANALYSE
None
https://developers.google.com/speed/pagespeed/insights/
SHOWCASE
GULP http://gulpjs.com/
NODE.JS
NODE.JS - “Server-Side Javascript” https://nodejs.org/
NPM - Node Package Manager https://www.npmjs.com/
/NODE_MODULES & /PACKAGE.JSON /node_modules Directory to store all node.js modules
/package.json Node.js specification file
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
INSTALL GULP npm install gulp -g
gulpfile.js
GULP TASKS gulp <your task-name> Run gulp task by name
Example: gulp css gulp js gulp watch
IMAGE OPTIMISATION https://tinypng.com/
IMAGE OPTIMISATION https://github.com/imagemin/imagemin imagemin
YOUR ASSISTANTS
;)