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
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
Avatar for Takuma Kajikawa kajitack
3
520
Streamlitで実現できるようになったこと、実現してくれたこと
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
2
270
DataformでPythonする / dataform-de-python
Avatar for snhryt snhryt
0
150
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
4
2.4k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
36
11k
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
1
470
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
140
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.3k
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
130
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
Avatar for 74th(Atsushi Morimoto) 74th
6
1.8k
DatadogのArchived LogsをSnowflakeで高速に検索する方法（Archive Searchでオワコンにならないことを祈って） / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
Avatar for Civitaspo civitaspo
0
110
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
0
170

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Done Done
Avatar for chrislema chrislema
185
16k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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