Adding Getting Started page #29

dhmlau · 2018-07-27T18:03:36Z

Fixes #22

raymondfeng · 2018-08-07T21:38:28Z

Should it be merged into gh-pages or master?

dhmlau · 2018-08-07T23:32:41Z

we're using the master branch

virkt25

Awesome effort!! Just a few things seem off from the spec but should be a quick fix 😇

virkt25 · 2018-08-08T03:46:15Z

css/getting-started.css

+    color: black;
+    background-color: var(--color-white-xd);
+    padding: 5px;
+}


Need a newline here. I think we need to set up linting for this repository.

let me try to set up linting or get some help from you on setting this up. thanks.

virkt25 · 2018-08-08T03:46:41Z

css/loopback.css

+  width: 100%;
+  position: relative;
+  top: 40%;
+}


virkt25 · 2018-08-08T03:51:38Z

getting-started.html

+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Have you installed Node.js?</h3>
+                    <p class="p large">Before you install LoopBack, make sure to download and install Node.js (version 8.x.x or higher), a JavaScript


This should say version 8.9.x or higher ... and maybe we should abbreviate version to v? v 8.9.x or higher?

virkt25 · 2018-08-08T03:52:24Z

getting-started.html

+                        runtime. </p>
+                </div>
+                <div class="col-md-6">
+                    <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px" role="button" href="https://nodejs.org/en/download/">Install Node.js</a>


Shouldn't need inline styling for this button! Also, please check the hover state of this button, something seems wrong with the border.

for some reason, the border color is changed when it's in hover. will fix that. thx

virkt25 · 2018-08-08T03:54:30Z

getting-started.html

+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <p class="code-snippet" style="top:20%">


Code snippet should go in a <pre> block so space is preserved. Any reason to not use that here?

will fix this and other occurrences. thx

virkt25 · 2018-08-08T03:56:09Z

getting-started.html

+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <p class="code-snippet">


This should be a <pre> block to preserve spacing ... and spacing / alignment should be fixed, for example on the last line the brackets shouldn't be there but rather moved to their own line and the return statement should be indented two levels in while the function is indented one level in.

virkt25 · 2018-08-08T03:58:20Z

getting-started.html

+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="p large" style="position:relative; top:50%">Answer the prompts as follows.


This isn't aligned with the code block on the right. Same goes for the other sections.

not sure if i know what you mean. you mean it's not aligned vertically?

i've made it now so that the left text is somewhat in the middle relatively to the right column.

virkt25 · 2018-08-08T04:00:58Z

getting-started.html

+        <div style="height:80px"></div>
+        <h2>Ready to build with LoopBack?</h2>
+        <br>
+        <h5 style="font-weight: normal">Let's get you eqipped</h5>


Need a . at the end of the sentence.

tagging along here:
eqipped?
did you mean equipped?

OMG I knew something about the word looked off but couldn't figure out what.

virkt25 · 2018-08-08T04:02:00Z

getting-started.html

+        </div>
+    </nav>
+    <!-- Header -->
+    <div class="gs-masthead">


This background image needs to be muted -- spec seems to have an opacity overlay from top to bottom which gives better readability of the text on this (especially the smaller second line). Please implement that!

vs.

I'll change the opacity from 0.4 to 0.2 in the new version. Hope it's better.

Well opacity applies to the entire image right? I think you need a gradient ... as it's lighter in the top and less so in the bottom.

It's looks amazing with the gradient! 🔥

virkt25 · 2018-08-08T04:02:14Z

getting-started.html

+    <!-- Header -->
+    <div class="gs-masthead">
+        <div class="container-fluid"></div>
+        <div style="height:80px"></div>


Inline styles should be avoided as much as possible.

dhmlau · 2018-08-09T18:18:05Z

@virkt25 @shimks , I've made a few more changes according to your feedback (@shimks gave his verbally):

spacing below the step title
hairline under the navbar
gradient opacity on the main image of index and getting started page
code snippet formatting

b-admike

Can we align the text for the following?

Other than that, LGTM

dhmlau · 2018-08-09T19:45:51Z

Thx @b-admike. Fixed it.

virkt25

Great job!! Almost there. Some minor nitpicks.

virkt25 · 2018-08-09T21:18:40Z

getting-started.html

+                        <p class="p large">Follow the tutorial to create a real-world application with LoopBack 4.</h3>
+                </div>
+                <div class="col-md-4">
+                    <a class="btn btn-primary" role="button" style="padding-left:60px; padding-right:60px" href=https://loopback.io/doc/en/lb4/todo-tutorial.html>View Tutorial</a>


Can you confirm the hover effect for this button? Right now it just changes the font color.

confirmed with @shimks , only font color is changed. I will submit another PR for the hover spec that I got from Cody after his initial file.

virkt25 · 2018-08-09T21:19:20Z

getting-started.html

+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Test your application</h3>
+                    <p class="p large step">Start the application using <code>npm start</code>.


The background for <code> blocks here and elsewhere looks more darker in the spec.

hm. should be the same. it's "White-XD"

virkt25 · 2018-08-09T21:20:09Z

getting-started.html

+                    </p>
+                </div>
+                <div class="col-md-6">
+                    Visit <a class="link" href="http://127.0.0.1:3000/hello">http://127.0.0.1:3000/hello</a> to see <code>Hello world!</code>


Confirm hover effect for links. Right now it just becomes a dark blue + underline (this is the default browser style I think) ... looks out of place imo.

it should be dark blue but no underline. will remove the underline text decoration.

virkt25 · 2018-08-09T21:20:53Z

getting-started.html

+            <hr class="hairline">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="p large" style="position:relative;top:40%">Paste the following contents into the file <code>/src/controllers/hello.controller.ts</code>.


This is not aligned to be in the middle of the code block on the right.

virkt25 · 2018-08-09T21:22:10Z

getting-started.html

+<code-blue> $</code-blue> lb4 controller
+<code-blue>[?]</code-blue> Controller class name: hello
+<code-blue>[?]</code-blue> What kind of controller would you like to generate? Empty Controller
+    create src/controllers/hello.controller.ts 


Latest version of the CLI should also be updating the index.ts file and that should be shown here.

updated with the new output.

virkt25 · 2018-08-09T21:23:08Z

getting-started.html

+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Install LoopBack 4 CLI</h3>
+                    <p class="p large step">The LoopBack 4 CLI is a command-line interface that can scaffold a project or extension. The CLI provides


Good in terms of spec but we should see if we can reduce the amount of text here, it's a bit overwhelming.

would like to do it in another PR.

virkt25 · 2018-08-09T21:23:30Z

getting-started.html

+                        runtime. </p>
+                </div>
+                <div class="col-md-6">
+                    <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 10%" role="button" href="https://nodejs.org/en/download/">Install Node.js</a>


This button doesn't seem perfectly in the middle of the text to the right.

virkt25 · 2018-08-09T21:23:53Z

getting-started.html

+        </div>
+    </nav>
+    <!-- Header -->
+    <div class="gs-masthead">


It's looks amazing with the gradient! 🔥

Signed-off-by: Diana Lau <dhmlau@ca.ibm.com>

dhmlau force-pushed the gs branch 7 times, most recently from 3a437b0 to c5fb5e2 Compare July 30, 2018 19:48

bajtos mentioned this pull request Aug 1, 2018

Monthly Milestone - August 2018 🍉⛱ loopbackio/loopback-next#1581

Closed

31 tasks

raymondfeng approved these changes Aug 7, 2018

View reviewed changes

virkt25 reviewed Aug 8, 2018

View reviewed changes

dhmlau force-pushed the gs branch 2 times, most recently from 2950819 to 5f9e8f1 Compare August 9, 2018 18:16

dhmlau force-pushed the gs branch 2 times, most recently from fe31fdc to 2755bfd Compare August 9, 2018 18:19

b-admike approved these changes Aug 9, 2018

View reviewed changes

dhmlau force-pushed the gs branch 2 times, most recently from 1822c7f to d4aef89 Compare August 9, 2018 20:53

virkt25 reviewed Aug 9, 2018

View reviewed changes

dhmlau force-pushed the gs branch from 4073184 to f8fea74 Compare August 10, 2018 21:16

add getting started page

f8fea74

Signed-off-by: Diana Lau <dhmlau@ca.ibm.com>

virkt25 approved these changes Aug 10, 2018

View reviewed changes

dhmlau mentioned this pull request Aug 11, 2018

Revisit Getting Started cli sentence #32

Closed

dhmlau merged commit aaee52e into master Aug 11, 2018

dhmlau deleted the gs branch August 11, 2018 13:27

Adding Getting Started page #29

Adding Getting Started page #29

Conversation

dhmlau commented Jul 27, 2018

raymondfeng commented Aug 7, 2018

dhmlau commented Aug 7, 2018

virkt25 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shimks Aug 8, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

virkt25 Aug 8, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dhmlau commented Aug 9, 2018

b-admike left a comment

Choose a reason for hiding this comment

dhmlau commented Aug 9, 2018

virkt25 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shimks Aug 8, 2018 •

edited

virkt25 Aug 8, 2018 •

edited