diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml new file mode 100644 index 000000000..e62589a47 --- /dev/null +++ b/.github/workflows/rspec.yml @@ -0,0 +1,28 @@ +name: RSpec + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + rspec: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + bundler-cache: true + + - name: Install dependencies + run: bundle install + + - name: Run test and linter + run: + bundle exec rake diff --git a/.gitignore b/.gitignore index b6dd8396e..5aa12c79e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ .bundle .env .idea -.ruby-version .rvmrc .sass-cache Thumbs.db +.byebug_history diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 000000000..be94e6f53 --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +3.2.2 diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 000000000..f2a971aa7 --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +ruby 3.2.2 diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 0ed42e120..000000000 --- a/.travis.yml +++ /dev/null @@ -1,4 +0,0 @@ -language: ruby -rvm: - - 2.2.0 -cache: bundler diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 92e0fbcab..937117101 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,8 +3,8 @@ RailsBridge wouldn't be what it is without your help. Thanks for contributing. We ask that contributions be made as pull requests via GitHub. If those words -are totally foreign to you -[see here](#its-my-first-time-on-github-ever-what-do-i-do) +are totally foreign to you, +[see here](#its-my-first-time-on-github-ever-what-do-i-do). # When Submitting a Pull Request @@ -16,18 +16,18 @@ maintainers to love you. :heart:* - If you have an existing fork, please make sure it's up to date. It just makes your life easier! If not, make sure you fork *before* cloning, otherwise you'll need to spend some time juggling remotes. - Look at the section "Pull in upstream changes" in GitHub's + Look at the section "Keep your fork synced" in GitHub's [Fork A Repo](https://help.github.com/articles/fork-a-repo) article. - Create a local topic branch before you start working. This branch is going to be named for what you plan to change. `fix-typo-in-slides`, `move-resources`, and `mountain-lion-support` are all good names for topic branches. If you've never created a local branch before, you can use `git checkout -b - new-branch-name` + new-branch-name`. ## Before Submitting -- Please, please, *please* run `rake` from the terminal before you submit. It +- Please, please, *please* run `bundle exec rake` from the terminal before you submit. It not only runs our test suite but also checks the docs for syntax errors. - Push to a branch on GitHub. Just like you developed in a local branch, you @@ -45,14 +45,14 @@ maintainers to love you. :heart:* - Remember, pull requests are submitted *from* your repo, but show up on the *upstream* repo. -## Discussion and Waiting On A Merge +## Discussion and Waiting On a Merge - Every pull request will receive a response from the team. - Not every pull request will be merged as is. - Not every pull request will be merged at all. - If a pull request falls significantly behind master, we may ask that you close it, rebase your changes off of master, and submit a new pull request. -- feel free to "ping" the team by adding a short comment to your pull request +- Feel free to "ping" the team by adding a short comment to your pull request if it's been more than a week with no reply ## After your merge has been accepted @@ -69,13 +69,13 @@ maintainers to love you. :heart:* # It's My First Time on GitHub Ever What Do I Do? -Relax, you came to the right place. In order to contribute you'll need to be +Relax, you came to the right place. In order to contribute, you'll need to be able to familiarize yourself with some concepts from git and GitHub. It's going -to be a lot of information, but you're :sparkles:awesome:sparkles:! So you it'll +to be a lot of information, but you're :sparkles:awesome:sparkles:! So you'll be fine. First, you'll need a GitHub account, which is totally free. You can sign up -[here](https://github.com/signup/free). +[here](https://github.com/join). Next, browse the [GitHub Help site](https://help.github.com) and the [GitHub Guides](https://guides.github.com/). The Help Site is more technical, and the @@ -85,7 +85,7 @@ You'll want to read about [forking](https://help.github.com/articles/fork-a-repo) and then make your own fork of [railsbridge/docs](https://github.com/railsbridge/docs). Once you've done so, you can clone it and get started by reading up on [what to do when -submitting a pull request](#when-submitting-a-pull-request), read up on +submitting a pull request](#when-submitting-a-pull-request), and read up on [pull requests](https://help.github.com/articles/using-pull-requests) themselves. @@ -100,7 +100,7 @@ at . Do it. It's worth it no matter how much git-fu you Also, [Pro Git](http://git-scm.com/book) is a great (and free!) book about Git. -We apologize for how long this document is! Hopefully it addressed +We apologize for how long this document is! Hopefully, it addressed most of your concerns about git, contributing, and GitHub. Feel free to ask more questions on the [railsbridge-workshops](http://groups.google.com/group/railsbridge-workshops) diff --git a/Gemfile b/Gemfile index fd9ac82ce..32eb465d5 100644 --- a/Gemfile +++ b/Gemfile @@ -1,31 +1,32 @@ source "https://rubygems.org/" -ruby '2.2.0' +ruby '3.2.2' gem 'activesupport' -gem "erector", "~> 0.10.0" -gem "sinatra", "~> 1.4.0" +gem "erector", github: "erector/erector" +gem "sinatra" +gem "sinatra-contrib" gem "nokogiri" gem "thin" -gem "eventmachine", "~>1.0.3" gem 'rack-codehighlighter' gem 'coderay' -gem "deckrb", "~> 0.5.2" +gem "deckrb" gem "sass" gem "redcarpet" gem "rubyzip" -gem "i18n", "~> 0.7" +gem "i18n" gem 'font-awesome-sass' gem 'bootstrap-sass' gem 'jquery-cdn' gem 'sprockets' +gem 'ffi' +gem 'backports' group :development do - gem "wrong", "~> 0.7.0" gem "rspec" gem "rerun" gem "rake" gem "rack-test" - gem "files", "~> 0.3.0" + gem 'files', github: "alexch/files" gem 'rb-fsevent', :platform => :ruby end diff --git a/Gemfile.lock b/Gemfile.lock index e8aabb5b3..346a686d9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,18 +1,40 @@ +GIT + remote: https://github.com/alexch/files.git + revision: 4938dd85ed79f421b808e8798764661a71cab5a4 + specs: + files (0.4.0) + +GIT + remote: https://github.com/erector/erector.git + revision: 32cb38e3381889295183230caf8bf334d2f0e82a + specs: + erector (0.10.0) + haml + jeweler + nokogiri + sass + treetop (>= 1.2.3) + GEM remote: https://rubygems.org/ specs: - activesupport (4.2.0) - i18n (~> 0.7) - json (~> 1.7, >= 1.7.7) + activesupport (6.0.6.1) + concurrent-ruby (~> 1.0, >= 1.0.2) + i18n (>= 0.7, < 2) minitest (~> 5.1) - thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - bootstrap-sass (3.3.1.0) - sass (~> 3.2) - celluloid (0.16.0) - timers (~> 4.0.0) - coderay (1.1.0) - daemons (1.1.9) + zeitwerk (~> 2.2, >= 2.2.2) + addressable (2.4.0) + autoprefixer-rails (10.4.15.0) + execjs (~> 2) + backports (3.23.0) + bootstrap-sass (3.4.1) + autoprefixer-rails (>= 5.2.1) + sassc (>= 2.0.0) + builder (3.2.4) + coderay (1.1.3) + concurrent-ruby (1.1.9) + daemons (1.2.4) deckrb (0.5.2) coderay erector (>= 0.9.0) @@ -23,108 +45,157 @@ GEM redcarpet (~> 2) thin trollop - diff-lcs (1.2.5) - erector (0.10.0) - treetop (>= 1.2.3) - eventmachine (1.0.4) - ffi (1.9.6) - files (0.3.1) - font-awesome-sass (4.2.2) - sass (~> 3.2) - hike (1.2.3) - hitimes (1.2.2) - i18n (0.7.0) - jquery-cdn (2.1.3) + descendants_tracker (0.0.4) + thread_safe (~> 0.3, >= 0.3.1) + diff-lcs (1.5.0) + eventmachine (1.2.3) + execjs (2.8.1) + faraday (0.9.2) + multipart-post (>= 1.2, < 3) + ffi (1.15.5) + font-awesome-sass (6.4.2) + sassc (~> 2.0) + git (1.11.0) + rchardet (~> 1.8) + github_api (0.16.0) + addressable (~> 2.4.0) + descendants_tracker (~> 0.0.4) + faraday (~> 0.8, < 0.10) + hashie (>= 3.4) + mime-types (>= 1.16, < 3.0) + oauth2 (~> 1.0) + haml (6.2.3) + temple (>= 0.8.2) + thor + tilt + hashie (5.0.0) + highline (2.1.0) + i18n (0.9.5) + concurrent-ruby (~> 1.0) + jeweler (2.3.9) + builder + bundler + git (>= 1.2.5) + github_api (~> 0.16.0) + highline (>= 1.6.15) + nokogiri (>= 1.5.10) + psych + rake + rdoc + semver2 + jquery-cdn (2.2.4) sprockets (>= 2) - json (1.8.1) - listen (2.8.4) - celluloid (>= 0.15.2) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - mini_portile (0.6.2) - minitest (5.5.0) - multi_json (1.10.1) - nokogiri (1.6.5) - mini_portile (~> 0.6.0) + json (2.6.1) + jwt (2.7.1) + listen (3.0.8) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + mime-types (2.99.3) + mini_portile2 (2.8.0) + minitest (5.20.0) + multi_json (1.15.0) + multi_xml (0.6.0) + multipart-post (2.3.0) + mustermann (3.0.0) + ruby2_keywords (~> 0.0.1) + nokogiri (1.14.5) + mini_portile2 (~> 2.8.0) + racc (~> 1.4) + oauth2 (1.4.8) + faraday (>= 0.8, < 3.0) + jwt (>= 1.0, < 3.0) + multi_json (~> 1.3) + multi_xml (~> 0.5) + rack (>= 1.2, < 3) polyglot (0.3.5) - predicated (0.2.6) - rack (1.6.0) - rack-codehighlighter (0.5.0) + psych (5.1.1.1) + stringio + racc (1.7.2) + rack (2.2.4) + rack-codehighlighter (0.6.0) nokogiri (>= 1.4.1) - rack (>= 1.0.0) - rack-protection (1.5.3) - rack - rack-test (0.6.2) + rack (>= 2.0.0) + rack-protection (3.1.0) + rack (~> 2.2, >= 2.2.4) + rack-test (0.6.3) rack (>= 1.0) - rake (10.4.2) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) + rake (13.1.0) + rb-fsevent (0.9.8) + rb-inotify (0.9.8) ffi (>= 0.5.0) + rchardet (1.8.0) + rdoc (6.5.0) + psych (>= 4.0.0) redcarpet (2.3.0) - rerun (0.10.0) - listen (~> 2.7, >= 2.7.3) - rspec (3.1.0) - rspec-core (~> 3.1.0) - rspec-expectations (~> 3.1.0) - rspec-mocks (~> 3.1.0) - rspec-core (3.1.7) - rspec-support (~> 3.1.0) - rspec-expectations (3.1.2) + rerun (0.14.0) + listen (~> 3.0) + rspec (3.5.0) + rspec-core (~> 3.5.0) + rspec-expectations (~> 3.5.0) + rspec-mocks (~> 3.5.0) + rspec-core (3.5.4) + rspec-support (~> 3.5.0) + rspec-expectations (3.5.0) diff-lcs (>= 1.2.0, < 2.0) - rspec-support (~> 3.1.0) - rspec-mocks (3.1.3) - rspec-support (~> 3.1.0) - rspec-support (3.1.2) - ruby2ruby (2.1.3) - ruby_parser (~> 3.1) - sexp_processor (~> 4.0) - ruby_parser (3.6.3) - sexp_processor (~> 4.1) - rubyzip (1.1.6) - sass (3.4.9) - sexp_processor (4.4.4) - sinatra (1.4.5) - rack (~> 1.4) - rack-protection (~> 1.4) - tilt (~> 1.3, >= 1.3.4) - sprockets (2.12.3) - hike (~> 1.2) - multi_json (~> 1.0) - rack (~> 1.0) - tilt (~> 1.1, != 1.3.0) - thin (1.6.3) + rspec-support (~> 3.5.0) + rspec-mocks (3.5.0) + diff-lcs (>= 1.2.0, < 2.0) + rspec-support (~> 3.5.0) + rspec-support (3.5.0) + ruby2_keywords (0.0.5) + rubyzip (2.3.2) + sass (3.7.4) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + sassc (2.4.0) + ffi (~> 1.9) + semver2 (3.4.2) + sinatra (3.1.0) + mustermann (~> 3.0) + rack (~> 2.2, >= 2.2.4) + rack-protection (= 3.1.0) + tilt (~> 2.0) + sinatra-contrib (3.1.0) + multi_json + mustermann (~> 3.0) + rack-protection (= 3.1.0) + sinatra (= 3.1.0) + tilt (~> 2.0) + sprockets (3.7.2) + concurrent-ruby (~> 1.0) + rack (> 1, < 3) + stringio (3.0.8) + temple (0.10.3) + thin (1.8.1) daemons (~> 1.0, >= 1.0.9) - eventmachine (~> 1.0) - rack (~> 1.0) - thread_safe (0.3.4) - tilt (1.4.1) - timers (4.0.1) - hitimes - treetop (1.5.3) + eventmachine (~> 1.0, >= 1.0.4) + rack (>= 1, < 3) + thor (1.3.0) + thread_safe (0.3.6) + tilt (2.0.11) + treetop (1.6.8) polyglot (~> 0.3) - trollop (2.1.1) - tzinfo (1.2.2) + trollop (2.1.2) + tzinfo (1.2.10) thread_safe (~> 0.1) - wrong (0.7.1) - diff-lcs (~> 1.2.5) - predicated (~> 0.2.6) - ruby2ruby (>= 2.0.1) - ruby_parser (>= 3.0.1) - sexp_processor (>= 4.0) + zeitwerk (2.6.12) PLATFORMS ruby DEPENDENCIES activesupport + backports bootstrap-sass coderay - deckrb (~> 0.5.2) - erector (~> 0.10.0) - eventmachine (~> 1.0.3) - files (~> 0.3.0) + deckrb + erector! + ffi + files! font-awesome-sass - i18n (~> 0.7) + i18n jquery-cdn nokogiri rack-codehighlighter @@ -136,7 +207,13 @@ DEPENDENCIES rspec rubyzip sass - sinatra (~> 1.4.0) + sinatra + sinatra-contrib sprockets thin - wrong (~> 0.7.0) + +RUBY VERSION + ruby 3.2.2p53 + +BUNDLED WITH + 2.3.26 diff --git a/README.md b/README.md index 461f0ce8b..6eeccd756 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ These files can be in any of these formats: ## Usage bundle install - rake run + bundle exec rake run If the above fails (say, because `rerun` doesn't work on your system), try @@ -30,13 +30,13 @@ Then open in a web browser, and verify that you can navi ## Locales -To serve sites from "sites/en", use `rake run` or a vanilla deploy. +To serve sites from "sites/en", use `bundle exec rake run` or a vanilla deploy. To server sites from another locale (say, "es" or Spanish)... ### Run Localized Site Locally - $ SITE_LOCALE=es rake run + $ SITE_LOCALE=es bundle exec rake run The server listens on `0.0.0.0:9292`. diff --git a/app.rb b/app.rb index bdd4707e7..9070515e4 100755 --- a/app.rb +++ b/app.rb @@ -1,4 +1,5 @@ require 'sinatra' +require 'sinatra/cookies' require 'digest/md5' require 'erector' require 'i18n' @@ -8,9 +9,6 @@ require 'zip' require 'tmpdir' -#require 'wrong' -#include Wrong::D - here = File.expand_path File.dirname(__FILE__) lib = File.expand_path "#{here}/lib" $: << lib @@ -30,11 +28,10 @@ class InstallFest < Sinatra::Application # todo: use Sinatra::Base instead, with more explicit config include Erector::Mixin - DEFAULT_SITES = {en: "docs", es: "hola", :"zh-tw" => "nihao" } - # Set available locales in Array of Strings; this is also used when # checking availability in dynamic locale assignment, they must be strings. - AVAILABLE_LOCALES = DEFAULT_SITES.keys.map(&:to_s) + AVAILABLE_LOCALES = %w[en es zh-tw].freeze + DEFAULT_SITE = "docs" set :assets, Sprockets::Environment.new settings.assets.append_path "assets/stylesheets" @@ -43,9 +40,13 @@ class InstallFest < Sinatra::Application # todo: use Sinatra::Base instead, wi settings.assets.append_path Bootstrap.javascripts_path JqueryCdn.install(settings.assets) + if settings.environment == :development + set :cookie_options, domain: nil + end + configure do I18n::Backend::Simple.include(I18n::Backend::Fallbacks) - I18n.load_path = Dir[File.join(settings.root, 'locales', '*.yml')] + I18n.load_path = Dir[File.join(settings.root, 'locales', '**/*.yml')] I18n.backend.load_translations I18n.available_locales = AVAILABLE_LOCALES @@ -71,7 +72,7 @@ def default_site if host && sites.include?(site = subdomain) site else - DEFAULT_SITES[I18n.locale.to_sym] # no symbol DoS because it's whitelisted + DEFAULT_SITE end end @@ -84,16 +85,23 @@ def site_dir end def sites_dir - Site.sites_dir(I18n.locale) + Site.sites_dir end def sites - Dir["#{sites_dir}/*"].map { |path| path.split('/').last } + Dir["#{sites_dir}/*"].map { |path| File.basename(path) } end def redirect_sites { - 'curriculum' => 'intro-to-rails' + 'curriculum' => 'intro-to-rails', + 'intermediate-rails' => 'message-board' + } + end + + def redirect_pages + { + 'installfest/macintosh' => 'installfest/macOS' } end @@ -105,9 +113,17 @@ def redirect_sites end end + after '/:site/*' do + # Any real page (starts with a site and doesn't end with an extension) + # gets saved as the 'back' for the next pageload. + if sites.include?(params[:site]) && !request.fullpath.match(/\..+\z/) + cookies[:docs_back_path] = request.fullpath + end + end + def dynamic_locale - (params && (params[:locale] or params[:l])) or - (host && AVAILABLE_LOCALES.include?(subdomain) && subdomain) or + (params && (params[:locale] || params[:l])) || + (host && AVAILABLE_LOCALES.include?(subdomain) && subdomain) || (ENV['SITE_LOCALE']) end @@ -130,14 +146,28 @@ def doc_path end end + def back_path + path_parts = cookies[:docs_back_path]&.split('/') + return unless path_parts && path_parts.length > 2 + + current_path_parts = request.fullpath.split('/') + prev_site, prev_page = path_parts[1..2] + this_site, this_page = current_path_parts[1..2] + + return unless prev_site == this_site + return if prev_page == this_page + + prev_page + end + def render_page begin options = { - site_name: params[:site], + site: Site.named(params[:site]), page_name: params[:name], doc_title: Titleizer.title_for_page(params[:name]), doc_path: doc_path, - back: params[:back], + back: back_path, src: src, locale: I18n.locale, } @@ -159,7 +189,6 @@ def render_page else raise "unknown file type #{doc_path}" end - rescue Errno::ENOENT => e p e e.backtrace.each do |line| @@ -206,9 +235,9 @@ def render_deck get "/:site/:name/src" do begin RawPage.new( - site_name: params[:site], + site: Site.named(params[:site], I18n.locale), page_name: params[:name], - doc_title: doc_path.split('/').last, + doc_title: File.basename(doc_path), doc_path: doc_path, src: src, locale: I18n.locale, @@ -221,13 +250,16 @@ def render_deck get "/:site/:name.zip" do manifest_path = "#{site_dir}/#{params[:name]}.zip-manifest" - if File.exists?(manifest_path) + if File.exist?(manifest_path) manifest_files = File.read(manifest_path).split("\n") zip_path = File.join(Dir.tmpdir, "#{params[:name]}.zip") FileUtils.rm_rf(zip_path) Zip::File.open(zip_path, Zip::File::CREATE) do |zipfile| manifest_files.each do |filename| - zipfile.add(File.join(params[:name], File.basename(filename)), File.join(site_dir, filename)) + filename_without_first_directory = filename.split(File::SEPARATOR)[1..-1].join(File::SEPARATOR) + location_in_zip = File.join(params[:name], filename_without_first_directory) + location_on_disk = File.join(site_dir, filename) + zipfile.add(location_in_zip, location_on_disk) end end send_file zip_path @@ -259,6 +291,12 @@ def render_deck site_name = params[:site] if redirect_sites[site_name] redirect "#{redirect_sites[site_name]}/#{params[:name]}" + return + end + + page_url = "#{params[:site]}/#{params[:name]}" + if redirect_pages[page_url] + redirect redirect_pages[page_url] else render_page end diff --git a/assets/javascripts/analytics.js b/assets/javascripts/analytics.js new file mode 100644 index 000000000..dc021eb87 --- /dev/null +++ b/assets/javascripts/analytics.js @@ -0,0 +1,7 @@ +(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) +})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + +ga('create', 'UA-40977319-4', 'auto'); +ga('send', 'pageview'); diff --git a/assets/javascripts/application.js b/assets/javascripts/application.js index 43ff56e6c..18a61343f 100644 --- a/assets/javascripts/application.js +++ b/assets/javascripts/application.js @@ -1,3 +1,6 @@ //= require 'jquery' //= require 'doc_page' //= require 'bootstrap/dropdown' +//= require 'analytics' +//= require 'md5' +//= require 'checkboxes' diff --git a/assets/javascripts/checkboxes.js b/assets/javascripts/checkboxes.js new file mode 100644 index 000000000..67778cfa3 --- /dev/null +++ b/assets/javascripts/checkboxes.js @@ -0,0 +1,30 @@ +$(document).ready(function () { + function saveCheckboxValue (hashcode, value) { + try { + localStorage['checkbox_' + hashcode] = value; + } catch (e) { } + } + + function fetchCheckboxValue (hashcode) { + try { + return localStorage['checkbox_' + hashcode]; + } catch (e) { + return false; + } + } + + var $checkboxes = $('.big_checkbox'); + + $checkboxes.each(function () { + var $checkbox = $(this); + var content = $checkbox.closest('.step').text(); + var hashcode = md5(content); + $checkbox.data('hashcode', hashcode); + $checkbox.prop('checked', fetchCheckboxValue(hashcode) === 'true'); + }); + + $checkboxes.on('change', function (event) { + var $checkbox = $(event.target); + saveCheckboxValue($checkbox.data('hashcode'), $checkbox.prop('checked')); + }); +}); diff --git a/assets/javascripts/md5.js b/assets/javascripts/md5.js new file mode 100644 index 000000000..114b8f82a --- /dev/null +++ b/assets/javascripts/md5.js @@ -0,0 +1,2 @@ +// https://github.com/blueimp/JavaScript-MD5 +!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t),e=(n>>16)+(t>>16)+(r>>16);return e<<16|65535&r}function r(n,t){return n<>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<>>9<<4)+14]=r;var e,i,a,h,d,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e>5]>>>t%32&255);return r}function h(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t>5]|=(255&n.charCodeAt(t/8))<16&&(o=i(o,8*n.length)),r=0;16>r;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(h(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="0123456789abcdef",o="";for(r=0;r>>4&15)+e.charAt(15&t);return o}function v(n){return unescape(encodeURIComponent(n))}function m(n){return d(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this); diff --git a/assets/stylesheets/font_awesome.scss b/assets/stylesheets/font_awesome.scss index 908bb887a..6fccacddb 100644 --- a/assets/stylesheets/font_awesome.scss +++ b/assets/stylesheets/font_awesome.scss @@ -1,3 +1 @@ $fa-font-path: '/fonts/font-awesome/'; - -@import 'https://github.com/font-awesome'; \ No newline at end of file diff --git a/assets/stylesheets/step.scss b/assets/stylesheets/step.scss index d752dca40..031ddbd36 100644 --- a/assets/stylesheets/step.scss +++ b/assets/stylesheets/step.scss @@ -180,6 +180,10 @@ table.bordered tr { background-color: #FBFFCA; } +.challenge > h1:before { + background-color: #FFD188; +} + .explanation > h1:before { background-color: #C8FFC9; } diff --git a/lib/contents.rb b/lib/contents.rb index 4e5f7444f..9527890ec 100755 --- a/lib/contents.rb +++ b/lib/contents.rb @@ -1,26 +1,17 @@ require 'titleizer' class Contents < Erector::Widget - attr_accessor :site_dir - attr_accessor :page_name - # todo: replace site_name, locale, site_dir with Site object - needs :page_name, :site_name, :locale => nil, :site_dir => nil + attr_accessor :page_name, :site + needs :page_name, :site def initialize options super options self.page_name = options[:page_name] - - if options.include? :site_dir # used in tests - @site_dir = options[:site_dir] - else - site = Site.named(@site_name, @locale) - @site_dir = site.dir if site - end end def site_files ext - Dir.glob("#{site_dir}/*.{#{ext}}").sort + Dir.glob(File.join(site.dir, "*.{#{ext}}")).sort end def parseable_site_files @@ -32,18 +23,20 @@ def site_page_files end def content_for filename - open("#{site_dir}/#{filename}").read + open(File.join(site.dir, filename)).read end def subpages_for filename + return [] if filename.match(/deck\.md/) + links = [] - return links if filename.match(/deck\.md/) content = content_for(filename) # (markdown) links of the form: [link text](link_page) # but NOT images of the form ![alt text](image_link.jpg) content.scan /[^!]\[.*?\]\((.*?)\)/ do |link, _| next if (link =~ /^http/) + next if (link =~ %r(^.+/)) # cross-links to other sites, e.g. /installfest/editors next if (link =~ %r(^//)) # protocol-less absolute links e.g. //google.com links.push(link) end @@ -112,7 +105,7 @@ def find_next_page page # while another goes to next_step "that"). def hierarchy result = [] - next_page = File.basename(site_dir) + next_page = File.basename(site.dir) while next_page do this_page = next_page @@ -157,7 +150,7 @@ def _toggler def toc_link page, options = {} link_text = Titleizer.title_for_page(page.sub(%r{^/}, '')) - path = page.start_with?('/') ? page : "/#{@site_name}/" + page + path = page.start_with?('/') ? page : "/#{site.name}/" + page collapse_classes = if options[:collapsable] options[:collapsed] ? 'collapsable closed' : 'collapsable' else diff --git a/lib/doc_page.rb b/lib/doc_page.rb index bf90b2159..9f4d9e813 100644 --- a/lib/doc_page.rb +++ b/lib/doc_page.rb @@ -8,9 +8,9 @@ require 'erb' class DocPage < Html5Page - needs :site_name, :doc_title, :doc_path, :page_name, :src, :locale + needs :site, :doc_title, :doc_path, :page_name, :src, :locale needs :back => nil - attr_reader :site_name, :doc_title, :page_name, :src + attr_reader :site, :doc_title, :page_name, :src def head_content title page_title @@ -19,7 +19,7 @@ def head_content end def site_title - Titleizer.title_for_page(site_name) + Titleizer.title_for_page(site.name) end def page_title @@ -37,11 +37,11 @@ def content end def file_name - @doc_path.split('/').last + File.basename(@doc_path) end def git_url - "https://github.com/railsbridge/docs/blob/master/sites/#{@locale}/#{@site_name}/#{file_name}" + "https://github.com/railsbridge/docs/blob/master/sites/#{site.name}/#{file_name}" end def src_url @@ -57,7 +57,7 @@ def top_links end def body_attributes - if site_name == 'docs' + if site.name == 'docs' {class: 'no-toc'} else {} @@ -68,7 +68,7 @@ def body_content nav(class: "top cf", role: "navigation") { div(class: "navbar-header cf title") { - a(href: "/#{site_name}") { + a(href: "/#{site.name}") { span("RailsBridge ", class: "brand") text site_title } @@ -78,7 +78,7 @@ def body_content li(class: "dropdown") { a("sites", href: "#", class: "dropdown-toggle", "data-toggle" => "dropdown") - widget SiteIndex, site_name: site_name, locale: @locale + widget SiteIndex, site_name: site.name, locale: @locale } top_links.each do |top_link| @@ -87,7 +87,7 @@ def body_content } } - widget Contents, locale: @locale, site_name: site_name, page_name: page_name + widget Contents, site: site, page_name: page_name main { before_title @@ -113,9 +113,13 @@ def body_content } footer { - p "RailsBridge Docs is maintained by RailsBridge volunteers." p do - text "If you find something that could be improved, please make a " + text "Going through this curriculum on your own? Get help on " + a "our Discourse forum", href: "http://discourse.bridgefoundry.org/c/railsbridge-help", target: "_blank" + text ", where RailsBridge volunteers can answer your questions." + end + p do + text "If you have a suggestion for improving the docs, please make a " a "pull request ", href: "https://github.com/railsbridge/docs" text "or " a "drop us a note ", href: "https://github.com/railsbridge/docs/issues/new" diff --git a/lib/flags.rb b/lib/flags.rb index 89b1a6940..1e6372d31 100644 --- a/lib/flags.rb +++ b/lib/flags.rb @@ -20,7 +20,7 @@ def subdomain_for_locale(locale) def content li class: 'dropdown' do - a class: 'dropdown-toggle', 'data-toggle' => 'dropdown' do + a class: 'dropdown-toggle', 'data-toggle' => 'dropdown', href: '#' do img src: image_for_locale(@locale) end ul class: 'flags dropdown-menu' do diff --git a/lib/markdown_page.rb b/lib/markdown_page.rb index ba459522c..f5a399c6b 100644 --- a/lib/markdown_page.rb +++ b/lib/markdown_page.rb @@ -9,6 +9,6 @@ def before_title end def doc_content - rawtext MarkdownRenderer.render(src) + rawtext MARKDOWN_RENDERER.render(src) end end diff --git a/lib/markdown_renderer.rb b/lib/markdown_renderer.rb index 46773298e..59404dffe 100644 --- a/lib/markdown_renderer.rb +++ b/lib/markdown_renderer.rb @@ -11,7 +11,7 @@ def block_code(code, language) end end -MarkdownRenderer = Redcarpet::Markdown.new( +MARKDOWN_RENDERER = Redcarpet::Markdown.new( HTMLwithCodeRay, :autolink => true, :space_after_headers => true, diff --git a/lib/site.rb b/lib/site.rb index 16bf44bd8..d97d8c397 100644 --- a/lib/site.rb +++ b/lib/site.rb @@ -4,17 +4,19 @@ class Site @@here = File.expand_path(File.dirname(__FILE__)) @@project_root = File.dirname(@@here) - def self.sites_dir locale = "en" - sites_dir = File.join(["sites", locale.to_s].compact) - File.expand_path(sites_dir, @@project_root) + def self.sites_dir + File.expand_path('sites', @@project_root) end - def self.all locale = "en" - Dir["#{sites_dir(locale)}/*"].map{|dir| Site.new(dir)} + def self.all + Dir[File.join(sites_dir, '*')].map{|dir| Site.new(dir)} end - def self.named name, locale = "en" - all(locale).detect{|site| site.name == name } + def self.named name + site = all.detect { |folder| folder.name == name } + raise "No site found with the name '#{name}'" unless site + + site end attr_reader :dir @@ -28,7 +30,8 @@ def name end def docs - Dir["#{@dir}/*.{#{DOC_TYPES.join(',')}}"].map{|path| Doc.new(path)} + file_path_glob = File.join(@dir, "*.{#{DOC_TYPES.join(',')}}") + Dir[file_path_glob].map{|path| Doc.new(path)} end class Doc @@ -39,7 +42,7 @@ def initialize path end def filename - @path.split('/').last + File.basename(@path) end def name diff --git a/lib/site_extensions/docs.rb b/lib/site_extensions/docs.rb new file mode 100644 index 000000000..6806db3b6 --- /dev/null +++ b/lib/site_extensions/docs.rb @@ -0,0 +1,14 @@ +module StepExtensions + module Docs + def site_desc site_name, description + div class: 'site-desc' do + h2 do + a href: "/#{site_name}" do + text Titleizer.title_for_page(site_name) + end + end + div raw(md2html description) + end + end + end +end \ No newline at end of file diff --git a/lib/site_extensions/installfest.rb b/lib/site_extensions/installfest.rb new file mode 100644 index 000000000..08c157d68 --- /dev/null +++ b/lib/site_extensions/installfest.rb @@ -0,0 +1,16 @@ +module StepExtensions + module Installfest + def version_string(name) + case name + when :ruby_short + '2.3.8' + when :windows_rubygems_min + '2.6.7' + when :windows_rubygems_min_short + '2.6' + else + raise StandardError, "No version string exists for '#{name}'" + end + end + end +end diff --git a/lib/site_extensions/intro-to-rails.rb b/lib/site_extensions/intro-to-rails.rb new file mode 100644 index 000000000..c840ada74 --- /dev/null +++ b/lib/site_extensions/intro-to-rails.rb @@ -0,0 +1,22 @@ +module StepExtensions + module IntroToRails + def model_diagram options + header = options.delete(:header) + fields = options.delete(:fields) + table(options.merge(class: 'model-diagram')) do + thead do + tr do + th header + end + end + tbody do + fields.each do |field| + tr do + td field + end + end + end + end + end + end +end \ No newline at end of file diff --git a/lib/site_extensions/javascript-snake-game.rb b/lib/site_extensions/javascript-snake-game.rb new file mode 100644 index 000000000..27a7ad834 --- /dev/null +++ b/lib/site_extensions/javascript-snake-game.rb @@ -0,0 +1,21 @@ +module StepExtensions + module JavascriptSnakeGame + def js_expected_results(lesson) + h3 'Expected Results' + + h4 'What your snake.js file should look like:' + + src_path = File.join(File.dirname(@doc_path), 'js', "#{lesson}.js") + + source_code :js, File.read(src_path) + + h4 'How the game should work so far:' + + canvas id: 'chunk-game', height: '600', width: '800' + + script src: 'js/chunk.js' + + script src: "js/#{lesson}.js" + end + end +end \ No newline at end of file diff --git a/lib/site_index.rb b/lib/site_index.rb index 2563fb3f6..cfca58976 100644 --- a/lib/site_index.rb +++ b/lib/site_index.rb @@ -4,16 +4,31 @@ class SiteIndex < Erector::Widget def categorized_sites { - 'setup' => ['installfest'], - 'rails' => ['intro-to-rails', 'job-board', 'intermediate-rails'], - 'frontend' => ['frontend', 'javascript-snake-game'], - 'ruby' => ['learn-to-code', 'ruby'] + 'setup' => [ + 'installfest' + ], + 'rails' => [ + 'intro-to-rails', + 'job-board', + 'message-board', + 'testing-rails-applications' + ], + 'frontend' => [ + 'frontend', + 'javascript-snake-game', + 'javascript-to-do-list', + 'javascript-to-do-list-with-react' + ], + 'ruby' => [ + 'learn-to-code', + 'ruby' + ] } end def sites return @sites if @sites - @sites = Dir.glob("#{Site.sites_dir(@locale)}/**").map { |filename| File.basename(filename) }.sort + @sites = Dir.glob("#{Site.sites_dir}/**").map { |filename| File.basename(filename) }.sort end def site_category category diff --git a/lib/step.rb b/lib/step.rb index cd8e9c66e..9c8154b85 100644 --- a/lib/step.rb +++ b/lib/step.rb @@ -6,6 +6,8 @@ require 'active_support/core_ext/string/strip' require 'erb' +Dir[File.join(__dir__, 'site_extensions', '*.rb')].each { |f| require f } + class Step < Erector::Widget needs :src needs :doc_path @@ -15,6 +17,12 @@ class Step < Erector::Widget def initialize options super @step_stack = options[:step_stack] || [] + + site = File.basename(File.dirname(@doc_path)) + module_name = site.split('-').map(&:capitalize).join + if StepExtensions.const_defined?(module_name) + extend StepExtensions.const_get(module_name) + end end def next_step_number @@ -35,7 +43,7 @@ def current_anchor_num # todo: move into proper Doc class def page_name - @container_page_name || @doc_path.split('/').last.split('.').first + @container_page_name || File.basename(@doc_path, ".*") end def insert file @@ -49,14 +57,14 @@ def insert file end possible_paths.each do |path| - if File.exist?(path) - src = File.read(path) - if path.end_with?('.step') - step = Step.new(src: src, doc_path: path, container_page_name: page_name, step_stack: @step_stack) - return widget step - else - return message src - end + next unless File.exist?(path) + + src = File.read(path) + if path.end_with?('.step') + step = Step.new(src: src, doc_path: path, container_page_name: page_name, step_stack: @step_stack) + return widget step + else + return message src end end @@ -66,7 +74,7 @@ def insert file ## steps %w[ - steps explanation overview discussion hints challenge + steps explanation overview discussion hints challenge tools_and_references requirements ].each do |type| define_method type.to_sym do |&block| @@ -79,22 +87,21 @@ def insert file end end - def step name = nil, options = {} + def step name = nil, options = {}, &block num = next_step_number - a(:name => "step#{current_anchor_num}") - a(:name => options[:anchor_name]) if options[:anchor_name] - div :class => "step", :title => name do + a(name: "step#{current_anchor_num}") + a(name: options[:anchor_name]) if options[:anchor_name] + div class: "step" do h1 do widget BigCheckbox prefix I18n.t("general.step_title", :num => num) + (!name.nil? ? I18n.t("general.step_title_suffix") : '') text name end - _render_inner_content &Proc.new if block_given? + _render_inner_content(&block) if block_given? end end - def link name, options = {} options = {caption: I18n.t("captions.link")}.merge(options) p :class => "link" do @@ -103,27 +110,14 @@ def link name, options = {} simple_link(name, class: :link) end end + alias_method :link_without_toc, :link - def link_without_toc name - link name - end - - def _escaped str - ERB::Util.u(str) - end - - def simple_link name, options={} - require 'uri' - href = "#{_escaped(name)}?back=#{_escaped(page_name)}" - if @step_stack.length > 1 - href += URI.escape('#') + "step#{current_anchor_num}" - end + def simple_link name, options={}, &blk + link_options = {href: _escaped(name)}.merge(options) if block_given? - a({:href => href}.merge(options)) do - yield - end + a link_options, &blk else - a Titleizer.title_for_page(name), {:href => href}.merge(options) + a Titleizer.title_for_page(name), link_options end end @@ -137,19 +131,19 @@ def next_step name end end - def situation name + def situation name, &block h1 name - _render_inner_content &Proc.new if block_given? + _render_inner_content(&block) if block_given? end - def option name + def option name, &block num = next_step_number a(:name => "step#{current_anchor_num}") h1 :class => "option" do span I18n.t("general.option", :num => num) text name end - _render_inner_content &Proc.new if block_given? + _render_inner_content(&block) if block_given? end def option_half title @@ -193,17 +187,6 @@ def goal *args end end - def site_desc site_name, description - div class: 'site-desc' do - h2 do - a href: "/#{site_name}" do - text Titleizer.title_for_page(site_name) - end - end - div raw(md2html description) - end - end - ## message def message text = nil, options = {} @@ -331,48 +314,15 @@ def source_code *args end def md2html text - MarkdownRenderer.render(text) - end - - def model_diagram options - header = options.delete(:header) - fields = options.delete(:fields) - table(options.merge(class: 'model-diagram')) do - thead do - tr do - th header - end - end - tbody do - fields.each do |field| - tr do - td field - end - end - end - end + MARKDOWN_RENDERER.render(text) end - def js_expected_results(lesson) - h3 'Expected Results' - - h4 'What your snake.js file should look like:' - - src_path = File.join(File.dirname(@doc_path), 'js', "#{lesson}.js") - - source_code :js, File.read(src_path) - - h4 'How the game should work:' - - canvas id: 'chunk-game', height: '600', width: '800' - - script src: 'js/chunk.js' + private - script src: "js/#{lesson}.js" + def _escaped str + ERB::Util.u(str) end - private - def _render_inner_content blockquote do @step_stack.push 0 diff --git a/lib/step_page.rb b/lib/step_page.rb index 77df0fa75..9102b8bc8 100644 --- a/lib/step_page.rb +++ b/lib/step_page.rb @@ -4,6 +4,6 @@ class StepPage < DocPage def doc_content - widget Step.new :src => src, :doc_path => @doc_path + widget Step.new src: src, doc_path: @doc_path end end diff --git a/lib/titleizer.rb b/lib/titleizer.rb index 816fd2c88..b6a5034fb 100644 --- a/lib/titleizer.rb +++ b/lib/titleizer.rb @@ -19,7 +19,8 @@ def self.title_for_page page_name special_cases = { 'jquery' => 'jQuery', - 'osx' => 'OS X' + 'osx' => 'OS X', + 'macos' => 'macOS' } page_name.split(/[-_]/).map do |w| @@ -27,8 +28,8 @@ def self.title_for_page page_name w.upcase elsif to_be_lowercased.include?(w.downcase) w.downcase - elsif special_cases.include?(w) - special_cases[w] + elsif special_cases.include?(w.downcase) + special_cases[w.downcase] else w.capitalize end diff --git a/locales/en.yml b/locales/en.yml deleted file mode 100644 index b00896c93..000000000 --- a/locales/en.yml +++ /dev/null @@ -1,34 +0,0 @@ -en: - captions: - terminal: "Type this in the terminal:" - irb: "Type this in irb:" - result: "Expected result:" - fuzzy_result: "Approximate expected result:" - link: "Go on to" - - general: - type_in_file: "Type this in the file %{filename}:" - further_reading: "Further Reading" - fuzzy_hint: "The greyed-out text may differ and is not important." - step_title: "Step %{num}" - step_title_suffix: ": " - next_step: "Next Step:" - option: "Option %{num}: " - verify: "Verify %{text}" - goals: "Goals" - expand_all: "Expand All" - other_pages: "Other Pages" - back_to: "Back to" - - header_section: - steps: "Steps" - explanation: "Explanation" - overview: "Overview" - discussion: "Discussion Items" - hints: "Hints" - challenge: "Challenge(s)" - tools_and_references: "Tools and References" - requirements: "Requirements to advance" - - sites: - other_categories: Other Stuff \ No newline at end of file diff --git a/locales/en/captions.yml b/locales/en/captions.yml new file mode 100644 index 000000000..4903b86a7 --- /dev/null +++ b/locales/en/captions.yml @@ -0,0 +1,7 @@ +en: + captions: + terminal: "Type this in the terminal:" + irb: "Type this in irb:" + result: "Expected result:" + fuzzy_result: "Approximate expected result:" + link: "Go on to" diff --git a/locales/en/general.yml b/locales/en/general.yml new file mode 100644 index 000000000..71e81ed7f --- /dev/null +++ b/locales/en/general.yml @@ -0,0 +1,14 @@ +en: + general: + type_in_file: "Type this in the file %{filename}:" + further_reading: "Further Reading" + fuzzy_hint: "The greyed-out text may differ and is not important." + step_title: "Step %{num}" + step_title_suffix: ": " + next_step: "Next Step:" + option: "Option %{num}: " + verify: "Verify %{text}" + goals: "Goals" + expand_all: "Expand All" + other_pages: "Other Pages" + back_to: "Back to" diff --git a/locales/en/header_sections.yml b/locales/en/header_sections.yml new file mode 100644 index 000000000..df5b8c68a --- /dev/null +++ b/locales/en/header_sections.yml @@ -0,0 +1,10 @@ +en: + header_section: + steps: "Steps" + explanation: "Explanation" + overview: "Overview" + discussion: "Discussion Items" + hints: "Hints" + challenge: "Challenge(s)" + tools_and_references: "Tools and References" + requirements: "Requirements to advance" diff --git a/locales/en/sites.yml b/locales/en/sites.yml new file mode 100644 index 000000000..906063685 --- /dev/null +++ b/locales/en/sites.yml @@ -0,0 +1,3 @@ +en: + sites: + other_categories: Other Stuff diff --git a/locales/es/captions.yml b/locales/es/captions.yml new file mode 100644 index 000000000..c2e4ea129 --- /dev/null +++ b/locales/es/captions.yml @@ -0,0 +1,7 @@ +es: + captions: + terminal: "Escribe esto en la línea de comandos:" + irb: "Escribe esto en irb:" + result: "Resultado esperado:" + fuzzy_result: "Resultado aproximado esperado:" + link: "Ir a" diff --git a/locales/es/general.yml b/locales/es/general.yml new file mode 100644 index 000000000..116fb0f16 --- /dev/null +++ b/locales/es/general.yml @@ -0,0 +1,14 @@ +es: + general: + type_in_file: "Escribe esto en el archivo %{filename}:" + further_reading: "Lectura adicional" + fuzzy_hint: "El texto en gris puede variar y no es tan importante." + step_title: "Paso %{num}" + step_title_suffix: ": " + next_step: "Próximo paso:" + option: "Opción %{num}: " + verify: "Verifica %{text}" + goals: "Objetivos" + expand_all: "Expandir Todo" + other_pages: "Otras Páginas" + back_to: "Regresar a" diff --git a/locales/es/header_sections.yml b/locales/es/header_sections.yml new file mode 100644 index 000000000..79751c5ab --- /dev/null +++ b/locales/es/header_sections.yml @@ -0,0 +1,10 @@ +es: + header_section: + steps: "Pasos" + explanation: "Explicación" + overview: "Resumen" + discussion: "Elementos para discusión" + hints: "Pistas" + challenge: "Reto(s)" + tools_and_references: "Herramientas y Referencias" + requirements: "Requisitos para avanzar" diff --git a/locales/es/sites.yml b/locales/es/sites.yml new file mode 100644 index 000000000..1cdac0ba2 --- /dev/null +++ b/locales/es/sites.yml @@ -0,0 +1,3 @@ +es: + sites: + other_categories: Otras cosas diff --git a/locales/zh-tw/captions.yml b/locales/zh-tw/captions.yml new file mode 100644 index 000000000..a4947bae8 --- /dev/null +++ b/locales/zh-tw/captions.yml @@ -0,0 +1,7 @@ +zh-tw: + captions: + terminal: "在終端機打這些字：" + irb: "在 irb 打這些字：" + result: "預期的結果：" + fuzzy_result: "大概預期的結果：" + link: "來這裡：" diff --git a/locales/zh-tw/general.yml b/locales/zh-tw/general.yml new file mode 100644 index 000000000..e0437e289 --- /dev/null +++ b/locales/zh-tw/general.yml @@ -0,0 +1,14 @@ +zh-tw: + general: + type_in_file: "在 %{filename} 檔裡面打這些字：" + further_reading: "延伸閱讀" + fuzzy_hint: "塗灰的字可能有所不同，不重要。" + goals: "目標" + verify: "檢查 %{text}" + option: "選項 %{num}：" + next_step: "下一步：" + step_title: "步驟 %{num}" + step_title_suffix: "：" + expand_all: "全部展開" + other_pages: "其他頁面" + back_to: "回到" diff --git a/locales/zh-tw/header_section.yml b/locales/zh-tw/header_section.yml new file mode 100644 index 000000000..645c69d33 --- /dev/null +++ b/locales/zh-tw/header_section.yml @@ -0,0 +1,10 @@ +zh-tw: + header_section: + steps: "步驟" + explanation: "解說" + overview: "摘要" + discussion: "討論" + hints: "秘訣" + challenge: "挑戰" + tools_and_references: "工具、參考資料" + requirements: "通關條件" diff --git a/public/img/grid.jpg b/public/img/grid.jpg new file mode 100644 index 000000000..0fd08d988 Binary files /dev/null and b/public/img/grid.jpg differ diff --git a/public/img/macface.jpg b/public/img/macface.jpg deleted file mode 100644 index ad64b2cd7..000000000 Binary files a/public/img/macface.jpg and /dev/null differ diff --git a/public/img/macos.png b/public/img/macos.png new file mode 100644 index 000000000..3cfddbd35 Binary files /dev/null and b/public/img/macos.png differ diff --git a/public/img/windows.png b/public/img/windows.png index 938bf552c..a2ef856f8 100644 Binary files a/public/img/windows.png and b/public/img/windows.png differ diff --git a/sites/en/docs/docs.step b/sites/docs/docs.step similarity index 65% rename from sites/en/docs/docs.step rename to sites/docs/docs.step index df5acdd32..dba228e3a 100644 --- a/sites/en/docs/docs.step +++ b/sites/docs/docs.step @@ -1,11 +1,13 @@ message <our Discourse forum. (Volunteers to answer questions always needed, too!) MARKDOWN h1 'Setup' site_desc 'installfest', <<-MARKDOWN -Instructions for installing Ruby and Rails on your computer. You are required to do this before going to a Rails workshop! +Instructions for installing Ruby and Rails on your computer. You need to complete these steps before starting a Rails workshop! MARKDOWN h1 'Rails' @@ -18,8 +20,12 @@ site_desc 'job-board', <<-MARKDOWN Build a simple job board from scratch with a little less of the magic of Rails scaffolding. This curriculum is great for a second or third RailsBridge attendee or for students who want to focus on how the app is wired together. (This curriculum doesn't include deploying to the Internet.) MARKDOWN -site_desc 'intermediate-rails', <<-MARKDOWN -Curriculum for students who have completed the Suggestotron and the Job Board curricula. 'Easy mode' is now OFF - this curriculum won't tell you what to type in! +site_desc 'message-board', <<-MARKDOWN +Build a message board! This curriculum is for students who have completed the Suggestotron and the Job Board curricula. This curriculum is a challenge because it won't tell you what to type in! +MARKDOWN + +site_desc 'testing-rails-applications', <<-MARKDOWN +Increase the stability of your Rails app by learning about tests: what they are, why they're used, and how to use them! This curriculum is for students who have completed the Suggestotron, the Job Board, and the Message Board curricula. There will be challenges! MARKDOWN h1 'Frontend' @@ -28,16 +34,18 @@ site_desc 'frontend', <<-MARKDOWN HTML + CSS for beginners. Make a website, no server required! MARKDOWN +h1 'Javascript' + site_desc 'javascript-snake-game', <<-MARKDOWN -A Javascript specific curriculum that walks you through building a simple game. +A beginner Javascript specific curriculum that walks you through building a simple game. MARKDOWN site_desc 'javascript-to-do-list', <<-MARKDOWN -An all JavaScript curriculum that builds a simple to do list application using AJAX and jQuery. +An intermediate all JavaScript curriculum that builds a simple to do list application using AJAX and jQuery. MARKDOWN site_desc 'javascript-to-do-list-with-react', <<-MARKDOWN -An all JavaScript curriculum that builds a simple to do list application using AJAX, jQuery, and React. Meant for +An advanced all JavaScript curriculum that builds a simple to do list application using AJAX, jQuery, and React. Meant for students with some exposure to JavaScript. MARKDOWN @@ -67,7 +75,7 @@ Anyone can use this site! It's under a Creative Commons license ([CC-BY, specif Slightly different: if you're organizing an event and wonder if it could be considered a RailsBridge Workshop, we have two requirements: * The event should be free of charge. -* The event should target a group of people that is underrepresented in tech, such as LGBTQ folks, women, black or latin@ people, or others. +* The event should target a group of people that is underrepresented in tech, such as LGBTQ folks, women, black or latinx people, or others. If you're not doing those two things, you can totally still use the site, we just ask that you not call your event a RailsBridge workshop. (Charity workshops have used "Rails Workshop featuring the RailsBridge curriculum" in the past, which is neat.) @@ -75,9 +83,9 @@ If you're not doing those two things, you can totally still use the site, we jus ### I want to help, but I don't know how. -First, [make a GitHub account](https://github.com/). Then, [create an issue](https://github.com/railsbridge/docs/issues) with the idea you have. We'll help you turn it into reality (assuming it's in line with our lofty goals :D). +First, [make a GitHub account](https://github.com). Then, [create an issue](https://github.com/railsbridge/docs/issues) with the idea you have. We'll help you turn it into reality (assuming it's in line with our lofty goals :D). -Don't know what you could work on? Browse the [issues list](https://github.com/railsbridge/docs/issues) and the [To Do list](https://github.com/railsbridge/docs/wiki/RailsBridge-To-Do-List). Those have lots of ideas. +Don't know what you could work on? Browse the [issues list](https://github.com/railsbridge/docs/issues) and the [Volunteer Opportunities List](https://github.com/railsbridge/docs/wiki/RailsBridge-Volunteer-Opportunities). Those have lots of ideas. ### I have a different question about RailsBridge. diff --git a/sites/en/frontend/HTML_structure.step b/sites/en/frontend/HTML_structure.step deleted file mode 100644 index 6ab1acd99..000000000 --- a/sites/en/frontend/HTML_structure.step +++ /dev/null @@ -1,83 +0,0 @@ -goals do - goal "Add standard HTML head and body tags" - goal "Add a page title" - goal "Understand the use of non-visible tags like head" -end - -overview do - - message <<-MARKDOWN - -## The HTML tag and Doctype - -The line `` is called the doctype, and it tells the browser which flavor of HTML you're using. `` tells your browser you're using HTML5, the latest version of HTML. - -(You may see older doctypes out there that are longer and a lot more complicated, from when people -used various HTML and XHTML versions, but those are annoying, and you can usually just -use this short version for new websites.) - -The `` encloses all the rest of your page, and states unequivocally, "Here is my HTML!!!" - -## Pages, Like People, Have a Head and a Body - - MARKDOWN - source_code :html, < - - Invisible, Important Stuff - Actual Visible Content - -HTML - message <<-MARKDOWN - -### The Head - -The head contains information _about_ the document, including: - -* what language or character set you're using -* what the page title should be -* what CSS and JavaScript files to include (and where they are) - -Information in the `` section is __not__ displayed. - -It can also contain metadata tags that can tell a search engine or another -program more about the file, like who wrote it or what keywords are relevant. - -### The Body - -The Body contains the actual content of your file, the things you'll want your users -to be able to see, read, or interact with! - - MARKDOWN - -end - -steps do - - step do - message <<-MARKDOWN -Let's add the doctype, HTML, head, and body tags to your file. It should look like this: - - - -Save the file and refresh your browser. Everything should look mostly the same. - - MARKDOWN - end - - step do - message "Let's add a title to our page within the `` section. Add this line:" - source_code :html, "My Sample HTML page" - message <<-MARKDOWN -When you refresh your browser, you should see the title on the tab in Chrome. - - - -(If it doesn't show up, double check that you put the line between the opening and closing head tags, and that you saved your file before refreshing.) - MARKDOWN - end - -end - -next_step "basic_CSS" - diff --git a/sites/en/frontend/_consider_deploying_to_github.step b/sites/en/frontend/_consider_deploying_to_github.step deleted file mode 100644 index 1403ca1b6..000000000 --- a/sites/en/frontend/_consider_deploying_to_github.step +++ /dev/null @@ -1,7 +0,0 @@ -div :class => "deploying" do - h1 "Deploying" - blockquote do - message "Before the next step, you could try deploying your page to Github!" - link 'deploying_to_github_pages' - end -end diff --git a/sites/en/frontend/deploying_to_github_pages.step b/sites/en/frontend/deploying_to_github_pages.step deleted file mode 100644 index 03bcda0c8..000000000 --- a/sites/en/frontend/deploying_to_github_pages.step +++ /dev/null @@ -1,146 +0,0 @@ -h2 do - span "If you haven't yet deployed to Github, start at " - a 'First-time setup', :href => '#first-time' - span ". Otherwise, start at " - a 'Every time', :href => '#every-time' - span "." -end - -important "If you have _any_ problems with these steps, grab a TA and have them help you out." -important "If you don't know if you have Git installed or have a GitHub account, it's probably better to develop locally (and not do these steps for now) and install Git later." - -a :name => 'first-time' -situation "First-time setup" do - goals do - goal "Create a new git repository locally" - goal "Create a new git repository on Github" - goal "Push your local repository to Github" - end - - steps do - tip "If you have a 'railsbridge' folder on your computer or some other place you like to keep project files, `cd` to that directory and then follow the steps below." - - step "Make a special new directory" do - message "To get started on the project, you'll need to open up your command line. If you have a Mac, open up the Terminal app. If you're on a PC, look for a program called Command Prompt. You'll also need to know your Github user name and password, so go ahead and double-check it if you don't remember. Wherever you see `[your-github-user-name]`, you'll replace that with your user name (and delete the braces)." - console "mkdir [your-github-user-name].github.io" - message "`mkdir` stands for 'make directory.' You just made a new directory that you'll put your project files in." - end - - step "Initialize a new local git repository" do - console "cd [your-github-user-name].github.io" - message "You just changed directories and moved into the folder you just created." - console "git init" - message "You just initialized an empty repository, i.e. told git, 'I want to start a new project here.'" - end - - step "Make a commit" do - console "touch index.html\ngit add index.html" - message "This creates a blank, new file called 'index.html'. The next line tells git you want to stage the file." - console "git commit -m 'first commit'" - message "You just made an initial commit. (Think of it as a snapshot of your project that you can come back to later.)" - end - - step "Add Github as a remote" do - message "You really do have to type your user name three times in the next command. Get ready for it." - console "git remote add origin https://[your-github-user-name]@github.com/[your-github-user-name]/[your-github-user-name].github.io.git" - - message "You just set up a 'remote' — a git repository somewhere else (in this case, on Github) that also holds your project files." - end - - step "Create a new repo via the Github UI" do - tip "You can skip this step if you've created a ***[your-github-user-name].github.io*** page previously." - message "Navigate to https://github.com/[your-github-user-name]/" - message "Click 'Create a new repo' in the upper right" - img :src => "img/github_create_repo.png" - message "Type **[your-github-user-name].github.io** into the 'Repository name' box" - img :src => "img/github_name_your_repo.png" - - important "DO NOT choose 'Initialize this repository with a README' when creating the repo." - end - - step "Push your code to Github" do - message "Now, push the new file you just committed to Github." - console 'git push -u origin master' - message "You'll probably be prompted to type your Github password at this point. After you do, you'll have just pushed your project to Github's servers!" - important "If you have existing content in your Github pages repo, this command will fail, and you will have to do a `git push -uf origin master` instead. Verify with a TA first that you're doing the right thing." - end - - step do - message "Woohoo!!! Take a breath and wait 15 minutes." - message "Because you gave your Github repository a special name (in the format [your-github-user-name].github.io), Github will automatically take the contents of this one repository and make them your personal web page on Github. But there's a small lag between the first push and being able to see your content on the web." - message "In 15 minutes, when you visit [your-github-user-name].github.io in a browser, you should see a blank white page. This is great! You're looking at the index.html file you just created, now live on the web!" - end - end -end - -a :name => 'every-time' -situation "Every time" do - goals do - goal "Commit your changes to locally" - goal "Push your changes to Github" - end - - step "Commit any pending changes to git" do - message "Github will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed." - console "git status" - message "`git status` shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise..." - - console <<-SHELL -git add . -git commit -m "Some helpful message for your future self" - SHELL - message "Your commit message should reference whatever your outstanding changes are: something like 'added new cat picture'." - end - - step "Push changes to Github" do - console "git push origin master" - message "This takes all changes you've committed locally and pushes them to Github." - end - - step "Visit your site" do - message "Go to your browser and navigate to **[your-github-user-name].github.io**" - message "You should see the changes you made, but ON THE INTERNET!" - end -end - -explanation do - message <<-MARKDOWN - -## What is Git? - -Git is an open-source tool for tracking and managing changes to source code. If you've -used tools like SVN or CVS, you can use Git to do the same things. - -Git is not required for front end development at all — some people use other source -control tools like SVN, and there are wild and crazy coders who don't use source control -at all. - -### But here are some good reasons to use a source control system: - -* You can commit different/earlier versions of a project, and get them back - later if you change your mind. -* It's easy to also copy these versions to another server or computer, so you - have a backup if your laptop is stolen or your hard drive gets damaged. -* Other coders can more easily work on a project with you. Source control - systems have an automated way to 'merge' or combine changed files together. - -### And there are some neat things about Git specifically: - -* Git is distributed. Each person or computer working on the project has a full - copy of it. There isn't a remote server you have to connect to that has the - 'official' copy somewhere. -* Git makes it easy to 'branch' or work separately for a while on an alternate - version of the project, and then 'merge' those changes back in if you want to. -* Git is ultra-powerful, and even many experienced developers are mystified - by its wily ways. - -## What is Github? - -Github is a web application that will store copies of your git repositories for you. -It's a convenient place to keep a backup of your projects, and it has a nice-looking -web interface that makes it easy to see your files and changes. - -Projects that you make public (i.e. open source) can be stored on Github for free. - - MARKDOWN -end \ No newline at end of file diff --git a/sites/en/frontend/get_a_sticker_admin_button.png b/sites/en/frontend/get_a_sticker_admin_button.png deleted file mode 100644 index 81c607673..000000000 Binary files a/sites/en/frontend/get_a_sticker_admin_button.png and /dev/null differ diff --git a/sites/en/frontend/get_a_sticker_admin_settings.png b/sites/en/frontend/get_a_sticker_admin_settings.png deleted file mode 100644 index ba89060e7..000000000 Binary files a/sites/en/frontend/get_a_sticker_admin_settings.png and /dev/null differ diff --git a/sites/en/frontend/get_a_sticker_fork_button.png b/sites/en/frontend/get_a_sticker_fork_button.png deleted file mode 100644 index a53be0e41..000000000 Binary files a/sites/en/frontend/get_a_sticker_fork_button.png and /dev/null differ diff --git a/sites/en/frontend/get_a_sticker_https.png b/sites/en/frontend/get_a_sticker_https.png deleted file mode 100644 index 4a7851a7d..000000000 Binary files a/sites/en/frontend/get_a_sticker_https.png and /dev/null differ diff --git a/sites/en/frontend/get_a_sticker_output.png b/sites/en/frontend/get_a_sticker_output.png deleted file mode 100644 index 59b5bdf7d..000000000 Binary files a/sites/en/frontend/get_a_sticker_output.png and /dev/null differ diff --git a/sites/en/frontend/img/boxmodel.png b/sites/en/frontend/img/boxmodel.png deleted file mode 100644 index 5c2a00af4..000000000 Binary files a/sites/en/frontend/img/boxmodel.png and /dev/null differ diff --git a/sites/en/frontend/img/css.png b/sites/en/frontend/img/css.png deleted file mode 100644 index df624ba25..000000000 Binary files a/sites/en/frontend/img/css.png and /dev/null differ diff --git a/sites/en/frontend/img/css_bundler.png b/sites/en/frontend/img/css_bundler.png deleted file mode 100644 index 4fcb6255e..000000000 Binary files a/sites/en/frontend/img/css_bundler.png and /dev/null differ diff --git a/sites/en/frontend/img/css_class.png b/sites/en/frontend/img/css_class.png deleted file mode 100644 index bdee35222..000000000 Binary files a/sites/en/frontend/img/css_class.png and /dev/null differ diff --git a/sites/en/frontend/img/css_id.png b/sites/en/frontend/img/css_id.png deleted file mode 100644 index c0dedb3a7..000000000 Binary files a/sites/en/frontend/img/css_id.png and /dev/null differ diff --git a/sites/en/frontend/img/css_zen.png b/sites/en/frontend/img/css_zen.png deleted file mode 100644 index ed90213f1..000000000 Binary files a/sites/en/frontend/img/css_zen.png and /dev/null differ diff --git a/sites/en/frontend/img/devtools.png b/sites/en/frontend/img/devtools.png deleted file mode 100644 index e5f9016f3..000000000 Binary files a/sites/en/frontend/img/devtools.png and /dev/null differ diff --git a/sites/en/frontend/img/devtools_console.png b/sites/en/frontend/img/devtools_console.png deleted file mode 100644 index 82a6dce39..000000000 Binary files a/sites/en/frontend/img/devtools_console.png and /dev/null differ diff --git a/sites/en/frontend/img/devtools_elements.png b/sites/en/frontend/img/devtools_elements.png deleted file mode 100644 index e94d61176..000000000 Binary files a/sites/en/frontend/img/devtools_elements.png and /dev/null differ diff --git a/sites/en/frontend/img/devtools_network.png b/sites/en/frontend/img/devtools_network.png deleted file mode 100644 index 385ecf0cb..000000000 Binary files a/sites/en/frontend/img/devtools_network.png and /dev/null differ diff --git a/sites/en/frontend/img/devtools_script.png b/sites/en/frontend/img/devtools_script.png deleted file mode 100644 index f2716dbea..000000000 Binary files a/sites/en/frontend/img/devtools_script.png and /dev/null differ diff --git a/sites/en/frontend/img/github.png b/sites/en/frontend/img/github.png deleted file mode 100644 index fe3db18da..000000000 Binary files a/sites/en/frontend/img/github.png and /dev/null differ diff --git a/sites/en/frontend/img/github_create_repo.png b/sites/en/frontend/img/github_create_repo.png deleted file mode 100644 index aa73d29e6..000000000 Binary files a/sites/en/frontend/img/github_create_repo.png and /dev/null differ diff --git a/sites/en/frontend/img/github_name_your_repo.png b/sites/en/frontend/img/github_name_your_repo.png deleted file mode 100644 index 51221e7cf..000000000 Binary files a/sites/en/frontend/img/github_name_your_repo.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_html.png b/sites/en/frontend/img/hello_html.png deleted file mode 100644 index 6506a7d7b..000000000 Binary files a/sites/en/frontend/img/hello_html.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_omg.png b/sites/en/frontend/img/hello_omg.png deleted file mode 100644 index 89feaa523..000000000 Binary files a/sites/en/frontend/img/hello_omg.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_structure.png b/sites/en/frontend/img/hello_structure.png deleted file mode 100644 index 2de4d2c42..000000000 Binary files a/sites/en/frontend/img/hello_structure.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_style.png b/sites/en/frontend/img/hello_style.png deleted file mode 100644 index ab0bc86c0..000000000 Binary files a/sites/en/frontend/img/hello_style.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_title.png b/sites/en/frontend/img/hello_title.png deleted file mode 100644 index 8ecbcba7d..000000000 Binary files a/sites/en/frontend/img/hello_title.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_world.png b/sites/en/frontend/img/hello_world.png deleted file mode 100644 index 756e926cc..000000000 Binary files a/sites/en/frontend/img/hello_world.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_world_2line.png b/sites/en/frontend/img/hello_world_2line.png deleted file mode 100644 index 4b8bcc391..000000000 Binary files a/sites/en/frontend/img/hello_world_2line.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_world_2line2.png b/sites/en/frontend/img/hello_world_2line2.png deleted file mode 100644 index a2d654cda..000000000 Binary files a/sites/en/frontend/img/hello_world_2line2.png and /dev/null differ diff --git a/sites/en/frontend/img/hello_world_jazzy.png b/sites/en/frontend/img/hello_world_jazzy.png deleted file mode 100644 index 856d8f27d..000000000 Binary files a/sites/en/frontend/img/hello_world_jazzy.png and /dev/null differ diff --git a/sites/en/frontend/img/html_tags_list.png b/sites/en/frontend/img/html_tags_list.png deleted file mode 100644 index 4c05f8948..000000000 Binary files a/sites/en/frontend/img/html_tags_list.png and /dev/null differ diff --git a/sites/en/frontend/img/jquery_result.png b/sites/en/frontend/img/jquery_result.png deleted file mode 100644 index 8a6c2d8c3..000000000 Binary files a/sites/en/frontend/img/jquery_result.png and /dev/null differ diff --git a/sites/en/frontend/img/page.png b/sites/en/frontend/img/page.png deleted file mode 100644 index 5a483bb9d..000000000 Binary files a/sites/en/frontend/img/page.png and /dev/null differ diff --git a/sites/en/frontend/img/page_anchors.png b/sites/en/frontend/img/page_anchors.png deleted file mode 100644 index 00cccc4de..000000000 Binary files a/sites/en/frontend/img/page_anchors.png and /dev/null differ diff --git a/sites/en/frontend/img/page_html.png b/sites/en/frontend/img/page_html.png deleted file mode 100644 index ba67062a0..000000000 Binary files a/sites/en/frontend/img/page_html.png and /dev/null differ diff --git a/sites/en/frontend/img/page_img.png b/sites/en/frontend/img/page_img.png deleted file mode 100644 index 002be9559..000000000 Binary files a/sites/en/frontend/img/page_img.png and /dev/null differ diff --git a/sites/en/frontend/img/page_sample.jpg b/sites/en/frontend/img/page_sample.jpg deleted file mode 100644 index dcfcbb0e5..000000000 Binary files a/sites/en/frontend/img/page_sample.jpg and /dev/null differ diff --git a/sites/en/frontend/img/page_sample.png b/sites/en/frontend/img/page_sample.png deleted file mode 100644 index 9ad7c461a..000000000 Binary files a/sites/en/frontend/img/page_sample.png and /dev/null differ diff --git a/sites/en/frontend/img/prompt.png b/sites/en/frontend/img/prompt.png deleted file mode 100644 index ecc83fdba..000000000 Binary files a/sites/en/frontend/img/prompt.png and /dev/null differ diff --git a/sites/en/frontend/img/zip.png b/sites/en/frontend/img/zip.png deleted file mode 100644 index 549fa783b..000000000 Binary files a/sites/en/frontend/img/zip.png and /dev/null differ diff --git a/sites/en/frontend/jquery_vs_javascript.step b/sites/en/frontend/jquery_vs_javascript.step deleted file mode 100644 index b57bddc0e..000000000 --- a/sites/en/frontend/jquery_vs_javascript.step +++ /dev/null @@ -1,46 +0,0 @@ -goals do - goal "Write some straight JavaScript" - goal "Compare that JavaScript to jQuery" -end - -steps do - - step do - message "On the last page, we wrote some jQuery that looked like this. Let's comment it out for now, and see if we can replicate the same functionality in straight JavaScript. Add comment tags before these lines. In JavaScript, the easiest way to comment out a line is to put a `//` at the beginning. Go ahead and try this:" - source_code :js, <<-JS -//$("#copyright").click(function(){ -// $(this).css('color','purple'); -//});" - JS - message "Now if you save the page, refresh, and click the copyright line, nothing should happen." - end - - step do - message "Underneath the lines you just commented out, let's take a shot at writing the same functionality in straight JavaScript. There are a number of elegant ways to do this; here's one that's not elegant, but it's short:" - source_code :js, <<-JS -document.getElementById('copyright').onclick = function () { - this.style.color = 'purple'; -} - JS - message "If you save the page, refresh, and click, you should see the same visual result (purple text), but this isn't a great approach for a couple of reasons. Not only is this more typing, and harder to read, it's also easily breakable. (You can only set an element's onclick attribute to one thing, so it might get overwritten by another script on the page and not work later!) jQuery works in a different way, by listening for events, so different functions can all be listening for the same event, and you can add a new response to an event without worrying about overwriting an existing one." - end - -end - -explanation do - - message <<-MARKDOWN - -## So Should I Use JavaScript or jQuery? - -Don't forget that everything you can do with jQuery, you can do with straight JavaScript. -If you want to start building cool user interface features right away, jQuery will probably -help you do that the fastest. But, long-term, to be great at jQuery, you really need to -understand the language it's written in: JavaScript. It's worthwhile to learn about both. - - - MARKDOWN - -end - -next_step 'resources' diff --git a/sites/en/frontend/make_a_web_page.step b/sites/en/frontend/make_a_web_page.step deleted file mode 100644 index 5fd8b0e09..000000000 --- a/sites/en/frontend/make_a_web_page.step +++ /dev/null @@ -1,97 +0,0 @@ -goals do - goal "Check out your starter files in the browser" - goal "Compare strategies for CSS and JavaScript inclusion (inline vs. link)" -end - -steps do - - step do - message <<-MARKDOWN -Drag the 'index.html' page from your project onto the icon of your web browser. Your browser should look like this: - - - - MARKDOWN - end - - step do - message <<-MARKDOWN -Drag the 'index.html' page from your project onto the icon of your text editor. The text editor should look like this: - - - -Opening the same file in a browser and in a text editor lets you see the effects of each code change right after you make it. - MARKDOWN - end - - step do - message <<-MARKDOWN -You'll remember when we were working on our hello.html file, we put JavaScript and CSS directly into the HTML document. But you can also include js and css in external files, with a link. - -This file, 'index.html', includes a link to a JavaScript file and a CSS file, but they're commented out (i.e. wrapped in an HTML tag that tells the browser, 'ignore this!'). - -HTML comment tags begin with ``. Here's an example: - MARKDOWN - source_code :html, "" - message "Look through index.html and find the links to the CSS and JavaScript files. Delete the comment tags from around them, so the browser will read them." - end - -end - -explanation do - - message <<-MARKDOWN - -## Inline vs. Linked - -Javascript and CSS can both be put directly into the HTML page, but on bigger projects, -you'll usually want to place your js and CSS in separate files and include those files -in your HTML with a link. - -Linking files will help you keep your code organized and easier to maintain. It means, -for example, that if you change the style of buttons on your website, you'll be able to -change it in just one place, instead of having to update every page. - -### Javascript - -* A JavaScript tag looks like this when it's wrapping code written right into the HTML page: - - MARKDOWN - source_code :html, <<-HTML - - HTML - message <<-MARKDOWN - -* A JavaScript tag looks like this when it's a link: - - MARKDOWN - source_code :html, <<-HTML - - HTML - message <<-MARKDOWN - -### CSS - -* A CSS stylesheet looks like this when it's written right into the HTML page: - - MARKDOWN - source_code :html, <<-HTML - - HTML - message <<-MARKDOWN - -* A CSS tag looks like this when it's a link: - - MARKDOWN - source_code :html, <<-HTML - - HTML -end - -insert 'consider_deploying_to_github' - -next_step "add_more_elements" diff --git a/sites/en/frontend/make_columns.step b/sites/en/frontend/make_columns.step deleted file mode 100644 index be6ecf243..000000000 --- a/sites/en/frontend/make_columns.step +++ /dev/null @@ -1,50 +0,0 @@ -goals do - message "These challenges will have you diving into the CSS side of things. Open up that layout.css file and take a look." - goal "Give your main content a border" - goal "Make two columns and line them up side by side" -end - -steps do - - step do - message "CHALLENGE: Find the div with the id 'main' in your HTML. See if you can give it a one-pixel border on its left hand side by modifying the existing stylesheet, 'layout.css'." - message "If you get hung up on what CSS property to use, see if you can look it up on [dochub](http://dochub.io/#css/)." - end - - step do - message "CHALLENGE: If you styled the #main div in the previous step by using a style rule like `#main { property: value; }`, see if you can come up with a second rule that could also apply the same style, but use a different selector." - message "Hint: You can select an element that's _inside_ of another element by listing one selector after another. The selector `.content div {}` would apply to any divs inside of an element with class `content`" - end - - step do - message "CHALLENGE: See if you can turn the page into a two-column layout. Make the 'nav' div the left column, and the 'main' div the right column." - message "Two hints: it may be helpful to give these divs a fixed width, and you may need the `float` property." - end - - message "" -end - -explanation do - - message <<-MARKDOWN - -## More CSS! - -For some great examples of the power of CSS, check out the [CSS Zen Garden](http://www.csszengarden.com/). It takes -the same HTML, but shows it with stylesheets from a bunch of different designers applied to -it. Here are two different designers' interpretations of the same HTML: - - - -### CSS Reference Sites - -* [Sitepoint](http://reference.sitepoint.com/css/elements-structural) -* [Mozilla Developer Network](https://developer.mozilla.org/en/CSS) -* [DocHub](http://dochub.io/#css/) - - MARKDOWN -end - -insert 'consider_deploying_to_github' - -next_step "basic_javascript" diff --git a/sites/en/frontend/resources.step b/sites/en/frontend/resources.step deleted file mode 100644 index 87e89cd42..000000000 --- a/sites/en/frontend/resources.step +++ /dev/null @@ -1,18 +0,0 @@ -message <, scroll to the 'Downloads' section, and download the RailsInstaller for Windows/Ruby 2.1. - - Click on the downloaded file to run the install wizard. Click Next at each step to accept the defaults. - - Be sure to check the boxes for *Install git (recommended)* and *Add executables for Ruby, DevKit Git (if checked above) to the PATH* - - ![WinRailsInstaller.jpg](img/WinRailsInstaller.jpg) - - Rails will be installed in C:\\RailsInstaller and the directory for your Rails projects will be C:\\Sites - - MARKDOWN -end - -step "Configure your git and ssh environment" do - - important "At the end of the installer there will be a checkbox asking 'configure your git and ssh environment'. **Leave this box checked.** It will open a terminal window that you need to **type into**." - - message "When it asks *Please enter your name, for example mine is: Wayne E. Seguin*" - message "Type *your actual full name* into the console and press **[enter]**" - - message "When it asks *Please enter your email address, for example mine is: wayneeseguin@gmail.com*" - message "Type *your actual email address* into the console and press **[enter]**" - - important "Use the **same email address** for heroku, git, github, and ssh." - - tip do - message "After this step you will have some **git config settings** and you will also have an **ssh key**." - end - -end - -step "Windows 8 Only — Install Node.js" do - - message "Go to and download the installer" - - message "Click on the downloaded file to run the install wizard. Click Next at each step to accept the defaults." - - message "**Reboot your computer.**" - - message "Once your computer is back up, load **Command Prompt with Ruby and Rails** (see below) and..." - - console "node -v" - fuzzy_result "v0{FUZZY}.8.x{/FUZZY}" -end - -step "Update Rails" do - message "Currently, RailsInstaller installs Rails 4.1.x, but we want the latest. Upgrading Rails is pretty easy:" - - console "gem install rails" - - message "...and you're done. New Rails! Woo." -end - -step "Sanity Check" do - - console "ruby -v" - fuzzy_result "ruby 2.1.5{FUZZY}p125{/FUZZY}" - - console "rails -v" - fuzzy_result "Rails 4.2{FUZZY}.x{/FUZZY}" - -end - -step "Open a Terminal" do - message "Much of using Rails is typing commands and hitting **[enter]**. Your experience using Rails on Windows greatly depends on your making friends with the terminal window. Normally you will work in a terminal window and keep it open along with your browser." - - tip "The Terminal is also called the Command Prompt, Command Line, DOS Prompt, or DOS Window." - - message "RailsInstaller made a special Terminal for you to use when you're working on Ruby, Rails, or Git." - - message "To open the special Terminal, choose **All Programs** on the Start menu, then choose **RailsInstaller** and then **Command Prompt with Ruby and Rails**. You should do all your Rails work in this RailsInstaller DOS window." - - img src: 'img/railsbridge_findingCommandPrompt.png' - - tip "Pin It to Win It" do - img src: 'img/railsbridge_windowsScreenshot-commandprompt-pinnedtotaskbar.png', alt: 'Pin the Command Prompt to the Task Bar' - end - - message "Here is a summary of your settings after this process:" - - img src: 'img/railsbridge_windowsScreenshot-commandprompt_ror.jpg' - -end - -step "Configure the Windows Terminal" do - message "Take a moment to configure the *Command Prompt with Ruby and Rails* so that it is a good height and width and has a nice font. Hint -- click to open the link below, and when you finish those steps, hit the **back** button in your browser to resume this procedure." - - link "configure_the_windows_terminal" - - tip "Clearing the Terminal" do - message "If you ever want to clear the terminal of all its cluttered output" - console "cls" - end - - tip "Command History" do - message "The terminal window stores a \"command history.\" To view and re-run previous commands, use the <up arrow> and <down arrow> keys. You can also edit a previous command and run it -- this is handy for long commands, or fixing mistakes, or for cycles (series of commands) that you repeat." - end - - tip "Copy and Paste" do - - message "It's usually better to type commands in yourself. It takes a little longer but you learn more." - - message "But if you must... in these instructions, where it says: \"Type this in the terminal:\", you can usually copy the command from this page, and right click in the menu bar or terminal window, then click on \"Paste\", then hit the **[enter]** key." - end -end - -step "Install a Text Editor" do - message "You need a text editor to do Ruby. If you already have a preferred text editor, such as vi, emacs, jedit, etc., you can skip this step. It must be a plain text editor and not something with styling like Microsoft Word or WordPad." - - message "Notepad is not a good programming editor, but it will work in a pinch." - - important "**When in doubt, use Sublime Text 2.**" - - message "[Sublime Text 2](http://www.sublimetext.com/2) is a good option, if you don't have one yet." - - message "Download Sublime Text 2 here: " -end - -next_step "configure_git" diff --git a/sites/en/intermediate-rails/intermediate-rails.step b/sites/en/intermediate-rails/intermediate-rails.step deleted file mode 100644 index bf2d7e1c8..000000000 --- a/sites/en/intermediate-rails/intermediate-rails.step +++ /dev/null @@ -1,40 +0,0 @@ -message <<-MARKDOWN -# Let's build a message board! - -## Assumptions made by this curriculum -* You’ve gone through the standard RailsBridge installfest and have successfully completed the Get a Sticker step. -* You’ve gone through the RailsBridge Suggestotron curriculum at least once before, or maybe a couple of times, or maybe you feel decently comfortable with Rails for some other reason. -* You want to learn more Rails!!! - -## Goals -* Make a thing! -* Understand what the models, views, and controllers of a Rails app do and how they work together. -* Get more comfortable using error messages as guideposts and not as scary things. - -## What’s Going to Happen? -* We’re going to build a message board system, where there are posts on the front page and you click through to see the original post plus discussion below. - -* We’ve divided this into challenges: - * Challenge 1: create a new rails app with a static home page - * Challenge 2: install devise - * Challenge 3: make it pretty with bootstrap - * Challenge 4: add pages to create and look at individual posts - * Challenge 5: make a posts index page - * Challenge 6: add replying - * Challenge 7: inline replying on a post - * Challenge ∞: other features of your choice - -* Each time you get your app into a functional state, before adding any more features, COMMIT TO GIT! The new features will probably break things, which is neat, but you’ll want to be able to roll back to a prior version if necessary. - -MAJORLY IMPORTANT NOTE: We called the sections challenges because they are challenging! This curriculum will be most fun as a collaboration — talk things through with your teacher, TAs, and other students. This is a very different style of curriculum than Suggestotron, so don’t be discouraged if you aren't quite sure what to do next. - -## How to use this curriculum -* Challenges are the big chunks of stuff to work on at a given time. These are gated by requirements — once you (or your group) has completed a set of requirements, go on to the next set. -* Requirements in this curriculum are not entirely divorced from what a requirement is in the agile software development methodology — things that should be in the application as defined by whoever is designing/deciding things about the product. Except here, we’ve also thrown in some non-application requirements, like the ability to explain a concept to a peer. -* Discussions are led by the teacher; this is the closest this curriculum gets to lecture-y teaching. -* Hints are what they sound like, as are Tools & References. - -* Teachers only!: there's a teaching guide at http://bit.ly/int-railsbridge-guide -MARKDOWN - -next_step "create_a_new_rails_app_with_a_static_home_page" diff --git a/sites/en/intro-to-rails/deploying_to_heroku.step b/sites/en/intro-to-rails/deploying_to_heroku.step deleted file mode 100644 index db9067f0d..000000000 --- a/sites/en/intro-to-rails/deploying_to_heroku.step +++ /dev/null @@ -1,119 +0,0 @@ -h2 do - span "If you haven't yet deployed to Heroku, start at " - a 'First-time setup', href: '#first-time' - span ". Otherwise, start at " - a 'Every time', href: '#every-time' - span "." -end - -a name: 'first-time' -situation "First-time setup" do - step "Create a Heroku application" do - console "heroku create" - message "`heroku create` registers a new application on Heroku's system. You should see some output including your new app's URL." - end - - step "Edit the Gemfile" do - important "Each application has its own `Gemfile`. Be sure you're opening the one inside your app's folder." - - message "Heroku will run our application slightly differently than our development computer does, which requires us to make a small change to our `Gemfile`." - - message "Open the file called `Gemfile` in Sublime Text, or your preferred editor, and find the line containing:" - - source_code :ruby, <<-RUBY -gem 'sqlite3' - RUBY - - message "**Remove that line** and replace it with:" - - source_code :ruby, <<-RUBY -group :development, :test do - gem 'sqlite3' -end - -group :production do - gem 'pg' - gem 'rails_12factor' -end - RUBY - end - - step "Apply the Gemfile changes" do - console "bundle install --without production" - message "Every time the `Gemfile` changes, you need to run ``bundle install`` for the changes to be processed. The processed version of the changes is stored in another file called ``Gemfile.lock``." - end - - step "Commit the Gemfile changes" do - message "There are now changes to `Gemfile` and `Gemfile.lock` that need to be committed before we can push to Heroku." - console <<-SHELL -git add . -git commit -m "Changed Gemfile for Heroku" - SHELL - tip "There is a period after the word add in the first line." - end -end - -a name: 'every-time' -situation "Every time" do - step "Commit any pending changes to git" do - message "Heroku will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed." - console "git status" - message "`git status` shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise..." - - console <<-SHELL -git add . -git commit -m "Some helpful message for your future self" - SHELL - message "Your commit message should reference whatever your outstanding -changes are: something like \"Added votes to the topics index\"." - end - - step "Push changes to Heroku" do - console "git push heroku master" - message "This takes all changes you've committed locally and pushes them to Heroku." - end - - step "Run database migrations on Heroku" do - console "heroku run rake db:migrate" - message "This tells Heroku to run your migrations on its database, like -running `rake db:migrate` locally." - message "Heroku's database is separate from the one on your computer, which -means it needs to be updated every time you make changes to the structure of -your database." - message "It also means that you'll not see any of the data you entered into -the `sqlite3` database on your computer." - end - - step "Visit your application" do - console "heroku open" - message "This opens the new application in your browser." - end -end - -explanation do - message <<-MARKDOWN - First, we had to do some work to make Heroku happy with our application. This -required updating the `Gemfile` and bundling. - - * The `Gemfile` is a list of all the Ruby libraries your application needs. - What we've declared here is that we want to use the `sqlite3` library - while we're developing on our computer (the development group) but when - deploying to Heroku (the production group) we want to use the `pg` library, - which is made for the type of database that Heroku uses. - - * Bundler is how Ruby projects keep track of the gems that they use. We told - Bundler what we wanted to use in the `Gemfile`, now we need to make sure those - gems are installed. Since we don't have the type of database Heroku does, we - skip the production gems. Don't worry though! Bundler still logs them so - Heroku will install them when they get your code. - MARKDOWN - - message "You should be able to deploy your application any time it's in a good, working state. Your typical workflow will look like:" - img src: "img/workflow.png", alt: "Diagram showing git workflow of making changes, committing them, and pushing to Heroku.", style: "border: none" - ol do - li { message "Add or change some code" } - li { message "Commit your changes (`git commit`)" } - li { message "(repeat)" } - end - message "Any time your changes are committed, you should feel free to `git push heroku master` and boom! Your changes are live!" -end diff --git a/sites/en/intro-to-rails/img/Seattle_list_with_topic.png b/sites/en/intro-to-rails/img/Seattle_list_with_topic.png deleted file mode 100644 index f7e518ad2..000000000 Binary files a/sites/en/intro-to-rails/img/Seattle_list_with_topic.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/Seattle_topic_created.png b/sites/en/intro-to-rails/img/Seattle_topic_created.png deleted file mode 100644 index 86f122160..000000000 Binary files a/sites/en/intro-to-rails/img/Seattle_topic_created.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/Seattle_topic_list_page.png b/sites/en/intro-to-rails/img/Seattle_topic_list_page.png deleted file mode 100644 index 0de297b07..000000000 Binary files a/sites/en/intro-to-rails/img/Seattle_topic_list_page.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/Start_page.png b/sites/en/intro-to-rails/img/Start_page.png deleted file mode 100644 index 3747ba762..000000000 Binary files a/sites/en/intro-to-rails/img/Start_page.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/finished_app.png b/sites/en/intro-to-rails/img/finished_app.png deleted file mode 100644 index dc197b277..000000000 Binary files a/sites/en/intro-to-rails/img/finished_app.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/seattle_display_vote_count.png b/sites/en/intro-to-rails/img/seattle_display_vote_count.png deleted file mode 100644 index d718f8cf4..000000000 Binary files a/sites/en/intro-to-rails/img/seattle_display_vote_count.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/sublime_add_folder_to_project.png b/sites/en/intro-to-rails/img/sublime_add_folder_to_project.png deleted file mode 100644 index cfa3e5873..000000000 Binary files a/sites/en/intro-to-rails/img/sublime_add_folder_to_project.png and /dev/null differ diff --git a/sites/en/intro-to-rails/img/sublime_project_as_folder.png b/sites/en/intro-to-rails/img/sublime_project_as_folder.png deleted file mode 100644 index 97c045e3c..000000000 Binary files a/sites/en/intro-to-rails/img/sublime_project_as_folder.png and /dev/null differ diff --git a/sites/en/javascript-snake-game/img/helloworld.png b/sites/en/javascript-snake-game/img/helloworld.png deleted file mode 100644 index aaef6f320..000000000 Binary files a/sites/en/javascript-snake-game/img/helloworld.png and /dev/null differ diff --git a/sites/en/javascript-snake-game/javascript-snake-game.step b/sites/en/javascript-snake-game/javascript-snake-game.step deleted file mode 100644 index 7e118c2fe..000000000 --- a/sites/en/javascript-snake-game/javascript-snake-game.step +++ /dev/null @@ -1,56 +0,0 @@ -# Lesson 1 - Building Snake in JavaScript - -markdown <<-MARKDOWN - Today, we're going to recreate the classic game snake in the Javascript - programming language. -MARKDOWN - -canvas id: 'chunk-game', height: 600, width: 800 - -script src: 'js/chunk.js' - -script src: 'js/snake.js' - -markdown <<-MARKDOWN - ### Download the tutorial - - Before you can start the tutorial, you'll need to download the tutorial to your computer - to edit the source code. - - ### Launch your programming environment - - When programming, you'll generally want these tools on hand: - - * Your browser to see the code running (I recommend Chrome) - * A text editor to change the code (I recommend Sublime) - * A javascript console so you can experiment and print out debugging - messages. This is built into your browser. - - Once you have these tools available, we need to open the files we'll be working with: - - * Open game/snake.js in your text editor - * Open game/index.html in your browser - * Open your browser's javascript console - * type `alert("hello world");` in your browser's javascript console and - dismiss the window that pops up - - - - ### Stop and reflect - - * The javascript console is one of the fastest ways to get feedback on - whether the code does what you expect. How else can you get feedback about whether - your code does what you expect? - * Why shouldn't you use Word or Google Docs to edit code? - - ### Helpful Links - - * How to launch dev tools in chrome. - * How to launch dev tools in internet explorer. - * How to launch dev tools in firefox. - * How to launch dev tools in safari. -MARKDOWN - -next_step 'lesson-2' diff --git a/sites/en/javascript-snake-game/lesson-14.md b/sites/en/javascript-snake-game/lesson-14.md deleted file mode 100644 index 7323fcbf4..000000000 --- a/sites/en/javascript-snake-game/lesson-14.md +++ /dev/null @@ -1,53 +0,0 @@ - - -Hosting your game requires you to make the HTML, JavaScript and CSS files -available over the Internet. - -There are three hosting options, depending on how much of a challenge you are looking -for: - -* Use a static site hosting service -* Use git and Github Pages -* Roll your own with a hosting provider - -### Using a Static Site Hosting Service - -If you are brand new to hosting websites, you may want to use a static site -hosting service. These allow you to upload a zip file of html, css and -javascript and have a working website. An easy one is -[Forge](https://getforge.com/). - -1. Sign up for Forge -2. Zip your `js-snake-game-tutorial` directory -3. Drag it into the Forge website - -Now you have a fully functioning game hosted online! Share the link -with your friends and family and wow them with your skills! - -### Using Git and Github Pages - -If you like with git and github, take a stab at setting up your site -with [Github Pages](http://pages.github.com/). The easiest thing to do is: - -1. From the terminal, `cd` into your `js-snake-game-tutorial` directory -1. Turn it into a git repository by running `git init` -1. Checkout a branch called `gh-pages` -1. Commit all the files -1. Create a remote repository on github for the game. -1. Follow their instructions for adding the github remote to your existing repo -1. Follow the instructions on [Github Pages](http://pages.github.com) for - setting up a project site from scratch. -1. Make the `gh-pages` the default branch -1. Push it on up! - -### Rolling Your Own Hosting With a Cloud Provider - -If you secretly are an unix admin who floats in the cloud; consider -using Amazon -[S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) or -[Rackspace Cloud -Files](http://www.rackspace.com/knowledge_center/article/use-cloud-files-to-serve-static-content-for-websites) - -Both of these services are designed to serve up static files without needing to -pay for a virtual server. This makes your monthly hosting bill for even large, -high traffic sites incredibly cheap. diff --git a/sites/en/javascript-snake-game/lesson-2.step b/sites/en/javascript-snake-game/lesson-2.step deleted file mode 100644 index 11be4665f..000000000 --- a/sites/en/javascript-snake-game/lesson-2.step +++ /dev/null @@ -1,100 +0,0 @@ -markdown <<-MARKDOWN - To get started, we want to create a `variable` that represents the - snake. Add the following line to the beginning of game/snake.js: - - ```js - var snake = [{ top: 0, left: 0}]; - ``` - -

Now that we have this amazing snake we want to show it off, right? The - CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK - to `draw` our `snake`!

- - ```js - var drawableSnake = { color: "green", pixels: snake }; - var drawableObjects = [drawableSnake]; - CHUNK.draw([drawableSnake]); - ``` - - CHUNK's `draw` function expects to be given a collection of objects. This - means we must create an array and place the drawableSnake inside of it. Then we - can pass that array into `CHUNK.draw` - - To see what your code does you'll need to save your `snake.js` file and - refresh the browser window that has your index.html in it. We recommend doing - this early and often! - - Congratulations! You've drawn a (very short!) snake on the screen. -MARKDOWN - -js_expected_results 'lesson-2' - -markdown <<-MARKDOWN - ### Play Time! - - * Add comments underneath each line explaining what it does in plain old - english. - * Change the color of the snake. - * Make the snake longer than just 1 segment! - * Draw something in addition to the snake. Perhaps an apple or a wall? Make - sure it's a different color! - - ### What is CHUNK? - When programming, you'll frequently need to solve problems that have been - solved before. In many cases someone who solved the problem already has - packaged their code into a `library`. - - Good libraries tend to: - - * Help you think about the problem you're solving more clearly - * Be well documented - * Solve a small set of closely related problems - - We'll be using the CHUNK library throughout this tutorial. CHUNK is an - example of a library whose job is to: - - * Draw chunky-pixels on the screen! - * Respond to user input - * Start and end a game - * Check for things running into each other - * Be reasonably approachable for novice developers - - ### Syntax Breakdown - - `var` tells the computer to create a variable (in this case named `snake`) - that we can assign a value to. - - `=` (single equals sign) tells the computer to assign the value on the - right of the `=` to the variable on the left of the `=`. - - `[` and `]` (square brackets) come in pairs. They wrap around one or more - values to make a list (often called an array). - - `{` and `}` (curly braces) also come in pairs. In this case they wrap around - pairs of names and values to create an `object` (sometimes called a - `hashmap`). (Note: There is another use of curly braces which we will see - later.) - - `:` (colon - when creating an object) says to create a variable within the - object. It's name (or key) is on the left side of the `:` and it's value is - on the right. - - `,` (comma - when creating an object or map) is used to separate key/value - pairs on the object. - - `;` (semicolon) says "This line is over. Thanks!" - - `.` (period) is used to get the value stored at a key inside an object. - `drawableSnake.color` says "get me the value of the color key in the - drawableSnake variable." What do you think that value is? - - `(` and `)` (parenthesis) also come in pairs. When they come after a - variable, they are saying "run the code stored in this variable." A variable - that stores code that can be run is called a `function`. Values held within - the parenthesis are given to the `function` for whatever it's purpose may - be. In this case, we want to give a collection of drawable things to - CHUNK's draw function so it can draw them on the screen. -MARKDOWN - -next_step "lesson-3" - diff --git a/sites/en/javascript-to-do-list/img/network_tab.png b/sites/en/javascript-to-do-list/img/network_tab.png deleted file mode 100644 index 0bab37307..000000000 Binary files a/sites/en/javascript-to-do-list/img/network_tab.png and /dev/null differ diff --git a/sites/en/javascript/clone_a_repo.step b/sites/en/javascript/clone_a_repo.step deleted file mode 100644 index 79b0d7e76..000000000 --- a/sites/en/javascript/clone_a_repo.step +++ /dev/null @@ -1,51 +0,0 @@ -message <<-MARKDOWN - -# Clone a Repo Contining HTML & CSS - -To review these concepts we will be using Javascript to manipulate a deck of cards that will later be used to make a game. -The HTML and CSS files have been provided for you and can be copied to your local computer by cloning a repository from the Railsbridge GitHub account. -If you have a [graphical user interface client for git](http://git-scm.com/downloads/guis) that you like and know how to use you can use that; -otherwise you can use the console. If the wifi is out, or you have other problems, the instructor can probably supply the files -on a USB stick for you to copy. Remember to ask a TA if you get stuck or need help. - -## Install Git -If you have git installed already, great! If not, you can follow the instructions for installing git from the -[Railsbridge Installfest](http://installfest.railsbridge.org/installfest) for Rails, then return to this page. - - -## Configure Git -Follow the [instructions for configuring git](http://installfest.railsbridge.org/installfest/configure_git) from the -Railsbridge Rails workshop and then return to this page. - -## Clone the Repo / Copy the Files - -Create a directory that you want to save your Railsbridge files in (if you haven't done so before). If you're using the console type: -$`mkdir railsbridge` -then, to change to that directory -$`cd railsbridge` . - -+ To clone the repo from the Railsbridge repository type: -$`git clone http://whatever-i'll-look-this-up-later` _note: I don't think these files are in the repo yet, -so the correct URL can't be inserted yet_ - this -will save the files from Github to your computer. -+ If you have issues installing git: to download the files as a `.zip` archive, navigate in your browser -to the page containing them on the GitHub site, and click on _Download ZIP_ button and save to your `railsbridge` directory. -+ If you are getting the files from a USB drive, transfer them to your `railsbridge` directory. - -If you got the files as a `.zip` archive, extract them to a directory using your usual methods. -Look at a file listing in your directory to verify the files are there. - -Now you should be ready to start writing javascript to manipulate the elements on the HTML page (the next step). - -## more info on git (extra stuff you can read later if you want) -[Git](http://git-scm.com) is not just used for transferring files, it's one of a variety of -[version control systems](http://en.wikipedia.org/wiki/Comparison_of_revision_control_software) that let -you backup your files and share them with others in group development. Railsbridge has its files on [GitHub](http://github.com), -a [public Git hosting site](https://git.wiki.kernel.org/index.php/GitHosting). - -There are videos and written documentation on using git at [http://git-scm.com/documentation](http://git-scm.com/documentation). -For more information from Railsbridge on using git see: [Railsbridge Guide on How to Git](http://railsbridge.github.io/bridge_troll/). - -MARKDOWN - -next_step 'manipulate_card' diff --git a/sites/en/javascript/javascript.step b/sites/en/javascript/javascript.step deleted file mode 100644 index 43f02193f..000000000 --- a/sites/en/javascript/javascript.step +++ /dev/null @@ -1,41 +0,0 @@ -important <<-MARKDOWN -This page is currently only the seed of what may some day be a curriculum. - -If you're looking for a more complete curriculum, try Javascript Snake Game -MARKDOWN - -message <<-MARKDOWN - -### Goal - -This curriculum is meant to introduce the javascript programming language. It builds on the Front End RailsBridge Curriculum. Anyone familiar with HTML, will be able to work through this curriculum. - -In the workshop, we will: - -* Learn about and use the primitive types of javascript, -* Learn about and use functions and callbacks, -* Understand scope, and the changing value of the keyword 'this' -* Use javascript to create a simple single page application. -* Use git to version control our application. - -This is just a rough guideline, not a mandate. Some steps you'll go over and some you'll go under. It'll all work out by the end of the day. :D - -### Requirements - -We're going to be working with: - -* [Chrome](https://www.google.com/chrome) - (If you're experienced with the developer tools in another browser, that may work too.) -* The code editor of your choice. - [Sublime Text 2](http://www.sublimetext.com/2) is popular and free to download, but you should buy a license if you keep using it after the workshop. - [Komodo Edit](http://www.activestate.com/komodo-edit) is a good open source option, if you don't have one yet. - -Optional tools if you're checking in to GitHub: - -* Git -* Your [GitHub](http://github.com) account -MARKDOWN - -insert '../frontend/working_effectively_and_efficiently' - -next_step 'javascript_not_java' diff --git a/sites/en/javascript/javascript_not_java.step b/sites/en/javascript/javascript_not_java.step deleted file mode 100644 index bc403c29b..000000000 --- a/sites/en/javascript/javascript_not_java.step +++ /dev/null @@ -1,17 +0,0 @@ -message <<-MARKDOWN - -### JavaScript is not Java - -JavaScript, which was created at Netscape in 1995, was originally called LiveScript but was renamed around the same time that Java was becoming a popular new programming language. -But the two are different. - -Whereas Java was meant to run on the server, JavaScript was originally meant to run in the browser and allow the user to manipulate the web document after it was loaded. Nowadays it is also being used as a server-side language. - -### HTML and JavaScript - -HTML lets you create the elements in your document (web page). JavaScript lets you interact with them. The curriculum that follows assumes an understanding of HTML. If you need more background info, please see the Railsbridge Frontend Curriculum. - - -MARKDOWN - -next_step 'clone_a_repo' \ No newline at end of file diff --git a/sites/en/javascript/numbers_strings_and_booleans.step b/sites/en/javascript/numbers_strings_and_booleans.step deleted file mode 100644 index c91b88fef..000000000 --- a/sites/en/javascript/numbers_strings_and_booleans.step +++ /dev/null @@ -1,56 +0,0 @@ -goals do - goal "Use the browser's console" - goal "Understand the primitive types of numbers, strings and booleans" -end - -overview do - message <<-MARKDOWN - -## Using the Browser's Console - -We'll experiment with javascript using the console of our browser. We recommend everyone use Chrome, for consistency through the class. - -To open the console on a Mac, use the shortcut `Command` + `Option` + `J`. To open the console in Windows or Linux, use the keyboard shortcut `Control` + `Shift` + `J`. Alternatively, right click, select 'Inspect Element' from the right-click menu, and click the 'Console' tab. - -The console is where we can experiment with javascript, by typing after the `>` prompt. The console will also show us the return value of an expression we type and will display any errors we get. - -## Numbers -MARKDOWN - -steps do - - step { message "In the console, type `5` and press enter. Notice that it will display the value `5` in response. Thus, our return value for the expression `5` is `5`." } - step { message "Try `typeof(5)` and note what kind of object `5` is."} - step { message "Try creating decimal numbers."} - step { message "Try creating irrational numbers (a number that can only be fully expressed as the ratio of two numbers, like 2/3). Notice that it will convert it to a decimal."} - step { message "Try adding or subtracting numbers in the console by typing `6 + 12` or `15 - 32`."} - step { message "Try an edge case with numbers, like `12 / 0`." } - step { message "To assign a number to a variable, type `favoriteNumber = 5` into the console prompt. Then use favoriteNumber in the next expression, like `favoriteNumber + 7`. Variables in Javascript are traditionally 'camel-cased' with capital letters separating words in a variable name." } - step { message "More complex math, like exponents, will require us to use the Math object, as in `Math.pow(12, 2)`, but that shouldn't stop us from trying it out!"} - step { message "Bonus Points: Check out [Mozilla Developer Network Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) for the Math object, and try using some of the other methods they describe in your console!"} -end - - -message <<-MARKDOWN -## Strings -Strings are units of text, and we encapsulate them in `'single quotes'` or `"double quotes"`. -MARKDOWN -steps do - step { message "Try creating a string by typing `'this is a string'` into the console prompt."} - step { message "You can grab a string's individual characters with `'this is a string'[6]`, where the number 6 is the index of the character you want, starting at 0."} - step { message "Concatenate strings with `'my name is' + 'Michelle' + '.'`."} - step { message "Assign a string to a variable by writing `myName = 'Michelle'`."} - step { message "Use the variable as you would a literal string: `'Is your name ' + myName + '?'`"} - step { message "If you're ahead of others, check out the [MDN docs on strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)."} -end - - -message <<-MARKDOWN -## Booleans (True/False) -Booleans are a type of object used to indicate true or false values in Javascript. They are most often used to help check whether a condition is true or not, or whether something exists. -MARKDOWN -steps do - step {message "Try creating a Boolean by typing `'x = false'`."} - step {message "`Type x==false?console.log(`'yes`'):console.log(`'no`');`."} -end -end \ No newline at end of file diff --git a/sites/en/workshop/teacher_training.deck.md b/sites/en/workshop/teacher_training.deck.md deleted file mode 100644 index a20108da1..000000000 --- a/sites/en/workshop/teacher_training.deck.md +++ /dev/null @@ -1,314 +0,0 @@ - -# Teacher Training - - -# What are we doing here? -* Over the next two hours, we will share advice about how to teach/TA a Railsbridge Open Workshop. -* This will be a conversation, not a lecture. - * You will share your experiences and advice -* (Yes, this is a sneaky way of modeling how you should teach your class) - -## Make sure to go over the entire curriculum tonight -* To make sure there are no surprises -* If you can, do it with another teacher - - -# Who are you? - -* Who has taught before? -* Who has TA'd before? -* Why are you here? - - -# What are the goals of the Railsbridge Open Workshop? - -* Teaching Ruby on Rails? - * Yes, but... -* Teaching programming? - * Yes, but... -* Teaching that code is fun? - * Yes! -* Increase number of female programmers and teachers -* Show that programming is totally not scary - - -# What special challenges do we face as teachers of women? -* Madeline Kunin's research: women self-filter more than men - - -# Stress vs. Learning -* Excitement is good, but stress is bad for learning -* Before anyone touches a keyboard, set up a welcoming classroom environment. - -# How to set up a welcoming classroom environment? - -Discuss! - - -# How to set up a welcoming classroom environment? 1 - -* Smile `:-)` - * But don't be creepy `>;-{` -* Make eye contact -* Tell people how long to expect the process to take -* Admit your ignorance -* Tell people it's ok to make mistakes -* Tell people to take breaks when you're frustrated - -# How to set up a welcoming classroom environment? 2 - -* Assume that anyone you're teaching to has 0 knowledge but infinite intelligence -* Check in a lot -* Use normal language over jargon -* Call newly arrived people in to circle or table -* Ask new people to introduce themselves - -# How to set up a welcoming classroom environment? 3 - -* Say up front that it'll be a collaborative learning environment - * Encourage students to answer each others questions -* Ask students "What do you want to get out of class?" - * Maybe write those on a board -* Keep track of students' backgrounds and call back during the class - * "Oh, you're a DBA, you'll like this part" -* Humor - -# How to set up a welcoming classroom environment? 4 - -* Students have diverse backgrounds - * Treat them with respect and humility - * Try to learn from your students' expertise -* Don't say "no" - * Say "you're heading in the right direction" - * Or "yes, and" -* Don't say "Any questions?" - * Say "What questions do you have?" -* ...? - - -# Introductions - -* Give people a chance to get to know each other in a casual way. -* Go around the table and ask people to share something about themselves - * Name - * Experience or profession - * Why are you here? - * (Better than "What do you want to get out of this?" for beginners) -* Encourage questions & discussion -* Tone: be approachable - - - -# Icebreakers -* Include something weird or meaningless - * What's your least favorite ice cream flavor? - * What one weird thing are you good at? - * Tell us one fact about yourself -- "keep it light" - * What's the first concert you went to? -* Pair up for 1 minute, then introduce your partner -* Remember the point is to get them confident at speaking out loud - - -# HOWTO Encourage Women in Linux - - -* Women have fewer opportunities for friendship or mentoring -* Don't take the keyboard away -* Do give directions and explain them clearly -* Don't make sexual advances towards women -* Don't criticize too much -* Do compliment - - -# How to introduce yourself to the class? -As a teacher or TA... - -* Tell your story -* Tell why you like programming and teaching -* Beware of bragging -* Tell why you care! Why are you getting up on saturday morning to come in here? - - -# What else to cover before starting class? -* Ground Rules -* Schedule -* Installation -* Logistics -* Web Resources - - -# Ground Rules - People may have missed these during the opening session, so briefly cover... - - * Questions are always welcome. Even dumb ones. - * What to expect from the day? - * Where is the bathroom? - * When is lunch? - * Where is the afterparty? - - -# Schedule - -* Everybody comes together for opening session -* Split into smaller groups for morning and afternoon teaching sessions - * This can be chaotic so make sure your students can find you -* Everyone back together for closing session - * Make sure your students know a closing session is coming so they don't run off - - -# What if a student has install trouble? -* Do **not** stop teaching to debug it -* Ask the student to pair up with her neighbor until the next break -* Ask a TA to take a look at it when they get a chance - - -# Web Resources -You should be aware of these, even if you don't tell the students all of them right away. - -* Diagrams: - * REST - * MVC - * MVC - * git -* Workshop Github repo (slides and diagrams) - * - - -# General Teaching Advice - - -# How to work one-on-one with students? -* Never grab someone's keyboard - * This can be offputting and even scary -* Use your words! - * Instead, ask "Do you mind if I type?" or just "May I?" -* How else...? - - -# How should the teacher respond to the first few questions? -* Positively! - * I’m glad you said that - * What an interesting question - * Great question - * I’ve wondered that myself - - -# Questions are good -* Get people comfortable asking questions -* Ask for questions (even dumb ones) - * Later in the workshop, anticipate questions if possible -* When a question is posed, let another student answer it first - * Lay this expectation out explicitly at the beginning that they should try to answer each other’s questions - - -# Why might students *not* ask questions? - * Vocabulary (they don’t know what methods are, etc.) - * Insecurity - * ...? - - -# Pacing -* Slow down! -* If you’re excited/nervous, you will be talking too fast -* Talk sssssslllllloooooowwwwwwllllllyyyyyyyy. -* Wait much longer than you feel is comfortable for questions/comments - * Leave a space for them to ask questions - * Also make sure to wait for an answer after you ask a question - * Count to ten (silently) - * Chances are, someone else will fill the void - - -# Pacing (cont.) -* Ask about pacing. Ask for feedback -* Emphasize: this is a learning process -* Get the students talking to each other - - -# What if a student feels the class is going too slowly? -* Talk to her privately -* Suggest moving up from noob to post-noob -* Suggest field promotion to TA - - -# How to effectively use TA's? - -* Have them debug/look at students’ computer screens -* Pair them with the n00best/most shy students -* Encourage TAs to answer questions - * TA's explanation might resonate with a student where yours didn't -* Treat student like customer - * What is underlying concern? - - -# Pair programming -- yea or nay? -* Pros? -* Cons? - - -# Installfest -* If you go to the installfest, introduce yourself as a TA -* "I'll be here to help you tomorrow" - - -# More general teaching tips -* Don't think about what you're going to do in the class, think about what they're going to do. -* Tell them what you’re going to tell them, tell them, and tell them what you told them -* ...? - - -# How do you check their understanding? - -* Some things that don't work: - * "Stop me if you don’t understand." (Because they’ll be too shy) - * "Do you get it?" (Because it’s too easy to say yes when the answer is no) - -* What works? - - -# How do you check their understanding? (more) - -* Ask them a question about the material. but how to do this without putting them on the spot? -* Ask questions about something that has already been built on top of. Spiral. -* Keep an eye on body language/facial expressions - * "I see some confusion. Let’s get a question." -* Pairing off and discussing/explaining -* Ask a less binary question to check understanding - * How would you do ___ - * If I want to do this, what would I do? - - -# How do you check their understanding? (more) -* Teach basic concept, then ask them to apply it -* Explain while loops, have them build one -* Pair them off and debug -* OK to ask the same question twice with slightly different variables -* Don’t let the most advanced student dictate the pace - - -# Teaching Programming - - -# How would you explain these concepts to a total beginner? - -* What is a variable? -* What is the difference between a string and a number? -* What is a comment? -* What is a function? - - -# More advice on teaching programming - -* Ruby sometimes makes things magical by doing things for you. But this magic obscures the underlying patterns for beginners. Don’t get into optional parameters. If something can be left out in a function call, DON’T leave it out. -* Before you have them do anything, first explain the big picture of what they’re about to do. - * E.g.: before typing in the command to deploy to heroku, explain the difference between localhost and heroku. -* Diagrams are helpful! Draw how all the pieces connect together. - - -# Now You Do It -* It's time to split up into smaller groups and go through all the materials -* Together with a partner (or two or three), do the whole workshop -* Make note of problems or questions so we can discuss them at the end - - -# See you next weekend! -And thanks for volunteering! diff --git a/sites/es/hola/hola.step b/sites/es/hola/hola.step deleted file mode 100644 index f0e5f45b0..000000000 --- a/sites/es/hola/hola.step +++ /dev/null @@ -1 +0,0 @@ -message "Hola! Que tal?" diff --git a/sites/en/frontend/HTML_attributes.step b/sites/frontend/HTML_attributes.step similarity index 84% rename from sites/en/frontend/HTML_attributes.step rename to sites/frontend/HTML_attributes.step index 8b5fcf923..775d80531 100644 --- a/sites/en/frontend/HTML_attributes.step +++ b/sites/frontend/HTML_attributes.step @@ -17,16 +17,16 @@ Form elements use an attribute to tell the browser what type of input they are, so the results will be easy to tell apart. This input: MARKDOWN - source_code :html, "" + source_code :html, "" message <<-MARKDOWN -looks like a radio button: , but +looks like a radio button: , but MARKDOWN - source_code :html, "" + source_code :html, "" message <<-MARKDOWN -looks like a password text input: even though they use the same **tag**. +looks like a password text input: even though they use the same **tag**. ## IDs and Classes @@ -36,7 +36,7 @@ we can assign names to elements and groups of elements, then apply CSS styles us MARKDOWN source_code :html, <<-MARKDOWN -

+

This is my intro paragraph!

MARKDOWN @@ -50,7 +50,7 @@ hash, like this: `#intro`. Classes are indicated with a dot: `.special` ## When should I use a class, and when should I use an ID? **ID** attributes are unique labels, for identifying things you'll only ever have one -of. For example, if you ran a news website, you might have an masthead element +of. For example, if you ran a news website, you might have a masthead element that only appears once, so you could give it an id like `handsome-header`. @@ -83,7 +83,7 @@ steps do
  • Soccer
  • Programming
    • -

    I hear RailsBridge needs volunteers, should I volunteer!?!

    +

    I hear RailsBridge needs volunteers, should I volunteer? :)

    HTML end @@ -98,10 +98,10 @@ HTML
  • Soccer
  • Programming
    • -

    I hear RailsBridge needs volunteers, should I volunteer!?!

    +

    I hear RailsBridge needs volunteers, should I volunteer? :)

    HTML - message "Refresh the page in the browser. You should see any new paragraphs you added, but no styling changes." - message "Many HTML attributes, like classes and ids, don't directly convey visual information. Your site will look the exact same until we use the class to add CSS styling." + message "Refresh the page in the browser. You should see the new paragraphs you added, but no styling changes." + message "Many HTML attributes, like classes and ids, don't convey visual information. Your site will look the exact same until we use the class to add CSS styling." end step do @@ -144,7 +144,7 @@ CSS message <<-MARKDOWN (Note: The span is just an element that lets you apply a class, id, or other attribute to a string of text without adding any line breaks. Browsers won't give it any styling by default.) -Once you add your style rule and refresh the page in the browser, you'll see something rather ugly like this: +Once you add your style rule and refresh the page in the browser, you'll see something like this: MARKDOWN img src: 'img/css_id.png' end @@ -163,5 +163,4 @@ MARKDOWN end -next_step "dev_tools" - +next_step "developer_tools" diff --git a/sites/frontend/HTML_structure.step b/sites/frontend/HTML_structure.step new file mode 100644 index 000000000..935ef0bfa --- /dev/null +++ b/sites/frontend/HTML_structure.step @@ -0,0 +1,98 @@ +goals do + goal "Add standard HTML head and body tags" + goal "Add a page title" + goal "Understand the use of non-visible tags like head" +end + +overview do + + message <<-MARKDOWN + +## The HTML tag and DOCTYPE + +`` is called the doctype, and it tells the browser which flavor of HTML you're using. `` tells your browser you're using HTML5, the latest version of HTML. + +(You may see older doctypes out there that are longer and a lot more complicated, from when people +used various HTML and XHTML versions. You can usually just +use this short version for new websites.) + +The `` encloses all the rest of your page and states "Here is my HTML!" + +## Pages, Like People, Have a Head and a Body + + MARKDOWN + source_code :html, < + + + + + + Visible Content + + +HTML + message <<-MARKDOWN + +### The Head + +The `head` contains information that is not displayed in your browser. It has metadata (data about data) tags that can tell a search engine or another program more about the file, like who wrote it or what keywords are relevant, such as: + + * What language or character set you're using: `` + * What the page title should be: `HTML!` + * What CSS and JavaScript files to include (and where they are): `` + + MARKDOWN + source_code :html, < + + + HTML! + + + + + + + +HTML + message <<-MARKDOWN + + +### The Body + +The body contains the actual content of your file, the things you'll want your users +to be able to see, read, or interact with! + + MARKDOWN + +end + +steps do + + step do + message <<-MARKDOWN +Let's add the doctype, HTML, head, and body tags to your hello.html file. It should look something like this: + + + +Save the file and refresh your browser. Everything should look mostly the same. + + MARKDOWN + end + + step do + message "Let's add a title to our page within the `` section. Add this line:" + source_code :html, "My Sample HTML page" + message <<-MARKDOWN +When you refresh your browser, you should see the title on the tab in Chrome. + + + +(If it doesn't show up, double check that you put the line between the opening and closing head tags, and that you saved your file before refreshing.) + MARKDOWN + end + +end + +next_step "basic_CSS" diff --git a/sites/en/frontend/HTML_tags.step b/sites/frontend/HTML_tags.step similarity index 67% rename from sites/en/frontend/HTML_tags.step rename to sites/frontend/HTML_tags.step index b9d529af5..0156b12d4 100644 --- a/sites/en/frontend/HTML_tags.step +++ b/sites/frontend/HTML_tags.step @@ -12,7 +12,7 @@ overview do Tags convey meaning. And in order to display your content well, everything should be inside of a tag, not just words you want emphasized. So let's use the paragraph tag `

    ` and the header 1 tag `

    `. -You'll notice that even if you put in extra lines and spaces, HTML will treat any number of +You'll notice that even if you put in extra lines and spaces, browsers will treat any number of new line or space characters like there's just one space there. When you're getting started with HTML, this can seem like a pain, because you have to type MARKDOWN @@ -60,7 +60,7 @@ My name is Rachel. end step do - message "Even though we put in some blank lines, the browser ignored them. So we'll have to use tags to break up our content." + message "The browser ignored the new lines and the blank line because we didn't use any tags. Let's use some to break up our content." message "Update your HTML with an `h1` tag and a `p` tag:" source_code :html, <<-HTML @@ -118,39 +118,39 @@ are a ton of other tags you might use: } tr { td "a" - td "A link (the 'a' stands for Anchor)" + td "A link (the 'a' stands for Anchor)." } tr { - td "h1-h6" + td "h1 to h6" td "Various headers, h1 is the most important, h6 the least." } tr { td "ul" - td "Start a bulleted list (an 'unordered list')" + td "Start a bulleted list (an 'unordered list')." } tr { td "ol" - td "Start a numbered list (an 'ordered list')" + td "Start a numbered list (an 'ordered list')." } tr { td "li" - td "A single thing within a list (a 'list item')" + td "A single thing within a list (a 'list item')." } tr { td "table, tr, td" - td "You can make tables (like this one) with table rows and data cells" + td "Tables (like this one) with table rows and data cells." } tr { td "form" - td "A form that can collect data from user input" + td "A form that can collect data from user input." } tr { td "input" - td "A text input, a button, or a checkbox in a form" + td "A text input, a button, or a checkbox in a form." } tr { td "div" - td "A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (More on this later.)" + td "A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (a 'division'. More on this later)" } tr { td "span" @@ -160,7 +160,7 @@ are a ton of other tags you might use: message <<-MARKDOWN - And HTML5 introduced lots of new HTML tags to make the HTML more *semantic*, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include: + HTML5 introduced lots of new tags to make the HTML more *semantic*, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include: MARKDOWN @@ -171,45 +171,45 @@ are a ton of other tags you might use: } tr { td "section" - td "A section of a document" + td "A section of a document: a thematic grouping of content." } tr { td "nav" - td "A navigation section" + td "A navigation section, containing links to other pages or to parts within the current page." } tr { td "header" - td "The header for a page. (This is different from the head element, which contains metadata about the page!)" + td "The header for a page or section of a page. (This is different from the head element, which contains metadata about the page!)." } tr { td "footer" - td "The footer for a page" + td "The footer for a page or section of a page." } tr { td "main" - td "The important content on a page" + td "The main content of a page." } tr{ td "aside" - td "Content not essential to the main content" + td "Content that's related to the main content, but could be considered separate from it." } end message <<-MARKDOWN -Don't try to memorize all the tags! You can always look them up on sites like: +You don't need to memorize all the tags! You can always look them up on sites like: +* [WebPlatform.org](http://webplatform.org/) * [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element) -* [DocHub](http://dochub.io/#html/) - - +* [Sitepoint](http://reference.sitepoint.com/html) ## Try This -What happens if you change the `
      ` to `
        `? (Don't forget to change the closing tag, too.) -Can you link your favorite things to their respective Wikipedia pages? Here's an example link for you: `Ruby` +What happens if you change the `
          ` in your **hello.html** to `
            `? (Don't forget to change the closing tag, too.) + +Can you link your favorite things to their Wikipedia pages? Here's an example link for you: `Ruby` -CLASS DISCUSSION: What are all the individual parts of the code to add a link? +What are all the individual parts of the code to add a link? MARKDOWN diff --git a/sites/frontend/_consider_deploying_to_github.step b/sites/frontend/_consider_deploying_to_github.step new file mode 100644 index 000000000..e82f1caed --- /dev/null +++ b/sites/frontend/_consider_deploying_to_github.step @@ -0,0 +1,7 @@ +div :class => "deploying" do + h1 "Optional Step: Deploying to GitHub" + blockquote do + message "Before the next step, you could try deploying (sending your code) your page to GitHub! If you haven't used Git or GitHub before, **it's okay to do this later**." + link 'deploying_to_github' + end +end diff --git a/sites/frontend/_consider_deploying_to_github_again.step b/sites/frontend/_consider_deploying_to_github_again.step new file mode 100644 index 000000000..35e8b32d7 --- /dev/null +++ b/sites/frontend/_consider_deploying_to_github_again.step @@ -0,0 +1,13 @@ +div :class => "deploying" do + h1 "Optional Step: Deploying to GitHub again" + blockquote do + + message <<-MARKDOWN + Before the next step, you could try deploying your page to GitHub! + + * If you have already deployed to GitHub, go on to [Deploying to GitHub again](deploying_to_github_again). + * If this is your first time deploying, start at [Deploying to GitHub](deploying_to_github) + MARKDOWN + + end +end diff --git a/sites/en/frontend/_developer_tools.step b/sites/frontend/_developer_tools.step similarity index 86% rename from sites/en/frontend/_developer_tools.step rename to sites/frontend/_developer_tools.step index f24056dd3..ccbbcdeac 100644 --- a/sites/en/frontend/_developer_tools.step +++ b/sites/frontend/_developer_tools.step @@ -1,6 +1,6 @@ goals do goal "Get oriented with your browser's developer tools. They're a great jumping-off point for continuing to build your HTML, CSS, and JavaScript knowledge." - tip "The screenshots below are specific to the Chrome web browser, which is available for Mac, PC, and Linux and has great developer tools. But if you're partial to another browser, there's usually a similar set of tools you can use." + tip "The screenshots below are specific to the Chrome web browser, which is available for Mac, PC, and Linux and has great developer tools. If you're partial to another browser, there's usually a similar set of tools you can use." end steps do @@ -46,7 +46,7 @@ steps do step do message <<-MARKDOWN - The 'Sources' panel is another JavaScript pro tool. If you're used to working with an IDE that has a debugger, you'll be able to use many of the same techniques (like breakpoints, stack traces, and watch expressions) right here in the browser. + The 'Sources' panel is another JavaScript pro tool. If you're used to working with an IDE (Integrated Development Environment) that has a debugger, you'll be able to use many of the same techniques (like breakpoints, stack traces, and watch expressions) right here in the browser. MARKDOWN @@ -61,7 +61,7 @@ explanation do With good browser developer tools, you can pick apart every website you visit. If you see cool CSS styles or JavaScript animations, you can always look under the hood and figure out how -they're done. It's a great way to keep learning as a front end developer. +they're done. It's a great way to keep learning as a front-end developer. MARKDOWN end diff --git a/sites/en/frontend/_working_effectively_and_efficiently.md b/sites/frontend/_working_effectively_and_efficiently.md similarity index 54% rename from sites/en/frontend/_working_effectively_and_efficiently.md rename to sites/frontend/_working_effectively_and_efficiently.md index dbae24fbb..3bd42b322 100644 --- a/sites/en/frontend/_working_effectively_and_efficiently.md +++ b/sites/frontend/_working_effectively_and_efficiently.md @@ -1,15 +1,15 @@ -### Working Effectively and Efficiently +# Working Effectively and Efficiently We highly recommend you do the following: * Open your browser fresh or hide any windows you already have open. - * Bring up one window with two tabs - * One for this content + * Bring up one window with two tabs. + * One for this content. * One for interacting with your app. -* Open your text editor and _do not ever close it_. We're not quitters. -* Hide all extra applications. Turn off twitter, IM, and all other distractions. +* Open your text editor and don't close it. +* Hide all extra applications. Turn off Twitter, Facebook, IM, and all other distractions. By minimizing the number of things you interact with, you reduce the amount of time spent switching between them and the context lost as you work through the lessons. Having 50 tabs open in your web -browser gets confusing and wastes time. \ No newline at end of file +browser gets confusing. diff --git a/sites/en/frontend/add_more_elements.step b/sites/frontend/add_more_elements.step similarity index 55% rename from sites/en/frontend/add_more_elements.step rename to sites/frontend/add_more_elements.step index 803bcdb16..d2c6f64c7 100644 --- a/sites/en/frontend/add_more_elements.step +++ b/sites/frontend/add_more_elements.step @@ -1,5 +1,5 @@ goals do - message "WOOHOO, you made it to page 10! Now that we're here, we'll switch from simple steps to doing **challenges**. There will still be something to do at each step, but it will take some figuring out to do correctly. (If you get stuck, you can still ask a TA or instructor for hints. : ) You will:" + message "Now we'll switch from simple steps to doing **challenges**. There will still be something to do at each step, but it will take some figuring out to do correctly. If you get stuck, ask a volunteer for hints. You will:" goal "Fill in more content" goal "Add an image tag" goal "Use two different kinds of anchor tags" @@ -9,7 +9,7 @@ steps do step do message <<-MARKDOWN -CHALLENGE: The index.html page you downloaded is a simple profile page. Do a quick read through of the HTML and see if you can guess from the context what any unfamiliar tags might do. +**Challenge:** The **index.html** page you downloaded is a simple profile page. Do a quick read through of the HTML and see if you can guess from the context what any unfamiliar tags might do. Take 5 or 10 minutes to replace some of the existing text with some info about yourself. You don't have to write a novella, but filling in some tags is a good way to get oriented in the file. Then, save the page and refresh the browser. MARKDOWN @@ -17,19 +17,21 @@ Take 5 or 10 minutes to replace some of the existing text with some info about y step do message <<-MARKDOWN -CHALLENGE: Add an image tag to the page, right above the word 'Contents'. There's a sample image in the resources folder that you can use called 'picture.jpg', but if you want to personalize your page, copy a picture of yourself into the resources folder and add that to the page instead. +**Challenge:** Add an image tag to the page, right above the word 'Contents'. There's a sample image in the resources folder that you can use called 'picture.jpg', but if you want to personalize your page, copy a picture of yourself into the resources folder and add that to the page instead. -Two hints: images are usually included with an `img` tag, and the tag's `src` attribute provides the path to the actual file. When you're done, you'll have something like this: +**Hints**: images are usually included with an `img` tag; the tag's `src` attribute provides the path to the file. + +When you're done, you'll have something like this: -Don't forget that, because it doesn't wrap text content, the `img` tag is self-closing, meaning it doesn't need an ending tag. You should never code ``. +Don't forget that, because it doesn't wrap text content, the `img` tag is self-closing, meaning it doesn't need an ending tag. You don't need to write ``. MARKDOWN end step do message <<-MARKDOWN -CHALLENGE: Add two kinds of anchor links. +**Challenge:** Add two kinds of anchor links. Links in html are created by the `a` tag. Add an `a` tag somewhere in the document that creates a link to another page on the web. @@ -47,21 +49,17 @@ See if you can turn the list items under the word 'Contents' into links that jum end explanation do - - message <<-MARKDOWN -## Woohoo HTML + message <<-MARKDOWN -Now that you know the basics of working with HTML, the trickiest part is remembering -what tags are available. Here are some good sites you can use for reference: +Now that you know the basics of working with HTML, the trickiest part is remembering what tags are available. Here are some good sites you can use for reference: -* [Sitepoint](http://reference.sitepoint.com/css) -* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element) -* [DocHub](http://dochub.io/#html/) +* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element); +* [HTML5 Doctor's Element Index](http://html5doctor.com/element-index/). MARKDOWN end -insert 'consider_deploying_to_github' +insert 'consider_deploying_to_github_again' next_step 'make_columns' diff --git a/sites/en/frontend/add_starter_files.step b/sites/frontend/add_starter_files.step similarity index 69% rename from sites/en/frontend/add_starter_files.step rename to sites/frontend/add_starter_files.step index 797894203..a0ccc672c 100644 --- a/sites/en/frontend/add_starter_files.step +++ b/sites/frontend/add_starter_files.step @@ -1,18 +1,18 @@ goals do - goal "Add some starter files to your project" + goal "Add some starter files" end steps do step do message <<-MARKDOWN - Download the .zip file from [this link](https://github.com/eanakashima/front-end-lesson/archive/master.zip) + Download the .zip file from this link When the file download finishes, find it on your computer and unzip it. MARKDOWN end step do message <<-MARKDOWN - The zip file should contain a file called index.html and a directory of resources." + The zip file should contain a file called index.html and a directory of resources. @@ -27,15 +27,15 @@ explanation do ## What Are These Files? Just to save you some time, we've supplied a bare bones HTML document, a CSS stylesheet, -a JavaScript file, and a placeholder image. But you could have typed up these files yourself -with your text editor, if you'd wanted to. +a JavaScript file, and a placeholder image. If you are starting a new project in the future, try typing it all out by hand a few times to get the hang of it, and then try starting with some other people's HTML boilerplate code that they've shared: * [HTML5 Boilerplate](http://html5boilerplate.com/), a blank template with lots of tips for high-performance best practices. -* [Twitter Bootstrap](http://twitter.github.com/bootstrap/), an HTML / CSS base with a big library of styles to test out. +* [Bootstrap](http://getbootstrap.com/), an HTML / CSS / JS base with a big library of styles to test out. +* [Foundation](http://foundation.zurb.com/), another HTML / CSS / JS framework you can test out. MARKDOWN end diff --git a/sites/en/frontend/basic_CSS.step b/sites/frontend/basic_CSS.step similarity index 78% rename from sites/en/frontend/basic_CSS.step rename to sites/frontend/basic_CSS.step index 4e80576e9..de1488ded 100644 --- a/sites/en/frontend/basic_CSS.step +++ b/sites/frontend/basic_CSS.step @@ -7,15 +7,15 @@ overview do message <<-MARKDOWN ## What is CSS? -CSS stands for __C__ascading __S__tyle__s__heets. It's a language for creating **rules** that +CSS stands for *C*ascading *S*tyle*s*heets. It's a language for creating **rules** that can **select** various elements on the page and change their **visual properties**. -* __C__ascading - this is how the browser determines the correct style rules to apply to +* *C*ascading - this is how the browser determines the correct style rules to apply to each element on the page. As we'll see, CSS has many ways to match rules to elements, and some of those ways count for more than others. The browser allows more important rules to _cascade_ over less important ones. -* __S__tyle__s__heets - CSS files are called 'stylesheets' because they are separate documents - their +* *S*tyle*s*heets - CSS files are called 'stylesheets' because they are separate documents - their file type is .css - that only deal with styling information. We add special tags in our HTML files to link them to our stylesheets. @@ -33,14 +33,14 @@ There are many good reasons to keep HTML and CSS separate. A typical website wil use the same styles across a site. This makes our code more efficient and easier to maintain, and keeps the site visually consistent. It also makes it easier to use -different styles for different devices, so a site can have different looks for desktop and mobile browsers. +different styles for different devices, so a site can have different looks for different browsers. MARKDOWN end message <<-MARKDOWN ## CSS Rules Are Made of a Selector and Attributes -The **selector** is the first part of a CSS rule - it tells the browser how to find, or _select_, the element we want to style. +The **selector** is the first part of a CSS rule - it tells the browser how to find, or *select*, the element we want to style. On this page, we'll use `h1` and `p` as our selectors, which match the `h1` and `p` elements in our HTML. @@ -94,12 +94,12 @@ When you save and refresh your browser, you should see the styles you added: -The `type` and `media` attributes inside of the ` + HTML + message <<-MARKDOWN + +In CSS you write comments by wrapping the comment in inside a `/*` (start a comment) and `*/` (finish a comment). A comment can go over several lines. + +* A CSS tag looks like this when it's a link: + + MARKDOWN + source_code :html, <<-HTML + + HTML +end + +insert 'consider_deploying_to_github' + +next_step "add_more_elements" diff --git a/sites/frontend/make_columns.step b/sites/frontend/make_columns.step new file mode 100644 index 000000000..0d5d66720 --- /dev/null +++ b/sites/frontend/make_columns.step @@ -0,0 +1,49 @@ +goals do + message "These challenges will have you diving into the CSS side of things. Open up that **layout.css** file and take a look." + goal "Give your main content a border" + goal "Make two columns and line them up side by side" +end + +steps do + + step do + message "**Challenge:** Find the div with the id `main` in your HTML. See if you can give it a one-pixel border on its left hand side by modifying the existing stylesheet, **layout.css**." + message "**Hint**: If you get hung up on what CSS property to use, see if you can look it up on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)." + end + + step do + message "**Challenge:** If you styled the `#main` div in the previous step by using a style rule like `#main { property: value; }`, see if you can come up with a second rule that could also apply the same style, but use a different selector." + message "**Hint**: You can select an element that's _inside_ of another element by listing one selector after another. The selector `.content div {}` would apply to any `div`s inside of an element with class `content`." + end + + step do + message "**Challenge:** See if you can turn the page into a two-column layout. Make the `#nav` `div` the left column, and the `#main` div the right column." + message "**Hints**: it may be helpful to give these divs a fixed width; you may need the `float` property." + end + + message "" +end + +explanation do + + message <<-MARKDOWN + +## More CSS! + +For some great examples of the power of CSS, check out the [CSS Zen Garden](http://www.csszengarden.com/). It takes +the same HTML, but shows it with stylesheets from a bunch of different designers applied to +it. Here are two different designers' interpretations of the same HTML: + + + +### CSS Reference Sites + +* [Sitepoint](http://reference.sitepoint.com/css/elements-structural) +* [Mozilla Developer Network](https://developer.mozilla.org/en/CSS) + + MARKDOWN +end + +insert 'consider_deploying_to_github_again' + +next_step "basic_javascript" diff --git a/sites/frontend/resources.step b/sites/frontend/resources.step new file mode 100644 index 000000000..6e8e7b0cd --- /dev/null +++ b/sites/frontend/resources.step @@ -0,0 +1,28 @@ +message < "http://www.sublimetext.com/2" - message "Install Sublime Text 2 by double clicking the file you downloaded, then dragging the Sublime Text 2 icon into the Applications folder. Finish up by clicking the eject icon for Sublime Text 2 in your finder window." + a "Download and install Atom", :href => "https://atom.io/" + message "Install Atom by double clicking the file you downloaded, then dragging the Atom icon into the Applications folder. Finish up by clicking the eject icon for Atom in your finder window." a "or install a different editor", :href => "/installfest/editors" - message "FYI: Sublime Text 2 is a paid program that you can download and try out for free. If you keep using Sublime Text 2 after the workshop, you'll need to buy a license. There are other editors available you can find on [our editors page](/installfest/editors)." end end end diff --git a/sites/frontend/zip_content/.gitignore b/sites/frontend/zip_content/.gitignore new file mode 100644 index 000000000..e8dcdf163 --- /dev/null +++ b/sites/frontend/zip_content/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +.idea +Thumbs.db +.rvmrc +.sass-cache diff --git a/sites/frontend/zip_content/index.html b/sites/frontend/zip_content/index.html new file mode 100755 index 000000000..7c6963013 --- /dev/null +++ b/sites/frontend/zip_content/index.html @@ -0,0 +1,77 @@ + + + + About Me + + + + + +
            +

            About Me

            +

            + My name is ___________ and I'm ____________________________. +

            +
            + +
            + + + + +
            +

            Projects

            +

            Describe the kinds of projects you like to work on and give a brief overview of how you accomplished them...

            + +

            Project #1 Title

            +

            Project #1 Description...

            + +

            Project #2 Title

            +

            Project #2 Description...

            + +

            Hobbies

            + +

            What else do you do in your spare time?

            + +

            Item #1 Title

            +

            Use this paragraph to explain Item #1

            +
              +
            • Cool thing I did
              • +
            • Another cool thing I did
              • +
            • Final cool thing I did
              • +
            + +

            Item #1 Title

            +

            Use this paragraph to explain Item #1

            +
              +
            • Cool thing I did
              • +
            • Another cool thing I did
              • +
            • Final cool thing I did
              • +
            + +

            Fun Facts

            +

            Subhead

            +

            Use this list to tell us some fun things about yourself.

            +
              +
            • Cool thing I did
              • +
            • Another cool thing I did
              • +
            • Final cool thing I did
              • +
            + + +
            +
            + +
            + © 2012 [YOUR NAME HERE], All Rights Reserved. +
            + + diff --git a/sites/frontend/zip_content/resources/javascript.js b/sites/frontend/zip_content/resources/javascript.js new file mode 100755 index 000000000..a96422740 --- /dev/null +++ b/sites/frontend/zip_content/resources/javascript.js @@ -0,0 +1 @@ +// Your Javascript will go here! \ No newline at end of file diff --git a/sites/frontend/zip_content/resources/layout.css b/sites/frontend/zip_content/resources/layout.css new file mode 100755 index 000000000..3ffabc67f --- /dev/null +++ b/sites/frontend/zip_content/resources/layout.css @@ -0,0 +1,58 @@ +/* + * Add your CSS styles here + * + */ + +body { + font-family: Helvetica, Arial, sans-serif; + background: #f4f4f4; +} + +h1, h2, h3 { + color: #222; +} + +p { + line-height: 24px; + color: #555; +} + +a { + color: green; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.content { + width: 940px; + margin: 0 auto; +} + +#header { + border-bottom: 1px solid #999; +} + +#nav { + margin: 0 20px 0 0; + /* CHALLENGE 3: how could you get this to float to the left side of the screen? */ +} + +#main { + margin: 0; + /* CHALLENGE 3: how could you get this to float to the left side of the screen? */ + /* CHALLENGE 2: how could you give this element a one-pixel border down its left side? */ +} + +#copyright { + margin-top: 30px; + margin-bottom: 30px; +} + + +/* Ignore this for now, it is special code needed to fix the layout after using the "float" rules */ +.clearfix:before, .clearfix:after { content:""; display:table; } +.clearfix:after { clear:both; } +.clearfix { zoom:1; } \ No newline at end of file diff --git a/sites/frontend/zip_content/resources/picture.jpg b/sites/frontend/zip_content/resources/picture.jpg new file mode 100755 index 000000000..ded62653d Binary files /dev/null and b/sites/frontend/zip_content/resources/picture.jpg differ diff --git a/sites/installfest/_command-line-glossary.md b/sites/installfest/_command-line-glossary.md new file mode 100644 index 000000000..0084d032f --- /dev/null +++ b/sites/installfest/_command-line-glossary.md @@ -0,0 +1,37 @@ +**~** Called 'tilde'. On OS X or Linux, this is a shortcut to the **home directory** for your user. + +**\** When you use an 'escape sequence' in front of a character, the normal interpretation of that character is not applied. + +**=** Assignment to make whatever follows, to be treated as true (_Name="Veronica"_). + +**==** Boolean, a data type with only 2 possible values: True or False (_Is name=="Veronica"? True_). + +**cd (or cd ~)** Change into your **home directory**. + +**cd** _directory_ **(or cd ..)** Change into the parent directory of your current directory. + +**cd ../../** Go up 2 levels / multiple levels. + +**cd** _foo_ Change into the directory named _foo_. + +**cp** _original.rb copy.rb_ Makes a copy of the _original.rb_ file. + +**ls** List the contents of your current directory. + +**ls** _directory_ Shows all contents (files and folders) of the directory. + +**pwd** Shows the full path of the directory you are currently in (e.g. _/home/heidi/tehcodez/Railsbridge_). + +**-h (or --help)** Can be run with all commands to list more helpful information. + +**git branch** Shows you the branch that you're currently in. + +**git status** Shows you any pending changes that you've created since your last commit. + +**git add -A** Will add all your changes to your next commit. + +**git add** _file1.md file2.md file3.md_ Will add only the files you specify to your next commit. + +**git commit -m** _"some useful message for your future self"_ Commits all your changes with your descriptive message to git. + +**git push origin** remote\_branch\_name This pushes the code in your current branch to the remote\_branch\_name branch on the remote repo named 'origin'. diff --git a/sites/installfest/_general-glossary.md b/sites/installfest/_general-glossary.md new file mode 100644 index 000000000..e96914968 --- /dev/null +++ b/sites/installfest/_general-glossary.md @@ -0,0 +1,45 @@ +**Classes and Instances:** Types and objects. If we have a class (type) called _Car_, then _Peugeot 406_ and _Fiat Ritmo_ will be instances (objects) of this class. There may also be other instances unique to _Peugeot 406_, differentiated by, for example, their _Model number_. + +**Command Line Interface (or Console / Terminal):** Allows you to interact with your computer (add, delete, modify files and much more) solely by typing instructions (commands). + +**Function:** Code that can be re-used; if a formula has to change, you only need to change it in one place. + +**Git:** A type of **Version Control Software (VCS)**. + +**GitHub:** A site that hosts git repositories. GitHub also adds a number of tools that aid interaction between developers collaborating on software. + +**Grouping:** Indents and whitespaces are used for grouping code together and simplify readability. Ruby also uses do … end to group. + +**Heroku:** A site that allows you to host your Ruby on Rails applications. Heroku also supports other languages and frameworks. + +**Home directory:** On a OS X or Linux computer, this is where the files and settings belonging to your user are stored. + +**Loop:** While _something is true, do this_. When _something becomes not true_ then break the loop / stop. + +**Markdown:** A lightweight markup language that allows you to write using an easy-to-read, easy-to-write plain text format, and then convert it to structurally valid XHTML (or HTML). + +**Rake:** A Ruby application that can be used to perform a number of custom tasks. It is often used to carry out maintenance or ad-hoc jobs. + +**Repository (or Repo):** A grouping of files within **Version Control Software**. When using **Git**, you will need to have access to a particular repository before you can start making changes to the source code. + +**Ruby:** A programming language. + +**Ruby on Rails:** A web framework written in **Ruby**. It has been designed in such a way as to make web development as fast and as easy as possible. + +**RubyGem:** A package manager for the Ruby programming language that provides a standard format for distributing Ruby programs and libraries (in a self-contained format called a "gem"), a tool designed to easily manage the installation of gems and a server for distributing them. + +**RVM:** The Ruby Version Manager. An application that makes it easy to have multiple versions of Ruby on your computer at once. + +**Script:** A term often used to describe a text file containing a series of instructions, written in Ruby, that will be used to produce the output visible in a browser. + +**Shell:** The software that interprets your commandline instructions. Often used as a synonym for the **Command Line Interface**. + +**SSH:** Secure Shell. A way to securely connect to a remote computer. + +**String:** Text only, typed between inverted commas. + +**Text editor:** A program that allows you to create and modify the text files that will be used by **Ruby on Rails** to run your command. Some text editors are optimised for software development and provide tools that increase productivity. + +**Variable:** A storage location and an associated symbolic name (an identifier) which contains some known or unknown quantity or information (a value). The variable name is the usual way to reference the stored value; this separation of name and content allows the name to be used independently of the exact information it represents. + +**Version Control Software:** Software that tracks changes to your source code and also allows you to undo or combine changes. diff --git a/sites/installfest/_install_atom_for_mac.step b/sites/installfest/_install_atom_for_mac.step new file mode 100644 index 000000000..983f2a84d --- /dev/null +++ b/sites/installfest/_install_atom_for_mac.step @@ -0,0 +1,21 @@ +message "We'll be using the Atom text editor during the workshop, though you are free to use a different editor if you prefer. It must be a plain-text editor, such as vi or TextMate." + +important <<-MARKDOWN + Microsoft Word and other word processing programs, including TextEdit and Notepad, will not work. + + When in doubt, use Atom. + MARKDOWN + +step "Download Atom" do + message "Download the [Atom installer](https://atom.io/download/mac)." +end + +step 'Find the downloaded file in Finder' do + message "If you weren't asked where to save it, it's probably in the Downloads folder." +end + +step "Extract Atom and move it to your Applications folder." do + message "Double click the Atom `.zip` file to extract it. Drag Atom into your Applications folder." + + img src: 'img/install_atom_mac.gif', alt: 'Animation of extracting the Atom zip file and moving the contents to the Applications folder' +end diff --git a/sites/en/installfest/_install_homebrew.step b/sites/installfest/_install_homebrew.step similarity index 70% rename from sites/en/installfest/_install_homebrew.step rename to sites/installfest/_install_homebrew.step index ba499928c..094167a18 100644 --- a/sites/en/installfest/_install_homebrew.step +++ b/sites/installfest/_install_homebrew.step @@ -7,5 +7,8 @@ important "If that doesn't work, visit Booting WEBrick - => Rails 4.{FUZZY}1.x{/FUZZY} application starting in development on http://0.0.0.0:3000 - => Call with -d to detach - => Ctrl-C to shutdown server - [2010-09-30 21:04:12] INFO WEBrick 1.3.1 - [2010-09-30 21:04:12] INFO ruby 1.9{FUZZY}.3 (2012-11-10) [x86_64-darwin10.4.2]{/FUZZY} - [2010-09-30 21:04:12] INFO WEBrick::HTTPServer#start: pid={FUZZY}24805{/FUZZY} port=3000 + => Booting Puma + => Rails 5.0{FUZZY}.0{/FUZZY} application starting in development on http://localhost:3000 + => Run `rails server -h` for more startup options + Puma starting in single mode... + * Version {FUZZY}3.4.0{/FUZZY} (ruby 2.{FUZZY}2.2-p95{/FUZZY}), codename: {FUZZY}Owl Bowl Brawl{/FUZZY} + * Min threads: 5, max threads: 5 + * Environment: development + * Listening on tcp://localhost:3000 + Use Ctrl-C to stop TEXT message "If it does, congratulations! You've successfully installed Ruby AND Rails and started your server." tip "If it doesn't work, ask a TA for help." - + message "* In your browser, go to " + img src: "img/successful_rails_install.png", alt: "Screenshot of the browser on localhost 3000 showing the rails intro page" message <<-MARKDOWN - * In your browser, go to - - ![Successful Rails Install](img/successful_rails_install.png) * Back in the Terminal window where you ran rails server, type **Control-C** (don't type this into the console, but hold the Control and C keys at the same time) to kill(stop) the server. Windows will ask "Terminate batch job (Y/N)?". Type "Y". MARKDOWN @@ -77,7 +77,7 @@ step "Generate a database model" do rails generate scaffold drink name:string temperature:integer BASH console <<-BASH - rake db:migrate + rails db:migrate BASH console <<-BASH rails server @@ -86,7 +86,7 @@ step "Generate a database model" do message <<-MARKDOWN **Note:** the above are three separate commands. Type each line into the terminal separately, not as one single command. - Wait until your console shows that the Webrick server has started (just like before). Then, in the browser, visit + Wait until your console shows that the Puma server has started (just like before). Then, in the browser, visit 1. Click on "New drink" 2. Enter Cappuccino for the name @@ -95,7 +95,7 @@ step "Generate a database model" do (The window where you ran `rails server` will display debugging information as you do this.) - You should see: ![Drink was successfully created](img/get_a_sticker_you_should_see.png) + You should see: ![Screenshot of the drink detail page](img/get_a_sticker_you_should_see.png) In your terminal, Hold Control and hit C (or on Windows, Control-Break, Y) to stop the rails server. MARKDOWN diff --git a/sites/en/installfest/create_an_ssh_key.step b/sites/installfest/create_an_ssh_key.step similarity index 65% rename from sites/en/installfest/create_an_ssh_key.step rename to sites/installfest/create_an_ssh_key.step index ef8a6a118..431cb02d3 100644 --- a/sites/en/installfest/create_an_ssh_key.step +++ b/sites/installfest/create_an_ssh_key.step @@ -1,6 +1,6 @@ message "An SSH key uniquely identifies you (and your computer) when your computer is communicating with other computers. Think of an SSH key as a fancy password." -message "You'll need one of these to create your Heroku and Github accounts." +message "You'll need one of these to create your Heroku and GitHub accounts." option "Did you use RailsInstaller on Windows?" do message "Congratulations, you already have an ssh key!" @@ -29,14 +29,14 @@ option "Generate an SSH key" do message "Press enter to accept the default key save location." - message "Next, you'll be asked for a keyphrase." + message "Next, you'll be asked for a passphrase." - h1 "Choose whether to use a keyphrase" + h1 "Choose whether to use a passphrase" blockquote do - option_half "No keyphrase" do + option_half "No passphrase" do message "Hit enter to accept blank passphrase, then hit enter again." end - option_half "Keyphrase" do + option_half "Passphrase" do message "If your computer is shared with other people, as in a work laptop, you should choose and enter a real passphrase. Twice." end end @@ -45,10 +45,10 @@ option "Generate an SSH key" do result <<-OUTPUT Generating public/private rsa key pair. -Enter file in which to save the key (/Users/student/.ssh/id_rsa): +Enter file in which to save the key (/Users/student/.ssh/id_rsa): Created directory '/Users/student/.ssh'. -Enter passphrase (empty for no passphrase): -Enter same passphrase again: +Enter passphrase (empty for no passphrase): +Enter same passphrase again: Your identification has been saved in /Users/student/.ssh/id_rsa. Your public key has been saved in /Users/student/.ssh/id_rsa.pub. The key fingerprint is: @@ -61,19 +61,28 @@ The key fingerprint is: message "If you look inside `~/.ssh/`, you will notice two files with the same name: `id_rsa` and `id_rsa.pub`." message "`id_rsa.pub` is your **public key** and can be shared freely." message "`id_rsa` is your **private key** and must be kept secret." - message "If someone else gets your private key and your passphrase, then they can pretend to be you and log on to your Heroku or Github accounts and cause mischief!" + message "If someone else gets your private key and your passphrase, then they can pretend to be you and log on to your Heroku or GitHub accounts and cause mischief!" end end - message "Add your generated public key to the authentication agent using the following command:" + message "Add your generated key to the authentication agent using the following command:" console "ssh-add ~/.ssh/id_rsa" result <<-OUTPUT - Enter passphrase for /Users/student/.ssh/id_rsa: - Identity added: /Users/student/.ssh/id_rsa (/Users/student/.ssh/id_rsa)" - OUTPUT +Enter passphrase for /Users/student/.ssh/id_rsa: +Identity added: /Users/student/.ssh/id_rsa (/Users/student/.ssh/id_rsa)" + OUTPUT + + tip "Could not open a connection to your authentication agent" do + message "If the ssh-agent is not running, you will come across this error. Here are a few commands that you can try to use to start the ssh-agent:" + console_with_message "For some Windows machines:", "eval `ssh-agent -s`" + console_with_message "For others (confirmed on some Windows 7, 8, 8.1, and 10 setups):", "eval $(ssh-agent)" + console_with_message "For Linux:", "eval `ssh-agent`" + message <<-MARKDOWN +

            For additional options, this StackOverflow thread has been helpful: http://stackoverflow.com/questions/17846529/could-not-open-a-connection-to-your-authentication-agent

            + MARKDOWN + end end next_step 'create_a_heroku_account' - diff --git a/sites/en/installfest/deploy_a_rails_app.step b/sites/installfest/deploy_a_rails_app.step similarity index 83% rename from sites/en/installfest/deploy_a_rails_app.step rename to sites/installfest/deploy_a_rails_app.step index 3279a3a73..0de03a9ed 100644 --- a/sites/en/installfest/deploy_a_rails_app.step +++ b/sites/installfest/deploy_a_rails_app.step @@ -72,8 +72,7 @@ step "Deploy your app to Heroku" do end group :production do - gem 'pg' - gem 'rails_12factor' + gem 'pg', '~> 0.18' end RUBY @@ -86,39 +85,40 @@ step "Deploy your app to Heroku" do message "SQLite and PostgreSQL are different kinds of databases. We're using SQLite for our development and test environments because it's simple to install. We're using PostgreSQL in our production environment because Heroku has done the hard work of installing it for us and it's more powerful than SQLite. We have separate test, development and production databases by default in Rails." end - console <<-BASH -bundle install --without production - BASH + console "gem install bundler" - message "Again, wait for the console prompt, and look for the 'Your bundle is complete!' message just above. If this fails, get a volunteer to help you edit `config/environments/production.rb` " + fuzzy_result <<-OUTPUT + Successfully installed bundler-{FUZZY}1.14.3{/FUZZY} + 1 gem installed + OUTPUT + + console "bundle install --without production" + + message "Again, wait for the console prompt, and look for the 'Bundle complete!' message just above." end step "Set the root route" do message "Use your editor to open the file routes.rb (`C:\\sites\\railsbridge\\test_app\\config\\routes.rb` or `~/railsbridge/test_app/config/routes.rb`) and find the line containing:" source_code :ruby, <<-RUBY - # root 'welcome#index' + Rails.application.routes.draw do RUBY - message "Remove this line and replace it with:" + message "After this line, add a new line with the following:" source_code :ruby, <<-RUBY root 'drinks#index' RUBY message "Save the file." - - message "Note that you must remove the leading '#', as lines that start with a # are - comments and will not have any effect." - end step "Add the changes to git" do - console <<-BASH - git add . - git commit -m "Updates for heroku deployment" - BASH + message "Before running the following command (to add to your local git repository), make sure that you are in the `test_app` directory." + + console 'git add .' + console 'git commit -m "Updates for heroku deployment"' end step "Deploy (push) to heroku" do @@ -151,14 +151,14 @@ bundle install --without production message "This process will probably take about twice as long as your 'bundle install' and then will return you to your console prompt. If it takes longer than that, talk to a TA." - console "heroku run rake db:migrate" + console "heroku run rails db:migrate" result <<-OUTPUT - Migrating to CreateDrinks (20120428044153) - == CreateDrinks: migrating =================================================== + Migrating to CreateDrinks (20160706063236) + == 20160706063236 CreateDrinks: migrating ===================================== -- create_table(:drinks) -> 0.0084s - == CreateDrinks: migrated (0.0085s) ========================================== + == 20160706063236 CreateDrinks: migrated (0.0085s) ============================ OUTPUT message "The long number after CreateDrinks is a timestamp. Yours will be different!" @@ -166,22 +166,20 @@ bundle install --without production step "Visit your new application" do - message "In the browser, go to your application's URL. You'll need your Heroku application name." - - tip "To find your Heroku application name" do - console "heroku info" - end + message "Now that the app is deployed, you can visit it in a browser." tip "To quickly open your heroku application in a browser" do console "heroku open" end - message "The URL for your app is *application-name*.heroku.com -- so with the example output in the previous step, it would be floating-winter-18.heroku.com. Verify you see the welcome page. Leave this browser window open." + message "The URL for your app is *application-name*.heroku.com -- something like floating-winter-18.heroku.com." + + message "Verify you see the welcome page. Leave this browser window open." message "Create and save a new drink to verify you can write to the database on Heroku." + message "If you want to see a little more info about your app, you can run `heroku info`." end end next_step "get_a_sticker" - diff --git a/sites/en/installfest/editors.step b/sites/installfest/editors.step similarity index 69% rename from sites/en/installfest/editors.step rename to sites/installfest/editors.step index e026dc9c0..102e63955 100644 --- a/sites/en/installfest/editors.step +++ b/sites/installfest/editors.step @@ -1,12 +1,12 @@ message <<-MARKDOWN -There are a number of different editors designed for programming. You may already have a favorite editor; if so you can continue using that editor. If you have never used a programming editor, there are a number of good editors available, several of them free of charge. Most Railsbridge instructors use the Sublime editor, so you may want to install Sublime; if you end up asking for help during your class it may be easier for an instructor or TA to help you if you are using Sublime. Here is a list of some of the more widely used editors: +There are a number of different editors designed for programming. You may already have a favorite editor; if so you can continue using that editor. If you have never used a programming editor, there are a number of good editors available, several of them free of charge. Many RailsBridge instructors use the Atom editor, so you may want to install Atom; if you end up asking for help during your class it may be easier for an instructor or TA to help you if you are using Atom. Here is a list of some of the more widely used editors: +* Atom is a free, open-source editor that can be customized to your liking using its rich ecosystem of add-on packages. A download is available for OS X 10.8+, Windows 7/8, and Ubuntu/RedHat linux. * Sublime Text is popular with many Ruby and Rails users. You can use it free for evaluation, then must pay to continue using it. * Komodo is a very good free programming editor, that is not used as widely as in the past. It is relatively easy to use. * TextMate is very popular in the Ruby and Rails community. It is not free. -* Atom is a free, open-source editor that can be customized with HTML, CSS, and JavaScript. A download is available for OSX 10.8+, but you'll have to build from source on other platforms. -* Aptana Studio is a free, full-featured, development IDE (Integrated Development Environment) for Ruby and Rails. It has many powerful features to assist you while you develop your code. You can install Aptana as either a stand-along program or as an Eclipse plugin. +* Aptana Studio is a free, full-featured, development IDE (Integrated Development Environment) for Ruby and Rails. It has many powerful features to assist you while you develop your code. You can install Aptana as either a stand-along program or as an Eclipse plugin. * RubyMine is used by many companies for their Ruby and Rails software development. Is is also a full-featured IDE, very similar to Aptana. RubyMine is not free, but has a 30-day evaluation period. There are other programming editors available, but these are among the most popular. Some people use simple non-programming editors, such as NotePad (or WordPad or TextEdit in "plain text" mode). It is fine to use a simple editor, though at some point you should look into using an editor designed for programming as using a programming editor or IDE will improve your programming productivity. diff --git a/sites/en/installfest/get_a_sticker.step b/sites/installfest/get_a_sticker.step similarity index 69% rename from sites/en/installfest/get_a_sticker.step rename to sites/installfest/get_a_sticker.step index 6d50952c5..7f7c77edd 100644 --- a/sites/en/installfest/get_a_sticker.step +++ b/sites/installfest/get_a_sticker.step @@ -14,17 +14,17 @@ step "Have a volunteer check your tool versions" do h3 "On all operating systems:" console "ruby -v" - fuzzy_result "ruby {FUZZY}1.9.3p125 (2012-02-16 revision 34643) [x86_64-darwin11.3.0]{/FUZZY}" + fuzzy_result "ruby 2.3{FUZZY}.3p222 (2015-12-16 revision 53155) [x86_64-darwin13]{/FUZZY}" - tip "Depending on your environment, your Ruby version might be **2.1** or **2.2**. As long as it's 1.9.3 or above, you're good to go." + tip "As long as your Ruby version is #{version_string(:ruby_short)} or above, you're good to go." console "bundle -v" fuzzy_result "Bundler version 1{FUZZY}.x.x{/FUZZY}" console "rails -v" - fuzzy_result "Rails 4.2{FUZZY}.x{/FUZZY}" + fuzzy_result "Rails 5.0{FUZZY}.x{/FUZZY}" - tip 'The RailsBridge curriculum is written for Rails 4, so if you still have Rails 3.x, you need to install Rails 4 with `gem install rails`.' + tip 'The RailsBridge curriculum is written for Rails 5, so if you still have Rails 4.x or earlier, you need to install Rails 5 with `gem install rails`.' end end diff --git a/sites/installfest/glossary.step b/sites/installfest/glossary.step new file mode 100644 index 000000000..d11221fa0 --- /dev/null +++ b/sites/installfest/glossary.step @@ -0,0 +1,24 @@ +h2 "If you are ever stuck trying to make sense of all this alphabet soup - these glossaries may be helpful!" + +span "Have a look at the " +a 'general Glossary', href: '#general-glossary' +span ", the " +a 'Command Line Glossary', href: '#command-line-glossary' +span ", and the " +a 'Ruby and Rails Glossary', href: '#ruby-and-rails-glossary' +span "." + +a name: 'general-glossary' +situation "General Glossary" do + insert 'general-glossary' +end + +a name: 'command-line-glossary' +situation "Command Line Glossary" do + insert 'command-line-glossary' +end + +a name: 'ruby-and-rails-glossary' +situation "Ruby and Rails Glossary" do + insert 'ruby-and-rails-glossary' +end diff --git a/sites/installfest/img/AboutThisMac.png b/sites/installfest/img/AboutThisMac.png new file mode 100644 index 000000000..b884185dd Binary files /dev/null and b/sites/installfest/img/AboutThisMac.png differ diff --git a/sites/en/installfest/img/WinRailsInstaller.jpg b/sites/installfest/img/WinRailsInstaller.jpg similarity index 100% rename from sites/en/installfest/img/WinRailsInstaller.jpg rename to sites/installfest/img/WinRailsInstaller.jpg diff --git a/sites/en/installfest/img/appstore.jpg b/sites/installfest/img/appstore.jpg similarity index 100% rename from sites/en/installfest/img/appstore.jpg rename to sites/installfest/img/appstore.jpg diff --git a/sites/installfest/img/directory.png b/sites/installfest/img/directory.png new file mode 100644 index 000000000..a87c6ed77 Binary files /dev/null and b/sites/installfest/img/directory.png differ diff --git a/sites/en/installfest/img/get_a_sticker_you_should_see.png b/sites/installfest/img/get_a_sticker_you_should_see.png similarity index 100% rename from sites/en/installfest/img/get_a_sticker_you_should_see.png rename to sites/installfest/img/get_a_sticker_you_should_see.png diff --git a/sites/installfest/img/install_atom_mac.gif b/sites/installfest/img/install_atom_mac.gif new file mode 100644 index 000000000..35a83eb5f Binary files /dev/null and b/sites/installfest/img/install_atom_mac.gif differ diff --git a/sites/en/installfest/img/railsbridge_ubuntu12-checkbox.png b/sites/installfest/img/railsbridge_ubuntu12-checkbox.png similarity index 100% rename from sites/en/installfest/img/railsbridge_ubuntu12-checkbox.png rename to sites/installfest/img/railsbridge_ubuntu12-checkbox.png diff --git a/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt-pinnedtotaskbar.png b/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt-pinnedtotaskbar.png new file mode 100644 index 000000000..0b948b3f9 Binary files /dev/null and b/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt-pinnedtotaskbar.png differ diff --git a/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt_ror.png b/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt_ror.png new file mode 100644 index 000000000..a2e955bda Binary files /dev/null and b/sites/installfest/img/railsbridge_windowsScreenshot-commandprompt_ror.png differ diff --git a/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win7.png b/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win7.png new file mode 100644 index 000000000..c1ab27d97 Binary files /dev/null and b/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win7.png differ diff --git a/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win8.png b/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win8.png new file mode 100644 index 000000000..f3c8cfaac Binary files /dev/null and b/sites/installfest/img/railsbridge_windows_findingCommandPrompt_win8.png differ diff --git a/sites/installfest/img/successful_rails_install.png b/sites/installfest/img/successful_rails_install.png new file mode 100644 index 000000000..397e03a19 Binary files /dev/null and b/sites/installfest/img/successful_rails_install.png differ diff --git a/sites/en/installfest/img/xcode-prefs.jpg b/sites/installfest/img/xcode-prefs.jpg similarity index 100% rename from sites/en/installfest/img/xcode-prefs.jpg rename to sites/installfest/img/xcode-prefs.jpg diff --git a/sites/installfest/img/xcode-tools-install.png b/sites/installfest/img/xcode-tools-install.png new file mode 100644 index 000000000..bf5917e0d Binary files /dev/null and b/sites/installfest/img/xcode-tools-install.png differ diff --git a/sites/en/installfest/install_xcode.step b/sites/installfest/install_xcode.step similarity index 63% rename from sites/en/installfest/install_xcode.step rename to sites/installfest/install_xcode.step index 6eb856bcf..4f9573021 100644 --- a/sites/en/installfest/install_xcode.step +++ b/sites/installfest/install_xcode.step @@ -1,10 +1,12 @@ -message "Installing XCode is straightforward with one caveat. When it asks you about the components to install you need to make sure \"Unix Tools\" is selected. Other than that just click Continue/Okay/Yes/etc." +option "OSX 10.9 Mavericks - OSX 10.11 El Capitan" do + link "install_xcode_command_line_tools" +end -option "Install XCode from the Apple App Store (OSX 10.7 Lion or greater)" do +option "OSX 10.7 Lion - OSX 10.8 Mountain Lion" do link "install_xcode_from_app_store" end -option "Install XCode from a thumb drive or DVD (OSX 10.6 Snow Leopard)" do +option "OSX 10.6 Snow Leopard" do link "install_xcode_from_dvd" end @@ -20,3 +22,4 @@ verify "your compiler was installed" do message "Your results might differ somewhat. Basically, as long as it doesn't say something like 'command not found', you're probably cool." end +next_step 'osx_rvm' diff --git a/sites/installfest/install_xcode_command_line_tools.step b/sites/installfest/install_xcode_command_line_tools.step new file mode 100644 index 000000000..5cd5cc040 --- /dev/null +++ b/sites/installfest/install_xcode_command_line_tools.step @@ -0,0 +1,30 @@ +message "Xcode Command Line Tools include lots of tools your computer needs to set up new software." + +verify "if you already have the tools installed" do + console "gcc --version" + result "Configured with: --prefix=/Library/Developer/CommandLineTools/usr --with-gxx-include-dir=/usr/include/c++/4.2.1 +Apple LLVM version 6.0 (clang-600.0.54) (based on LLVM 3.5svn) +Target: x86_64-apple-darwin14.0.0 +Thread model: posix" + message "If you see something about Darwin and LLVM, you are good to go. If not, use one of the steps below to install the tools. Come back afterwords and run this command to make sure it works!" +end + +option "Install XCode Command Line Tools using software update" do + message "You can install these tools by trying to run a command that requires them." + + step "Run the xcode-select command" do + console "xcode-select --install" + end + + step "Install the tools" do + message "Click on the \"Install\" button. When the download finishes, go back and run the test to make sure it works." + img src: 'img/xcode-tools-install.png', alt: "install dialog" + end +end + +option "Install Command Line Tools for XCode" do + message "Visit the [Apple Developer Downloads Page](https://developer.apple.com/downloads)" + message "Download and install the latest **Command Line Tools for Xcode** package for your operating system. This requires you to register for an Apple Developer account." +end + +next_step 'osx_rvm' diff --git a/sites/en/installfest/install_xcode_from_app_store.step b/sites/installfest/install_xcode_from_app_store.step similarity index 79% rename from sites/en/installfest/install_xcode_from_app_store.step rename to sites/installfest/install_xcode_from_app_store.step index f9e96d2a8..414a2fa59 100644 --- a/sites/en/installfest/install_xcode_from_app_store.step +++ b/sites/installfest/install_xcode_from_app_store.step @@ -14,6 +14,8 @@ step "Launch XCode" step "Install the Command Line Tools" do message "Open the Preferences menu and select the Downloads tab." message "Then click the 'Install' button next to 'Command Line Tools'." - img src: 'img/xcode-prefs.jpg', alt: 'XCode Preferences' + img src: 'img/xcode-prefs.jpg', alt: 'XCode Preferences showing the location of the install button for command line tools' end +next_step 'osx_rvm' + diff --git a/sites/en/installfest/install_xcode_from_dvd.step b/sites/installfest/install_xcode_from_dvd.step similarity index 63% rename from sites/en/installfest/install_xcode_from_dvd.step rename to sites/installfest/install_xcode_from_dvd.step index 9cebe7748..fb67a1cc2 100644 --- a/sites/en/installfest/install_xcode_from_dvd.step +++ b/sites/installfest/install_xcode_from_dvd.step @@ -1,3 +1,5 @@ +message "Installing XCode is straightforward with one caveat. When it asks you about the components to install you need to make sure \"Unix Tools\" is selected. Other than that just click Continue/Okay/Yes/etc." + step "Insert your OS X DVD or Thumb Drive" step "Locate Xcode.mpkg" do @@ -11,15 +13,17 @@ end step "Keep on clicking..." do li 'Click "Continue" at the Introduction screen.' li 'Click "Continue" at the License screen.' - li 'Click "Agree" in the popup to agree to the license.' + li 'Click "Agree" in the pop up to agree to the license.' li 'Click "Continue" at the Destination Select screen.' li "Click \"Continue\" at the Installation Type screen. (Don't change the checkboxes.)" end step 'Click "Install".' do - message "Enter your user password in the popup to REALLY start installing. It takes a while." + message "Enter your user password in the pop up to REALLY start installing. It takes a while." end step 'Click "Close"' do message 'once you get "The installation was successful" on the Summary screen.' end + +next_step 'osx_rvm' diff --git a/sites/en/installfest/installfest.step b/sites/installfest/installfest.step similarity index 54% rename from sites/en/installfest/installfest.step rename to sites/installfest/installfest.step index 3079cd073..7aced5e1d 100644 --- a/sites/en/installfest/installfest.step +++ b/sites/installfest/installfest.step @@ -1,5 +1,7 @@ message "This is a set of step-by-step instructions for installing Ruby, Rails, and other important tools on Mac, Windows, or Linux computers. Originally developed for the [Railsbridge Workshops](http://railsbridge.org), it is a community-supported open-source documentation project. If you want to contribute, click the [git] link at the top-right corner of any page and submit your change on GitHub." +message "**You'll repeat all these steps tomorrow, but more slowly so you can better understand what's going on under the hood.** Today we just want to check that everything's set up and ready for tomorrow." + step "Prepare for the Installfest" do message <<-MARKDOWN @@ -36,21 +38,15 @@ end step "Read This Overview" do message <<-MARKDOWN -You will be installing the following tools: - -* Ruby -* Rails -* Git -* GitHub (optional) -* Heroku -* Sublime Text 2 (or [some editor](editors)) -* Various useful "ruby gems", including... - * bundler - * sqlite - -You will also create an account on Heroku, an application hosting platform. +Here's a list of tools you'll be installing. As you go through the workshop, we'll explain what each one is for and how to use it. -If you already have an account on Heroku, make sure you know your username and password. +* **Ruby**. A programming language. +* **Rails**. A framework for making web applications with Ruby. It does a lot of the setting up work for you, which is really handy, but we'll cover this in more detail a little later. +* **Git**. A revision or source control system. It creates a _repository_ (sometimes called a _repo_ for short), which is a complete history of your changes to what you're working on. This means you can undo changes and roll back to previous versions of your work if something has gone wrong. +* **GitHub** (optional). A place to store your Git repository online, so you can access it from any computer. +* **Heroku**. An _application server_, which hosts your application while you're working on it. This allows you to access your app online and interact with it from any browser, instead of just on your local computer. +* **Atom** (or [some other editor](editors)). To write programs in Ruby, you need a text editor to create, edit and save Ruby files. +* A couple of useful **Ruby gems**. Ruby gems are useful bits of Ruby code that someone has created for reuse, so you don't have to write it yourself. If you've already installed the above tools and are confident they are setup correctly, skip ahead to the Get a Sticker step. diff --git a/sites/en/installfest/linux.step b/sites/installfest/linux.step similarity index 79% rename from sites/en/installfest/linux.step rename to sites/installfest/linux.step index 56ae72afd..5aedf715a 100644 --- a/sites/en/installfest/linux.step +++ b/sites/installfest/linux.step @@ -8,7 +8,7 @@ MARKDOWN step "Install packaged software and libraries" do message <<-MARKDOWN -Open a terminal (Applications > Accessories > Terminal). You may want to right-click on the terminal icon and select "Add to panel" so the icon will appear next to the default help and firefox icons in the top panel. +Open a terminal (Applications > Accessories > Terminal). You may want to right-click on the terminal icon and select "Add to panel" so the icon will appear next to the default help and Firefox icons in the top panel. MARKDOWN apts = %w{ @@ -77,17 +77,13 @@ step "Install Rails" do console "gem install rails" end -step "Sublime Text 2" do +step "Atom" do message <<-MARKDOWN -If you don't have a preferred code editor, you can install Sublime Text 2. It's available for [32-bit machines](http://c758482.r82.cf2.rackcdn.com/Sublime%20Text%202.0.1.tar.bz2) and [64-bit machines](http://c758482.r82.cf2.rackcdn.com/Sublime%20Text%202.0.1%20x64.tar.bz2) +If you don't have a preferred code editor, you can install Atom. -Check for the latest version. +Checkout this section of the [Atom manual](http://flight-manual.atom.io/getting-started/sections/installing-atom/#platform-linux) for the latest instructions. MARKDOWN - - tip "How many bits?" do - message %q{If you're not sure, you're probably 32-bit. Run `uname -i` and see. "x86" in the filename means 32-bit, and "x86_64" means 64-bit.} - end end next_step "configure_git" diff --git a/sites/en/installfest/macintosh.step b/sites/installfest/macOS.step similarity index 78% rename from sites/en/installfest/macintosh.step rename to sites/installfest/macOS.step index 07d0452f1..16dd27abc 100644 --- a/sites/en/installfest/macintosh.step +++ b/sites/installfest/macOS.step @@ -4,6 +4,9 @@ step "Learn your Mac OS X Version" do * Click on the Apple icon in the top left of your screen. * Select "About This Mac" * In the window that comes up, under the title "Mac OS X" there will be a version number. + * If it starts with 10.13, you have **High Sierra**. + * If it starts with 10.12, you have **Sierra**. + * If it starts with 10.11, you have **El Capitan**. * If it starts with 10.10, you have **Yosemite**. * If it starts with 10.9, you have **Mavericks**. * If it starts with 10.8, you have **Mountain Lion**. @@ -15,7 +18,7 @@ step "Learn your Mac OS X Version" do * Write down the Mac OS X version you have. * In addition, to the right of the "Processor", there will be the a processor type. - * If it ends with **Intel Core i7**, **Intel Core i5**, or **Intel Core i3**, you are good to go. + * If it ends with **Intel Core i7**, **Intel Core i5**, **Intel Core i3**, or **Intel Core m3** you are good to go. * If it ends with **Intel Core 2 Duo**, you are good to go. * If it ends with **Intel Core Duo** or something else, you are **NOT** good to go. Please flag down a volunteer. @@ -30,11 +33,11 @@ end step "Choose your instructions" do - option "Yosemite/Mavericks/Mountain Lion/Lion/Snow Leopard" do + option "High Sierra/Sierra/El Capitan/Yosemite/Mavericks/Mountain Lion/Lion/Snow Leopard" do link "osx_rvm" end option "Earlier than Snow Leopard" do important "You should try upgrading to at least **Snow Leopard**. Apple doesn't sell it the Apple store anymore, so you'll have to [buy it from them online](http://store.apple.com/us/product/MC573Z/A/mac-os-x-106-snow-leopard) or find a copy from a friend." - message "It may be possible to get Ruby and Rails installed if your OS is older than Snow Leopard, but you're likely to encounter a lot of tough roadblocks that will require some intense googling." + message "It may be possible to get Ruby and Rails installed if your OS is older than Snow Leopard, but you're likely to encounter a lot of tough roadblocks that will require some intense Googling." end end diff --git a/sites/en/installfest/osx_rvm.step b/sites/installfest/osx_rvm.step similarity index 91% rename from sites/en/installfest/osx_rvm.step rename to sites/installfest/osx_rvm.step index 6e57e59b2..da0f3da10 100644 --- a/sites/en/installfest/osx_rvm.step +++ b/sites/installfest/osx_rvm.step @@ -1,5 +1,5 @@ step "Open Terminal" do - message "Look for **Terminal.app** inside Applications -> Utilities." + message "Look for **Terminal.app** inside Applications -> Utilities, or use Spotlight search (Command + Space Bar) to find it." message "Add it to your dock; you'll be using it a lot. (To add it to the dock, click and hold the dock icon once Terminal is open. Select options -> keep in dock.)" @@ -49,12 +49,12 @@ step "Install Rails" do console "gem install rails" verify do console "rails -v" - fuzzy_result "Rails 4.{FUZZY}1.x{/FUZZY}" + fuzzy_result "Rails 5.{FUZZY}0.x{/FUZZY}" end end -step "Install Sublime Text 2" do - insert "install_sublime_text_2_for_mac" +step "Install Atom" do + insert "install_atom_for_mac" end verify "successful installation" do diff --git a/sites/installfest/windows.step b/sites/installfest/windows.step new file mode 100644 index 000000000..729cec802 --- /dev/null +++ b/sites/installfest/windows.step @@ -0,0 +1,183 @@ +message <<-MARKDOWN +These instructions should work for all versions of Windows from XP to Windows 8. + +You may need to login as Administrator, or give the Administrator password when installing some programs, depending on your Windows version and user settings. +MARKDOWN + +step "Run RailsInstaller" do + message "RailsInstaller includes Rails, Ruby, Git and SQLite." + message "Go to , scroll to the 'Downloads' section, and download the RailsInstaller for Windows/Ruby #{version_string(:ruby_short)}." + message "Click on the downloaded file to run the install wizard. Click Next at each step to accept the defaults." + message "Be sure to check the boxes for *Install git (recommended)* and *Add executables for Ruby, DevKit Git (if checked above) to the PATH*" + + img src: "img/WinRailsInstaller.jpg", alt: "Screenshot showing location of checkboxes for ensuring that Git is installed" + + message "Rails will be installed in C:\\RailsInstaller and the directory for your Rails projects will be C:\\Sites" +end + +step "Configure your git and ssh environment" do + + important "At the end of the installer there will be a checkbox asking 'Configure git and ssh when installation has completed'. **Leave this box checked.** It will open a terminal window that you need to **type into**." + + message "When it asks *Please enter your name, for example mine is: Wayne E. Seguin*" + message "Type *your actual full name* into the console and press **[enter]**" + + message "When it asks *Please enter your email address, for example mine is: wayneeseguin@gmail.com*" + message "Type *your actual email address* into the console and press **[enter]**" + + important "Use the **same email address** for heroku, git, github, and ssh." + + tip do + message "After this step you will have some **git config settings** and you will also have an **ssh key**." + end + + message "Here is a summary of your settings after this process:" + + img src: 'img/railsbridge_windowsScreenshot-commandprompt_ror.png', alt: "Screenshot showing correct git, ruby, rails and ssh settings" + + message "Close the command prompt window." +end + +step "Update Git" do + + message "The version of Git that comes with RailsInstaller is old, so we will be updating that next." + + message "Go to and download the installer. You want version 1.9.5 or newer." + + message "Run the installer, and it will ask you where you want to install it. Change it FROM C:\\Program Files\\Git TO, C:\\RailsInstaller\\Git like the picture below." + + img src: 'img/directory.png', alt: "Screenshot showing the step of installation where the location to install git is set" + + message "It will warn you that the directory already exists. Click yes to install to that folder anyway." + + message "Keep going using the default selections and you'll have the latest version of Git installed!" + +end + +step "Open a Terminal" do + message "Much of using Rails is typing commands and hitting **[enter]**. Your experience using Rails on Windows greatly depends on your making friends with the terminal window. Normally you will work in a terminal window and keep it open along with your browser." + + tip "The Terminal is also called the Command Prompt, Command Line, DOS Prompt, or DOS Window." + + message "RailsInstaller made a special Terminal for you to use when you're working on Ruby, Rails, or Git." + + message "To open the special Terminal, search for **Command Prompt with Ruby and Rails**." + + div do + option_half "Windows 7" do + img src: 'img/railsbridge_windows_findingCommandPrompt_win7.png', alt: "Screenshot showing search for command prompt" + end + + option_half "Windows 8" do + img src: 'img/railsbridge_windows_findingCommandPrompt_win8.png', alt: "Screenshot showing search for command prompt" + end + end + + message "You should do all your Rails work in this RailsInstaller DOS window." + + tip "Pin It to Win It" do + message 'Pinning the Command Prompt to the taskbar is a handy shortcut.' + + img src: 'img/railsbridge_windowsScreenshot-commandprompt-pinnedtotaskbar.png', alt: 'Pin the Command Prompt to the Task Bar' + end +end + +step "Update RubyGems" do + message "The version of RubyGems that comes with RailsInstaller may be outdated. Follow these steps to upgrade it!" + + step "Check to see if you need to update" do + console "gem -v" + + message "If the output is **#{version_string(:windows_rubygems_min)}** or later, skip to the next step!" + end + + step "Install the latest version of RubyGems" do + message "Otherwise, run the following command:" + + console_without_message "gem update --system --no-document" + + message "**Close and reopen your command prompt**, then verify you have the upgraded RubyGems by typing this in the terminal:" + + console_without_message "gem -v" + fuzzy_result "#{version_string(:windows_rubygems_min_short)}{FUZZY}.9{/FUZZY}" + + message "As long as the version is at least **#{version_string(:windows_rubygems_min)}**, you should be fine!" + end +end + +a name: 'install-node' +step "Install Node.js" do + + message "Go to and download the installer. Pick the one that is \"recommended for most users.\"" + + message "Click on the downloaded file to run the install wizard. Click Next at each step to accept the defaults." + + message "**Reboot your computer.**" + + message "Once your computer is back up, load **Command Prompt with Ruby and Rails** and..." + + console "node -v" + fuzzy_result "v6{FUZZY}.x.x{/FUZZY}" +end + +step "Update Rails" do + message "Currently, RailsInstaller installs Rails 4.1.x, but we want the latest. Upgrading Rails is pretty easy:" + + console "gem install rails --no-document" + + message "...and you're done. New Rails! Woo." +end + +step "Sanity Check" do + + console "ruby -v" + fuzzy_result "ruby #{version_string(:ruby_short)}{FUZZY}.4{/FUZZY}" + + console "rails -v" + fuzzy_result "Rails 5.0{FUZZY}.x{/FUZZY}" + + console "git --version" + fuzzy_result "git version 2{FUZZY}.9.2.windows.1{/FUZZY}" +end + +step "Configure the Windows Terminal" do + message "Take a moment to configure the *Command Prompt with Ruby and Rails* so that it is a good height and width and has a nice font." + + message "Right-click on the menu bar and select **Properties**" + + message "Under the *Font* tab, select Lucida Console from the font chooser box. This lets you view non-ascii characters." + + message "In the *Layout* tab, adjust *Window Size* so the window is about half as wide as your screen, and is as tall as possible without covering the task bar (this may require some trial and error)." + + message "Click OK." + + tip "Clearing the Terminal" do + message "If you ever want to clear the terminal of all its cluttered output" + console "cls" + end + + tip "Command History" do + message "The terminal window stores a \"command history.\" To view and re-run previous commands, use the <up arrow> and <down arrow> keys. You can also edit a previous command and run it -- this is handy for long commands, or fixing mistakes, or for cycles (series of commands) that you repeat." + end + + tip "Copy and Paste" do + + message "It's usually better to type commands in yourself. It takes a little longer but you learn more." + + message "But if you must... in these instructions, where it says: \"Type this in the terminal:\", you can usually copy the command from this page, and right click in the menu bar or terminal window, then click on \"Paste\", then hit the **[enter]** key." + end +end + +step "Install a Text Editor" do + message "You need a text editor to do Ruby. If you already have a preferred text editor, such as vi, emacs, jedit, etc., you can skip this step. It must be a plain text editor and not something with styling like Microsoft Word or WordPad." + + message "Notepad is not a good programming editor, but it will work in a pinch." + + important "**When in doubt, use Atom.**" + + message "[Atom](https://atom.io) is a good option, if you don't have one yet." + + message "Download Atom here: " +end + +next_step "create_a_heroku_account" diff --git a/sites/en/intro-to-rails/CRUD_with_scaffolding.step b/sites/intro-to-rails/CRUD_with_scaffolding.step similarity index 90% rename from sites/en/intro-to-rails/CRUD_with_scaffolding.step rename to sites/intro-to-rails/CRUD_with_scaffolding.step index bd59c21b0..c4a0fbb6d 100644 --- a/sites/en/intro-to-rails/CRUD_with_scaffolding.step +++ b/sites/intro-to-rails/CRUD_with_scaffolding.step @@ -17,11 +17,13 @@ steps { step { console "rails server" + + tip "Now is a good time to figure out how to have multiple tabs or windows of your terminal or command prompt. Starting and stopping the Rails server all day is tedious, so it's good to have one terminal tab or window for running commands, and a separate one for the server." } step { message "Point your browser to [http://localhost:3000/topics](http://localhost:3000/topics)" - message "You should see the \"Listing topics\" page with headers for title and description, and a link to add a new topic:" + message "You should see the \"Topics\" page with headers for title and description, and a link to add a new topic:" img src: "img/Seattle_topic_list_page.png", alt: "Screenshot of topic list page" } diff --git a/sites/en/intro-to-rails/_consider_deploying.step b/sites/intro-to-rails/_consider_deploying.step similarity index 100% rename from sites/en/intro-to-rails/_consider_deploying.step rename to sites/intro-to-rails/_consider_deploying.step diff --git a/sites/intro-to-rails/_consider_deploying_again.step b/sites/intro-to-rails/_consider_deploying_again.step new file mode 100644 index 000000000..93c2bee43 --- /dev/null +++ b/sites/intro-to-rails/_consider_deploying_again.step @@ -0,0 +1,13 @@ +div :class => "deploying" do + h1 "Deploying" + blockquote do + + message <<-MARKDOWN + Before the next step, you could try deploying your app to Heroku! + + * If you have already deployed your app to Heroku, go on to [Deploying to Heroku again](deploying_to_heroku_again). + * If this is your first time deploying your app, start at [Deploying to Heroku](deploying_to_heroku) + MARKDOWN + + end +end diff --git a/sites/intro-to-rails/_deploying_to_heroku.step b/sites/intro-to-rails/_deploying_to_heroku.step new file mode 100644 index 000000000..7fd11fb29 --- /dev/null +++ b/sites/intro-to-rails/_deploying_to_heroku.step @@ -0,0 +1,43 @@ +step "Create a Heroku application" do + console "heroku create" + message "`heroku create` registers a new application on Heroku's system. You should see some output including your new app's URL." +end + +step "Edit the Gemfile" do + important "Each application has its own `Gemfile`. Be sure you're opening the one inside your app's folder." + + message "Heroku will run our application slightly differently than our development computer does, which requires us to make a small change to our `Gemfile`." + + message "Open the file called `Gemfile` in Atom, or your preferred editor, and find the line containing:" + + source_code :ruby, <<-RUBY +gem 'sqlite3' + RUBY + + message "**Remove that line** and replace it with:" + + source_code :ruby, <<-RUBY +group :development, :test do + gem 'sqlite3' +end + +group :production do + gem 'pg', '~> 0.18' +end + RUBY +end + +step "Apply the Gemfile changes" do + console "bundle install --without production" + message "Every time the `Gemfile` changes, you need to run ``bundle install`` for the changes to be processed. The processed version of the changes is stored in another file called ``Gemfile.lock``." + message "Here we are bundling without the gems in the group ``production``." +end + +step "Commit the Gemfile changes" do + message "There are now changes to `Gemfile` and `Gemfile.lock` that need to be committed before we can push to Heroku." + console <<-SHELL +git add . +git commit -m "Changed Gemfile for Heroku" + SHELL + tip "There is a period after the word add in the first line." +end diff --git a/sites/intro-to-rails/_deploying_to_heroku_again.step b/sites/intro-to-rails/_deploying_to_heroku_again.step new file mode 100644 index 000000000..753f43c7a --- /dev/null +++ b/sites/intro-to-rails/_deploying_to_heroku_again.step @@ -0,0 +1,61 @@ +step "Commit any pending changes to git" do + message "Heroku will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed." + console "git status" + message "`git status` shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise..." + + console <<-SHELL +git add . +git commit -m "Some helpful message for your future self" + SHELL + message "Your commit message should reference whatever your outstanding +changes are: something like \"Added votes to the topics index\"." +end + +step "Push changes to Heroku" do + console "git push heroku main" + message "This takes all changes you've committed locally and pushes them to Heroku." +end + +step "Run database migrations on Heroku" do + console "heroku run rails db:migrate" + message "This tells Heroku to run your migrations on its database, like +running `rails db:migrate` locally." + message "Heroku's database is separate from the one on your computer, which +means it needs to be updated every time you make changes to the structure of +your database." + message "It also means that you'll not see any of the data you entered into +the `sqlite3` database on your computer." +end + +step "Visit your application" do + console "heroku open" + message "This opens the new application in your browser." +end + +explanation do + message <<-MARKDOWN + First, we had to do some work to make Heroku happy with our application. This +required updating the `Gemfile` and bundling. + + * The `Gemfile` is a list of all the Ruby libraries your application needs. + What we've declared here is that we want to use the `sqlite3` library + while we're developing on our computer (the development group) but when + deploying to Heroku (the production group) we want to use the `pg` library, + which is made for the type of database that Heroku uses. + + * Bundler is how Ruby projects keep track of the gems that they use. We told + Bundler what we wanted to use in the `Gemfile`, now we need to make sure those + gems are installed. Since we don't have the type of database Heroku does, we + skip the production gems. Don't worry though! Bundler still logs them so + Heroku will install them when they get your code. + MARKDOWN + + message "You should be able to deploy your application any time it's in a good, working state. Your typical workflow will look like:" + img src: "img/workflow.png", alt: "Diagram showing git workflow of making changes, committing them, and pushing to Heroku.", style: "border: none" + ol do + li { message "Add or change some code" } + li { message "Commit your changes (`git commit`)" } + li { message "(repeat)" } + end + message "Any time your changes are committed, you should feel free to `git push heroku main` and boom! Your changes are live!" +end diff --git a/sites/en/intro-to-rails/_switch_to_home_directory.step b/sites/intro-to-rails/_switch_to_home_directory.step similarity index 100% rename from sites/en/intro-to-rails/_switch_to_home_directory.step rename to sites/intro-to-rails/_switch_to_home_directory.step diff --git a/sites/en/intro-to-rails/_working_effectively_and_efficiently.md b/sites/intro-to-rails/_working_effectively_and_efficiently.md similarity index 75% rename from sites/en/intro-to-rails/_working_effectively_and_efficiently.md rename to sites/intro-to-rails/_working_effectively_and_efficiently.md index 1cc80af45..f37b0dd36 100644 --- a/sites/en/intro-to-rails/_working_effectively_and_efficiently.md +++ b/sites/intro-to-rails/_working_effectively_and_efficiently.md @@ -9,10 +9,10 @@ We highly recommend you do the following: * Bring up one window with two tabs * One for this content * One for interacting with your app. -* Open your text editor and _do not ever close it_. We're not quitters. -* Hide all extra applications. Turn off Twitter, IM, and all other distractions. +* Open your text editor and don't close it. +* Hide all extra applications. Turn off Twitter, Facebook, IM, and all other distractions. By minimizing the number of things you interact with, you reduce the amount of time spent switching between them and the context lost as you work through the lessons. Having 50 tabs open in your web -browser gets confusing and wastes time. \ No newline at end of file +browser gets confusing. diff --git a/sites/en/intro-to-rails/add_the_project_to_a_git_repo.step b/sites/intro-to-rails/add_the_project_to_a_git_repo.step similarity index 100% rename from sites/en/intro-to-rails/add_the_project_to_a_git_repo.step rename to sites/intro-to-rails/add_the_project_to_a_git_repo.step diff --git a/sites/en/intro-to-rails/allow_people_to_vote.step b/sites/intro-to-rails/allow_people_to_vote.step similarity index 94% rename from sites/en/intro-to-rails/allow_people_to_vote.step rename to sites/intro-to-rails/allow_people_to_vote.step index 151a49a2a..851d1dc94 100644 --- a/sites/en/intro-to-rails/allow_people_to_vote.step +++ b/sites/intro-to-rails/allow_people_to_vote.step @@ -38,7 +38,7 @@ steps { RUBY message <<-MARKDOWN - Verify that upvote route was added successfully by checking the output of `rake routes` or [http://localhost:3000/rails/info](http://localhost:3000/rails/info). You should see a line that looks like this: + Verify that upvote route was added successfully by checking the output of `rails routes` or [http://localhost:3000/rails/info](http://localhost:3000/rails/info). You should see a line that looks like this: ``` Prefix Verb URI Pattern Controller#Action @@ -80,6 +80,6 @@ steps { end } -insert 'consider_deploying' +insert 'consider_deploying_again' next_step "redirect_to_the_topics_list_after_creating_a_new_topic" diff --git a/sites/en/intro-to-rails/clean_up_links_on_the_topics_list.step b/sites/intro-to-rails/clean_up_links_on_the_topics_list.step similarity index 97% rename from sites/en/intro-to-rails/clean_up_links_on_the_topics_list.step rename to sites/intro-to-rails/clean_up_links_on_the_topics_list.step index 4c33b2723..811edf3f6 100644 --- a/sites/en/intro-to-rails/clean_up_links_on_the_topics_list.step +++ b/sites/intro-to-rails/clean_up_links_on_the_topics_list.step @@ -39,6 +39,6 @@ explanation { MARKDOWN } -insert 'consider_deploying' +insert 'consider_deploying_again' next_step "credits_and_next_steps" diff --git a/sites/en/intro-to-rails/creating_a_migration.step b/sites/intro-to-rails/creating_a_migration.step similarity index 70% rename from sites/en/intro-to-rails/creating_a_migration.step rename to sites/intro-to-rails/creating_a_migration.step index da81c8759..72d30f929 100644 --- a/sites/en/intro-to-rails/creating_a_migration.step +++ b/sites/intro-to-rails/creating_a_migration.step @@ -25,22 +25,19 @@ steps { } step { - console "rake db:migrate" + console "rails db:migrate" message "This tells Rails to update the database to include a table for our new model." } } explanation { - h2 "Rake" message <<-MARKDOWN -`rake` (**r**uby m**ake**) is a tool that allows you to run small Ruby programs (**tasks**) that you use often in your application. - -Here, `rake db:migrate` is a task provided by the Rails framework. It uses the migration file we just created (`db/migrate/201xxxxxxxxxxx_create_topics.rb`) to change the database. Database migration files can be crucial to code collaboration. +Here, `rails db:migrate` is a command provided by the Rails framework. It uses the migration file we just created (`db/migrate/201xxxxxxxxxxx_create_topics.rb`) to change the database. Database migration files can be crucial to code collaboration. MARKDOWN - tip "You can run `rake -T` to see a list of all the `rake` commands your app currently responds to, along with a short description of each task." + tip "You can run `rails --help` to see a list of all the `rails` commands your app currently responds to, along with a short description of each one." } diff --git a/sites/en/intro-to-rails/credits_and_next_steps.step b/sites/intro-to-rails/credits_and_next_steps.step similarity index 77% rename from sites/en/intro-to-rails/credits_and_next_steps.step rename to sites/intro-to-rails/credits_and_next_steps.step index ac41c8088..d2639cdcd 100644 --- a/sites/en/intro-to-rails/credits_and_next_steps.step +++ b/sites/intro-to-rails/credits_and_next_steps.step @@ -3,11 +3,14 @@ Guess what? _**You're done!!!**_ Congratulations, you just \"finished\" your fi (They're never _really_ ever finished... have fun tweaking it!) +You get another sticker! :) + # Extra Credit If you got all the way through Suggestotron with some time to spare, here's some extra stuff you can try: * Add a downvote button that does the opposite of what the upvote button does +* Create upvote and downvote methods in the Topic model and use those in the topics controller instead directly modifying the topics votes * Sort topics by their number of votes * Add an 'about' page, linked from the bottom of the Suggestotron topics list. Link back to the Topics list from the About page so users don't get stranded. * If your class has a **lot** of time left over: @@ -19,12 +22,13 @@ MARKDOWN h1 "Authors" ul do - li "Sarah Allen" - li "Sarah Mei" - li "Alex Chaffee" - li "Ryan Davis" - li "Steven! Ragnarok" - li "...and many, many others" + li do + a "The RailsBridge community", href: "https://github.com/railsbridge/docs/graphs/contributors" + end + li do + span "...and maybe you? Pull requests welcome " + a "on GitHub", href: "https://github.com/railsbridge/docs" + end end h1 "What next?" diff --git a/sites/intro-to-rails/deploying_to_heroku.step b/sites/intro-to-rails/deploying_to_heroku.step new file mode 100644 index 000000000..9799c37cf --- /dev/null +++ b/sites/intro-to-rails/deploying_to_heroku.step @@ -0,0 +1,9 @@ +h2 do + span "If you have already deployed your app to Heroku, go on to " + a 'Deploying to Heroku again', href: "deploying_to_heroku_again" + span "." +end + +insert '_deploying_to_heroku' + +insert '_deploying_to_heroku_again' diff --git a/sites/intro-to-rails/deploying_to_heroku_again.step b/sites/intro-to-rails/deploying_to_heroku_again.step new file mode 100644 index 000000000..38ef01c89 --- /dev/null +++ b/sites/intro-to-rails/deploying_to_heroku_again.step @@ -0,0 +1,7 @@ +h2 do + span "If you haven't deployed your app to Heroku yet, start at " + a 'Deploying to Heroku', href: 'deploying_to_heroku' + span "." +end + +insert '_deploying_to_heroku_again' diff --git a/sites/en/intro-to-rails/getting_started.step b/sites/intro-to-rails/getting_started.step similarity index 67% rename from sites/en/intro-to-rails/getting_started.step rename to sites/intro-to-rails/getting_started.step index bcfd44fdb..01ad21b9f 100644 --- a/sites/en/intro-to-rails/getting_started.step +++ b/sites/intro-to-rails/getting_started.step @@ -7,12 +7,12 @@ end steps do - tip "If you have _any_ problems, contact a TA immediately." + tip "If you have any problems, call over a TA." step do insert 'switch_to_home_directory' end - + step do console "mkdir railsbridge" message "This command creates a new directory for us to store our project in." @@ -24,11 +24,20 @@ steps do step do message "Check to see if you have any existing suggestotron apps from a previous workshop." - console "ls" - message "`ls` stands for **l**i**s**t." - message "It lists the contents of the current directory." - message "If you have any old suggestotron apps in that list, you can remove them to prevent hiccups:" - console "rm -rf suggestotron" + option_half "OSX/Linux" do + console "ls" + message "`ls` stands for **l**i**s**t." + message "It lists the contents of the current directory." + message "If you have any old suggestotron apps in that list, you can remove them to prevent hiccups:" + console "rm -rf suggestotron" + end + option_half "Windows" do + console "dir" + message "`dir` stands for **dir**ectory." + message "It lists the contents of the current directory." + message "If you have any old suggestotron apps in that list, you can remove them to prevent hiccups:" + console "rmdir /s /q suggestotron" + end end step do @@ -46,14 +55,18 @@ steps do step do message <<-MARKDOWN Open the suggestotron folder as a project in your text editor. + MARKDOWN -In **Sublime Text 2**, you can use the `Project > Add Folder to Project...` menu option: + tip "Close any files that are already open. They might be from yesterday's `test_app`, and we want to make sure that we're editing files in today's `suggestotron` app." + + message <<-MARKDOWN +In **Atom**, you can use the `File > Add Project Folder...` menu option: -![Sublime Text Project menu screenshot](img/sublime_add_folder_to_project.png) +![Atom Project menu screenshot](img/atom_add_folder_to_project.png) -Select your `suggestotron` folder from the file picker that opens. If everything works out Sublime should show the directories of your app in a tree structure on the left: +Select your `suggestotron` folder from the file picker that opens. If everything works out Atom should show the directories of your app in a tree structure on the left: -![Screenshot of Suggestotron project folder tree in Sublime Text](img/sublime_project_as_folder.png) +![Screenshot of Suggestotron project folder tree in Atom](img/atom_project_as_folder.png) MARKDOWN end diff --git a/sites/intro-to-rails/glossary.step b/sites/intro-to-rails/glossary.step new file mode 100644 index 000000000..4ee39d03f --- /dev/null +++ b/sites/intro-to-rails/glossary.step @@ -0,0 +1,24 @@ +h2 "If you are ever stuck trying to make sense of all this alphabet soup - these glossaries may be helpful!" + +span "Have a look at the " +a 'general Glossary', href: '#general-glossary' +span ", the " +a 'Command Line Glossary', href: '#command-line-glossary' +span ", and the " +a 'Ruby and Rails Glossary', href: '#ruby-and-rails-glossary' +span "." + +a name: 'general-glossary' +situation "General Glossary" do + insert '../installfest/general-glossary' +end + +a name: 'command-line-glossary' +situation "Command Line Glossary" do + insert '../installfest/command-line-glossary' +end + +a name: 'ruby-and-rails-glossary' +situation "Ruby and Rails Glossary" do + insert '../installfest/ruby-and-rails-glossary' +end diff --git a/sites/en/intro-to-rails/hooking_up_votes_and_topics.step b/sites/intro-to-rails/hooking_up_votes_and_topics.step similarity index 96% rename from sites/en/intro-to-rails/hooking_up_votes_and_topics.step rename to sites/intro-to-rails/hooking_up_votes_and_topics.step index 550676cbb..42502a734 100644 --- a/sites/en/intro-to-rails/hooking_up_votes_and_topics.step +++ b/sites/intro-to-rails/hooking_up_votes_and_topics.step @@ -22,7 +22,7 @@ steps { message "Edit `app/models/topic.rb` so that it looks like this:" source_code :ruby, <<-RUBY -class Topic < ActiveRecord::Base +class Topic < ApplicationRecord has_many :votes, dependent: :destroy end RUBY @@ -31,7 +31,7 @@ end step "Teach the Vote model about Topics" do message "Edit `app/models/vote.rb` so that it looks like this:" source_code :ruby, <<-RUBY -class Vote < ActiveRecord::Base +class Vote < ApplicationRecord belongs_to :topic end RUBY @@ -44,8 +44,8 @@ end result <<-CONSOLE $ rails c - Loading development environment (Rails 4.2.0) - 2.1.5 :001 > + Loading development environment (Rails 5.0.0) + 2.3.0 :001 > CONSOLE message "At the console, try the following things" diff --git a/sites/intro-to-rails/img/Seattle_list_with_topic.png b/sites/intro-to-rails/img/Seattle_list_with_topic.png new file mode 100644 index 000000000..e693d8f27 Binary files /dev/null and b/sites/intro-to-rails/img/Seattle_list_with_topic.png differ diff --git a/sites/intro-to-rails/img/Seattle_topic_created.png b/sites/intro-to-rails/img/Seattle_topic_created.png new file mode 100644 index 000000000..77a8816f4 Binary files /dev/null and b/sites/intro-to-rails/img/Seattle_topic_created.png differ diff --git a/sites/intro-to-rails/img/Seattle_topic_list_page.png b/sites/intro-to-rails/img/Seattle_topic_list_page.png new file mode 100644 index 000000000..f4ef61124 Binary files /dev/null and b/sites/intro-to-rails/img/Seattle_topic_list_page.png differ diff --git a/sites/intro-to-rails/img/Start_page.png b/sites/intro-to-rails/img/Start_page.png new file mode 100644 index 000000000..d5fbf50f6 Binary files /dev/null and b/sites/intro-to-rails/img/Start_page.png differ diff --git a/sites/intro-to-rails/img/atom_add_folder_to_project.png b/sites/intro-to-rails/img/atom_add_folder_to_project.png new file mode 100644 index 000000000..154db6d95 Binary files /dev/null and b/sites/intro-to-rails/img/atom_add_folder_to_project.png differ diff --git a/sites/intro-to-rails/img/atom_project_as_folder.png b/sites/intro-to-rails/img/atom_project_as_folder.png new file mode 100644 index 000000000..0996dd84a Binary files /dev/null and b/sites/intro-to-rails/img/atom_project_as_folder.png differ diff --git a/sites/intro-to-rails/img/finished_app.png b/sites/intro-to-rails/img/finished_app.png new file mode 100644 index 000000000..c24d282e6 Binary files /dev/null and b/sites/intro-to-rails/img/finished_app.png differ diff --git a/sites/en/intro-to-rails/img/mvc.png b/sites/intro-to-rails/img/mvc.png similarity index 100% rename from sites/en/intro-to-rails/img/mvc.png rename to sites/intro-to-rails/img/mvc.png diff --git a/sites/en/intro-to-rails/img/rails4_rails_info_routing.png b/sites/intro-to-rails/img/rails4_rails_info_routing.png similarity index 100% rename from sites/en/intro-to-rails/img/rails4_rails_info_routing.png rename to sites/intro-to-rails/img/rails4_rails_info_routing.png diff --git a/sites/en/intro-to-rails/img/workflow.png b/sites/intro-to-rails/img/workflow.png similarity index 100% rename from sites/en/intro-to-rails/img/workflow.png rename to sites/intro-to-rails/img/workflow.png diff --git a/sites/en/intro-to-rails/intro-to-rails.step b/sites/intro-to-rails/intro-to-rails.step similarity index 84% rename from sites/en/intro-to-rails/intro-to-rails.step rename to sites/intro-to-rails/intro-to-rails.step index 51df25b3c..69f0a102d 100755 --- a/sites/en/intro-to-rails/intro-to-rails.step +++ b/sites/intro-to-rails/intro-to-rails.step @@ -23,7 +23,7 @@ application online you should understand: * How to try your Ruby code (IRB) * How to go from requirements to a new working Rails application * How to get your application online -* The basic tools a RoR developer uses (source control, editor, console, local server) +* The basic tools a RoR (Ruby on Rails) developer uses (source control, editor, console, local server) ### Schedule @@ -38,8 +38,8 @@ day. Probably. We're going to be working with: -* Ruby 2.1 or 2.2 installed via RVM (Mac or Linux) or RailsInstaller (Windows) -* Rails 4.2.x +* Ruby 2.3 or greater installed via RVM (Mac or Linux) or RailsInstaller (Windows) +* Rails 5.0.x * Bundler * SQLite * The text editor of your choice @@ -76,7 +76,7 @@ Each lesson will look like this:

            Goal:

            Description of the current step. -

            Red because big goals are scary. +

            Red because big goals are important.

            Steps:

            @@ -87,11 +87,11 @@ def code_to_write 1 + 1 end
            -

            Yellow because we've gotten it done, but we have no clue what's going on. +

            Yellow because we've gotten it done, but we're not sure yet what's going on.

            Explanation

            -

            Details of what the steps actually did... spell out the cause and effect. +

            Details of what the steps actually did, explaining the cause and effect.

            Green because we can tie everything together now.

            diff --git a/sites/en/intro-to-rails/make_the_topic_title_a_link.step b/sites/intro-to-rails/make_the_topic_title_a_link.step similarity index 100% rename from sites/en/intro-to-rails/make_the_topic_title_a_link.step rename to sites/intro-to-rails/make_the_topic_title_a_link.step diff --git a/sites/en/intro-to-rails/rails_architecture.step b/sites/intro-to-rails/rails_architecture.step similarity index 88% rename from sites/en/intro-to-rails/rails_architecture.step rename to sites/intro-to-rails/rails_architecture.step index 3d20142ee..e356d0df2 100644 --- a/sites/en/intro-to-rails/rails_architecture.step +++ b/sites/intro-to-rails/rails_architecture.step @@ -22,8 +22,8 @@ explanation { h3 "Model" message <<-MARKDOWN -* For all the Models we create in RailsBridge, Model objects have a corresponding record in the the database. The name of the table in the database is the plural version of the Model's class name. For example, if the Model is called 'Duck', it will automatically query or write to the 'ducks' table in the database. -* Methods internal to Rails make it easy to automatically write records to the the database and query the database to get the records again later. +* For all the Models we create in RailsBridge, Model objects have a corresponding record in the database. The name of the table in the database is the plural version of the Model's class name. For example, if the Model is called 'Duck', it will automatically query or write to the 'ducks' table in the database. +* Methods internal to Rails make it easy to automatically write records to the database and query the database to get the records again later. * The Model is a bridge between the database and your application's code. MARKDOWN diff --git a/sites/en/intro-to-rails/redirect_to_the_topics_list_after_creating_a_new_topic.step b/sites/intro-to-rails/redirect_to_the_topics_list_after_creating_a_new_topic.step similarity index 100% rename from sites/en/intro-to-rails/redirect_to_the_topics_list_after_creating_a_new_topic.step rename to sites/intro-to-rails/redirect_to_the_topics_list_after_creating_a_new_topic.step diff --git a/sites/en/intro-to-rails/ruby_language.step b/sites/intro-to-rails/ruby_language.step similarity index 96% rename from sites/en/intro-to-rails/ruby_language.step rename to sites/intro-to-rails/ruby_language.step index 8b091bc4e..0d2754848 100644 --- a/sites/en/intro-to-rails/ruby_language.step +++ b/sites/intro-to-rails/ruby_language.step @@ -137,6 +137,7 @@ pluralize("kiwi") step do message "Putting it all together, let's make a method that says your opinion of some fruits:" + message "**Don't try to type this all in!** Just paste it into irb and see what happens." console_without_message <<-RUBY def my_opinion(fruits) fruits.each do |fruit| @@ -154,4 +155,6 @@ my_opinion(["apple", "pizza", "orange"]) end end +important "Before you move on to the next step you must exit IRB by typing 'exit'" + next_step "getting_started" diff --git a/sites/en/intro-to-rails/running_your_application_locally.step b/sites/intro-to-rails/running_your_application_locally.step similarity index 83% rename from sites/en/intro-to-rails/running_your_application_locally.step rename to sites/intro-to-rails/running_your_application_locally.step index 87aa5467c..1aadd1447 100644 --- a/sites/en/intro-to-rails/running_your_application_locally.step +++ b/sites/intro-to-rails/running_your_application_locally.step @@ -5,13 +5,15 @@ end steps do step do + message "Make sure that you're in the `suggestotron` folder. You can type `pwd` (**p**rint **w**orking **d**irectory) in the terminal to see what folder you are in." + console "rails server" message "This will print some stuff and stay running forever, printing more stuff every time you visit a page in your app." end step do text "Point your web browser to " - url "http://localhost:3000/" + url "http://localhost:3000/" message "See your web app actually running!" end @@ -21,9 +23,7 @@ will be ignored." message "To get back to the terminal, you can stop the server by typing `Control-c`." result <<-STOPPING_RAILS_SERVER -^C[#{Time.now.strftime("%Y-%m-%d %H:%M:%S")}] INFO going to shutdown ... -[#{Time.now.strftime("%Y-%m-%d %H:%M:%S")}] INFO WEBrick::HTTPServer#start done. -Exiting +^CExiting STOPPING_RAILS_SERVER end end diff --git a/sites/en/intro-to-rails/setting_the_default_page.step b/sites/intro-to-rails/setting_the_default_page.step similarity index 78% rename from sites/en/intro-to-rails/setting_the_default_page.step rename to sites/intro-to-rails/setting_the_default_page.step index 89d70142b..a8f3db533 100644 --- a/sites/en/intro-to-rails/setting_the_default_page.step +++ b/sites/intro-to-rails/setting_the_default_page.step @@ -14,14 +14,13 @@ goals { steps { step "Add a root route" do - message "Open the file `config/routes.rb` in an editor." + message "Open the file `config/routes.rb` in an editor (In the InstallFest yesterday, we suggested that you install and use **Atom** as your editor)." - message "Search the file for **root**, it should be near the top if you are using Rails 4." - - message "Uncomment the line that contains the example command by removing the `#` sign in front of it, and change it to read `root 'topics#index'`. When you are done the line should look like this:" + message "Look for the line `Rails.application.routes.draw` at the beginning of the file, and add the line `root 'topics#index'` after it. When you are done the start of the file should look like this:" source_code :ruby, <<-RUBY -root 'topics#index' +Rails.application.routes.draw do + root 'topics#index' RUBY em do @@ -49,11 +48,11 @@ explanation { possible URLs. To explore the URLs in more detail we can use the terminal. - At the terminal type `rake routes`. You should get something that + At the terminal type `rails routes`. You should get something that looks like this: ```` - $ rake routes + $ rails routes Prefix Verb URI Pattern Controller#Action topics GET /topics(.:format) topics#index @@ -68,11 +67,11 @@ explanation { ```` This shows all the URLs your application responds to. The code that starts with colons are variables so :id means the id number of the record. The code in parenthesis is optional. - In Rails 4, you can also get this information on your site in development. Go to http://localhost:3000/rails/info and you'll see something like this: + You can also get this information on your site in development. Go to http://localhost:3000/rails/info and you'll see something like this: Screenshot of browser-based Rails routing info page - You'll also see that table in Rails 4 whenever you try to access an invalid route (try http://localhost:3000/sandwich) + You'll also see that table in whenever you try to access an invalid route (try http://localhost:3000/sandwich) ### Exploring Routes (optional) diff --git a/sites/en/intro-to-rails/voting_on_topics.step b/sites/intro-to-rails/voting_on_topics.step similarity index 97% rename from sites/en/intro-to-rails/voting_on_topics.step rename to sites/intro-to-rails/voting_on_topics.step index 6bc428b68..d4776198b 100644 --- a/sites/en/intro-to-rails/voting_on_topics.step +++ b/sites/intro-to-rails/voting_on_topics.step @@ -10,7 +10,7 @@ goals { steps { console <<-SHELL rails generate model vote topic_id:integer -rake db:migrate +rails db:migrate SHELL } diff --git a/sites/en/javascript-to-do-list/img/browser_console.png b/sites/javascript-snake-game/img/browser_console.png similarity index 100% rename from sites/en/javascript-to-do-list/img/browser_console.png rename to sites/javascript-snake-game/img/browser_console.png diff --git a/sites/javascript-snake-game/javascript-snake-game.step b/sites/javascript-snake-game/javascript-snake-game.step new file mode 100644 index 000000000..ac318c35a --- /dev/null +++ b/sites/javascript-snake-game/javascript-snake-game.step @@ -0,0 +1,45 @@ +markdown <<-MARKDOWN + + ### Goal + + Today, we're going to recreate the classic game ~SNAKE!~ in the Javascript programming language. + By the end of this session, you should understand the basics of the JavaScript language and how you can use it in a web browser. + + The game you are going to create is going to work quite a bit like this: + +MARKDOWN + +canvas id: 'chunk-game', height: 600, width: 800 + +script src: 'js/chunk.js' + +script src: 'js/snake.js' + +markdown <<-MARKDOWN + + ### Meta-Goal + + When you have completed today's goal of creating a browser based game you should understand: + + * The basic syntax of JavaScript + * How to create, view and debug JavaScript + * How to use JavaScript with external libraries. + * How to incrementally build out a JavaScript application. + + ### Schedule + + * 2-ish hours of basic JavaScript syntax. + * 3-ish hours of creating and playing with a Javascript game and animations. + + This is just a rough guideline, not a mandate. Some steps you'll go + over and some you'll go under. It'll all work out by the end of the + day. Probably. + + Before you can start the tutorial, you'll need to download the tutorial + to your computer to edit the source code. + + Once you've downloaded the zip archive file, you will need to extract the contents and open index.html with your browser. If you have trouble extracting the files or opening them, get an instructor to help you out. + +MARKDOWN + +next_step 'lesson-1' \ No newline at end of file diff --git a/sites/en/javascript-snake-game/js-snake-game-tutorial.zip-manifest b/sites/javascript-snake-game/js-snake-game-tutorial.zip-manifest similarity index 100% rename from sites/en/javascript-snake-game/js-snake-game-tutorial.zip-manifest rename to sites/javascript-snake-game/js-snake-game-tutorial.zip-manifest diff --git a/sites/en/javascript-snake-game/js/chunk.js b/sites/javascript-snake-game/js/chunk.js similarity index 100% rename from sites/en/javascript-snake-game/js/chunk.js rename to sites/javascript-snake-game/js/chunk.js diff --git a/sites/en/javascript-snake-game/js/lesson-10.js b/sites/javascript-snake-game/js/lesson-10.js similarity index 96% rename from sites/en/javascript-snake-game/js/lesson-10.js rename to sites/javascript-snake-game/js/lesson-10.js index 654c19803..1d7ef10da 100644 --- a/sites/en/javascript-snake-game/js/lesson-10.js +++ b/sites/javascript-snake-game/js/lesson-10.js @@ -39,7 +39,7 @@ var advanceGame = function() { snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } drawSnake(snake); } diff --git a/sites/en/javascript-snake-game/js/lesson-11.js b/sites/javascript-snake-game/js/lesson-11.js similarity index 96% rename from sites/en/javascript-snake-game/js/lesson-11.js rename to sites/javascript-snake-game/js/lesson-11.js index 3a6f5efcc..d75d3da83 100644 --- a/sites/en/javascript-snake-game/js/lesson-11.js +++ b/sites/javascript-snake-game/js/lesson-11.js @@ -36,7 +36,7 @@ var advanceGame = function() { snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } draw(snake, apple); } diff --git a/sites/en/javascript-snake-game/js/lesson-12.js b/sites/javascript-snake-game/js/lesson-12.js similarity index 94% rename from sites/en/javascript-snake-game/js/lesson-12.js rename to sites/javascript-snake-game/js/lesson-12.js index 49e95dd61..cdeea5a85 100644 --- a/sites/en/javascript-snake-game/js/lesson-12.js +++ b/sites/javascript-snake-game/js/lesson-12.js @@ -34,7 +34,7 @@ var moveSnake = function(snake) { var growSnake = function(snake) { var indexOfLastSegment = snake.length - 1; - var lastSegment = snake[snake.length - 1]; + var lastSegment = snake[indexOfLastSegment]; snake.push({ top: lastSegment.top, left: lastSegment.left }); return snake; } @@ -47,7 +47,7 @@ var advanceGame = function() { } if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } draw(snake, apple); } diff --git a/sites/en/javascript-snake-game/js/lesson-13.js b/sites/javascript-snake-game/js/lesson-13.js similarity index 93% rename from sites/en/javascript-snake-game/js/lesson-13.js rename to sites/javascript-snake-game/js/lesson-13.js index 996a52591..8b3134a5f 100644 --- a/sites/en/javascript-snake-game/js/lesson-13.js +++ b/sites/javascript-snake-game/js/lesson-13.js @@ -34,7 +34,7 @@ var moveSnake = function(snake) { var growSnake = function(snake) { var tipOfTailIndex = snake.length - 1; - var tipOfTail = snake[snake.length - 1]; + var tipOfTail = snake[tipOfTailIndex]; snake.push({ top: tipOfTail.top, left: tipOfTail.left }); return snake; } @@ -49,7 +49,7 @@ var advanceGame = function() { if (ate(newSnake, snake)) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! You ate yourself!"); + CHUNK.flashMessage("Whoops! You ate yourself!"); } if (ate(newSnake, [apple])) { @@ -59,7 +59,7 @@ var advanceGame = function() { if (ate(newSnake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } snake = newSnake; diff --git a/sites/en/javascript-snake-game/js/lesson-2.js b/sites/javascript-snake-game/js/lesson-2.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-2.js rename to sites/javascript-snake-game/js/lesson-2.js diff --git a/sites/en/javascript-snake-game/js/lesson-3.js b/sites/javascript-snake-game/js/lesson-3.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-3.js rename to sites/javascript-snake-game/js/lesson-3.js diff --git a/sites/en/javascript-snake-game/js/lesson-4.js b/sites/javascript-snake-game/js/lesson-4.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-4.js rename to sites/javascript-snake-game/js/lesson-4.js diff --git a/sites/en/javascript-snake-game/js/lesson-5.js b/sites/javascript-snake-game/js/lesson-5.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-5.js rename to sites/javascript-snake-game/js/lesson-5.js diff --git a/sites/en/javascript-snake-game/js/lesson-6.js b/sites/javascript-snake-game/js/lesson-6.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-6.js rename to sites/javascript-snake-game/js/lesson-6.js diff --git a/sites/en/javascript-snake-game/js/lesson-7.js b/sites/javascript-snake-game/js/lesson-7.js similarity index 100% rename from sites/en/javascript-snake-game/js/lesson-7.js rename to sites/javascript-snake-game/js/lesson-7.js diff --git a/sites/en/javascript-snake-game/js/lesson-8.js b/sites/javascript-snake-game/js/lesson-8.js similarity index 95% rename from sites/en/javascript-snake-game/js/lesson-8.js rename to sites/javascript-snake-game/js/lesson-8.js index 581bac95b..41466e510 100644 --- a/sites/en/javascript-snake-game/js/lesson-8.js +++ b/sites/javascript-snake-game/js/lesson-8.js @@ -31,7 +31,7 @@ var advanceGame = function() { snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } drawSnake(snake); } diff --git a/sites/en/javascript-snake-game/js/lesson-9.js b/sites/javascript-snake-game/js/lesson-9.js similarity index 96% rename from sites/en/javascript-snake-game/js/lesson-9.js rename to sites/javascript-snake-game/js/lesson-9.js index af7cf047a..d80607e46 100644 --- a/sites/en/javascript-snake-game/js/lesson-9.js +++ b/sites/javascript-snake-game/js/lesson-9.js @@ -34,7 +34,7 @@ var advanceGame = function() { snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } drawSnake(snake); } diff --git a/sites/en/javascript-snake-game/js/snake.js b/sites/javascript-snake-game/js/snake.js similarity index 93% rename from sites/en/javascript-snake-game/js/snake.js rename to sites/javascript-snake-game/js/snake.js index b20d27ee6..1af3ef07d 100644 --- a/sites/en/javascript-snake-game/js/snake.js +++ b/sites/javascript-snake-game/js/snake.js @@ -34,7 +34,7 @@ var moveSnake = function(snake) { var growSnake = function(snake) { var tipOfTailIndex = snake.length - 1; - var tipOfTail = snake[snake.length - 1]; + var tipOfTail = snake[tipOfTailIndex]; snake.push({ top: tipOfTail.top, left: tipOfTail.left }); return snake; } @@ -51,7 +51,7 @@ var advanceGame = function() { if (ate(newSnake, snake)) { CHUNK.endGame(); - return CHUNK.flashMessage("Woops! You ate yourself!"); + return CHUNK.flashMessage("Whoops! You ate yourself!"); } // Now we just have to check if the newSnake ate it's previous self to see if // there was a collision! @@ -63,7 +63,7 @@ var advanceGame = function() { if (ate(newSnake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - return CHUNK.flashMessage("Woops! you hit a wall!"); + return CHUNK.flashMessage("Whoops! you hit a wall!"); } snake = newSnake; diff --git a/sites/javascript-snake-game/lesson-1.step b/sites/javascript-snake-game/lesson-1.step new file mode 100644 index 000000000..18b53bc7b --- /dev/null +++ b/sites/javascript-snake-game/lesson-1.step @@ -0,0 +1,165 @@ +goals do + goal "Setup your programming environment" + goal "Be able to use the basic building blocks of JavaScript code" + goal "Do simple calculations" + goal "Use and understand variables" + goal "Use and understand arrays" + goal "Use loops and conditional statements" +end + +overview do + message <<-MARKDOWN + JavaScript is a fully featured programming language with variables, loops, + and conditionals. Just like Ruby, Java, Python, and PHP, you can use JavaScript + to do math, model large systems, and perform complex calculations – all in your browser! + In this lesson, we'll learn about the fundamentals of the JavaScript programming language. + MARKDOWN +end + +steps do + step "Launch your programming environment" do + message <<-MARKDOWN + + When programming, you'll generally want these tools on hand: + + * Your browser to see the code running (I recommend Chrome) + * A text editor to change the code (Railsbridge recommends Atom, but you can try a different editor) + * A javascript console so you can experiment and print out debugging + messages. This is built into your browser. + + Some helpful links for browser consoles: + + * How to launch dev tools in chrome. + * How to launch dev tools in internet explorer. + * How to launch dev tools in firefox. + * How to launch dev tools in safari. + + Once you have these tools available, we need to open the files we'll be working with: + + * Open game/snake.js in your text editor + * Open game/index.html in your browser + + + Now open up your browser's developer tools, and click over to the console tab. Type the following code: + MARKDOWN + + source_code :javascript, <<-JAVASCRIPT + console.log('programming!'); + JAVASCRIPT + + message <<-MARKDOWN + Press enter. Your browser should now look like this: + image of browser console with console.log + + Congrats, you just wrote your first lines of JavaScript code! __console.log__ is an important function – + it allows you to print information to the browser's console. It's very helpful in debugging! You can also + use the __alert__ function to make a message pop up in the browser. Try it out! + MARKDOWN + end + + step do + message "Next try some simple math that's built into JavaScript. Type these lines into console:" + + source_code :javascript, <<-JAVASCRIPT + 3 + 3 + 7 * 6 + JAVASCRIPT + end + + step do + message "**Variables** are names with values assigned to them." + + source_code :javascript, <<-JAVASCRIPT + var myVariable = 5 + JAVASCRIPT + + message "This assigns the value `5` to the name `myVariable`." + end + + step do + message "You can also do math with variables:" + source_code :javascript, <<-JAVASCRIPT + myVariable + 2 + myVariable * 3 + JAVASCRIPT + end + + step do + message "Variables can also hold more than just numbers and text. Another type of data in Javascript is called an **array**." + + source_code :javascript, 'var fruits = ["kiwi", "strawberry", "plum"]' + message <<-MARKDOWN + Here we're using the variable `fruits` to hold a collection of fruit names. + An array, designated by the `[ ]` (square-brackets), is a list of data that can be referenced by its index. + The index is the position inside the array, each separated by a comma. Arrays use 0-based indices, so the first element in an array is at Index 0, the second is at index 1, and so on. + For example, in the array above, to get the string 'strawberry' in Javascript, you would type 'fruits[1]', which Javascript understands as: get the value at index 1 in the array fruits. + MARKDOWN + end + + step do + message "Arrays are a type of __object__ in JavaScript that are designated by the use of square brackets. Objects of all types in javascript often include helpful attributes!" + + source_code :javascript, <<-JAVASCRIPT + fruits.length + JAVASCRIPT + + message <<-MARKDOWN +Objects can also have __functions__, which can be helpful for altering objects and learning more about them. +Functions are __invoked__ with parentheses, which causes them to run. + MARKDOWN + + source_code :javascript, <<-JAVASCRIPT + fruits.push("orange") + fruits.slice(1) + JAVASCRIPT + + message <<-MARKDOWN +The __push__ function allows us to add new items to an array. the slice function returns a new array with +with everything to the right of the __index__ we provided. Here, we passed the function the number 1, so +slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1.) + MARKDOWN + end + + step do + message "You can also make your own functions:" + + source_code :javascript, <<-JAVASCRIPT + var pluralize = function(word) { + return word + "s" + } + pluralize("kiwi") + JAVASCRIPT + + message "Functions take **parameters**, which are the variables they work on. In this case, we made a function called pluralize that takes one parameter, a word." + + message "Functions can also return data. In this case, pluralize returns the word with an 's' added to the end of it. In order for a function to return something, you have to use the __return__ keyword." + end + + + step do + message "Arrays have a function called **forEach** which iterates through the list running code on each item. It takes another function as a parameter." + source_code :javascript, <<-JAVASCRIPT + fruits.forEach(function(fruit) { + console.log(fruit) + }) + JAVASCRIPT + message "This takes the first item from the `fruits` array (`\"strawberry\"`), assigns it to the variable `fruit`, and runs the code between curly brackets. Then it does the same thing for each other item in the list. The code above should print a list of the fruits." + end + + step do + message "A **conditional** runs code only when a statement evaluates to true." + + source_code :javascript, <<-JAVASCRIPT + if(myVariable > 1) { + console.log('YAY') + } + JAVASCRIPT + + message "This prints `YAY!` if the value stored in `myVariable` is greater than 1." + + message "Try changing the `>` in the conditional to a `<`." + end + +end + +next_step "lesson-2" diff --git a/sites/en/javascript-snake-game/lesson-10.step b/sites/javascript-snake-game/lesson-10.step similarity index 92% rename from sites/en/javascript-snake-game/lesson-10.step rename to sites/javascript-snake-game/lesson-10.step index 8c018fd4d..966eaf991 100644 --- a/sites/en/javascript-snake-game/lesson-10.step +++ b/sites/javascript-snake-game/lesson-10.step @@ -2,10 +2,10 @@ markdown <<-MARKDOWN To make the tail follow the head, we're going to assign the direction of the - segment furher forward in snake to the current segment when it moves. This way + segment further forward in snake to the current segment when it moves. This way all segments follow the same path! - Let's define a new function called `segmentFurtherDown` which takes a + Let's define a new function called `segmentFurtherForwardThan` which takes a segment index and a snake and returns the segment closer to the head. Let's start with: diff --git a/sites/en/javascript-snake-game/lesson-11.step b/sites/javascript-snake-game/lesson-11.step similarity index 95% rename from sites/en/javascript-snake-game/lesson-11.step rename to sites/javascript-snake-game/lesson-11.step index 21d719224..07a4515a8 100644 --- a/sites/en/javascript-snake-game/lesson-11.step +++ b/sites/javascript-snake-game/lesson-11.step @@ -22,7 +22,7 @@ markdown <<-MARKDOWN snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } draw(snake, apple); } diff --git a/sites/en/javascript-snake-game/lesson-12.step b/sites/javascript-snake-game/lesson-12.step similarity index 93% rename from sites/en/javascript-snake-game/lesson-12.step rename to sites/javascript-snake-game/lesson-12.step index dbce3d010..f78637899 100644 --- a/sites/en/javascript-snake-game/lesson-12.step +++ b/sites/javascript-snake-game/lesson-12.step @@ -11,7 +11,7 @@ markdown <<-MARKDOWN ```js var growSnake = function(snake) { var indexOfLastSegment = snake.length - 1; - var lastSegment = snake[snake.length - 1]; + var lastSegment = snake[indexOfLastSegment]; snake.push({ top: lastSegment.top, left: lastSegment.left }); return snake; } @@ -30,7 +30,7 @@ markdown <<-MARKDOWN } if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } draw(snake, apple); } diff --git a/sites/en/javascript-snake-game/lesson-13.step b/sites/javascript-snake-game/lesson-13.step similarity index 85% rename from sites/en/javascript-snake-game/lesson-13.step rename to sites/javascript-snake-game/lesson-13.step index 1b1a53c9c..4c7670176 100644 --- a/sites/en/javascript-snake-game/lesson-13.step +++ b/sites/javascript-snake-game/lesson-13.step @@ -20,7 +20,7 @@ markdown <<-MARKDOWN if (ate(newSnake, snake)) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! You ate yourself!"); + CHUNK.flashMessage("Whoops! You ate yourself!"); } if (ate(newSnake, [apple])) { @@ -30,7 +30,7 @@ markdown <<-MARKDOWN if (ate(newSnake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } snake = newSnake; @@ -38,7 +38,9 @@ markdown <<-MARKDOWN } ``` - Notice, we've abstracted out the `ate` function by resuing it. It can now determine if the snake ate itself, an apple or the wall. + Notice, we've abstracted out the `ate` function by reusing it. It can now determine if the snake ate itself, an apple or the wall. + + If your snake no longer moves after this step, make sure that you assigned `snake = newSnake` in the `advanceGame` function. MARKDOWN js_expected_results 'lesson-13' diff --git a/sites/javascript-snake-game/lesson-14.step b/sites/javascript-snake-game/lesson-14.step new file mode 100644 index 000000000..c45903cde --- /dev/null +++ b/sites/javascript-snake-game/lesson-14.step @@ -0,0 +1,10 @@ +insert '../javascript-to-do-list/_deploying_your_site' + +message <<-MARKDOWN +# Credits + +This curriculum was originally written by +[Zassmin Montes de Oca](http://zassmin.com/) and +[Zee Spencer](http://www.zeespencer.com/), +and has been improved by all sorts of [lovely RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/javascript-snake-game). +MARKDOWN diff --git a/sites/javascript-snake-game/lesson-2.step b/sites/javascript-snake-game/lesson-2.step new file mode 100644 index 000000000..ef1924d9f --- /dev/null +++ b/sites/javascript-snake-game/lesson-2.step @@ -0,0 +1,119 @@ +goals do + goal "Create your first snake" + goal "How to use a third party library as an 'engine' to power your game" +end + +steps do + + step "Now back to our snakes" do + + message "To get started, we want to create a variable that represents the snake. Add the following line to the beginning of game/snake.js:" + + source_code :javascript, <<-JAVASCRIPT + var snake = [{ top: 0, left: 0}]; + JAVASCRIPT + + markdown <<-MARKDOWN +

            Now that we have this amazing snake we want to show it off, right? The + CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK + to 'draw' our snake!

            + MARKDOWN + + source_code :javascript, <<-JAVASCRIPT + var drawableSnake = { color: "green", pixels: snake }; + var drawableObjects = [drawableSnake]; + CHUNK.draw(drawableObjects); + JAVASCRIPT + + markdown <<-MARKDOWN + CHUNK's 'draw' function expects to be given a collection of objects. This + means we must create an array and place the drawableSnake inside of it. Then we + can pass that array into 'CHUNK.draw' + + To see what your code does you'll need to save your 'snake.js' file and + refresh the browser window that has your index.html in it. We recommend doing + this early and often! + + Congratulations! You've drawn a (very short!) snake on the screen. + MARKDOWN + end + +js_expected_results 'lesson-2' + + step "What is CHUNK?" do + markdown <<-MARKDOWN + When programming, you'll frequently need to solve problems that have been + solved before. In many cases someone who solved the problem already has + packaged their code into a 'library'. + + Good libraries tend to: + + * Help you think about the problem you're solving more clearly + * Be well documented + * Solve a small set of closely related problems + + We'll be using the CHUNK library throughout this tutorial. CHUNK is an + example of a library whose job is to: + + * Draw chunky-pixels on the screen! + * Respond to user input + * Start and end a game + * Check for things running into each other + * Be reasonably approachable for novice developers + MARKDOWN + end + + step "Understanding the Code" do + message "The code you wrote used the CHUNK library to draw a 1px snake on the screen. Let's try to understand the code as a whole a bit better." + + source_code :javascript, <<-JAVASCRIPT + var snake = [{ top: 0, left: 0}]; + var drawableSnake = { color: "green", pixels: snake }; + var drawableObjects = [drawableSnake]; + CHUNK.draw(drawableObjects); + JAVASCRIPT + + markdown <<-MARKDOWN + The first line declares the variable 'snake' and assigns an array to it. Within that array is one item which is defined by a set of curly-braces. These curly-braces represent another Javascript data type called an Object which is also referred to as a 'hash map'. + + Data stored in an hash map object involves two parts, a key and a value. In our code, we have two pieces of data in the object, a 'top' value and a 'left' value. The key is used to get the data from the object. So in our example, if we need to know what the current 'left' value of snake is, we type 'snake.left' which will return a value of '0'. + + On the second line, we declare the variable 'drawableSnake' and assign an object to its value. The object has two pieces, the first has the key 'color' and the value '"green"', and the second has the key 'pixels' which has the value 'snake'. 'snake' is the variable we defined on the previous line, which means 'drawableSnake.pixels' will return us the object we created on the first line. + + The third line declares a variable 'drawableObjects', which we assign the value of an array whose only data is the 'drawableSnake' declared on the previous line. We do this because our CHUNK engine is looking for a list (an array) or objects to draw. + + Finally, we call the CHUNK library's built-in function 'draw' and pass it the argument 'drawableObjects' which was declared on the previous line. We'll explore functions and arguments in future lessons. + MARKDOWN + end + + step "Comments" do + markdown <<-MARKDOWN + Sometimes it's nice to leave a clarifying note to future readers of the code (this could very well be you!) in plain English. This is called a comment, and it is only intended for humans to read, the computer knows to ignore them. + Here's what comments look like in JavaScript: + + ```js + // this is a one line comment, here we're creating an array + var drawableObjects = [drawableSnake]; + /* + this is a multi line comment + here we're drawing the snake + */ + CHUNK.draw(drawableObjects); + ``` + MARKDOWN + end + + step "Play Time!" do + markdown <<-MARKDOWN + * Add comments above each line explaining what it does in plain old english. + * Change the color of the snake. + * Make the snake longer than just 1 segment! + * Draw something in addition to the snake. Perhaps an apple or a wall? Make + sure it's a different color! + MARKDOWN + end + +end + +next_step "lesson-3" + diff --git a/sites/en/javascript-snake-game/lesson-3.step b/sites/javascript-snake-game/lesson-3.step similarity index 62% rename from sites/en/javascript-snake-game/lesson-3.step rename to sites/javascript-snake-game/lesson-3.step index 32fe25444..dee42854c 100644 --- a/sites/en/javascript-snake-game/lesson-3.step +++ b/sites/javascript-snake-game/lesson-3.step @@ -56,6 +56,27 @@ markdown <<-MARKDOWN know what variables a function or piece of code has access too. Understanding scope is hugely important when reading and writing code. + ### A bit more about Functions + + Functions are where we'll be storing most of the logic as we develop our snake game. Let's take apart the function created above just to fully understand what is happening. + + ```js + var drawSnake = function(snakeToDraw) { + var drawableSnake = { color: "green", pixels: snakeToDraw }; + var drawableObjects = [drawableSnake]; + CHUNK.draw(drawableObjects); + } + var snake = [{ top: 0, left: 0}]; + drawSnake(snake); + ``` + + A function declaration is always going to be the word `function`, then parens `( )` then curly braces `{ }`. The parens are where you declare the arguments the function expects, and the curly braces are where you write out all of the logic that the function will perform. The simplest way to call a function is to write its name followed by parentheses: `drawSnake()`. But we have a function that expects an argument, `snakeToDraw`, so when we call the function in the code we do it by `drawSnake(snake)`. + + You may have noticed that the function `drawSnake` expects an argument of `snakeToDraw`, but when we call the function we're passing in the variable `snake`. The names are different - but the code works fine. What is actually happening is we're passing around the data that the variable `snake` represents (in this case, `[{ top: 0, left: 0}]`), which the function receives and names according to the argument inside its parens, `snakeToDraw`. Inside the function, the data is now available as the variable `snakeToDraw`, which we assign to the `pixels` key inside the `drawableSnake` variable. + + The function then takes `drawableSnake`, puts it inside an array named `drawableObjects`, and calls a function in the CHUNK library called `draw`, that expects the array we just created. + + ### Syntax Breakdown `function() { }` says "Hey, between the curly braces is some diff --git a/sites/en/javascript-snake-game/lesson-4.step b/sites/javascript-snake-game/lesson-4.step similarity index 100% rename from sites/en/javascript-snake-game/lesson-4.step rename to sites/javascript-snake-game/lesson-4.step diff --git a/sites/en/javascript-snake-game/lesson-5.step b/sites/javascript-snake-game/lesson-5.step similarity index 92% rename from sites/en/javascript-snake-game/lesson-5.step rename to sites/javascript-snake-game/lesson-5.step index 9034182b4..3c54eb2a6 100644 --- a/sites/en/javascript-snake-game/lesson-5.step +++ b/sites/javascript-snake-game/lesson-5.step @@ -14,7 +14,7 @@ markdown <<-MARKDOWN } ``` - To get this function running we'll use our CHUNK game engine to CALL the `executeNTimesPerSecond` function. It does exactly that, to do this `executeNTimesPerSecond` takes in two arguments. The first arugement advances the game, and the second tells it how many times to move per-second. + To get this function running we'll use our CHUNK game engine to CALL the `executeNTimesPerSecond` function. It does exactly that, to do this `executeNTimesPerSecond` takes in two arguments. The first argument advances the game, and the second tells it how many times to move per-second. ```js CHUNK.executeNTimesPerSecond(advanceGame, 1); diff --git a/sites/en/javascript-snake-game/lesson-6.step b/sites/javascript-snake-game/lesson-6.step similarity index 80% rename from sites/en/javascript-snake-game/lesson-6.step rename to sites/javascript-snake-game/lesson-6.step index c3572f59a..41e5c5163 100644 --- a/sites/en/javascript-snake-game/lesson-6.step +++ b/sites/javascript-snake-game/lesson-6.step @@ -58,6 +58,25 @@ MARKDOWN js_expected_results 'lesson-6' markdown <<-MARKDOWN + ### Switch statement + + A `switch` statement is another way to organize a seried of `if` and `else if`s. Here's an example: + + ```js + switch(color) { + case "red": + return { action: "stop" }; + case "orange": + return { action: "wait" }; + case "green": + return { action: "go" }; + default: + return { action: "unknown" }; + } + ``` + + Can you figure out how to replace our snake game code above with a `switch` statement? (Don't worry, you'll see how we do it in the next lesson) + ### Play Time! * Use a switch statement instead of a series of ifs @@ -69,7 +88,7 @@ markdown <<-MARKDOWN ### Helpful Links - 1. switch statements + 1. switch statements 1. === vs == MARKDOWN diff --git a/sites/en/javascript-snake-game/lesson-7.step b/sites/javascript-snake-game/lesson-7.step similarity index 100% rename from sites/en/javascript-snake-game/lesson-7.step rename to sites/javascript-snake-game/lesson-7.step diff --git a/sites/en/javascript-snake-game/lesson-8.step b/sites/javascript-snake-game/lesson-8.step similarity index 95% rename from sites/en/javascript-snake-game/lesson-8.step rename to sites/javascript-snake-game/lesson-8.step index eb231660f..bee225526 100644 --- a/sites/en/javascript-snake-game/lesson-8.step +++ b/sites/javascript-snake-game/lesson-8.step @@ -12,7 +12,7 @@ markdown <<-MARKDOWN snake = moveSnake(snake); if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) { CHUNK.endGame(); - CHUNK.flashMessage("Woops! you hit a wall!"); + CHUNK.flashMessage("Whoops! you hit a wall!"); } drawSnake(snake); } diff --git a/sites/en/javascript-snake-game/lesson-9.step b/sites/javascript-snake-game/lesson-9.step similarity index 100% rename from sites/en/javascript-snake-game/lesson-9.step rename to sites/javascript-snake-game/lesson-9.step diff --git a/sites/en/javascript-snake-game/zip_content/index.html b/sites/javascript-snake-game/zip_content/index.html similarity index 100% rename from sites/en/javascript-snake-game/zip_content/index.html rename to sites/javascript-snake-game/zip_content/index.html diff --git a/sites/en/javascript-snake-game/zip_content/snake.js b/sites/javascript-snake-game/zip_content/snake.js similarity index 100% rename from sites/en/javascript-snake-game/zip_content/snake.js rename to sites/javascript-snake-game/zip_content/snake.js diff --git a/sites/javascript-to-do-list-with-react/AdvancedTodoList.zip-manifest b/sites/javascript-to-do-list-with-react/AdvancedTodoList.zip-manifest new file mode 100644 index 000000000..dee53707a --- /dev/null +++ b/sites/javascript-to-do-list-with-react/AdvancedTodoList.zip-manifest @@ -0,0 +1,6 @@ +zip_content/app.js +zip_content/debut_light.png +zip_content/index.html +zip_content/store.js +zip_content/styles.css +zip_content/console-polyfill.js diff --git a/sites/en/javascript-to-do-list-with-react/adding_an_item.step b/sites/javascript-to-do-list-with-react/adding_an_item.step similarity index 98% rename from sites/en/javascript-to-do-list-with-react/adding_an_item.step rename to sites/javascript-to-do-list-with-react/adding_an_item.step index 405e8b995..bcaa0d08c 100644 --- a/sites/en/javascript-to-do-list-with-react/adding_an_item.step +++ b/sites/javascript-to-do-list-with-react/adding_an_item.step @@ -12,7 +12,7 @@ a new item for our list, and ask the server to save it to the database. To do so, we're going to use JavaScript's ability to perform a task when a user has taken an action on the page. JavaScript refers to these actions as __events__. React makes it easy to listen to these events, and cause the page -to change when nevessary. +to change when necessary. Our code will take the following steps. @@ -171,7 +171,7 @@ the server responds. This abstract process is repeated over and over again: 1. Listen for a user action on the page. 2. Parse out the information the user is submitting. -3. Prevent the default action from occuring, if necessary. +3. Prevent the default action from occurring, if necessary. 4. Make a request to the server using AJAX. 5. When the request succeeds, parse the data the server sends back. 6. Update the page with the newly received data. diff --git a/sites/en/javascript-to-do-list-with-react/building_complex_applications_with_react.step b/sites/javascript-to-do-list-with-react/building_complex_applications_with_react.step similarity index 100% rename from sites/en/javascript-to-do-list-with-react/building_complex_applications_with_react.step rename to sites/javascript-to-do-list-with-react/building_complex_applications_with_react.step diff --git a/sites/en/javascript-to-do-list-with-react/creating_a_list.step b/sites/javascript-to-do-list-with-react/creating_a_list.step similarity index 99% rename from sites/en/javascript-to-do-list-with-react/creating_a_list.step rename to sites/javascript-to-do-list-with-react/creating_a_list.step index e52bda3ac..f4816dd55 100644 --- a/sites/en/javascript-to-do-list-with-react/creating_a_list.step +++ b/sites/javascript-to-do-list-with-react/creating_a_list.step @@ -93,7 +93,7 @@ your list's name, and 'DESCRIPTION-OF-YOUR-ITEM' with your item's description. JAVASCRIPT message <<-MARKDOWN -Check the network tab again. Was your request successful? If it was, take a look at what +Check the network tab again. Was your request successful? If it was, take a look at the server's response. You'll notice that the item has an id attribute now. This is how the server will uniquely identify your item in the future. MARKDOWN diff --git a/sites/en/javascript-to-do-list-with-react/deploying_your_site.step b/sites/javascript-to-do-list-with-react/deploying_your_site.step similarity index 100% rename from sites/en/javascript-to-do-list-with-react/deploying_your_site.step rename to sites/javascript-to-do-list-with-react/deploying_your_site.step diff --git a/sites/en/javascript-to-do-list-with-react/developer_tools.step b/sites/javascript-to-do-list-with-react/developer_tools.step similarity index 100% rename from sites/en/javascript-to-do-list-with-react/developer_tools.step rename to sites/javascript-to-do-list-with-react/developer_tools.step diff --git a/sites/en/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step b/sites/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step similarity index 64% rename from sites/en/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step rename to sites/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step index 8c2c3fe6b..84e4a6b9f 100644 --- a/sites/en/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step +++ b/sites/javascript-to-do-list-with-react/javascript-to-do-list-with-react.step @@ -21,7 +21,7 @@ application online you should understand: * How to use JavaScript to interact with a server. * How to organize your JavaScript code into models and views. * How to use the React library to render HTML elements. -* How to incremently add features to your application. +* How to incrementally add features to your application. * How to get your application online. ### Schedule @@ -40,39 +40,19 @@ When programming, you'll generally want these tools on hand: * An internet connection. We're going to be communicating with other websites using JavaScript. * Your browser to see the code running (I recommend Chrome, but any will do!) - * A text editor to change the code (I recommend Sublime) + * A text editor to change the code (Railsbridge recommends Atom, but you can try a different editor) * A javascript console so you can experiment and print out debugging messages. This is built into your browser. -Before you can start the tutorial, you'll need to download the tutorial +Before you can start the tutorial, you'll need to download the tutorial to your computer to edit the source code. Once you've downloaded it, open index.html with your browser. You should see a mock up of your list. If you do not, get an instructor to help you out. - -### Format - -Each lesson will look like this: - -
            -

            Step Title

            -
            -

            Goal:

            -

            Description of the current step. -

            Red because big goals are scary. -

            -
            -

            Steps:

            - 
            steps to take.
            -

            Yellow because we've gotten it done, but we have no clue what's going on. -

            -
            -

            Explanation

            -

            Details of what the steps actually did... spell out the cause and effect. -

            Green because we can tie everything together now. -

            -
            MARKDOWN +insert '../javascript-to-do-list/_lesson_format' + +insert '../javascript-to-do-list/_teachers_note' + next_step "developer_tools" diff --git a/sites/en/javascript-to-do-list-with-react/loading_items.step b/sites/javascript-to-do-list-with-react/loading_items.step similarity index 100% rename from sites/en/javascript-to-do-list-with-react/loading_items.step rename to sites/javascript-to-do-list-with-react/loading_items.step diff --git a/sites/en/javascript-to-do-list-with-react/marking_an_item_as_complete.step b/sites/javascript-to-do-list-with-react/marking_an_item_as_complete.step similarity index 98% rename from sites/en/javascript-to-do-list-with-react/marking_an_item_as_complete.step rename to sites/javascript-to-do-list-with-react/marking_an_item_as_complete.step index 75e724300..91c9b29e6 100644 --- a/sites/en/javascript-to-do-list-with-react/marking_an_item_as_complete.step +++ b/sites/javascript-to-do-list-with-react/marking_an_item_as_complete.step @@ -22,7 +22,7 @@ end steps do step do message "Let's add a click listener to our Item component's complete button. Find the line of code - that creating ths completion button, and add an onClick attribute to make React listen for your users' + that is creating the completion button, and add an onClick attribute to make React listen for your users' clicks. Your code should look like this:" source_code :javascript, <<-JAVASCRIPT diff --git a/sites/en/javascript-to-do-list-with-react/next_steps.step b/sites/javascript-to-do-list-with-react/next_steps.step similarity index 77% rename from sites/en/javascript-to-do-list-with-react/next_steps.step rename to sites/javascript-to-do-list-with-react/next_steps.step index 2e327e880..5800a740b 100644 --- a/sites/en/javascript-to-do-list-with-react/next_steps.step +++ b/sites/javascript-to-do-list-with-react/next_steps.step @@ -20,3 +20,11 @@ ul do a "http://railsbridge.org/learn/resources", href: "http://railsbridge.org/learn/resources" end end + +message <<-MARKDOWN +# Credits + +This curriculum was originally written by +[Srinivas Rao](https://twitter.com/raorao_) +and has been improved by all sorts of [lovely RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/javascript-to-do-list-with-react). +MARKDOWN diff --git a/sites/javascript-to-do-list-with-react/zip_content/app.js b/sites/javascript-to-do-list-with-react/zip_content/app.js new file mode 100644 index 000000000..e69de29bb diff --git a/sites/javascript-to-do-list-with-react/zip_content/console-polyfill.js b/sites/javascript-to-do-list-with-react/zip_content/console-polyfill.js new file mode 100644 index 000000000..7eacd7809 --- /dev/null +++ b/sites/javascript-to-do-list-with-react/zip_content/console-polyfill.js @@ -0,0 +1,15 @@ +// Console-polyfill. MIT license. +// https://github.com/paulmillr/console-polyfill +// Make it safe to do console.log() always. +(function(con) { + 'use strict'; + var prop, method; + var empty = {}; + var dummy = function() {}; + var properties = 'memory'.split(','); + var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' + + 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' + + 'table,time,timeEnd,timeStamp,trace,warn').split(','); + while (prop = properties.pop()) con[prop] = con[prop] || empty; + while (method = methods.pop()) con[method] = con[method] || dummy; +})(this.console = this.console || {}); // Using `this` for web workers. diff --git a/sites/javascript-to-do-list-with-react/zip_content/debut_light.png b/sites/javascript-to-do-list-with-react/zip_content/debut_light.png new file mode 100644 index 000000000..2f4febcb6 Binary files /dev/null and b/sites/javascript-to-do-list-with-react/zip_content/debut_light.png differ diff --git a/sites/javascript-to-do-list-with-react/zip_content/index.html b/sites/javascript-to-do-list-with-react/zip_content/index.html new file mode 100644 index 000000000..ac0af82bc --- /dev/null +++ b/sites/javascript-to-do-list-with-react/zip_content/index.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + +
            +

            Your List App

            +
            +
            +
            +
            +
            + + + \ No newline at end of file diff --git a/sites/javascript-to-do-list-with-react/zip_content/store.js b/sites/javascript-to-do-list-with-react/zip_content/store.js new file mode 100644 index 000000000..ac2b9103d --- /dev/null +++ b/sites/javascript-to-do-list-with-react/zip_content/store.js @@ -0,0 +1,22 @@ +var items = [] + +var notifyComponents = function() { + $(ListStore).trigger('storeHasChanged') +} + +var findItemById = function(id) { + return items.filter(function(item) { + return item.id === id + })[0] +}, + +ListStore = { + + getItems: function() { + return items + }, + + loadItems: function() {}, + addItem: function(itemDescription) {}, + toggleCompleteness: function(itemId) {} +} \ No newline at end of file diff --git a/sites/javascript-to-do-list-with-react/zip_content/styles.css b/sites/javascript-to-do-list-with-react/zip_content/styles.css new file mode 100644 index 000000000..23c97a756 --- /dev/null +++ b/sites/javascript-to-do-list-with-react/zip_content/styles.css @@ -0,0 +1,108 @@ +body { + background: url('https://github.com/debut_light.png') +} + +#container { + width: 600px; + font-family: 'Titillium Web', 'Arial', sans-serif; + font-size: 40px; + text-align: center; + margin: 40px auto; +} + +h1 { + margin: 20px; + color: #7d82b0; +} + +#app { + box-shadow: 0 0 5px #684F91; + font-size: 35px; + color: #080D3B; + background-color: white; +} + +form { + margin: 0; + padding: 0; +} + +#create { + width: 100%; + font-family: inherit; + font-size: inherit; + padding: 10px 30px; + border-left: 1px solid #7d82b0; + border-right: 1px solid #7d82b0; + border-bottom: 2px solid #7d82b0; + border-top: 15px solid #477187; + text-align: center; +} + + +#create::-webkit-input-placeholder { + color: #C3C3C4; + text-align: center; +} + +#create::-moz-placeholder { /* Firefox 19+ */ + color: #C3C3C4; + text-align: center; +} + +#create:focus::-webkit-input-placeholder { + color: transparent; + text-align: center; +} + +#create:focus::-moz-placeholder { /* Firefox 19+ */ + color: transparent; + text-align: center; +} + +#list { + list-style-type: none; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.item { + position: relative; + box-sizing: border-box; + padding: 10px; + list-style-type: none; + width: 100%; + border-left: 1px solid #7d82b0; + border-right: 1px solid #7d82b0; + border-bottom: 2px solid #7d82b0; + border-top: 0px solid #7d82b0; + +} + +.item .complete-button { + position: absolute; + left: 20px; + top: 10px; + cursor: pointer; +} + +.item .value { + margin: 0 50px; + padding: 0 15px; +} + +.item .delete-button { + position: absolute; + right: 20px; + top: 10px; + cursor: pointer; +} + +.item.completed { + color: #C3C3C4; +} + +#templates { + display: none +} \ No newline at end of file diff --git a/sites/javascript-to-do-list/IntermediateTodoList.zip-manifest b/sites/javascript-to-do-list/IntermediateTodoList.zip-manifest new file mode 100644 index 000000000..ce489a48e --- /dev/null +++ b/sites/javascript-to-do-list/IntermediateTodoList.zip-manifest @@ -0,0 +1,4 @@ +zip_content/app.js +zip_content/debut_light.png +zip_content/index.html +zip_content/styles.css diff --git a/sites/en/javascript-to-do-list/_deploying_your_site.md b/sites/javascript-to-do-list/_deploying_your_site.md similarity index 80% rename from sites/en/javascript-to-do-list/_deploying_your_site.md rename to sites/javascript-to-do-list/_deploying_your_site.md index 31813d334..608d627ed 100644 --- a/sites/en/javascript-to-do-list/_deploying_your_site.md +++ b/sites/javascript-to-do-list/_deploying_your_site.md @@ -1,13 +1,13 @@ ### Goal -Hosting your list requires you to make the HTML, JavaScript and CSS files +Hosting your project requires you to make the HTML, JavaScript and CSS files available over the Internet. There are three hosting options, depending on how much of a challenge you are looking for: * Use a static site hosting service -* Use git and Github Pages +* Use git and GitHub Pages * Roll your own with a hosting provider ### Using a Static Site Hosting Service @@ -21,22 +21,22 @@ javascript and have a working website. An easy one is 2. Zip your project directory 3. Drag it into the Forge website -Now you have a fully functioning list hosted online! Share the link +Now you have a fully functioning site hosted online! Share the link with your friends and family and wow them with your skills! -### Using Git and Github Pages +### Using Git and GitHub Pages If you like with git and github, take a stab at setting up your site -with [Github Pages](http://pages.github.com/). The easiest thing to do is: +with [GitHub Pages](http://pages.github.com/). The easiest thing to do is: cd . 1. From the terminal, `cd` into your project directory 1. Turn it into a git repository by running `git init` 1. Checkout a branch called `gh-pages` 1. Commit all the files -1. Create a remote repository on github for the game. +1. Create a remote repository on github for the project. 1. Follow their instructions for adding the github remote to your existing repo -1. Follow the instructions on [Github Pages](http://pages.github.com) for +1. Follow the instructions on [GitHub Pages](http://pages.github.com) for setting up a project site from scratch. 1. Make the `gh-pages` the default branch 1. Push it on up! diff --git a/sites/javascript-to-do-list/_lesson_format.md b/sites/javascript-to-do-list/_lesson_format.md new file mode 100644 index 000000000..1f1205287 --- /dev/null +++ b/sites/javascript-to-do-list/_lesson_format.md @@ -0,0 +1,22 @@ +### Format + +Each lesson will look like this: + +
            +

            Step Title

            +
            +

            Goal:

            +

            Description of the current step. +

            Red because big goals are scary. +

            +
            +

            Steps:

            + 
            steps to take.
            +

            Yellow because we've gotten it done, but we have no clue what's going on. +

            +
            +

            Explanation

            +

            Details of what the steps actually did... spell out the cause and effect. +

            Green because we can tie everything together now. +

            +
            diff --git a/sites/javascript-to-do-list/_teachers_note.md b/sites/javascript-to-do-list/_teachers_note.md new file mode 100644 index 000000000..33b67771f --- /dev/null +++ b/sites/javascript-to-do-list/_teachers_note.md @@ -0,0 +1,5 @@ +### A note for teachers + +The backend for this curriculum is hosted at http://listalous.herokuapp.com/ + +If it isn't working, you might be able to deploy it somewhere else using the code from https://github.com/raorao/headless_todos diff --git a/sites/en/javascript-to-do-list/adding_an_item.step b/sites/javascript-to-do-list/adding_an_item.step similarity index 100% rename from sites/en/javascript-to-do-list/adding_an_item.step rename to sites/javascript-to-do-list/adding_an_item.step diff --git a/sites/en/javascript-to-do-list/creating_a_list.step b/sites/javascript-to-do-list/creating_a_list.step similarity index 95% rename from sites/en/javascript-to-do-list/creating_a_list.step rename to sites/javascript-to-do-list/creating_a_list.step index a878aa3b0..b2ecf9d27 100644 --- a/sites/en/javascript-to-do-list/creating_a_list.step +++ b/sites/javascript-to-do-list/creating_a_list.step @@ -67,11 +67,11 @@ with your name of choice. Note: it has to be unique! I'd suggest using your gith JAVASCRIPT message <<-MARKDOWN -Now click over to your browser's network tab. It should look something like this. +Now click over to your browser's network tab. Next to the 'filter' box, click on either the 'All' tab or 'XHR'. Below that, click on the 'Response' tab. It should look something like this: image of chrome's network tab. -Find the request to listalous.herokuapp.com. Was it successful? If not, why +Find the request to listalous.herokuapp.com and click on it. Was it successful? If not, look in the console and read the error message. Why do you think it failed? Once you've successfully created a list, move on to the next step. MARKDOWN end @@ -93,7 +93,7 @@ your list's name, and 'DESCRIPTION-OF-YOUR-ITEM' with your item's description. JAVASCRIPT message <<-MARKDOWN -Check the network tab again. Was your request successful? If it was, take a look at what +Check the network tab again. Was your request successful? If it was, take a look at the server's response. You'll notice that the item has an id attribute now. This is how the server will uniquely identify your item in the future. MARKDOWN diff --git a/sites/en/javascript-to-do-list/deploying_your_site.step b/sites/javascript-to-do-list/deploying_your_site.step similarity index 100% rename from sites/en/javascript-to-do-list/deploying_your_site.step rename to sites/javascript-to-do-list/deploying_your_site.step diff --git a/sites/en/javascript-to-do-list/developer_tools.step b/sites/javascript-to-do-list/developer_tools.step similarity index 100% rename from sites/en/javascript-to-do-list/developer_tools.step rename to sites/javascript-to-do-list/developer_tools.step diff --git a/sites/javascript-to-do-list/img/browser_console.png b/sites/javascript-to-do-list/img/browser_console.png new file mode 100644 index 000000000..965ff66c6 Binary files /dev/null and b/sites/javascript-to-do-list/img/browser_console.png differ diff --git a/sites/en/javascript-to-do-list/img/finished_app.png b/sites/javascript-to-do-list/img/finished_app.png similarity index 100% rename from sites/en/javascript-to-do-list/img/finished_app.png rename to sites/javascript-to-do-list/img/finished_app.png diff --git a/sites/javascript-to-do-list/img/network_tab.png b/sites/javascript-to-do-list/img/network_tab.png new file mode 100644 index 000000000..57b6fc3b6 Binary files /dev/null and b/sites/javascript-to-do-list/img/network_tab.png differ diff --git a/sites/en/javascript-to-do-list/img/text_editor_html.png b/sites/javascript-to-do-list/img/text_editor_html.png similarity index 100% rename from sites/en/javascript-to-do-list/img/text_editor_html.png rename to sites/javascript-to-do-list/img/text_editor_html.png diff --git a/sites/en/javascript-to-do-list/javascript-to-do-list.step b/sites/javascript-to-do-list/javascript-to-do-list.step similarity index 62% rename from sites/en/javascript-to-do-list/javascript-to-do-list.step rename to sites/javascript-to-do-list/javascript-to-do-list.step index c9dbe4ea7..1aff077ae 100644 --- a/sites/en/javascript-to-do-list/javascript-to-do-list.step +++ b/sites/javascript-to-do-list/javascript-to-do-list.step @@ -38,39 +38,19 @@ When programming, you'll generally want these tools on hand: * An internet connection. We're going to be communicating with other websites using JavaScript. * Your browser to see the code running (I recommend Chrome, but any will do!) - * A text editor to change the code (I recommend Sublime) - * A javascript console so you can experiment and print out debugging + * A text editor to change the code (Railsbridge recommends Atom, but you can try a different editor) + * A Javascript console so you can experiment and print out debugging messages. This is built into your browser. -Before you can start the tutorial, you'll need to download the tutorial +Before you can start the tutorial, you'll need to download the tutorial to your computer to edit the source code. Once you've downloaded it, open index.html with your browser. You should see a mock up of your list. If you do not, get an instructor to help you out. - -### Format - -Each lesson will look like this: - -
            -

            Step Title

            -
            -

            Goal:

            -

            Description of the current step. -

            Red because big goals are scary. -

            -
            -

            Steps:

            - 
            steps to take.
            -

            Yellow because we've gotten it done, but we have no clue what's going on. -

            -
            -

            Explanation

            -

            Details of what the steps actually did... spell out the cause and effect. -

            Green because we can tie everything together now. -

            -
            MARKDOWN +insert 'lesson_format' + +insert 'teachers_note' + next_step "the_basics_of_a_website" diff --git a/sites/en/javascript-to-do-list/loading_items.step b/sites/javascript-to-do-list/loading_items.step similarity index 97% rename from sites/en/javascript-to-do-list/loading_items.step rename to sites/javascript-to-do-list/loading_items.step index 30a74a596..2a4218656 100644 --- a/sites/en/javascript-to-do-list/loading_items.step +++ b/sites/javascript-to-do-list/loading_items.step @@ -93,7 +93,7 @@ explanation do JAVASCRIPT message <<-MARKDOWN -You've web page has made its first successful AJAX request! Now, your page will +Your web page has made its first successful AJAX request! Now your page will load your list's items whenever you visit it. Once we host this page on the internet, you will be able to see your list on any computer, tablet, or phone! MARKDOWN diff --git a/sites/en/javascript-to-do-list/marking_an_item_as_complete.step b/sites/javascript-to-do-list/marking_an_item_as_complete.step similarity index 99% rename from sites/en/javascript-to-do-list/marking_an_item_as_complete.step rename to sites/javascript-to-do-list/marking_an_item_as_complete.step index b3ed58c86..075b6ef84 100644 --- a/sites/en/javascript-to-do-list/marking_an_item_as_complete.step +++ b/sites/javascript-to-do-list/marking_an_item_as_complete.step @@ -16,7 +16,7 @@ a single form (like we did in the last lesson), we'll be binding a listener to e mark in the list. jQuery's .on function allows you to do this, using __event delegation__. Secondly, it will be slightly harder to get the required information from the page when -the user clicks a check mark. We need to know which item they clicked, it's id (so the server +the user clicks a check mark. We need to know which item they clicked, its id (so the server can identify it), and whether it has been completed or not. And finally, we need to use jQuery to add and remove classes based on whether the item is completed. diff --git a/sites/en/javascript-to-do-list/next_steps.step b/sites/javascript-to-do-list/next_steps.step similarity index 78% rename from sites/en/javascript-to-do-list/next_steps.step rename to sites/javascript-to-do-list/next_steps.step index 2e327e880..02b8a53cd 100644 --- a/sites/en/javascript-to-do-list/next_steps.step +++ b/sites/javascript-to-do-list/next_steps.step @@ -20,3 +20,11 @@ ul do a "http://railsbridge.org/learn/resources", href: "http://railsbridge.org/learn/resources" end end + +message <<-MARKDOWN +# Credits + +This curriculum was originally written by +[Srinivas Rao](https://twitter.com/raorao_) +and has been improved by all sorts of [lovely RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/javascript-to-do-list). +MARKDOWN diff --git a/sites/en/javascript-to-do-list/playing_with_jquery.step b/sites/javascript-to-do-list/playing_with_jquery.step similarity index 86% rename from sites/en/javascript-to-do-list/playing_with_jquery.step rename to sites/javascript-to-do-list/playing_with_jquery.step index f4d123267..45159ca1e 100644 --- a/sites/en/javascript-to-do-list/playing_with_jquery.step +++ b/sites/javascript-to-do-list/playing_with_jquery.step @@ -7,7 +7,7 @@ overview do message <<-MARKDOWN In addition to being a powerful programming language, Javascript allows you to make your web site interactive. You can use it to build anything from a simple animation to a giant web application like Twitter -or Github. It gives you total control to add, remove, or modify content you've made with HTML. +or GitHub. It gives you total control to add, remove, or modify content you've made with HTML. You can also use it to change styles and add or remove classes. In this lesson, we'll also be using jQuery to make interacting with the page easier. @@ -62,12 +62,12 @@ steps do MARKDOWN source_code :javascript, <<-JAVASCRIPT - item = { description: 'a new item', id: 9000, completed: false} - addItemToPage(item) + var orange = { description: 'Orange', id: 9000, completed: false } + addItemToPage(orange) JAVASCRIPT message <<-MARKDOWN - Your list should now have a new item! + Your list should now have an orange! MARKDOWN end @@ -95,11 +95,11 @@ the id of an item in a data-id attribute, that is not used for styling, just for * __.addClass()__ allows you to add a class to an element. -* __.append()__ takes an element, and attaches it to the end of another element! That way, your element +* __.append()__ takes an element and attaches it to the end of another element! That way, your element will actually show up on the page. -There are many other jQuery functions that are helpful – we'll use more as we go along. In the meantime, -play around with in developer console and see what you can change on the page using JavaScript and jQuery! +There are many other jQuery functions that are helpful – we'll use more as we go along. In the meantime, +play around in the developer console and see what you can change on the page using JavaScript and jQuery! MARKDOWN end diff --git a/sites/en/javascript-to-do-list/programming_with_javascript.step b/sites/javascript-to-do-list/programming_with_javascript.step similarity index 98% rename from sites/en/javascript-to-do-list/programming_with_javascript.step rename to sites/javascript-to-do-list/programming_with_javascript.step index 754ede809..7e968a940 100644 --- a/sites/en/javascript-to-do-list/programming_with_javascript.step +++ b/sites/javascript-to-do-list/programming_with_javascript.step @@ -87,9 +87,9 @@ Functions are __invoked__ with parentheses, which causes them to run. JAVASCRIPT message <<-MARKDOWN -The __push__ function allows us to add new items to an array. the slice function returns a new array with +The __push__ function allows us to add new items to an array. The slice function returns a new array with with everything to the right of the __index__ we provided. Here, we passed the function the number 1, so -slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1).) +slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1.) MARKDOWN end diff --git a/sites/en/javascript-to-do-list/the_basics_of_a_website.step b/sites/javascript-to-do-list/the_basics_of_a_website.step similarity index 98% rename from sites/en/javascript-to-do-list/the_basics_of_a_website.step rename to sites/javascript-to-do-list/the_basics_of_a_website.step index fba2eba2d..fc115070b 100644 --- a/sites/en/javascript-to-do-list/the_basics_of_a_website.step +++ b/sites/javascript-to-do-list/the_basics_of_a_website.step @@ -43,7 +43,7 @@ MARKDOWN step do message < + + + + + + +
            +

            Your List App

            +
            +
            + +
            +
              +
            • + ✔ +
              A gallon of milk
              + ✘ +
              • +
            • + ✔ +
              A stick of butter
              + ✘ +
              • +
            +
            +
            + +
              +
            • + ✔ +
              A stick of butter
              + ✘ +
              • +
            + + + \ No newline at end of file diff --git a/sites/javascript-to-do-list/zip_content/styles.css b/sites/javascript-to-do-list/zip_content/styles.css new file mode 100644 index 000000000..0a8d26b84 --- /dev/null +++ b/sites/javascript-to-do-list/zip_content/styles.css @@ -0,0 +1,107 @@ +body { + background: url('https://github.com/debut_light.png') +} + +#container { + width: 600px; + font-family: 'Titillium Web', 'Arial', sans-serif; + font-size: 40px; + text-align: center; + margin: 40px auto; +} + +h1 { + margin: 20px; +} + +#app { + box-shadow: 0 0 5px #684F91; + font-size: 35px; + color: #080D3B; + background-color: white; +} + +form { + margin: 0; + padding: 0; +} + +#create { + width: 100%; + font-family: inherit; + font-size: inherit; + padding: 10px 30px; + border-left: 1px solid #7d82b0; + border-right: 1px solid #7d82b0; + border-bottom: 2px solid #7d82b0; + border-top: 15px solid #477187; + text-align: center; +} + + +#create::-webkit-input-placeholder { + color: #C3C3C4; + text-align: center; +} + +#create::-moz-placeholder { /* Firefox 19+ */ + color: #C3C3C4; + text-align: center; +} + +#create:focus::-webkit-input-placeholder { + color: transparent; + text-align: center; +} + +#create:focus::-moz-placeholder { /* Firefox 19+ */ + color: transparent; + text-align: center; +} + +#list { + list-style-type: none; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.item { + position: relative; + box-sizing: border-box; + padding: 10px; + list-style-type: none; + width: 100%; + border-left: 1px solid #7d82b0; + border-right: 1px solid #7d82b0; + border-bottom: 2px solid #7d82b0; + border-top: 0px solid #7d82b0; + +} + +.item .complete-button { + position: absolute; + left: 20px; + top: 10px; + cursor: pointer; +} + +.item .value { + margin: 0 50px; + padding: 0 15px; +} + +.item .delete-button { + position: absolute; + right: 20px; + top: 10px; + cursor: pointer; +} + +.item.completed { + color: #C3C3C4; +} + +#templates { + display: none +} \ No newline at end of file diff --git a/sites/en/job-board/add_a_navbar.step b/sites/job-board/add_a_navbar.step similarity index 81% rename from sites/en/job-board/add_a_navbar.step rename to sites/job-board/add_a_navbar.step index a32c9700a..39f237c0c 100644 --- a/sites/en/job-board/add_a_navbar.step +++ b/sites/job-board/add_a_navbar.step @@ -24,9 +24,8 @@ message <<-MARKDOWN Add the following code **above** the line `<%= yield %>` MARKDOWN -source_code :erb, - <<-ERB -
            +source_code :erb, <<-ERB +
            • <%= link_to "Home", jobs_path %>
              • @@ -37,10 +36,19 @@ source_code :erb,
            • <%= link_to "Add Job", new_job_path %>
            -
            ERB +message <<-MARKDOWN + Additionally, wrap the `<%= yield %>` in a containing wrapper div so it looks like this: +MARKDOWN + +source_code :erb, <<-ERB +
            + <%= yield %> +
            +ERB + message <<-MARKDOWN Things to note: @@ -51,11 +59,11 @@ message <<-MARKDOWN # Add the styles - Open up the assets directory, and you should have a file here: app/assets/stylesheets/jobs.css.scss. This is a Rails-default created stylesheet, and isn't the best. [Smart CSS people](http://www.stubbornella.org/content/2013/09/12/rails-is-mucking-up-my-css-already/) have taught us that CSS should be organized into [reusable components](https://github.com/stubbornella/oocss/wiki), not organized based on where it is used. + Open up the assets directory, and you should have a file here: app/assets/stylesheets/jobs.scss. This is a Rails-default created stylesheet, and isn't the best. [Smart CSS people](http://www.stubbornella.org/content/2013/09/12/rails-is-mucking-up-my-css-already/) have taught us that CSS should be organized into [reusable components](https://github.com/stubbornella/oocss/wiki), not organized based on where it is used. So let's delete that file and make a new one. - Actually, we're going to make two new ones. Under `app/assets/stylesheets`, add `global.css.scss`: + Actually, we're going to make two new ones. Under `app/assets/stylesheets`, add `global.scss`: MARKDOWN source_code :CSS, @@ -70,14 +78,14 @@ source_code :CSS, } .clearfix { - clear: both; + overflow: hidden; } CSS message <<-MARKDOWN This is where we put styles that affect the whole app. - Now, under `app/assets/stylesheets`, add `nav.css.scss`: + Now, under `app/assets/stylesheets`, add `nav.scss`: MARKDOWN source_code :CSS, diff --git a/sites/en/job-board/add_a_new_job_form.step b/sites/job-board/add_a_new_job_form.step similarity index 98% rename from sites/en/job-board/add_a_new_job_form.step rename to sites/job-board/add_a_new_job_form.step index cf30583f9..17520d5a3 100644 --- a/sites/en/job-board/add_a_new_job_form.step +++ b/sites/job-board/add_a_new_job_form.step @@ -78,6 +78,6 @@ RUBY message "Now we should see our mostly unstyled form!" -discussion_box "Form HTML", "What HTML did the form helpers produce? Using the web inspector, look through the form code and compare it to the file you've been working on in Sublime." +discussion_box "Form HTML", "What HTML did the form helpers produce? Using the web inspector, look through the form code and compare it to the file you've been working on in Atom." next_step "make_the_form_work" diff --git a/sites/en/job-board/add_more_things.step b/sites/job-board/add_more_things.step similarity index 72% rename from sites/en/job-board/add_more_things.step rename to sites/job-board/add_more_things.step index 34fb14c95..96322f257 100644 --- a/sites/en/job-board/add_more_things.step +++ b/sites/job-board/add_more_things.step @@ -15,4 +15,8 @@ message <<-MARKDOWN * Add a user model and auth with Devise * Test it! Write a controller spec. + ## Credits + + This curriculum was originally written by [Lillie Chilen](http://www.twitter.com/lilliealbert) + and has been improved by all sorts of [lovely RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/job-board). MARKDOWN diff --git a/sites/en/job-board/create_a_rails_app.step b/sites/job-board/create_a_rails_app.step similarity index 60% rename from sites/en/job-board/create_a_rails_app.step rename to sites/job-board/create_a_rails_app.step index e9fb2e8f7..4f03b75e3 100644 --- a/sites/en/job-board/create_a_rails_app.step +++ b/sites/job-board/create_a_rails_app.step @@ -20,36 +20,34 @@ message <<-MARKDOWN # Rails New!!! MARKDOWN -console "rails new job_board -T" +console "rails new job_board -T --skip-turbolinks" message <<-MARKDOWN The `-T` in that command means that when you make new files using Rails generators, it doesn't automatically create test files using Test::Unit (the default Rails testing framework). Watch all the files that are created! Wow! - # Open the project in Sublime Text + # Open the project in Atom MARKDOWN console_with_message "Move into the directory for your new Rails app:", "cd job_board" message <<-MARKDOWN - And open the project in Sublime: + And open the project in Atom: - * Open Sublime + * Open Atom * Under Project, choose "Add Folder to Project" (You must have at least one window open, so if that option is greyed out, open a window with cmd+n (Mac) or ctl+n (PC)) MARKDOWN -discussion_box "Text Editor vs Command Line", "Review the differences between the the command line and your text editor, even if everyone already knows!" +discussion_box "Text Editor vs Command Line", "Review the differences between the command line and your text editor, even if everyone already knows!" -message "# Fix Up Those Defaults" +message "# Let's Talk About Dependencies" -source_code_with_message "We're going to be looking at the Rails server output, which includes a lot of noise by default. Find the file called 'Gemfile' by searching for it, and add the following line:", :ruby, "gem 'quiet_assets'" +message "When we created a new Rails app, it installed a bunch of stuff by default. The list of things Rails installed is in a file called `Gemfile`. If you want to add any additional third party code (aka **gems**), you can add more lines to the `Gemfile` and install them with `bundle`." -source_code_with_message "And delete the following line:", :ruby, "gem 'turbolinks'" - -console_with_message "Save the file, and then in the command line, run the following command:", "bundle install" +console_with_message "Rails has already installed all the stuff we need, but you can always run bundle again to re-install gems, or install gems newly added to the Gemfile. In the command line, run the following command:", "bundle install" discussion_box "What does 'bundle' do?", <<-MARKDOWN Bundler is the tool the Ruby community uses for dependency management. @@ -60,26 +58,8 @@ discussion_box "What does 'bundle' do?", <<-MARKDOWN * Is there a shorter method to use for `bundle install`? (Hint: yes!) MARKDOWN -message <<-MARKDOWN -# Really clear out TurboLinks - -Turbolinks is a Rails thing that we don't want. We got rid of part of it above, but let's finish the job. -MARKDOWN - -source_code_with_message "Within app/assets/javascripts, open up application.js and delete this line:", :ruby, "//= require turbolinks" - -source_code_with_message "Within app/views/layouts, open up application.html.erb and delete the following from lines five AND six: ", :ruby, "'data-turbolinks-track' => true" - -message "Lines five and six should end up looking like this: " - -source_code :erb, <<-ERB - <%= stylesheet_link_tag "application", media: "all" %> - <%= javascript_include_tag "application" %> -ERB - message "# Look at your empty app" - tip "Now is a good time to figure out how to have multiple tabs or windows of your terminal or command prompt. Starting and stopping the Rails server all day is tedious, so it's good to have one terminal tab or window for running commands, and a separate one for the server." console_with_message "Start the Rails server by running this command in the terminal:", "rails server" @@ -87,7 +67,7 @@ console_with_message "Start the Rails server by running this command in the term message <<-MARKDOWN Now, let's check out our default home page - In the broswer, visit + In the browser, visit Yup, that's the default Rails home page! MARKDOWN diff --git a/sites/en/job-board/crud_and_resourceful_routing.step b/sites/job-board/crud_and_resourceful_routing.step similarity index 97% rename from sites/en/job-board/crud_and_resourceful_routing.step rename to sites/job-board/crud_and_resourceful_routing.step index 6f71456c6..0c4678418 100644 --- a/sites/en/job-board/crud_and_resourceful_routing.step +++ b/sites/job-board/crud_and_resourceful_routing.step @@ -16,7 +16,7 @@ MARKDOWN discussion_box "CRUD", "Talk through the different uses for the HTTP verbs. What is their general purpose, and what are we specifically using them for??" message <<-MARKDOWN - To have a useful app, we need to be able to create job postings, see them all and their details, change them, and delete them. The way that Rails wants us to do this is by following RESTful routing conventions, which are perfectly encapsulated by the output of `resource :jobs` in our routes.rb file. + To have a useful app, we need to be able to create job postings, see them all and their details, change them, and delete them. The way that Rails wants us to do this is by following RESTful routing conventions, which are perfectly encapsulated by the output of `resources :jobs` in our routes.rb file. In Rails we work with seven main verbs, which map to different CRUD actions and controller actions: diff --git a/sites/en/job-board/delete_job_listings.step b/sites/job-board/delete_job_listings.step similarity index 96% rename from sites/en/job-board/delete_job_listings.step rename to sites/job-board/delete_job_listings.step index 9d139e861..bf2f8208d 100644 --- a/sites/en/job-board/delete_job_listings.step +++ b/sites/job-board/delete_job_listings.step @@ -12,7 +12,7 @@ MARKDOWN source_code :html, "job_path DELETE /jobs/:id(.:format) jobs#destroy" -message "So we need to send the DELETE http verb to the server, so we can get to the destory method on the jobs controller (that we will make soon). It turns out rails link_to helpers accept specific verbs as an argument, so we can add this line below the edit posting link that we just added:" +message "So we need to send the DELETE http verb to the server, so we can get to the destroy method on the jobs controller (that we will make soon). It turns out rails link_to helpers accept specific verbs as an argument, so we can add this line below the edit posting link that we just added:" source_code :erb, "
            <%= link_to 'Delete Posting', job, method: :delete %>
            " diff --git a/sites/en/job-board/img/crud_grid.jpg b/sites/job-board/img/crud_grid.jpg similarity index 100% rename from sites/en/job-board/img/crud_grid.jpg rename to sites/job-board/img/crud_grid.jpg diff --git a/sites/en/job-board/img/crud_rails_methods.jpg b/sites/job-board/img/crud_rails_methods.jpg similarity index 100% rename from sites/en/job-board/img/crud_rails_methods.jpg rename to sites/job-board/img/crud_rails_methods.jpg diff --git a/sites/en/job-board/img/rails-routes.png b/sites/job-board/img/rails-routes.png similarity index 100% rename from sites/en/job-board/img/rails-routes.png rename to sites/job-board/img/rails-routes.png diff --git a/sites/en/intermediate-rails/img/request-cycle.jpg b/sites/job-board/img/request-cycle.jpg similarity index 100% rename from sites/en/intermediate-rails/img/request-cycle.jpg rename to sites/job-board/img/request-cycle.jpg diff --git a/sites/en/job-board/job-board.step b/sites/job-board/job-board.step similarity index 90% rename from sites/en/job-board/job-board.step rename to sites/job-board/job-board.step index 36041a34b..f2c78c2b0 100644 --- a/sites/en/job-board/job-board.step +++ b/sites/job-board/job-board.step @@ -16,7 +16,7 @@ message <<-MARKDOWN We're also going to skip deploying to Heroku this time around, but you can definitely use the instructions from the Suggestotron curriculum to deploy your app to the internet! MARKDOWN -important "This curriculum is written for Rails 4. Things will get awkward / broken if you're using Rails 3, so if you skipped the Installfest, you need to upgrade to Rails 4 now." +important "This curriculum is written for Rails 5. Things will get awkward / broken if you're using an earlier version of Rails, so if you skipped the Installfest, you need to upgrade to Rails 5 now." message <<-MARKDOWN # Tips for everyone: diff --git a/sites/en/job-board/listing_the_jobs.step b/sites/job-board/listing_the_jobs.step similarity index 95% rename from sites/en/job-board/listing_the_jobs.step rename to sites/job-board/listing_the_jobs.step index 298634793..1a6eeccd7 100644 --- a/sites/en/job-board/listing_the_jobs.step +++ b/sites/job-board/listing_the_jobs.step @@ -27,12 +27,12 @@ discussion_box "Rails Console", <<-MARKDOWN * Try running `Job.all.to_sql`. What does that do? * Try selecting an individual Job record. - * Try updating an that individual record from the console! + * Try updating that individual record from the console! MARKDOWN message "# Show those jobs!" -source_code_with_message "Add this to app/views/jobs/index.html.erb:", :ruby, +source_code_with_message "Add this to app/views/jobs/index.html.erb:", :erb, <<-RUBY <% @jobs.each do |job| %>

            <%= job.title %>

            diff --git a/sites/en/job-board/make_a_jobs_home_page.step b/sites/job-board/make_a_jobs_home_page.step similarity index 83% rename from sites/en/job-board/make_a_jobs_home_page.step rename to sites/job-board/make_a_jobs_home_page.step index 832597ded..896107c53 100644 --- a/sites/en/job-board/make_a_jobs_home_page.step +++ b/sites/job-board/make_a_jobs_home_page.step @@ -21,19 +21,19 @@ message <<-MARKDOWN So it's looking for a route, but can't find one. Let's add one! - Open up the routes file. It's in the config directory, called `routes.rb`. If you're using Sublime Text 2, you can open it using keyboard shortcuts: + Open up the routes file. It's in the config directory, called `routes.rb`. If you're using Atom, you can open it using keyboard shortcuts: * Hitting cmd + p (on Mac) or ctl + p (on PC) * typing in `route` * hitting enter - Magic! (Sublime is using fuzzy search, so you can use the entire file path, or just part of the filename to go to files.) + Magic! (Atom is using fuzzy search, so you can use the entire file path, or just part of the filename to go to files.) MARKDOWN source_code_with_message "We're going to need a resource route, which will create EIGHT different routes for us. Add this to line two:", :ruby, "resources :jobs" message <<-MARKDOWN - Now, lets go look at what that made, by using the excellently helpful page available on any Rails 4 app: . + Now, lets go look at what that made, by using the excellently helpful routes page: . MARKDOWN discussion_box "How to read the routes page.", <<-MARKDOWN @@ -49,8 +49,6 @@ discussion_box "How to read the routes page.", <<-MARKDOWN Can you find the line that will make `/jobs` a route? MARKDOWN -tip "If you are on Rails 3, going to /rails/info will **fail**! Stop right now and upgrade to Rails 4." - message <<-MARKDOWN Since adding the line `resources :jobs` made a route matching `/jobs`, let's go visit that page again: MARKDOWN @@ -89,16 +87,18 @@ MARKDOWN source_code_with_message "Add the index method to the controller:", :ruby, <<-RUBY +class JobsController < ApplicationController def index end +end RUBY message "And refresh " -error_box "Missing template jobs/index, application/index with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in: * '/Users/probablyyou/railsbridge/job_board/app/views'" +error_box "JobsController#index is missing a template for this request format and variant." message <<-MARKDOWN - What's the important part of the this error? How does Rails decide to look for something called jobs/index? How did it decide to look in the views directory? + What's a template? How does Rails decide to look for the template associated with JobsController's `index` action? Talk through what Rails is trying, and failing, to do, and how file names and method names are important here. diff --git a/sites/en/job-board/make_the_form_work.step b/sites/job-board/make_the_form_work.step similarity index 89% rename from sites/en/job-board/make_the_form_work.step rename to sites/job-board/make_the_form_work.step index 850dedfc0..747e99ad9 100644 --- a/sites/en/job-board/make_the_form_work.step +++ b/sites/job-board/make_the_form_work.step @@ -24,9 +24,9 @@ source_code :ruby, end RUBY -message "Reload the page!" +message "Try to use your form again. Unfortunately, there won't be any output, not even an error page. But if you look closely at the output from your Rails server, you might find this:" -error_box "Missing template jobs/create, application/create with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in: * '/Users/lillie/railsbridge/job_board/app/views'" +error_box "No template found for JobsController#create, rendering head :no_content" <<-MARKDOWN Familiar error, right? We don't have a template called create.html.erb. @@ -39,7 +39,7 @@ MARKDOWN source_code :ruby, <<-RUBY def create - render :index + redirect_to jobs_path end RUBY @@ -61,7 +61,7 @@ MARKDOWN message <<-MARKDOWN # Saving form data! - Head back to , and get your Rails console and your browser next to eachother again. Submit the form again, this time looking for the section that looks something like: + Head back to , and get your Rails server logs and your browser next to each other again. Submit the form again, this time looking for the section that looks something like: MARKDOWN source_code :http, @@ -78,7 +78,7 @@ source_code :http, JSON message <<-MARKDOWN - This is the precious data that our form is sending, and right now we're just throwing it away. Let's not do that! Since we're using Rails 4 and all its great conventions, we're going to use Strong Parameters to limit what kind of data our form can submit to our app. + This is the precious data that our form is sending, and right now we're just throwing it away. Let's not do that! Since we're using Rails 5 and all its great conventions, we're going to use Strong Parameters to limit what kind of data our form can submit to our app. MARKDOWN source_code_with_message "Add this code to your jobs controller. (Notice that we're expanding the create method. Don't just copy and paste and end up with two create methods, folks.)", :ruby, diff --git a/sites/en/job-board/store_jobs_in_the_database.step b/sites/job-board/store_jobs_in_the_database.step similarity index 82% rename from sites/en/job-board/store_jobs_in_the_database.step rename to sites/job-board/store_jobs_in_the_database.step index 671423044..c9aa51357 100644 --- a/sites/en/job-board/store_jobs_in_the_database.step +++ b/sites/job-board/store_jobs_in_the_database.step @@ -35,7 +35,7 @@ message <<-MARKDOWN MARKDOWN source_code :ruby, <<-RUBY - class CreateJobs < ActiveRecord::Migration + class CreateJobs < ActiveRecord::Migration[5.0] def change create_table :jobs do |t| @@ -48,7 +48,7 @@ RUBY message <<-MARKDOWN Running this code will make a table in our database called jobs. Right now it just has the timestamps (`created_at` and `updated_at`). What else should a job have? Let's start with a title and description. - Add the the title and description so it looks like this: + Add the title and description so it looks like this: MARKDOWN source_code :ruby, <<-RUBY @@ -61,10 +61,10 @@ RUBY message "Now we need to execute this file, so that the database schema gets updated." -console "rake db:migrate" +console "rails db:migrate" message <<-MARKDOWN - This uses a utility called rake to run a task called `db:migrate`, which in turn looks through all of your migration files and runs any that haven't already been run at some point in the past. + This tells Rails to run any migration files that haven't already been run at some point in the past. MARKDOWN discussion_box "Why do we use migrations?", @@ -77,7 +77,7 @@ MARKDOWN message <<-MARKDOWN # Check out the model - The migration we just ran updated the database, but that doesn't mean that we can talk to the database using Ruby yet. Look at the file `app/models/job.rb`. The `Job` class inherits from ActiveRecord::Base, so that we can talk to the database with Ruby instead of SQL! + The migration we just ran updated the database, but that doesn't mean that we can talk to the database using Ruby yet. Look at the file `app/models/job.rb`. The `Job` class inherits from ApplicationRecord, so that we can talk to the database with Ruby instead of SQL! Okay, so we've got some place to store our jobs. But how can we make any? THROUGH THE MAGIC OF FORMS!!! MARKDOWN diff --git a/sites/en/job-board/the_request_cycle.step b/sites/job-board/the_request_cycle.step similarity index 100% rename from sites/en/job-board/the_request_cycle.step rename to sites/job-board/the_request_cycle.step diff --git a/sites/en/job-board/update_job_listings.step b/sites/job-board/update_job_listings.step similarity index 90% rename from sites/en/job-board/update_job_listings.step rename to sites/job-board/update_job_listings.step index a219a031c..52ceb2803 100644 --- a/sites/en/job-board/update_job_listings.step +++ b/sites/job-board/update_job_listings.step @@ -12,7 +12,9 @@ source_code_with_message "Say we want to edit the first job posting. If we look message "So, it looks like if we want to edit the job description, we should visit this URL: ." -source_code_with_message "We've seen this before, right? Let's add the controller action:", +error_box "The action 'edit' could not be found for JobsController" + +source_code_with_message "We've seen this before, right? Let's add the controller action above the word `private`:", <<-RUBY def edit end @@ -83,7 +85,7 @@ ERB message "Refresh the page." error_box "First argument in form cannot contain nil or be empty" -source_code_with_message "It looks like we don't have a job ... because we haven't gotten our job out of the database! Let's go to the jobs_controller and fix that. In jobs_controller.rb, add the following", :ruby, +source_code_with_message "It looks like we don't have a job ... because we haven't gotten our job out of the database! Let's go to the jobs\\_controller and fix that. In jobs\\_controller.rb, add the following", :ruby, <<-RUBY def edit @job = Job.find(params[:id]) @@ -100,7 +102,7 @@ MARKDOWN error_box "The action 'update' could not be found for JobsController" -source_code_with_message "So it looks like the form is finding the right route, but the method is missing from the controller. Let's add the update method to the file jobs_controller.rb", :ruby, +source_code_with_message "So it looks like the form is finding the right route, but the method is missing from the controller. Let's add the update method--again, above the word `private`--to the file jobs_controller.rb", :ruby, <<-RUBY def update end @@ -146,7 +148,7 @@ source_code_with_message "Here's what the update method should actually look lik <<-RUBY def update @job = Job.find(params[:id]) - @job.update_attributes(job_params) + @job.update(job_params) redirect_to jobs_path end RUBY @@ -156,7 +158,10 @@ message <<-MARKDOWN ### Add a Link - Our users probably aren't going to know they can hit `/jobs/:id/edit` to visit the edit form, so let's add a link to it on the jobs index so we end up with this (we're just adding the line with the `
            ` header in it ... don't copy and paste the whole thing!): + Our users probably aren't going to know they can hit `/jobs/:id/edit` to visit the edit form, so let's add a link so it's easy to find! + + In `app/views/jobs/index.html.erb`, just add this line with the `
            ` header in it ... don't copy and paste the whole thing! + MARKDOWN source_code :erb, diff --git a/sites/en/learn-to-code/argv.md b/sites/learn-to-code/argv.md similarity index 100% rename from sites/en/learn-to-code/argv.md rename to sites/learn-to-code/argv.md diff --git a/sites/en/learn-to-code/arrays.md b/sites/learn-to-code/arrays.md similarity index 100% rename from sites/en/learn-to-code/arrays.md rename to sites/learn-to-code/arrays.md diff --git a/sites/en/learn-to-code/computers.md b/sites/learn-to-code/computers.md similarity index 100% rename from sites/en/learn-to-code/computers.md rename to sites/learn-to-code/computers.md diff --git a/sites/en/learn-to-code/extra.md b/sites/learn-to-code/extra.md similarity index 100% rename from sites/en/learn-to-code/extra.md rename to sites/learn-to-code/extra.md diff --git a/sites/en/learn-to-code/functions.md b/sites/learn-to-code/functions.md similarity index 97% rename from sites/en/learn-to-code/functions.md rename to sites/learn-to-code/functions.md index 198a2a503..f6f5ff65d 100644 --- a/sites/en/learn-to-code/functions.md +++ b/sites/learn-to-code/functions.md @@ -36,7 +36,7 @@ Lab: use "rant" to rant about something really important!!! # Capitalize Just The First Character def initial_cap s - s[0] + s[1,s.length] + s[0].upcase + s[1,s.length] end puts initial_cap("smith") diff --git a/sites/en/learn-to-code/hashes.md b/sites/learn-to-code/hashes.md similarity index 100% rename from sites/en/learn-to-code/hashes.md rename to sites/learn-to-code/hashes.md diff --git a/sites/en/learn-to-code/img/cookie-recipe.gif b/sites/learn-to-code/img/cookie-recipe.gif similarity index 100% rename from sites/en/learn-to-code/img/cookie-recipe.gif rename to sites/learn-to-code/img/cookie-recipe.gif diff --git a/sites/en/learn-to-code/img/dot.jpg b/sites/learn-to-code/img/dot.jpg similarity index 100% rename from sites/en/learn-to-code/img/dot.jpg rename to sites/learn-to-code/img/dot.jpg diff --git a/sites/en/learn-to-code/img/fruit-banana-snack-banana.svg b/sites/learn-to-code/img/fruit-banana-snack-banana.svg similarity index 100% rename from sites/en/learn-to-code/img/fruit-banana-snack-banana.svg rename to sites/learn-to-code/img/fruit-banana-snack-banana.svg diff --git a/sites/en/learn-to-code/img/one-infinite-loop.jpg b/sites/learn-to-code/img/one-infinite-loop.jpg similarity index 100% rename from sites/en/learn-to-code/img/one-infinite-loop.jpg rename to sites/learn-to-code/img/one-infinite-loop.jpg diff --git a/sites/en/learn-to-code/img/snack-apple.svg b/sites/learn-to-code/img/snack-apple.svg similarity index 100% rename from sites/en/learn-to-code/img/snack-apple.svg rename to sites/learn-to-code/img/snack-apple.svg diff --git a/sites/en/learn-to-code/img/snack-fruit.svg b/sites/learn-to-code/img/snack-fruit.svg similarity index 100% rename from sites/en/learn-to-code/img/snack-fruit.svg rename to sites/learn-to-code/img/snack-fruit.svg diff --git a/sites/en/learn-to-code/img/spoon.jpg b/sites/learn-to-code/img/spoon.jpg similarity index 100% rename from sites/en/learn-to-code/img/spoon.jpg rename to sites/learn-to-code/img/spoon.jpg diff --git a/sites/en/learn-to-code/img/truthiness.png b/sites/learn-to-code/img/truthiness.png similarity index 100% rename from sites/en/learn-to-code/img/truthiness.png rename to sites/learn-to-code/img/truthiness.png diff --git a/sites/en/learn-to-code/img/warehouse.jpg b/sites/learn-to-code/img/warehouse.jpg similarity index 100% rename from sites/en/learn-to-code/img/warehouse.jpg rename to sites/learn-to-code/img/warehouse.jpg diff --git a/sites/en/learn-to-code/img/wargames-terminal.jpg b/sites/learn-to-code/img/wargames-terminal.jpg similarity index 100% rename from sites/en/learn-to-code/img/wargames-terminal.jpg rename to sites/learn-to-code/img/wargames-terminal.jpg diff --git a/sites/en/learn-to-code/input_and_output.md b/sites/learn-to-code/input_and_output.md similarity index 100% rename from sites/en/learn-to-code/input_and_output.md rename to sites/learn-to-code/input_and_output.md diff --git a/sites/en/learn-to-code/learn-to-code.md b/sites/learn-to-code/learn-to-code.md similarity index 86% rename from sites/en/learn-to-code/learn-to-code.md rename to sites/learn-to-code/learn-to-code.md index 5f079016a..fc5c97251 100644 --- a/sites/en/learn-to-code/learn-to-code.md +++ b/sites/learn-to-code/learn-to-code.md @@ -19,7 +19,7 @@ You may have never programmed before. Now you will. * most coding happens in a team * pair programming is awesome - + # What is coding? @@ -67,11 +67,10 @@ Follow along at http://docs.railsbridge.org/learn-to-code * Ask for SSID and password * a live Ruby installation * e.g. http://railsinstaller.org -- click on the *BIG GREEN BUTTON* - * Ruby version 2.1 preferred, but 1.9 is fine too + * Ruby version 2.3 preferred, but 1.9+ is fine too * run `ruby -v` to check * a text editor - * e.g. Sublime Text 2 - * http://www.sublimetext.com/2 + * we recommend [Atom](https://atom.io/), but you can try a [different editor](/installfest/editors) * If you do not have both of these things, RAISE YOUR HAND * visit http://installfest.railsbridge.org for more instructions diff --git a/sites/en/learn-to-code/logic.md b/sites/learn-to-code/logic.md similarity index 100% rename from sites/en/learn-to-code/logic.md rename to sites/learn-to-code/logic.md diff --git a/sites/en/learn-to-code/loops.md b/sites/learn-to-code/loops.md similarity index 100% rename from sites/en/learn-to-code/loops.md rename to sites/learn-to-code/loops.md diff --git a/sites/en/learn-to-code/methods.md b/sites/learn-to-code/methods.md similarity index 100% rename from sites/en/learn-to-code/methods.md rename to sites/learn-to-code/methods.md diff --git a/sites/en/learn-to-code/next_steps.md b/sites/learn-to-code/next_steps.md similarity index 79% rename from sites/en/learn-to-code/next_steps.md rename to sites/learn-to-code/next_steps.md index dae282ded..211bf927f 100644 --- a/sites/en/learn-to-code/next_steps.md +++ b/sites/learn-to-code/next_steps.md @@ -7,13 +7,15 @@ * Chris Pine's book "[Learn to Program](http://www.amazon.com/gp/product/1934356360/ref=as_li_ss_il?ie=UTF8&camp=1789&creative=390957&creativeASIN=1934356360&linkCode=as2&tag=alexchaffeeco-20)" book * Attend or host a [RailsBridge Workshop](http://railsbridge.org) -* _why's guide to Ruby (http://mislav.uniqpath.com/poignant-guide/) +* _why's guide to Ruby (http://poignant.guide/) * * # Thanks -* to all the TAs +* to all the TAs! * to all the students! +* to [Alex Chaffee](http://alexchaffee.com/), the original author of this curriculum, and +* to all the [RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/learn-to-code) who have helped make it better! diff --git a/sites/en/learn-to-code/nil.md b/sites/learn-to-code/nil.md similarity index 100% rename from sites/en/learn-to-code/nil.md rename to sites/learn-to-code/nil.md diff --git a/sites/en/learn-to-code/numbers.md b/sites/learn-to-code/numbers.md similarity index 100% rename from sites/en/learn-to-code/numbers.md rename to sites/learn-to-code/numbers.md diff --git a/sites/en/learn-to-code/objects.md b/sites/learn-to-code/objects.md similarity index 100% rename from sites/en/learn-to-code/objects.md rename to sites/learn-to-code/objects.md diff --git a/sites/en/learn-to-code/sinatra.md b/sites/learn-to-code/sinatra.md similarity index 100% rename from sites/en/learn-to-code/sinatra.md rename to sites/learn-to-code/sinatra.md diff --git a/sites/en/learn-to-code/strings.md b/sites/learn-to-code/strings.md similarity index 100% rename from sites/en/learn-to-code/strings.md rename to sites/learn-to-code/strings.md diff --git a/sites/en/learn-to-code/the_command_line.md b/sites/learn-to-code/the_command_line.md similarity index 97% rename from sites/en/learn-to-code/the_command_line.md rename to sites/learn-to-code/the_command_line.md index c007e8d0b..6397782d9 100644 --- a/sites/en/learn-to-code/the_command_line.md +++ b/sites/learn-to-code/the_command_line.md @@ -76,8 +76,8 @@ * a text editor is a program that edits a text file * a text editor is *like* a word processor * but a text editor is **not** a word processor -* You probably have *Sublime Text* - * others include *TextMate*, *Notepad++* +* You probably have *Atom* + * or [another text editor](/installfest/editors) * but **NOT** *TextEdit* or *Notepad* or *Microsoft Word* # Source File diff --git a/sites/en/learn-to-code/todo-learntocode.md b/sites/learn-to-code/todo-learntocode.md similarity index 100% rename from sites/en/learn-to-code/todo-learntocode.md rename to sites/learn-to-code/todo-learntocode.md diff --git a/sites/en/learn-to-code/variables.md b/sites/learn-to-code/variables.md similarity index 96% rename from sites/en/learn-to-code/variables.md rename to sites/learn-to-code/variables.md index df7801947..63b40d6bf 100644 --- a/sites/en/learn-to-code/variables.md +++ b/sites/learn-to-code/variables.md @@ -39,7 +39,7 @@ or this: seconds_per_minute = 60 minutes_per_hour = 60 hours_per_day = 24 - seconds_per_day = seconds_per_minute * minutes_per_day * hours_per_day + seconds_per_day = seconds_per_minute * minutes_per_hour * hours_per_day ? diff --git a/sites/en/intermediate-rails/add_other_features_of_your_choosing.step b/sites/message-board/add_other_features_of_your_choosing.step similarity index 68% rename from sites/en/intermediate-rails/add_other_features_of_your_choosing.step rename to sites/message-board/add_other_features_of_your_choosing.step index 83987c310..836d3d56b 100644 --- a/sites/en/intermediate-rails/add_other_features_of_your_choosing.step +++ b/sites/message-board/add_other_features_of_your_choosing.step @@ -6,11 +6,18 @@ Suggestions: * Profile pages for users (enter user’s name or details, have it display alongside posts). * Post/Comment history for individual users (on their profile page?). * Easy user profile pictures with [Gravatar](https://gravatar.com/). -* Add login options with [Omniauth](https://github.com/intridea/omniauth), including Twitter, Facebook, Github, Google, and more. +* Add login options with [Omniauth](https://github.com/intridea/omniauth), including Twitter, Facebook, GitHub, Google, and more. * Check out the Devise [documentation for integrating with Omniauth](https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview). * Fiddle with the layout of the show page so it doesn't look bad. If it looks bad. It probably looks great. * Perhaps fancier post markup with Markdown or something similar. * Deploy to Heroku and send your message board to all your friends! ## ...and that's that! Good luck! Make more things! Come back again! + +# Credits + +This curriculum was originally written by +[Lillie Chilen](http://www.twitter.com/lilliealbert) and +[Travis Grathwell](https://github.com/tjgrathwell), +and has been improved by all sorts of [lovely RailsBridge volunteers](https://github.com/railsbridge/docs/commits/master/sites/en/message-board). MARKDOWN diff --git a/sites/en/intermediate-rails/add_pages_to_create_and_look_at_individual_posts.step b/sites/message-board/add_pages_to_create_and_look_at_individual_posts.step similarity index 89% rename from sites/en/intermediate-rails/add_pages_to_create_and_look_at_individual_posts.step rename to sites/message-board/add_pages_to_create_and_look_at_individual_posts.step index 08f09b0fa..53ae6cdfe 100644 --- a/sites/en/intermediate-rails/add_pages_to_create_and_look_at_individual_posts.step +++ b/sites/message-board/add_pages_to_create_and_look_at_individual_posts.step @@ -38,10 +38,11 @@ end tools_and_references do message <<-MARKDOWN -* RailsGuides - Active Record Associations: . -* RailsGuides - Form Helpers, section 2.2: +* RailsGuides - Active Record Associations: . +* RailsGuides - Form Helpers, section 2.2: . * RailsGuides - Routes - CRUD, Verbs, and Actions: . -* RailsGuides - Active Record Validations and Callbacks: +* RailsGuides - Active Record Validations: . +* RailsGuides - Active Record Callbacks: . MARKDOWN end diff --git a/sites/en/intermediate-rails/add_replying.step b/sites/message-board/add_replying.step similarity index 100% rename from sites/en/intermediate-rails/add_replying.step rename to sites/message-board/add_replying.step diff --git a/sites/en/intermediate-rails/commands.md b/sites/message-board/commands.md similarity index 97% rename from sites/en/intermediate-rails/commands.md rename to sites/message-board/commands.md index 83810651c..b61bd3edd 100644 --- a/sites/en/intermediate-rails/commands.md +++ b/sites/message-board/commands.md @@ -32,7 +32,7 @@ Create a new [Rails model] Update the database to match what you have described in your code - rake db:migrate + rails db:migrate Run the application locally (Ctrl-C to quit) @@ -44,7 +44,7 @@ Start an interactive Ruby session that knows about your Rails models (type 'exit Print the routes for your application - rake routes + rails routes ## Browser diff --git a/sites/en/intermediate-rails/create_a_new_rails_app_with_a_static_home_page.step b/sites/message-board/create_a_new_rails_app_with_a_static_home_page.step similarity index 100% rename from sites/en/intermediate-rails/create_a_new_rails_app_with_a_static_home_page.step rename to sites/message-board/create_a_new_rails_app_with_a_static_home_page.step diff --git a/sites/en/intermediate-rails/creating_a_new_controller.md b/sites/message-board/creating_a_new_controller.md similarity index 100% rename from sites/en/intermediate-rails/creating_a_new_controller.md rename to sites/message-board/creating_a_new_controller.md diff --git a/sites/en/intermediate-rails/img/create_post.png b/sites/message-board/img/create_post.png similarity index 100% rename from sites/en/intermediate-rails/img/create_post.png rename to sites/message-board/img/create_post.png diff --git a/sites/en/intermediate-rails/img/create_reply.png b/sites/message-board/img/create_reply.png similarity index 100% rename from sites/en/intermediate-rails/img/create_reply.png rename to sites/message-board/img/create_reply.png diff --git a/sites/en/intermediate-rails/img/header.png b/sites/message-board/img/header.png similarity index 100% rename from sites/en/intermediate-rails/img/header.png rename to sites/message-board/img/header.png diff --git a/sites/en/intermediate-rails/img/inline_reply.png b/sites/message-board/img/inline_reply.png similarity index 100% rename from sites/en/intermediate-rails/img/inline_reply.png rename to sites/message-board/img/inline_reply.png diff --git a/sites/en/intermediate-rails/img/post_index.png b/sites/message-board/img/post_index.png similarity index 100% rename from sites/en/intermediate-rails/img/post_index.png rename to sites/message-board/img/post_index.png diff --git a/sites/en/job-board/img/request-cycle.jpg b/sites/message-board/img/request-cycle.jpg similarity index 100% rename from sites/en/job-board/img/request-cycle.jpg rename to sites/message-board/img/request-cycle.jpg diff --git a/sites/en/intermediate-rails/img/show_post.png b/sites/message-board/img/show_post.png similarity index 100% rename from sites/en/intermediate-rails/img/show_post.png rename to sites/message-board/img/show_post.png diff --git a/sites/en/intermediate-rails/img/show_replies.png b/sites/message-board/img/show_replies.png similarity index 100% rename from sites/en/intermediate-rails/img/show_replies.png rename to sites/message-board/img/show_replies.png diff --git a/sites/en/intermediate-rails/img/static_home_page.png b/sites/message-board/img/static_home_page.png similarity index 100% rename from sites/en/intermediate-rails/img/static_home_page.png rename to sites/message-board/img/static_home_page.png diff --git a/sites/en/intermediate-rails/inline_replying_on_a_post.step b/sites/message-board/inline_replying_on_a_post.step similarity index 100% rename from sites/en/intermediate-rails/inline_replying_on_a_post.step rename to sites/message-board/inline_replying_on_a_post.step diff --git a/sites/en/intermediate-rails/install_devise.step b/sites/message-board/install_devise.step similarity index 85% rename from sites/en/intermediate-rails/install_devise.step rename to sites/message-board/install_devise.step index dc5d3272e..ee48163f1 100644 --- a/sites/en/intermediate-rails/install_devise.step +++ b/sites/message-board/install_devise.step @@ -4,7 +4,6 @@ message <<-MARKDOWN * The user should see a prompt to log in if they aren't logged in. * Once logged in, the user should see a static page with some kind of greeting. * The page should display the logged-in user's email address and a link to log out. -* You, the developer, should explain to a teacher, TA, or fellow student how Rails knows to render the home view. MARKDOWN end @@ -15,9 +14,9 @@ end discussion do message <<-MARKDOWN -* What is devise? -* What files did devise add to your rails app? -* Someone Who Knows: explain how to read the output of the command `rake routes`. What does it give you? How is it helpful? +* What is Devise? +* What files did Devise add to your rails app? +* Someone Who Knows: explain how to read the output of the command `rails routes`. What does it give you? How is it helpful? * How will you add the log out link? What's the syntax for a DELETE action? * You're going to be editing your application layout to add error messaging. If you haven't already, discuss the relationship between the application layout and all the other views you'll be creating. MARKDOWN @@ -27,7 +26,7 @@ tools_and_references do message <<-MARKDOWN * Devise: authentication magic! Learn more about it here: https://github.com/plataformatec/devise * In the readme, scroll down to "Getting Started." You'll need to add it to your gem file. If you don't remember how, ask your neighbor! - * You probably don't want to just start typing commands from the devise readme. You probably want to read through that whole section first. (i.e., don't skip bundle!) + * You probably don't want to just start typing commands from the Devise readme. You probably want to read through that whole section first. (i.e., don't skip bundle!) MARKDOWN end @@ -37,7 +36,7 @@ message <<-MARKDOWN * The convention for naming models is to capitalize the first letter, like: User. * When you run `rails generate devise:install`, you get five instructions for things to configure. 3 & 4 are good to do. * The routes file goes through many common types of routes in the comments. This is also your friend. -* Devise has some magic that will help you with your logout link. Run `rake routes` and look for a route that helps you sign out. +* Devise has some magic that will help you with your logout link. Run `rails routes` and look for a route that helps you sign out. * You'll probably want to show the current user's email address only if they are presently signed in, right? Devise has a helper for you. * Optional: any time you generate a model in rails, you can use Rails Console to look at that model's methods and behavior interactively. MARKDOWN diff --git a/sites/en/intermediate-rails/make_a_posts_index_page.step b/sites/message-board/make_a_posts_index_page.step similarity index 84% rename from sites/en/intermediate-rails/make_a_posts_index_page.step rename to sites/message-board/make_a_posts_index_page.step index 6f3557a45..017de5296 100644 --- a/sites/en/intermediate-rails/make_a_posts_index_page.step +++ b/sites/message-board/make_a_posts_index_page.step @@ -15,9 +15,9 @@ end tools_and_references do message <<-MARKDOWN -* RailsGuides - Listing All Posts: http://guides.rubyonrails.org/getting_started.html#listing-all-posts +* RailsGuides - Listing All Posts: http://guides.rubyonrails.org/v4.0/getting_started.html#listing-all-posts * Feel free to disregard the JSON stuff on this page, if you're so inclined. -* Bootstrap - Style that table! http://twitter.github.com/bootstrap/base-css.html#tables +* Bootstrap - Style that table! http://getbootstrap.com/css/#tables MARKDOWN end diff --git a/sites/en/intermediate-rails/make_it_pretty_with_bootstrap.step b/sites/message-board/make_it_pretty_with_bootstrap.step similarity index 95% rename from sites/en/intermediate-rails/make_it_pretty_with_bootstrap.step rename to sites/message-board/make_it_pretty_with_bootstrap.step index 12579dc7c..1b816f0c6 100644 --- a/sites/en/intermediate-rails/make_it_pretty_with_bootstrap.step +++ b/sites/message-board/make_it_pretty_with_bootstrap.step @@ -15,7 +15,7 @@ discussion do message <<-MARKDOWN * Chrome developer tools / Firefox Firebug plugin — how to use ’em! * What’s Bootstrap and (optional) why is everyone totally in love with it (or at least using it all over the place)? -* Maybe review the home/index.html.erb view file as it relates to the layouts/application.html.erb view file again, and where you might want to make some edits to take advantage of bootstrap. +* Maybe review the home/index.html.erb view file as it relates to the layouts/application.html.erb view file again, and where you might want to make some edits to take advantage of Bootstrap. * Someone should explain how erb works — you'll be using it to show the user email address in right side MARKDOWN end @@ -33,7 +33,7 @@ hints do message <<-MARKDOWN * Don't forget to read the readme! * There are a couple of Bootstrappy ways to move text around — look for "Component alignment" in the docs. -* Devise has a helper method for accessing the current user - go back to the devise readme to find it. +* Devise has a helper method for accessing the current user - go back to the Devise readme to find it. MARKDOWN end diff --git a/sites/message-board/message-board.step b/sites/message-board/message-board.step new file mode 100644 index 000000000..68544832d --- /dev/null +++ b/sites/message-board/message-board.step @@ -0,0 +1,42 @@ +message <<-MARKDOWN +## Assumptions made by this curriculum +* You’ve gone through the standard RailsBridge installfest and have successfully completed the Get a Sticker step. +* You’ve gone through the RailsBridge Suggestotron curriculum and the Job Board curriculum at least once before, or maybe a couple of times, or maybe you feel decently comfortable with Rails for some other reason. +* You want to learn more Rails!!! + +## Goals +* Make a thing! +* Understand what the models, views, and controllers of a Rails app do and how they work together. +* Get more comfortable using error messages as guideposts and not as scary things. + +## What’s Going to Happen? +* We’re going to build a message board system, where there are posts on the front page and you click through to see the original post plus discussion below. + +* We’ve divided this into challenges: + * Challenge 1: Create a new rails app with a static home page + * Challenge 2: Install Devise + * Challenge 3: Make it pretty with Bootstrap + * Challenge 4: Add pages to create and look at individual posts + * Challenge 5: Make a posts index page + * Challenge 6: Add replying + * Challenge 7: Inline replying on a post + * Challenge ∞: Other features of your choice + +* Each time you get your app into a functional state, before adding any more features, COMMIT TO GIT! The new features will probably break things, which is neat, but you’ll want to be able to roll back to a prior version if necessary. + +MAJORLY IMPORTANT NOTE: We called the sections challenges because they are challenging! This curriculum will be most fun as a collaboration — talk things through with your teacher, TAs, and other students. This is a very different style of curriculum than Suggestotron, so don’t be discouraged if you aren't quite sure what to do next. + +## How to use this curriculum +* Challenges are the big chunks of stuff to work on at a given time. These are gated by requirements — once you (or your group) has completed a set of requirements, go on to the next set. + +* Requirements in this curriculum are not entirely divorced from what a requirement is in the agile software development methodology — things that should be in the application as defined by whoever is designing/deciding things about the product. Except here, we’ve also thrown in some non-application requirements, like the ability to explain a concept to a peer. + +* Discussions are led by the teacher; this is the closest this curriculum gets to lecture-y teaching. + +* Hints are what they sound like, as are Tools & References. + + +* Teachers only!: there's a teaching guide at http://bit.ly/int-railsbridge-guide +MARKDOWN + +next_step "create_a_new_rails_app_with_a_static_home_page" diff --git a/sites/en/intermediate-rails/mvc_overview.md b/sites/message-board/mvc_overview.md similarity index 100% rename from sites/en/intermediate-rails/mvc_overview.md rename to sites/message-board/mvc_overview.md diff --git a/sites/en/intermediate-rails/the_request_cycle.md b/sites/message-board/the_request_cycle.md similarity index 100% rename from sites/en/intermediate-rails/the_request_cycle.md rename to sites/message-board/the_request_cycle.md diff --git a/sites/en/ruby/arrays.step b/sites/ruby/arrays.step similarity index 96% rename from sites/en/ruby/arrays.step rename to sites/ruby/arrays.step index e7da6fde3..482da904d 100644 --- a/sites/en/ruby/arrays.step +++ b/sites/ruby/arrays.step @@ -96,7 +96,7 @@ IRB end further_reading do - a "Ruby's documentation for Array", href: 'http://www.ruby-doc.org/core-1.9.3/Array.html' + a "Ruby's documentation for Array", href: 'http://ruby-doc.org/core-2.2.0/Array.html' end next_step 'hashes' diff --git a/sites/en/ruby/booleans.step b/sites/ruby/booleans.step similarity index 88% rename from sites/en/ruby/booleans.step rename to sites/ruby/booleans.step index 1e63dc2d2..03c5631d3 100644 --- a/sites/en/ruby/booleans.step +++ b/sites/ruby/booleans.step @@ -109,9 +109,8 @@ explanation do end further_reading do - message "Some languages offer wiggle room about what evaluates to true or false. Ruby has very little. See [What's Truthy and Falsey in Ruby?](https://gist.github.com/jfarmer/2647362)" - message "[What's Truthy and Falsey in Ruby?](https://gist.github.com/jfarmer/2647362) has a more detailed walkthrough of booleans." - message "Ruby documentation for [true](http://www.ruby-doc.org/core-2.1.0/TrueClass.html) and [false]](http://www.ruby-doc.org/core-2.1.0/TrueClass.html)" + message "Some languages offer wiggle room about what evaluates to true or false. Ruby has very little. See [What's Truthy and Falsey in Ruby?](https://gist.github.com/jfarmer/2647362) for a more detailed walkthrough of booleans." + message "Ruby documentation for [true](http://ruby-doc.org/core-2.2.0/TrueClass.html) and [false](http://ruby-doc.org/core-2.2.0/FalseClass.html)" end next_step "conditionals" diff --git a/sites/en/ruby/classes.step b/sites/ruby/classes.step similarity index 100% rename from sites/en/ruby/classes.step rename to sites/ruby/classes.step diff --git a/sites/en/ruby/command_line.step b/sites/ruby/command_line.step similarity index 99% rename from sites/en/ruby/command_line.step rename to sites/ruby/command_line.step index 63be32941..d691bb1fe 100755 --- a/sites/en/ruby/command_line.step +++ b/sites/ruby/command_line.step @@ -103,6 +103,7 @@ step do console <<-LINES cd ~ ls +cd workspace cd rai LINES message '... and hit `TAB`.' @@ -159,4 +160,4 @@ tip do message "If your workshop is using a Virtual Machine (ask a TA!) now is the time to take a detour to [Using Virtual Machines](using_virtual_machines)" end -next_step 'irb' \ No newline at end of file +next_step 'irb' diff --git a/sites/en/ruby/conditionals.step b/sites/ruby/conditionals.step similarity index 100% rename from sites/en/ruby/conditionals.step rename to sites/ruby/conditionals.step diff --git a/sites/en/ruby/datatypes.step b/sites/ruby/datatypes.step similarity index 100% rename from sites/en/ruby/datatypes.step rename to sites/ruby/datatypes.step diff --git a/sites/en/ruby/functions.step b/sites/ruby/functions.step similarity index 100% rename from sites/en/ruby/functions.step rename to sites/ruby/functions.step diff --git a/sites/en/ruby/hashes.step b/sites/ruby/hashes.step similarity index 96% rename from sites/en/ruby/hashes.step rename to sites/ruby/hashes.step index f02c3b9c9..d1dfbd1f6 100644 --- a/sites/en/ruby/hashes.step +++ b/sites/ruby/hashes.step @@ -44,7 +44,7 @@ explanation do end further_reading do - a "Ruby's documentation for Hash", href: 'http://www.ruby-doc.org/core-1.9.3/Hash.html' + a "Ruby's documentation for Hash", href: 'http://ruby-doc.org/core-2.2.0/Hash.html' end next_step 'loops' diff --git a/sites/en/ruby/how_to_write_a_program.step b/sites/ruby/how_to_write_a_program.step similarity index 97% rename from sites/en/ruby/how_to_write_a_program.step rename to sites/ruby/how_to_write_a_program.step index ad6910dce..070bf4bc0 100644 --- a/sites/en/ruby/how_to_write_a_program.step +++ b/sites/ruby/how_to_write_a_program.step @@ -91,9 +91,9 @@ step do end step do - message "The problem with our program currently is that it is too clunky. Whenever you write code, think about how you want it to be used - either by you, a user, or even another programmer that might want to adapt your work further down the line. We should strive to write code that is readable, and mainainable." + message "The problem with our program currently is that it is too clunky. Whenever you write code, think about how you want it to be used - either by you, a user, or even another programmer that might want to adapt your work further down the line. We should strive to write code that is readable, and maintainable." - message "Right now, our program is one big method, and that is not very good for readability or maintability. Lets organize this a little more thoughtfully, and make a class that contains this behavior." + message "Right now, our program is one big method, and that is not very good for readability or maintainability. Lets organize this a little more thoughtfully, and make a class that contains this behavior." type_in_file 'roller.rb', <<-'CONTENTS' class Die diff --git a/sites/en/ruby/input_and_output.step b/sites/ruby/input_and_output.step similarity index 100% rename from sites/en/ruby/input_and_output.step rename to sites/ruby/input_and_output.step diff --git a/sites/en/ruby/irb.step b/sites/ruby/irb.step similarity index 100% rename from sites/en/ruby/irb.step rename to sites/ruby/irb.step diff --git a/sites/en/ruby/loops.step b/sites/ruby/loops.step similarity index 100% rename from sites/en/ruby/loops.step rename to sites/ruby/loops.step diff --git a/sites/en/ruby/nil.step b/sites/ruby/nil.step similarity index 93% rename from sites/en/ruby/nil.step rename to sites/ruby/nil.step index 4ed3b85c7..eb7f32490 100644 --- a/sites/en/ruby/nil.step +++ b/sites/ruby/nil.step @@ -55,7 +55,7 @@ IRB message "What happened?" irb "word.class" message "`word` was set to nil. Let's look at the alphabetized list of methods the Nil class has." - irb "word.method.sort" + irb "word.methods.sort" message "The error message told us Nil doesn't have a method called upcase." end @@ -69,7 +69,7 @@ word.nil? word = nil word.nil? # Remember, two equals signs asks if something is equal -word == nil? +word == nil IRB message "What's going on here?" @@ -89,7 +89,7 @@ explanation do end further_reading do - message "[Nil Class documentation](http://www.ruby-doc.org/core-2.1.0/NilClass.html)" + message "[Nil Class documentation](http://ruby-doc.org/core-2.2.0/NilClass.html)" end diff --git a/sites/en/ruby/numbers_and_arithmetic.step b/sites/ruby/numbers_and_arithmetic.step similarity index 98% rename from sites/en/ruby/numbers_and_arithmetic.step rename to sites/ruby/numbers_and_arithmetic.step index b52de8fb2..710476372 100644 --- a/sites/en/ruby/numbers_and_arithmetic.step +++ b/sites/ruby/numbers_and_arithmetic.step @@ -14,7 +14,7 @@ TRYME message "You'll notice that `1.class` and `1.0.class` are actually 2 different kinds of objects." message "With that in mind, let's see how that plays into performing - arithmetic opertions." + arithmetic operations." end step do diff --git a/sites/en/ruby/overview:_building_blocks.step b/sites/ruby/overview:_building_blocks.step similarity index 100% rename from sites/en/ruby/overview:_building_blocks.step rename to sites/ruby/overview:_building_blocks.step diff --git a/sites/en/ruby/overview:_organizing.step b/sites/ruby/overview:_organizing.step similarity index 100% rename from sites/en/ruby/overview:_organizing.step rename to sites/ruby/overview:_organizing.step diff --git a/sites/en/ruby/ruby.step b/sites/ruby/ruby.step similarity index 96% rename from sites/en/ruby/ruby.step rename to sites/ruby/ruby.step index f3ed0ef52..b28742bb4 100755 --- a/sites/en/ruby/ruby.step +++ b/sites/ruby/ruby.step @@ -20,7 +20,7 @@ We're going to be working with: * A text editor of your choice Everything should be set up the night before during our -Installfest. Please +Installfest. Please ensure you have everything working _before_ you show up for the workshop. You can verify that you have everything working by trying this out in your terminal: diff --git a/sites/en/ruby/running_programs_from_a_file.step b/sites/ruby/running_programs_from_a_file.step similarity index 97% rename from sites/en/ruby/running_programs_from_a_file.step rename to sites/ruby/running_programs_from_a_file.step index 2410536ec..7903fc23c 100644 --- a/sites/en/ruby/running_programs_from_a_file.step +++ b/sites/ruby/running_programs_from_a_file.step @@ -10,7 +10,7 @@ A text editor is a word processor that saves in plain text format. This is unlike Word, which saves files in a special format that only Word can read. We may have recommended a particular text editor during the Installfest, such as -SublimeText. You can use any editor you like so long as it saves plain text. +Atom. You can use any editor you like so long as it saves plain text. It'll helpful to keep your text editor running, since you'll be coming back to it often. @@ -64,7 +64,7 @@ puts 'This code is in a file!' some_variable = 19 puts "I stored a variable with the value #\{some_variable\}!" CONTENTS - message "**my_program.rb** was saved in plain text - you see exactlty what you + message "**my_program.rb** was saved in plain text - you see exactly what you typed. If this were a Word document, you would see a screenful of weird characters and formatting, and you would get errors when you ran it." end diff --git a/sites/en/ruby/strings.step b/sites/ruby/strings.step similarity index 96% rename from sites/en/ruby/strings.step rename to sites/ruby/strings.step index 205bffe5a..30ec3164a 100644 --- a/sites/en/ruby/strings.step +++ b/sites/ruby/strings.step @@ -91,7 +91,7 @@ explanation do end further_reading do - a "Ruby's documentation for String", href: 'http://www.ruby-doc.org/core-1.9.3/String.html' + a "Ruby's documentation for String", href: 'http://ruby-doc.org/core-2.2.0/String.html' end next_step 'input_and_output' diff --git a/sites/en/ruby/summary:_basics.step b/sites/ruby/summary:_basics.step similarity index 100% rename from sites/en/ruby/summary:_basics.step rename to sites/ruby/summary:_basics.step diff --git a/sites/en/ruby/summary:_tools.step b/sites/ruby/summary:_tools.step similarity index 100% rename from sites/en/ruby/summary:_tools.step rename to sites/ruby/summary:_tools.step diff --git a/sites/en/ruby/symbols.step b/sites/ruby/symbols.step similarity index 93% rename from sites/en/ruby/symbols.step rename to sites/ruby/symbols.step index 427572d38..3eba3993d 100644 --- a/sites/en/ruby/symbols.step +++ b/sites/ruby/symbols.step @@ -95,9 +95,9 @@ explanation do end further_reading do - message "[The Difference Between Ruby Symbols and Strings ](http://www.robertsosinski.com/2009/01/11/the-difference-between-ruby-symbols-and-strings/)" + message "[The Difference Between Ruby Symbols and Strings ](http://www.reactive.io/tips/2009/01/11/the-difference-between-ruby-symbols-and-strings)" message "[The Ruby_Newbie Guide to Symbols](http://www.troubleshooters.com/codecorn/ruby/symbols.htm)" - message "[The Ruby documentation says](https://www.ruby-lang.org/en/documentation/ruby-from-other-languages/): *If you\’re in doubt whether to use a Symbol or a String, consider what\’s more important: the identity of an object (i.e. a Hash key), or the contents.*" + message "[The Ruby documentation says](https://www.ruby-lang.org/en/documentation/ruby-from-other-languages): *If you\’re in doubt whether to use a Symbol or a String, consider what\’s more important: the identity of an object (i.e. a Hash key), or the contents.*" end next_step 'working_with_collections' \ No newline at end of file diff --git a/sites/en/ruby/using_virtual_machines.step b/sites/ruby/using_virtual_machines.step similarity index 100% rename from sites/en/ruby/using_virtual_machines.step rename to sites/ruby/using_virtual_machines.step diff --git a/sites/en/ruby/variables.step b/sites/ruby/variables.step similarity index 100% rename from sites/en/ruby/variables.step rename to sites/ruby/variables.step diff --git a/sites/en/ruby/what_is_ruby.step b/sites/ruby/what_is_ruby.step similarity index 100% rename from sites/en/ruby/what_is_ruby.step rename to sites/ruby/what_is_ruby.step diff --git a/sites/en/ruby/working_with_collections.step b/sites/ruby/working_with_collections.step similarity index 100% rename from sites/en/ruby/working_with_collections.step rename to sites/ruby/working_with_collections.step diff --git a/sites/testing-rails-applications/additional_concepts.step b/sites/testing-rails-applications/additional_concepts.step new file mode 100644 index 000000000..d064404f2 --- /dev/null +++ b/sites/testing-rails-applications/additional_concepts.step @@ -0,0 +1,65 @@ +message <<-MARKDOWN + All right, you're almost at the end! Below are a few additional concepts of testing that may helpful in your future testing adventures. + + ### Doubles and stubs + Doubles are simpler objects that represent objects from your application. + + ```ruby + orange = double(:orange) + ``` + + If you instantiate that double in your test file, you have access to orange in your tests to test with. This is instead of creating an entire Orange model in ActiveRecord. If you need to create many different test objects with different properties, FactoryGirl is a great gem for that purpose and will allow persistence or in-memory object creation, depending on your testing situation. + + Stubs can be used to dictate what is returned when a method is called on a double. + + ```ruby + orange.stub(:name).and_return("Florida Orange") + ``` + + So, when you write a test that calls the title attribute of the orange double, you'll always get back the string Florida Orange. Got it? Good! + + ### Spies + With spies, we are not talking about espionage... at least, not in relation to testing :) Spies can be used to verify whether a method was called on an object a certain number of times. + For instance (assume you already have the orange double from above): + + ```ruby + orange = spy('orange') + orange.name + expect(orange).to receive(:name) + orange.name + expect(orange).to receive(:name).exactly(2).times + ``` + + Obviously, this is a simplified case. Instead of orange.name, you might have a complicated method that executes many functions internally and that's where spies can come in handy; they can check easily whether one specific method was called. Capiche? Ok, let's keep on trucking! + + ### Webmock + What if your app relies on third-party services or applications, known amongst friends as application programming interfaces or APIs? Well, it seems like APIs should also be tested but should our test suite really be dependent on someone else? NOPE! What if the API goes down? Or is slow? Welcome to the stage: Webmock! + Webmock is a gem that stubs out external HTTP requests. Once you include the gem, bundle install, and include the below code snippet in your spec helper file (which is included in every test file), you're good to go. +MARKDOWN + +source_code :ruby, <<-RUBY + require 'webmock/rspec' + WebMock.disable_net_connect!(allow_localhost: true) +RUBY + +message <<-MARKDOWN + Then, you can start stubbing out API requests in your spec helper file. Let's write an example for Bitly, a service that shortens long URLs. This may come in handy when you want to provide external links to info pages about the different types of oranges in your orange tree but the links are too long to display on a line. +MARKDOWN + +source_code :ruby, <<-RUBY + RSpec.configure do |config| + config.before(:each) do + stub_request(:get, /api.bitly.com.v3.shorten/). + with(headers: {'Accept'=>'*/*', 'User-Agent'=>'Ruby'}). + to_return(status: 200, body: "stubbed response", headers: {}) + end + end +RUBY + +message <<-MARKDOWN + So, if you write any tests in your test files that call the Bitly API, then the response will be whatever you defined above. The test will prevent the actual API request from being made. Pretty cool, huh? + + Awesome, you are now equipped with a license to TEST! Go forth and create doubles, stubs, and spies in your app (at least one of each and have a TA verify). And, if you have time for a final challenge (optional), click below... +MARKDOWN + +next_step "final_challenge" diff --git a/sites/testing-rails-applications/final_challenge.step b/sites/testing-rails-applications/final_challenge.step new file mode 100644 index 000000000..5e1655b92 --- /dev/null +++ b/sites/testing-rails-applications/final_challenge.step @@ -0,0 +1,8 @@ +message <<-MARKDOWN + +Congratulations! Take a second and give yourself a pat on your back. You've come far, my young padawan. This is the final test (no pun intended haha!) :) + +# The final challenge +Essentially, you will clone this repo (https://github.com/akanshmurthy/railsbridge-testfest) that has broken tests and fix all the broken tests. The broken tests will consist of a variety of different types of tests, incorporating everything you have learned thus far. Good luck, keep calm, and test on! + +MARKDOWN diff --git a/sites/testing-rails-applications/img/rails-test-types.png b/sites/testing-rails-applications/img/rails-test-types.png new file mode 100644 index 000000000..3cd2b810d Binary files /dev/null and b/sites/testing-rails-applications/img/rails-test-types.png differ diff --git a/sites/testing-rails-applications/testing-rails-applications.step b/sites/testing-rails-applications/testing-rails-applications.step new file mode 100644 index 000000000..abad6177d --- /dev/null +++ b/sites/testing-rails-applications/testing-rails-applications.step @@ -0,0 +1,48 @@ +message <<-MARKDOWN +### Goal + +To teach you testing we are going to start with the basics and have you learn by doing through small challenges and then a final large. + +When you have completed this curriculum you should understand: + +* what tests are +* why they're used +* how they're used +* what types of tests exist +* what types of frameworks exist +* some additional concepts in testing such as doubles, stubs, spies, and Webmock +* how to write tests +* how to break tests +* how to fix tests + +### Requirements + +We're going to be working with: + +* Ruby on Rails +* A command line program +* A text editor of your choice + +MARKDOWN + +tip "This is not a self-paced curriculum. You should use the discussion sections on each page to make sure everyone is together!" + +message <<-MARKDOWN +### Notable things + + As you might have noticed, we're assuming you've already been to a RailsBridge workshop before or have otherwise already explored a Rails app, and are ready for deeper knowledge. + +MARKDOWN + +important "This curriculum is written for Rails 5. Things will get awkward / broken if you're using an earlier version of Rails, so if you skipped the Installfest, you need to upgrade to Rails 5 now." + +message <<-MARKDOWN +### Tips for everyone + + * When adding code, it's awesome for students to walk through the code line by line and say out loud what is happening. (i.e., "The string is being stored in the instance variable" or "The method `snorgle` is being defined"). If you do it every time, you'll get really comfortable with the vocabulary of Rails! + * Error messages are your friend! Read them carefully, and practice understanding what Rails is telling you. Seeing an error and just diving back into your code is a natural reaction, but stop! Then read, think, and talk about what the error means before fixing it. +MARKDOWN + +insert '../intro-to-rails/working_effectively_and_efficiently' + +next_step "what_are_tests" diff --git a/sites/testing-rails-applications/testing_frameworks.step b/sites/testing-rails-applications/testing_frameworks.step new file mode 100644 index 000000000..5e8710b8a --- /dev/null +++ b/sites/testing-rails-applications/testing_frameworks.step @@ -0,0 +1,133 @@ +message <<-MARKDOWN +# What's a testing framework? +A testing framework is an execution environment for automated tests. Testing frameworks help teams organize their test suites and in turn +help improve the efficiency of testing. + +# Types of testing frameworks +There are many testing frameworks that work great. Minitest is the default testing framework in Rails 5. However, we will be using the RSpec testing framework instead. + + +# RSpec +## How to set up RSpec in Rails + +First, create a new Rails app. + +
            +rails new testapp
+
            +
            + +Then, add rspec-rails to both the :development and :test groups in the Gemfile: + +```ruby +group :development, :test do + gem 'rspec-rails', '~> 3.4' +end +``` + +Download and install by running: + +
            +bundle install
+
            +
            + +Initialize the spec/ directory (where specs will reside) with: + +
            +rails generate rspec:install
+
            +
            + +This command will add the spec helper, rails helper, and .rspec configuration files. + +Use the rspec command to run your specs: + +
            +bundle exec rspec
+
            +
            + +By default, the above code will run all spec files in the spec directory. + +To run only a subset of these specs use the following command: + +
            +# Run only a specific folder name
+bundle exec rspec spec/folder_name
+
+# Run only specs for a specific type of test such as the post controller
+bundle exec rspec spec/controllers/post_controller_spec.rb
+
            +
            + +## RSpec Basics + +```ruby +RSpec.describe Tree do + it "is able to age by 1 year increments" do + orange_tree = Tree.new + orange_tree.age + expect(orange_tree.age).to eq(1) + end +end +``` + +The 'describe' and 'it' methods come from rspec-core. The Tree class would be from your code. You can think of 'describe' as a header to describe which class you are testing and 'it' as a string/subheader that states what specifically you are testing in the Tree class. Note: you may or may not need the RSpec in front of the describe depending on your RSpec version. + +The last line of the example expresses an expected outcome. If orange_tree.age == 1, then the example passes. If not, it fails with a message like: + +
            +
            +expected: #< Tree @age=1 >
+     got: #< Tree @age=0 >
+
            +
            + +## Matchers +Remember our example in the RSpec Basics section above? The 'to eq' is a matcher! RSpec has many built-in matchers. You can think of them as ways to equate or check certain values or expressions to what you think or expect they would "match" to. In our example, we are saying that we expect orange_tree's age to equal an integer of 1. + +Check out the other built-in matchers! +https://www.relishapp.com/rspec/rspec-expectations/docs/built-in-matchers + +# minitest +In case you were curious to see how tests are written in minitest. Minitest also allows you to write tests in 'expectation style' which is very similar to how RSpec tests are written. + +```ruby +class TestTree < Minitest::Test + def setup + @orange_tree = Tree.new + @orange_tree.age + end + + def test_age_by_one_year_increments + assert_equal 1, @orange_tree.age + end +end +``` + +To run the test enter the following in Terminal/Command Prompt: + +
            +
            +ruby tree_test.rb
+
            +
            + +Once you run the test this is how the test looks like: +
            +
            +$ ruby tree_test.rb
+Run options: --seed 30102
+
+#Running:
+
+.
+Finished in 0.000980s, 1020.4082 runs/s, 1020.4082 assertions/s.
+1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
+
            +
            + +MARKDOWN + +next_step "types_of_tests" diff --git a/sites/testing-rails-applications/types_of_tests.step b/sites/testing-rails-applications/types_of_tests.step new file mode 100644 index 000000000..8cd8c7539 --- /dev/null +++ b/sites/testing-rails-applications/types_of_tests.step @@ -0,0 +1,148 @@ +message <<-MARKDOWN + Now, that you know what tests are, let's discuss the different types of tests! + + In your Rails app, you have models, views, and controllers. It should be no surprise that tests can be written for models, views, and controllers. + + As you learned in the previous section, tests are used to verify that your code is working as expected. So, a couple things we can test right off the bat are that a tree should have certain associations and validations. Let's start by writing some model tests also known as unit tests! This link might come in handy to remember singular vs. plural Rails conventions: https://alexander-clark.com/blog/rails-conventions-singular-or-plural/ +MARKDOWN + +steps do + step do + message "First, create a orange model. By creating the model, a spec file will also be added to the models folder of the spec folder. Type this in the terminal:" + + console_without_message "rails generate model Orange" + + message "Then, run the migration to actually create the oranges table." + + console_without_message "bundle exec rake db:migrate" + end + step do + message "Then, run rspec." + + console_without_message "bundle exec rspec" + + message "You will see a report with one pending test. When you generated your Orange model, RSpec also generated a matching spec file. Copy the test below into spec/models/orange_spec.rb and run 'bundle exec rspec' on the terminal again." + + + source_code :ruby, <<-RUBY + RSpec.describe Orange, :type => :model do + context 'ActiveRecord associations' do + it 'belongs to tree' do + expect(Orange.reflect_on_association(:tree).macro).to be (:belongs_to) + end + end + end + RUBY + + message "Run 'bundle exec rspec'. This test fails! Let's add an associaton to our model. Add a belongs_to association to orange.rb:" + + source_code :ruby, <<-RUBY + class Orange < ActiveRecord::Base + belongs_to :tree + end + RUBY + + message "Run 'bundle exec rspec' and now you should see one passing test! That's an example of an association test. Let's modify that test to fail. Then, run 'bundle exec rspec' and see what happens. Cool! Let's revert back to the passing test." + end + + step do + + message "Now let's write a has_many association test for the relationship between the Tree model and the Orange model! (hint: this doesn't exist yet so you'll have to create the model and migrate!)" + + message "On to controller tests! Just like the Orange model, you will create the OrangesController, which will also create spec files in the /spec/controllers folder of your app." + end + + step do + message "First, create the oranges controller and relevant spec files by typing this in the terminal:" + + console_without_message "rails generate controller Oranges" + end + step do + message "Then, run RSpec." + + console_without_message "bundle exec rspec" + + message "You should see a report with some passing tests but those are just the model tests you wrote. So, let's add some controller tests! Copy the below test, paste it into the oranges controller spec file, create the relevant view files and then run 'bundle exec rspec' on the terminal again." + + source_code :ruby, <<-RUBY + RSpec.describe OrangesController do + context '#index' do + it "renders the index view" do + get :index + expect(response).to render_template("index") + end + + it "renders html" do + process :index, method: :get + expect(response.content_type).to eq "text/html" + end + end + end + RUBY + + message "You should see two failing tests. Hint: You'll need to add a route, index action, and a view. Not sure where to start? Read the errors in your failing tests for a hint. Run 'bundle exec rspec' after each change until both tests pass." + + message "Note: as you write the controller tests, you may be prompted to install a missing gem called 'rails-controller-testing' to use the assert_template method. If prompted, please add it to your Gemfile and do a bundle install!" + end + + step do + message "Now, write another controller test for the new action (hint: you might need to look up what a mock is)." + end + + step do + message <<-MARKDOWN + Last but not least: view tests! Below is an short snippet of a possible Orange show HTML page you can create in your app: + MARKDOWN + + source_code :erb, <<-ERB +
            + Orange title: <%= @orange.name %> +
            +
            + Orange tree id: <%= @orange.tree_id %> +
            + ERB + + message <<-MARKDOWN + So, based on the orange you create, the show page should render HTML with the orange's name and tree id. Let's verify that with a few tests. + MARKDOWN + + message "First, create a views folder in the spec folder. Then, create an oranges folder in the views folder. Lastly, create an oranges view spec file in the oranges folder. Type these commands in the terminal:" + + console_without_message "mkdir spec/views" + console_without_message "mkdir spec/views/oranges" + console_without_message "cd spec/views/oranges" + console_without_message "touch show.html.erb_spec.rb" + end + step do + message "Change directory back to the root directory of your app. Then, run rspec." + + console_without_message "cd ../../.." + console_without_message "bundle exec rspec" + + message "You should see a report with some passing tests but those are just the model and controller tests you wrote. So, let's add some view tests!" + message "We're going to up the ante a bit here and NOT show you an example :) Google and StackOverflow are your friends here!" + end +end + +message <<-MARKDOWN + Once, you have written some passing view tests, take a deep breath and pat yourself on the back! Testing is hard. But, it's critical in making sure software is stable and functional. + + So, I fibbed a little bit. There are more types of tests than just MVC tests. One of these other important tests is called an integration test. As the name indicates, it tries to assess how well multiple components in an app interact and is written in Rails as a feature spec test. Typically, these tests simulate a user and a user's actions to test end-to-end functionality. + + Here's a diagram from Thoughtbot that may help with understanding how integration tests fit in: + +MARKDOWN + +img src: "img/rails-test-types.png", alt: "Thoughtbot's diagram of types of Rails tests" + +message <<-MARKDOWN + Capybara is a common framework used to write integration tests in Rails. It integrates nicely with RSpec such that you can use the same kind of test language to write integration tests. + + As an added bonus for this section, write an integration test :) + + Use the following link to get started: https://www.sitepoint.com/basics-capybara-improving-tests/ + +MARKDOWN + +next_step "additional_concepts" diff --git a/sites/testing-rails-applications/what_are_tests.step b/sites/testing-rails-applications/what_are_tests.step new file mode 100644 index 000000000..de61e16a6 --- /dev/null +++ b/sites/testing-rails-applications/what_are_tests.step @@ -0,0 +1,25 @@ +message <<-MARKDOWN + +Tests are not exams like the ones you have to take in school. Rather, tests are ways of testing code to see if it is performing the way we expect it to behave. Pretty easy, right? + +# Example + For example, let's say we wanted to create a program that models an orange tree because nature is awesome. Well, what defines an orange tree to us? Is it safe to say that we need at least two objects, an orange object and a tree object? Can our tree mature and bear more fruit at a certain age? Could our oranges ripen and fall from the tree? Sounds like the list can become lengthy, right? Let's stop here for a few minutes and see what we need to fulfill these user stories. + +# What We Need To Test? +Remember that we need to model an orange and a tree. So, we know that there are two objects that need to be created. + +We could say that the tree will not bear fruit until it matures at one year of age and then it will bear X number of oranges. We would need a test to test if the tree ages and a test to see if the tree has created X number of oranges once it has matured. + +How do we determine if an orange is ripe? Well, we can have an orange age and if it is at least 30 days old, then it is ripe and will fall from the tree. We would need to write a test to check for ripeness and a test to check if it falls at ripeness. + +# Why Is It Important That We Test? +You could think of tests as a requirement list. Every time a change is made we want to test to see if our code still meets those requirements. For example, as our program becomes increasingly complex and we want to have our tree to have a certain lifespan, would it make sense for our tree to continue to create oranges after exceeding that lifespan? + +A situation like our tree's lifespan is a prime example of why tests are important. As our program becomes more complex over time with new code added, the tests tell us that the new code negatively affected prior expectations of the behavior of the code. Tests can help keep the original behavior of the code and prevent new bugs from appearing. + +# Test Driven Development +Test-driven development (TDD) is a development technique where you must first write a test that fails before you write new functional code. TDD is a great way to develop your program! Add a test, run all tests, write code, run tests, and then refactor code! + +MARKDOWN + +next_step "testing_frameworks" diff --git a/sites/workshop/activities.md b/sites/workshop/activities.md new file mode 100644 index 000000000..7b31a627c --- /dev/null +++ b/sites/workshop/activities.md @@ -0,0 +1,139 @@ +These activities are mostly taken from [Sharon Bowman](http://bowperson.com/)'s excellent books: [The Ten-Minute Trainer](http://www.amazon.com/Ten-Minute-Trainer-Teach-Quick-Stick/dp/0787974420/) and [Training From the Back of the Room](http://www.amazon.com/Training-Back-Room-Aside-Learn/dp/0787996629/). For each activity, **print out instructions and put them up on a wall**. These are ideas and options: don't try and do them all! :) + +# Warm-up exercises (a week before the workshop) + +## What you know, and what’s your plan + +Send students an email, asking them two of these questions. + +* What are three things you already know about programming? (Small things or big things! Who does it? What can you make? Why do people write software?) +* What do you want to learn? +* What do you plan to do with what you learn? + +# Just before the workshop begins + +## Share your answers + +* Grab a pen and sticky notes. +* Write down your answers to the warm-up questions. +* Swap your answers with someone else. +* Swap again with someone new. +* Put the sticky notes up on the wall. + +## What's in it for me? + +* Grab a pen and sticky notes. +* Write down what you want to learn today. +* Find someone new and share your answer with them. +* Put the sticky notes up on the wall. +* Come back to them at the end of the day. + +## What does a developer look like? + +* Grab a pen and sticky notes. +* Write down answers to: "What does a developer look like?" +* Take a card from the table and find out the answer. +* Compare your earlier answers to the person you found on the internet. + +The cards are clues to finding developers (e.g. who wrote "Designing for Performance"). The answers are developers who are from groups of people that are underrepresented in tech. + +## What does an engineer look like? + +* Grab a pen and sticky notes. +* Write down answers to: "What does an engineer look like?" +* Look up #ILookLikeAnEngineer and find an awesome person there. +* Introduce them (and yourself!) to someone in the room. + +## What makes a good Web App? + +* Grab a pen and sticky notes. +* Write down at least three things that a good web app needs. + +## Find Your Match + +* Take an index card from the table. +* Find someone with the same card as you. +* Together, find out what the technical term means. +* One of the back of one of the cards, write the explanation down, and stick the cards up on the wall for other to read. + +The cards have tech terms on them, such as: HTML, CSS, JavaScript, front-end, Ruby, Rails, Model, View, Controller, MVC. Alternate version: cards have just acronyms: HTML, CSS, JS, MVC, DB, SQL. + +## Match It Up + +* With a partner, grab a deck of index cards. +* Match up cards with their definitions. +* Check your answers. + +The deck contains: + +* Ruby +* Rails +* Git +* Heroku +* Sublime Text +* Terminal / Command Prompt +* Browser + +These are in the opening presentation, and students have been using these things during the InstallFest. This activity helps them see how their learning is progressing. + +# During the workshop + +## Good, bad, change + +* Grab a pen and a card. +* Write down **one good thing**. +* Give your card to someone and take a card with one good thing on. +* Write down **one bad thing**. +* Give your card to someone and take a card with one bad thing on. +* Write down **one thing you would change**. + +This can be for the InstallFest or the workshop in general. + +## Pass That Card + +* Grab a pen and a card. +* Write down **a question you have**. +* Give your card to someone and take a card with a question on. +* Write down **an answer to the question on the card**. +* Give your card to someone and take a card with an answer on. +* Write down **agree or disagree**. + +## What Three Things + +* Grab a pen and sticky notes. +* Write down three things you've learned this morning, one per sticky note. +* Discuss them with a partner. + +## Take A Stand + +* Stand on a line from not so confident to very confident. +* Pair up with someone from the other end of the line and discuss any problems you've had, and get ideas for solutions. + +## Three things about Ruby or Rails + +* Grab a pen and sticky notes. +* Write down one thing that you can do now. +* Write down one thing you're still unsure about. +* Write down one thing you'd like to learn. + +## Three most important things + +* Write down the 3 most important things you learned so far. +* Discuss your list with 3 people. + +# Ending the workshop + +## Hey, buddy + +* Grab a pen and a card. +* Write down a SMART goal on the front of a card. +* Write down your name and email address on the back of a card. +* Swap cards with a buddy, and agree to email each other during the next week. + +A SMART goal is **Specific**, **Measurable**, **Attainable**, **Relevant**, **Time-bound**. + +## Valuable + +* Grab a pen and a card. +* On your own, write down the most valuable thing you've learned today. +* In groups of 3 or more, discuss your cards. diff --git a/sites/en/workshop/beginners.mw b/sites/workshop/beginners.mw similarity index 100% rename from sites/en/workshop/beginners.mw rename to sites/workshop/beginners.mw diff --git a/sites/en/workshop/closing.deck.md b/sites/workshop/closing.deck.md similarity index 100% rename from sites/en/workshop/closing.deck.md rename to sites/workshop/closing.deck.md diff --git a/sites/en/workshop/command_prompt.mw b/sites/workshop/command_prompt.mw similarity index 100% rename from sites/en/workshop/command_prompt.mw rename to sites/workshop/command_prompt.mw diff --git a/sites/en/workshop/diagrams.mw b/sites/workshop/diagrams.mw similarity index 91% rename from sites/en/workshop/diagrams.mw rename to sites/workshop/diagrams.mw index 3651c174a..f32b9112e 100644 --- a/sites/en/workshop/diagrams.mw +++ b/sites/workshop/diagrams.mw @@ -2,7 +2,7 @@ * MVC: http://github.com/alexch/mission/raw/master/mvc.png -* MVC: https://www.railstutorial.org/book/demo_app#sec-mvc_in_action +* MVC: https://www.railstutorial.org/book/toy_app#sec-exercises_mvc_in_action * REST: diff --git a/sites/en/workshop/foundational_skills.deck.md b/sites/workshop/foundational_skills.deck.md similarity index 100% rename from sites/en/workshop/foundational_skills.deck.md rename to sites/workshop/foundational_skills.deck.md diff --git a/sites/en/workshop/helpful_examples.mw b/sites/workshop/helpful_examples.mw similarity index 100% rename from sites/en/workshop/helpful_examples.mw rename to sites/workshop/helpful_examples.mw diff --git a/sites/en/workshop/img/Win7_search_programs.jpg b/sites/workshop/img/Win7_search_programs.jpg similarity index 100% rename from sites/en/workshop/img/Win7_search_programs.jpg rename to sites/workshop/img/Win7_search_programs.jpg diff --git a/sites/en/workshop/img/acrobat.jpg b/sites/workshop/img/acrobat.jpg similarity index 100% rename from sites/en/workshop/img/acrobat.jpg rename to sites/workshop/img/acrobat.jpg diff --git a/sites/en/workshop/img/agile.jpg b/sites/workshop/img/agile.jpg similarity index 100% rename from sites/en/workshop/img/agile.jpg rename to sites/workshop/img/agile.jpg diff --git a/sites/en/workshop/img/cheatsheet.png b/sites/workshop/img/cheatsheet.png similarity index 100% rename from sites/en/workshop/img/cheatsheet.png rename to sites/workshop/img/cheatsheet.png diff --git a/sites/en/workshop/img/ey_logo_rgb.png b/sites/workshop/img/ey_logo_rgb.png similarity index 100% rename from sites/en/workshop/img/ey_logo_rgb.png rename to sites/workshop/img/ey_logo_rgb.png diff --git a/sites/en/workshop/img/firefox.png b/sites/workshop/img/firefox.png similarity index 100% rename from sites/en/workshop/img/firefox.png rename to sites/workshop/img/firefox.png diff --git a/sites/en/workshop/img/git.png b/sites/workshop/img/git.png similarity index 100% rename from sites/en/workshop/img/git.png rename to sites/workshop/img/git.png diff --git a/sites/en/workshop/img/git_bash.png b/sites/workshop/img/git_bash.png similarity index 100% rename from sites/en/workshop/img/git_bash.png rename to sites/workshop/img/git_bash.png diff --git a/sites/en/workshop/img/itunes.png b/sites/workshop/img/itunes.png similarity index 100% rename from sites/en/workshop/img/itunes.png rename to sites/workshop/img/itunes.png diff --git a/sites/en/workshop/img/linux_logo.gif b/sites/workshop/img/linux_logo.gif similarity index 100% rename from sites/en/workshop/img/linux_logo.gif rename to sites/workshop/img/linux_logo.gif diff --git a/sites/en/workshop/img/mac_terminal_sm.png b/sites/workshop/img/mac_terminal_sm.png similarity index 100% rename from sites/en/workshop/img/mac_terminal_sm.png rename to sites/workshop/img/mac_terminal_sm.png diff --git a/sites/en/workshop/img/os_x_logo.jpg b/sites/workshop/img/os_x_logo.jpg similarity index 100% rename from sites/en/workshop/img/os_x_logo.jpg rename to sites/workshop/img/os_x_logo.jpg diff --git a/sites/en/workshop/img/rails_logo.jpg b/sites/workshop/img/rails_logo.jpg similarity index 100% rename from sites/en/workshop/img/rails_logo.jpg rename to sites/workshop/img/rails_logo.jpg diff --git a/sites/en/workshop/img/railsbridge_logo.png b/sites/workshop/img/railsbridge_logo.png similarity index 100% rename from sites/en/workshop/img/railsbridge_logo.png rename to sites/workshop/img/railsbridge_logo.png diff --git a/sites/en/workshop/img/ruby-logo.jpg b/sites/workshop/img/ruby-logo.jpg similarity index 100% rename from sites/en/workshop/img/ruby-logo.jpg rename to sites/workshop/img/ruby-logo.jpg diff --git a/sites/en/workshop/img/rubygems.png b/sites/workshop/img/rubygems.png similarity index 100% rename from sites/en/workshop/img/rubygems.png rename to sites/workshop/img/rubygems.png diff --git a/sites/en/workshop/img/windows_logo.gif b/sites/workshop/img/windows_logo.gif similarity index 100% rename from sites/en/workshop/img/windows_logo.gif rename to sites/workshop/img/windows_logo.gif diff --git a/sites/en/workshop/img/wordpress.jpg b/sites/workshop/img/wordpress.jpg similarity index 100% rename from sites/en/workshop/img/wordpress.jpg rename to sites/workshop/img/wordpress.jpg diff --git a/sites/en/workshop/more_teacher_training.deck.md b/sites/workshop/more_teacher_training.deck.md similarity index 95% rename from sites/en/workshop/more_teacher_training.deck.md rename to sites/workshop/more_teacher_training.deck.md index 1cdb79426..4eb95088a 100644 --- a/sites/en/workshop/more_teacher_training.deck.md +++ b/sites/workshop/more_teacher_training.deck.md @@ -26,7 +26,7 @@ We're making tech more diverse and more welcoming! * What do you do for a living? Care to share who you work for? * What's your favorite structure in the Bay Area? * Alternate silly questions: - * What's your spirit animal? + * What's your favorite animal? * If you could only eat one food for the rest of your life, what would it be? # What's a RailsBridge? @@ -42,18 +42,19 @@ Raise your hand if you've been to a workshop before! There are a few different RailsBridge curricula: * Intro to Rails (a.k.a. "Suggestotron") -* Intermediate Rails +* Job Board (no scaffolds) +* Message Board (doesn't tell you what to type) * Intro to Ruby * Front End (HTML, CSS, and a tiny bit of JavaScript). -First, we get all the necessary technologies onto the students' computers (the installfest). +First, we get all the necessary technologies onto the students' computers (the Installfest). The next day we break into small groups and work through the curriculum. # Typical RailsBridge Schedule -* Friday, 6-10pm-ish: installfest -- installing things over pizza & beer (no formal presentations) +* Friday, 6-10pm-ish: Installfest: installing software over pizza & beer (no formal presentations) - _n.b.: the Front End workshop doesn't have an installfest._ + _n.b.: the Front End workshop doesn't usually have an Installfest._ * Saturday's schedule, often: * 9-9:30am: Check-in, coffee, bagels @@ -86,8 +87,7 @@ We've made three quasi-arbitrary categories of ways to make your class awesome: #### Imagine: * You're trying to do something difficult -* You're in a group of strangers - * many of whom know how to do it better than you +* You're in a group of strangers, many of whom know how to do it better than you * You've tried before but got lost or bored or confused * You don't feel like you can articulate your thoughts and questions * You don't know the right names for anything @@ -112,11 +112,10 @@ We've made three quasi-arbitrary categories of ways to make your class awesome: # Social Comfort (More Ideas) #### Try to suppress your (understandable) culturally-influenced sexism * Don't hit on people. No sexual advances. None. Even at the after-party. -* Don't make sexist jokes. Or racist, classist, or ableist jokes. Call people out if they do. +* Don't make sexist jokes. Or racist, classist, or ableist jokes. Call people out if they do. A simple "That's not funny" and moving on quickly with the conversation will often suffice. * Don't make gender-based generalizations ("Women are better at X, because ...") * Don't make references to people's bodies or state your opinion of them. * Don't use slurs. -* Don't treat women as delicate flowers; do treat them like normal people. # Discussion: Technical Capability ### How can you help people feel technically capable? @@ -145,7 +144,7 @@ We've made three quasi-arbitrary categories of ways to make your class awesome: * Students have diverse backgrounds. Appreciate this fact. * If they aren't getting a concept, avoid anything that might shame them. * Don't be surprised when someone hasn't heard of something before. -* Don't grab anyone's keyboard. Avoid taking over unless you think it's *really* necessary. Ask before you do. "Mind if I drive for a sec?" +* Don't grab anyone's keyboard. Avoid taking over unless you think it's *really* necessary. Ask before you do. "Mind if I drive for a sec?" But really, don't. # Technical Capability (Even More Ideas) #### Walk the Middle Path diff --git a/sites/workshop/more_teacher_training_2016.deck.md b/sites/workshop/more_teacher_training_2016.deck.md new file mode 100644 index 000000000..6c48fd9b2 --- /dev/null +++ b/sites/workshop/more_teacher_training_2016.deck.md @@ -0,0 +1,422 @@ +# RailsBridge Teacher and TA Training + +# Why we are here? + +* Get to know each other and RailsBridge +* Know what will happen during a typical RailsBridge workshop +* Be empowered as teachers and TAs +* Practice teaching techniques (checks for understanding, scaffolding) + +### RailsBridge Teacher and TA Training + +# How is this going to happen? + +* Introductions +* Coverage of workshop logistics + * Schedule + * Student levels + * Available curricula + * Volunteer roles +* Facilitated conversations about soft skills, teaching best practices and challenges, specifically for RailsBridge workshops. + +# Introducing RailsBridge! + +* Founded in 2009 as a variety of initiatives, including Rails Mentors, Rails Bug Smashes, and the Open Workshop Project. +* The workshops project was led by Sarah Allen and Sarah Mei. +* Bridge Foundry +* Workshops not just Ruby on Rails, but also teaching Ruby, front-end and mobile development, Clojure, etc. + +# Introducing RailsBridge! + +### Current Level of Experience + +* Have held super-welcoming, fun, free workshops all over the world, over 200 in total! + +# Introducing RailsBridge! + +### Goals for All Workshops Ever + +* Make tech more diverse and welcoming! +* Provide extremely welcoming and useful high quality instruction to students. +* Provide hella networking opportunities for students and volunteers. +* Provide an opportunity for our volunteers to give back while they are also gaining valuable skills and connections. +* We throw super-welcoming, fun, free workshops. +* We help our volunteers become more empathetic and better communicators. +* Have fun! + +# Introductions + +* What is your name? What else would you like to share about yourself? Could be anything... work, hobbies, interests, education, favorite building or music, etc. +* What is your current level of experience with the workshop topic and with teaching? +* What would you like to get out of today's teacher training? Anything specific you want to learn or discuss? + +# Typical RailsBridge Schedule + +First, we get all the necessary technologies onto the students' computers aka the **Installfest**. + +The next day we break into small groups and work through the curriculum. + +# Installfest + +#### Friday 6-10pm-ish + +* Installfest: installing software over pizza & beer +* No formal presentations, a bit like a party, get to know your students and fellow volunteers +* Not necessary for Front-end workshops + +### Keep in mind: + +* There will be people with _all_ kinds of computers. +* Even though Windows is not an ideal Rails development environment, we're here to encourage people and meet them wherever they are right now. +* Do NOT say bad things about Windows, even if it's frustrating. +* If you're not sure about something, grab another volunteer. +* Do NOT just talk to other volunteers, interact with the students. + +### Questions about the Installfest? + +# Workshop + +### Saturday 9-4:30pm-ish plus After-party + +* 9-9:30am: Check-in, coffee, bagels +* 9:30-10am: Opening presentation, student sorting and classroom assignment, volunteer huddle +* 10am-12:30pm: Class! +* 12:30-1:30pm: Lunch +* 1:30pm-4:30pm: Class! +* 4:30-5:00pm: Closing presentation and retros +* 5:00pm-late: After-party + +# Workshop - Start with Introductions!!! + +* What is your name? Work, hobbies, interests, education, anything else you would like to share about yourself? +* What is your current level of experience with writing code/technology in general/the material we are covering in the workshop today? +* What would you like to get out of today's workshop? Anything specific you want to learn or discuss? + +# Introductions - Things to Look For + +* Make sure everyone participates, not just students. +* Look for students who are in the wrong level and find out if they want to move. +* Listen carefully to their goals so you can either realistically adjust them before class or meet them during class. +* Don't rush, even if you have a big class. Getting people talking +* If someone joins the class late, ask them to introduce themselves. +* Get people talking. The more comfortable they are at talking, the more likely they'll speak up when they don't understand something, or to answer someone else's question. + +# Workshop - Establish Ground Rules + +* Questions are always welcome, there are no silly questions. +* Explain that if someone has trouble (e.g., not getting the expected output), the TAs will help troubleshoot. +* If anyone wants to switch classes, tell them they should feel TOTALLY COMFORTABLE switching at any point. + +# Cover Classroom Logistics + +* Planned breaks, lunch time +* Remind students that there is a closing presentation and retrospective at the end +* Make sure they know where the bathroom is +* Encourage them to attend the after-party +* Students might not want to take breaks, but it is best that they do. + +# Student levels + + **Blue** - Totally New to Programming + + **Green** - Somewhat New to Programming + + **Gold** - Some Rails Experience + + **Orange** - Other Programming Experience + + **Purple** - Ready for the Next Challenge + +# Curricula + +#### Where to find the curriculum: http://docs.railsbridge.org + +### You need to read the curriculum through, beginning to end, before teaching or ta'ing it. + +**Rails** + +* Intro to Rails - Classic Suggestotron Curriculum - Blue/Green Levels + +* Job Board - Build a Simple Job Board - Green/Gold levels + +* Message Board - Orange/Purple Levels + +**FrontEnd** + +* Frontend Curriculum - HTML + CSS for beginners - Blue/Green levels + +* JavaScript Snake Game - Beginner Specific Curriculum - Blue/Green level + +* JavaScript To Do LIst - Gold/Orange Levels + +* JavaScript To Do List With React - Orange/Purple Levels + +#   + +## Seriously! You need to read the curriculum through, beginning to end, before teaching or ta'ing it. + + + +# What's a TA? + +### First workshop? Be a TA! + +* At RailsBridge, a TA is a volunteer who isn't leading the class. +* If you're volunteering at your first RailsBridge workshop, you should probably be a TA. +* Sometimes they are the technical experts (rather than the teacher), sometimes not. +* TAs often explain specific concepts for the class or teach a couple of sections to give the teacher a break from talking. +* TAs can ask questions to encourage students to speak up. +* Teachers can ask your TA to explain a concept; they may be more technically advanced than you! +* TAs can help people who get lost. +* Co-teaching is also an option if you feel like you can tag-team. There doesn't have to be a hierarchy. +* If someone falls behind, the TA can take them out of the room to do some 1-on-1, if there's another TA in the room. + + +# RailsBridge Teacher Training - Soft Skills Edition + +# How to make your class awesome + +We've made three quasi-arbitrary categories of ways to make your class awesome: + +##### We want our students to feel: + +* Like you are approachable and can help solve their problems +* Socially comfortable +* Technically capable + +#### Discussion is key! Don't let the presenter(s) do all the talking! + +# Social Comfort - Establishing trust with students aka "Do you know what's up?" + +#### Discussion points + +* How can you help people feel like you know what's going on? +* What are things you can do to help the students trust you? +* What are some things to avoid? + + +# Know What's Up: Ideas + +#### Don't be afraid to: +* Call on people! By name! +* Ask yourself questions and answer them. +* Be vulnerable yourself, discuss your learning process + +# Know What's Up: Even More Ideas +#### Pace yourself! +* Don't go too fast. You will probably go too fast. Check in occasionally to ensure everyone is still with you. +* You can say the same thing THREE TIMES and it will not be boring yet. +* When you ask a question, wait TEN WHOLE SECONDS before saying anything else. People need time to think. +* Don't let the most advanced students dictate the pacing or answer all the questions. +* Get people talking. The more comfortable they are at talking, the more likely they'll speak up when they don't understand something, or to answer someone else's question. +* Allow students time to write and play with code! + +# Social Comfort - Absolutes +* Try to be more aware of your (possible and understandable) culturally-influenced sexism so you don't express it during a class +* Don't hit on people. No sexual advances. None. Even at the after-party. +* DO NOT ask for student contact information. Feel free to share yours, in a non aggressive way, so students can take initiative to contact you. +* Don't make sexist jokes. Or racist, classist, or ableist jokes. Call people out if they do. A simple "That's not funny" and moving on quickly with the conversation will often suffice. +* Don't make gender-based generalizations ("Women are better at X, because ...") +* Don't make references to people's bodies or state your opinion of them. +* Don't use slurs. + +# Social Comfort: Making the students more comfortable with learning process + +#### Imagine: +* You're trying to do something difficult +* You're in a group of strangers, many of whom know how to do it better than you +* You've tried before but got lost or bored or confused +* You don't feel like you can articulate your thoughts and questions +* You don't know the right names for anything + +# Social Comfort: Comprehension + +#### Discussion points + +* How can you tell if they understand the words you're saying? +* What are good questions to ask to check comprehension? +* What did your favorite teachers do to gauge understanding? + +# Student Comprehension: Some Ideas +* Pay attention to body language. +* People ask questions most often when they are actively processing material. If they aren't, it might be that the material is too easy or hard. Try to figure out which it is! + +#### Calling on people +* Calling on people makes the class more interactive and engaging, and less lecture-y. +* Don't always ask questions to the whole class: call on individuals by name. +* Consider breaking the class into two teams and addressing questions to teams. +* Ask people what they expect a command to produce BEFORE you hit enter. +* Ask "How would you do \#\{this\}?" or "If I wanted to do \#\{that\}, what would I do?" + + +# Discussion: Technical Capability +### How can you help people feel technically capable? +### What kinds of insecurities might your student have? +### How can you bolster their confidence? + +# Technical Capability: Ideas +#### Explain that: +* Even professional developers are constantly learning new technologies, so being confused is normal. +* Initial code is often terrible: don't feel bad, just refactor! +* Mistakes == Learning! +* Growth mindset versus fixed mindset + +#### Dealing with technical concepts: +* Define technical terms! Several times! +* Assume anyone you're teaching has zero knowledge but infinite intelligence. +* Remember people's professional and code backgrounds (QA, DBA, C++, Java, JS) and relate where possible. If they are a cook, try a cooking analogy. + +# Technical Capability: More Ideas +#### Encourage collaboration and interaction +* Explicitly encourage students to try to answer each other's questions. +* If a question is asked, ask if anyone in the class thinks they can explain. +* Be especially encouraging of the first few questions, to try to get things rolling. +* Good responses to questions: "I'm glad you asked!" or "I actually wondered that, too." or "Great question!" + +#### Be Super Positive, Always +* Students have diverse backgrounds. Appreciate this fact. +* If they aren't getting a concept, avoid anything that might shame them. +* Don't be surprised when someone hasn't heard of something before. +* Don't grab anyone's keyboard. Avoid taking over unless you think it's *really* necessary. Ask before you do. "Mind if I drive for a sec?" But really, don't. + +# Technical Capability: Even More Ideas +#### Walk the Middle Path +* Don't go too deep for your class level, but also, don't gloss over things. +* When trying to be accurate, it's easy to go down a rabbit hole of specificity. Avoid. +* Work with the TAs to make sure no one goes down that rabbit hole. Accountability! +* Explain the big picture of a command *before* they type it in. + * i.e., before typing the command to deploy to Heroku, explain the difference between localhost and Heroku. + + +# Is RailsBridge Open Source? + +### WHY YES, THANK YOU FOR ASKING! +### RAILSBRIDGE IS VERY OPEN SOURCE! + +All the materials you're using were created by volunteers, and are on GitHub for forking and editing and using! + +If you see something that could be better, make a pull request. Pull requests are the lifeblood of RailsBridge. + +If you don't know how to make one, we'll help! + +#### Where to submit pull requests: https://github.com/railsbridge/docs + +#### How to submit pull requests: http://railsbridge.github.io/bridge_troll/ + +We need your help! Thank you!!! + + +# Very Important, Very Practical Things +#### Where to find the curriculum: http://docs.railsbridge.org + +You need to read the curriculum through, beginning to end, before teaching it. + +# Teaching Techniques +### Answering questions +* Correct people if they're wrong. Be polite and encouraging. For instance: + * "Well, this might work better and this is why." + * "Can you explain how you came to that conclusion?" + * "Does anyone have a different answer?" +* Don't be afraid to tell someone that you don't know +* Don't be afraid to not answer a question if it is out of scope + * Talk with the student during a break + +# Teaching Techniques +#### Checks for understanding +A tool for assessing how well the class understands a topic before moving on + +#### Reasons to check for understanding +* Helps guide your teaching pace +* You get more feedback about which students are more challenged with the material +* Feedback loop during the lesson + +# Avoid These Checks For Understanding +* Do you understand? +* Can I move on? +* Any questions? + +#### These checks tend to have a luke warm response +#### People may think they understand, but don't actually understand + +# Suggested Checks For Understanding +* Fist of five +* Calling on a person by name +* Have students pair on a problem, then explain it to the group +* Checking in with each student individually as they work on a problem +* Teach a concept to your neighbor + +# Discussion: Teach! +#### Incorporate at least one check for understanding and teach the following +* Arrays +* Hashes +* Scrum process +* OOP +* Anything you are passionate about + +# Scaffolding +* A lesson should build upon itself +* Teacher describes or illustrates a concept multiple ways +* Teacher gives a specific example that helps students complete an assignment +* I do, we do, you do + +### Not `rails g scaffold` + +# Discussion: Great learning experience +### Describe a great learning experience you have had +### Why do you think it was so successful? + +# General curriculum levels - detailed + +### **Blue** - Totally New to Programming + +* Student has little or no experience with the terminal or a graphical IDE +* Might be familiar with HTML or CSS, but not necessarily +* Unfamiliar with terms like methids, arrays, lists, hashes, or dictionaries + +### **Green** - Somewhat New to Programming + +* May have used the terminal a little - to change directories for example +* May have done an online programming tutorial or two +* Does not have alot of experience with Rails + +### **Gold** - Some Rails Experience + +* Comfortable using terminal, but not a power user +* Have general understanding of Rails app's strucutre, maybe a prior workshop or tutorial +* Knows how to define a method in Ruby +* Has decent handle on Ruby arrays and hashes + +# General curriculum levels - detailed continued + +### **Orange** - Other Programming Experience + +* Proficient in another language and understand general programming concepts like collections and scope +* New to Ruby on Rails +* Familiar with version control and basic web architecture + +### **Purple** - Ready for the Next Challenge + +* Exhausted fun of Suggestotron/Intro Rails curriculum +* Comfortable with terminal +* Want to problem solve instead of copying other's code +* Build an app without using scaffolds + +# Curriculum levels for JavaScript + +### **Blue** - No programming Experience + +* Totally new to JavaScript itself +* Made a webpage before, maybe at a RailsBridge Front End Workshop +* No experience with programming languages other than HTML and CSS + +### **Orange** - Programmer new to Javascript + +* Comfortable making a complex webpage +* Some experience in programming language like ActionScript, C, Java, Ruby or Python +* Has seen JavaScript, but didn't really understand how it worked + +### **Purple** - Some experience with JavaScript + +* Feel comfortable writing functions and objects in JavaScript +* Used jQuery before, has seen Ajax request, but doesn't understand all the moving parts +* Interested in learning how to organize JavaScript code using models and views diff --git a/sites/en/workshop/noobie-outline.txt b/sites/workshop/noobie-outline.txt similarity index 93% rename from sites/en/workshop/noobie-outline.txt rename to sites/workshop/noobie-outline.txt index 12faef368..bef855eec 100644 --- a/sites/en/workshop/noobie-outline.txt +++ b/sites/workshop/noobie-outline.txt @@ -1,4 +1,4 @@ -RailsBridge Introductory Curriculum for Non-Programmers +RailsBridge Introductory Curriculum for Non-Programmers Target Audience: Students who have not exposure to the command line and/or programming (and may be fuzzy on how the file system works) @@ -14,12 +14,12 @@ File Directories: Use house / rooms / drawers metaphor for how directories store files and keep everything in your ‘house’ organized. Review ./ and ~/ references to self and root directories. Explain where home and root are located in relation to all directories. Explain difference between absolute paths (starting with a /) and relative paths. -.. is the relative path the the parent directory. +.. is the relative path the parent directory. Command Line Basics:: pwd, ls, cd, touch, mv, cp, rm, .. (parent directory) Text Editing: Explain differences between text editor vs. word processor. Have group open editor, create and save file with explanation of how and where files are stored. -Explain file extensions and file types. File types tell the editor how to color the special words in each language. +Explain file extensions and file types. File types tell the editor how to color the special words in each language. Explain difference between the buffer (in the editor’s memory) and the file (stored on disk). Emphasize the importance of saving the buffer to a file before trying to run it with ruby. Compilers, Interpreters and Programming Languages: Use metaphor of programming language as an agreed set of rules about syntax for writing source code that is sent to the interpreter and translated into byte code. @@ -44,10 +44,10 @@ Explain ‘method calls’. Explain to group the important of strings and review string operations. Have group work with strings in IRB. IRB Console: Have group open IRB console and create objects, method calls and variable assignments. -Tie in lecture above on Objects, Methods, Variables with exercises in IRB that allow students to see results line-by-line. +Tie in lecture above on Objects, Methods, Variables with exercises in IRB that allow students to see results line-by-line. Have group query classes for their methods in IRB. HTTP: Lead group exercise in using telnet to query Wikipedia, make GET request and view response in command line, then compare to view source of same page in browser. Sinatra Application -Lead group exercise in writing Sinatra application and run it locally. “Hello, Web!” -Extend to add “the time is Sun Mar 27 09:44:09 PDT 2011” using `date`. \ No newline at end of file +Lead group exercise in writing Sinatra application and run it locally. “Hello, Web!” +Extend to add “the time is Sun Mar 27 09:44:09 PDT 2011” using `date`. diff --git a/sites/en/workshop/resources.md b/sites/workshop/resources.md similarity index 79% rename from sites/en/workshop/resources.md rename to sites/workshop/resources.md index 467553b29..110c3eb79 100644 --- a/sites/en/workshop/resources.md +++ b/sites/workshop/resources.md @@ -1,31 +1,29 @@ ### Learning Ruby * [TryRuby](http://tryruby.org/) a browser-based interactive tutorial in Ruby * ["Learning to Program" by Chris Pine](http://www.pragprog.com/titles/ltp2/learn-to-program-2nd-edition) - a beginner's programming book with lots of Ruby exercises. (earlier version [online](http://pine.fm/LearnToProgram)) -* [Why's Poignant Guide](http://mislav.uniqpath.com/poignant-guide/book/chapter-1.html) +* [Why's Poignant Guide](http://poignant.guide/book/chapter-1.html) * [Hackety Hack](http://hackety-hack.com/) a fun way for beginners to learn Ruby. * [Ruby Koans](http://rubykoans.com/) - a self-guided journey through topics in Ruby for beginners and experts alike * [Test-First Teaching](http://testfirst.org) - click on 'Learn Ruby' * [Ruby Warrior](https://github.com/ryanb/ruby-warrior) - write and refine some Ruby code to get your warrior to the top of a hazardous tower * [Ruby Quiz](http://www.rubyquiz.com) - a guided tour through the world of possibility; use your Ruby to build simple apps, games, and solve problems -* [Why's Poignant Guide to Ruby](http://mislav.uniqpath.com/poignant-guide/book/chapter-2.html) - A whimsical comic book that teaches you Ruby. Legendary in the community. +* [Why's Poignant Guide to Ruby](http://poignant.guide/book/chapter-1.html) - A whimsical comic book that teaches you Ruby. Legendary in the community. * [Learn Ruby the Hard Way](http://ruby.learncodethehardway.org/) It's not actually hard. A great place to start if you're new to programming and want to learn with hands-on examples. * [PDX tech workshop](http://github.com/caylee-hogg/pdx-ruby-course) This are the slides from the ruby/rails workshop organized in Portland, OR by [PDXtech](http://pdxtechworkshops.org/) ### Learn about Rails * [Rails Guides](http://guides.rubyonrails.org/) - the official how-to articles for Rails -* [Rails API](http://railsapi.com) - online documentation +* [Rails API](http://api.rubyonrails.org/) - online documentation * [Rails for Zombies](http://railsforzombies.org/) - a series of videos and browser-based Rails exercises * [Rails Tutorial](http://ruby.railstutorial.org/) - a tutorial that leads you through writing a Rails messaging app ### Watch screen casts * [RailsCasts](http://railscasts.com) (also available as [blog posts](http://asciicasts.com/)) -* [PeepCode](http://peepcode.com) ### Classes & events in San Francisco -* [San Francisco Ruby Meetups (we'd love to have you when you're in the area!)](http://www.meetup.com/sfruby/) * [RailsBridge Workshops organizing team](http://groups.google.com/group/railsbridge-workshops) * [Women Who Code meetup](http://www.meetup.com/Women-Who-Code-SF/) (monthly hack nights & speakers) @@ -34,7 +32,6 @@ * [RailsBridge](http://railsbridge.org) * [DevChix](http://www.devchix.com) -blog and mailing list for women developers * [Stack Overflow](http://stackoverflow.com/) -for answers to programming questions -* [Apprenticeship Patterns](http://apprenticeship-patterns.labs.oreilly.com/) -advice for aspiring programmers ### Get experience @@ -49,5 +46,3 @@ * DeRailed - Denver Rails UG: http://groups.google.com/group/derailed * Mountain.rb (Boulder, Colorado) http://mountainrb.com * Chicago Ruby (beginners welcome!) http://www.meetup.com/ChicagoRuby/ - -Check for Ruby and Rails meetups anywhere at [Ruby in Person](http://www.rubyinperson.com/) diff --git a/sites/en/workshop/ruby_for_beginners.deck.md b/sites/workshop/ruby_for_beginners.deck.md similarity index 99% rename from sites/en/workshop/ruby_for_beginners.deck.md rename to sites/workshop/ruby_for_beginners.deck.md index b018e4624..1b014701c 100644 --- a/sites/en/workshop/ruby_for_beginners.deck.md +++ b/sites/workshop/ruby_for_beginners.deck.md @@ -649,7 +649,7 @@ Topics: * Commandline program. Practice in Ruby syntax and OOP concepts, and creating commandline programs. -* Explore strings: concatenation, manipulation, interpolation, coersion. +* Explore strings: concatenation, manipulation, interpolation, coercion. * Symbols, nil, basic math operators, blocks, method chaining, passing parameters to methods, iteration, branching, conditionals & conditional looping. diff --git a/sites/en/workshop/ruby_for_programmers.deck.md b/sites/workshop/ruby_for_programmers.deck.md similarity index 100% rename from sites/en/workshop/ruby_for_programmers.deck.md rename to sites/workshop/ruby_for_programmers.deck.md diff --git a/sites/workshop/ta_cheat_sheet.md b/sites/workshop/ta_cheat_sheet.md new file mode 100644 index 000000000..120463dc1 --- /dev/null +++ b/sites/workshop/ta_cheat_sheet.md @@ -0,0 +1,38 @@ +First, thanks for volunteering your time to TA a workshop. Here we've tried to +capture tips to make your experience, and your student's, better. + +# First, Do No Harm + +The most important thing you can do as a TA is to make people +feel they are in a safe learning environment. The worst outcome +is for a student to leave frustrated, confused, or belittled and never wanting +to try programming again. + +# Troubleshoot Problems + +The most important job of a TA is to help students who are stuck on a step so +that the whole class does not have to wait for them. + +## Make yourself available for questions and troubleshooting + +Some amount of struggling is part of learning, but if someone looks frustrated, +offer a simple "Anything I can help with?" At the same time, try not to hover. + +# Help the Teacher Read the Room + +In general, teachers, especially new ones, tend to go too quickly. If you can +tell students are confused, try offering to repeat your own explanation +of a concept. Even just hearing it again can help and spark new questions. + +If you can tell someone is flying through the material (which often manifests +as impatiently checking their phone as they wait for others) casually mention they +are free to move up to the next level class if this class is moving too slowly. + +# Help with Logistics + +Volunteer to keep track of when it's time for breaks. This is super helpful! + +# Learn from Your Teacher + +Most teachers begin as TAs. Note what does and doesn't work about the class and +use that if you get the opportunity to teach. diff --git a/sites/workshop/teacher_cheat_sheet.md b/sites/workshop/teacher_cheat_sheet.md new file mode 100644 index 000000000..00ce3a932 --- /dev/null +++ b/sites/workshop/teacher_cheat_sheet.md @@ -0,0 +1,120 @@ +First, thanks for volunteering your time to teach a workshop. Here we've +tried to capture tips to make your experience, and your student's, better. + +# First, Do No Harm + +The most important thing you can do as a teacher is to make +people feel they are in a safe learning environment. The worst +outcome is for a student to leave frustrated, confused, or belittled and never +wanting to try programming again. + +# Plugging In, Setting Up + +## Teacher & TA Huddle + +It can be really helpful to talk with your TAs briefly before you begin and set +the tone that your classroom will be a collaborative experience, not just a +lecture. If any of them are up for it, you can have them teach a section or even +just explain or diagram a tricky concept like databases. But don't push people +if they aren't ready. + +## Laptop Setup +* Get your screen on the monitor or projector. This is never 100% foolproof! +* Zoom your browser and text editor fonts. +* Disable any potential popups like work email, etc + +## Try to Put Yourself in a Student's Shoes + +If you code all day for your job, it's easy to switch windows without stating +your intent, and use all sorts of timesaving shortcuts without even realizing +it. + +* Always annouce keyboard shortcuts and commands, along with +where to run them. Beginner students often get don't know +the difference between bash, IRB, the Rails console, etc. +* If you want, you can try +[KeyCastr](https://github.com/keycastr/keycastr) which will display shortcuts as you +type but be careful if you type passwords ;-) +* Be explicit: "Let's go back to our text editor and find +the topics.css file in the app/assets/stylesheets folder so we +can change the style." + +# How to Begin the Class + +Go around the room and have people introduce themselves. You can use +icebreaker techniques like having people name their favorite SF structure, +to use one example. + +It's also tremendously helpful if everyone states what they want to learn. +This can be really useful in higher levels to tailor the content to +what the students want. + +If it's clear that the class is generally at a lower level that the color, slow +down accordingly. It's also a good time to remind them that anyone is free to +change levels at any time, especially if it sounds like some students are +already at a higher level. + +# Roadmap + +* Many people like to know the destination before they begin the journey so +don't skip the "Objectives" part of each session +* The less advanced levels won't finish the entire curriculum so it's good to +tell them that upfront and remind them they can come back next time or try the +rest on their own + +# Pacing +* Hint: almost all new teachers go too fast +* Repeat, repeat, repeat +* Stop a lot so that the slowest person can catch up to the fastest +* If almost everyone is done, ask a TA to help any students who are stuck and +move on +* You can also use pauses while TAs are helping troubleshoot to ask questions +or suggest things to try. + +# Ask Questions! +* "What do you think will happen when I run this command?" +* Give generous pauses (count to 10!) after asking questions +* Don't be afraid to call on people by name +* Simply asking "Does everyone understand?" or "Any questions?" tends to +mask confusion. Be specific! + +# Whiteboards +If you have whiteboards, take advantage of them. Ask a TA to write +out new vocab there so it won't disappear as you move through slides. + +Many people are visual learners so diagrams can be very helpful too. + +# Breaks! +* Don't forget about the breaks. It's easy to get into flow +and forget. +* Use a timer on your phone or ask one of the TAs to be a Timekeeper +* Try to politely leave the room yourself. It can be easy to spend all the breaks +answering questions. Teaching is a ton of work. Give yourself a break too! + +# Wrapping Up + +* Set aside 10-15 minutes at the end for questions +* Hopefully you've got at least some students who are hooked by this whole +world of coding and want to learn more so share your favorite resources +* Ask the TAs and students to do the same +* Many students use online tutorials and can recommend good ones + +## Final Words + +* Remind them how much they accomplished +* Encourage students and volunteers to come to the after-party +* Encourage everyone to come back again +* Encourage them to stick around for the final presentation and retro + + + +# Prep + +The best prep is to read through the curriculum and do it yourself. + +# More Resources + +If you have time, you can read the full slide deck that this doc was adapted +from, as well as these general links about teaching. + +* [Teacher & TA Training Slide Deck](more_teacher_training) \ No newline at end of file diff --git a/sites/en/workshop/teaching_tips.md b/sites/workshop/teaching_tips.md similarity index 100% rename from sites/en/workshop/teaching_tips.md rename to sites/workshop/teaching_tips.md diff --git a/sites/en/workshop/topics.md b/sites/workshop/topics.md similarity index 93% rename from sites/en/workshop/topics.md rename to sites/workshop/topics.md index e42a15c42..164cbb3f5 100644 --- a/sites/en/workshop/topics.md +++ b/sites/workshop/topics.md @@ -44,5 +44,6 @@ Contact Sarah Allen (sarah _at_ ultrasaurus _dot_ com) and send your github name ### Rails -* Intro (Suggestotron) Curriculum -* Intermediate (Message Board) Curriculum +* Intro to Rails (Suggestotron) Curriculum +* Job Board Curriculum +* Message Board Curriculum diff --git a/sites/en/workshop/web_apps.deck.md b/sites/workshop/web_apps.deck.md similarity index 100% rename from sites/en/workshop/web_apps.deck.md rename to sites/workshop/web_apps.deck.md diff --git a/sites/en/workshop/welcome.deck.md b/sites/workshop/welcome.deck.md similarity index 100% rename from sites/en/workshop/welcome.deck.md rename to sites/workshop/welcome.deck.md diff --git a/sites/en/workshop/workshop.md b/sites/workshop/workshop.md similarity index 81% rename from sites/en/workshop/workshop.md rename to sites/workshop/workshop.md index 7cf91710c..72f39e8ff 100644 --- a/sites/en/workshop/workshop.md +++ b/sites/workshop/workshop.md @@ -4,10 +4,13 @@ * [Ruby for Beginners](ruby_for_beginners) * [Ruby for Programmers](ruby_for_programmers) * [Diagrams (Git, MVC, REST) ](diagrams) +* [Activities](activities) ### Teacher Training -* [Original Teacher Training](teacher_training) -* [Newer Teacher Training (1/16/13)](more_teacher_training) +* [Teacher Training Deck](more_teacher_training) +* [Teacher Training Deck 2016](more_teacher_training_2016) +* [Teacher Cheat Sheet](teacher_cheat_sheet) - A TL;DR version of the deck +* [TA Cheat Sheet](ta_cheat_sheet) - A doc geared especially for first-time TAs # Materials for Organizers diff --git a/sites/zh-tw/nihao/nihao.step b/sites/zh-tw/nihao/nihao.step deleted file mode 100644 index 76a2c10f7..000000000 --- a/sites/zh-tw/nihao/nihao.step +++ /dev/null @@ -1 +0,0 @@ -message "世界你好！" diff --git a/spec/app_deck_spec.rb b/spec/app_deck_spec.rb index cfa455ece..2a375105f 100644 --- a/spec/app_deck_spec.rb +++ b/spec/app_deck_spec.rb @@ -9,7 +9,7 @@ # todo: move to shared module def get! *args get *args - assert { last_response.status == 200 } + expect(last_response.status).to eq(200) end def app @@ -19,45 +19,26 @@ def app describe "an app with slides" do require "deck" before do - breakfast = <<-MARKDOWN -# Eggs - -* scrambled -* fried - -# Cereal - -* Frosted Mini-Wheats -* Corn Flakes -* Raisin Bran - MARKDOWN - - sites_dir = dir "sites" do - dir "meals" do - file "breakfast.deck.md", breakfast - end - end - Site.stub(:sites_dir) { sites_dir } - - @breakfast = breakfast + here = File.expand_path(File.dirname(__FILE__)) + allow(Site).to receive(:sites_dir).and_return(File.join(here, 'sites')) end it "renders a deck" do get! "/meals/breakfast" # rendered_breakfast = Deck::SlideDeck.new(:slides => Deck::Slide.split(@breakfast)).to_pretty # for some reason it's not rendering pretty from the app even though the app uses .to_pretty - assert { last_response.body.include? "Raisin Bran" } + expect(last_response.body).to include("Raisin Bran") end # todo: include deck.js source right inside the HTML it "serves up deck.js and other public assets" do get! "/deck.js/core/deck.core.js" - assert { last_response.body.include?("Deck JS - deck.core")} + expect(last_response.body).to include("Deck JS - deck.core") get! "/deck.js/jquery-1.7.2.min.js" - assert { last_response.body.include?("jQuery v1.7.2 jquery.com")} + expect(last_response.body).to include("jQuery v1.7.2 jquery.com") get! "/assets/application.css" - assert { last_response.body.include?("/* Code ray css */")} + expect(last_response.body).to include("/* Code ray css */") end end -end \ No newline at end of file +end diff --git a/spec/app_spec.rb b/spec/app_spec.rb index b4612a1f0..910d7efed 100755 --- a/spec/app_spec.rb +++ b/spec/app_spec.rb @@ -32,32 +32,32 @@ def true_app def get! *args get *args follow_redirect! while last_response.redirect? - assert { last_response.status == 200 } + expect(last_response.status).to eq(200) end it "is a sinatra app" do get '/' - assert { true_app.is_a? InstallFest } - assert { true_app.class.ancestors.include? Sinatra::Application } + expect(true_app).to be_a(InstallFest) + expect(true_app.class.ancestors).to include(Sinatra::Application) end it "redirects / to the default site" do get! "/" - assert { last_request.path == "/docs/" } + expect(last_request.path).to eq("/docs/") end it "redirects /site to /site/" do get! "/installfest" - assert { last_request.path == "/installfest/" } + expect(last_request.path).to eq("/installfest/") end it "redirects /site/page/ to /site/page" do get! "/installfest/linux/" - assert { last_request.path == "/installfest/linux" } + expect(last_request.path).to eq("/installfest/linux") end it "has a default site" do - assert { true_app.default_site == "docs" } + expect(true_app.default_site).to eq("docs") end describe "settings" do @@ -68,23 +68,23 @@ def get! *args describe "learns the locale from" do it "the locale parameter" do true_app.params = {locale: 'es'} - assert { true_app.dynamic_locale == 'es' } + expect(true_app.dynamic_locale).to eq('es') end it "the l parameter" do true_app.params = {l: 'es'} - assert { true_app.dynamic_locale == 'es' } + expect(true_app.dynamic_locale).to eq('es') end it "the subdomain" do true_app.request = Rack::Request.new({"HTTP_HOST" => "es.example.com"}) - assert { true_app.dynamic_locale == 'es' } + expect(true_app.dynamic_locale).to eq('es') end it "the SITE_LOCALE environment var" do begin ENV["SITE_LOCALE"] = "es" - assert { true_app.dynamic_locale == 'es' } + expect(true_app.dynamic_locale).to eq('es') ensure ENV["SITE_LOCALE"] = nil end @@ -94,17 +94,17 @@ def get! *args it "looks for a site named the same as the host" do get "/", {}, {"HTTP_HOST" => "docs.example.com"} - assert { last_response.redirect? } + expect(last_response).to be_redirect follow_redirect! while last_response.redirect? - assert { last_request.path == "/docs/" } + expect(last_request.path).to eq("/docs/") end describe "in the 'es' locale" do - it "uses the 'es' subdir as the sites_dir" do + it "uses the same subdir as the sites_dir" do get "/", locale: "es" - es_dir = File.expand_path(File.join(__FILE__, "..", "..", "sites", "es")) - assert { true_app.sites_dir == es_dir } + es_dir = File.expand_path(File.join(__FILE__, "..", "..", "sites")) + expect(true_app.sites_dir).to eq(es_dir) end end diff --git a/spec/contents_spec.rb b/spec/contents_spec.rb index b0fab95d2..568fd1279 100644 --- a/spec/contents_spec.rb +++ b/spec/contents_spec.rb @@ -8,16 +8,16 @@ describe Contents do let(:site_name) { 'meals' } - let(:site_dir) { "#{here}/sites/#{site_name}" } # note: locale is not currently in spec/sites + let(:site_dir) { File.join(here, 'sites', site_name) } # note: locale is not currently in spec/sites let(:page_name) { 'prepare_a_meal' } before do - @toc = Contents.new(site_name: site_name, site_dir: site_dir, page_name: page_name) + @toc = Contents.new(site: Site.new(site_dir), page_name: page_name) end describe "absolute links" do let(:site_name) { 'docs' } - let(:site_dir) { "#{real_sites_dir}/en/#{site_name}" } - let(:page_name) { 'docs' } + let(:site_dir) { "#{real_sites_dir}/#{site_name}" } + let(:page_name) { 'docs' } before do @toc_html = Nokogiri.parse(@toc.to_html) end @@ -30,7 +30,7 @@ describe 'capitalization' do let(:site_name) { 'installfest' } - let(:site_dir) { "#{real_sites_dir}/en/#{site_name}" } + let(:site_dir) { "#{real_sites_dir}/#{site_name}" } let(:page_name) { 'installfest' } before do @toc_html = Nokogiri.parse(@toc.to_html) diff --git a/spec/markdown_spec.rb b/spec/markdown_spec.rb index 5fd4896f8..e49851c55 100644 --- a/spec/markdown_spec.rb +++ b/spec/markdown_spec.rb @@ -1,8 +1,11 @@ require "spec_helper" - +require "site" require "markdown_page" describe MarkdownPage do + before do + setup_test_translations + end it "renders markdown into html" do src = <<-MARKDOWN.strip_heredoc @@ -18,20 +21,17 @@ page = MarkdownPage.new( src: src, - site_name: "greetings", + site: Site.new("greetings"), page_name: 'hello', doc_title: "Hello", doc_path: "/tmp/hello.step", locale: "en" ) - # this is a hack to make the TOC work in the absence of a real site - Site.should_receive(:named).and_return(double(dir: "/tmp")) - html_doc = Nokogiri.parse(page.to_html) main_html = html_doc.css("main").first.serialize(:save_with => 0).chomp - assert_loosely_equal(main_html, <<-HTML.strip_heredoc) + expect(main_html).to loosely_equal(<<-HTML.strip_heredoc)
            Slides

            Hello

            diff --git a/spec/media_wiki_spec.rb b/spec/media_wiki_spec.rb index 90b84a760..4ab552302 100644 --- a/spec/media_wiki_spec.rb +++ b/spec/media_wiki_spec.rb @@ -5,9 +5,7 @@ describe "mw2md" do it "converts [[]]" do - assert { - mw2md("[[OS X 10.7 (Lion)]]") == "[OS X 10.7 Lion](os_x_10_7_lion)" - } + expect(mw2md("[[OS X 10.7 (Lion)]]")).to eq("[OS X 10.7 Lion](os_x_10_7_lion)") end end diff --git a/spec/site_index_spec.rb b/spec/site_index_spec.rb index c69dc0d1d..d25404f52 100644 --- a/spec/site_index_spec.rb +++ b/spec/site_index_spec.rb @@ -9,7 +9,7 @@ end it "lists all sites in the /sites/ directory" do - all_sites = Dir['sites/en/**'].map { |site_path| site_path.sub('sites/en/', '') } + all_sites = Dir['sites/**'].map { |site_path| site_path.sub('sites/', '') } @site_index.sites.should =~ all_sites end diff --git a/spec/site_spec.rb b/spec/site_spec.rb index 2675b0677..599f96cbc 100644 --- a/spec/site_spec.rb +++ b/spec/site_spec.rb @@ -9,18 +9,14 @@ site_names.should include("installfest") site_names.should include("intro-to-rails") end - + it "has doc files" do installfest = Site.named("installfest") doc_filenames = installfest.docs.map(&:filename) doc_filenames.should include("configure_git.step") end - - it "finds the sites_dir" do - Site.sites_dir.should == File.expand_path(File.join(File.dirname(__FILE__), "..", "sites", "en")) - end - it "finds the sites_dir for Spanish locale" do - Site.sites_dir('es').should == File.expand_path(File.join(File.dirname(__FILE__), "..", "sites", "es")) + it "finds the default sites_dir" do + Site.sites_dir.should == File.expand_path(File.join(File.dirname(__FILE__), "..", "sites")) end end diff --git a/spec/site_syntax_spec.rb b/spec/site_syntax_spec.rb index 97d05bcd5..d82950982 100644 --- a/spec/site_syntax_spec.rb +++ b/spec/site_syntax_spec.rb @@ -1,3 +1,4 @@ +require "cgi" require "spec_helper" require_relative "../app" @@ -5,6 +6,8 @@ require "rack/test" +here = File.expand_path File.dirname(__FILE__) + describe "Syntax check all sites" do include Rack::Test::Methods @@ -14,11 +17,20 @@ def app InstallFest::AVAILABLE_LOCALES.each do |locale| describe "in locale '#{locale}'" do - Site.all(locale).each do |site| + Site.all.each do |site| describe "#{site.name} pages..." do + it 'uses all images in the /img folder' do + site_folder = File.expand_path(File.join(here, '..', 'sites', locale, site.name)) + unused_images = Dir[File.join(site_folder, 'img', '*')].select do |image_path| + image_file = File.basename(image_path) + system("grep -q -R -I img/#{image_file} #{site_folder} > /dev/null") ? nil : image_file + end + expect(unused_images).to eq([]) + end + site.docs.each do |doc| it "renders #{doc.filename}" do - path = URI.escape "/#{site.name}/#{doc.name}" + path = CGI.escape "/#{site.name}/#{doc.name}" get path, locale: locale if (last_response.status != 200) errors = last_response.errors @@ -30,10 +42,10 @@ def app end last_response_status = last_response.status - assert { last_response_status == 200 } + expect(last_response_status).to eq(200) if doc.filename.end_with?('.step') - assert { last_response.body !~ /FUZZY/ } + expect(last_response.body).not_to match(/FUZZY/) end end end diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb index 50de1c052..2042f0c8d 100644 --- a/spec/spec_helper.rb +++ b/spec/spec_helper.rb @@ -3,17 +3,15 @@ $: << "#{top}/lib" require "rspec" -require "wrong/adapters/rspec" require "nokogiri" require "files" require 'active_support/core_ext/string/strip' -def assert_loosely_equal lhs, rhs - assert { lhs.gsub(/\n\s*/, '') == rhs.gsub(/\n\s*/, '') } -end +Dir[File.join(top, "spec/support/**/*.rb")].each {|f| require f} RSpec.configure do |c| c.include Files + c.include I18nHelper c.expect_with :rspec do |expectations| expectations.syntax = [:expect, :should] diff --git a/spec/step_page_spec.rb b/spec/step_page_spec.rb index 5e7505ca3..fb2a1ed0b 100644 --- a/spec/step_page_spec.rb +++ b/spec/step_page_spec.rb @@ -1,42 +1,41 @@ require "spec_helper" - +require "site" require "step_page" describe StepPage do - before { I18n.locale = :en } + before do + setup_test_translations + end # functional test -- brittle it "renders a step file" do BigCheckbox.number = 1 src = "step 'hello'" - page = StepPage.new(src: src, - site_name: "greetings", + page = StepPage.new( + src: src, + site: Site.new("greetings"), page_name: 'hello', doc_title: "Hello", doc_path: "/tmp/hello.step", locale: "en" ) - # this is a hack to make the TOC work in the absence of a real site - Site.should_receive(:named).and_return(double(dir: "/tmp")) - html_doc = Nokogiri.parse(page.to_html) main_html = html_doc.css("main").first.serialize(:save_with => 0).chomp checkbox_html = %q{} - blarg = <<-HTML.strip_heredoc.gsub('\n', '').gsub(/$\s*/, '') + expect(main_html).to loosely_equal(<<-HTML.strip_heredoc)

            Hello

            -
            +

            #{checkbox_html}Step 1: hello

            HTML - assert_loosely_equal(main_html, blarg) end end diff --git a/spec/step_spec.rb b/spec/step_spec.rb index dcec8a8a3..bc15bf950 100644 --- a/spec/step_spec.rb +++ b/spec/step_spec.rb @@ -1,9 +1,11 @@ require 'spec_helper' - +require "site" require "step_page" describe Step do - before { I18n.locale = :en } + before do + setup_test_translations + end def to_html nokogiri_node nokogiri_node.serialize(:save_with => 0).chomp @@ -29,24 +31,18 @@ def step_obj_for(path) html = to_html(steps.first) checkbox_html = %q{} expected = <<-HTML.strip_heredoc.gsub("\n", '') -
            +

            #{checkbox_html}Step 1: hello

            HTML - assert { html == expected } - end - - it "puts titles in based on step names" do - steps = html_doc.css(".step") - assert { steps.first["title"] == "hello" } - assert { steps[1]["title"] == "goodbye" } + expect(html).to eq(expected) end it "puts anchors in based on step numbers" do steps = html_doc.css(".step") steps.each_with_index do |step, i| - assert { step.previous } - assert { to_html(step.previous) == "" } + expect(step.previous).to be_truthy + expect(to_html(step.previous)).to eq("") end end @@ -57,7 +53,7 @@ def step_obj_for(path) anchors = html_doc.css("a") names = anchors.map{|a| a["name"]} - assert { names == %w(step1 happy_step) } + expect(names).to eq(%w(step1 happy_step)) end it "nests anchor numbers" do @@ -72,16 +68,13 @@ def step_obj_for(path) end RUBY - titles = html_doc.css('.step').map{|div| div["title"]} - assert { titles == %w(breakfast cereal eggs lunch salad sandwich) } - anchors = html_doc.css("a") names = anchors.map{|a| a["name"]} - assert { names == %w(step1 step1-1 step1-2 step2 step2-1 step2-2) } + expect(names).to eq(%w(step1 step1-1 step1-2 step2 step2-1 step2-2)) end describe 'link' do - it "passes in a back parameter, so the following page can come back here" do + it "creates a link" do html_doc(<<-RUBY) step "breakfast" do link "choose_breakfast" @@ -91,9 +84,8 @@ def step_obj_for(path) step "sandwich" end RUBY - a = html_doc.css(".step[title=breakfast] a.link").first - hash = URI.escape '#' - assert { a["href"] == "choose_breakfast?back=hello#{hash}step1" } + a = html_doc.css(".step a.link").first + expect(a["href"]).to eq("choose_breakfast") end it "has an optional parameter for the caption" do @@ -102,7 +94,7 @@ def step_obj_for(path) link "breakfast", caption: "Eat some" end RUBY - assert { html_doc.css("p.link").text == "Eat some Breakfast" } + expect(html_doc.css("p.link").text).to eq("Eat some Breakfast") end end @@ -111,14 +103,14 @@ def step_obj_for(path) html_doc(<<-RUBY) source_code "x = 2" RUBY - assert { @html == "
            x = 2
            " } + expect(@html).to eq("
            x = 2
            ") end it "emits a block of code with a language directive" do html_doc(<<-RUBY) source_code :ruby, "x = 2" RUBY - assert { @html == "
            \n:::ruby\nx = 2
            " } + expect(@html).to eq("
            \n:::ruby\nx = 2
            ") end end @@ -127,7 +119,7 @@ def step_obj_for(path) html_doc(<<-RUBY) console "echo hi" RUBY - assert_loosely_equal(@html, <<-HTML.strip_heredoc) + expect(@html).to loosely_equal(<<-HTML.strip_heredoc)
            #{I18n.t('captions.terminal')} 
            echo hi
            @@ -142,7 +134,7 @@ def step_obj_for(path) result "hi" RUBY - assert_loosely_equal(@html, <<-HTML.strip_heredoc) + expect(@html).to loosely_equal(<<-HTML.strip_heredoc)
            #{I18n.t("captions.result")} 
            hi
            @@ -157,7 +149,7 @@ def step_obj_for(path) fuzzy_result "hello {FUZZY}fuzz{/FUZZY} face! nice {FUZZY}banana{/FUZZY}\ni am more text!" RUBY - assert_loosely_equal(@html, <<-HTML.strip_heredoc) + expect(@html).to loosely_equal(<<-HTML.strip_heredoc)
            #{I18n.t("captions.fuzzy_result")} 
            @@ -187,31 +179,12 @@ def step_obj_for(path)
       outer_path = File.join(path, 'outer.step')
       html = step_obj_for(outer_path).to_html
 
-      assert_loosely_equal html, <<-HTML.strip_heredoc
+      expect(html).to loosely_equal(<<-HTML.strip_heredoc)
         
            hello
            
         
            yum
            
         
            yum
            
         
            goodbye
            
       HTML
     end
-
-    it "crafts 'back' links that go back to the containing page rather than the partial itself" do
-      path = dir 'testing-insert-links' do
-        file "outer.step", <<-RUBY.strip_heredoc
-          div 'this is the outer page'
-          insert 'inner'
-        RUBY
-        file "_inner.step", <<-RUBY.strip_heredoc
-          div 'this is the inner page'
-          link 'somewhere_else'
-        RUBY
-      end
-
-      outer_path = File.join(path, 'outer.step')
-
-      page = Nokogiri.parse("#{step_obj_for(outer_path).to_html}")
-
-      assert { page.css('a').first[:href] == "somewhere_else?back=outer" }
-    end
   end
 end
diff --git a/spec/support/i18n_helper.rb b/spec/support/i18n_helper.rb
new file mode 100644
index 000000000..502728e6f
--- /dev/null
+++ b/spec/support/i18n_helper.rb
@@ -0,0 +1,16 @@
+require 'i18n'
+require_relative '../../app'
+
+module I18nHelper
+  def setup_test_translations
+    here = File.expand_path File.dirname(__FILE__)
+    top = File.expand_path "#{here}/../.."
+
+    I18n::Backend::Simple.include(I18n::Backend::Fallbacks)
+    I18n.load_path = Dir[File.join(top, 'locales', '**/*.yml')]
+    I18n.backend.load_translations
+
+    I18n.available_locales = ::InstallFest::AVAILABLE_LOCALES
+    I18n.locale = :en
+  end
+end
diff --git a/spec/support/matchers.rb b/spec/support/matchers.rb
new file mode 100644
index 000000000..ab84e61d6
--- /dev/null
+++ b/spec/support/matchers.rb
@@ -0,0 +1,7 @@
+RSpec::Matchers.define :loosely_equal do |expected|
+  match do |actual|
+    actual.gsub(/\n\s*/, '') == expected.gsub(/\n\s*/, '')
+  end
+
+  diffable
+end
diff --git a/spec/titleizer_spec.rb b/spec/titleizer_spec.rb
index a51ab026a..4b8acbab8 100644
--- a/spec/titleizer_spec.rb
+++ b/spec/titleizer_spec.rb
@@ -2,30 +2,22 @@
 require "titleizer"
 
 describe Titleizer do
-  it 'uppercases rvm' do
-    expect(Titleizer.title_for_page('rvm_is_a_thing')).to eq('RVM Is A Thing')
+  it 'uppercases acronyms' do
+    {
+      'rvm_is_a_thing' => 'RVM Is A Thing',
+      'ssh_into_all_the_things' => 'SSH Into All The Things',
+      'CRUD_with_scaffolding' => 'CRUD With Scaffolding',
+      'why_cant_my_vhs_play_this_dvd' => 'Why Cant My Vhs Play This DVD',
+      'whats_the_deal_with_html' => 'Whats The Deal With HTML'
+    }.each do |initial, expected|
+      expect(Titleizer.title_for_page(initial)).to eq(expected)
+    end
   end
 
   it 'uppercases osx as OS X' do
     expect(Titleizer.title_for_page('osx_ive_never_heard_of_it')).to eq('OS X Ive Never Heard Of It')
   end
 
-  it 'uppercases ssh' do
-    expect(Titleizer.title_for_page('ssh_into_all_the_things')).to eq('SSH Into All The Things')
-  end
-
-  it 'upcases CRUD, even if it is already uppercase' do
-    expect(Titleizer.title_for_page('CRUD_with_scaffolding')).to eq('CRUD With Scaffolding')
-  end
-
-  it 'uppercases dvd' do
-    expect(Titleizer.title_for_page('why_cant_my_vhs_play_this_dvd')).to eq('Why Cant My Vhs Play This DVD')
-  end
-
-  it 'uppercases html' do
-    expect(Titleizer.title_for_page('whats_the_deal_with_html')).to eq('Whats The Deal With HTML')
-  end
-
   it 'uppercases argv' do
     expect(Titleizer.title_for_page('argv')).to eq('ARGV')
   end