Pan

See you there :)

In Part 4, we added the functionality to let users check off items. In a similar fashion, we will use a similar implementation the add item feature.

To do this, add (1) an input field for the new item and (2) add button. Here is the updated template code:

Next step is to wire the add button with an event listener and extract the value out of the input field:

'click #add-button' : function(event, template) { // prevent button's default action event.preventDefault(); // get the new item's name var newItem = $("#new-item").val(); // add new item to the database Items.insert({ name:newItem, checked:false }); // clear input field once we have stored the data $("#new-item").val(""); }

There you have it, now users could add items to the list as well. Check out the full code below:

Check all the code together on Github.

In Part 3, we created an Item collection and passed the cursors to our template, which displayed a list of items stored in the database. Going back to the requirements, we still need to add the ability to add items and check off items. To accomplish this, we need to add event listeners to our views. 

Before that could be done, we need to add a boolean check field to the the items and update the seeding code:

if(Items.find().count() === 0) {   Items.insert({ name: "Baguette", checked: false });   Items.insert({ name: "Butter", checked: false });   Items.insert({ name: "Jam", checked: false });   Items.insert({ name: "Coconut", checked: false }); }

For this to take effect shut down the server using Ctrl + C and run:

meteor reset

Next modify the template helper to only display items that has not been checked by adding a condition:

Template.groceryList.helpers({   items: function() {     return Items.find({checked:false});   } });

Since we already have checkbox items in place, we will first add the functionality to hide items that are checked off with this code:

if(Meteor.isClient){ Template.groceryList.events({ 'click li' : function(event, template){ var listItem = event.currentTarget; // get the list item being clicked on $('#'+listItem.id).hide(); // hide li with matching id // update check attribute for the item in the database Items.update(listItem.id, { $set : {checked:true} }, function(error){ // if error occurs print it out if(error){ console.log(error.reason); } }); } }); // the rest of the code ... }

Below is the update code that give users the ability to check off items. View all the code on Github.

Pork Chops in less than 15 minutes - Fast simple and healthy recipes inspired by a busy life. I write from the perspective of being a developer at a small startup where we have to hustle hard.

You really can't avoid staying health and fit without cooking your own meals. Cooking doesn't take long and it's something you could do easily on your own. The only thing that's hard is getting started, so I'll be your online cooking buddy to get you acquainted with the process.

Ingredients:

- pork lion chop - yellow onion - garlic - cooked brown rice - kale

In the previous post, we created our first template and rendered it. In this tutorial, we are going to take advantage of the Blaze Templating Engine by passing it data and adding logic to the template code.

To make the data available to the template, we first need to define a Collection. In groceryList.js, define an Item Collection like so:

Items= new Meteor.Collection('items');

Next we will need to write a template helper to give the groceryList template access to the item data.

if(Meteor.isClient){   Template.groceryList.helpers({     items: function() {       return Items.find();     }   }); }

Since this code's responsibility is to get data from the server to the client it would be considered client code, which we wrap in if(Meteor.isClient) block. In the template helper, items is returned cursors (a pointer to the data) to the item data.

To have data to work with, we will write code to seed the database. This code's purpose is to fill the database with data, which is server side, so we wrap it in if(Meteor.isServer):

if (Meteor.isServer){   if (Items.find().count() === 0) {     Items.insert({ name: "Baguette" });     Items.insert({ name: "Butter" });     Items.insert({ name: "Jam" });     Items.insert({ name: "Coconut" });   } }

Your final code should look like this

Now to update the template to pull data from the Items collection. Update your template code to this:

Notice we are using "{{___}}" in the template code now. This indicates to Blaze that there is data, looping, or logic that needs to be interpreted.

Download the code and check it out yourself from Github.

Before we start coding let us first define the requirements for the Grocery List app with the following features:

ability to add items

ability check off items

Next delete all the boilerplate code from the files to start fresh. In grocery_list.html add the following code.

One thing to notice here is this line

{{> groceryList}}

An important part of Meteor is the Blaze Live Templating Engine, which finds  {{>___}} and renders a template with the corresponding name. In this case it is telling Blaze to render the template with the name groceryList. Blaze can also interpret data objects, loops, logic and produce the equivalent HTML.

From the code we just wrote, we are expecting to see a page with four bullet points listing apples, bananas, bread, and milk. Now in your browser go to the following url to check it out:

http://localhost:3000

Download the code and running yourself from Github.

I've been talking a lot about how Meteor is awesome. I wrote some posts and you could read about it here: Why Beginners Should Start With Meteor and Reasons 4 Meteor. Now that I've been advocating you to try Meteor, let us build a Grocery List app.

If you are brand new to Meteor, here are the preliminaries before we get started, but go checkout Meteor.com for more information.

1. Open Terminal

2. Install Meteor

curl https://install.meteor.com/ | sh

3. Create Grocery List App

meteor create grocery_list

4. Run Server

cd grocery_list meteor

Now that we have a Meteor project, let me simplify Meteor into a few components:

Templates This is the HTML code, which utilizes Blaze Live Templating Engine with Handlebars syntax and allows you to pass in data, add loops, and add logic.

Controllers This is part of the JavaScript code. It has several functions, such as making data objects available to your templates and listening to client events. 

Collections This is also part of the JavaScript code. It is used to define data objects that will be stored in the database. Currently Meteor Collections utilizes MongoDB.

Packages This is third party libraries that could be utilized in your code. The most widely used Meteor package repository is Atmosphere.

Download the source code of what we worked on from Github.

Teaching is something I'm really passionate about. I teach the young programmer community at Stanford Splash and independently host follow up events for interested students. As a product manager at a startup, my time is limited so to continue actively teaching I started this blog.

From starting this blog, I played around with different tools to make it code friendly and I found using Github Gist to be the simplest solution.

Here's how it works in 3 easy steps:

Go to gist.github.com and create a public Gist with your code

Get the embed url

In Tumblr switch your editor to HTML mode and paste the embed code

Then that's it. You can now display code on your programming Tumblr blog. See this article I publish using this method here.

In Staying Fit & Healthy As A Programmer series, I’m advocating you to start cooking your food in order to improve your health and fitness. Check out the articles here:

Staying Fit & Healthy As A Programmer Part 2

Staying Fit & Healthy As A Programmer Part 3

When I suggested that you start cooking your own meals, I realize it could be daunting, so I’m launching the Easy Cooking video series on Youtube to introduce you to simple recipes that don’t take a lot of time or effort and taste great. In this video, learn to cook Chicken Fried Rice in 15 minutes.

I'll be uploading my cooking videos to this Youtube playlist

This is a series of articles discussing tactics I use to stay fit and healthy as a programmer working at a startup company. Part 1, Part2, Part 3

Last article, I talked about how you should start transitioning to cooking your own food. It's essential for fitness and health. If you compare the average person who cooks all his meals versus a person who purchases his meals, it's evident. The restaurant and preprepared food business always tries to squeeze as much marginal profit out as possible, so unfortunately they will find ways to cut down cost and use lower quality ingredients (high fructose corn syrup vs sugar in the US).

This article is dedicated to KALE - no joke. Ok maybe not entirely, but on COARSE VEGETABLES and LEGUMES. It will be a major tool to help you transition to a more healthy eating habit and eventually cooking your own meals. Here's a list of some coarse vegetables and legumes:

kale

broccoli

cauliflower

lentil beans

black beans

pinto beans

Before I get into the rational for coarse vegetable, let me share with you how I use kale with my meals. This will vary from person to person, but this works for me:

Kale with meals I have 3-5 leaves of kale before I have my meal.

Kale with snacks I primarily eat 1-2 leaves of kale for snacks that has processing, such as bread and peanut butter or cookies. 

A lot of people who has shared a meal with me will remember me eating raw kale and it really sticks with them. They always wonder why and I explain it to them. Then the next time I see them they are eating kale. I don't think they always understand my explanation, but I guess from looking at the shape I'm in, they are convinced. Don't take anything I say blindly though. 

The reason why you want to eat coarse vegetables such as kale or legumes is because we

tend to overeat

eat a lot of sweet, salty, and carby food

eat processed food

(1) We tend to overeat It's hard to gauge how much food our body needs to consume, so we tend to eat until we feel full. By that time you have already overeaten. If you incorporate coarse vegetables or legumes into the beginning of your meals, you'll start to feel full faster, as a result you eat less or in this case an amount relatively closer to how much you really need.

(2) We eat a lot of sweet, salty, and carby food This goes back to the period when humans were migrating and hunting all the time. Humans of this period would have to migrate based on seasons, hunt food, run away from predators, and they didn't have the conveniences we have today. These tasks requires a lot more energy than we use in present day for the average person and our body hasn't had enough evolutionary time to update this craving. With coarse vegetables, it slows down your stomach acids from processing these types of food, so we don't get a bunch of sugar at once. These types of food tends to gives you food coma, but if you have it with coarse vegetables or legumes it'll remedy it.

(3) We eat processed food When you consume processed food your body will break it down faster since it's processed. This leads to your body intaking the food too fast and when your body doesn't need that amount then it becomes fat and waste, so if we have coarse vegetables or legumes with it then the intake is slower.

If you do this and make it a habit, I guarantee your body will start craving more healthy food. Most restaurant and processed food will taste like crap - unless they are really good. Start doing this with your meals and slowly transition to cooking your own meals. Post below if you have any questions. Oh btw this is what Dino Kale looks like, just in case you are looking for it in the supermarket today :D

This is a series of articles discussing tactics I use to stay fit and healthy as a programmer working at a startup company. Part 1, Part2, Part 3

Being healthy and fit is probably dictated most by the food you eat, so I'll be sharing how I decide what to eat. It's actually really simple, I eat primarily fresh vegetable, fruit, and meat. This also implies I cook my own meals, which some of you may claim "oh, I'm not a good cook" or "I don't have the time". We'll if you find your health important become a good cook and make the time. These excuses is a reflection of how much you actually care about your health and fitness, so please don't make any excuses. You got to know what's going into your food to properly maintain your health and fitness.

I'm realistic and know most people can't commit to doing this immediately, so let's take it step by step. But you see that's not an excuse, it's a fact that you could take action on. To start transitioning here's what I recommend:

order food from the restaurants that consist of fresh vegetables and meat

before buying food and snacks make sure you recognize the ingredients, so none of that BHT or other chemical compounds

start learning about meals you really enjoy

find friends to cook meals with at least once a week- make it social and fun

I find Meteor an extremely beginner friendly web app framework, but there is one part is probably the most confusing part about Meteor due to it being free form. In Meteor, how you organize your files is completely up to you. You could keep everything in a file or split up into multiple directories and files. I spent a lot of time trying to find the best way to organize all my files and it was really dragging down my progress. 

To get over it, I thought about my files based on the fundamentals. Everything is JavaScript, HTML Templates, and CSS, so in when my code is rendered to the browser all of the files are combined together. The main idea is to find an organization scheme that makes it convenient for you.

Although it's mostly free form, there are these special directories:

client/ Should only put client code here. Functionality this directory acts like if (Meteor.isClient())

server/ Should only put server code here. Acts like if (Meteor.isServer()).

lib/ All JS files in this folder will be loaded first.

tests/ For you to put test code and will not be loaded on the client or server

This is a series of articles discussing tactics I use to stay fit and healthy as a programmer working at a startup company. Part 1, Part2, Part 3

What does health and fitness mean? From trying out different strategies, I have found this to be the best definition.

"Having my input equal my output"

This translates to having my input energy from consuming food and sleep equal the amount of energy used for daily activities. Or simply BALANCE.

I came to realize this after being on the workout-athletic extreme. Each day, I would spend hours doing pull-ups, sit-ups, push-ups, leg-ups, monkey bars, and basketball.

It was very counter productive and made me

tired from stressing out my body

hungry all the time from all the muscles I gained. If I did not eat enough my body would start eating itself for the missing resources

restless at night from all the food I consumed

To me this is unhealthy, so after a few months I re-evaluated and found balance. Now I'm much better :)

In retrospect from working with Meteor, I am starting to realize how Meteor has education built into its framework.

To get the beginners to initially wrap their minds around the core concepts, they removed the pub-sub and security through the auto-publish and insecure packages. This makes sense because these components are only crucial when I am ready to launch to production.

Meteor is great for beginners and is even more amazing for advance developers. Not too long ago, I started trying out Meteor. Here's what sold me on it:

Easy install process It literally takes two steps. See this post here.

Out of the box full stack framework Meteor is a full stack JavaScript framework, so it's both front-end and back-end framework integrated into one. This saved me the trouble of having to learn two separate frameworks, which slows down development.

Instant gratification Sophisticated apps could be written very quickly. My first app was written in a few hours from not knowing anything. I showed my friends and they were all very impressed. The folks at Meteor wants you to focus on the core development and abstracts things like dependency tracking for you. Check out these examples to see what I'm talking about.

Strong community support When you start doing Meteor you'll be joining a large community that also shares similar views on building web apps, which provides a lot of resources for you to get started. When I posted a question on Stackoverflow I got a response the next day.

Meteor will be the future The web standard is moving towards heavy emphasis on fast content rich apps that are interactive. To achieve this, utilizing client side seems like the best option, so get with the times.

I’m very involved with education and mentorship initiatives for younger students. Recently, I have been teaching courses at Stanford Splash on programming and entrepreneurship. In the past, I’ve been a resident advisor for college dormitories and camps. Being in these positions, I am often asked about success and happiness in life. Warren Buffett’s perspective really resonated with me, so I wanted to share it.

What I’ve been telling my students

It’s very personal and there isn’t one correct answer, but there is an answer that is good for you. To discover it, I advise them to explore and understand their values, beliefs, morals, and aspirations to build a framework. Then use the framework to figure it out.

What Buffett says

Understand yourself. Know what you want and figure out a way to get it.

IQ doesn’t determine your success.

Behave rationally, stick to the facts, and don’t let your emotions get in the way.

Figure out the habits and behavior you admire in others and put it in practice, so it starts become a habit of your own. Do the opposite for people you don’t admire.

See the video of his talk here.

Awesome quotes

“Success is getting what you want and happiness is wanting what you get”

“What got us here is pretty simple in my case and it’s not IQ and I’m sure y’all be would be glad to hear that”