/islam_md.nazrul_project_iot

islam md.nazrul project iot

islam_md.nazrul_project_iot

islam md.nazrul project iot

<title>pepe's prez</title>
restart previous chapter next chapter previous slide next slide
Intro (12/12)Tools (1/24)Content (1/8)Presentation (1/12)Scripting (1/12)Scripting (1/3) @ Frontend CULS 2022

Frontend CULS 2022

Who am I?

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

Who are you?

  • Name & Origin
  • 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

  • @damnpepe Mixcloud
  • @pepe SourceHut
  • 4207742778707 Telegram

Shout-out

pepe's out

  <script src="pepe's%20prez_files/script.js"></script>
</main>