itp-dwd / 2020-spring Goto Github PK

WWW and the internet?

TBD

Javascript history:

https://roadmap.sh/guides/history-of-javascript

I'd only seen this mentioned a couple times, but saw this and wanted to flag it: https://www.robinwieruch.de/web-components-tutorial

https://thehistoryoftheweb.com

https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/

https://www.swyx.io/writing/netlify-git-centric/

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

Trying to prevent what this blog post talks about, needing to add a ton of different technologies before being able to get anything done, is something I think has come up a lot in the context of this class.

Possible guiding principle: including additional technology and abstraction only when necessary.

https://www.taniarascia.com/getting-started-with-git/

How to install and use node:
https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/

• this might confuse more than it helps, but just a reference to get started

via: https://www.taniarascia.com/developer-blogs-to-follow-2019/

https://www.robinwieruch.de/blog

https://hackernoon.com/personal-developer-blog-of-the-year-hacker-noon-noonies-awards-2019-hz2tu32ql

https://khalilstemmler.com/articles

SwyX: https://www.swyx.io/writing

https://gomakethings.com/resources/ ==> vanilla JS // See projects section for vanilla JS applications and tidy clean code.

As someone who has done software development exclusively on Mac and Linux, I have no idea how folks develop JS applications on Windows. Apparently they use a thing called "Windows Subsystem for Linux." I'm going to try installing it on my Windows machine and report back...

Just got a copy of https://www.superhi.com/learn-to-code-now-book for our reference, just fyi!

More emphasis cannot be put on making sure students can articulate their concepts and project needs through wireframes and sketching. Effective sketching and wireframing is a key skill for working on a team.

How to interface with a server / api / database

Some really cool webpack bundler wrappers that are basically zero config:

• Parcel: https://parceljs.org/getting_started.html
• Bankai: https://github.com/choojs/bankai

Check the GDrive Folder for the /Slides directory.

I've started adding content to the various weekly slides.

One thing that comes up a lot is the need to store images. One quick-and-dirty solution is to store compressed small images as base64 strings in mongo, but better is to use static file hosting like S3.

This feels like an important thing to raise as considerations for development.

e.g. w/ heroku
https://devcenter.heroku.com/articles/s3-upload-node

https://www.robinwieruch.de/what-is-an-api-javascript

Students should be able to get a brief and break down how to make simple prototypes of the larger web application in a way that shows they are on the right track. They should then be able to discuss how to bridge the connections between unconnected components so that they might fit together.

https://jsonplaceholder.typicode.com/users

super cool!
https://jsonplaceholder.typicode.com/

Make a website and dial up your Git jazzercize routine to the max.

git add → git commit -m "adds feature X" → git push origin → repeat

This Git disco will get you PUMPED UP.

• Quant Humanists class:
  • Has a bunch of web dev stuff
  • https://github.com/joeyklee/quant-humanists-2019/
• Coding Train Data and APIs:
  • Pretty much a video series about the projects in Quant Humanists
  • https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X
• Shawn's Dynamic Web Development Syllabus
  • https://itp.nyu.edu/~sve204/dwd_spring2018/
• Another Dynamic Web Development Org/Repos from 2014, 2015:
  • https://github.com/DWDatITP
• Sam Slover's courses
  • Designing for data personalization: https://github.com/sslover/designing-for-data-personalization/blob/master/syllabus.md
  • API of you: https://github.com/sslover/api-of-you
• Jason Sigals Web Dev Course:
  • https://therewasaguy.gitbooks.io/idm3193-dynamicweb-fall2016/content/tips-for-progress.html

https://khalilstemmler.com/articles/software-design-architecture/full-stack-software-design/

https://overreacted.io/the-elements-of-ui-engineering/

There are SO many CMS options out there so in some ways the trick is to pick one and learn that one really well for commercial jobs or having a sweet blog for your awesome art mag collective etc.

Here's a list of ones I'm familiar with:

Other Possibilities

https://khalilstemmler.com/articles/software-professionalism/books-that-developers-should-read-in-2020/

https://www.taniarascia.com/javascript-mvc-todo-app/

Ideas:

• create a dynamic front end web application that responds to:
  • time of day
  • the weather
  • API of your choice
• the page must be responsive to the device size
• include an interactive element that responds to an event (e.g. click, scroll, mouseover, etc)

Where can one do dev work for do gooder studios or other orgs?

Curated lists by cool people:

• Design gigs for good: https://www.designgigsforgood.org/
• Words of Mouth: https://www.wordsofmouth.org/
• Source: https://source.opennews.org/jobs/

Not in any particular order:

• Nava: https://www.navapbc.com/ // https://technical.ly/dc/2019/12/16/nava-sheena-bryant-software-engineers-career-change-inclusion/

• Propublica: https://www.propublica.org/jobs/
• ACLU: https://www.aclu.org/

(more to come)

https://twitter.com/hashim_warren/status/1216484174640680961?s=20

I think Tania Rascia is one of the best (maybe THE best) writers of tutorials out there. At least something about the way she writes and structures everything really resonates with my brain internals.

Intro to the DOM

• https://www.taniarascia.com/introduction-to-the-dom/

A basic HTML file

• https://www.taniarascia.com/basic-html5-file/

Design for Developers - structuring the DOM and styling

• https://www.taniarascia.com/design-for-developers/

You don't need a framework for responsive design

• https://www.taniarascia.com/you-dont-need-a-framework/

https://www.digitalocean.com/write-for-donations/

Just a bunch of stuff I've made that are relevant for this course:

Backend:
* Express Basic Authentication:
* https://github.com/joeyklee/very-basic-express-auth-example

• Full stack
  • Fullstack Data Selfie App: Node.js / Express, NEDB, P5.js
    • https://github.com/joeyklee/data-selfie-app
  • Working with Data and APIs in Javascript:
    • https://github.com/CodingTrain/Intro-to-Data-APIs-JS
  • The Weather Here App: Fullstack CRUD App with Node.js/Express, Mongodb/NeDB, Leaflet.js
    • https://github.com/joeyklee/the-weather-here
  • Simple Express and p5.js Application: Fullstack CRUD Application
    • https://github.com/joeyklee/simple-express-api
  • Feathers JS with p5:
    • https://github.com/joeyklee/feathersjs-p5-example
  • Feathers JS: Data Feelings App
    • https://github.com/joeyklee/my-data-feelings
  • Feathers.js + Choo.js Boilerplate:
    • https://github.com/joeyklee/feathers-choo-boilerplate

Pretty fancy stuff - maybe not for this class, but worth showcasing

• See: https://svelte.dev/

A few readings on people's career trajectories into development I think could be interesting. I think it could also be enlightening in highlighting the difference between being and web developer (full stop) vs. using web development in creative practice.

• Tania Rascia, https://www.taniarascia.com/everything-i-know-as-a-software-developer-without-a-degree/ || https://egghead.io/podcasts/switching-careers-and-learning-in-public-with-tania-rascia

https://flaviocopes.com/cookies/

Create a form for students to submit their homework that includes:

• Name
• Email
• Which assignment
• GitHub URL
• Deployment URL
• Questions

Open questions:

• Do we want the students to also do blog posts, or submit non-programming work?

For reference:

• ICM Weeks
• Eyebeam Workshop Template, probably overkill but I also like how explicit it is about a lot of things.

I love this piece about "How to talk to kids" as a way of deconstructing feedback, suggestions, advice, and critique. Regardless of whether we're talking to children or adults, this type of conscientiousness is amazing.

https://www.theatlantic.com/family/archive/2018/06/mr-rogers-neighborhood-talking-to-kids/562352/

@catarak Based on the https://roadmap.sh I created a kind of "check list" for front end and backend concepts that might help our students to see where they are and where they might go with web development:

See:

• https://github.com/itp-dwd/2020-spring/wiki/Front-end-Roadmap
• https://github.com/itp-dwd/2020-spring/wiki/Back-end-Roadmap
• https://github.com/itp-dwd/2020-spring/wiki/DevOps-Roadmap

Maybe each student can make a copy or fork it and then fill out these sections so they can map their own progress and knowledge gains/gaps.

@catarak - added a gues speaker briefing in the wiki:
https://github.com/itp-dwd/2020-spring/wiki/Guest-Speaker-Brief

Oh so many wonderful deployment options these days...

Summary

In order of what I use / think are the most approachable:

Platforms as a service

• Github Pages: https://pages.github.com/ (client side only)
• Glitch: https://glitch.com/ (client & server)
• Heroku: https://www.heroku.com/ (client & server)
• Zeit: https://zeit.co/ (client & server)
• Netlify: https://www.netlify.com/pricing/ (client & server)

Database hosting:

• MLab: https://mlab.com/ (deprecated, moving to MongoDB Atlas)

Other options

• DigitalOcean: https://www.digitalocean.com/

Students should leave the class with the ability to identify the key requirements and needs when given a briefing.

In other words, students should be able to spec out the needs and requirements for their projects - identifying higher level needs (e.g. the project needs a database or data does not need to persist) and then drilling down into specifics (e.g. we will use mongodb)

Javascript Types:
https://www.taniarascia.com/javascript-day-one/

Fetch:
https://www.taniarascia.com/how-to-use-the-javascript-fetch-api-to-get-json-data/

Understanding events
https://www.taniarascia.com/understanding-events-in-javascript/

Navigating and using object methods
https://www.taniarascia.com/how-to-use-object-methods-in-javascript/

TBH, I feel like firebase is all over the place. Maybe once you get a hang of the API its great, but all their tutorials feel chaotic 😬

https://firebase.google.com/docs/web/setup

example:
https://github.com/firebase/quickstart-js/tree/master/functions

https://runjs.dev/

SuperHi! Is a nice ref - web dev for designers:

https://www.superhi.com/

They use a different stack, but good for reference:

• https://www.superhi.com/video/venue-part-1-how-to-make-a-web-app-from-scratch
• https://www.superhi.com/video/venue-part-2-adding-images-to-your-site-with-amazon-s3
• https://www.superhi.com/video/venue-part-3-adding-styles-to-our-site-using-sass
• https://www.superhi.com/video/venue-part-4-getting-your-code-live-and-hosted-with-heroku
• https://www.superhi.com/video/venue-part-5-editing-and-deleting-posts

https://lauren-mccarthy.com/Critical-APIs

@catarak - I made a first pass at defining week 2 assignment.

One thing we should emphasize more in Week 2 is the design process of sketching ==> wireframing ==> creating a design in sketch/<insert design program here> ==> creating a style guide ==> then translating to code. I feel it might make it easier to understand how to go from content to a styled layout and features.

Create a google form to send to students to gauge their backgrounds/interests etc

https://ohshitgit.com/