lecture #4: style and grace
Alright, so now that you've got multiple models you might want to split them up into different files in your /models
folder. This will introduce you to several fun new things
mongoose.connect
can only be called once. You only establish one connection to your database. You want to put it in app.configure
app.configure(function(){
app.set('port', process.env.PORT || 3000);
...
mongoose.connect(process.env.MONGOLAB_URI || 'mongodb://localhost/burgers');
});
But say you only have one models.js
file that holds all your models. You should still put your mongoose.connect
in your app.configure
. It was my fault that I didn't put it in there as an example in the first place. I would have failed my own code review.
BUT now that you have only one models.js
file and a bunch of models, you're going to need to export all of the different models. You need to explicitly state what is the name of each thing you're exporting
module.exports.Ingredient = Ingredient;
module.exports.Order = Order;
If we take the previous homework as an example, the .populate
query allows you to have a order
object and grab the associated ingredient
objects. So you could do something like this
var OrderSchema = new Schema({
_ingredients : [{ type: Schema.Types.ObjectId, ref: 'Ingredient' }]
});
Order.findOne().populate('_ingredients').exec(...)
The Mongoose doc on populate is actually really well written on this, so I won't bother repeating it here.
If you ever work in industry, you'll be dropped into a huge code base with no clue what's going on and be expected to fix bugs. The architecture will be weird and shitty as a result of being patched by a lot of people over months/years. It will make no sense.
When this happens you resort to the best debugging tool ever: guessing and logging.
Use console.log There is a werid error message appearing. There will usually be a stack trace that looks like this
TypeError: object is not a function
at exports.create_order (/Users/jialiya/projects/test/olinjs-3-hw/routes/ingredient.js:26:15)
at callbacks (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/lib/router/index.js:161:37)
at param (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/lib/router/index.js:135:11)
at pass (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/lib/router/index.js:142:5)
at Router._dispatch (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/lib/router/index.js:170:5)
at Object.router (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/lib/router/index.js:33:10)
at next (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/node_modules/connect/lib/proto.js:199:15)
at Object.methodOverride [as handle] (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/node_modules/connect/lib/middleware/methodOverride.js:37:5)
at next (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/node_modules/connect/lib/proto.js:199:15)
at multipart (/Users/jialiya/projects/test/olinjs-3-hw/node_modules/express/node_modules/connect/lib/middleware/multipart.js:70:58)
Oh balls looks like you've got a bunch of errors to trace through, right? Well... maybe. Every stack trace looks like this, from small typos to actual errors in your npm modules. But seriously, it will never be a problem with your modules. It'll almost always be in your code, so all you really need to check is the first few lines.
Furthermore, this error is gonna be real hard to look up on Google. It's too specific to your app.
Start by looking at the 26th line around exports.create_order
.
Do a console.log
of everything that might be important. Something that node expects to be an object is actually just a function. Find what that is and you've found your error.
Check for consistancy You guys all have working Heroku apps that does most of this stuff by now. If all of the sudden you can't deploy your stuff to Heroku look for what's different between your current project and your previous ones.
Chrome inspect & the Chrome JS console Use this for all your client side debugging. Right click on any element and click inspect. It'll bring up the most useful panel of your life.
CSS is what makes websites look pretty. It's the difference between this:
and this:
For these two websites the html is the same, the Javascript running on the browser is the same, everything which went on on the server side to render this page is the same. The only difference is that one is completely lacking css styling.
So far we've been making webpages without styling, so they look alot like ugly twitter shown above. Now we're gonna start learning how to pretty them up. Take the site which you made for HW3.
Lets add some style to it!
So open up the new_ingredient.html file in this repo, and we'll just change some css attibrutes, for a few elements. To do this we'll use the chrome inspector.
- font-size: 32px
- text-align: center
- font-family: Lucida Sans Unicode, Lucida Grande, sans-serif
- border: 4px solid black
- border-radius: 10px
- border: 2px solid green
- border: 2px solid red
- border: none
- padding-bottom: 12px
- background-image: url(http://maxim061156.files.wordpress.com/2012/09/santaclaus15.jpg)
And voila! look at our beatiful website!
So this is all great and all, but refresh the page, and what happens? All of our hard work is gone. So how do we make permanent css styles? Using a stylesheet. Fork this repo, pull it, the open up a text editor and lets make one.