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

Vim

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

Made with Slides.com