Tech Tutorials
The usual tech stack that the DH Lab uses for web projects is:
- backend code written in Python using the Django web framework to implement a RESTful API
- frontend code written in JavaScript using the React framework for building user interfaces
If some or all of that was completely foreign to you, do not fear! We'll be covering these concepts throughout the semester, and by working with these tools you'll find your way in no time at all.
Here is a collection of materials you can use to start developing fluency with the tools we'll be using:
Git
Git workflow tutorial: An introductory exercise for the lab's Git workflow.
Python and Django
We won't be covering any introductory Python material, as we expect that you'll be getting enough of that from your coursework. If you have any questions, feel free to ask anyone on staff. You can also check out some of the Python books we have in our lending library, including one by our very own former postdoc Lisa Tagliaferri!
Django tutorial: Django's own documentation is fantastic, and reading through (and if you have time working through) the tutorial will get you up to speed on how Django works.
Django REST Framework tutorial: Once you have your head around how Django's models work, have a read through (or follow along with) this tutorial about DRF, the Django package that we'll be using to implement our backend API.
JavaScript and React
The Modern JavaScript Tutorial: If you have little-to-no experience with JavaScript or are not familiar with the conventions of modern JavaScript (ES6+) this tutorial is a nice, concise introduction and reference to the language.
MDN web docs: Mozilla has extensive documentation and tutorials for almost every modern frontend web technology.
React tutorial: From React's official docs, this walks you through putting together a game of tic-tac-toe using the React framework. A couple of things to make your time with this material more productive: when it says you can choose whether to do the tutorial in the browser or in a local dev environment, do it in a local dev environment. In the setup step 5, where it says -- "Add a file named index.js in the src/ folder with this JS code." -- please do not download or copy this code into your local file. Instead, copy it out by hand, line-by-line. I know this is tedious, but you will learn much more this way.
Computer Vision
OpenCV-Python Official Tutorials: Tutorials for OpenCV hosted in the official docs. Almost everything we will want to do this semester is in here somewhere, so do some exploring!
Mapping
D3 in Depth - Geographic: Read me first! This is a great rundown of how D3 interacts with GeoJSON to produce SVGs of maps.
More than you ever wanted to know about GeoJSON: A bunch more about GeoJSON.
GeoJSON.io: Fun tool for playing around with GeoJSON.
MDN web docs - SVG Tutorial: We'll be manipulating SVGs a lot. Get familiar with these docs.