You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: sites/zh-tw/frontend/deploying_to_github_pages.step
+8-8
Original file line number
Diff line number
Diff line change
@@ -22,12 +22,12 @@ situation "First-time setup" do
22
22
23
23
step "Make a special new directory" do
24
24
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)."
message "You just set up a 'remote' — a git repository somewhere else (in this case, on Github) that also holds your project files."
48
48
end
49
49
50
50
step "Create a new repo via the Github UI" do
51
-
tip "You can skip this step if you've created a ***[your-github-user-name].github.com*** page previously."
51
+
tip "You can skip this step if you've created a ***[your-github-user-name].github.io*** page previously."
52
52
message "Navigate to https://github.com/[your-github-user-name]/"
53
53
message "Click 'Create a new repo' in the upper right"
54
54
img :src => "img/github_create_repo.png"
55
-
message "Type **[your-github-user-name].github.com** into the 'Repository name' box"
55
+
message "Type **[your-github-user-name].github.io** into the 'Repository name' box"
56
56
img :src => "img/github_name_your_repo.png"
57
57
58
58
important "DO NOT choose 'Initialize this repository with a README' when creating the repo."
@@ -67,8 +67,8 @@ situation "First-time setup" do
67
67
68
68
step do
69
69
message "Woohoo!!! Take a breath and wait 15 minutes."
70
-
message "Because you gave your Github repository a special name (in the format [your-github-user-name].github.com), 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."
71
-
message "In 15 minutes, when you visit [your-github-user-name].github.com 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!"
70
+
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."
71
+
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!"
72
72
end
73
73
end
74
74
end
@@ -98,7 +98,7 @@ git commit -m "Some helpful message for your future self"
98
98
end
99
99
100
100
step "Visit your site" do
101
-
message "Go to your browser and navigate to **[your-github-user-name].github.com**"
101
+
message "Go to your browser and navigate to **[your-github-user-name].github.io**"
102
102
message "You should see the changes you made, but ON THE INTERNET!"
Copy file name to clipboardExpand all lines: sites/zh-tw/intermediate-rails/add_pages_to_create_and_look_at_individual_posts.step
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@ requirements do
2
2
message <<-MARKDOWN
3
3
* The user should be able to create a post with a title, author, date published, and content. The author should be the current user.
4
4
* The complete post should appear on its own page (aka its show page).
5
-
* If the user doesn’t submit all required fields, they should see some error messaging, but shouldn’t lose any of their work.
5
+
* If the user doesn't submit all required fields, they should see some error messaging, but shouldn't lose any of their work.
6
6
MARKDOWN
7
7
table do
8
8
tr do
@@ -50,7 +50,7 @@ message <<-MARKDOWN
50
50
* Rails has some built in ways to associate one model with another. See the RailsGuides link above for hints on how to make a user the owner of a post!
51
51
* Don't hand code the form! You don't have to! Rails will help. See RailsGuide link above!
52
52
* Rails has a built-in way to note when something was stored in the database. Probably handy for showing the date / time a post was created.
53
-
* For now, we're going to use the user's email address when displaying a posts's author. You can add names or other identifiers later! (Also, even though you're going to get the current user's email address from the User model, you'll still need a user parameter for your Post resource.)
53
+
* For now, we're going to use the user's email address when displaying a post's author. You can add names or other identifiers later! (Also, even though you're going to get the current user's email address from the User model, you'll still need a user parameter for your Post resource.)
54
54
* You need a `create` method to store your post data - scroll down a little bit in this section of the Getting Started guide for very helpful information and to see an example of a create method: <http://guides.rubyonrails.org/getting_started.html#creating-new-posts>.
Copy file name to clipboardExpand all lines: sites/zh-tw/intermediate-rails/add_replying.step
+2-2
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ message <<-MARKDOWN
3
3
* The user should see a 'New Reply' link or button on a post's show page which takes them to a form. The form should include the title of the post being replied to.
4
4
* The user should be able to create a new reply to a post using the 'New Reply' form.
5
5
* The user should see all the replies to a post on the post’s show page.
6
-
* If the user doesn’t submit all required fields, they should see some error messaging, but they shouldn’t lose any of their work.
6
+
* If the user doesn't submit all required fields, they should see some error messaging, but they shouldn't lose any of their work.
7
7
MARKDOWN
8
8
table do
9
9
tr do
@@ -28,7 +28,7 @@ end
28
28
discussion do
29
29
message <<-MARKDOWN
30
30
* What is a nested resource? When is it appropriate and how does it help?
31
-
* How do the replies_controller and posts_controller interact?
31
+
* How do the `RepliesController` and `PostsController` interact?
32
32
* What should happen to the routes file for this nesting business to work?
Copy file name to clipboardExpand all lines: sites/zh-tw/intermediate-rails/intermediate-rails.step
+2-2
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ message <<-MARKDOWN
3
3
4
4
## Assumptions made by this curriculum
5
5
* You’ve gone through the standard RailsBridge installfest and have successfully completed the <a href="/installfest/get_a_sticker">Get a Sticker</a> step.
6
-
* You’ve gone through the RailsBridge <a href="/初探-rails">Suggestotron curriculum</a> at least once before, or maybe a couple of times, or maybe you feel decently comfortable with Rails for some other reason.
6
+
* You’ve gone through the RailsBridge <a href="/intro-to-rails">Suggestotron curriculum</a> at least once before, or maybe a couple of times, or maybe you feel decently comfortable with Rails for some other reason.
7
7
* You want to learn more Rails!!!
8
8
9
9
## Goals
@@ -26,7 +26,7 @@ message <<-MARKDOWN
26
26
27
27
* 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.
28
28
29
-
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.
29
+
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.
30
30
31
31
## How to use this curriculum
32
32
* 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.
We'll start with the application layout, which you can find in the views directory, at `app/views/layouts/application.html.erb`.
11
+
MARKDOWN
12
+
13
+
discussion_box "What's an application layout?", <<-MARKDOWN
14
+
None of the view pages that we've been working with so far have had the necessary structure for a valid HTML page. No `<head>` or `<body>` or JavaScript or CSS tags. This application layout file is where all of that stuff exists!
15
+
16
+
* How is this page related to the individual page content? Try comparing the source in the browser to this file, and see where the individual page's code starts showing up.
17
+
* If you add something (say, an h1) to this file, where will it show up?
18
+
MARKDOWN
19
+
20
+
message <<-MARKDOWN
21
+
# Add the markup
22
+
Copying and pasting a nav bar onto every. single. page. of our application would be the worst. So instead of putting it into our individual pages, we'll add the nav bar HTML to this file!
23
+
24
+
Add the following code **above** the line `<%= yield %>`
25
+
MARKDOWN
26
+
27
+
source_code :erb,
28
+
<<-ERB
29
+
<header>
30
+
<div class="left-nav">
31
+
<ul>
32
+
<li><%= link_to "Home", jobs_path %></li>
33
+
</ul>
34
+
</div>
35
+
<div class="right-nav">
36
+
<ul>
37
+
<li><%= link_to "Add Job", new_job_path %></li>
38
+
</ul>
39
+
</div>
40
+
<div class="clearfix"></div>
41
+
</header>
42
+
ERB
43
+
44
+
message <<-MARKDOWN
45
+
Things to note:
46
+
47
+
* We use Rails link helpers instead of typing in `<a href="/jobs/new">Add Job</a>`. The reason is that if the url of a page changes in the future, without the link helpers, we’d have to update every single place we link to that page. The link helpers abstract the actual url for us, so if we change a specific url, we update the address in only one place, in the routes file; and all the places we link to it stay the same.
48
+
* The `<header>` tag is HTML5. Aren't we cool!?
49
+
50
+
So let's take a look at it. Refresh, and ... isn't that horrifying looking? Let's make it look like a nav, albeit a very ugly one.
51
+
52
+
# Add the styles
53
+
54
+
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.
55
+
56
+
So let's delete that file and make a new one.
57
+
58
+
Actually, we're going to make two new ones. Under `app/assets/stylesheets`, add `global.css.scss`:
59
+
MARKDOWN
60
+
61
+
source_code :CSS,
62
+
<<-CSS
63
+
body {
64
+
margin: 0;
65
+
}
66
+
67
+
.content {
68
+
margin: 10px auto;
69
+
width: 70%;
70
+
}
71
+
72
+
.clearfix {
73
+
clear: both;
74
+
}
75
+
CSS
76
+
77
+
message <<-MARKDOWN
78
+
This is where we put styles that affect the whole app.
79
+
80
+
Now, under `app/assets/stylesheets`, add `nav.css.scss`:
81
+
MARKDOWN
82
+
83
+
source_code :CSS,
84
+
<<-CSS
85
+
header {
86
+
background: grey;
87
+
padding: 10px;
88
+
ul {
89
+
margin: 0;
90
+
padding: 0;
91
+
list-style-type: none;
92
+
}
93
+
a {
94
+
text-decoration: none;
95
+
font-weight: bold;
96
+
color: white;
97
+
}
98
+
}
99
+
100
+
.left-nav {
101
+
float: left;
102
+
}
103
+
104
+
.right-nav {
105
+
float: right;
106
+
}
107
+
CSS
108
+
109
+
message <<-MARKDOWN
110
+
Refresh the page, and ... it's still totally horrific. This CSS is not going to win any awards.
111
+
112
+
But it's usable, and we can keep working on that later. It turns out sometimes job descriptions have typos, and need to be updated. Let's make that possible!
* Use Rails form helpers to create the HTML for the form
5
+
* Learn to use the Rails server output for great good
6
+
* Update the controller so that the form saves submissions to the database
7
+
* Learn about the beauty of the params hash
8
+
9
+
# Side Note: Web forms are not perfectly straightfoward
10
+
11
+
Web forms. They're like, the most basic thing about the internet, other than cat gifs, right? So they should be straightforward, right? WRONG! They are exciting and just complicated enough to bake your noodle a bit. But don't worry, Rails has strong opinions about forms, so we won't have to do _too_ much typing.
12
+
13
+
# Setting up the page for the form
14
+
15
+
Let's take a look at our handy routes, which can help us figure out what we need to do. We're going to follow the same pattern that we did for the main `/jobs` page.
16
+
17
+
First, visit the routing page at <http://localhost:3000/rails/info>, and find the route for `/jobs/new`.
18
+
19
+
That's the one we want for our form. Let's visit that page and see what it says: <http://localhost:3000/jobs/new>.
20
+
MARKDOWN
21
+
22
+
error_box "The action 'new' could not be found for JobsController"
23
+
24
+
source_code_with_message "This looks familiar! Let's add a method to our jobs controller called `new`:", :ruby,
25
+
<<-RUBY
26
+
def new
27
+
end
28
+
RUBY
29
+
30
+
message <<-MARKDOWN
31
+
Refresh <http://localhost:3000/jobs/new>, and we see that familiar "Template is missing" error. So, let's add that template.
32
+
33
+
Under app/views/jobs, add a file called new.html.erb. This will be our form. Add some html to the template to keep things moving along:
34
+
MARKDOWN
35
+
36
+
source_code :html,
37
+
<<-HTML
38
+
<h1>Add a job</h1>
39
+
HTML
40
+
41
+
message <<-MARKDOWN
42
+
Refresh again: <http://localhost:3000/jobs/new>
43
+
44
+
# Add a form!
45
+
46
+
Rails has handy helpers for forms. We'll be using a form helper specifically made for use with a model.
47
+
MARKDOWN
48
+
49
+
source_code_with_message "In the view file you were just editing (app/views/jobs/new), add the following code:", :erb,
50
+
<<-ERB
51
+
<%= form_for @job do |f| %>
52
+
<div>
53
+
<%= f.label :title %>
54
+
<%= f.text_field :title %>
55
+
</div>
56
+
<div>
57
+
<%= f.label :description %>
58
+
<%= f.text_area :description, size: '60x6' %>
59
+
</div>
60
+
<div>
61
+
<%= f.submit %>
62
+
</div>
63
+
<% end %>
64
+
ERB
65
+
66
+
message "Save that file, and reload the page."
67
+
68
+
error_box "First argument in form cannot contain nil or be empty"
69
+
70
+
message "What do you think that means? What is the first argument? What is it supposed to be? In order for the method `form_for` to do its job, it has to know about the thing that it's building the form for. So we need to give it an object. We do that in the controller."
71
+
72
+
source_code_with_message "Open up the jobs_controller, and update the new method:", :ruby,
73
+
<<-RUBY
74
+
def new
75
+
@job = Job.new
76
+
end
77
+
RUBY
78
+
79
+
message "Now we should see our mostly unstyled form!"
80
+
81
+
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."
0 commit comments