├── .gitignore ├── README.md ├── additional-topics ├── 01rails_cancan_rolify.md ├── 08rails_sql_joins.md ├── 09rails_sql_terminal.md ├── active_record_query_syntax.md ├── class-inheritance.md ├── cookies.md ├── layouts_flash_messages.md ├── sql_foreign_keys_and_relations.md └── template-literals.md ├── apartment-app ├── backend │ ├── api.md │ └── devise.md ├── connecting │ └── connecting.md ├── demos.md └── frontend │ ├── intro.md │ └── protected.md ├── assets-first-day ├── 16-week-career-services-overview.pdf ├── 16-week-requirements-and-expectations.pdf ├── career-services-overview.pdf ├── code-of-conduct.pdf ├── how-we-work.pdf ├── html-css-fundamentals.pdf ├── pair-programming.pdf ├── requirements-and-expectations.pdf ├── slack-overview.pdf ├── tech-stack.pdf └── zoom-etiquette.pdf ├── capstone ├── api-keys.md ├── assets │ ├── connect-repo.png │ ├── creation-commands.png │ ├── environment-variables.png │ ├── has-many-through.png │ ├── new-postgres.png │ ├── redirects-rewrites.png │ ├── rspec-simplecov-term.png │ ├── simplecov-browser.png │ ├── simplecov-controller.png │ ├── simplecov-file.png │ ├── web-service.png │ ├── yarn-coverage-browser.png │ ├── yarn-coverage-file.png │ └── yarn-coverage-term.png ├── code-coverage.md ├── fetch.md ├── has-many-through.md ├── modifying-devise.md ├── project-details.md ├── render.md └── requirements.md ├── career-services ├── assets │ ├── ace-the-tech-interview.pdf │ ├── cover-letters.pdf │ ├── elevator-pitch.pdf │ ├── life-map-exercise.pdf │ ├── linkedin-all-star-status.pdf │ ├── linkedin-creating-content.pdf │ ├── linkedin-extending-network.pdf │ ├── linkedin-guided-tour.pdf │ ├── networking.pdf │ ├── prentus.pdf │ ├── tech-industry-outlook.pdf │ ├── tech-interviews-101.pdf │ ├── tech-resumes.pdf │ ├── technical-portfolios.pdf │ └── transferable-skills.pdf ├── cover-letters.md ├── job-listings.md ├── portfolios.md └── state-of-tech.md ├── cat-tinder ├── assets │ ├── cat-schema.png │ ├── rails-routes.png │ └── reactstrap.png ├── backend │ ├── api-cors.md │ ├── api-endpoints.md │ ├── api-intro.md │ ├── seeds.md │ └── validations.md ├── connecting │ ├── fetch-create.md │ ├── fetch-delete.md │ ├── fetch-read.md │ └── fetch-update.md ├── demos.md └── frontend │ ├── cat-create.md │ ├── cat-read.md │ ├── cat-testing.md │ ├── cat-update.md │ └── intro.md ├── github ├── assessments.md ├── assets │ ├── clone.png │ ├── commit.png │ ├── driver-1.png │ ├── driver-2.png │ ├── gh-1.png │ ├── gh-2.png │ ├── gh-3.png │ ├── gh-4.png │ ├── git-1.png │ ├── git-2.png │ ├── git-3.png │ ├── git-4.png │ ├── git-5.png │ ├── git-6.png │ ├── git-status.png │ ├── git-workflow.png │ ├── push.png │ └── status.png ├── collaborative-coding.md ├── git-and-github.md ├── github-configurations.md └── style-guidelines.md ├── javascript ├── arrays.md ├── assets │ └── scope.jpg ├── classes.md ├── conditionals.md ├── functions-loops-arrays.md ├── functions.md ├── higher-order-functions.md ├── intro.md ├── jest.md ├── loops.md ├── objects.md ├── spread-operator.md └── ternary.md ├── postgresql ├── assets │ ├── like-set.png │ ├── limit-set.png │ ├── select-all.png │ ├── select-some.png │ ├── spreadsheet.png │ ├── table.png │ ├── where-set.png │ └── with-set.png ├── intro.md └── queries.md ├── rails ├── active-record-intro.md ├── assets │ ├── generate-controller.png │ ├── generate-resource.png │ ├── model-spec.png │ ├── postman-create-json.png │ ├── postman-delete-send.png │ ├── postman-get-send.png │ ├── postman-index-json.png │ ├── postman-interface-layout.png │ ├── postman-post-send.png │ ├── postman-request.png │ ├── postman-update.png │ ├── rails-default-view.png │ ├── rails-routes.png │ ├── resource-routes.png │ ├── routes-file.png │ ├── rspec-models-failing.png │ ├── rspec-models-passing.png │ └── rspec-models-pending.png ├── associations.md ├── controllers-routes-views.md ├── fullstack.md ├── migrations.md ├── params.md ├── rails-api.md ├── rails-intro.md ├── restful-routes-crud.md └── validations.md ├── react ├── assets │ ├── 1-dice.png │ ├── 2-dice.png │ ├── 3-dice.png │ ├── 4-dice.png │ ├── 5-dice.png │ ├── 6-dice.png │ ├── counter-boxes-inspect.png │ ├── counter-boxes.png │ ├── dice-game.png │ ├── lightOff.png │ ├── lightOn.png │ ├── madlibs.png │ ├── props-pipeline.png │ ├── react-boilerplate.png │ ├── robot_active_listening.png │ ├── switchOff.png │ └── switchOn.png ├── create-react-app.md ├── functional-props.md ├── inputs.md ├── intro.md ├── pig-latin.md ├── props.md ├── state-with-images.md ├── state.md ├── tic-tac-toe.md └── treasure-hunt.md ├── ruby ├── blocks.md ├── classes-objects.md ├── conditionals.md ├── hashes.md ├── inheritance.md ├── intro.md ├── rspec.md └── textbased-game.md └── tools-and-resources ├── assets ├── debugging_breakpoint.png ├── debugging_byebug.png ├── debugging_consolelog.png ├── debugging_debugger.png ├── debugging_debugger_inline.png └── debugging_pry.png ├── attendance.md ├── debugging-tools.md ├── einsteins-puzzle.md ├── interview-questions.md ├── linking-html-javascript.md ├── pair-programming.md ├── reestablishing-expectations.md ├── terminal.md ├── whiteboarding-steps.md └── wireframes.md /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | .DS_Store 3 | .vscode 4 | node_modules 5 | 6 | -------------------------------------------------------------------------------- /additional-topics/09rails_sql_terminal.md: -------------------------------------------------------------------------------- 1 | # SQL in the Terminal 2 | 3 | [![YouTube](http://img.youtube.com/vi/kHwEeimBYEA/0.jpg)](https://www.youtube.com/watch?v=kHwEeimBYEA) 4 | 5 | ## Starting Off 6 | 7 | ### Note for Cloud 9 users 8 | 9 | We need to create a db in postgres for our user's information first, so before entering the psql cli, let's run: 10 | 11 | ```bash 12 | $ createdb 13 | ``` 14 | 15 | To access the Postgres server, open a terminal and run: 16 | 17 | ```bash 18 | $ psql 19 | ``` 20 | 21 | You should then have a prompt that looks something like this: 22 | 23 | ```bash 24 | learn_sd=# 25 | ``` 26 | The learn_sd at the beginning of the prompt is the name of the default database we created with our username. To keep things easy to read, I'll shorten the prompt to just: 27 | ``` 28 | > 29 | ``` 30 | Let's create a real database of our own. In psql, type: 31 | ``` 32 | > CREATE DATABASE test_database; 33 | ``` 34 | 35 | 36 | 37 | This is our first SQL statement. SQL keywords are case insensitive but are conventionally typed in all caps. All SQL statements must end with a semicolon. If you press enter and nothing happens, check to see if the prompt has changed from =# to -# - if so, you forgot to put a semicolon at the end of your statement. Just type one and press enter, and your statement should run. 38 | 39 | Let's list out all of the databases in our Postgres server: 40 | ``` 41 | > \l 42 | ``` 43 | This is a command to psql, the program that is interacting with our Postgres server, and not a SQL statement. psql commands start with a backslash and don't end with a semicolon. 44 | 45 | There are a couple databases used as templates for other databases, template0 and template1. You shouldn't ever delete those. Postgres also makes a default database called postgres , and if you're on a Mac and created a database with your username, that one will be there, too. And now you should have a database called test_database. 46 | 47 | To create tables and columns in our database, we need to connect to it: 48 | ``` 49 | > \c test_database 50 | ``` 51 | Note: Our prompt now shows that we're connected to the test_database 52 | ``` 53 | test_database=# 54 | ``` 55 | To see a list of psql commands, we can type # \? . We can press the down arrow to scroll through them, or q to quit before the end. 56 | 57 | ## Creating a Table 58 | 59 | ### Note, we never, ever, ever do this in a Rails application. Rails manages this for us. We're exploring this because we need to know what Rails is doing under the hood. 60 | 61 | ``` 62 | > CREATE TABLE contacts (name varchar, age int, birthday timestamp); 63 | ``` 64 | This creates a table called contacts with a column for name, age, and birthday. Just like Ruby objects have a class, SQL columns have a data type. In this case, name has the data type varchar, which is means a varying number of characters (this is more or less the SQL equivalent of a string); age is an int, or integer; and birthday is a timestamp, which includes a date and time. 65 | 66 | * Note: the table name is **plural** contact**s**. 67 | 68 | SQL has many data types, but here are the most common ones you'll use: int, float, varchar, text (for long blocks of text), timestamp, and boolean. For a full list, see the PostgreSQL data type documentation . 69 | 70 | To list the columns in our new table, type # \d contacts. 71 | 72 | To see a list of all the tables in your database, type # \dt. 73 | 74 | If you mess something up and need to delete a table, type # DROP TABLE table_name;, where table_name is the name of the table. 75 | 76 | ## Making Changes to a Table 77 | 78 | Here's how to add a column to a table: 79 | ``` 80 | > ALTER TABLE contacts ADD family boolean; 81 | ``` 82 | Drop a column like this: 83 | ``` 84 | > ALTER TABLE contacts DROP family; 85 | ``` 86 | It's a good idea to always have a unique, automatically-incrementing ID number for each record in your database. Here's how to add such a field: 87 | ``` 88 | > ALTER TABLE contacts ADD id serial PRIMARY KEY; 89 | ``` 90 | The serial data type is an autoincrementing integer. 91 | 92 | 93 | # CRUD Commands 94 | 95 | [![YouTube](http://img.youtube.com/vi/otGjamn9Jpo/0.jpg)](https://www.youtube.com/watch?v=otGjamn9Jpo) 96 | ] 97 | 98 | 99 | ## Insert 100 | Now that we have tables with columns, let's put some data in them: 101 | ``` 102 | > INSERT INTO contacts (name, age, birthday) VALUES ('Wes', 43, '1969-05-01'); 103 | ``` 104 | Notice how we need to put quotes around varchars and timestamps, but not around ints. Also, remember that with SQL, we need to use single quotes - double quotes won't work. 105 | 106 | Often, we'll need to get back the ID from an insert, so that we know how to find the row we just inserted. Here's how to return the ID from an INSERT statement: 107 | ``` 108 | > INSERT INTO contacts 109 | ( 110 | name 111 | , 112 | age 113 | , 114 | birthday 115 | ) 116 | VALUES 117 | ( 118 | 'Wes' 119 | , 120 | 43 121 | , 122 | '1969-05-01' 123 | ) 124 | RETURNING id 125 | ; 126 | ``` 127 | 128 | ## Update 129 | What if we need to change data in our database? There are a lot of fancy ways to do this, but let's focus on the simplest and most common: select a record by its primary key, and update its data: 130 | ``` 131 | > UPDATE contacts SET name = 'Wes Anderson' WHERE id = 1; 132 | ``` 133 | 134 | ## Delete 135 | 136 | Now, let's delete a record: 137 | ``` 138 | > DELETE FROM contacts WHERE id = 1; 139 | ``` 140 | We're done playing around with this database now, so let's drop it. First, we'll need to connect to our original, default database. If you don't remember what it was called, just type \list. For me, it's called learn_sd: 141 | ``` 142 | > \c learn_sd 143 | > DROP DATABASE test_database; 144 | ``` 145 | Finally, to quit psql, just run: 146 | ``` 147 | > \q 148 | ``` 149 | 150 | ## Challenge 151 | 152 | ### Create, Update, Insert, DELETE 153 | 154 | * Create a rolodex database. 155 | * Connect to the database. 156 | * Create a persons table with a `serial PRIMARY KEY`, given_name, family_name, address, dob, email using appropriate datatypes found here. 157 | * Add five or more family members to the persons table. 158 | * How many have the same family_name as you? 159 | * Add yourself into the persons table. 160 | * Update all family members with the same family_name as you, to live at the same address. 161 | * Delete all family members not with your family_name. 162 | 163 | [Go to Foreign Keys, Joins & Associations](./10_sql_joins.md) 164 | 165 | [Back to Joins](./08rails_sql_joins.md) 166 | 167 | [Back to Syllabus](../README.md) 168 | -------------------------------------------------------------------------------- /additional-topics/cookies.md: -------------------------------------------------------------------------------- 1 | # Using Cookies 2 | 3 | If we want our variables to persist in between page refreshes or redirects, storing them in cookies is a fantastic way to keep them in the browser history. 4 | 5 | ```ruby 6 | class MainController < ApplicationController 7 | 8 | def answers 9 | cookies[:name] = params[:name] unless params[:name].nil? 10 | render "answers.html.erb" 11 | end 12 | 13 | end 14 | ``` 15 | Now, the `answers` method will store a `name` parameter in a cookie if a `name` parameter exists. 16 | 17 | Update `answers.html.erb`: 18 | ``` 19 | Hello <%= cookies[:name] %>! 20 | Number is: <%= params[:number] %> 21 | ``` 22 | 23 | What happens when we visit the following URLs? 24 | `http://localhost:3000/answers/42` 25 | `http://localhost:3000/answers/42?name="joe"` 26 | `http://localhost:3000/answers/42` 27 | 28 | See cookie in browser: Preferences -> Privacy -> Cookies -> Localhost 29 | 30 | 31 | 32 | ## Challenge: Hi/Lo Game 33 | 34 | * Create a route `/game` to call a method called `try` in `GameController`. 35 | * Test `http://localhost:3000/game?guess=21` in a browser - what error do you get? 36 | * Create a controller `GameController` with a method method called `try`. 37 | * Test `http://localhost:3000/game?guess=21` in a browser - what error do you get? 38 | * Create a view for the `try` method in `GameController` called *try.html.erb*. 39 | * Test `http://localhost:3000/game?guess=21` in a browser and see that try.html.erb is rendered. 40 | 41 | Then, in method `try`: 42 | 43 | * On first call, store a secret number in a cookie 44 | * On each call, check the secret number against the guess (the parameter). 45 | * Then, set an instance variable to the result (call it @result) of the guess (high/low/win). 46 | * Then, render `try.html.erb` 47 | * If you do not win, repeat 2-3. If you win, repeat 1-2-3. 48 | 49 | Then, in *try.html.erb*: 50 | Display the result of the guess 51 | 52 | #### Stretch Challenge One 53 | 54 | Create and display a counter for the number of tries attempted. 55 | 56 | #### Stretch Challenge Two 57 | 58 | Create a route `/new_game` and controller method `reset` to reset the game. 59 | 60 | 61 | #### Stretch Challenge Three 62 | 63 | Accept and store user name, and use it in the views. 64 | 65 | #### Stretch Challenge Four 66 | 67 | Encrypt the secret number. 68 | 69 | 70 | [Back to Syllabus](../README.md) 71 | -------------------------------------------------------------------------------- /additional-topics/layouts_flash_messages.md: -------------------------------------------------------------------------------- 1 | # Layout 2 | 3 | Have you noticed how your views actually contain a valid HTML document, but you never write the `` and `` and other tags like that yourself? That's because they're in the `app/views/layouts/application.html.erb` file, which looks something like this: 4 | 5 | *app/views/layouts/application.html.erb* 6 | 7 | ```erb 8 | <!DOCTYPE html> 9 | <html> 10 | <head> 11 | <title>Wikipages 12 | <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 13 | <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 14 | <%= csrf_meta_tags %> 15 | 16 | 17 | <%= yield %> 18 | 19 | 20 | 21 | 22 | ``` 23 | The `<%= yield %>` bit of code is where your views are inserted. If you ever want to change something on all of your pages - such as adding a logo or nav bar - this layout file is the place to do it. 24 | 25 | If we want to make every page have a different `` we need a way to set it in each view, and then retrieve it in the layout. Here's how to set it in a view: 26 | 27 | *app/views/contacts/show.html.erb* 28 | 29 | ```erb 30 | <% content_for(:title, "New contact | Wikipages") %> 31 | <h1>New contact</h1> 32 | ``` 33 | 34 | We have seen code wrapped in `<%= %>` before. That means it is Ruby code that we want to be printed to the page. When you want to execute code in the view without printing the output, all you need to do is not use the "=" sign like in our `<% %>`-wrapped code snippet above. 35 | 36 | Then, here's how to retrieve it in the layout. 37 | 38 | *app/views/layouts/application.html.erb* 39 | 40 | ```html 41 | <title><%= yield(:title) %> 42 | ``` 43 | 44 | When your layouts get more complex, such as with nav bars that change depending on what page you're on, you can write longer `content_for's` like this: 45 | 46 | ```erb 47 | <% content_for(:navbar) do %> 48 |
  • Home
    • 49 |
  • Something else
    • 50 |
  • Etc.
    • 51 | <% end %> 52 | ``` 53 | 54 | #### The Flash 55 | You might be wishing you could add a message to the user after something has been checked, letting them know that the check was successfully made. Rails provides a tool for doing this called flash messages. (This has nothing to do with the Adobe Flash, by the way.) 56 | 57 | Here's how it works: you set a flash message in the controller. The flash message is stored as a temporary cookie on the user's browser. (A cookie is a place a site can store information in a user's web browser; every time the user makes a request to that site, the browser sends the cookie's data with the request.) When the next page loads, the server sees the flash message, adds it to the page (it's usually included in the layout), and clears the cookie. If the user reloads the page or browses to a new page, the message disappears. 58 | 59 | Let's add a flash to the Password Checker: 60 | 61 | *app/controllers/password_controller.rb* 62 | 63 | ```ruby 64 | class PasswordController < ApplicationController 65 | def check_credentials 66 | if valid(params[:userid], params[:password] 67 | flash.now[:notice] = "Your credentials are valid" 68 | else 69 | flash.now[:alert] = "Your credentails are not valid" 70 | end 71 | render('check_credentials.html.erb') 72 | end 73 | end 74 | ``` 75 | The flash acts very much like a hash, and the two keys you're allowed to set are flash[:notice] and flash[:alert] (the latter usually being for errors). 76 | 77 | (If we were using `redirect_to`, we would just need `flash[:notice]`.) 78 | 79 | Now, let's add the flash message to the layout, right above the page content: 80 | 81 | *app/views/layouts/application.html.erb* 82 | 83 | ```erb 84 | 85 | 86 | <%= flash[:alert] %> 87 | <%= flash[:notice] %> 88 | 89 | <%= yield %> 90 | 91 | 92 | ``` 93 | If we check a password, we can see our flash message. And if we refresh the page, it disappears. 94 | 95 | ## Challenges 96 | 97 | The goal of these challenges is to get practice coding up forms to send information to your controllers and send information back out to the user based on the form information received. 98 | 99 | ### Forms and Params Stories 100 | 101 | - As a user, I can visit a page at `/quadruple` 102 | - As a user, when I submit a number to `/quadruple` I can see that number quadrupled on the page 103 | - As a user I can visit a `/multiply_by` page 104 | - As a user, when I submit two numbers to `/multiply_by` I can see the result of the two numbers multiplied on the page 105 | 106 | ### User Forms Stories 107 | 108 | - As a user, I can visit a 'Subscribe' page with a `name` and `email` input 109 | - As a user, when I fill out my `name` and `email` and click 'Subscribe', I see a thank you message like this: 'Thanks, **name**! You are subscribed with this email: **email**!' 110 | - As a user, I can go to a 'Sign Up' page 111 | - As a user, when I 'Sign Up' with a `user_name`, `email`, `password`, and `password` confirmation, I am greeted by my `user_name` on the same page 112 | - As a user, I can go to a 'Add Profile' page 113 | - As a user, when I submit my profile with a `first_name`, `last_name`, `blurb`, and `hobbies`, I can see my profile information on the same page 114 | - As a user, I can visit a 'Sign In' page 115 | - As a user, if 'Sign In' with a user_id that is at least 6 characters along and a password that is not the same as my user_id, I am greeted by my `user_id`: 'Welcome, **user_id**! 116 | 117 | ## Stretch Challenge 118 | - Add some other validations into your 'Sign In' (ie, no numbers in a user_id/special character & number required in password) 119 | 120 | 121 | [Back to Syllabus](../README.md) 122 | -------------------------------------------------------------------------------- /additional-topics/template-literals.md: -------------------------------------------------------------------------------- 1 | # JavaScript Template Literals 2 | 3 | ## Video: Template Literals 4 | [![YouTube](http://img.youtube.com/vi/72qhgQQNkOo/0.jpg)](https://www.youtube.com/watch?v=72qhgQQNkOo) 5 | 6 | ## Overview 7 | - Template literals in Javascript allow us to embed expressions in our string literals 8 | 9 | ## Learning Objectives 10 | - Understanding the syntax of template literals 11 | - Understanding passing expressions into template literals 12 | 13 | ## Vocabulary 14 | - Template literal 15 | - String interpolation 16 | 17 | ## Additional Resources 18 | - Nesting Templates 19 | - Tagged Templates 20 | 21 | ## Set Up 22 | - Create a file in a text editor with the extension `.js` 23 | - In terminal, cd into the appropriate folder 24 | - $ node filename.js 25 | 26 | 27 | ## String Interpolation 28 | 29 | One of the most useful and common implementations of template literals is string interpolation. String interpolation is essentially the embedding of expressions in a string. 30 | 31 | Here's an example: 32 | 33 | ```javascript 34 | var fruit = "apple" 35 | 36 | console.log(`The fruit is a ${fruit}`) 37 | 38 | fruit = "orange" 39 | 40 | console.log(`Now the fruit is a ${fruit}`) 41 | ``` 42 | 43 | Let's look at the important pieces here: 44 | 45 | - The back tick characters are used to signal the start and end of a template string 46 | - A dollar sign ($) indicates the start of an embedded expression 47 | - The curly braces ({}) indicate the beginning and end of the javascript expression. In this case, fruit is the expression we're asking javascript to evaluate. 48 | 49 | As you may have noticed string interpolation makes our strings very dynamic and easy to read and write. It's worlds apart from what we had to work with pre ES6. 50 | 51 | Here's an compare and contrast with a more complex example: 52 | 53 | ```javascript 54 | var customer = { 55 | name: "Foo" 56 | } 57 | var card = { 58 | amount: 7, 59 | product: "Bar", 60 | unitPrice: 42 61 | } 62 | 63 | // Pre ES6 64 | 65 | var message = "Hello " + customer.name + 66 | " want to buy " + card.amount + " " + card.product + " for a total of " + (card.amount * card.unitPrice) + " bucks?" 67 | 68 | // With ES6 string interpolation 69 | 70 | var message = `Hello ${customer.name}, 71 | want to buy ${card.amount} ${card.product} for a total of ${card.amount * card.unitPrice} bucks?` 72 | ``` 73 | 74 | Here we can see just how many characters string interpolation saves us when constructing string literals that require expressions. Notice we were also able to throw in a math expression in our string. 75 | 76 | Again, our gains are: 77 | 78 | - Easy to write expressions 79 | - Very readable code 80 | 81 | String interpolation is essentially at the core of the template literal feature of ES6 and many of its additional features build on this piece. That said, getting comfortable with just this piece will get you a long way in understanding the more complex template literal implementations. 82 | 83 | ## Multi-line Strings 84 | 85 | Template literals also makes it super easy to make multi-line strings. 86 | 87 | ```javascript 88 | // Pre ES6 89 | 90 | let oldLongString = "This\nis\na\nlong\nstring" 91 | 92 | console.log(oldLongString) 93 | 94 | let longString = ` 95 | This 96 | is 97 | a 98 | long 99 | string 100 | ` 101 | 102 | console.log(longString) 103 | ``` 104 | 105 | Note that the ES6 version again is very easy to read and write. 106 | 107 | ## Other Uses 108 | 109 | Template literals have a few other uses that are a bit beyond the scope of what is useful at this point in the course. That's not to say that you won't ever utilize them. 110 | 111 | 112 | ## Challenges 113 | 114 | 115 | #### Exercise 1 116 | 117 | Consider this variable: 118 | 119 | ```javascript 120 | var meaningOfLife = 42 121 | ``` 122 | 123 | Write the code that prints '**The answer to the meaning of life is 42**'. 124 | 125 | #### Exercise 2 126 | 127 | Consider this code: 128 | 129 | ```javascript 130 | var zooAnimals = ['giraffe', 'fennec fox', 'elephant'] 131 | 132 | zooAnimals.forEach(animal => console.log('The zoo has a' + animal)) 133 | ``` 134 | 135 | Refactor the .forEach method to use string interpolation. 136 | 137 | #### Exercise 3 138 | 139 | Consider this variable: 140 | 141 | ```javascript 142 | var burger = { 143 | cheese: 'cheddar', 144 | patty: 'black bean', 145 | onions: false, 146 | } 147 | ``` 148 | 149 | Write the code that prints '**black bean burger with cheddar**' to the screen. 150 | 151 | **STRETCH** 152 | 153 | Given these 2 burger objects: 154 | 155 | ```javascript 156 | var beanBurger = { 157 | cheese: 'cheddar', 158 | patty: 'black bean', 159 | onions: false, 160 | } 161 | 162 | var turkeyBurger = { 163 | cheese: 'swiss', 164 | patty: 'turkey', 165 | onions: true, 166 | } 167 | ``` 168 | 169 | Write a function takes a burger object and returns a descriptive string. 170 | 171 | For example: 172 | 173 | ```javascript 174 | describeBurger(beanBurger) 175 | --> "black bean burger with cheddar and no onions" 176 | 177 | describeBurger(turkeyBurger) 178 | --> "turkey burger with swiss and onions" 179 | ``` 180 | 181 | --- 182 | [Back to Syllabus](../README.md#unit-one-javascript-foundations) 183 | -------------------------------------------------------------------------------- /apartment-app/demos.md: -------------------------------------------------------------------------------- 1 | # Apartment App Demos 2 | 3 | #### Overview 4 | 5 | As a developer, you will need to be able to present your code and talk about the work you do. Demos can be challenging. Take at least 30 min to plan and practice with your partner. 6 | 7 | Pro tip: Decide ahead of time who will be screen sharing during your demo and if it will be necessary to swap. 8 | 9 | --- 10 | 11 | #### Apartment App Demos 12 | 13 | Each demo should be a total of 10 minutes. This is not a long time and will require practice to effectively complete the objectives in the given time frame. 14 | 15 | **First Developer** 16 | 17 | - Discuss and display the code for a specific feature (protected index, navigation, routes, testing, etc). 18 | - What did the workflow look like for your team? 19 | 20 | **Second Developer** 21 | 22 | - Discuss and display the code for a specific feature (protected index, navigation, routes, testing, etc). 23 | - What was one of the biggest challenges your team faced in this project? 24 | 25 | **Third Developer** 26 | 27 | - Discuss and display the code for a specific feature (protected index, navigation, routes, testing, etc). 28 | - What was your team’s strategy for troubleshooting? 29 | 30 | **Fourth Developer** 31 | 32 | - Discuss and display the code for a specific feature (protected index, navigation, routes, testing, etc). 33 | - How did your team go about managing Trello? 34 | 35 | --- 36 | 37 | [Back to Syllabus](../README.md#unit-nine-react-and-rails-with-authentication) 38 | -------------------------------------------------------------------------------- /apartment-app/frontend/protected.md: -------------------------------------------------------------------------------- 1 | # Apartment App Protected Pages 2 | 3 | #### Overview 4 | 5 | An application will typically have a combination of pages that are available to all users and pages that are only available to users who have created an account. When creating pages that are not visible to all users we must consider how we allow access and restrict access in the application. 6 | 7 | #### Previous Lecture (44 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/QTwUkCEFXh8/0.jpg)](https://www.youtube.com/watch?v=QTwUkCEFXh8) 10 | 11 | #### Vocabulary 12 | 13 | - protected pages 14 | 15 | ### Troubleshooting Tips 16 | 17 | - `console.log` is your friend! Ensure you are able to see the data you expect to see. 18 | 19 | --- 20 | 21 | ### Protected Pages 22 | 23 | **Protected pages** are views that are only available to a user that is signed in. An app will typically have a mix of pages that a non-logged in user has access to as well as pages that are only available to users who are logged in. Often protected pages will display information specific to that user. 24 | 25 | ### Protected Data 26 | 27 | When a user is signed in to the apartment application, they have access to a page that displays the component `ApartmentProtectedIndex`. This component will display a list of apartments created by the current user. There are two pieces of information needed to populate this page correctly: the id of the current user and the foreign key of the apartments. Using the filter method we can select only the apartments that were created by the current signed in user. 28 | 29 | ### Protected Links 30 | 31 | Authentication is a key component in the Apartment App project. This means that we need to create a clean and clear experience that will allow new users to sign up and existing users to log in. We also want to provide a way for logged in users to sign out. 32 | 33 | It would not be a great experience for the user to see all three of these options at the same time. Depending on the current status of the user, we can tailor our application to offer the appropriate link(s). To accomplish this we can use conditional rendering in our `Navigation.js`. Conditional rendering will allow us to display the options to signup or login only when `currentUser` does not exist and display the logout button only once a user has successfully logged in. 34 | 35 | **app/src/components/Navigation.js** 36 | 37 | ```javascript 38 | 59 | ``` 60 | 61 | Along with the authentication links, we want to allow signed in users to visit their protected pages. We can add links to `ApartmentProtectedIndex` and `ApartmentNew` to our navigation and include them in our conditional rendering ONLY when `currentUser` exists. 62 | 63 | Remember there are some pages that all users can view regardless of their status. 64 | 65 | ### Protected Routes 66 | 67 | Conditionally rendering links is the first step to creating and restricting access for users in the application. But to further protect our application and user data we should ensure our routes cannot be accessed directly through the url. This means we need to protect our routes with conditional rendering. There are certain routes that should only exist if a user is signed into the application. 68 | 69 | The JavaScript logical AND can be used to create a toggle. When `currentUser` exists, the route to `ApartmentProtectedIndex` will exist. If the `currentUser` value is null, meaning no user is currently signed in, the route will not exist. Manually navigating to the route in the browser url while `currentUser` is null will land the user on the `NotFound` page. 70 | 71 | ```javascript 72 | { 73 | currentUser && ( 74 | 81 | } 82 | /> 83 | ) 84 | } 85 | ``` 86 | 87 | --- 88 | 89 | [Back to Syllabus](../../README.md#unit-nine-react-and-rails-with-authentication) 90 | -------------------------------------------------------------------------------- /assets-first-day/16-week-career-services-overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/16-week-career-services-overview.pdf -------------------------------------------------------------------------------- /assets-first-day/16-week-requirements-and-expectations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/16-week-requirements-and-expectations.pdf -------------------------------------------------------------------------------- /assets-first-day/career-services-overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/career-services-overview.pdf -------------------------------------------------------------------------------- /assets-first-day/code-of-conduct.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/code-of-conduct.pdf -------------------------------------------------------------------------------- /assets-first-day/how-we-work.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/how-we-work.pdf -------------------------------------------------------------------------------- /assets-first-day/html-css-fundamentals.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/html-css-fundamentals.pdf -------------------------------------------------------------------------------- /assets-first-day/pair-programming.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/pair-programming.pdf -------------------------------------------------------------------------------- /assets-first-day/requirements-and-expectations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/requirements-and-expectations.pdf -------------------------------------------------------------------------------- /assets-first-day/slack-overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/slack-overview.pdf -------------------------------------------------------------------------------- /assets-first-day/tech-stack.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/tech-stack.pdf -------------------------------------------------------------------------------- /assets-first-day/zoom-etiquette.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/assets-first-day/zoom-etiquette.pdf -------------------------------------------------------------------------------- /capstone/api-keys.md: -------------------------------------------------------------------------------- 1 | # Handling API Keys 2 | 3 | #### Overview 4 | 5 | External APIs are data sets created by other developers and made available for public consumption. This is one of the many ways developers share resources with each other. However, the creator(s) of the data set have a right to protect their data and monitor the traffic on their servers. To protect their data from accidents or malicious actors, developers will implement a unique identifier that will authorize and authenticate the request of an application or user. 6 | 7 | #### Learning Objectives 8 | 9 | - can define API key 10 | - can define environment variable 11 | - can create the code structure to protect API keys in a React application 12 | - can use an API key to create an effective fetch request 13 | - can create the code structure to protect API keys in a React application 14 | 15 | #### Additional Resources 16 | 17 | - [NASA API](https://api.nasa.gov/) 18 | - [Protecting API Keys in React](https://upmostly.com/tutorials/how-to-hide-api-keys-in-react-applications) 19 | - [Environment Variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa) 20 | - [Dotenv Gem](https://mlcomeau.github.io/using_the_dotenv_gem_in_your_rails_app) 21 | 22 | #### Vocabulary 23 | 24 | - rate limit 25 | - API key 26 | - environment variable 27 | 28 | #### Process 29 | 30 | - create a file in the root of the project called `.env` 31 | - add `/.env` to the `.gitignore` file 32 | - create a variable in the `.env` file that follows this format: `SECRET_KEY_HERE =` 33 | 34 | #### Troubleshooting Tips 35 | 36 | - Is there an error on the request or on the response? 37 | - Stop and restart the server. 38 | 39 | --- 40 | 41 | ### Rate Limits 42 | 43 | External APIs can provide a lot of value to an application. However, developers that create external APIs have a right to protect their data and manage the traffic of requests coming into their servers. This is often done by putting rate limits on their APIs. A **rate limit** is how many requests are allowed in a given time period. Examples of common rate limits are 1,000 requests an hour or 10,000 requests a day. However, each API will have different requirements. It is up to the consumer of the external API to read the documentation. 44 | 45 | ### API Keys 46 | 47 | To enforce the rate limit and protect data from malicious actors, each request for data needs to be tracked and regulated. Consumers of the external API will be required to sign up or register their application. In turn the consumer of the external API will receive an API key. The **API key** is an authentication token that gets added to the request url. API keys must be protected just like passwords. API keys should NOT be checked into version control (git). 48 | 49 | In order to hide the API key we will use an environment variable. An **environment variable** is a variable whose value is set outside the program. It is a variable that rarely changes so it is like creating a `const` variable for the whole application. 50 | 51 | ### API Keys in React 52 | 53 | Environment variables are often stored in a file in the root directory of the application called `.env`. The file is then added to the `.gitignore` file so that `.env` doesn't get added to version control. 54 | 55 | **.gitignore** 56 | 57 | ``` 58 | /.env 59 | ``` 60 | 61 | The secret token will live inside the `.env` file. The casing convention for this type of variable is all uppercase with underscores separating each word. The variable is then assigned the API key. 62 | 63 | **.env** 64 | 65 | ``` 66 | MY_SECRET_API_KEY = secret_token_here 67 | ``` 68 | 69 | The environment variable is now available to the application. Inside of `App.js` the variable can be referenced using the syntax `process.env.MY_SECRET_API_KEY`. 70 | 71 | **app/javascript/components/App.js** 72 | 73 | ```javascript 74 | const apiKey = process.env.MY_SECRET_NASA_API_KEY 75 | 76 | // be sure to remove all logs before committing to GitHub!! 77 | 78 | console.log(apiKey) 79 | ``` 80 | 81 | Now that React has access to the API key we can create a fetch request for data from the external API. 82 | 83 | ### API Keys in Rails 84 | 85 | API keys are often used on backend applications as well. An environment variable will be needed to hide our API key. To do this, we can create a `.env` file in the root directory. We will need to tell our Rails application that we have a new `.env` file in our application. Luckily since this is a very common practice, there is a Ruby gem that will do the heavy lifting. 86 | 87 | In the terminal we will add the `dotenv-rails` gem to the gemfile. 88 | 89 | ```bash 90 | bundle add dotenv-rails 91 | ``` 92 | 93 | --- 94 | 95 | ### 💻 Challenge: NASA 96 | 97 | Create a React application that returns interesting information of the developer's choice using the NASA API. 98 | 99 | Reminder that API keys and `.env` files should NOT be added to version control. 100 | 101 | --- 102 | 103 | [Back to Syllabus](../README.md#unit-ten-capstone-project-mvp) 104 | -------------------------------------------------------------------------------- /capstone/assets/connect-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/connect-repo.png -------------------------------------------------------------------------------- /capstone/assets/creation-commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/creation-commands.png -------------------------------------------------------------------------------- /capstone/assets/environment-variables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/environment-variables.png -------------------------------------------------------------------------------- /capstone/assets/has-many-through.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/has-many-through.png -------------------------------------------------------------------------------- /capstone/assets/new-postgres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/new-postgres.png -------------------------------------------------------------------------------- /capstone/assets/redirects-rewrites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/redirects-rewrites.png -------------------------------------------------------------------------------- /capstone/assets/rspec-simplecov-term.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/rspec-simplecov-term.png -------------------------------------------------------------------------------- /capstone/assets/simplecov-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/simplecov-browser.png -------------------------------------------------------------------------------- /capstone/assets/simplecov-controller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/simplecov-controller.png -------------------------------------------------------------------------------- /capstone/assets/simplecov-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/simplecov-file.png -------------------------------------------------------------------------------- /capstone/assets/web-service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/web-service.png -------------------------------------------------------------------------------- /capstone/assets/yarn-coverage-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/yarn-coverage-browser.png -------------------------------------------------------------------------------- /capstone/assets/yarn-coverage-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/yarn-coverage-file.png -------------------------------------------------------------------------------- /capstone/assets/yarn-coverage-term.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/capstone/assets/yarn-coverage-term.png -------------------------------------------------------------------------------- /capstone/code-coverage.md: -------------------------------------------------------------------------------- 1 | # Code Coverage 2 | 3 | #### Overview 4 | 5 | Code coverage in Test Driven Development (TDD) safeguards the requirements of the code within our web applications. Reports associated with code coverage help us determine not only how much of the code our tests are evaluating but also if we need to consider more edge cases to increase confidence in the expected outcome of our web application. 6 | 7 | #### Learning Objectives 8 | 9 | - can define code coverage 10 | - can define test coverage 11 | - can distinguish the difference between code coverage and test coverage 12 | - can identify the code coverage statics in a React application 13 | - can execute the proper procedure to prevent coverage files from being added to version control 14 | - can create an acceptable percentage of code coverage for Rails backend application 15 | 16 | #### Additional Resources 17 | 18 | - [Code Coverage](https://www.baeldung.com/cs/code-coverage) 19 | - [SimpleCov](https://www.rubydoc.info/gems/simplecov/0.22.0) 20 | 21 | #### Vocabulary 22 | 23 | - code coverage 24 | - test coverage 25 | 26 | #### Process 27 | 28 | This overview assumes the developer has created a full-stack decoupled application with a React and a Rails API backend. It is also assumed that Ruby gem `rspec` and its dependencies have been installed on the Rails application. 29 | 30 | #### Useful Commands 31 | 32 | - $ `rspec` 33 | - $ `yarn test --coverage --watchAll` 34 | 35 | --- 36 | 37 | ### Application Code Coverage 38 | 39 | Code coverage is a useful evaluation of how code within a web application is being tested before it is released to a consumer. **Code coverage** is a quantitative measurement of the number of lines of code covered by the testing suite. It helps developers identify defects or bugs earlier in the production process. Fewer bugs helps us obtain more customer satisfaction with the end product. Code coverage also exposes areas of the web application that have not been tested. The more of the web application that is being tested, the more confidence that a developer can have that the web application will deliver the expected output to the consumer. 40 | 41 | Code coverage is a very popular testing tool and can often be confused with another evaluation called test coverage. **Test coverage** is a qualitative measurement of each test within the web application. Test coverage evaluates how many features of a web application are being tested before it is released to a consumer. 42 | 43 | ### React Code Coverage Metric 44 | 45 | After creating a React application with `yarn create react-app`, we are automatically given access to code coverage metrics within the Jest testing ecosystem. Running the terminal command `yarn test --coverage --watchAll` outputs a static analysis of the files in the React application. The summary includes analysis of the following: 46 | 47 | - Statement coverage: Each line of code executed during the testing. 48 | - Branch coverage: Each branch within a conditional statement executed during testing. 49 | - Function coverage: Each function or method executed during testing. 50 | - Line coverage: Every line including statements and non-executable code like comments. 51 | - Uncovered lines: Displays the line number(s) for any statement that is not covered. 52 | 53 | The total code coverage will be displayed on the statement coverage for the `All files` entry. 54 | 55 | ![React Code Coverage Analysis](./assets/yarn-coverage-term.png) 56 | 57 | The terminal command will also create a new directory in our application called `coverage`. This coverage directory will be at the root of the React application. Within this directory, we find a `lcov-report` directory that will have a structure similar to the `src` directory of the React application. Each file will have an equivalent html file that will provide a visual presentation of what code is not covered by our testing files. 58 | 59 | The example provided shows the code coverage for the `Header.js` file. 60 | 61 | **./coverage/lcov-report/src/components/Header.js.html** 62 | 63 | ![Header Code Coverage File](./assets/yarn-coverage-file.png) 64 | 65 | Because this is a html file, we can open it in the browser to see a visual presentation of the coverage report. Each statement not covered will be highlighted in red. 66 | 67 | ![Header Code Coverage Report](./assets/yarn-coverage-browser.png) 68 | 69 | It is important that the code coverage report does NOT get added into version control (git). We need to ensure the entire coverage directory is added to the `.gitignore` file. 70 | 71 | ### Rails Code Coverage Metric 72 | 73 | SimpleCov is a Ruby gem that can be installed as a code coverage analysis tool. The SimpleCov gem will deliver a quick report of the percentage of Lines of Code (LOC) covered by the RSpec testing in the terminal output. This report is displayed after the results of the testing suite. 74 | 75 | ![SimpleCov Terminal Output](./assets/rspec-simplecov-term.png) 76 | 77 | SimpleCov gathers its data from the built-in coverage library of the Rails application. It also displays a detailed code coverage report on an API, which is located on `coverage/index.html` file. 78 | 79 | ![SimpleCov File](./assets/simplecov-file.png) 80 | 81 | The API can be accessed through the browser. The total code coverage will be displayed in the header. 82 | 83 | ![SimpleCov API](./assets/simplecov-browser.png) 84 | 85 | Selecting any of the Ruby files will show the individual breakdown for the code coverage within that file. Any uncovered lines of code will be highlighted in red. 86 | 87 | ![SimpleCov Controller File](./assets/simplecov-controller.png) 88 | 89 | ### SimpleCov Installation Process 90 | 91 | Add the following to the Gemfile to add the SimpleCov gem: 92 | 93 | **Gemfile** 94 | 95 | ```ruby 96 | gem 'simplecov', require: false, group: :test 97 | ``` 98 | 99 | Run $ `bundle install` to add appropriate dependencies. 100 | 101 | Load and launch SimpleCov at the top of the `spec_helper.rb` file located in the `spec` directory. 102 | 103 | **spec/spec_helper.rb** 104 | 105 | ```ruby 106 | require 'simplecov' 107 | SimpleCov.start 108 | ``` 109 | 110 | Now we can run $ `rspec` to execute the full test suite. This will display the coverage percent for the full Rails application. 111 | 112 | We can also see the coverage report by opening the `coverage/index.html` file in the browser. 113 | 114 | It is important that the code coverage report does NOT get added into version control (git). We need to ensure the entire coverage directory is added to the `.gitignore` file. 115 | 116 | --- 117 | 118 | [Back to Syllabus](../README.md#unit-ten-capstone-project-mvp) 119 | -------------------------------------------------------------------------------- /capstone/has-many-through.md: -------------------------------------------------------------------------------- 1 | # Rails Has Many Through 2 | 3 | #### Overview 4 | 5 | It is often the case that relationships between models are more complex than just has_many belongs_to. If the relationship between two models is such that they both have many and belong to each other, we can create a join table to describe that relationship. 6 | 7 | #### Previous Lecture (21 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/-n9kZXXCiPk/0.jpg)](https://youtu.be/-n9kZXXCiPk) 10 | 11 | #### Learning Objectives 12 | 13 | - can define a has_many_through relationship 14 | - can define foreign keys 15 | - can recall what model holds the foreign keys 16 | - 17 | 18 | #### Vocabulary 19 | 20 | - has_many_through 21 | 22 | #### Additional Resources 23 | 24 | - [Active Record Associations](https://guides.rubyonrails.org/association_basics.html#the-has-many-through-association) 25 | 26 | --- 27 | 28 | ### Has Many Relationships 29 | 30 | Think about the relationship between a model called Doctor and a model called Patient. The simplest relationship may be that a doctor has a patient and a patient belongs to a doctor. It is more likely that a doctor will have many patients. We are familiar with this style of relationship, but what if a patient also has many doctors? Then the relationship between our models is a patient has many doctors and a doctor has many patients. This is referred to as a **has_many_through** relationship where both models have both have many and belong to each other. 31 | 32 | When your models have a more complex association we can use a third model to define the relationship. In our example, it would make sense to have the thing that ties doctors and patients together be appointments. So appointments becomes the third model that is responsible for creating the relationship. 33 | 34 | The Appointment model will belong to both the Doctor model and the Patient model and both the Doctor and the Patient model will have many appointments. Since appointments belongs to both Doctor and Patient, appointments will hold BOTH foreign keys. 35 | 36 | ```bash 37 | rails generate resource Doctor name:string practice:string 38 | 39 | rails generate resource Patient name:string dob:date phone:string 40 | 41 | rails generate resource Appointment doctor_id:integer patient_id:integer 42 | ``` 43 | 44 | diagram of has many through relationship 45 | 46 | ### Has Many Through 47 | 48 | The last part is to define a relationship between doctors and patients through appointments. Now a patient can have many doctors and a doctor can have many patients. 49 | 50 | ```ruby 51 | class Doctor < ApplicationRecord 52 | has_many :appointments 53 | has_many :patients, through: :appointments 54 | end 55 | 56 | class Appointment < ApplicationRecord 57 | belongs_to :doctor 58 | belongs_to :patient 59 | end 60 | 61 | class Patient < ApplicationRecord 62 | has_many :appointments 63 | has_many :doctors, through: :appointments 64 | end 65 | ``` 66 | 67 | --- 68 | 69 | [Back to Syllabus](../README.md#unit-ten-capstone-project-mvp) 70 | -------------------------------------------------------------------------------- /capstone/modifying-devise.md: -------------------------------------------------------------------------------- 1 | # Modifying Devise 2 | 3 | #### Overview 4 | 5 | When we add the Devise gem to a Rails app it comes preset with a database schema for a User model, forms for your user to sign in and sign up, as well as a bunch of security measures behind the scenes. This overview assumes the developer has created a Rails application and added the necessary installs for Devise. 6 | 7 | #### Additional Resources 8 | 9 | - [Devise Strong Params](https://github.com/heartcombo/devise#strong-parameters) 10 | 11 | --- 12 | 13 | ### Adding Columns to User 14 | 15 | It is possible to modify the users table to add additional columns that the user must add when signing up for the application. This should be done with a migration after generating the User model. 16 | 17 | In this example we will add a username column to the User model. Start with creating a migration and updating the migration file. 18 | 19 | ``` 20 | $ rails generate migration add_username_to_user 21 | ``` 22 | 23 | **db/migrate/** 24 | 25 | ```ruby 26 | class AddUsernameToUser < ActiveRecord::Migration[6.0] 27 | def change 28 | # add_column :table, :column_name, :data_type 29 | add_column :users, :username, :string 30 | end 31 | end 32 | ``` 33 | 34 | ``` 35 | $ rails db:migrate 36 | ``` 37 | 38 | Now that we have modified the schema, we need to make sure the username is accepted by the Devise strong params. We don't see the Devise strong params directly in the Rails app, but we can have access to all controllers through the `application_controller`. 39 | 40 | **app/controllers/application_controller.rb** 41 | 42 | ```ruby 43 | class ApplicationController < ActionController::Base 44 | skip_before_action :verify_authenticity_token 45 | before_action :configure_permitted_parameters, if: :devise_controller? 46 | 47 | def configure_permitted_parameters 48 | # pass params for the sign up form 49 | devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :email, :password]) 50 | # pass params for the sign in form 51 | devise_parameter_sanitizer.permit(:account_update, keys: [:username, :email, :password]) 52 | end 53 | end 54 | ``` 55 | 56 | This sets up the necessary code for the model. 57 | 58 | ### Updating Sign Up Form 59 | 60 | Since our sign up form lives inside our React application, we can add an input on the form for the sign up page so the user can add a username. 61 | 62 | **src/pages/Signup.js** 63 | 64 | ```javascript 65 |
    66 | Username: 67 |
    68 | Email: 69 |
    70 | Password: 71 |
    72 | Confirm Password: 73 |
    74 | 75 |
    76 | ``` 77 | 78 | --- 79 | 80 | [Back to Syllabus](../README.md#unit-ten-capstone-project-mvp) 81 | -------------------------------------------------------------------------------- /capstone/requirements.md: -------------------------------------------------------------------------------- 1 | # Capstone Requirements 2 | 3 | ### Project Requirements 4 | 5 | - React frontend application supported by a Rails API 6 | - Full CRUD functionality 7 | - User authentication with Devise (signup, login, logout) 8 | - Minimum of two database tables (one will be the Devise User table) 9 | - Testing - 60% [code coverage](code-coverage.md) 10 | - Deployed to Render 11 | - A [well written README](https://medium.com/chingu/keys-to-a-well-written-readme-55c53d34fe6d) with link to live application 12 | - "About Us" page 13 | - Live demo with the full team 14 | 15 | ### Project Stretch Goals 16 | 17 | - Responsive design (include a phone view for example) 18 | - Accessible design features 19 | - Continuous integration 20 | - Incorporate an external API 21 | 22 | ### Things to Think About 23 | 24 | - Everything will take longer than you expect. 25 | - A simple project idea will allow you to add more features and styling. 26 | - Look at [previous capstone projects](https://github.com/LEARNAcademy/capstone-projects) for inspiration. 27 | - Step out of your comfort zone. 28 | - Work with everyone in your group. 29 | - Work on a feature or part of the application you’re not completely comfortable with. 30 | - Organization and clear communication is the key to a successful team experience. 31 | - Make sure everyone contributes and feels included. 32 | 33 | ### Project Demos 34 | 35 | - No one will notice your bugs if you don't point them out. 36 | - Use "we" rather than "I" statements as this was a team project. 37 | - Please practice your demo and **stay within the 10 minute time limit**. 38 | - The audience doesn't know the demo format so provide context. 39 | - An example of an [excellent student demo](https://youtu.be/Mub2WYzyt70). 40 | 41 | Demos must be no longer than 10 minutes and cover the following: 42 | 43 | Product (2 min) 44 | 45 | - Introduce yourself and your role on the team. 46 | - Introduce your team name and your app name. 47 | - Share the elevator pitch for your application (you may need to revise your pitch if your application changed during development). 48 | 49 | Design (2 min) 50 | 51 | - Introduce yourself and your role on the team. 52 | - Show off the UX/UI of your application. 53 | - Highlight 2-3 things of which your team is proud. 54 | 55 | Tech (2 min) 56 | 57 | - Introduce yourself and your role on the team. 58 | - Share the code functionality for the 2-3 things of which your team is proud(corresponding to the topics covered in UX/UI). 59 | 60 | Project (2 min) 61 | 62 | - Introduce yourself and your role on the team. 63 | - Share one notable blocker your team overcame. 64 | - Share what a typical day looked like for your team during the project. 65 | 66 | Wrap-up (2 min) 67 | 68 | - Each person share something you learned. 69 | - Each person share some advice for the next cohort. 70 | 71 | --- 72 | 73 | [Back to Syllabus](../README.md#unit-ten-capstone-project-mvp) 74 | -------------------------------------------------------------------------------- /career-services/assets/ace-the-tech-interview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/ace-the-tech-interview.pdf -------------------------------------------------------------------------------- /career-services/assets/cover-letters.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/cover-letters.pdf -------------------------------------------------------------------------------- /career-services/assets/elevator-pitch.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/elevator-pitch.pdf -------------------------------------------------------------------------------- /career-services/assets/life-map-exercise.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/life-map-exercise.pdf -------------------------------------------------------------------------------- /career-services/assets/linkedin-all-star-status.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/linkedin-all-star-status.pdf -------------------------------------------------------------------------------- /career-services/assets/linkedin-creating-content.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/linkedin-creating-content.pdf -------------------------------------------------------------------------------- /career-services/assets/linkedin-extending-network.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/linkedin-extending-network.pdf -------------------------------------------------------------------------------- /career-services/assets/linkedin-guided-tour.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/linkedin-guided-tour.pdf -------------------------------------------------------------------------------- /career-services/assets/networking.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/networking.pdf -------------------------------------------------------------------------------- /career-services/assets/prentus.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/prentus.pdf -------------------------------------------------------------------------------- /career-services/assets/tech-industry-outlook.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/tech-industry-outlook.pdf -------------------------------------------------------------------------------- /career-services/assets/tech-interviews-101.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/tech-interviews-101.pdf -------------------------------------------------------------------------------- /career-services/assets/tech-resumes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/tech-resumes.pdf -------------------------------------------------------------------------------- /career-services/assets/technical-portfolios.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/technical-portfolios.pdf -------------------------------------------------------------------------------- /career-services/assets/transferable-skills.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/career-services/assets/transferable-skills.pdf -------------------------------------------------------------------------------- /career-services/cover-letters.md: -------------------------------------------------------------------------------- 1 | # Cover Letters 2 | 3 | #### Overview 4 | 5 | Cover letters accompany your job application with the purpose of making your application stand out. Cover letters are a chance to tell your story and tell hiring managers how you fit the role, why you’re interested in the position/company, and what about your prior experience and 6 | skills fulfills the job description. 7 | 8 | #### Previous Lecture: Cover Letters (36 min) 9 | 10 | [![YouTube](http://img.youtube.com/vi/Zbeqwy1MyDw/0.jpg)](https://www.youtube.com/watch?v=Zbeqwy1MyDw) 11 | 12 | #### Previous Lecture: Cover Letter Work Through (16 min) 13 | 14 | [![YouTube](http://img.youtube.com/vi/sgTMq61yEYA/0.jpg)](https://www.youtube.com/watch?v=sgTMq61yEYA) 15 | 16 | #### Additional Resources 17 | 18 | - [Cover Letter Template for a Resume](https://www.thebalancemoney.com/cover-letter-template-2060213) 19 | - [Software Engineering Cover Letter](https://www.thinkful.com/blog/software-engineering-cover-letter/) 20 | - [How to Craft a Cover Letter That Will Make an Impression](https://ucpathjobs.org/cover-letters/craft-cover-letter-will-make-impression/) 21 | - [6 Cover Letter Introductions to Make a Great First Impression](https://www.jobsage.com/blog/6-cover-letter-introductions-to-make-a-great-first-impression/) 22 | 23 | --- 24 | 25 | ### Cover Letters 26 | 27 | 40% of employers say cover letters are the most important part of the job application. Statistically, hiring managers spend about a minute looking at an applicant's resume and cover letter. Often the person reviewing resumes is not a technical person so cover letters give the applicant an opportunity to explain why they are a good fit for the role. Cover letters can be the deciding factor between candidates. 28 | 29 | Cover letters give you the ability to be more engaging than allowed within a resume structure. Cover letters should align the company values with an applicant's experience. 30 | 31 | Provide a quick explanation of: 32 | 33 | - HOW you fit the role? 34 | - WHY you’re interested in the 35 | position/company? 36 | - WHAT about your prior experience and skills fulfills the job description? 37 | 38 | Think of your resume, cover letter, and job application as your first assignments for the company that you’re interested in joining. Cover letters should engaging, inviting and filled with enough information about the skills that a recruiter or hiring manager would want to know more about you. 39 | 40 | The passion for your career should come across in your cover letter, so that they are excited to meet you. 41 | 42 | ### Cover Letter Structure 43 | 44 | Cover letters should be 250 to 325 words and around four paragraphs. 45 | 46 | - Header with your contact information 47 | - Contact information for the employer (if available) 48 | - Best practice to match your header on your cover letter to your resume 49 | - Contact information salutation 50 | - Make every effort to find the contact name of the hiring manager to use on your letter 51 | - If no contact name is available use “To Whom it May Concern” 52 | - Body of cover letter 53 | - First paragraph 54 | - Introduction 55 | - What position you are applying for 56 | - The name of any mutual connection (if applicable) 57 | - Express how your skills will complement the company and position 58 | - Middle paragraph 59 | - This section is the most important! 60 | - What you have to offer the employer 61 | - Strong connection between your abilities and employer’s needs 62 | - Mention specifically how your skills & experience match the job you are applying for 63 | - Try to support each statement you make with a specific piece of evidence 64 | - Final paragraph 65 | - Reiterate your strengths and interest 66 | - Thank the employer for their consideration 67 | - Include information on how you will follow-up and when 68 | - Complimentary close signature 69 | - Options: Respectfully Yours, Sincerely, Regards, Cordially 70 | 71 | --- 72 | 73 | [Back to Syllabus](../README.md#unit-seven-professional-development) 74 | -------------------------------------------------------------------------------- /career-services/job-listings.md: -------------------------------------------------------------------------------- 1 | # Job Listing Sites 2 | 3 | - [Ultimate List of Sites to Job Hunt for Developers](https://randallkanna.com/job-sites-for-developers/) 4 | - [Indeed](https://www.indeed.com/jobs?q=junior+web&l=&vjk=22a9f0a01866cf56) 5 | - [Ziprecruiter](https://www.ziprecruiter.com/jobs-search?search=junior+web&location=Remote+%28USA%29) 6 | - [LinkedIn Jobs](https://www.linkedin.com/jobs/search/?currentJobId=3525027408&keywords=junior%20web&refresh=true) 7 | - [Google Job Search](https://www.google.com/search?q=junior+web&rlz=1C5CHFA_enUS747US747&ei=XUxPYvyTOoihkPIPzKyDoA8&uact=5&oq=google+search++jobs&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMgUIABCABDIFCAAQgAQyBggAEAcQHjIGCAAQBxAeMgYIABAHEB4yBggAEAcQHjIGCAAQBxAeMgYIABAHEB4yBggAEAcQHjoHCAAQRxCwAzoKCAAQRxCwAxDJAzoHCAAQsAMQQzoKCAAQsQMQgwEQQzoLCAAQgAQQsQMQgwE6BAgAEAM6CAgAELEDEIMBOgQIABANSgQIQRgASgQIRhgAUMoGWJcRYN0ZaAFwAXgAgAF7iAGMB5IBAzAuOJgBAKABAcgBCrgBA8ABAQ&sclient=gws-wiz&ibp=htl;jobs&sa=X&ved=2ahUKEwjG_baN6IL3AhVoEEQIHT3XA3kQutcGKAF6BAgQEAY#fpstate=tldetail&htivrt=jobs&htitab=&htidocid=aadKY6h70uEAAAAAAAAAAA%3D%3D) 8 | - [Dice](https://www.dice.com/jobs?q=junior%20web&radius=30&radiusUnit=mi&page=1&pageSize=20&language=en&eid=S2Q_) 9 | - [Ladders](https://www.theladders.com/jobs/searchresults-jobs?keywords=junior%20web&remoteFlags=Remote&remoteFlags=Hybrid&remoteFlags=In-Person&order=SCORE) 10 | - [Glassdoor](https://www.glassdoor.com/Job/junior-web-jobs-SRCH_KO0,10.htm?clickSource=searchBox) 11 | - [Otta](https://otta.com/) 12 | - [Easy Jobs](https://easyjobs.so/) 13 | - [Tech Jobs For Good](https://techjobsforgood.com/) 14 | - [Monster](https://www.monster.com/jobs/search?q=Junior+Web&where=&page=1&so=m.s.sh) 15 | - [Mashable](https://jobs.mashable.com/jobs/results/keyword/junior+web?radius=25) 16 | - [Wellfound](https://wellfound.com/) 17 | - [Getwork](https://getwork.com/search/results/junior-web-jobs) 18 | - [Robert Half](https://www.roberthalf.com/jobs/junior-web) 19 | - [Hired](https://hired.com/) 20 | - [SimplyHired](https://www.simplyhired.com/search?q=junior+web) 21 | - [We Work Remotely](https://weworkremotely.com/remote-jobs/search?term=full+stack&button=&categories%5B%5D=2®ion%5B%5D=1®ion%5B%5D=2&job_listing_type%5B%5D=Full-Time) 22 | - [TealHQ](https://www.tealhq.com/tools/job-tracker) 23 | - [Firstjobs.dev](https://firstjobs.dev/) 24 | - [Junior.engineer](https://junior.engineer/) 25 | - [DevWork](https://devwork.careers/) 26 | - [Levels.fyi](https://www.levels.fyi/still-hiring/) 27 | - [FlexJobs](https://www.flexjobs.com/search?search=junior+web) 28 | - [RemoteOK](https://remoteok.com/remote-web-dev-jobs) 29 | - [Working Nomads](https://www.workingnomads.com/remote-development-jobs) 30 | - [Remote.co](https://remote.co/) 31 | - [Real Work From Anywhere](https://www.realworkfromanywhere.com/) 32 | - [Remoters](https://remoters.net/jobs/software-development/filters?jobs-location=united-states-of-america-usa) 33 | - [JS Remotely](https://jsremotely.com/) 34 | - [SD Tech Scene](https://sdtechscene.org/jobs/) 35 | - [Fresh Brewed Tech](https://freshbrewedtech.com/jobs/) 36 | - [GovCIO](https://govcio.com/jobs/) 37 | - [AmazonJobs](https://www.amazon.jobs/en/) 38 | - [SD Work Force Partnership](https://workforce.org/jobboards/) 39 | - [Kane Partners Staffing Solutions](https://kanepartners.net/jobs/) 40 | - [React JS Developer Jobs](https://www.reactjobboard.com/) 41 | - [JavaScript Remote Jobs for Developers and Software Engineers](https://javascriptjob.xyz/jobs/all/United%20States%20of%20America/remote/en) 42 | - [Jr Dev Jobs](https://www.jrdevjobs.com/jobs#query=junior+web%2B&page=1) 43 | - [No CS Degree](https://www.nocsdegree.com/jobs/) 44 | - [Women Who Code](https://www.womenwhocode.com/jobs?query=junior) 45 | - [The Muse](https://www.themuse.com/search/keyword/junior%20web/) 46 | - [Krop Creative Jobs](https://www.krop.com/creative-jobs/?loc=San+Diego%2C+CA&pos=junior) 47 | - [Power to Fly](https://powertofly.com/jobs/?category=software+engineering&keywords=junior&location=Remote%3B) 48 | - [Developers For Hire](https://www.developersforhire.com/) 49 | - [Joblist.app](https://joblist.app/) 50 | - [Fullstack Jobs](https://fullstackjob.com/jobs/all/United%20States%20of%20America/all/all) 51 | - [BuiltIn](https://builtin.com/jobs/dev-engineering) 52 | -------------------------------------------------------------------------------- /career-services/portfolios.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | #### Overview 4 | 5 | A portfolio is a website where, as a developer, you can showcase your work and represent your individual brand. Portfolios are especially important for career transitioners as they function as a stand-in for professional experience. It is an opportunity to show off your skills, talents, and interests in development. Portfolios provide more personalization than your resume and give you an opportunity to share your story with future employees. 6 | 7 | #### Portfolio UX/UI with Lisa Panke (35 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/oR6ImBFu_-A/0.jpg)](https://www.youtube.com/watch?v=oR6ImBFu_-A) 10 | 11 | #### Portfolio Talk with Paul (41 min) 12 | 13 | [![YouTube](http://img.youtube.com/vi/rtJg3VKBvVo/0.jpg)](https://www.youtube.com/watch?v=rtJg3VKBvVo) 14 | 15 | #### Additional Resources 16 | 17 | - [LEARN's portfolio resources](https://docs.google.com/document/d/1_2BvaU30PKbmA1KIYHxGtY_VWUOH9-kuU8ra7keZ3Y8/edit) 18 | - [How to Build an Impressive Portfolio Sites](https://docs.google.com/document/d/1G2r9gFyyHHsTjN-d4iDT1z_Sdx2V4bN8QwFVJbMbUlo/edit#heading=h.xhmwww301747) 19 | - [How to Craft a Standout Web Developer Portfolio](https://docs.google.com/document/d/1A_8u1EsxaBQtL11TRmC4nGGECDlJJapVW7pdbYWRRVE/edit#heading=h.98zk7tzdwvrj) will provide some great tips on making your portfolio site and how to stand out. 20 | - [Medium: Top 6 Web Developer Portfolio Templates to Step Out of the Comfort Zone](https://medium.com/javarevisited/top-6-web-developer-portfolio-templates-to-step-out-of-the-comfort-zone-b2d26de9cad4) 21 | - Create designs with [Canva](https://www.canva.com/) 22 | 23 | --- 24 | 25 | ### Inspiration: Portfolios from LEARN Alumni 26 | 27 | - [Stephen Bilham](https://stephenbilham.github.io/Portfolio/) 28 | - [James Caddick](https://jamescaddick-dev.netlify.app/) 29 | - [Jenny Pletner](http://teampletner.com/) 30 | - [Ari Brashear](http://www.aribrashear.com/) 31 | - [Stephen OMarrah](https://somarrah.github.io/Portfolio/) 32 | 33 | ### Portfolio Options 34 | 35 | There are many tech options to consider when creating your portfolio. Portfolios are a great opportunity to explore new tech stacks. Listed below are some options for low-code, no-code, or template portfolios. 36 | 37 | - Quick one-page sites with [Carrd](https://carrd.co/) 38 | - No-code sites with [Webflow](https://webflow.com/) 39 | - [Gatsby](https://www.gatsbyjs.com/) React framework 40 | - [HTML5 Up](https://html5up.net/) template sites 41 | - [Bootstrap](https://startbootstrap.com/themes) templates and themes 42 | 43 | It can feel overwhelming for new developers to learn another technology in addition to your coursework at LEARN. There is nothing wrong with a simple approach. Don't let the complications of coding get in the way of you telling your story and displaying your work. 44 | 45 | To help streamline the process, we recommend choosing either HTML and CSS or React. 46 | 47 | ### Deploying HTML and CSS GitHub Pages 48 | 49 | This option is great for HTML and CSS portfolios. GitHub offers every member one special repository that can be hosted for free by GitHub. This is a great place to host your portfolio site. If you ever want to use GitHub's special repository to host something else, you can move your portfolio to a different repository. Read all about GitHub Pages [here](https://pages.github.com). 50 | 51 | Follow the instructions **exactly!** 52 | 53 | - You must have a file named `index.html` 54 | - The name of your repository must be `your-username.github.io` 55 | - Put your code in this repository - no nested files! 56 | 57 | ### Deploy Via Render 58 | 59 | This option is great for static React applications. [Render.com](https://render.com/docs/deploy-create-react-app) will connect to your GitHub repository and build your application with just a couple of commands. Follow the instructions in the documentation. 60 | 61 | --- 62 | 63 | [Back to Syllabus](../README.md#unit-seven-professional-development) 64 | -------------------------------------------------------------------------------- /career-services/state-of-tech.md: -------------------------------------------------------------------------------- 1 | # State of Tech Resources 2 | 3 | - [Tech Jobs in 2023 and beyond: Where are we today and where we will be](https://www.ssipeople.com/tech-jobs-in-2023/) 4 | - [Welcome To State of the Tech Workforce](https://www.cyberstates.org/) 5 | - [The Class of 2023: A Story of Resilience](https://www.ziprecruiter.com/grad-report) 6 | - [Skills Appendix](https://www.dice.com/recruiting/ebooks/dice-tech-salary-report-explore/skills-appendix/) 7 | - [The State of the Junior Development Job Market](https://www.linkedin.com/pulse/state-junior-development-job-market-sam-elder/?trackingId=fssCQnP%2FQEW0AhiOTLINNw%3D%3D) 8 | - [Big Transitions in the Tech Industry](https://hired.com/state-of-software-engineers/2023/) 9 | -------------------------------------------------------------------------------- /cat-tinder/assets/cat-schema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/cat-tinder/assets/cat-schema.png -------------------------------------------------------------------------------- /cat-tinder/assets/rails-routes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/cat-tinder/assets/rails-routes.png -------------------------------------------------------------------------------- /cat-tinder/assets/reactstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/cat-tinder/assets/reactstrap.png -------------------------------------------------------------------------------- /cat-tinder/backend/api-cors.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder API CORS 2 | 3 | #### Overview 4 | 5 | CORS stands for Cross-Origin Resource Sharing. CORS manages requests that occur between decoupled applications, or from another "origin". Browsers have security built in to protect users from submitting their data to servers that they are not intending to, so we have to tell the frontend that the backend is indeed the correct place for it to be communicating with. 6 | 7 | #### Learning Objectives 8 | 9 | - can define CORS 10 | - can enable cross-origin resource sharing in an API 11 | 12 | #### Vocabulary 13 | 14 | - CORS 15 | 16 | #### Additional Resources 17 | 18 | - [MDN on CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) 19 | - [CORS Wikipedia](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 20 | 21 | --- 22 | 23 | ### Allowing External Requests 24 | 25 | The last bit of housekeeping we need to do on the backend is enable our Rails application to accept requests from the React application. 26 | 27 | ### Skip Authenticity Token 28 | 29 | We need to update the application controller to allow requests from applications outside the Rails application. 30 | 31 | To do this, we add a line to the ApplicationController: 32 | 33 | **app/controllers/application_controller.rb** 34 | 35 | ```ruby 36 | class ApplicationController < ActionController::Base 37 | skip_before_action :verify_authenticity_token 38 | end 39 | ``` 40 | 41 | ### Enable CORS 42 | 43 | **CORS** which stands for Cross-Origin Resource Sharing defines what external request can be made to our Rails API. Our React frontend and Rails backend applications are running on two different servers. We have to tell the Rails API that (while in development) it is okay to accept requests from any outside domain. 44 | 45 | CORS can be added to our application by doing three things: 46 | 47 | 1. Adding this line of code to the Gemfile: 48 | 49 | ``` 50 | gem 'rack-cors', :require => 'rack/cors' 51 | ``` 52 | 53 | 2. Add a file to the `config/initializers` directory named `cors.rb` and add the following code to the new file: 54 | 55 | **config/initializers/cors.rb** 56 | 57 | ```ruby 58 | # Avoid CORS issues when API is called from the frontend app. 59 | # Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests. 60 | 61 | # Read more: https://github.com/cyu/rack-cors 62 | 63 | Rails.application.config.middleware.insert_before 0, Rack::Cors do 64 | allow do 65 | origins '*' # <- change this to allow requests from any domain while in development. 66 | 67 | resource '*', 68 | headers: :any, 69 | methods: [:get, :post, :put, :patch, :delete, :options, :head] 70 | end 71 | end 72 | ``` 73 | 74 | 3. Run the command $ `bundle` from the command line to update the dependencies. 75 | 76 | That's it! We can now accept POST, PUT, and DELETE requests in our server side application. 77 | 78 | ### CORS in Production 79 | 80 | When you take your app to production, you'll want to change the wildcard `*` to the URL that your frontend app is served from. 81 | 82 | --- 83 | 84 | [Back to Syllabus](../../README.md#cat-tinder-backend) 85 | -------------------------------------------------------------------------------- /cat-tinder/backend/api-endpoints.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder API Endpoints 2 | 3 | #### Overview 4 | 5 | Endpoints are the location from which APIs can access the resources they need to perform CRUD actions. Endpoints can be tested through request specs and model specs. 6 | 7 | #### Previous Lecture (37 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/nRdeWc5VyI8/0.jpg)](https://www.youtube.com/watch?v=nRdeWc5VyI8) 10 | 11 | #### Learning Objectives 12 | 13 | - can define API endpoints 14 | - can validate API endpoints 15 | - can create endpoints for appropriate RESTful actions 16 | 17 | #### Vocabulary 18 | 19 | - API endpoints 20 | 21 | #### Troubleshooting Tips 22 | 23 | - Did you create your database? 24 | - Did you migrate? 25 | - Errors? Always look at the first error in the list. 26 | 27 | --- 28 | 29 | ### Cats Routes 30 | 31 | ![routes](../assets/rails-routes.png) 32 | 33 | We need to create endpoints for the actions in our React application. **API endpoints** are the touch point of communication within the API when an external request is made. In this application, the endpoints will allow external requests for the CRUD actions to be performed on the Cat model. 34 | 35 | For the time being we can stub these routes by defining controller methods with no internal logic. 36 | 37 | **app/controllers/cats_controller.rb** 38 | 39 | ```ruby 40 | class CatsController < ApplicationController 41 | 42 | def index 43 | end 44 | 45 | def create 46 | end 47 | 48 | def update 49 | end 50 | 51 | def destroy 52 | end 53 | 54 | end 55 | ``` 56 | 57 | ### Index Route 58 | 59 | We start with the index route. In this endpoint, we want to return all of the cats that the application knows about. 60 | 61 | **Create a Spec** 62 | We're going to practice Test Driven Development, so let's start with a test. We'll add our test to the `cats_request_spec.rb` file: 63 | 64 | **/spec/requests/cats_request_spec.rb** 65 | 66 | ```ruby 67 | require 'rails_helper' 68 | 69 | RSpec.describe "Cats", type: :request do 70 | describe "GET /index" do 71 | it "gets a list of cats" do 72 | Cat.create( 73 | name: 'Felix', 74 | age: 2, 75 | enjoys: 'Walks in the park', 76 | image: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80' 77 | ) 78 | 79 | # Make a request 80 | get '/cats' 81 | 82 | cat = JSON.parse(response.body) 83 | expect(response).to have_http_status(200) 84 | expect(cat.length).to eq 1 85 | end 86 | end 87 | end 88 | ``` 89 | 90 | When we run that spec, it fails of course, because we don't have any code in the controller to respond to the request correctly. Yay failure! 91 | 92 | Now we can write the controller code to make it pass: 93 | 94 | ```ruby 95 | def index 96 | cats = Cat.all 97 | render json: cats 98 | end 99 | ``` 100 | 101 | ### Create 102 | 103 | Next we'll tackle the create route. Let's start with adding a new test: 104 | 105 | ```ruby 106 | describe "POST /create" do 107 | it "creates a cat" do 108 | # The params we are going to send with the request 109 | cat_params = { 110 | cat: { 111 | name: 'Buster', 112 | age: 4, 113 | enjoys: 'Meow Mix, and plenty of sunshine.', 114 | image: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80' 115 | } 116 | } 117 | 118 | # Send the request to the server 119 | post '/cats', params: cat_params 120 | 121 | # Assure that we get a success back 122 | expect(response).to have_http_status(200) 123 | 124 | # Look up the cat we expect to be created in the db 125 | cat = Cat.first 126 | 127 | # Assure that the created cat has the correct attributes 128 | expect(cat.name).to eq 'Buster' 129 | end 130 | end 131 | ``` 132 | 133 | And once again, this fails because we have no code in the controller to make it pass. Good! Adding the controller code for this spec is as follows: 134 | 135 | ```ruby 136 | def create 137 | # Create a new cat 138 | cat = Cat.create(cat_params) 139 | render json: cat 140 | end 141 | 142 | # Handle strong parameters, so we are secure 143 | private 144 | def cat_params 145 | params.require(:cat).permit(:name, :age, :enjoys, :image) 146 | end 147 | ``` 148 | 149 | And we're green! This isn't quite production ready code, but its enough to get our first test of the endpoint to pass, which is what we're after, so we're happy. 150 | 151 | --- 152 | 153 | [Back to Syllabus](../../README.md#cat-tinder-backend) 154 | -------------------------------------------------------------------------------- /cat-tinder/backend/api-intro.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder API Introduction 2 | 3 | #### Overview 4 | 5 | Cat Tinder. It's like Tinder, but for cats. Cat Tinder is a full-stack, decoupled application that creates profiles for cats and allows a user to see other cat profiles. A decoupled application means we are actually creating two separate applications. A React application to create the views in the frontend and a Rails API that handles our data. 6 | 7 | #### Previous Lecture (50 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/RTUWQ_AIEZ8/0.jpg)](https://www.youtube.com/watch?v=RTUWQ_AIEZ8) 10 | 11 | #### Learning Objectives 12 | 13 | - can create an API with a Cat model 14 | 15 | #### Process 16 | 17 | - $ `rails new cat-tinder-backend -d postgresql -T` 18 | - $ `cd cat-tinder-backend` 19 | - $ `rails db:create` 20 | - $ `bundle add rspec-rails` 21 | - $ `rails generate rspec:install` 22 | - Add the remote from your GitHub classroom repository 23 | - Create a default branch (main) 24 | - Make an initial commit to the repository 25 | - Ask your instructors for branch protection 26 | - $ `rails server` 27 | 28 | #### Troubleshooting Tips 29 | 30 | - Did you create your database? 31 | - Did you migrate? 32 | - Errors? Always look at the first error in the list. 33 | 34 | --- 35 | 36 | ### API Technologies 37 | 38 | Creating our own API opens up a new world of possibilities for building engaging, interactive applications. We can begin to accept user input, store and manipulate that input in the backend, and then provide a personalized experience for our user, perfectly suited to the task the user is trying to achieve. 39 | 40 | The primary tool to collect input from users is an HTML form. The user fills in form fields with information that allows them to interact with the application. As a general rule, we always want to process, validate, and store user data on the server where we have more control and processing power to handle it. To accomplish this, we need to build an API. 41 | 42 | Once we have a functioning API, we can build a React app to send the form data to the API and receive data back when requested. While there are many options for building backend APIs, Ruby on Rails is a fantastic platform. 43 | 44 | In the architecture we are building, our frontend and backend will be two separate applications, giving us more freedom to choose the tools and technologies we want. 45 | 46 | Throughout your career as a developer, you'll interact with many other backend platforms. APIs can be built using Ruby, PHP, Python, Java, and even JavaScript, among many others. That might seem overwhelming, but remember that the concepts are generally the same no matter what technology is used. The server is where we process data sent from the frontend, clean and store that data, and serve updated data back to the frontend app to be consumed by the user. 47 | 48 | ### Application Planning 49 | 50 | Planning is a crucial step in creating a successful application. First, it is important to have an understanding of a project as a whole. Once the overarching goals have been established, tasks must be broken down into individual actions. It is not possible to create the entire application at once and jumping between tasks is inefficient and can create code conflicts within the development team. It is necessary to outline an agreed upon task list that everyone on the team follows. 51 | 52 | #### RSpec 53 | 54 | Running the install commands for RSpec will add the dependencies to our Gemfile and installs all the necessary files to create and run our tests. RSpec will only load when we are in development or test mode, and not production. 55 | 56 | #### Cat Resource 57 | 58 | The following command will add the model, migration, controller, spec files, and all the RESTful routes for our cats. 59 | 60 | ```bash 61 | $ rails generate resource Cat name:string age:integer enjoys:text image:text 62 | $ rails db:migrate 63 | ``` 64 | 65 | ### Initial Check 66 | 67 | Let's take a look around the application and verify that everything is setup correctly. The first thing we can do is see that our test suite is running. 68 | 69 | ```bash 70 | $ rspec spec 71 | ``` 72 | 73 | Of course, we don't have any specs yet, so we won't get much feedback, but RSpec itself should run and finish successfully. 74 | 75 | In the application, the following files should look something like this: 76 | 77 | **db/migrate/** 78 | 79 | ```ruby 80 | class CreateCats < ActiveRecord::Migration[6.0] 81 | def change 82 | create_table :cats do |t| 83 | t.string :name 84 | t.integer :age 85 | t.text :enjoys 86 | t.text :image 87 | 88 | t.timestamps 89 | end 90 | end 91 | end 92 | ``` 93 | 94 | **config/routes.rb** 95 | 96 | ```ruby 97 | Rails.application.routes.draw do 98 | resources :cats 99 | end 100 | ``` 101 | 102 | --- 103 | 104 | [Back to Syllabus](../../README.md#cat-tinder-backend) 105 | -------------------------------------------------------------------------------- /cat-tinder/backend/seeds.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder API Seeds 2 | 3 | #### Overview 4 | 5 | Seeds are mock data that developers can load into the backend database and used during for scaffolding an application. Seeds will live with the application file structure rather than on each developer's personal computer. 6 | 7 | #### Learning Objectives 8 | 9 | - can define seeds 10 | - can recognize the similarities and difference between Rails seeds and React mock data 11 | - can populate a database with mock data 12 | 13 | #### Vocabulary 14 | 15 | - seeds 16 | - idempotent 17 | 18 | ### Useful Commands 19 | 20 | - $ `rails db:seed` 21 | - $ `rails db:drop` 22 | 23 | #### Additional Resources 24 | 25 | - [Idempotentcy](http://whatis.techtarget.com/definition/idempotence) 26 | 27 | ### Troubleshooting Tips 28 | 29 | If something goes wrong with your seeds file, just start fresh. Seeds files give us the power to easily drop the database, recreate, migrate, and seed. 30 | 31 | - $ `rails db:drop` 32 | - $ `rails db:create` 33 | - $ `rails db:migrate` 34 | - $ `rails db:seed` 35 | 36 | --- 37 | 38 | ### Seeds 39 | 40 | One of the files that gets created in a new rails application is the `seeds.rb` file. It is located in the db directory. The seed file is a place to store mock data during development. Adding **seeds** allows us to populate our database with one command rather than manually importing cats one by one through the Rails console. It also allows everyone on the development team to have identical data on their individual computers. 41 | 42 | **db/seeds.rb** 43 | 44 | ```ruby 45 | cats = [ 46 | { 47 | name: 'Felix', 48 | age: 2, 49 | enjoys: 'Long naps on the couch, and a warm fire.', 50 | image: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80' 51 | }, 52 | { 53 | name: 'Homer', 54 | age: 12, 55 | enjoys: 'Food mostly, really just food.', 56 | image: 'https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1015&q=80' 57 | }, 58 | { 59 | name: 'Jack', 60 | age: 5, 61 | enjoys: 'Furrrrociously hunting bugs.', 62 | image: 'https://images.unsplash.com/photo-1492370284958-c20b15c692d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1049&q=80' 63 | } 64 | ] 65 | 66 | cats.each do |each_cat| 67 | Cat.create each_cat 68 | puts "creating cat #{each_cat}" 69 | end 70 | ``` 71 | 72 | Notice that this is just plain old Ruby code. The format is a variable containing an array of objects. Seeds are very similar to the mock data created in our React application with one exception. In React, we had to give each cat an id attribute. In Rails, the seeds get added to the database which adds an id. 73 | 74 | The advantage to using seeds is with this approach the content of the development database is in a file in the codebase rather than on each developer's computer. This allows us to clone a project and populate the database with a command rather than manually adding test data. 75 | 76 | ### Managing Seeds 77 | 78 | To add seeds to the database, first we must create a database, create a model or resource, and run a migration. 79 | 80 | To add seeds run the command $ `rails db:seed` in the terminal. 81 | 82 | From there you can drop into the Rails console $ `rails c` and look for the cats with `Cat.all`. There will be a collection of cat hashes with unique ids, `created_at` timestamps, and `updated_at` timestamps. 83 | 84 | ### Idempotent 85 | 86 | One thing to keep in mind is that every time you run $ `rails db:seed` the code will execute and add data to your database. 87 | 88 | Creating a task that updates instead of creates new records every time after the first time is called **idempotent** and it is an interesting concept in programming and mathematics. 89 | 90 | --- 91 | 92 | [Back to Syllabus](../../README.md#cat-tinder-backend) 93 | -------------------------------------------------------------------------------- /cat-tinder/backend/validations.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder API Validations 2 | 3 | #### Overview 4 | 5 | As developers we have to think about what happens when things don't go as we expect. What if data is submitted to our API that isn't complete, or has something else that causes it to be invalid? This could cause harm to our database or affect the user experience. 6 | 7 | #### Previous Lecture (46 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/r6dWvvc6P5k/0.jpg)](https://www.youtube.com/watch?v=r6dWvvc6P5k) 10 | 11 | #### Learning Objectives 12 | 13 | - can validate model attributes 14 | - can create specs for corresponding model validations 15 | 16 | #### Additional Resources 17 | 18 | - [Response Codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) 19 | 20 | ### Troubleshooting Tips 21 | 22 | - Did you create your database? 23 | - Did you migrate? 24 | - Errors? Always look at the first error in the list. 25 | 26 | --- 27 | 28 | ### Validations 29 | 30 | As developers, it is our job to ensure no matter what, that our app responds in predictable ways to every request, and over many requests. 31 | 32 | The primary tool we have to assure predictable results is to assure that the data we commit to our database is in a form that we expect it to be, and for this we use validations in a Rails application. When the incoming data looks to be correct, we commit it, when it isn't correct, we reject it, and respond with a reason why it was not accepted. 33 | 34 | ### Why Validations? 35 | 36 | We've started all of our backend coding with a failing test, and we now have good test coverage of what we expect the API to do when it is passed good data. What we need now is a test of what we expect it to do when passed bad data. What happens when a user submits a cat without a name? Do we accept it, or do we reject. Same question goes for the cat's age and what our cat enjoys. It may be acceptable to create a record without the enjoys data, but we should require an age. 37 | 38 | Let's write a test for each of these cases. 39 | 40 | ### Model Specs 41 | 42 | We can create a test that will look for an error if a cat is created without any attributes. 43 | 44 | **spec/models/cat_spec.rb** 45 | 46 | ```ruby 47 | RSpec.describe Cat, type: :model do 48 | it "should validate name" do 49 | cat = Cat.create(age: 2, enjoys: 'Walks in the park', image: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80') 50 | expect(cat.errors[:name]).to_not be_empty 51 | end 52 | end 53 | ``` 54 | 55 | $ `rspec spec/models` 56 | 57 | ```bash 58 | 1 example, 1 failure 59 | 60 | Failures: 61 | 62 | 1) Cat should validate name 63 | Failure/Error: expect(cat.errors[:name]).to_not be_empty 64 | expected `[].empty?` to return false, got true 65 | ``` 66 | 67 | As we run our specs, we see the test fails. But we can make it pass with one line of code in the model. 68 | 69 | **app/models/cat.rb** 70 | 71 | ```ruby 72 | class Cat < ApplicationRecord 73 | validates :name, presence: true 74 | end 75 | ``` 76 | 77 | $ `rspec spec/models` 78 | 79 | ```bash 80 | 1 example, 0 failures 81 | ``` 82 | 83 | Green! 84 | 85 | This process can be repeated to ensure our specs cover all the attributes of our cat model. 86 | 87 | ### Request Specs 88 | 89 | Here's a test to assure that we get the correct response status when we submit a create request without a name for a cat. 90 | 91 | **spec/requests/cats_request_spec.rb** 92 | 93 | ```ruby 94 | it "doesn't create a cat without a name" do 95 | cat_params = { 96 | cat: { 97 | age: 2, 98 | enjoys: 'Walks in the park', 99 | image: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1036&q=80' 100 | } 101 | } 102 | # Send the request to the server 103 | post '/cats', params: cat_params 104 | # expect an error if the cat_params does not have a name 105 | expect(response.status).to eq 422 106 | # Convert the JSON response into a Ruby Hash 107 | json = JSON.parse(response.body) 108 | # Errors are returned as an array because there could be more than one, if there are more than one validation failures on an attribute. 109 | expect(json['name']).to include "can't be blank" 110 | end 111 | ``` 112 | 113 | Not only do we want to make sure we are only allowing good data to be added to the database, we want to check that the API lets us know what is wrong, so the frontend can prompt the user to fix it. 114 | 115 | $ `rspec spec/requests` 116 | 117 | ```bash 118 | Failures: 119 | 120 | 1) Cats does not create a cat without a name 121 | Failure/Error: expect(response.status).to eq 422 122 | 123 | expected: 422 124 | got: 200 125 | 126 | (compared using ==) 127 | # ./spec/requests/cats_request_spec.rb:40:in `block (2 levels) in
    ' 128 | ``` 129 | 130 | And the results from running the full test suite give us a failure. Great! We expected a 422 response which is the server letting us know that we submitted an "Unprocessable Entity", but that's not what we got back. So how do we make that test pass? Let's add a conditional statement to our create method in the controller to throw a 422 error if the cat is not valid. 131 | 132 | **app/controllers/cats_controller.rb** 133 | 134 | ```ruby 135 | def create 136 | cat = Cat.create(cat_params) 137 | if cat.valid? 138 | render json: cat 139 | else 140 | render json: cat.errors, status: 422 141 | end 142 | end 143 | ``` 144 | 145 | $ rspec spec/requests 146 | 147 | ```bash 148 | 1 example, 0 failures 149 | ``` 150 | 151 | And now we're green! 152 | 153 | --- 154 | 155 | [Back to Syllabus](../../README.md#cat-tinder-backend) 156 | -------------------------------------------------------------------------------- /cat-tinder/connecting/fetch-create.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder Fetch for Create Functionality 2 | 3 | #### Overview 4 | 5 | It is time to create new cats in our database! We will have two applications running on our machine at the same time. The Rails app will run on `localhost:3000` and the React app will run on `localhost:3001`. 6 | 7 | #### Learning Objectives 8 | 9 | - can make cross-origin requests from the UI to an API 10 | - can set state with the JSON data that is returned from our fetch request 11 | 12 | #### Previous Lecture (1 hour 13 min) 13 | 14 | [![YouTube](http://img.youtube.com/vi/b4XhdUReNJ4/0.jpg)](https://www.youtube.com/watch?v=b4XhdUReNJ4) 15 | 16 | #### Process 17 | 18 | - The Rails app will run on `localhost:3000` 19 | - The React app will run on `localhost:3001` 20 | 21 | --- 22 | 23 | ### Posting Cats 24 | 25 | The frontend is going to send the Rails API information, then Rails will use Active Record to post that information to the database. 26 | 27 | We already have a function that logs the form data for our new cat, so we can convert that function into a post request. 28 | 29 | The fetch request will be made to the URL that is running the Rails API. In this case, our Rails app is running on `localhost:3000`. We are making a request to the post route of our Rails app. Remembering our RESTful routes, we know that we need to make a **POST** request to a route called `"/cats" `to create a new cat. 30 | 31 | Since our fetch needs to send data from the frontend to the backend we need to format our request. We need to send the information in the body of the request, and specify the header to accept JSON, and specify our HTTP method. 32 | 33 | Our fetch call will return a Promise. If the Promise is resolved successfully we can call the `readCat` function to reload the cats array that will include the new cat. 34 | 35 | **/src/App.js** 36 | 37 | ```javascript 38 | const createCat = (cat) => { 39 | fetch("http://localhost:3000/cats", { 40 | // converts the object to a string that can be passed in the request 41 | body: JSON.stringify(cat), 42 | // specify the info being sent in JSON and the info returning should be JSON 43 | headers: { 44 | "Content-Type": "application/json" 45 | }, 46 | // HTTP verb so the correct endpoint is invoked on the server 47 | method: "POST" 48 | }) 49 | .then((response) => response.json()) 50 | .then(() => readCat()) 51 | .catch((errors) => console.log("Cat create errors:", errors)) 52 | } 53 | ``` 54 | 55 | As long as we have set up the frontend scaffolding correctly, the cat create method should be working. But now we will see the a new cat from our user listed in the cat index. 56 | 57 | --- 58 | 59 | [Back to Syllabus](../../README.md#bringing-it-together) 60 | -------------------------------------------------------------------------------- /cat-tinder/connecting/fetch-delete.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder Fetch for Delete Functionality 2 | 3 | #### Overview 4 | 5 | It is time to remove a cat in our database. We will have two applications running on our machine at the same time. The Rails app will run on `localhost:3000` and the React app will run on `localhost:3001`. 6 | 7 | #### Learning Objectives 8 | 9 | - can make cross-origin requests from the UI to an API 10 | - can set state with the JSON data that is returned from our fetch request 11 | 12 | #### Process 13 | 14 | - The Rails app will run on `localhost:3000` 15 | - The React app will run on `localhost:3001` 16 | 17 | --- 18 | 19 | ### Deleting Cats 20 | 21 | Deleting cats from the database looks a little bit different than the other CRUD actions. This is because delete doesn't need have its own page. Since it doesn't have its own page it also doesn't have it's own route. So we need to connect the `deleteCat` function to an `onClick` event somewhere else in the application. 22 | 23 | Just like update, delete requires the id of the cat that will be deleted. Since we are using the cat show page to host the update functionality we can use the same approach to handle the delete functionality. 24 | 25 | The button to delete a cat can look a lot like the button that will navigate to the edit form. It will have a `NavLink` that will take the user back to the index page so we can see that the cat has been removed from the database. The Reactstrap `Button` has a color attribute for styling and will eventually execute the delete functionality. 26 | 27 | **src/pages/CatShow.js** 28 | 29 | ```javascript 30 | 31 | 32 | 33 | ``` 34 | 35 | The next step is to create a function in `App.js` that will send a request to the database that will route to the destroy method in Rails. We know from our RESTful routes that removing an item from the database requires a param. So our function will take the param of id. 36 | 37 | **/src/App.js** 38 | 39 | ```javascript 40 | const deleteCat = (id) => { 41 | fetch(`http://localhost:3000/cats/${id}`, { 42 | headers: { 43 | "Content-Type": "application/json" 44 | }, 45 | method: "DELETE" 46 | }) 47 | .then((response) => response.json()) 48 | .then(() => readCat()) 49 | .catch((errors) => console.log("delete errors:", errors)) 50 | } 51 | ``` 52 | 53 | Now we need to pass the `deleteCat` function through the show route. 54 | 55 | **src/App.js** 56 | 57 | ```javascript 58 | } 61 | /> 62 | ``` 63 | 64 | Now that the CatShow component has access to the `deleteCat` function, we can call the function when the button runs and pass in the id of the cat to be deleted. 65 | 66 | --- 67 | 68 | [Back to Syllabus](../../README.md#bringing-it-together) 69 | -------------------------------------------------------------------------------- /cat-tinder/connecting/fetch-update.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder Fetch for Update Functionality 2 | 3 | #### Overview 4 | 5 | It is time to update a cat in our database! We will have two applications running on our machine at the same time. The Rails app will run on `localhost:3000` and the React app will run on `localhost:3001`. 6 | 7 | #### Learning Objectives 8 | 9 | - can make cross-origin requests from the UI to an API 10 | - can set state with the JSON data that is returned from our fetch request 11 | 12 | #### Process 13 | 14 | - The Rails app will run on `localhost:3000` 15 | - The React app will run on `localhost:3001` 16 | 17 | --- 18 | 19 | ### Editing Cats 20 | 21 | The frontend is going to send the Rails API information, then Rails will use Active Record to patch information in the database. 22 | 23 | We already have a function that logs the form data for our updated cat, so we can convert that function into a patch request. 24 | 25 | The fetch request will be made to the URL that is running the Rails API. In this case, our Rails app is running on `localhost:3000`. We are making a request to the update route of our Rails app. Remembering our RESTful routes, we know that we need to make a **PATCH** request to a route called `"/cats/:id"` to update an existing cat. 26 | 27 | Since our fetch needs to send data from the frontend to the backend we need to format our request. We need to send the information in the body of the request, and specify the header to accept JSON, and specify our HTTP method. 28 | 29 | Our fetch call will return a Promise. If the Promise is resolved successfully we can call the `readCat` function to reload the cats array that will include the updated cat. 30 | 31 | **/src/App.js** 32 | 33 | ```javascript 34 | const updateCat = (cat, id) => { 35 | fetch(`http://localhost:3000/cats/${id}`, { 36 | // converting an object to a string 37 | body: JSON.stringify(cat), 38 | // specify the info being sent in JSON and the info returning should be JSON 39 | headers: { 40 | "Content-Type": "application/json" 41 | }, 42 | // HTTP verb so the correct endpoint is invoked on the server 43 | method: "PATCH" 44 | }) 45 | .then((response) => response.json()) 46 | .then(() => readCat()) 47 | .catch((errors) => console.log("Cat update errors:", errors)) 48 | } 49 | ``` 50 | 51 | As long as we have set up the frontend scaffolding correctly, the cat update method should be working. But now we will see the information for the updated cat. 52 | 53 | --- 54 | 55 | [Back to Syllabus](../../README.md#bringing-it-together) 56 | -------------------------------------------------------------------------------- /cat-tinder/demos.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder Demos 2 | 3 | #### Overview 4 | 5 | As a developer, you will need to be able to present your code and talk about the work you do. Demos can be challenging. Take at least 30 min to plan and practice with your partner. 6 | 7 | Pro tip: Decide ahead of time who will be screen sharing during your demo and if it will be necessary to swap. 8 | 9 | --- 10 | 11 | #### Cat Tinder Demos 12 | 13 | Each demo should be a total of 5 minutes. This is not a long time and will require practice to effectively complete the objectives in the given time frame. 14 | 15 | **First Developer** 16 | 17 | - Show off the app UI (how the app looks) 18 | - What is one UI feature in which you are proud 19 | - Show the specific code for that feature 20 | 21 | **Second Developer** 22 | 23 | - Show off the app functionality (how the app behaves) 24 | - What is one functionality feature in which you are proud 25 | - Show the specific code for that feature 26 | 27 | --- 28 | 29 | [Back to Syllabus](../README.md#cat-tinder-demos) 30 | -------------------------------------------------------------------------------- /cat-tinder/frontend/cat-update.md: -------------------------------------------------------------------------------- 1 | # Cat Tinder Update Functionality 2 | 3 | #### Overview 4 | 5 | There are four general actions a developer will consider when building an application. They are summed up in a delightful acronym: CRUD. This section will focus on the "update" functionality of Cat Tinder adding the ability to navigate to a page that holds a form for updating an existing cat. Because we are still working with mock data the goal will be to put the cat information in the correct data structure and ensure it can be logged in the correct component. 6 | 7 | #### Learning Objectives 8 | 9 | - can display a form with multiple inputs with pre-populated data 10 | - can package data into the appropriate format for an update action 11 | 12 | #### Additional Resources 13 | 14 | - [Reactstrap Form Components](https://reactstrap.github.io/?path=/docs/components-forms--input) 15 | - [React Router Navlink](https://reactrouter.com/en/main/components/nav-link) 16 | 17 | --- 18 | 19 | ### Cat Edit Form 20 | 21 | The initial setup for the CatEdit component will look a lot like the form we created in the CatNew component. **Remember**, we are just using mock data so we won't actually see an update taking place. 22 | 23 | **src/pages/CatEdit.js** 24 | 25 | ```javascript 26 |
    27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
    44 | ``` 45 | 46 | ### Cats in State 47 | 48 | The edit form component will hold a small amount of state to collect the user input and store it in a single object before passing the object to `App.js`. This will allow an `onChange` method to be passed to each input and a `value` attribute to reflect the current status in state. 49 | 50 | **src/pages/CatEdit.js** 51 | 52 | ```javascript 53 | const CatEdit = ({ cats, updateCat }) => { 54 | const { id } = useParams() 55 | let currentCat = cats?.find((cat) => cat.id === +id) 56 | 57 | const [editCat, setEditCat] = useState({ 58 | name: currentCat.name, 59 | age: currentCat.age, 60 | enjoys: currentCat.enjoys, 61 | image: currentCat.image 62 | }) 63 | const handleChange = (e) => { 64 | setEditCat({ ...editCat, [e.target.name]: e.target.value }) 65 | } 66 | ``` 67 | 68 | ### Passing Cats to App.js 69 | 70 | Now that we have all the content from the edit form updated into state, we need to get the information back to `App.js`. This means we need to pass information "up the river" from child component to parent. To accomplish this we need to create a function in `App.js` that gets called when we submit the edit form. 71 | 72 | During our scaffolding phase, the goal here is to see the updated cat logged in `App.js`. Eventually this function will be refactored to include an interaction with the database. 73 | 74 | Here is where we see the first big difference between the action that creates a new cat and the action that updates a cat. The update route requires a params of an id. To ensure we are updating the correct cat, we need to pass the id of the current cat to the function in `App.js`. 75 | 76 | **src/App.js** 77 | 78 | ```javascript 79 | const updateCat = (cat, id) => { 80 | console.log("cat:", cat) 81 | console.log("id:", id) 82 | } 83 | ``` 84 | 85 | This function needs to be passed to our `CatEdit` component. This will require a refactor of the static `"/catedit/:id"` route into a dynamic route that accepts props. 86 | 87 | The route for `CatEdit` will look a little bit like `CatShow` and `CatNew` all mixed into one. We have to determine which cat is going to get updated as well as passing the `updateCat` function. 88 | 89 | **src/App.js** 90 | 91 | ```javascript 92 | } 95 | /> 96 | ``` 97 | 98 | Once the `updateCat` function is passed down to the CatEdit component, we can wrap it in a `handleSubmit` function that will pass our form object and the cat id. 99 | 100 | **src/pages/CatEdit.js** 101 | 102 | ```javascript 103 | const handleSubmit = () => { 104 | updateCat(editCat, currentCat.id) 105 | } 106 | ``` 107 | 108 | We need to call the `handleSubmit` function. To accomplish this, we can add a button from Reactstrap. (Don't forget to add the Reactstrap import!) 109 | 110 | **src/pages/CatEdit.js** 111 | 112 | ```javascript 113 | 116 | ``` 117 | 118 | Now, if we navigate to `localhost:3000/catedit/1` we should see a form. When the form is submitted we should see the logs for our cat object and id in the console. 119 | 120 | ### Navigating to Cat Edit 121 | 122 | How we arrive at the edit page is important, since we need to have the id of our cat as a param. A logical approach is to allow our user to move from the show page (where we already have an id param) to the edit page. We can use the React Router `` to call our `"/catedit/:id"` route and pass the param of the cat we are currently viewing. 123 | 124 | **src/pages/CatShow.js** 125 | 126 | ```javascript 127 | 128 | Edit Cat Profile 129 | 130 | ``` 131 | 132 | ### Finishing Touches 133 | 134 | Here is a good opportunity to think about user flow. Once a cat is updated, it would be nice to be redirected to see the updated information. We can use the same approach we used when submitting the new cat form. 135 | 136 | **src/pages/CatEdit.js** 137 | 138 | ```javascript 139 | import { useNavigate, useParams } from "react-router-dom" 140 | 141 | const navigate = useNavigate() 142 | const handleSubmit = () => { 143 | updateCat(editCat, currentCat.id) 144 | navigate("/catindex") 145 | } 146 | ``` 147 | 148 | **Remember**, we won't see updates made to the cat just yet. But we can see the form and routing functionality working and see our cat object logged by `App.js` which puts us in a great place for now. 149 | 150 | --- 151 | 152 | [Back to Syllabus](../../README.md#cat-tinder-frontend) 153 | -------------------------------------------------------------------------------- /github/assessments.md: -------------------------------------------------------------------------------- 1 | # LEARN Academy Assessments 2 | 3 | #### Process Overview 4 | 5 | - Accept assignments via GitHub Classroom link shared in Slack 6 | - Clone repository to your local machine 7 | - Create a branch with the unit and your name, e.g `unit-1-sarah-proctor` 8 | - Complete all assessment problems 9 | - Git add, commit, push 10 | - Create a pull request and leave the branch open for review! 11 | - Merge code after review is **approved** 12 | 13 | #### Requirements and Expectations 14 | 15 | Completing all assessments on time is required to continue in the LEARN program. A student must make reasonable effort on every question in the assessment. If any questions are left blank, the assessment will not be reviewed. 16 | 17 | An assessment is not complete until the assessment is reviewed by an instructor and the working branch is merged into the main branch. 18 | 19 | #### Troubleshooting 20 | 21 | - Did you save? 22 | - Are you in the correct directory? 23 | - Git add/commit/push happens in the terminal, creating a PR happens in the browser on GitHub 24 | - What is `git status` telling you? 25 | - Did you fully and properly read the instructions? 26 | 27 | --- 28 | 29 | ### GitHub Classroom 30 | 31 | GitHub Classroom is a tool that allows each student to create their own repository that contains the assessment. This new repository will be created in the shared cohort GitHub organization. The instructors will send a link to access GitHub Classroom in Slack. 32 | 33 | ### Accepting Assessment 34 | 35 | Click the link and accept the assignment and GitHub Classroom will create a repository in the cohort's GitHub organization. Click the link to see the new repository. Clone the repository by clicking the green `Code` button and copying the url. 36 | 37 | ### In Terminal 38 | 39 | - cd into an appropriate location, we recommend the Desktop 40 | - Type $ `git clone` and paste the url copied from the git repository 41 | - cd into the assessment directory 42 | - You should see the full name of the assessment followed by your GitHub handle in the terminal file structure 43 | - Checkout a branch: $ `git checkout -b ` 44 | - No quotes or spaces in your branch name 45 | - Use the naming convention `` e.g. unit-1-sarah-proctor 46 | - Terminal will say `Switched to a new branch ` 47 | 48 | ### Code! 49 | 50 | COMPLETE all questions and all prompts in all files in the assessment! 51 | 52 | This is a chance for you to learn as well as for the instructors to see your code and your understanding of the concepts. 53 | 54 | ### Ready to Submit 55 | 56 | - cd into the correct directory 57 | - $ `git add ` 58 | - $ `git commit -m "completed assessment"` 59 | - $ `git push origin ` 60 | - On GitHub find the green `Compare & pull request` button 61 | - Leave comments or questions about your code if you want specific feedback 62 | - Click the green `Create pull request` button 63 | 64 | **You have successfully submitted your assessment!** 65 | 66 | ### Next Steps 67 | 68 | An instructor will review the assessment code. Possible instructor responses are: 69 | 70 | - Approval: You are clear to merge. 71 | - Comment: There is something that should be changed before approval. 72 | - Request for changes: There is something that needs to be addressed before the assessment can continue being reviewed. 73 | 74 | Once the PR has been approved, open the pull request and click the green `Merge pull request` button. 75 | 76 | After the merge is successful there will be an option to delete the branch. When your code is merged and the branch is deleted your assessment is **DONE**!! 77 | 78 | --- 79 | 80 | [Back to Syllabus](../README.md#github) 81 | -------------------------------------------------------------------------------- /github/assets/clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/clone.png -------------------------------------------------------------------------------- /github/assets/commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/commit.png -------------------------------------------------------------------------------- /github/assets/driver-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/driver-1.png -------------------------------------------------------------------------------- /github/assets/driver-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/driver-2.png -------------------------------------------------------------------------------- /github/assets/gh-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/gh-1.png -------------------------------------------------------------------------------- /github/assets/gh-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/gh-2.png -------------------------------------------------------------------------------- /github/assets/gh-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/gh-3.png -------------------------------------------------------------------------------- /github/assets/gh-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/gh-4.png -------------------------------------------------------------------------------- /github/assets/git-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-1.png -------------------------------------------------------------------------------- /github/assets/git-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-2.png -------------------------------------------------------------------------------- /github/assets/git-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-3.png -------------------------------------------------------------------------------- /github/assets/git-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-4.png -------------------------------------------------------------------------------- /github/assets/git-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-5.png -------------------------------------------------------------------------------- /github/assets/git-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-6.png -------------------------------------------------------------------------------- /github/assets/git-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-status.png -------------------------------------------------------------------------------- /github/assets/git-workflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/git-workflow.png -------------------------------------------------------------------------------- /github/assets/push.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/push.png -------------------------------------------------------------------------------- /github/assets/status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/github/assets/status.png -------------------------------------------------------------------------------- /github/github-configurations.md: -------------------------------------------------------------------------------- 1 | # Git and GitHub Configurations 2 | 3 | #### Overview 4 | 5 | Git is a very powerful tool used for project version control. GitHub uses the git technology to allow developers to collaborate on coding projects. In order to access git and GitHub from your computer there are some setup configurations required. 6 | 7 | #### Previous Lecture (43 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/P2n03yVbz0w/0.jpg)](https://www.youtube.com/watch?v=P2n03yVbz0w) 10 | 11 | #### Vocabulary 12 | 13 | - Personal Access Tokens (PAT) 14 | 15 | #### Additional Resources 16 | 17 | - [Updating GitHub Credentials](https://docs.github.com/en/github/getting-started-with-github/updating-credentials-from-the-macos-keychain) 18 | - [Token Authentication Requirements](https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/) 19 | - [Setting your Username in GitHub](https://docs.github.com/en/github/getting-started-with-github/setting-your-username-in-git) 20 | - [Setting Your Commit Email Address](https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/setting-your-commit-email-address) 21 | - [Creating a GitHub Personal Access Token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) 22 | 23 | --- 24 | 25 | ### Git Configurations 26 | 27 | The following instructions must be completed in order to connect a Mac computer to your personal GitHub account. These instructions only need to be completed one time when initially configuring your development environment on a new Mac computer. 28 | 29 | GitHub uses a Personal Access Token (PAT) in order to protect individual GitHub accounts. **Personal Access Tokens** are an alternative to using passwords for authentication to GitHub. The process outlined below will create a token and login into your GitHub account via the terminal command line. 30 | 31 | 1. Verify git version using the terminal command: $ `git --version` 32 | 33 | - Version 2.31.1 or later is required for using Personal Access Tokens for GitHub Authentication. 34 | 35 | 2. Configure global git username in terminal. 36 | 37 | - This is what will be displayed on your code contributions. 38 | - $ `git config --global user.name "Your Name Here"` 39 | 40 | 3. Configure global git email address in terminal. 41 | 42 | - $ `git config --global user.email "your-email@example.com"` 43 | 44 | 4. Configure the credential helper. 45 | 46 | - Because git was installed on your computer using Homebrew the OSX Keychain helper should already be installed and can be accessed with the following command. 47 | - $ `git config --global credential.helper osxkeychain` 48 | 49 | 5. Verify all git configurations are correct. 50 | 51 | - $ `git config -l` 52 | - You should see a list of items similar the following: 53 | 54 | ``` 55 | credential.helper=osxkeychain 56 | user.name=Mona Lisa 57 | user.email=email@example.com 58 | ``` 59 | 60 | 6. Create a Personal Access Token (PAT). 61 | 62 | - **This token needs to be treated like a password. Do not share it with anyone and do not save it in any place where it may be publicly accessible.** 63 | - In the upper right corner of any GitHub browser page, click your profile photo, then click **Settings** 64 | - In the left sidebar, click **Developer settings** 65 | - In the left sidebar, click **Personal access tokens** 66 | - Click the button at the top labeled **Generate new token** 67 | - In the **Note** text box, give your token a name, something generic, yet descriptive such as `LEARN GitHub` 68 | - Change the expiration date to at least six months in the future 69 | - Select the following scopes: 70 | - `repo` 71 | - `workflow` 72 | - `admin:org` 73 | - `notifications` 74 | - `user` 75 | - Click Generate token 76 | - **DO NOT NAVIGATE AWAY FROM PAGE UNTIL YOU HAVE COPIED THE TOKEN AND PASTED IT SOMEWHERE IN A SAFE PLACE** 77 | - Paste the token in a note file for temporary storage 78 | 79 | 7. Make a new repository in your personal GitHub account. 80 | 81 | - Go to `Your repositories` located on the dropdown menu under your GitHub icon 82 | - Select the `New` button 83 | - Create a unique-repository-name 84 | - Since we are not importing an existing repository, check the box by `Add a README file` 85 | - Select the `Create repository` button 86 | - Select the dropdown menu on the `Code` button 87 | - Copy the repository url 88 | - Clone existing repository using HTTPS 89 | - $ `git clone ` 90 | - $ `cd ` 91 | 92 | 8. Make a change in the repository and push the code. 93 | - $ `cd` into the repository 94 | - Open the directory in your text editor: $ `code .` 95 | - Make changes on the README.md file 96 | - $ `git status` 97 | - $ `git add ` 98 | - $ `git commit -m "meaningful message here"` 99 | - $ `git push origin ` 100 | 9. When prompted for your username, enter your GitHub handle. 101 | 10. When prompted for your password, enter your **token**. 102 | 103 | --- 104 | 105 | [Back to Syllabus](../README.md#github) 106 | -------------------------------------------------------------------------------- /github/style-guidelines.md: -------------------------------------------------------------------------------- 1 | # LEARN Syllabus Contributor Guidelines 2 | 3 | At LEARN, our syllabus is open-source information reflecting the current status of the curriculum. Just like the technology we teach, the syllabus is ever evolving and adapting to suit the needs of our students. The repository is maintained by the LEARN instruction staff. 4 | 5 | If you would like to contribute to our syllabus, please review the following: 6 | 7 | ### Making a Contribution 8 | - Find an error or issue that you are interested in addressing. 9 | - Clone the [main LEARN syllabus](https://github.com/LEARNAcademy/Syllabus) to your local machine. 10 | - Create a new branch for your fix using `git checkout -b descriptive-branch-name-here`. 11 | - Make the appropriate changes that correspond with your branch name. 12 | - Commit your changes with a short, but descriptive message. 13 | - Push the changes to the repository using `git push origin descriptive-branch-name-here`. 14 | - Submit a pull request. 15 | - Title the pull request with a short description of the changes made. 16 | - In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it! 17 | - Wait for the pull request to be reviewed by a maintainer. 18 | - Make changes to the pull request if the reviewing maintainer recommends them. 19 | - Celebrate your success after your pull request is merged! 20 | 21 | ### Technologies 22 | - Our syllabus in written in [GitHub-flavored markdown](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/about-writing-and-formatting-on-github). 23 | 24 | ### Style Guide 25 | - Text instructions are written in first person plural. 26 | - Language and framework names referenced in text instructions are capitalized `ex) JavaScript, React, Ruby, PostgreSQL`. 27 | - Vocabulary words are bold when appearing with their definitions. 28 | - Terminal commands in text instructions are wrapped in single back ticks. 29 | - File paths in text instructions are in italics. 30 | - All variables have descriptive names. 31 | - No spaces around HTML/JSX attributes ex) `
    `. 32 | - One space around JavaScript and Ruby operators ex) `8 + 5`. 33 | - All JavaScript strings are in double quotes unless necessary for punctuation. 34 | - All Ruby strings are in single quotes unless necessary for punctuation. 35 | - Semicolons are not used in JavaScript code unless necessary. 36 | - Code is formatted into its own distinct block with triple back ticks and styled with the name of the language in all lowercase. 37 | - File paths appear above code blocks in bold. 38 | 39 | ### Need Help? 40 | If you need help, you can ask questions on our LEARN community slack channel or at `contact@learnacademy.org`. 41 | 42 | ### LEARN Code of Conduct 43 | We at LEARN pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. 44 | 45 | We strive to be a positive voice in the Tech Community. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community-oriented learning environment. 46 | 47 | Exclusionary or inappropriate content is unacceptable. Your work and decisions affect others and your actions have consequences. Violating our policy will result in a temporary or permanent ban from all LEARN community platforms. 48 | -------------------------------------------------------------------------------- /javascript/assets/scope.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/javascript/assets/scope.jpg -------------------------------------------------------------------------------- /javascript/functions-loops-arrays.md: -------------------------------------------------------------------------------- 1 | # JavaScript Functions, Loops, and Arrays (Oh My!) 2 | 3 | #### Overview 4 | 5 | Functions are powerful tools that can take any kind of data as an input. Often we need a function to interact with data sets and perform iterations. This section integrates functions, loops, and arrays to create reusable, iterative code machines. 6 | 7 | #### Previous Lecture (42 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/V6pmC4ylFjk/0.jpg)](https://www.youtube.com/watch?v=V6pmC4ylFjk) 10 | 11 | #### Learning Objectives 12 | 13 | - can extrapolate that an array can be passed into a function via an argument 14 | - can create a function that acts on an array using a for loop 15 | 16 | #### Process 17 | 18 | - `cd` into the `javascript-foundations-challenges` repository 19 | - Create a new branch: `func-loops-arrays-initials1-initials2` (ex. func-loops-arrays-aw-sp) 20 | - `touch` a file with no spaces and `.js` extension: `func-loops-arrays-student1-student2.js` (ex. func-loops-arrays-austin-sarah.js) 21 | - Open the folder in a text editor 22 | - Code! 23 | 24 | #### Troubleshooting Tips 25 | 26 | - Does the function have a return? 27 | - Is there a `console.log` on the function invocation? 28 | - Does the number of arguments match the number of parameters? 29 | 30 | --- 31 | 32 | ### Putting It All Together 33 | 34 | As we work to solve more complicated problems with code, we need to add more logic into our functions. In this section, we will explore how arrays and loops can be integrated into functions. 35 | 36 | **Example:** Create a function that takes in an array and returns a new array with all numbers multiplied by 5. 37 | 38 | ```javascript 39 | const myArr1 = [1, 5, 7, 3, 10] 40 | 41 | const mult5 = (array) => { 42 | let newArr = [] 43 | for (let i = 0; i < array.length; i++) { 44 | newArr.push(array[i] * 5) 45 | } 46 | return newArr 47 | } 48 | 49 | console.log(mult5(myArr1)) 50 | // output: [5, 25, 35, 15, 50] 51 | ``` 52 | 53 | Notice that we created an empty array inside our function and used the **.push()** method to populate our empty array. The function then returned the newly populated array. 54 | 55 | In the following example, we can add a nested conditional statement to return only certain items from the array. 56 | 57 | **Example:** Create a function that takes in an array and returns a new array with only the even numbers. 58 | 59 | ```javascript 60 | const myArr2 = [1, 2, 7, 4, 10, 8, 9] 61 | 62 | const onlyEven = (array) => { 63 | let newArr = [] 64 | for (let i = 0; i < array.length; i++) { 65 | if (array[i] % 2 === 0) { 66 | newArr.push(array[i]) 67 | } 68 | } 69 | return newArr 70 | } 71 | 72 | console.log(onlyEven(myArr2)) 73 | // output: [2, 4, 10, 8] 74 | ``` 75 | 76 | --- 77 | 78 | ### 💻 Challenges 79 | 80 | Copy the challenges into your JavaScript file. Comment out the instructions and code the solution to each problem beneath the prompt. 81 | **Don't forget to pseudo code.** 82 | 83 | - Write a function that takes in an array of numbers and returns an array with all numbers multiplied by 3. 84 | 85 | ```javascript 86 | const testArr1 = [3, 9, 15, 4, 10] 87 | // output: [9, 27, 45, 12, 30] 88 | ``` 89 | 90 | - Write a function that takes in an array of numbers and returns a new array with only odd numbers. 91 | 92 | ```javascript 93 | const testArr2 = [0, 2, -7, 3, 5, 8, 10, 13] 94 | // output: [-7, 3, 5, 13] 95 | ``` 96 | 97 | - Write a function that takes in an array of numbers and letters and returns a string with only the letters. **HINT:** use the `typeof` method. 98 | 99 | ```javascript 100 | const comboArr = [ 101 | 7, 102 | "n", 103 | true, 104 | "i", 105 | "c", 106 | 10, 107 | "e", 108 | -388, 109 | "w", 110 | 3, 111 | "o", 112 | 0, 113 | "r", 114 | false, 115 | "k" 116 | ] 117 | // output: "nicework" 118 | ``` 119 | 120 | - Create a function that takes in an array of numbers and returns the sum. 121 | 122 | ```javascript 123 | const addThese1 = [1, 2, 3, 4] 124 | // output: 10 125 | 126 | const addThese2 = [] 127 | // output: 0 128 | ``` 129 | 130 | - Create a function that takes in an array of numbers and returns the index of the largest number. 131 | 132 | ```javascript 133 | const indexHighestNumber = [1, 4, 2, 3] 134 | // output: 1 135 | ``` 136 | 137 | ### 🏔 Stretch Goals 138 | 139 | - Create a function that takes in two arrays and returns one array with no duplicate values. 140 | 141 | ```javascript 142 | const arr1 = [3, 7, 10, 5, 4, 3, 3] 143 | const arr2 = [7, 8, 2, 3, 1, 5, 4] 144 | // output: [3, 7, 10, 5, 4, 8, 2, 1] 145 | ``` 146 | 147 | - Create a function that takes in two numbers as arguments and returns an array the length of the first number filled with the second number. 148 | 149 | ```javascript 150 | const arrayLength = 6 151 | const arrayValue = 0 152 | // output: [0, 0, 0, 0, 0, 0] 153 | 154 | const arrayLength = 4 155 | const arrayValue = 11 156 | // output: [11, 11, 11, 11] 157 | ``` 158 | 159 | - Create a function that takes a number as an argument. Add up all the numbers from 1 to the number you passed to the function. 160 | 161 | ```javascript 162 | const addUp1 = 4 163 | // 1 + 2 + 3 + 4 = 10 164 | // output: 10 165 | 166 | const addUp2 = 10 167 | // 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55 168 | // output: 55 169 | 170 | const addUp3 = 600 171 | // output: 180300 172 | ``` 173 | 174 | ### 🏔 Epic Goals 175 | 176 | - Create a function called highLow that takes in a number and returns whether the number is higher or lower than the "answer". 177 | - Create an HTML page and link your JavaScript file. More info [here](../tools-and-resources/linking-html-javascript.md). 178 | - As a user, I see a prompt or input where I can guess a number between 1 and 100 (both inclusive). 179 | - As a user, I can see if my guess is too high or too low. 180 | - As a user, if I guess the "answer" correctly I am notified that I won. 181 | - As a user, I can continue to guess the "answer" until I am correct. 182 | - STRETCH: As a user, if I have not guessed the correct number in seven tries I see a losing message. 183 | 184 | --- 185 | 186 | [Back to Syllabus](../README.md#unit-two-javascript-foundations) 187 | -------------------------------------------------------------------------------- /javascript/spread-operator.md: -------------------------------------------------------------------------------- 1 | # JavaScript Spread Operator 2 | 3 | #### Overview 4 | 5 | Spread syntax was introduced in the JavaScript ES6 update. Spread syntax expands an iterable to its individual elements. Spread syntax allows a dynamic number of arguments to be passed in a function. 6 | 7 | #### Previous Lecture (18 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/72qhgQQNkOo/0.jpg)](https://www.youtube.com/watch?v=72qhgQQNkOo) 10 | 11 | #### Learning Objectives 12 | 13 | - can explain how the spread operator is utilized 14 | - can demonstrate the use of a spread operator in multiple ways 15 | - can demonstrate how to pass a dynamic number of arguments to a function with a spread operator 16 | 17 | #### Vocabulary 18 | 19 | - spread syntax 20 | - iterable 21 | 22 | #### Additional Resources 23 | 24 | - [MDN Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 25 | 26 | --- 27 | 28 | ### Spread Syntax 29 | 30 | Official MDN Definition: Spread syntax allows an iterable (such as an array or string) to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. 31 | 32 | ### Array concatenation 33 | 34 | Historically when we wanted to concatenate 2 arrays (join 2 arrays) we had to use the Array **concat()** method: 35 | 36 | ```javascript 37 | // pre ES6: .concat() method 38 | 39 | const arr1 = [0, 1, 2] 40 | const arr2 = [3, 4, 5] 41 | 42 | const combined = arr1.concat(arr2) 43 | 44 | console.log(combined) 45 | // output: [0, 1, 2, 3, 4, 5] 46 | ``` 47 | 48 | While that wasn't terrible to use, we now have ability to use the spread operator to accomplish the same task: 49 | 50 | ```javascript 51 | // ES6 Spread operator 52 | 53 | const arr1 = [0, 1, 2] 54 | const arr2 = [3, 4, 5] 55 | 56 | const combined = [...arr1, ...arr2] 57 | console.log(combined) 58 | // output: [0, 1, 2, 3, 4, 5] 59 | ``` 60 | 61 | Notice the code is more declarative and more readable. 62 | 63 | ### Array Duplication 64 | 65 | The spread operator also makes duplicating an array very simple. 66 | 67 | ```javascript 68 | var arr1 = [1, 2, 3] 69 | var arr2 = [...arr1] 70 | 71 | console.log(arr2) 72 | // output: [1, 2, 3] 73 | 74 | console.log(arr1) 75 | // output: [1, 2, 3] 76 | ``` 77 | 78 | Where we may have duplicated the array using a map or slice, we now have again a more declarative technique for doing the same at our disposal. Just like the previously mentioned techniques, the spread operator is non destructive. 79 | 80 | ```javascript 81 | var arr1 = [1, 2, 3] 82 | var arr2 = [...arr1] 83 | arr2.push(4) 84 | 85 | console.log(arr2) 86 | // output: [1, 2, 3, 4] 87 | 88 | console.log(arr1) 89 | // output: [1, 2, 3] 90 | 91 | // arr1 remains unaffected 92 | ``` 93 | 94 | ### Passing a dynamic number of arguments 95 | 96 | Finally, the spread operator gives us a way to handle cases in which we are passing an unknown number of arguments to a function or method. 97 | 98 | ```javascript 99 | // before ES6 100 | const createSentence => (w1, w2, w3) => { 101 | return w1 + w2 + w3 102 | } 103 | 104 | console.log(createSentence("hello", "there", "world")) 105 | // output: "Hello there world" 106 | 107 | // with spread operator 108 | const createSentence = (...words) => { 109 | return words.join(" ") 110 | } 111 | 112 | console.log(createSentence("hello", "y'all", "what's", "up", "doc")) 113 | // output: "hello y'all what's up doc" 114 | ``` 115 | 116 | --- 117 | 118 | ### 💻 Challenges 119 | 120 | Consider this function: 121 | 122 | ```javascript 123 | const combineArrays = (arrOne, arrTwo) => { 124 | return arrOne.concat(arrTwo) 125 | } 126 | 127 | console.log(combineArrays([2, 4, 2], [4, 6, 11])) 128 | ``` 129 | 130 | Refactor this function to use the spread operator to combine the arrays. 131 | 132 | Consider this function: 133 | 134 | ```javascript 135 | const combineAndFilterOdd = (arrOne, arrTwo, arrThree) => { 136 | return arrOne 137 | .concat(arrTwo) 138 | .concat(arrThree) 139 | .filter((num) => num % 2 !== 0) 140 | } 141 | 142 | console.log(combineAndFilterOdd([3, 2, 5], [5, 8, 7], [4, 5, 6])) 143 | ``` 144 | 145 | Refactor this function to use the spread operator to combine the array arguments. 146 | 147 | ### 🏔 Stretch Goals 148 | 149 | Recall the `combineAndFilterOdd()` function from the previous exercise. Refactor the function to take any number of arguments. 150 | 151 | --- 152 | 153 | [Back to Syllabus](../README.md#unit-one-javascript-foundations) 154 | -------------------------------------------------------------------------------- /javascript/ternary.md: -------------------------------------------------------------------------------- 1 | # JavaScript Ternary Operator 2 | 3 | #### Overview 4 | 5 | Ternary operators are a shortcut for `if/else` statements. Ternary operators allow for code to be more concise. 6 | 7 | #### Learning Objectives 8 | 9 | - can recall the syntax of a ternary operator 10 | - can explain the difference between ternary operator and if/else statement 11 | 12 | #### Vocabulary 13 | 14 | - ternary operator 15 | 16 | --- 17 | 18 | ## Ternary Operator 19 | 20 | Ternary operators are handy shortcuts for creating `if/else` statements in JavaScript. Ternary operators allow JavaScript developers to make very clean and concise code. 21 | 22 | Consider the following program: 23 | 24 | ```javascript 25 | const age = 20 26 | 27 | if (age >= 16) { 28 | console.log("You are old enough to drive.") 29 | } else { 30 | console.log("You are not old enough to drive.") 31 | } 32 | ``` 33 | 34 | This code has exactly two possible outcomes which makes it a great candidate for refactoring using a ternary operator. 35 | 36 | ### Ternary Operator Anatomy 37 | 38 | There are three parts of a ternary operator: 39 | 40 | 1. The condition that you are evaluating. The outcome of the evaluation should be a boolean value or coerce to a boolean value. 41 | 2. A question mark `?` that will separate the condition from the truthy outcome. 42 | 3. A `:` that will separate the truthy outcome from the falsey outcome. 43 | 44 | Here is the refactor from the previous example: 45 | 46 | ```javascript 47 | const age = 20 48 | 49 | age >= 16 50 | ? console.log("You are old enough to drive.") 51 | : console.log("You are not old enough to drive.") 52 | ``` 53 | 54 | In pseudocode, this would read: 55 | 56 | ``` 57 | condition ? output if true : output if false 58 | ``` 59 | 60 | ### Additional Examples 61 | 62 | In this case, we are creating a function that will greet a user. If the user offers us a name we will greet the user by name. If not, we will offer a generic greeting. 63 | 64 | ```javascript 65 | const greeter = (myName) => { 66 | return myName ? `Hey there, ${myName}` : "Hey there, you!" 67 | } 68 | console.log(greeter(null)) 69 | // output: "Hey there, you!" 70 | console.log(greeter("LEARN Student")) 71 | // output: "Hey there, LEARN Student" 72 | ``` 73 | 74 | Here we are creating a function that will determine if a light switch is on or off and instruct our user to perform an appropriate action. 75 | 76 | ```javascript 77 | const toggler = (onOff) => { 78 | return onOff === "on" ? "Turn switch off." : "Turn switch on." 79 | } 80 | console.log(toggler("on")) 81 | // output: "Turn switch off." 82 | console.log(toggler("off")) 83 | // output: "Turn switch on." 84 | ``` 85 | 86 | --- 87 | 88 | ### 💻 Challenges 89 | 90 | - Create a function that determines if a user is old enough to vote (age 18 or older). 91 | - Create a function that takes in an array of numbers and determines if the number is odd or even. 92 | 93 | --- 94 | 95 | [Back to Syllabus](../README.md#unit-one-javascript-foundations) 96 | -------------------------------------------------------------------------------- /postgresql/assets/like-set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/like-set.png -------------------------------------------------------------------------------- /postgresql/assets/limit-set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/limit-set.png -------------------------------------------------------------------------------- /postgresql/assets/select-all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/select-all.png -------------------------------------------------------------------------------- /postgresql/assets/select-some.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/select-some.png -------------------------------------------------------------------------------- /postgresql/assets/spreadsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/spreadsheet.png -------------------------------------------------------------------------------- /postgresql/assets/table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/table.png -------------------------------------------------------------------------------- /postgresql/assets/where-set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/where-set.png -------------------------------------------------------------------------------- /postgresql/assets/with-set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/postgresql/assets/with-set.png -------------------------------------------------------------------------------- /postgresql/intro.md: -------------------------------------------------------------------------------- 1 | # Introduction to Databases 2 | 3 | #### Overview 4 | 5 | Databases are an organized collection of information stored in a computer or on a server. Relational databases store information in tables that consist of rows and columns, much like a spreadsheet. Databases are an essential piece of a full-stack application. 6 | 7 | #### Previous Lecture (30 min) 8 | 9 | [![YouTube](http://img.youtube.com/vi/bFWhgElRggE/0.jpg)](https://www.youtube.com/watch?v=bFWhgElRggE) 10 | 11 | #### Vocabulary 12 | 13 | - SQL 14 | - PostgreSQL 15 | - relational database 16 | - database columns 17 | - database rows 18 | - database instance 19 | - database table 20 | - schema 21 | - primary key 22 | 23 | --- 24 | 25 | ### SQL and PostgreSQL 26 | 27 | **SQL**, short for Structured Query Language, is a domain-specific language used for communicating with databases. **PostgreSQL**, also called Postgres, is one type of SQL. Postgres is an open source object-relational database management system, which means Postgres looks at databases through an object-oriented programming (OOP) lens. 28 | 29 | ### Relational Databases 30 | 31 | A **relational database** is structured similar to a spreadsheet with its information displayed in rows and columns. The **database columns** describe the structure of the database. The **database rows** are each entries the database. Another way of referencing database rows is to say **database instance**. A **database table** is one set of rows and columns. 32 | 33 | A database can have many tables that have relationships with each other. The description of the layout of all the tables in a database, along with the name and data type of each column within each table, is called a **schema**. 34 | 35 | ### How Programs Use Databases 36 | 37 | How does the code we write in Rails (or any other language or framework) interact with a database? Let's explore how contact information can be stored in a relational database. 38 | 39 | ### Example Contact Information for a Person 40 | 41 | ``` 42 | First Name: Korben 43 | Last Name: Dallas 44 | Date of Birth: 6/1/2097 45 | Address: Apt 3497 1 Main St, CityVille, Earth 46 | Email: korben_dallas@gmail.com 47 | ``` 48 | 49 | Take a look at the information above and imagine how we can write it in code. 50 | 51 | Data like this contact information with key:value pairs can be formatted like a Ruby hash. 52 | 53 | ```ruby 54 | person1 = { 55 | first_name: 'Korben', 56 | last_name: 'Dallas', 57 | birthday: '6/1/2097', 58 | address: 'Apt 3497 1 Main St, CityVille, Earth', 59 | email: 'korben_dallas@gmail.com' 60 | } 61 | ``` 62 | 63 | That works well for storing one person's information, but what if there was more people we needed to track? We would end up with variables like `person10453` with lots of redundant code. Other challenges may include sorting the variables and accessing common information among them. So, storing the data separately is not very helpful. 64 | 65 | What is a more effective approach for managing data that tracks information about numerous individuals? 66 | 67 | We can create a class. 68 | 69 | Making a class for a generic `Person` allows us to define the common attributes for each person, and subsequently, any new individual we add will adhere to that established pattern. Refactoring the data into a Ruby class will appear as follows: 70 | 71 | ```ruby 72 | class Person 73 | def initialize(first_name, last_name, birthday, address, email) 74 | @first_name = first_name 75 | @last_name = last_name 76 | @birthday = birthday 77 | @address = address 78 | @email = email 79 | end 80 | end 81 | 82 | Person.new('Korben', 'Dallas', '6/1/2097', 'Apt 3497 1 Main St, CityVille, Earth', 'korben_dallas@gmail.com') 83 | ``` 84 | 85 | Now we have a reproducible way to create people in our application. The next task is to store each new instance of class `Person` into a database. (Remember in Ruby, an instance of a class is an object.) How do we do that? 86 | 87 | Imagine we are creating a spreadsheet file to store all the objects created from class `Person`. The spreadsheet file would probably be called `people` because it will store contact info for several people. 88 | 89 | The properties we expect each person to have (first name, last name, birthday, etc... from the list above) would become the columns of our spreadsheet. Adding a new person is a matter of adding a row and filling out that person's information for each column. 90 | 91 | That is essentially what will happen in our code. A class will be connected to a database table (the spreadsheet) and each instance of a person will be added to the table as a row. 92 | 93 | ![spreadsheet](./assets/spreadsheet.png) 94 | 95 | ### The Primary Key 96 | 97 | Each row of the database is a unique entry. However, it is possible that multiple entries could have the same data. In order to ensure each row is unique, every database entry will have a primary key. The **primary key** is a column in the database that will contain a unique identifier. 98 | 99 | In Rails, every row of a table has a primary key named "id", and that id is a number that is guaranteed to be unique. This prevents problems like two `Person` instances being confused for each other because they have the same name. We can always tell them apart by their id. 100 | 101 | We've added in a primary key for this instance of Person: 102 | 103 | ``` 104 | id: 1 105 | First Name: Korben 106 | Last Name: Dallas 107 | Date of Birth: 6/1/2097 108 | Address: Apt 3497 1 Main St, CityVille, Earth 109 | Email: korben_dallas@gmail.com 110 | ``` 111 | 112 | ### Summary 113 | 114 | In this lesson, we learned about organizing a program's data into a relational database structure. We were introduced to the database concept of a row, which represents an instance of a class. Rows are grouped together into tables. Relational databases define the name and data type of each column using a schema. One very important attribute of every row in every table in a Rails application is the id. Primary keys are guaranteed to be unique and are how we identify individual rows (or instances). 115 | 116 | ![table](./assets/table.png) 117 | 118 | Relational databases were in existence prior to the introduction of Rails and will continue to endure even as new technologies emerge. Rails, as well as other web frameworks, can be conceptualized as tools that effectively and securely connect web pages with data stored in relational databases. 119 | 120 | --- 121 | 122 | [Back to Syllabus](../README.md#unit-five-intro-to-postgres-and-ruby-on-rails-models) 123 | -------------------------------------------------------------------------------- /rails/assets/generate-controller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/generate-controller.png -------------------------------------------------------------------------------- /rails/assets/generate-resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/generate-resource.png -------------------------------------------------------------------------------- /rails/assets/model-spec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/model-spec.png -------------------------------------------------------------------------------- /rails/assets/postman-create-json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-create-json.png -------------------------------------------------------------------------------- /rails/assets/postman-delete-send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-delete-send.png -------------------------------------------------------------------------------- /rails/assets/postman-get-send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-get-send.png -------------------------------------------------------------------------------- /rails/assets/postman-index-json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-index-json.png -------------------------------------------------------------------------------- /rails/assets/postman-interface-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-interface-layout.png -------------------------------------------------------------------------------- /rails/assets/postman-post-send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-post-send.png -------------------------------------------------------------------------------- /rails/assets/postman-request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-request.png -------------------------------------------------------------------------------- /rails/assets/postman-update.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/postman-update.png -------------------------------------------------------------------------------- /rails/assets/rails-default-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/rails-default-view.png -------------------------------------------------------------------------------- /rails/assets/rails-routes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/rails-routes.png -------------------------------------------------------------------------------- /rails/assets/resource-routes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/resource-routes.png -------------------------------------------------------------------------------- /rails/assets/routes-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/routes-file.png -------------------------------------------------------------------------------- /rails/assets/rspec-models-failing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/rspec-models-failing.png -------------------------------------------------------------------------------- /rails/assets/rspec-models-passing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/rspec-models-passing.png -------------------------------------------------------------------------------- /rails/assets/rspec-models-pending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/rails/assets/rspec-models-pending.png -------------------------------------------------------------------------------- /rails/rails-intro.md: -------------------------------------------------------------------------------- 1 | # Ruby on Rails Introduction 2 | 3 | #### Overview 4 | 5 | "Learning to build a modern web application is daunting. Ruby on Rails makes it much easier and more fun. It includes everything you need to build fantastic applications, and you can learn it with the support of our large, friendly community." -- Rails Docs 6 | 7 | Ruby on Rails is a server-side web application framework written in Ruby. Rails was created by Danish programmer David Heinemeier Hansson (known as DHH). Rails was released in July 2004 as open source code. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. 8 | 9 | #### Previous Lecture (32 min) 10 | 11 | [![YouTube](http://img.youtube.com/vi/STtmWTWhfpk/0.jpg)](https://www.youtube.com/watch?v=STtmWTWhfpk) 12 | 13 | #### Learning Objectives 14 | 15 | - can recall the command to create a new Rails application 16 | - can recall the command to start the application server 17 | - can view the Rails boilerplate page in the browser 18 | - can navigate a Rails application to find the model, controller, views, db, gemfiles 19 | - can recall the parts of MVC architecture 20 | - can give examples of the technologies making up the MVC architecture 21 | 22 | #### Vocabulary 23 | 24 | - Ruby on Rails 25 | - MVC 26 | 27 | #### Additional Resources 28 | 29 | - [Rails Docs](https://rubyonrails.org/) 30 | - [History of Ruby on Rails](https://medium.com/@instaacarma/the-history-of-ruby-on-rails-986ead4e0e0a) 31 | 32 | --- 33 | 34 | ### Create a Rails App 35 | 36 | Having explored HTML, CSS, JavaScript, and Ruby, we now possess the tools essential for learning **Ruby on Rails**, the framework for writing full-stack web applications in the Ruby programming language. 37 | 38 | ### Ruby on Rails Principles 39 | 40 | "The Rails Doctrine" outlines the principles of Ruby on Rails development (Hansson, n.d.). 41 | 42 | Convention over Configuration: “You’re not a beautiful and unique snowflake” is one of the earliest productivity slogans for Rails. This motto proposed that giving up vain individuality can help us to bypass the struggles of mundane decisions and to expedite progress in more significant areas. The Ruby on Rails framework provides some predetermined conventions and default settings to allow developers to spend more time coding the unique aspects of their web applications and less time setting up its configuration. 43 | 44 | Programmer Happiness: "There would be no Rails without Ruby, so it's only fitting that the first doctrinal pillar is lifted straight from the core motivation for creating Ruby. Ruby’s original heresy was indeed to place the happiness of the programmer on a pedestal." This principle also known as "The Principle of the Bigger Smile" suggests that the predefined conventions and settings with the Ruby on Rails framework contribute to reduced confusion and decision fatigue among developers during the development phase. This action leads to a notable increase in satisfaction due to a smoother workflow and heightened productivity, symbolized by the metaphorical "bigger smile". 45 | 46 | ### MVC 47 | 48 | Ruby on Rails follows an MVC architectural pattern. Architectural patterns provide a method for distributing responsibilities within an application. **MVC** stands for model, view, and controller. The model is the database layer. The view is the part the user sees. The controller is like the switch board that collects appropriate data from the model and sends it to construct the view. 49 | 50 | ### Process for Creating a Rail Application 51 | 52 | ``` 53 | $ rails new application_name -d postgresql -T 54 | $ cd application_name 55 | $ rails db:create 56 | $ rails server 57 | ``` 58 | 59 | - `rails new application_name`: generates a new directory that includes the entire Rails directory structure with all the necessary code for running our basic application without any additional setup 60 | - `-d postgresql`: replaces the default SQLite database with postgres 61 | - `-T`: excludes adding the default Minitest framework because we will use Rspec 62 | - `rails db:create`: sets up an empty database 63 | - `rails server` or the shortcut `rails s`: starts the Rails application by starting the server 64 | 65 | In a browser navigate to: 66 | `http://localhost:3000` 67 | or 68 | `127.0.0.1:3000` 69 | 70 | ![Rails Boilerplate](./assets/rails-default-view.png) 71 | 72 | --- 73 | 74 | [Back to Syllabus](../README.md#unit-five-intro-to-postgres-and-ruby-on-rails-models) 75 | -------------------------------------------------------------------------------- /rails/restful-routes-crud.md: -------------------------------------------------------------------------------- 1 | # Rails RESTful Routes and CRUD Actions 2 | 3 | #### Overview 4 | 5 | Rails follows a RESTful pattern for interaction between the client and the server. Rails has conventions for accessing and manipulating the information going to and coming from the database of the application. 6 | 7 | #### Learning Objectives 8 | 9 | - can recognize the pattern of RESTful naming conventions 10 | - can recall the HTTP verbs 11 | - can recall the CRUD actions 12 | - can map each HTTP verb to the corresponding CRUD action 13 | 14 | #### Vocabulary 15 | 16 | - RESTful routing 17 | 18 | #### Additional Resources 19 | 20 | - [Rails Routing from the Outside In](https://guides.rubyonrails.org/routing.html) 21 | 22 | --- 23 | 24 | ### RESTful Routes 25 | 26 | REST stands for Representational State Transfer which is a pattern to follow when structuring routes between the server and the client. **RESTful routes** are an attempt to bring the operations that can be applied to an object into HTTP requests. Creating, Reading, Updating, and Deleting will accomplish almost all the tasks needed to do to an object creating a standard language and structure across all of the objects in our application. 27 | 28 | CRUD is an acronym describing the minimal actions necessary for a full stack web application. The RESTful protocol is a pattern followed by developers to implement CRUD operations. Rails _convention over configuration_ gives us strict guidelines for controller methods and routes. 29 | 30 | Examples of routes for a model called `Photo` and a controller called `photos_controller`: 31 | ![rails routes](./assets/rails-routes.png) 32 | 33 | ### Anatomy of a Rails Route 34 | 35 | Rails routes follow two basic structures: 36 | 37 | **Routes Without Params** 38 | 39 | ```ruby 40 | get '/photos' => 'photos#index' 41 | ``` 42 | 43 | - `get` is the http verb 44 | - `/photos` is what is appended to the base url 45 | - `photos` is the name of the controller 46 | - `index` is the name of the controller method 47 | 48 | **Routes With Params** 49 | 50 | ```ruby 51 | delete '/photos/:id' => 'photos#destroy' 52 | ``` 53 | 54 | - `delete` is the http verb 55 | - `/photos/:id` is what is appended to the base url 56 | - `/:id` is the params to be passed to the url 57 | - `photos` is the name of the controller 58 | - `destroy` is the name of the controller method 59 | 60 | ### Rails Controller Methods and RESTful Routes 61 | 62 | #### Index 63 | 64 | - The controller method **index** represents the **R** in CRUD and is the Rails convention for listing all the items in a particular model, or `show all` 65 | - The HTTP verb associated with index is **get** 66 | - The index route is: `get '/resources' => 'resources#index'` 67 | 68 | #### Show 69 | 70 | - The controller method **show** represents the **R** in CRUD and is the Rails convention for listing one item in a particular model, or `show one` 71 | - The HTTP verb associated with index is **get** 72 | - The show route is: `get '/resources/:id' => 'resources#show'` 73 | 74 | #### New 75 | 76 | - The controller method **new** represents a midway point between **C** and **R** in CRUD and is the Rails convention for the route that displays a form to the user 77 | - The HTTP verb associated with new is **get** 78 | - The new route is: `get '/resources/new' => 'resources#new'` 79 | 80 | #### Create 81 | 82 | - The controller method **create** represents the **C** in CRUD and is the Rails convention for adding information to the database 83 | - The HTTP verb associated with create is **post** 84 | - The create route is: `post '/resources' => 'resources#create'` 85 | 86 | #### Update 87 | 88 | - The controller method **update** represents the **U** in CRUD and is the Rails convention for modifying information in the database 89 | - The HTTP verb associated with update is **put/patch** 90 | - The update route is: `put/patch '/resources/:id' => 'resources#update'` 91 | 92 | #### Delete 93 | 94 | - The controller method **destroy** represents the **D** in CRUD and is the Rails convention for removing information from the database 95 | - The HTTP verb associated with delete is **delete** (shocking right?) 96 | - The delete route is: `delete '/resources/:id' => 'resources#destroy'` 97 | 98 | --- 99 | 100 | [Back to Syllabus](../README.md#unit-six-ruby-on-rails) 101 | -------------------------------------------------------------------------------- /react/assets/1-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/1-dice.png -------------------------------------------------------------------------------- /react/assets/2-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/2-dice.png -------------------------------------------------------------------------------- /react/assets/3-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/3-dice.png -------------------------------------------------------------------------------- /react/assets/4-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/4-dice.png -------------------------------------------------------------------------------- /react/assets/5-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/5-dice.png -------------------------------------------------------------------------------- /react/assets/6-dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/6-dice.png -------------------------------------------------------------------------------- /react/assets/counter-boxes-inspect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/counter-boxes-inspect.png -------------------------------------------------------------------------------- /react/assets/counter-boxes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/counter-boxes.png -------------------------------------------------------------------------------- /react/assets/dice-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/dice-game.png -------------------------------------------------------------------------------- /react/assets/lightOff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/lightOff.png -------------------------------------------------------------------------------- /react/assets/lightOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/lightOn.png -------------------------------------------------------------------------------- /react/assets/madlibs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/madlibs.png -------------------------------------------------------------------------------- /react/assets/props-pipeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/props-pipeline.png -------------------------------------------------------------------------------- /react/assets/react-boilerplate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/react-boilerplate.png -------------------------------------------------------------------------------- /react/assets/robot_active_listening.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/robot_active_listening.png -------------------------------------------------------------------------------- /react/assets/switchOff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/switchOff.png -------------------------------------------------------------------------------- /react/assets/switchOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/react/assets/switchOn.png -------------------------------------------------------------------------------- /react/tic-tac-toe.md: -------------------------------------------------------------------------------- 1 | # ❌ ⭕️ Tic Tac Toe 2 | 3 | #### Overview 4 | 5 | Tic Tac Toe is a classic children's game involving two players alternatively marking squares on a three-by-three grid. While the game is be considered relatively simple for humans, creating the logic in code is considerably more challenging. 6 | 7 | #### Learning Objectives 8 | 9 | - can create a logic component to handle the gameplay 10 | - can pass data and behavior from a parent component to a nested component with props 11 | - can effectively work within a team to achieve a desired outcome 12 | 13 | #### Additional Resources 14 | 15 | - [Tic Tac Toe](https://en.wikipedia.org/wiki/Tic-tac-toe) 16 | - [Render](https://render.com/docs/deploy-create-react-app) 17 | 18 | #### Process 19 | 20 | - One person on the team accepts the group assignment from GitHub classroom 21 | - Create a team name (team name can be whatever you would like as long as it is work-appropriate) 22 | - Clone the newly created repository 23 | - `cd` into the repository 24 | - Run $ `yarn` to install the React dependencies 25 | - Create a new branch following the naming instructions described below 26 | - Open the repository in a text editor 27 | - Code! 28 | 29 | #### Useful Commands 30 | 31 | - $ `yarn start` 32 | - control + c (stops the server) 33 | - command + t (opens a new terminal tab) 34 | 35 | #### Troubleshooting Tips 36 | 37 | - Is your server running? 38 | - Are your components exported? 39 | - Inspect the page and look for errors in the console tab. 40 | - Always look at the first error message in the list. 41 | 42 | --- 43 | 44 | ### Tic Tac Toe 45 | 46 | This is a web game for two players who are taking turns on one device. You will have to use the component state to keep track of whose turn it is and which squares have been marked by each player. This project will challenge your knowledge of React as well as be an exercise in creating good user experiences. 47 | 48 | When creating a project, it is important to think about the organization of your code. It is best practice to separate and compartmentalize all the actions in your code. The square UI will be in its own component. `App.js` controls all of the data in state, renders the other components, and performs the game logic. 49 | 50 | ### Win Condition 51 | 52 | The win condition is one of the most challenging aspects of coding Tic Tac Toe. Take some time with your team to discuss the different possibilities. Defining the logic by writing it out in regular English words can be helpful. 53 | 54 | There is an interesting approach to the [Tic Tac Toe win condition in React](https://forum.freecodecamp.org/t/need-help-understanding-react-tic-tac-toe-winner-function/137840) here. However, this code should NOT be used as is. It must be refactored. The tools used in this example are not current best practices in React. It is provided here as inspiration. 55 | 56 | --- 57 | 58 | ### 📚 User Stories 59 | 60 | **Story 1**: In order to play tic tac toe, as the user of the application, I should see a three-by-three grid board game with squares that can be clicked alternatively by two players: player X and player O. Once a square is marked it cannot be marked again. 61 | 62 | **Branch**: game-structure 63 | 64 | **Acceptance Criteria** 65 | 66 | - Can see a three-by-three grid game board 67 | - Player one can click on a square to mark it with an X 68 | - Player two can click on a square to mark it with an O 69 | - Players cannot click on a square that has already been marked 70 | 71 | **Story 2**: In order to play tic tac toe, as the user of the application, I should be able to win the game by marking three squares with the same mark in a horizontal, vertical, or diagonal row. I can restart the game at any time. 72 | 73 | **Branch**: win-lose 74 | 75 | **Acceptance Criteria** 76 | 77 | - Can see a notice displaying which player won 78 | - Game play cannot continue after the game has been won 79 | - Can click on a restart button that will clear the game board 80 | 81 | **Story 3**: In order to play tic tac toe, as the user of the application, I should not be able to continue playing the game if all the squares are marked. If neither player wins and all the squares are marked, I should see a notification for a "cats game." 82 | 83 | **Branch**: cats-game 84 | 85 | **Acceptance Criteria** 86 | 87 | - Game play cannot continue after all squares have been marked 88 | - Can see a notice displaying that this is a "cats game" 89 | 90 | ### 🏔 Stretch Goals 91 | 92 | - As a user, I can see pleasant stylings on the application. 93 | - As a user, I can see a notification that informs me whether it is currently my partner or my turn. 94 | - As a user, I can choose my marker from a predetermined list (X, O, a color, an emoji, etc...). 95 | 96 | ### 👩‍💻 Developer Stretch Goals 97 | 98 | - As a developer, I have a well-commented application. 99 | - As a developer, I have a well-written README file with instructions on accessing my repository. 100 | - As a developer, my variables are all named semantically. 101 | - As a developer, I have refactored and efficient code. 102 | - As a developer, I have my application [deployed as a live website](https://render.com/docs/deploy-create-react-app). 103 | 104 | ### 🎙 Project Demos 105 | 106 | Each team will give a brief (three minute) presentation of their application. Presenting your project will allow you to practice communication and coding vocabulary. Presentations are not a judgement of your work or ability as each team will have different weaknesses and strengths. Presentations allow other members of the cohort to appreciate a different approach to solving a complex problem. 107 | 108 | - Full team: show off your application's user interface (UI) 109 | - First team member: What was the biggest learning moment for your team? 110 | - Second team member: What was the most challenging thing about this project? 111 | - Third team member (if applicable): How did you manage the workflow in a group of three? 112 | -------------------------------------------------------------------------------- /react/treasure-hunt.md: -------------------------------------------------------------------------------- 1 | # 💰 React Treasure Hunt Game 2 | 3 | #### Overview 4 | 5 | Treasure Hunt is the first project that students create at LEARN. During Jumpstart, treasure hunt is done with HTML, CSS, and JavaScript. While this is a perfectly acceptable tech stack, using React allows for more advanced and dynamic code structures. 6 | 7 | As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game. 8 | 9 | #### Learning Objectives 10 | 11 | - can create a logic component to handle the game play 12 | - can pass data and behavior from a container component to a nested component with props 13 | - can break down a complex problem to create a desired outcome 14 | 15 | #### Additional Resources 16 | 17 | - [Render](https://render.com/docs/deploy-create-react-app) 18 | 19 | #### Process 20 | 21 | - One person on the team accepts the group assignment from GitHub classroom 22 | - Create a team name (team name can be whatever you would like as long as it is work-appropriate) 23 | - Clone the newly created repository 24 | - `cd` into the repository 25 | - Run $ `yarn` to install the React dependencies 26 | - Create a new branch following the naming instructions described below 27 | - Open the repository in a text editor 28 | - Code! 29 | 30 | #### Useful Commands 31 | 32 | - $ `yarn start` 33 | - control + c (stops the server) 34 | - command + t (opens a new terminal tab) 35 | 36 | #### Troubleshooting Tips 37 | 38 | - Did you run $ `yarn` in the new repository? 39 | - Is your server running? 40 | - Are your components exported? 41 | - Inspect the page and look for errors in the console tab. 42 | - Always look at the first error message in the list. 43 | 44 | --- 45 | 46 | ### 💰 React Treasure Hunt Challenge 47 | 48 | As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game, and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game. 49 | 50 | ### 📚 User Stories 51 | 52 | **Story 1**: In order to play the treasure hunt game, as the user of the application, I should see a three-by-three board game with a question mark in each square that can be clicked. 53 | 54 | **Branch**: game-structure 55 | 56 | **Acceptance Criteria** 57 | 58 | - Can see a page with a three-by-three grid board game 59 | - Can see a question mark in each square 60 | - Can click on any of the question marks and see an alert with the index position of that question mark in the array 61 | - Can click on any of the question marks and a tree emoji appears instead of the alert 62 | 63 | **Story 2**: In order to play the treasure hunt game, as the user of the application, I should be able to see a winning square and a losing square. 64 | 65 | **Branch**: win-lose 66 | 67 | **Acceptance Criteria** 68 | 69 | - Can select the random winning square and the question mark will become a treasure emoji 70 | - Can select the random losing square and the question mark will become a bomb emoji 71 | 72 | **Story 3**: In order to play the treasure hunt game, as the user of the application, I should be able to restart the game at any time. 73 | 74 | **Branch**: restart 75 | 76 | - Can see a button called “Play Again” 77 | - Can click on the “Play Again” button to reset the board game 78 | 79 | **Story 4**: In order to play the treasure hunt game, as the user of the application, I should see a counter that starts at five and decrements by one every time I click on a square that is neither the treasure nor the bomb. 80 | 81 | **Branch**: counter 82 | 83 | **Acceptance Criteria** 84 | 85 | - Can see a counter that starts at five 86 | - Can see the counter decrement by one for each guess 87 | 88 | **Story 5**: In order to play the treasure hunt game, as the user of the application, I should be notified when I win the game or when I lose the game and not be able to keep playing. 89 | 90 | **Branch**: end-of-game 91 | 92 | - Can see a message stating that I won the game after selecting the square that contains the treasure 93 | - Can see a message stating that I won the game after selecting the square that contains the bomb 94 | - Can see a message stating that I won the game after the counter reaches zero 95 | - Cannot continue the game play once the game has been won or lost 96 | 97 | ### 🏔 Stretch Challenges 98 | 99 | - Consider how to handle a situation where the bomb and the treasure are at the same index. 100 | 101 | ### 👩‍💻 Developer Stretch Goals 102 | 103 | - As a developer, I have a well commented application. 104 | - As a developer, I have well written README file with instructions on how to access my repository. 105 | - As a developer, my variables are all named semantically. 106 | - As a developer, I have refactored and efficient code. 107 | - As a developer, I have my application [deployed as a live website](https://render.com/docs/deploy-create-react-app). 108 | -------------------------------------------------------------------------------- /ruby/textbased-game.md: -------------------------------------------------------------------------------- 1 | # 👾 Text-Based Game Challenge 2 | 3 | #### Overview 4 | 5 | Text-based games, or interactive fiction games, are one of the earliest styles of computer games. Text-based games create a narrative where the user is presented with a series of choices. Each decision the user makes moves the game forward in a unique way. Creating a text-based game requires a developer to create organized code that will trigger further code actions in response to the user's decision. 6 | 7 | #### Learning Objectives 8 | 9 | - can demonstrate effectively collecting user interactions from the IRB console 10 | - can determine appropriate built-in Ruby methods needed to accomplish a task 11 | 12 | #### Additional Resources 13 | 14 | - Checkout [Playfic](http://playfic.com/explore/popular) for inspiration 15 | - [ASCII Art](https://www.asciiart.eu/) can add some flair to your text 16 | - [Output one character at a time](https://stackoverflow.com/questions/4515157/read-a-ruby-string-one-character-at-a-time-for-word-wrapping) 17 | 18 | #### Process 19 | 20 | - clone the appropriate repository from GitHub classroom 21 | - `cd` into the repository 22 | - Create a new branch for each feature you implement 23 | - Open the folder in a text editor 24 | - Code! 25 | 26 | --- 27 | 28 | ### 🤔 Planning 29 | 30 | The most important part of this project is the planning phase. Work with your team to construct a storyline. Think of an idea that will make your game enjoyable. Common choices are treasure hunts, day-in-the-life stories, zombie apocalypse adventures, and murder mysteries. 31 | 32 | You need to decide how your user will interact with your code. Every option you present will need to be followed with an action. If you choose to create multiple storylines your code base will need to reflect all the possible actions. Each storyline can be a unique adventure in which some are successful and others are not. 33 | 34 | ### 🎮 Game Play 35 | 36 | The game will take place entirely in the terminal. All interactions between the user and the game are text-based. The user will see a story printed in the terminal and then be presented with options that will determine the story's next phase. The user will type their selection into the terminal. 37 | 38 | ### ➕ Tips and Tricks 39 | 40 | Think about how the user will contribute to the game. Whatever the user does will need to trigger the next step. This means as the game creator you must present your options in an easily accessible way. Options include presenting the user with yes or no choices, giving the user a numbered list of options, or prompting the user to type specific words. Keep in mind that the casing and spacing of your user's response will affect the functionality of your code. 41 | 42 | The Ruby `gets` operator is your best friend in this game. Calling the method `.chomp` on the `gets` operator will remove the `return` keystroke syntax. The `gets` operator will always return a string. It is the developer's responsibility to change the data type if necessary. 43 | 44 | Think about the difference between `p` and `puts`. Using `p` in development is helpful for seeing raw data outputs in the terminal. But you may not want code syntax such as quotation marks in your text-based stories. 45 | 46 | Keep your code simple. You have all the tools you need to effectively construct the game. This is an exercise in organization, planning, and creativity. 47 | 48 | Have fun! This medium is prime for easter eggs and (class appropriate) inside jokes. 49 | 50 | ### 🎙 Project Demos 51 | 52 | Each team will give a brief (five minute) presentation of their application. Presenting your project will allow you to practice communication and coding vocabulary. Presentations are not a judgement of your work or ability as each team will have different weaknesses and strengths. Presentations allow other members of the cohort to appreciate a different approach to solving a complex problem. 53 | 54 | - Full team: show off your game and run through a couple of scenarios. 55 | - First team member: What was your team's planning process? 56 | - Second team member: Show us one built in Ruby method your team used and explain what it is doing. 57 | - Third team member: What did your team get stuck on and how did you overcome this challenge? 58 | 59 | --- 60 | 61 | [Back to Syllabus](../README.md#unit-four-ruby) 62 | -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_breakpoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_breakpoint.png -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_byebug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_byebug.png -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_consolelog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_consolelog.png -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_debugger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_debugger.png -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_debugger_inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_debugger_inline.png -------------------------------------------------------------------------------- /tools-and-resources/assets/debugging_pry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LEARNAcademy/syllabus/146e4bb32b8ef601a26b0917570bb3ab40bc1545/tools-and-resources/assets/debugging_pry.png -------------------------------------------------------------------------------- /tools-and-resources/attendance.md: -------------------------------------------------------------------------------- 1 | # Attendance Policy 2 | 3 | We expect you to attend class in full, every day. With only four months together, we have a lot of ground to cover. Every day of class is important. In order to ensure a student gains the necessary knowledge and skills from the LEARN program, we require students to be present in class every day with no more than five (5) absences. 4 | 5 | Missing three or more hours of class will be logged as an absence. Missing any amount of class is considered a tardy. Three tardies will accumulate to be assessed as one absence. 6 | 7 | We understand that life happens and you may have situations outside of your control that result in planned or unexpected absences during the course. Before missing any amount of class, please consider the following: 8 | - Topics we cover in class build on each other. Any missed time may have negative repercussions for future lessons. The onus is on you to ensure you make up any material missed in class. The catch-up material should be seen by an instructor. 9 | - We collaborate every single day in class, either by pair programming or in larger groups. Be conscientious towards your classmates by considering the impact on their learning if you are not in class. 10 | - LEARN Academy students must be located in the United States while enrolled in our full-time program. Any student who leaves the country at any stage of their admission to LEARN Academy is required to notify LEARN Academy staff two weeks before departure. LEARN Academy reserves the right to remove students from the cohort if the departure was not communicated or approved. Each case is handled on an individual basis. 11 | 12 | ### Your Responsibilities 13 | 14 | Any time you are absent from class, it is required that you post in your cohort Slack channel informing the class and instruction team of your absence. 15 | 16 | Planned Absences: 17 | Planned time away from class such as appointments or travel must be communicated to an instructor as soon as possible so arrangements can be made. Giving the instruction team ample notice will allow plans to be made to mitigate the impact of your absence for you and your cohort mates. Less than 24 hours advance notice for planned absences is unacceptable. 18 | 19 | Unplanned Absences: 20 | If you are unable to attend class at short notice (due to illness, internet issues, etc.), you must inform an instructor as soon as possible. We recommend installing the Slack application on your phone for quick communication. 21 | 22 | Tardiness: 23 | Class begins promptly. You should not be late. “Prompt arrival” also includes returning back to class on time from scheduled breaks. Any time away from regularly scheduled class time is considered a tardy. 24 | 25 | ### Consequences 26 | 27 | LEARN Academy reserves the right to remove a student from the program if the student is not meeting program requirements. The student is responsible for understanding the requirements, asking questions if unsure, and holding themselves accountable for meeting all requirements. 28 | 29 | LEARN Academy does not measure “excused” absences or “unexcused” absences. All absences are counted towards the maximum (5) allotted absences for each student. Any absences or missed class time that is not communicated will put the student at risk for removal from the program. 30 | 31 | ### Red Flags 32 | 33 | Everyone at LEARN wants you to be successful. To this end, we will proactively communicate with you about your progress in class. We do our due diligence to watch for “red flags” and inform you if we feel you are in danger of not meeting program requirements. We will work with you to the best of our capabilities to help you meet the requirements. 34 | 35 | A LEARN staff member will reach out if you 36 | - reach three absences, and/or the equivalent accumulated tardies. 37 | - are consistently late, leaving early, or missing class. 38 | - are not present in Zoom, distracted, unengaged, or consistently turning off your camera. 39 | - are not participating in the activities outlined by the program requirements. 40 | - any other action or behavior we deem as a “red flag.” 41 | 42 | Our goal at LEARN is to help people successfully transition into a career in the tech industry. We recognize the challenging nature of this program and will work hard to help you acquire all the necessary skills and knowledge. We will communicate proactively with you and expect you to do the same. 43 | 44 | --- 45 | 46 | [Back to Syllabus](../README.md) 47 | -------------------------------------------------------------------------------- /tools-and-resources/einsteins-puzzle.md: -------------------------------------------------------------------------------- 1 | ## Einstein's Puzzle 2 | Variations of this riddle appear on the net from time to time. It is sometimes attributed to Albert Einstein and it is claimed that 98% of the people are incapable of solving it. Some commentators suggest that Einstein created such puzzles not to test out intelligence but to get rid of all the students who wanted him as an advisor. It is not likely that there is any truth to these stories. Wherever this comes from, it is a nice riddle. 3 | 4 | Let us assume that there are five houses of different colors next to each other on the same road. In each house lives a person of a different nationality. Every person has a favorite drink, a favorite brand of cigarettes, and keeps pets of a particular kind. 5 | 6 | * The English person lives in the red house. 7 | * The Swede keeps dogs. 8 | * The Dane drinks tea. 9 | * The green house is just to the left of the white one. 10 | * The owner of the green house drinks coffee. 11 | * The Pall Mall smoker keeps birds. 12 | * The owner of the yellow house smokes Dunhills. 13 | * The person in the center house drinks milk. 14 | * The Norwegian lives in the first house. 15 | * The Blend smoker has a neighbor who keeps cats. 16 | * The person who smokes Blue Masters drinks bier. 17 | * The person who keeps horses lives next to the Dunhill smoker. 18 | * The German smokes Prince. 19 | * The Norwegian lives next to the blue house. 20 | * The Blend smoker has a neighbor who drinks water. 21 | 22 | 23 | The question to be answered is: Who keeps fish? 24 | -------------------------------------------------------------------------------- /tools-and-resources/interview-questions.md: -------------------------------------------------------------------------------- 1 | # Standard Interview Questions 2 | 3 | ### Experience 4 | 5 | - How did you get into software development, and what about the field was most interesting to you? 6 | - What is your experience with the role of Software Engineer? 7 | - What project is your most significant career accomplishment? 8 | - Name a professional experience you would never want to go through again. 9 | - What's the most significant decision you made in the past year? 10 | - Tell me about an assignment that was too difficult. How did you handle the situation? 11 | 12 | ### Ambitions 13 | 14 | - What are you looking for in your next position? 15 | - What are your career goals? 16 | - What motivates you? 17 | - Who do you admire, follow, and are inspired by in the industry? 18 | - Would you still code if AI can do the job for you? 19 | - Tell me about a time you set a challenging goal for yourself and how you accomplished it. 20 | - Talk to me about a period in your life when you had to conquer a significant limitation that stood in the way of you accomplishing a goal. 21 | - How are you going to continue to develop your professional skills and knowledge? 22 | - Is it better to have a job done perfectly, albeit late, or merely good but on time? 23 | - What's something you'd be ecstatic about doing every day for the rest of your professional career? 24 | - If I gave you $100,000 to build your own business, what would you do? 25 | 26 | ### Work Process & Approach 27 | 28 | - What are your favorite tools/processes to ensure the success of a project? 29 | - What are the 3 most important skills of a Software Engineer? 30 | - There will always be unexpected changes that need to happen in a project. How do you handle these surprises? 31 | - How do you handle change within the workplace? Can you give an example? 32 | 33 | ### About the Candidate 34 | 35 | - Tell me about yourself. 36 | - What’s your area of strength? 37 | - How do you celebrate success? 38 | - How do you handle failure? 39 | - What would your last team say is your best quality? 40 | - What’s your area of growth? 41 | - Describe the work environment that will help you to contribute most effectively. 42 | - What are the three most important attributes you’ll bring to our company? 43 | - Tell me about a time you felt like a miserable failure. 44 | - What are some apps or websites that you love? 45 | 46 | ### Teamwork 47 | 48 | - Do you consider yourself a team player? 49 | - How will you add value to our team? Give us an example of a time in the past that you added value to a work project. 50 | - Have you ever been in a situation where a team member was not pulling their weight? How did you go about resolving this issue? 51 | - How would you motivate your disengaged co-worker? 52 | - What would you do if your co-worker was visibly upset? 53 | - If you caught a co-worker stealing from work, would you say anything? 54 | - What is your definition of great culture in a work environment? Give us an example of a company that has great culture. 55 | - We don’t always see eye-to-eye with our managers. How do you handle disagreements with them? 56 | - What kind of management style do you prefer in your managers? 57 | - What do you expect from your team to do your job to the best of your ability? 58 | - Name the most important lesson you’ve learned from working with an office team. 59 | - How would you handle a conflict with a coworker without addressing your supervisor? 60 | - What are your ideal traits of a coworker? 61 | - What words would you use to describe the ideal employee? 62 | - How would you rate your teamwork skills? 63 | - How would you describe your role within a team environment? 64 | - Do you prefer to work alone or with a team? 65 | 66 | ### Communication 67 | 68 | - How would you describe your communication style? 69 | - What is your biggest challenge when it comes to communicating? 70 | - Is there a communication style you don’t respond well to? 71 | - In five minutes, can you explain something to me that you know well? 72 | - What do you think are the most important aspects of communication? 73 | 74 | ### Leadership 75 | 76 | - Provide an example of a time you stepped up as the leader of your team. 77 | - Provide an example of a time your perspective changed the outcome of a project in a positive way. 78 | - What kind of oversight would your ideal boss provide? 79 | 80 | ### Ideation and Quick Thinking 81 | 82 | - What do you wish I’d had asked you about today? 83 | - If you could choose one superhuman ability, what would it be? 84 | - What TV or movie character would you most like to have lunch with? 85 | - If you were stuck forever on a deserted island and had all the food, water, and shelter you needed, what three personal items would you bring? 86 | - Which literary character did you always dream of being? 87 | - If you could visit any country on the planet, where would you go and why? 88 | - Name ten uses for a stapler (other than its intended use). 89 | - Do you think zombies should be slow or fast? Why? 90 | 91 | ### Time Management 92 | 93 | - Can you think about a time when your coworker asked you to help them while you were busy? What was your response? 94 | - What would you do if you encountered a problem that you could not solve on your own? 95 | - What do you do to stay on task during the workday? 96 | -------------------------------------------------------------------------------- /tools-and-resources/linking-html-javascript.md: -------------------------------------------------------------------------------- 1 | # Connecting HTML and JavaScript 2 | 3 | ### Create an HTML page that takes a user's name and returns "Welcome, !" 4 | 5 | #### Document Object Model (DOM) 6 | 7 | When a web page is loaded, the browser creates a Document Object Model of the page. The DOM can be manipulated with Javascript after the page has been loaded. 8 | 9 | #### DOM Manipulation 10 | 11 | The document is the actual page loaded into the window, and is represented in JavaScript by the Document object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, change its text content, apply new styles to it, etc. 12 | 13 | #### Create an HTML page 14 | 15 | - Create the boilerplate DOCTYPE 16 | - Add a form 17 | - Add a button 18 | - Add a place for the output to display 19 | 20 | #### Create a JavaScript file 21 | 22 | - Create a function called greeter 23 | 24 | #### Linking the JS to HTML 25 | 26 | - Getting the HTML property (getElementBy....Id, Class, TagName, etc) 27 | 28 | ```javascript 29 | document.getElementById("idHere").value 30 | document.getElementById("idHere").innerHTML 31 | ``` 32 | 33 | - DOM events - onclick, onmouseup, onmousedown, many more 34 | - Add the script tag to HTML body to import the JS file 35 | 36 | ```HTML 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |

    My greeter page

    45 | 46 | 47 |

    48 | 49 | 50 | 51 | ``` 52 | 53 | ```javascript 54 | const greeter = () => { 55 | let userName = document.getElementById("user-input").value 56 | document.getElementById("output").innerHTML = `Welcome, ${userName}!` 57 | } 58 | ``` 59 | -------------------------------------------------------------------------------- /tools-and-resources/pair-programming.md: -------------------------------------------------------------------------------- 1 | # Pair Programming 2 | 3 | An important part of being successful in a remote dev team is effective pair programming. 4 | 5 | ### Why We Utilize Pair Programming 6 | - Different people have different knowledge and strengths which can lead to better solutions 7 | - Distributing cognitive load and use individualized skills (typing syntax vs. problem solving) when driving and navigating 8 | - Coding can feel overwhelming, so focusing on one aspect of the job at hand can help focus energy on problem solving 9 | - Two sets of eyes makes it easier to catch mistakes and produce high-quality code 10 | - A pair can hold each other accountable so you'll be less likely to be tempted to take shortcuts or jump around without finishing the task you are on 11 | - Partners help keep the focus on coding and not on distractions like texts, emails, etc 12 | - Talking about your code with a partner will deepen your understanding of programming 13 | - Increased specialization requires more collaboration 14 | 15 | #### Roles: Driver and Navigator 16 | The **driver** is the one with their hands on the keyboard. They are responsible for entering information and following the instructions given by the **navigator**. This approach requires constant communication. And talking about your code will make you a better developer and a better teammate. It is important to switch roles every 10-20 minutes and take frequent breaks. 17 | 18 | #### Step 1: Getting Your Pair 19 | Pairs or mobs will be determined by instructors. 20 | 21 | #### Step 2: Planning 22 | Once in the breakout room, take a few minutes to read through the necessary material. Make sure everyone on the team understands the full objective of the challenge. Discuss the technologies needed to accomplish the goal at hand. If the project has a larger scope, utilize wireframes in your planning session. 23 | 24 | #### Step 3: Technology Set Up 25 | After your team has decided on the technology to be used, select who will be the first driver and who will be the first navigator. With the navigators direction, the driver will share his/her screen and begin to code. 26 | 27 | --- 28 | [Back to Syllabus](../README.md#github) 29 | -------------------------------------------------------------------------------- /tools-and-resources/reestablishing-expectations.md: -------------------------------------------------------------------------------- 1 | # Reestablishing Expectations 2 | 3 | Professional development week marks the midpoint in a cohort at LEARN. Prior to PD week, most of the topics have a singular focus as we learn the building blocks of development. After PD week, we put the fundamentals together into a series of full-stack applications. 4 | 5 | ### Project Based Learning 6 | 7 | When working on smaller challenges the errors can be spotted more quickly since there is less code to sort through. A larger app will inherently have more complex errors. More complex errors will require more in depth bug fixing tools and more time to narrow down the problem. This will require patience from all parties involved, including patience with yourself. 8 | 9 | When working on projects there is more room for developer creativity. This is where the really fun aspects of development come into play. However, every app will have requirements that need to be met and workflows that need to be followed. A good developer will exercise attention to detail in not just creating code but how the code is being created as well as the overall health of the team. 10 | 11 | ### Troubleshooting 12 | 13 | When faced with a problem there are a series of troubleshooting steps that should be completed. The first step is to take a five minute break and come back with fresh eyes. 14 | 15 | Next, look for the low hanging fruit. Always, always, double check spelling and syntax. Typos are very common errors. Use the built in functionality of the text editor to make sure all the tags, parentheses, and curly braces have their buddy. Writing clean, well organized code will produce fewer errors. 16 | 17 | Next, read the error messages! Errors are a great way to learn about the code. Error messages will often contain the file and the line where the error occurred. Make sure the problem you think you have is actually the problem you have. 18 | 19 | When making changes only change one thing at a time, test it, then make one more change, then test. Don't break working code during the troubleshooting process. 20 | 21 | ### Asking Technical Questions 22 | 23 | The job of a developer is to work through problems that you don't know how to solve. Naturally, this means that you will often find yourself stuck. Being stuck can be either not knowing how to solve a current problem or it can be not understanding the problem well enough to start solving. Both of these situations are valid and require external help. 24 | 25 | First you must determine that you are, in fact, stuck. Being stuck means that you have tried to used various troubleshooting methods to solve the problem and you have not made any progress in 30 minutes. At this point you should ask a question. 26 | 27 | There are three parts to this process: 28 | 29 | 1. The asking prep. 30 | 2. The question itself. 31 | 3. The aftermath. 32 | 33 | #### The Asking Prep 34 | 35 | Once you have determined you are stuck, the next step is to start formulating the question. 36 | 37 | Talk though your problem out loud. Whether you are alone or with a pair programmer, take a minute and verbalize your problem. 38 | 39 | Organize your documentation and resources. Take screenshots of your error messages with as much context as possible. 40 | 41 | #### Asking the Question 42 | 43 | - Start by summarizing the problem. Include the given input and expected output as well as the actual current output. 44 | - Give a brief overview of the approach to the problem so far. 45 | - Provide error message screenshots. 46 | - Finish with a specific ask. 47 | 48 | If the blocker is understanding the problem, be sure and state that clearly in the ask. 49 | 50 | #### The Aftermath 51 | 52 | So you asked the question and you got an answer. It's not over. If you don't learn form the experience then you didn't finish the job. Write down the question you asked and the answer. Creating your own personal documentation is really important to being a successful developer. 53 | 54 | ### Code of Conduct 55 | 56 | The second half of the cohort can bring a lot of stress. It is important to revisit and embrace the brave space philosophy. 57 | 58 | 1. Welcome multiple view points. 59 | 60 | In programming there are always multiple ways to approach a problem and multiple solutions. Be open to learning and be open to being wrong. 61 | 62 | 2. Own your intentions and your impacts. 63 | 64 | Your words and behaviors have an impact on others. You are responsible for the effect of your words and behaviors. 65 | 66 | 3. Work to recognize your privileges. 67 | 68 | We are all working from a place of privilege to be in this classroom, but don't make assumptions about other's privileges. 69 | 70 | 4. Take risks. 71 | 72 | You can't grow if you stay in your comfort zone. Implementations and ideas don't have to be perfect to be effective. 73 | 74 | 5. Step back. 75 | 76 | Recognize how much you are speaking compared to others. If you are comfortable speaking, great, but make sure you are giving others space to contribute. 77 | 78 | 6. Notice and name group dynamics in the moment. 79 | 80 | Pay attention to the energy in the room. If there is a disconnect, take a time out and address the issue. 81 | 82 | 7. Actively listen. 83 | 84 | When someone is speaking make sure you are listening and not just thinking about what you are going to say next. 85 | 86 | 8. Challenge with care. 87 | 88 | If something doesn't feel right, let's talk about it! Always assume positive intent first. Then challenge with care. 89 | 90 | 9. Confidentiality. 91 | 92 | Focus on the problem not the person. 93 | 94 | 10. Break it down. 95 | 96 | Miscommunications can arise from misunderstanding the problem. Provide context and share all relevant information in simple language. 97 | 98 | Being a successful developer requires being a good teammate. Being a good teammate requires checking your ego and putting your energy into the success of the team. 99 | 100 | --- 101 | 102 | [Back to Syllabus](../README.md#resources) 103 | -------------------------------------------------------------------------------- /tools-and-resources/terminal.md: -------------------------------------------------------------------------------- 1 | # Terminal 2 | 3 | #### Overview 4 | 5 | Terminal is a Mac application that allows developers to communicate directly with the Mac operating system. The terminal gives developers quick access to all the files and directories on the computer as well as commands to run processes and troubleshoot issues. 6 | 7 | #### Learning Objectives 8 | 9 | - can access the terminal application on Mac 10 | - can use terminal commands to navigate into directories on Mac 11 | - can use terminal commands to show the current directory on Mac 12 | - can use terminal commands to show the content of the current directory on Mac 13 | - can use terminal commands to open the current directory in a text editor on Mac 14 | 15 | #### Vocabulary 16 | 17 | - terminal 18 | - graphical user interface (GUI) 19 | - command line interface (CLI) 20 | - root directory 21 | 22 | #### Additional Resources 23 | 24 | - [Mac Terminal User Guide](https://support.apple.com/guide/terminal/welcome/mac) 25 | - [Oh My ZSH](https://ohmyz.sh/) 26 | - [Customizing Terminal](https://medium.com/@charlesdobson/how-to-customize-your-macos-terminal-7cce5823006e) 27 | 28 | --- 29 | 30 | ### Terminal 31 | 32 | The **terminal** is a Mac-specific application that allows developers to make text-based commands to the Mac operating system. Much of our daily interaction with our computers is done through the **graphical user interface** (GUI) such as viewing windows, clicking on icons and buttons, or using drag and drop. The development of GUIs is what made computers usable for the general population and launched the popularity of the personal computer. However, the terminal offers a **command line interface (CLI)** which allows developers to give commands directly to the computer. This provides more control over the programs and additional access to built-in functionality. Certain aspects of coding cannot be properly executed through the GUI, such as `git` commands and version managers. Plus, it looks super cool and hackery. It is sure to impress your friends and family! 33 | 34 | Using the terminal can be empowering, but proceed carefully! Always ensure you understand what a command does before executing it. 35 | 36 | ### Accessing Terminal 37 | 38 | The terminal application is saved in the doc of your Mac. Additionally, the terminal can be accessed through the Mac spotlight search. Access spotlight search with the keys `command` + `spacebar` and type `terminal`. 39 | 40 | ### Navigating in Terminal 41 | 42 | Everything on a computer such as files, directories, and applications, is organized like a tree. Each level offers additional branches to navigate. The base of the tree is the root directory. The **root directory** is the starting point from which all other directories and files stem. 43 | 44 | When the terminal app is initially opened, it will start at the root directory. From there you can change directories into move about your computer. 45 | 46 | ### Principle Terminal Commands 47 | 48 | - `pwd` - present working directory; displays the full path to the directory you are currently in 49 | - `ls` - list; displays the content of the current directory 50 | - `cd` - change directory; append this command with the name of a directory to where you want to go (example: `cd Desktop`) 51 | - `cd ..` - change directory; move one direction toward the root (one level back) 52 | - `touch` - append this command with the name of a file you wish to create (example: `touch index.html`) 53 | - `code .` - opens all the files in the current directory in Visual Studio Code 54 | 55 | ### Additional Terminal Commands 56 | 57 | - `mkdir` - make directory; append this command with the name of a new directory you wish to create (example: `mkdir project-folder`) 58 | - `rmdir` - remove directory; append this command with the name of the directory you wish to delete (example: `rmdir project-folder`) 59 | - `open` - append the command with a file name to open just one file (example: `open index.html`) 60 | - `open .` - opens all the content of the present directory 61 | - `;` - allows multiple commands in sequence (example: `mkdir project-folder; touch index.html`) 62 | - `history` - displays a list of all recently used commands 63 | - `clear` - clears the terminal screen 64 | 65 | ### Tips and Shortcuts 66 | 67 | - `tab` - autocomplete the directory or file name 68 | - `command` + `+` or `-` - increase or decrease the font size 69 | - `command` + `t` - opens a new tab in the terminal 70 | - `command` + `k` - clears the terminal 71 | - `command` + `d` - split the pane to view two terminal windows 72 | - `up arrow` or `down arrow` - prints the last command entered; use the up/down arrows to scroll through your command history 73 | - `option` + `right arrow` - navigates right by each full string of text on the command line 74 | - `option` + `left arrow` - navigates left by each full string of text on the command line 75 | - `control` + `u` - clears the current command line 76 | 77 | ### Oh My ZSH 78 | 79 | There are software programs that can added to your terminal that will add a bit of flare and functionality to your terminal. One we like at LEARN is called Oh My ZSH. To install Oh My ZSH follow the instructions on [their website](https://ohmyz.sh/#install). 80 | 81 | ### Customizing Terminal 82 | 83 | Terminal's default colors and fonts can be modified as well. Select `Terminal` > `Settings` > `+ Add Profile` and customize! 84 | 85 | --- 86 | 87 | ### 💻 Challenges 88 | 89 | - Open the terminal application 90 | - Quit the terminal application and reopen 91 | - Find out what directory you are in 92 | - List out all directories available 93 | - Navigate to the desktop directory 94 | - Create a new directory called `first-directory` and navigate into the newly created directory 95 | - Open the `first-directory` directory in a text editor 96 | - Go back to the desktop directory 97 | - Show all the past commands you have used 98 | - Clear the terminal window 99 | - Repeat a previous command without retyping it 100 | - Increase the terminal text size 101 | - Use tab to autocomplete a directory name 102 | 103 | ### 🏔 Stretch Goals 104 | 105 | - Change the color and fonts in your terminal 106 | - Move the cursor to the beginning of the text 107 | 108 | --- 109 | 110 | [Back to Syllabus](../README.md#programming-tools) 111 | -------------------------------------------------------------------------------- /tools-and-resources/whiteboarding-steps.md: -------------------------------------------------------------------------------- 1 | # White Boarding Steps 2 | 3 | White-boarding is daunting and having steps to follow are helpful to accomplish the main goal: **to ensure you're always on the same page as the interviewer**. 4 | 5 | There are a variety of white-boarding formats. This guide is more for the kind of format that involves being given a prompt with the expectation of developing pseudocode. How much time you spend on each step will depend on how much time you're given over all so *be time-conscious*. 6 | 7 | For example, if the white-boarding session is only 30 minutes, spend 3-5 minutes in steps 1 & 2 (don't skip them!) and allow yourself 15-20 minutes for steps 3 & 4. And the remaining time, leave room for steps 5 & 6. If you're experiencing a lot of difficulty with the problem, check in the last five minutes to see how the interviewer(s) would like to handle the remaining time. 8 | 9 | #### How to use this guide: 10 | - **Do not skip steps.** **Especially the first two steps.** These steps are structured in a way that will best allow you to create dialogue with your interviewer(s). 11 | - **Hidden Goals** are the real *thing* you should really be striving for. It's possible to not be able to solve the problem but if the hidden goal is achieved, both you and the interviewer should have a decent understanding of what it's like to work together. 12 | 13 | ### Step 1: Verify constraints/requirements 14 | This is where you ask questions about what inputs and outputs of your function should look like. 15 | 16 | For example: 17 | For inputs, if the prompt involves being given an array of values, some questions you can ask are: 18 | - Will all the items in the array be unique? 19 | - Will all the values always be of the same data type? 20 | - (Array of numbers) Will all the values be positive? 21 | 22 | For outputs: 23 | - Will there always be a "proper" outcome? 24 | - If not, what would the interviewer like to have returned? 25 | 26 | #### Hidden Goal: Demonstrate that you're trying to identify edge cases but more importantly, that you're not afraid to ask questions! 27 | 28 | ### Step 2: Write tests to verify the expected outcomes 29 | This is where you put in writing what some expected outcomes should be. 30 | 31 | - It can be as simple as writing a conditional to check for the best case scenario: 32 | `someFunction([0, 1, 4, 5, 6]) === 4` 33 | - For edge cases or when there's no desired outcome (and your interview has told you what to return based on questions asked in Step 1): 34 | `someFunction([0, 0, 0]) === null ` 35 | 36 | #### Hidden Goal: It's crucial to have a clear agreement on what is being built. These tests will serve as your contract. Demonstrate that you have a system in place for developing confidence in your code. 37 | 38 | ### Step 3: Figure out a solution without code 39 | Pseudocode every line of instruction and talk it out as you write them out. 40 | - Keep with plain English. 41 | - **NO CODE!** 42 | - When you're done with the pseudocode, walk through the logic and possibly use real values to talk about justify the logic. 43 | - Work with feedback. Do your very best to work with it. If their feedback doesn't make sense, ask questions to build your understanding and learn something new! 44 | - Do not ignore feedback (...might as well just leave the room if that happens). 45 | - This is not to say you can't question feedback. You absolutely can. You just need to be mindful of how to question it. 46 | #### Hidden Goal: Demonstrate that you can work with feedback given to you. 47 | 48 | ### Step 4: Write out the solution using code 49 | This is where you implement actual code and discuss the use of built-in methods and language features. 50 | 51 | - By this step, you might have an understanding of which language has built-in features that would allow you to do things efficiently. 52 | - Usually you'll be allowed to choose a language of your preference but ask if your preferred language is okay anyway. 53 | - The interviewer might not be familiar with your preferred language, so be prepared to talk about built-in methods (their inputs and outputs). 54 | - Do not get hung up on too much syntax. It's more a loose translation from your pseudocode to some what working code. 55 | - If you foresee two ways to do a task, present that information to the interviewer and ask if there is a preference for one path over the other. (Bonus: You present the pros and cons for each path.) 56 | #### Hidden Goal: Demonstrate your ability to communicate in a technical manner and have some working knowledge of your preferred language. 57 | 58 | ### Step 5: Test your code 59 | - Run through your code line by line using actual values and indicate expected values as statements are evaluated. 60 | - Use/run tests you wrote in Step 2. 61 | #### Hidden Goal: Demonstrate attention to detail. 62 | 63 | ### Step 6: Talk about how you would refactor your code 64 | Your first go at a solution is not likely to be the most optimal. This is your opportunity to talk about things you would do to make it better. Focus less about formatting (because that can be easily resolved in the working environment). 65 | - Main question here is: What logical things would you refactor and why? 66 | - Consider things like: 67 | - Is unneeded iteration happening? 68 | - Are there unneeded variables? Or are there variables that can be used to make the code more legible? 69 | - Can there be better function or variable naming for legibility? 70 | - Is there another data structure that can be used to help solve the problem? 71 | - Are there other built-in methods that might be better suited for a specific task? 72 | #### Hidden Goal: Technical interviewers generally know this is not the ideal situation for producing amazing code. They want to know what you look for in developing good code. Legibility of code (outside of formatting) is a very good place to start. 73 | -------------------------------------------------------------------------------- /tools-and-resources/wireframes.md: -------------------------------------------------------------------------------- 1 | # Wireframes 2 | 3 | #### Overview 4 | 5 | A wireframe is visual guide to the look and functionality of a webpage or application. Wireframes take into account how the user will navigate through the application and ensures the user is able to access all the necessary pieces of the application. 6 | 7 | #### Previous Lecture 8 | 9 | [![YouTube](http://img.youtube.com/vi/xq_9K5pPamc/0.jpg)](https://youtu.be/xq_9K5pPamc) 10 | 11 | #### Additional Resources 12 | 13 | - [What is a Wireframe?](https://www.orbitmedia.com/blog/7-reasons-to-wireframe/) 14 | - [How to wireframe a website](https://www.youtube.com/watch?v=PmmQjLqJQlY) 15 | - [A Beginner’s Guide to Wireframing](https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399) 16 | - [Figma](https://www.figma.com/) 17 | - [Balsamiq](https://balsamiq.com/) 18 | 19 | --- 20 | 21 | ### Wireframes 22 | 23 | Wireframes are often used early in the development process to establish the basic structure of a page. They create an agreed upon visual design for everyone on the team. A successful wireframe should give context to the developer without restricting design decisions that may evolve as the application grows. 24 | 25 | The wireframe of a web application is a simplification of the view to illustrate the following: 26 | 27 | - What information is needs to be displayed on a page. 28 | - Where the information should be on the page. 29 | - How the user will navigate through the page or the application. 30 | 31 | As long as the idea you are trying to get across is clear and understandable, it's a successful wireframe. 32 | 33 | --- 34 | 35 | [Back to Syllabus](../README.md#resources) 36 | --------------------------------------------------------------------------------