Frontend CULS 2022

Who am I?

• @ZEIN | @Zein-alali
• student
• Janet

Who are you?

• zein &
• Engagement
• Experience

Organization

• Theory
• Live screens
• Project

Theory

• Tools
• Content
• Presentation
• Scripting, Scripting, and Scripting

Project

Requrements

• Alone
• Finish Series
• Glitch

Structure

• HTML
• CSS
• JavaScript

Evaluation

Distribution of points

• Tasks 40
• Project 50
• Test 10

Any questions?

Speak now, or be silent for the course (about organization anyway).

Let's Go!

Tools

Source Control Management

Why?

• Storing
• Collaboration
• Not only code

Options

• Git
• Mercurial
• New kids

Git

• Most used
• Best documentation
• GitHub

GitHub

• Your work
• OpenSource projects
• Not only SCM
• LS

More GitHub

• Issues, projects
• Pull requests
• Static pages
• LS

More Git(Hub)

• Commit vs. Push
• Branches
• Pull requests vs. Participants
• LS

GitHub task

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

Source Hut

• Drew
• OpenSource
• Git/Mercurial
• Email

Editors

Atom editor

• GitHub
• OpenSource project
• Many packages

Visual Studio Code

• Microsoft's take
• Very similar to Atom
• MS technologies
• It will win

Extensions

• Languages
• Processing
• Goodies

Electron

• WebView
• Native Applications

Ancient

• emacs
• vim
• kak ♥

Editor's task

• Install application
• Install HTML, CSS, JS packages
• Break

Misc

Developer tools

• Firefox Nightly
• Chrome Canary
• Task install

Documentation

• Mozilla Developer Network
• All about the web & more
• LS

HTTP protocol

• Structure
• Evolution

HTTP statuses

• Numbers
• Messages

HTTP methods

• Browser
• All
• LS

Content Delivery Networks

Content

Documents vs. Data

• Web
• Apps
• Examples

HTML

• History
• Incarnations
• HTML5
• LS

XML

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

DOM

• HTML & XML
• Tree structure
• Object Oriented
• LS

JSON

• History
• Booming - Lingua Franca
• API
• Task - JSON example

Media

• Images
• Sound
• Video

Others

• Markdown
• SVG
• Binary
• Task some more

Presentation

What we see

• Sizes
• Positions
• Visuals
• Animations

Tag attributes

• Beginning
• Each tag had their set
• Browser dependent

CSS

• Separation of presentation and content
• HTML, XML, SVG
• History

CSS structure

• Selectors
• Declarations
• Properties

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

Afternoon Handson

Scripting

JavaScript

• History
• Proper name
• The Browser Language

Live Screen

NPM Packages

• Whole universe
• Almost everything
• Usecase

Popular FW

• jQuery
• React.js
• Vue.js

Transpilers

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

Transpiled languages

• CoffeeScript ✝
• TypeScript
• Elm
• ClojureScript
• Reason

Tooling

• babel
• webpack
• Vite.js

Egines

• SpiderMonkey in Firefox
• V8 in Chrome
• JavaScriptCore in Safari

Not only frontend

• node.js
• npm
• Next semester

Glitch

• IDE in browser
• Instant shipping
• Collaboration

Frontend Developer Roadmap

More pepe to your

• @zein-alali
• @zein-alali SourceHut
• 773124463 Telegram

Shout-out

pepe's out