Skip to content

Latest commit

 

History

History
723 lines (455 loc) · 5.57 KB

presentation.md

File metadata and controls

723 lines (455 loc) · 5.57 KB

Contemporary Frontend Winter 2023

author: Josef Pospíšil date: 2023-10-09 title: The Intro

Contemporary Frontend '23

Who am I?

  • Computer scientist
  • @pepe |@damnpepe
  • World Citizen
  • Father
  • Janet

Who are you?

  • Name & Origin
  • Diploma thesis
  • Experience

Organization

Technique

  • Flyby style
  • My experiences
  • Your needs

Day

  • Morning coffe
  • (break)
  • Talk show
  • (break)
  • Hands-on

Week

  • Monday - Tools, Content
  • Tuesday - Presentation, Hypermedia
  • Wednesday - Scripting
  • Thursday - Project, Hypermedia
  • Friday - Evaluation

Parts

  • Tools
  • Content
  • Presentation
  • Scripting

Hands On

  • Simple examples
  • Live projects
  • Project related
  • Slow me down

Project

Requirements

  • Individual
  • Repository
  • Glitch

Present and script

  • Presentation example
  • I will give you HTML
  • You will do the rest

Evaluation ...

... will be very biased

Points' distribution

  • Tasks 20%
  • Project 70%
  • Test 10%

ChatGPT?

Any questions

Speak now, or be silent for the rest of the week.

Show yourselves!

I would love to see your works.

Let's Go!

♪♪♪ learn to swim

===

author: Josef Pospíšil date: 2023-10-09 title: Tools

Tools

FOSS FTW!

  • Free
  • OpenSource
  • Everywhere

Source Control Management

[SCM]

Value

  • Storing
  • History
  • Collaboration
  • Not only code

Options

  • Git
  • Mercurial
  • New kids

Git

  • Most used
  • Best documentation
  • GitHub

GitHub

  • Your work
  • OpenSource projects
  • Not only SCM
  • Hands On

More GitHub

  • Issues, projects
  • Pull requests
  • Static pages
  • Hands On

More Git(Hub)

  • Commit vs Push
  • Branches
  • Pull requests vs Participants
  • Hands On

GitHub Task

  • Register
  • Follow @pepe and star
  • Create project repository

Source Hut

  • Drew
  • OpenSource
  • Git/Mercurial
  • Email

(break)

Editors

Atom editor

  • GitHub
  • OpenSource project
  • Many packages
  • Hands On

Visual Studio Code

  • [VSC]
  • Microsoft's take
  • Very similar to Atom
  • MS technologies

VSC Extensions

  • Languages
  • Processing
  • Goodies
  • Hands On

Electron

  • WebView
  • Native Applications

Ancient

  • emacs
  • vim
  • kak ♥

Editors Task

  • Install application
  • HTML, CSS, JS packages

(break)

Misc

Developer Tools

  • Firefox Nightly
  • Chrome Canary
  • Hands On

Browser Task

  • Install

node.js

  • JavaScript
  • Frontend tools
  • http-server
  • Hands On

Documentation

  • Mozilla Developer Network
  • All about web & more
  • Hands On

(break)

===

author: pepe date: 2023-10-09 title: Hypermedia

Hypermedia systems

  • Book
  • Code

HTTP protocol

  • Evolution
  • Structure

HTTP statuses

  • Numbers
  • Messages

HTTP methods

  • Browser
  • All
  • Live Screen

===

author: Josef Pospíšil date: 2023-10-10 title: Content

Content

Documents vs Data

  • Web
  • Apps
  • Examples

HTML

  • History
  • Incarnations
  • HTML5

XML

  • History
  • Not really human readable
  • Java world
  • Incarnations

DOM

  • HTML & XML
  • Tree structure
  • Object Oriented
  • Live Screen

JSON

  • History
  • Lingua Franca
  • API

OpenGraph

  • Page Object
  • Social Graph

Media

  • Images
  • Sound
  • Video

Others

  • Markdown
  • SVG
  • Binary
  • Task some more

HTML dissect

  • Head
  • Body
  • Elements

Custom Elements

  • Your way
  • Customisable
  • Live Screen

Accessibility

  • Aria

Live Screen

  • HTML boilerplate
  • Project

===

author: Josef Pospíšil date: 2023-10-10 title: Presentation

Presentation

What we see

  • Sizes
  • Positions
  • Visuals

Behaviour

  • Hovers
  • Animations
  • Transitions

Media

  • Responsive
  • Special devices

Tag attributes

  • Beginning
  • Each tag had their set
  • Browser dependent

CSS

  • Separation
  • HTML, XML, SVG
  • History

CSS structure

  • Selectors
  • Declarations
  • Properties

Selectors

  • Tags
  • Ids, classes
  • Pseudo
  • Live Screen

Preprocessor languages

  • SASS
  • Less
  • Stylus

Frameworks

  • Bootstrap
  • Semantic
  • ZURB
  • Picnic

Responsive design

  • Many sizes
  • Mobile first

Google Material

Microsoft Fabric

Story - communication

  • UX
  • Response times
  • Optimistic updates

===

author: pepe date: 2023-10-11 title: Scripting

Scripting

Addenum

  • Tailwind

Glitch

  • IDE in browser
  • Instant shipping
  • Collaboration

JavaScript

  • History
  • Proper name
  • The Browser Language

Taxonomy

  • C family syntax
  • Prototype OOP
  • Functional

node.js

  • Standalone runtime
  • Event loop
  • V8 engine

NPM Packages

  • Whole universe
  • Almost everything
  • Usecase

Popular FW

  • jQuery
  • React.js
  • Angular.js
  • Vue.js

Next Level

  • Next.js

Transpilers

  • Always JS on the end
  • Building
  • Webpack ,Gulp

Tooling

  • Babel
  • Webpack
  • Vite.js

Transpiled languages

  • CofeeScript ✝
  • TypeScript
  • Elm
  • ClojureScript
  • Reason

Not only frontend

  • Node.js
  • npm
  • Next semester

JS War

  • Node.js
  • Deno
  • Bun

Q&A

===

title: The Last date: 2023-10-12 author: pepe

The Last

  • Evaluation online
  • Repository link

Project step by step

===

title: The Final date: 2023-10-12 author: pepe

The Final

More pepe to you

pepe's out

===