🗓️ Today’s topics

• Exercism review
• Intro to React
  • How does React work?
  • What does React code look like?

🛠️ Setup

Make sure you have the following set up in your local environment (docs listed below in Resources):

• Node & npm
• create-react-app
• ESLint for VS Code
• React developer tools for Chrome

📖 Read | 📺 Watch | 🎧 Listen

• ⭐ 📖 React Quick Start (official beta)
• 📖 React docs
• 📺 Kent C. Dodds, The Introduction to React You’ve Been Missing
• 🎧 Syntax.fm podcast: The React Episode

🎯 Do

Beginner’s Guide to React Tutorial. This will show you the most modern way to build React apps.

🚨 The video for that tutorial was taken down but the creator made a Twitch stream of the same content.

This link will create an empty repo on GitHub that you can use to push your tutorial code to.

If you finish this and want to keep going, try one of these other tutorials:

• The Beginner’s Guide to React - video-driven, very complete
• The official React tutorial - classic, official. Uses class-based components, which are a bit older, but still widely used
• Dave Ceddia’s React tutorial - very long, very comprehensive

🔖 Resources

• Create React App Docs
• ESLint Plug-in for VS Code
• ESLint Docs: Getting Started You probably don’t need to get too deep into this right now, but if you want to know more about configuring ESLint, this is the place to go.
• How to Lint and Format Code with ESLint in VS Code This tutorial walks you through using ESLint in a more comprehensive way.
• React Dev Tools Extension Chrome
• Airbnb JavaScript Style Guide

👾 Code & Notes

• An Extremely Minimalistic React App
• Replit with Arrays and Sets

🗓️ Today’s Topics

• The woes of deployment and what to do about them
• Django managers, lookups, and querysets
• Using the Django shell to test out your models and make queries

🎯 Project: Continue Building Habit Tracker

Today your models should be done, so you can begin building out the urls, views, and templates you will need. Before you write the code, plan for what you will need. A good way to do this is to sketch out what your user will see.

There are examples for a lot of what you need to do in the Django Recipes codebase but you will have to adapt them to your Habit Tracker use cases.

🔖 Resources

Models

• List of all Django Reference content related to Models
• Don’t forget! Django Best Practices: Custom User Model
• Django Docs: Saving Model Instances

Managers and QuerySets

• Django Model Managers
• Django Related Objects Reference
• Django QuerySets

Queries

You can think of queries as talking to the database. To support all our CRUD actions, we need to be able to create, read, update, and delete objects from the database. Django has a built-in library (the Django ORM) that lets us do all that.

• Django Queries: Retrieving Objects
• Django Queries: Field lookups
• Django Queries: Lookups that span relationships
• Django Queries: Lookups with Related objects

🌟 EXTRA/TMI

• SQL Basics: Learn X in Y minutes -> this is a helpful reference for SQL syntax when you run into it. You do not need to write SQL for Django because the Django ORM does it for you, and it does it well. The Django docs often illustrate queries made by the ORM using SQL syntax, however, and you will find it helpful in your job to know the basics.
• Postgres GUI: Postico

🦉 Code & Notes

• Django Recipes App
• Deploying a Django App to Heroku
• Using Postgres Locally
• ⭐ Django Queries Cheat Sheet

During this phase, your daily post will be specific to your section, either front-end or back-end. Emojis in the title will mark the post as front end (🦊) or back end (🐻).

This first post is for everyone. There are two additional posts today, one each for front-end and for back-end. Scroll down to see those.

🕘 Phase 3: Schedule and Zoom changes

🚨 Zoom classroom link has changed

Please use this link from now on. It has been updated on Slack so you can still use that bookmark at the top of the team channel.

Team meetings are on Monday, Tuesday, & Thursday

Your team meets either during the morning or the afternoon. The rest of the day is lab time, during which you are expected to be online and working. Please let us know if you will be unavailable during work hours.

Please use lab time to read/watch/listen to the required readings/videos/podcasts on your daily classroom post and to work on your lab projects.

You are welcome to use our classroom Zoom link and/or the co-working Zoom during lab times.

• 9:30-11:30 🦊 Front End team meeting
• 2:00-4:00 🐻 Back End team meeting
• All other times 9:30-5:30: Lab time

Wednesday is Lab Day, all day

• 9:30-5:30 Lab time

Friday is Lab Day as usual

• 9:30-10:30 Huddle (usually; check your calendar)
• 11:00-12:00 Career Services (usually; check your calendar)
• 1:00-5:30 Lab time

🗓️ Today’s Topics for both Front and Back End

• Intro to Phase 3!
• Note-taking as a developer
• Setting goals for Phase 3
• Intro to Advanced Back-End or Advanced Front-End

🤨 What does “Advanced” Even Mean?

⚠️ And even for experienced engineers, their experience is limited to certain areas, and completely dependent on having had opportunities to develop that experience.

What you don’t know will always outweigh what you do as long as you work in a field that moves as fast as tech does.

For an insightful take on being comfortable with what you don’t know, read this great blog post by one of the most well-respected and influential JavaScript developers out there right now: Dan Abramov, Things I Don’t Know

✅ TODO for Everyone Today

• Reflect on where you are in this program. You’ve learned a lot and you have a lot left to learn. What are YOUR goals?
• Complete this Goals Reflection exercise to re-energize for what’s ahead and focus on what you want to accomplish and post a tip from your CONTINUE list, or a request for advice for something that you’ve been struggling with to our team Slack channel.
• Create a schedule that you can stick to for the times you will not be in class (see the time management resources below for some suggestions on managing your time effectively).
• Learn Markdown -> see the resources section below.
• Pick a note-taking application that will let you take notes while you read and work. It’s important that it can properly format code blocks. Here are some options (don’t overthink this choice – just pick something that you feel comfortable with).
  • VS Code (with this option you could create a simple git repo with markdown files)
  • BoostNote
  • Notion
  • Typora

🔖 Resources for Everyone

Time Management

• The Pomodoro Technique for Time Management & Productivity
  • Zapier’s list of Pomodoro Apps
• Time Blocking
• Common Time Management Problems & Solutions

Tech Pros Have Good Advice for You

• Rukia Sheikh-Mohamed, 5 Steps to Getting Unstuck
• Katrina Owen, How to Fail Without Being a Loser
• Tom Stuart, The Most Common Problem In Software Development And How To Fix It
• Syntax.fm Podcast: Advice for New Devs
• VLC An open source video player that gives you lots more control than YouTube does (like more playback speed options).

Markdown & Taking Notes

Markdown is an easy-to-learn way to add formatting to plain text and code snippets. It is commonly used in READMEs on GitHub and can even used to generate HTML. It comes in handy a lot for developers, and you should know how to use it.

The .md extension indicates a Markdown file. The pages for this blog and every note in your team’s notes repo are formatted in Markdown – have a look on GitHub for examples!

• How to take useful notes as a developer
• Mastering Markdown 30-min video course that will help you get proficient with Markdown quickly.
• Markdown Guide: Getting Started
• Markdown Tutorial
• How Note Taking Makes Me a Better Developer

⚠️ You only need to read this post if you are on the front end team 🦊

🗓️ Today’s topics

• Return to JavaScript!
• The modern JavaScript ecosystem
• ES6 features

📖 Read | 📺 Watch | 🎧 Listen

These are required readings, videos, and/or podcasts. Read, watch, or listen, and take notes.

• ⭐ 📖 Modern JavaScript Explained for Dinosaurs -> This is essential for context.
• 📖 State of JS 2021 Survey Results -> Skim for an overview of current trends in the JS ecosystem.
• 📺 ES6 tutorial for beginners
• 📖 React vs. Plain JavaScript -> This will be helpful background reading for our introduction to React tomorrow.
• 📺 Modern JavaScript for Django Developers
• 📖 Modern JavaScript for Django Developers - this is the blog post version of the above talk. Read the first two parts only:
  • Part 1: Organizing your Front-End Codebase in a Django Project
  • ⭐Part 2: A Crash Course in Modern JavaScript Tooling – this is a complement to the first article on this list.
• An Absolute Beginner’s Guide to npm

🎯 Do

Complete at least two exercises from this list on Exercism.io JavaScript Track:

• Isogram
• Scrabble Score
• ETL
• Simple Cipher
• Hamming
• Gigasecond
• Grade School

If you get through two, keep going! More practice is better.

🔖 Resources

• MDN: A Re-Introduction to JS
• JavaScript for React: A Cheat Sheet -> You’ll need to understand all of the JS on this page to be able to use React effectively. It would be useful to type out the examples and run them yourself.
• The Modern JavaScript Tutorial -> This is a solid and comprehensive reference with topics clearly labeled.
• Clean Code: JavaScript -> “Clean Code” is a concept popularized by a book of the same name by Robert C. Martin. It means code that is easy to understand and easy to change. This guide applies these concepts to show you how to write clear and maintainable JavaScript. This is something that you will pick up as you go along, so don’t worry about “following the rules.” The rules are subjective and open to interpretation (as this guide shows). But it’s good to know that standards for code exist and developers are commonly expected to conform to them.
• Make sure that Node and npm are installed on your computer -> You probably did this way back in the beginning but here’s a link to the set-up instructions in case you need it.

👾 Code from class

• Functions in JS Review