Vefforritun 2, 2020

Hér má nálgast alla fyrirlestra, dæmi og verkefni í áfangagnum vefforritun 2 eftir Ólafur Sverrir Kjartansson, kenndan við HÍ vorið 2019.

Upptökur af fyrirlestrum eru á YouTube.

Kennsluáætlun

Vika	Fimmtudagur	Viðfangsefni	Verkefni	Skil
1		Kynning, node.js, ósamstillt forritun	Verkefni #1
2		Einingar, atburðir, express
3		HTTP, form, postgres	Verkefni #2	Verkefni #1
4		Öryggi
5		Auðkenning, Heroku	Verkefni #3	Verkefni #2
6		Vefþjónustur	Verkefni #4	Verkefni #3
7		Vefþjónustur, redis & cache	Hópverkefni #1
8		React	Verkefni #5	Verkefni #4
9		React
10		React, next.js	Verkefni #6	Verkefni #5
			Hópverkefni #2	Hópverkefni #1
11		Bundling, Typescript		Verkefni #6
12		Upprifjun og um lokapróf
				Hópverkefni #2

Fyrirlestrar

• Fyrirlestur 1
  • Kynning, node.js, ósamstillt forritun
• Fyrirlestur 2
  • Einingar, atburðir, express
• Fyrirlestur 3
  • HTTP, form, Postgres
• Fyrirlestur 4
  • Öryggi
• Fyrirlestur 5
  • Auðkenning, Heroku
• Fyrirlestur 6
  • Vefþjónustur
• Fyrirlestur 7
  • Vefþjónustur, redis & cache
• Fyrirlestur 8
  • React
• Fyrirlestur 9
  • React
• Fyrirlestur 10
  • Flux & redux, Context & hooks, NextJS
• Fyrirlestur 11
  • Webpack, TypeScript og næstu skref
• Fyrirlestur 12
  • Upprifjun og lokapróf

Ítarefni

• Fyrirlestur 1
  • Jake Archibald: In The Loop, 35 mín fyrirlestur
• Fyrirlestur 2
  • Anatomy of an HTTP Transaction, HTTP server frá grunni með Node.js
  • The Node.js Community Is Quietly Changing the Face of Open Source, frá 2013
  • Rage-quit: Coder unpublished 17 lines of JavaScript and “broke the Internet”
  • NPM & left-pad: Have We Forgotten How To Program?
  • Code dependencies are the devil.
  • I’m harvesting credit card numbers and passwords from your site. Here’s how.
  • „event-stream incident“, óprúttinn aðili tók yfir event-stream pakkann á npm
    • "An NPM package with 2,000,000 weekly downloads had malicious code injected into it. No one knows what the malicious code does yet."
    • "I don't know what to say."
    • The npm blog: Details about the event-stream incident
  • The Ant Design Christmas Egg that Went Wrong
• Fyrirlestur 3
  • Að tengjast Postgres
  • cURL tutorial
  • PostgreSQL on the command-line
  • PostgreSQL Exercises
• Fyrirlestur 4
  • OWASP top 10
    • A10:2017 Insufficient Logging and Monitoring
    • A9:2017 Using Components with Known Vulnerabilities
    • A8:2017 Insecure Deserialization
    • A7:2017 Cross-Site Scripting (XSS)
    • A6:2017 Security Misconfiguration
    • A5:2017 Broken Access Control
    • A4:2017 XML External Entities (XXE)
    • A3:2017 Sensitive Data Exposure
    • A2:2017 Broken Authentication
    • A1:2017 Injection
  • have i been pwned?
  • Reply All #130: The Snapchat Thief
  • Hacker Lexicon: SQL Injections, an Everyday Hacker’s Favorite Attack
  • How I Hacked 40 sites in 7 minutes
  • The MySpace Worm that Changed the internet Forever
  • Meet the seven people who hold the keys to worldwide internet security
  • XSS Prevention Cheat Sheet
  • alert(1) to win – XSS leikur!
  • OWASP: Logging cheat sheet
• Fyrirlestur 5
  • Saga kökunnar frá höfundi hennar
  • The drastic effects of omitting NODE_ENV in your Express.js applications
  • The Twelve-Factor App
    • I. Codebase
    • II. Dependencies
    • III. Config
    • IV. Backing services
    • V. Build, release, run
    • VI. Processes
    • VII. Port binding
    • VIII. Concurrency
    • IX. Disposability
    • X. Dev/prod parity
    • XI. Logs
    • XII. Admin processes
• Fyrirlestur 6
  • Doktorsritgerð Fielding
  • How to GET a Cup of Coffee
  • REST isn’t what you think it is, and that’s OK
  • Martin Fowler: Microservices
  • The Death of Microservice Madness in 2018
• Fyrirlestur 7
  • No Way, JOSE! JavaScript Object Signing and Encryption is a Bad Standard That Everyone Should Avoid
  • Everything Is Fast For Small n
  • Cross-Origin Resource Sharing (CORS)
• Fyrirlestur 8
  • React: Reconciliation
  • prop-types
  • React docs
  • Pete Hunt: React: Rethinking best practices -- JSConf EU 2013
  • WTF is JSX
  • React: Accessibility
  • React Router
• Fyrirlestur 9
  • React.Component
  • React Lifecycle Methods diagram
  • You Probably Don't Need Derived State
  • Higher-Order Components: Caveats
  • Container Components
  • Presentational and Container Components
• Fyrirlestur 10
  • When Does a Project Need React?
  • Evolving Patterns in React
  • React Design Principles
  • React Fiber Architecture
  • React - Basic Theoretical Concepts
  • Build Your Own React — A Step By Step Guide
  • React as a UI Runtime
  • Flux examples
  • Redux
  • Getting Started with Redux, video
  • Redux Real World Example
  • React Redux API
  • MobX – Simple, scalable state management
  • Introduction Hooks
  • preact – Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
• Fyrirlestur 11
  • Webpack documentation
  • TypeScript handbook: Basic Types
  • TypeScript handbook: Functions
  • Create React App: Adding TypeScript
  • A List Apart
  • Smashing Magazine
  • CSS Tricks
  • freeCodeCamp
  • Syntax
  • GraphQL
  • Gatsby
  • React Native
  • Vue
  • Reason,
  • MDN: Progressive web apps
  • Progressive Web Apps

Verkefni

• Verkefni 1
  • Kynning á verkefni, Nánar í fyrirlestri 2
  • Sýnilausn
• Verkefni 2
  • Kynning í fyrirlestri
  • Sýnilausn
• Verkefni 3
  • Sýnilausn
• Verkefni 4
  • Kynning í fyrirlestri
  • Sýnilausn
• Verkefni 5
  • Kynning í fyrirlestri
  • Sýnilausn
• Verkefni 6
  • Kynning í fyrirlestri
  • Sýnilausn

Hópverkefni

• Hópverkefni 1
  • Kynning í fyrirlestri
  • Sýnilausn
• Hópverkefni 2
  • Sýnilausn

---

Útbúa fyrirlestra

Allir fyrirlestrar eru skrifaðir í Markdown. Til að útbúa fyrirlestra er revel.js notað með pakkanum reveal-md. Til þess að keyra fyrirlestra þarf að keyra í rót verkefnis:

npm install
npm run present

Linting

Til að keyra linting á markdown:

npm run markdownlint

JavaScript kóða í .js, .html og .md skrám:

npm run eslint-js
npm run eslint-markdown
npm run eslint-html
npm run eslint # keyrir allt að ofan

Allt saman keyrir með:

npm test