johnstonbl01 / clementinejs Goto Github PK

View Code? Open in Web Editor NEW

322.0 322.0 55.0 2.22 MB

The elegant and lightweight full stack JavaScript boilerplate.

Home Page: http://www.clementinejs.com

JavaScript 72.98% CSS 27.02%

clementinejs's People

Contributors

Stargazers

Watchers

clementinejs's Issues

Typo #2 in Refactoring Routes section

Add comma between "Hello" and "world!" (placed in bold below) in second to last sentence of this section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#RefactoringRoutes)

"Point the browser to localhost:3000 and you should again see "Hello**,** world!""

EDIT: another solution would be to fix the index.html section of this tutorial so that the user types in:

<body>
        <p>Hello world!</p>
</body>

(without comma) instead of

<body>
        <p>Hello, world!</p>
</body>

Add Manualfork as an installation method

I recently developed/released a repo cloning tool called manualfork which can greatly simplify the cloning process for this template. I've included the links to test it here if you want to try it out, I've already tested it myself with clementine and it seems to do the trick pretty well.

Let me know what you think.

http://manualfork.therebelrobot.com/?source=johnstonbl01/clementinejs

bash: mongod: command not found

https://clone-baoniu.c9users.io/
at c9.com
clone from https://github.com/johnstonbl01/clementinejs

$:mongod --smallfiles
res
bash: mongod: command not found

Suggest adding a space between "fixes" and "#1234" in Contributing page

The Contributing page (http://www.clementinejs.com/developers/contributing.html#PullRequests) asks contributors to type "(fixes#1234)" at the end of description but by not leaving a space between "fixes" and the issue number, you are not allowing Github to recognize the issue number (the Github autocomplete as you type in the issue number does not put up without a space).

Possible typo in Refactoring Routes section

Location of issue
"Now we need to pass the Express application as an argument to our route function object." sentence in:
http://www.clementinejs.com/tutorials/tutorial-beginner.html#RefactoringRoutes

EDIT: also sentence: "This will allow us to use Express functionality within the scope of our new route function."

Issue
I think "route" should be "routes"

Suggested Solution
Fix typo. Unless of course you really did mean "route" and not "routes"

Gulp minify task can use wildcards to auto pickup controller and directive javascript files.

Currently any new directive or controller needs to be added to the array inside the minify task. Using wildcards to find all app/controllers/*.client.js and app/directives/*.js would let them be found automatically.

Add <html> tags to code block in Adding Addtional Elements to Index.html section

First code of the "Adding Additional Elements to Index.html" section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#AddingAdditionalElementstoIndex.html) is missing <html> tags and <!DOCTYPE html> .

Should consider adding them in since it may look to the user as if they need to delete them from the file.

I can do this tonight and send PR.

Show where in the server.js file to place code snippet

In Adding Additional Elements to Index.html section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#AddingAdditionalElementstoIndex.html):

You do not specify where in the server.js file to place the following line of code:
app.use('/public', express.static(process.cwd() + '/public'));

This is very important. I would suggest adopting the way the https://www.railstutorial.org/book does it by showing parts of the file with ... for the parts that already exist. Example:

This can be solved by adding app.use('/public', express.static(process.cwd() + '/public')); to the server.js file as shown below:

server.js

'use strict';
.
.
.
routes(app);

app.use('/public', express.static(process.cwd() + '/public'));

app.listen(8080, function() {...
.
.
.

Code typos/omissions - Setting Up the Server-Side Controller section

First code block in Setting Up the Server-Side Controller section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#SettingUptheServer-SideController) has the following line of code that is not indented according to the code guidelines:
thow err;

It is also missing a semicolon after the closing parenthesis of clicks.findOne({}, clickProjection... ) and an unnecessary semicolon after the closing curly bracket of function clickHandler (db) { ... }

The last bullet in the unordered list that explains each line of code (res.json(results); - Send a response to the browser with a JSON version of the results array.) is using results(plural) in two places instead of what's actually in the code which is result (singular). Change that bullet to read as follows: res.json(result); - Send a response to the browser with a JSON version of the result array.

Logo in Beginner Tutorial page points to 404 page.

The Clementine logo at the top of the following page...:
http://www.clementinejs.com/tutorials/tutorial-beginner.html

...points to:
http://www.clementinejs.com/home.html

Which is 404.

TypeError: db.collection is not a function

Thank you for this boilerplate and the tutorial, it helped me understand how the back-end works and how it tied together.

I'm following the Clementine.js Beginner Tutorial, and I got an error in the Setting Up the Server-Side Controller section.

TypeError: db.collection is not a function

I found out that the tutorial expects to install MongoDB version 2, but I just installed the version 3.

"dependencies": {
  "express": "^4.16.3",
  "mongodb": "^3.1.0-beta4"
}

I found this StackOverflow answer and this changes between version 2 and version 3 to fix the error using the version 3 of MongoDB.

Here's my updated server.js with MongoDB version 3 installed:

'use strict';

var express = require('express');
var routes = require('./app/routes/index.js');
var mongo = require('mongodb').MongoClient;

var app = express();

mongo.connect('mongodb://localhost:27017/clementinejs', function (err, client) {
  if (err) {
    throw new Error('Database failed to connect!');
  } else {
    console.log('MongoDB successfully connected on port 27017.');
  }

  var db = client.db('clementinejs');

  app.use('/public', express.static(process.cwd() + '/public'));
  app.use('/controllers', express.static(process.cwd() + '/app/controllers'));

  routes(app, db);

  app.listen(3000, function () {
    console.log('Listening on port 3000...');
  });
});

I hope it helps. Let me know if you want to upgrade to version 3 of MongoDB I would like to send a pull request for this.

First issue! index.js should be created in public folder

In the refactoring routes portion, index.js is first created in teh routes subdirectory, then immediately it's moved to the public folder.

Typo sendFile should be sendfile

In the Refactoring Routes section the command res.sendFile(process.cwd() + '/index.html'); should not have the F in caps. Instead should be res.sendfile(process.cwd() + '/index.html');

Typo in Refactoring Routes section

Typo. Fix in bold:

"This is an alternative to app.get, and let's us bundle together several types of routes for a single page request (this will become ~~apparently~~ apparent later in the tutorial). "

Passport Tutorial: githubAuth vs gitHubAuth (Case is different)

In the auth.js code example the object is gitHubAuth but in passport.js it referenced as githubAuth. This causes an 'undefined' error when running the app.

Add build task to gulpfile to separate dev and prod environments.

Having a separate build destination allows for clean and easy deployment, especially to services like Heroku.

Typos/Grammar in Connecting to MongoDB section

(http://www.clementinejs.com/tutorials/tutorial-beginner.html#ConnectingtoMongoDB)

Second sentence missing "to". Added it here in bold: "The API will simply be a way for us to make our database data available to the front-end of the application.

Added letters in bold: "This function takes an error as the first argument, and the database object as the second argument."

Error with sendFile on c9.io

I was given an error that sendFile was not a function when trying to serve the first file. Strangely, even though I am using the newest Express version, the deprecated sendfile works. Also I was able to use express's static function which worked fine as well: app.use('/', express.static(__dirname));. I'm not sure if this is a local issue or not.

Clementine logo not loading when using curl to upload image to C9

When you use the curl command to upload the Clementine logo to C9, the image does not show up. and you get the following error when you try to open it in C9:

I suggest making a note of this in the tutorial just in case other users try to do the same thing.

Database Fails To Connect?

Dear John,

I already expressed my thanks and admiration on Twitter but I reiterate: this boilerplate and tutorial you have created is one of the best resources I have encountered in my short journey to become a developer.

I am following the basic tutorial and I have hit a roadblock. I got to the step where I connect the front end to the database but, even after triple checking that I have exactly the same code in my files (and after that, directly pasting your code for server.js) I get the following error as the err in the mongo.connect callback function:
[MongoError: failed to connect to server [localhost:27017] on first connect]

I have double checked that I have MongoDB installed.

For reference, here is the current state of my boilerplate is found here.

I will keep trying to solve it on my own but I thought it would be nice for you and maybe others to know.

Happy 2017!

nodejs has new download page

On the page:
http://www.clementinejs.com/tutorials/tutorial-beginner.html
This link needs an update to the new download page: "Head to the Node.js install page. Download the appropriate file follow the installation instructions."

Here's the current nodejs download link being used:
https://nodejs.org/download/

Update that link to the new nodejs download page:
https://nodejs.org/en/download/

Consider mentioning scenario where .gitignore is not present

When I reached the .gitignore section in your tutorial (http://www.clementinejs.com/tutorials/tutorial-beginner.html) I looked in my directory and could not find a .gitignore file in my root directory (even with hidden files shown). While it may seem obvious to experienced coders, you may want to mention the fact that if the user does not have such a file, that they can create one but sending touch .gitignore and then opening the file using nano .gitignore to add the node_modules/.

By adding this text, you let the user know that just because they don't have this .gitignore file does not mean they did something wrong in the previous steps (which is what I assume a lot of times when I am going through a tutorial and what I see does not match what the tutorial mentions).

Typo in Simple Node Server section

Location of issue
Last sentence in the following section:
http://www.clementinejs.com/tutorials/tutorial-beginner.html#SimpleNodeServer

Issue
Point the browser to localhost:3000 and you should again see "Hello world!" should read Point the browser to localhost:3000 and you should again see "Hello, world!" (add comma)

Suggested Solution
Fix typo. Will submit PR tonight.

FCC corrupted database

I have a corrupted database (mongodb) using the clementinejs. I need to know how to reset it or how to pull this database out of the "node_modules" folder. I see this becoming a huge problem for future FCC peps. when I do a git from the server with last known good configuration I still have a corrupted db. I think this is because of the ".gitignore" file.

Responsive Design and Hover State

I think it would be useful to add a small amount of CSS to produce a mobile version of the UI and a hover state for the buttons. I have have written this script and will open a pull request. The attached files are before-after screenshots of the mobile UI.

Typo/Grammar errors in CreateControllerFunctions section

Second bullet in the second unordered list of CreateControllerFunctions (http://www.clementinejs.com/tutorials/tutorial-beginner.html#CreateControllerFunctions) section:
-The url that the function ~~make~~ makes the HTTP request to

Two paragraphs after the unordered list mentioned above:
"xmlhttp.onreadystatechange = function () { ... }: Here we are assigning a callback ~~funciton~~ function to the property onreadystatechange."

Further down, the sentence right before the clickController.client.js code block:
"Next, let's write a small function that will update the HTML ~~<span~~ element."
and again further down:
"Next, we'll take the clickNbr element (which we defined by using var clickNbr earlier) and use the .innerHTML property to define the contents of the ~~<span~~ element and set it equal to the clicks property of our newly-created JSON object."

Deprecated feature in Mongoose

Server.js section in Clementine.js Passport Authentication Tutorial

the directions if followed gives me a deprecation warning if using following code. mongoose.connect('mongodb://localhost:27017/clementinejs');

changing code to following solves this issue.
mongoose.connect('mongodb://localhost:27017/clementinejs', {useMongooseClient: true});

Include C9 setup info or link to setup info in beginner tutorial

There is no mention of C9 setup in beginner tutorial even though you have one here (http://www.clementinejs.com/versions/standard.html#c9.ioSetup). Maybe provide a link to that page in the beginning of the beginner tutorial section.

Using JQuery in Client side controller (clickController.client.js)

I started following tutorials for clementinejs through official tutorial and when i got to part where you define methods related to loading files after dom is loaded and making ajax requests, i was a little too overwhelmed because i never had to deal with that before and i always took help from jquery.

So, i completed the tutorial but using jquery instead and i thought if anybody else would like to do so too.

Variable Confusion in FCC clementine tutorial

referring to codeblock 2 of Refactor Server Side Controller

following the code block the explanation says:

clicks replaced with Click
this is to accomodate our newly imported Mongoose model.

Click should be Clicks

Github application signup instructions are out of date

Github has updated the user settings UI. Registering a GitHub application is fairly similar just the names of a few things has changed. The passport setup instructions should be updated. Also, a new screenshot might be a good idea.

Passport Tutorial: Defining query variable in clickHandler.server.js

var query = { 'github.id': req.user.github.id }; This is in the tutorial for clickHandler.

This doesn't work because req is undefined at this point (I think).

I looked at the source code and looks like you just put the query in each of the functions i.e.

.findOne({ 'github.id': req.user.github.id }, { '_id': false })

Code block formatting

Location of issue
Third code block in the following section:
http://www.clementinejs.com/tutorials/tutorial-beginner.html#SimpleNodeServer

Issue
<html> tag is indented too much (does not line up with closing tag)

Suggested Solution
Will work on it tonight and submit PR 😉

Clementine logo image link

In the beginner tutorial section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#AddingAdditionalElementstoIndex.html):

There is a link to the Clementine logo so the user can download it and place it in their img folder. This link leads here: https://github.com/johnstonbl01/clementinejs-angular/blob/master/public/img/clementine_150.png. If you try to curl this url, it gives you a bogus image.

Suggestion: have the link in the document point here: https://raw.githubusercontent.com/johnstonbl01/clementinejs-angular/master/public/img/clementine_150.png which is the actual location of the image file so that the user can then curl it.

Typo in the Simple Node Server section

(http://www.clementinejs.com/tutorials/tutorial-beginner.html#SimpleNodeServer)

The new text you added to solve issue #18 has a typo:

"For now, we'll need to stop and restart the Node server each time we make a change. To stop the server when it's running, use Ctrl+C in the terminal window. We can restart the Node server by simply typing $ node ~~server~~ server.js in the terminal window again."

AuthorizationError: The redirect_uri MUST match the registered callback URL for this application.

I've figured it out, I should use "localhost" instead of "127.0.0.1" on my OAuth Application Settings.

The following line is ambiguous: "At the top of the file: "

Location of issue
Second sentence between the first two code blocks in the following section:
http://www.clementinejs.com/tutorials/tutorial-beginner.html#RefactoringRoutes

Issue
The following line is ambiguous: "At the top of the file: "

Suggested Solution
State which file you are referring to (server.js) since it may not be obvious to the user which of the two .js files you are referring to.

~~I can submit PR for this later tonight.~~

Have user stop the node server.js app and tell them how

Location of issue
Somewhere in this section:
http://www.clementinejs.com/tutorials/tutorial-beginner.html#SimpleNodeServer

Issue
Tutorial does not explicitly instruct user to stop the running app you had them start using $ node server.js even though later on in this section you instruct them to start the app up again.

Suggested Solution
I suggest adding a line or two in between the two "hello world" runs explicitly tell user to stop the app and show them how (Ctrl+C).

Documentation: Main page links are broken

The links to the following pages are broken:

About
Tutorials
Docs
Contribute

Apparently the {{ site.baseurl }} isn't being replaced by the correct value so the links are all like:

http://johnstonbl01.github.io/clementinejs/{{ site.baseurl }}/about.html

No instruction explicitly telling the user to save a copy of the Clementine logo to folder

In Adding Additional Elements to Index.html section (http://www.clementinejs.com/tutorials/tutorial-beginner.html#AddingAdditionalElementstoIndex.html) there are no explicit instructions telling user to save Clementine logo to folder. Consider adding these instructions for users that are just following along and expecting same results you show later (with the logo present on the page).

johnstonbl01 / clementinejs Goto Github PK

clementinejs's People

Contributors

Stargazers

Watchers

Forkers

clementinejs's Issues

Recommend Projects

Recommend Topics

Recommend Org