Front-End
Intro
© Sergey Shalyapin, 2019
What to work with?
Files
HTML - HyperText Markup Language
.html, .htm
CSS - Cascading Style Sheets
.css
JavaScript - high-level, interpreted programming language that conforms to the ECMAScript specification
.js
Transfer protocols
HTTP HTTPS (Hyper Text Transfer Protocol)
FTP (File Transfer Protocol)
TCP / IP
Transmission Control Protocol (TCP) / Internet Protocol (IP)
IP Address
Domain name
91.198.174.192
https://en.wikipedia.org/wiki/IP_address
https:// - protocol
en.wikipedia.org - full domain name
en - 3d level domain, subdomain of wikipedia.org
wikipedia - 2nd level domain, subdomain of org
org - 1st level domain, highest domain
wiki/IP_address - path
Text redactors & IDE
Create
Edit
Link
Delete
HTML
CSS
JS
Browsers
Compile
Display
HTML
CSS
JS
What to use to edit text?
Text editors
Notepad
Simple, no features
Light weight,
syntax highlight,
project structure,
screen split
IDE
Heavier than text editors
Syntax and spell check + corrections
Project manipulation
Git, node modules, extensions support
Debugger, linter
- Very light
- Electron based
- Updates regularly
- Extensions dependent
- Free
- Heavy
- Intellij Idea
- Most features out of box
- Settings easy to configure
- Git GUI
- Shortcuts
- Paid by subscription
- Light
- Intelisense
- Extensions dependent
- Settings as JSON format
- Git, Debug, Extensions GUI
- Shortcuts
- Flexible screen split
- Free
Personal choice
- Same as VSCode
- Web IDE
- NPM dependencies easy to use
- Instant deploy
Personal choice
Browsers
- Engine: Trident, Chakra
- Just browser
- Engines:
Windows: EdgeHTML, Chakra
iOS: Webkit
Android: Blink
- Regularly updates
- Problems with latest versions features
- Better Microsoft account integration
Safari
- Engines: WebKit, Nitro
- Regularly updates
- default for ioS
- Poor optimization for for other OS
- Many user restrictions
- Engines: Gecko, Quantum, SpiderMonkey
- Regularly updates
- Supports all stable version features
- In the first line of web-development features
- Mobile version
- Extension support
- Developer version with not yet accepted features
- Engines: Blink (WebKit on iOS), V8
- Regularly updates
- Supports all stable version features, including unique ones
- In the first line of web-development features
- Mobile version and mobile sizes emulator
- Extension support
- Developer version with not yet accepted features
Personal choice
How to work with PSD templates?
- Full UI / UX Design features
- Layers / Grid / Visible elements
- Elements editing
- Paid by subscription
- Layers / Grid / Visible elements
- Elements editing
- Poor app design
- Free
- Web Viewer
- Layers
- Color picker
- Export images
- Free
Personal choice
Personal preferences