CS5610 Web Development


John Alexis Guerra Gómez


jguerra at northeastern.edu
@duto_guerra

Slides:https://johnguerra.co/lectures/webDevelopment_fall2021/01_Introduction/

Class page:https://johnguerra.co/classes/webDevelopment_spring_2021/

Syllabus

Hybrid course

  • This class is an in-person class unless you have explicit permission by the university to attend remotely
  • If you wanted to be remote, you were supposed to apply already using this form
  • They might still accept you if you have a good reason

Remote Learners

  • I ask you to keep your camera on
  • It helps me teach better
  • You must be ready to participate at all times

Recordings

  • The classes will be recorded
  • If you don't feel comfortable being recorded, let me know
  • Useful for seeing me code slower, or faster if you like

Class Objectives

At the end of the class you should be able to:

  • Build a modern web application
  • Be able to learn new web technologies
  • Understand web architectures
  • Love/Hate the professor

Warning!!!

This is a tough class!!!

  • Expect to spend at least 12-15 hours weekly on it, more if you really want to master the concepts
  • If you take both my classes and work... I'm not sure when you will sleep...
  • I cannot do the learning for you
  • Be prepared for changes, I adjust during the semester to teach you better

Topics

  • HTML5, CSS
  • JavaScript
  • Node.js
  • Mongo
  • Basic Web design
  • Usability
  • Web Accessibility
  • Security
  • React
  • Testing
  • Public APIs, Facebook, Twitter, Instagram
  • Scalability
  • Desktop Apps with JS
  • SVG + Canvas
  • Web Sockets
  • Gatsby?

Readings

  • Asynchronous materials
    • You read them on your own
    • Mandatory
    • Tweet before class something about what you read
  • Synchronous materials
    • Discussions
    • Advanced topics
    • Random questions (participation)

Comments (tweets) before class

  • Must be interesting and original
  • Tweet using #WebDev @NortheasternCA
  • Count as part of the participation grade
    • 2pts Original and interesting
    • 1pts Interesting
    • 0pts Non-interesting

Class participation

Slack

Make sure you join these channels
  • #announcements For the official communications from staff. Don't post here
  • #project For proposing your projects
  • #classchat Guess what

Lottery

  • Ran in the first five minutes of the class
  • Be early
  • Questions about the readings for the day

Lottery (Grading)

  • -2 Wasn't there when called upon on class
  • -1 Answered wrong
  • 0 Regular answer
  • 1 Kind of good answer
  • 2 Great answer

Lottery (Grading II)

  • Your final participation grade will depend of the average of the group
  • You need to have at least the average points of the group

Requirements

  • Coding (that's what we do in CS)
  • Github and Twitter accounts (fill the form on the class website)
  • Lot's of enthusiasm

Grade

Concept %
Projects 60%
Participation 40%

Projects

  • One short project – Individually
  • Two short projects - Pairs
  • One final project - Pairs

More about projects

  • All code submitted to Github, MIT License
  • We are going to do Code Reviews
  • Class presentation
  • All projects are due 24hrs before class
  • Then you code review one of your classmates'
  • Mostly open topic
    • But real world problems!

Ethics and Code of conduct

  • Zero tolerance to fraud
  • Total respect
  • No mockery
  • No bullying
  • No discrimination

Support

  • Slack channel
  • Office hours by appointment
  • Two TAs
    • Zhuang, Fangquan zhuang.f at husky.neu.edu
    • Liao, Yixuan liao.yi at husky.neu.edu

Who am I?

PhD

Silicon Valley

Back to Colombia

Web Apps Examples

My home page

https://johnguerra.co

My home page

  • DB: None
  • Backend: Apache
  • Frontend: Bootstrap

My PhD Thesis

http://treeversity.cattlab.umd.edu

My PhD Thesis

  • DB: Postgresql
  • Backend: DJango (Python) + Apache
  • Frontend: D3.js + Bootstrap + JQuery

Tweetometro

http://tweetometro.co

Tweetometro

  • DB: Plain text files
  • Backend: DJango | Standalone Twitter API listener
  • Frontend: D3.js + Bootstrap.js

Who likes my Facebook


http://wholikesmyfb.com

Who likes my Facebook

  • DB: None
  • Backend: Apache
  • Frontend: D3.js + Bootstrap.js + Facebook API

Auto Album Organizer

Auto Album Organizer

  • DB: File System
  • Backend: None
  • Frontend: D3.js
  • Running as a desktop app with NW.js

How did Colombia really vote

https://johnguerra.co/viz/resultadosSegundaVuelta2018/
  • DB: None
  • Backend: Apache
  • Frontend: D3.js + Scrollytelling

BTactile

http://btactile.com

BTactile

  • DB: Mongo
  • Backend: Meteor
  • Backend: Meteor + React.js

Lucy Tejada Táctil

http://lucytejadatactil.com

Lucy Tejada Tactil

  • DB: JSON + GraphQL
  • Backend: Apache + Static Pages (Gatsby)
  • Frontend: React

Next

A little motivation

https://www.paysa.com/salaries/full-stack-developer--t

Thank you

And Welcome!