Skip to content

New marketing copy on homepage #7012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sophiebits merged 1 commit into from
Jun 11, 2016
Merged

New marketing copy on homepage #7012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/css/react.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,8 +340,8 @@ h1, h2, h3, h4, h5, h6 {
h3 {
color: $darkColor;
font-size: 24px;
line-height: 28px;
font-weight: normal;
text-transform: uppercase;
}
p {
font-size: 16px;
Expand Down
24 changes: 9 additions & 15 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,19 @@ id: home
<section class="light home-section">
<div class="marketing-row">
<div class="marketing-col">
<h3>Just the UI</h3>
<p>
Lots of people use React as the V in MVC.
Since React makes no assumptions about the rest of your technology stack,
it&apos;s easy to try it out on a small feature in an existing project.
</p>
<h3>Declarative</h3>
<p>React makes it painless to update your views when your data changes. Just return the views to display for each possible state, and React handles the updates.</p>
Copy link
Copy Markdown
Contributor

@nsfmc nsfmc Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also as a note, the Just return... is the most awkward sentence here, i know what you're saying but i don't think the meaning is totally clear to somebody that hasn't internalized thinking in react.

Copy link
Copy Markdown
Collaborator Author

@sophiebits sophiebits Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nsfmc Suggestions? @keyanzhang wanted a bit more of the old "Virtual DOM" point so might also add something about "determines what changed and efficiently handles the updates" or similar…

Copy link
Copy Markdown
Contributor

@nsfmc nsfmc Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i was thinking something like

Design simple views for each state in your application and React will efficiently manage updating & rendering just the right components when your data changes.

<p>Declarative views make your code more predictable, simpler to understand, and easier to debug.</p>
</div>
<div class="marketing-col">
<h3>Virtual DOM</h3>
<p>
React abstracts away the DOM, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using <a href="https://facebook.github.io/react-native/">React Native</a>.
</p>
<h3>Component-Based</h3>
<p>With React, create encapsulated components that manage their own state, then compose them to build complex UIs.</p>
<p>Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep your state out of the DOM.</p>
</div>
<div class="marketing-col">
<h3>Data flow</h3>
<p>
React implements one-way reactive data flow which reduces boilerplate and is
easier to reason about than traditional data binding.
</p>
<h3>Learn Once, Write Anywhere</h3>
<p>We don't make assumptions about the rest of your technology stack – you can build new features in React without rewriting your existing code.</p>
Copy link
Copy Markdown
Collaborator

@gaearon gaearon Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: since it's the main copy on the page, maybe worth using em dash.

Copy link
Copy Markdown
Collaborator Author

@sophiebits sophiebits Jun 11, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En dash with spaces (which I have here) and em dash with no spaces are both generally considered correct in this context. I've also wanted to write an em dash with spaces in the past but I've rarely, if ever, found style guides that encourage it.

Copy link
Copy Markdown
Contributor

@nsfmc nsfmc Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spicyj sorry to randomly bikeshed my way into this discussion, but my experience was that the spaceless em was mostly advocated to me by designers that had done work in europe (since it's apparently a common newspaper pattern) whereas the en/space is more common here (and among my mostly american faculty for whatever reason). follow your heart, ben (although i also put a vote in for the hard em dash without spaces since i always feel it adds an air of immediacy in the break 😸 ).

Copy link
Copy Markdown
Collaborator

@gaearon gaearon Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not an expert on this. I thought en dashes are mostly reserved for number ranges:

http://english.stackexchange.com/a/2126
http://www.thepunctuationguide.com/en-dash.html
http://www.chicagomanualofstyle.org/qanda/data/faq/topics/HyphensEnDashesEmDashes/faq0002.html

I haven't found a result recommending en dash to be used to delimit a sentence yet. On the contrary, all the manuals I found so far recommend em dash for this.

The only difference is they mostly recommend using em dash without spaces. I agree this looks a bit pretentious on the web, and this seems to confirm it's fine to surround em with spaces:

Most newspapers — and all that follow AP style — insert a space before and after the em dash.

Where can I read about using en dash instead of em in this context? Maybe this is some newer usage I'm not familiar with?

Copy link
Copy Markdown
Contributor

@nsfmc nsfmc Jun 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one "authority" (which agrees with alpert in this case) is robert bringhurst's elements of typographic style. my v3.0 copy says

5.2.1 Use spaced en dashes – rather than close-set em dashes or spaced hyphens – to set off phrases.

I'm not much of a prescriptivist, sadly, i just like the look of the close-set em dashes (especially if the em dash in the font doesn't include any sidebearing space around the glyph). i'm definitely of the school of thought that it's good to explore any arguments for/against and then make whatever decision you think works best in this sort of case (if you've commissioned a typeface for close setting em dashes (or even if you haven't), i think you should be allowed to use them however you like, like wearing sneakers with a suit, which some people consider untoward and others perceive as a mark of a kind of fashion).

Copy link
Copy Markdown
Collaborator Author

@sophiebits sophiebits Jun 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon The Stack Exchange link you used also mentions " – " as the last bullet point for en dashes and the Wikipedia page it links to uses the same construction multiple times in its prose.

Copy link
Copy Markdown
Contributor

@calebmer calebmer Jun 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just happy someone cares about using em dashes 😊

<p>React can also render on the server using Node and power mobile apps using <a href="https://facebook.github.io/react-native/">React Native</a>.</p>
</div>
</div>
</section>
Expand Down