henrycode

Recently we used Angular.js at LOYAL3 for a greenfield project.

It's an extremely powerful and easy to use JavaScript framework backed by a team of Google engineers.

Give Angular.js a shot. Egghead.io has some solid tutorial - easy and quick - lessons for free.

At  we're moving towards a better mobile experience. Speed is an important topic in mobile development.                                           

In general, we'd be talking caching or asset management. But here we're talking about the default 300 millisecond delay that users encounter on mobile browsers when a button is clicked.                              

The idea is that with a 300ms delay, the browser has the time to check if the user meant to double click. In general, most web apps won't need this, as it will only slow down its UI.

What you need to know: Humans can perceive a delay of 100 milliseconds. See for yourself. So, we'll need to work around the 300ms delay that happens when users click buttons on a mobile app.

In HTML5, the custom data attribute allows you to store hidden data in HTML elements. Any attribute that starts with "data-" will be treated as a storage area for private data. Super useful!

Here's an example!

<li data-age="24" data-color="purple" data-food="burger">    Bob </li>

That's it! There are two cool things you can do:

1) In your JavaScript you can pull data from the data-attribute using a simple JavaScript API (element.dataset):

  var li = document.getElementByTagName("li");   li.dataset.age === 24; // true   li.dataset.color === "purple"; // true   li.dataset.food === "burger"; // true   alert("Bob's favorite color is " + li.dataset.color);   // alerts "Bob's favorite color is purple"

2) Use the data-attribute as a CSS selector to select elements:

  [data-class="age"] {     font-weight: bold;     color: orange;   }

Here's the debate: blog.site.com vs site.com/blog

Wordpress, out of the box is one of the best CMSs for SEO. These SEO benefits apply to both types of URL structure the same. Wordpress has features that help crawlers index your WP site:

Wordpress uses .htaccess to create apparently static URLs called permalinks, blogrolling, and pinging. Yay cleaner, consistant, normalized URLs.

Plugins like Google Site Map Generator that builds and sends a special XML site map to search engines that will help them index your blog.

Tons of other plugins like Wordpress SEO!

Crawlers gather content. They generally only scan one third of your page before moving on. WP is designed to keep content at the top. (Look at your WP structure, see how your siderbar and footer are always the end?) 

Built-in features like pingback & trackback that increase link popularity. 

Call & apply both invoke a function with its "this" keyword bound to the context that was passed into call() or apply().

The difference is Call takes in a list of arguments that can be passed into the invoked function while Apply takes a single dynamic argument (an array).

Block ---> Box Inline ---> Text

Block-level elements are boxes that can have margin and padding which span the width of their parent container.

Inline elements are used to contain text or other inline elements and form to the shape of their contents - they are not boxes.

Here's a live demo!

The keyword is "shape". Look at a span that contains a bunch of text in Chrome. It isn't a box. Also, Inline elements cannot contain block elements. They are fundamentally incompatible. It will fail HTML validation.

Today Ben Cherry came and chatted with us about web performance. Here's the break down of web performance fundamentals. 

1. Include asynchronous script tags on non-critical JS to prevent blocking.

2. Leverage browser caching by setting "Cache-Control: max-age=" to some higher number.

3. Minfiy your JavaScript/CSS and combine JS files.

4. Use a CDN. They're almost always a good idea.

5. Gzip your JS/CSS files.

The key takeaway: Establish where are we now? How do we measure it? Where do we want to get to? And move towards that direction.

Performance programming is finding quirky hacks that happen to exploit bugs and strange behaviors in the technology that exists today that makes things work faster. There's almost no standard for performance programming because the web is constantly changing.

Heroku has some very clear docs, but I missed how to connect the dyno with my mongoDB via mongoose. Thanks @ryandotsmith from Heroku for helping me deploy. He came to Hack Reactor and gave an amazing talk!

Here are some things we fixed:

1. Make sure ajax calls have a direct URL and not an IP or localhost.             ('/fooBar' not 'http://localhost:3000/fooBar') With a direct path and no given URL, it will send the request to the environment's URL.

2. If your server side code declares an IP, get rid of it. Not declaring an IP allows your app to run on the environment's default IP.

3. Allow heroku to connect your mongo, or ORM.

We won the DeveloperWeek 2013 Hackathon! There were 150 attendees and 30 teams.

Mark, Adnan, and I spent 2 days to build Bookcrumbs, a real time online collaboration tool for MOOCS. Check it out at http://bookcrumbs.org (please have the latest chrome :)

At the core of Rails is the MVC architecture. One reason for using an MVC framework is that it handles separations of concerns. It keeps your app's interface separate from it's logic which ensures both ease of maintainability & the DRY principle.

A model represents the data of the app and the logic to manipulate that data. Models manage the rules of interaction, associations, with a corresponding database table. Each table in your database will correspond to one model in your app. The bulk of your apps logic will be in the model.

A controller will receive the incoming request (this is invisible to the developer), fetch or save data from a model and use a view to create HTML output.

I had a problem inserting a document into my Mongo database so I asked Larry for help. He never answered my question. Just dropped a 1 hour knowledge bomb on me!

1. Modularize / Organization / Maintainability. We organized my app into one constructor with prototype chained methods. Later, this allowed me to reuse code. We separated the interface from the data.

2. Read the API DOCS. Understand how your code works. He had me read the Google Maps API docs (read, not just look at the examples) and taught me how important it is to understand the API I'm using.

3. Comments. For your future self and your colleagues.  We added helpful comments.

4. Error handling for the users. When API's have a callback returning a error status make sure you handle each one properly.

Matt and Avi, the dudes who wrote the Meteor framework came down for a visit. They loved us and had a blast. We absolutely loved them because we spent a 48-hour sprint on building Meteor apps.

Meteor has the potential to change the way we build apps. This framework many levels of abstractions. The developer doesn't need to think of the complexities that is required to build an app. It allows you to build & deploy a fully featured app in a weekend. An app that used to take weeks to build now takes two days (or 20 minutes). 

Meteor handles databases for you. It comes hooked up to the client and is reactive. If the client side data is changed, the database is automatically updated. If the data is changed, the HTML is automatically rerendered on the client side with Meteor's Spark engine.

I'm really excited about Meteor. It's very powerful. It isn't perfect right now but the guys backing Meteor are open-minded geniuses.

Marcus had a bunch of high level software architecture questions for Matt. We chatted a lot about Meteor's philosophy. It was also just a ton of fun. We also chatted with Matt about some his past ideas at YCombinator and some of our own interests as well.

A stack is a data structure in which items are only added & removed from the top of the stack (or the end of the stack). 

We'll build a stack constructor called makeStack. The stack will be able to .add("item"), .remove() items, and get it's own .length(). Lastly, it be able to search the stack for a value via .contains("value"). Below I've included a picture of the code. 

Step 1. Write a function that builds stacks, var makeStack = function () {...}; Step 2. Create a stack object that contains the methods the stack will have.  Step 2a. After the stack object write 'return stack;' to return our stack object. Step 3. Create an empty array for the stack items. I'll call mines 'list'. Step 4. Write your stack methods. (add, remove, length, contains)

We've made our entire stack function, now let's write the stack's methods.

Step 5. ADD: will take an parameter 'item' and add it to the end of stack (ie list[list.length]). Step 6. REMOVE: Will remove the last item. Define a variable 'returnVal'  to hold the last item. We'll return our removed item at the end of the function. Define a empty array where we store each item in it except the last item using a for loop. Then assign 'tempArray' to 'list'. Our new array 'list' contains all original items except for the last item.

Step 7. CONTAINS: will take a parameter 'value', loop through each item in the list, and if 'value' matches an item, we return true.

Step 8. LENGTH: finds the length of our stack, and returns the length.

Winter holidays comes to an end & I'll head back to Catalyst tomorrow, where we code intensely 6 days a week 11 hours a day. It's great diving into software engineering full time. Our curriculum is quite ambitious. But we're in good hands because our curriculum designer, Marcus, is the best and most compassionate teacher I know in any field. He designed code class for anyone who wants to learn code during hack week at Twitter.

Check out the discussion about this blog post on HN: news.ycombinator.com/item?id=4985853

The keyword 'this' holds a value and is bound to another object. It can be one of the most confusing subjects in JavaScript. It doesn't have to be if you follow this simple rule: The keyword 'this' is bound dynamically to the object found to the left of the '.' at call time.

Call time is when a set of parenthesis () begins the execution of our function. In our case "person" is to the left of the '".'" at call time. So in the example above, 'this' refers to our object person.

There are three exceptions to the above. 1) When there is no '.' the keyword 'this' is bound to the global object window. 2) When you use call and apply, you get to decide what 'this' is bound to. 3) When you use the keyword new to create a new instance from a constructor, the keyword 'this' refers to the newly generated instance.

We built a simple Twitter clone in a 7 hour sprint with an eye on design. We coded while considering our users.

Afterwards, Twitter designers Dave and Connor gave an amazing lecture on design. Then they evaluated our Twitter project.

We spent hours with Dave & Connor and learned so much about design. The main takeaway was this:

Design thinking - Always considering your users.

You've made an app or website? Let's put the project up on Github! (You must have created a Github account and have the latest version of Git installed on an OSX machine.

Step 1) Log in to Github and create a new repository. You will choose a project name for this repo and it will have a URL (ie h**ps://github.com/USER/PROJECT.git)

Step 2) Open up terminal and navigate to your project folder Use the command 'cd' to navigate directories and use 'ls' to list the directories. 

Step 3) Create an empty git repository or reinitialize an existing one in your project directory by typing 'git init'. 

Step 4) Add the files you want to put on Github to index by typing: 'git add <filename>'  Note: to add all files in the directory just type 'git add .' 

Step 5) Make a commit, with a message describing what you've done. 'git commit -m "message describing your commit'

Step 6) Add a remote for your repo: 'git remote add origin h**ps://github.com/USER/PROJECT.git'

Step 7) Push the code to Github: 'git push -u origin master'