Author: ruparocks

Learn by Example

Always Do… Learn by Example.

While studying theory, do write out code examples as a proof of what you are trying to learn.

Practice makes you more efficient and helps to develop a deeper understanding.

In my experience with coaching individuals that that starting off, some tend to read/study and only take notes. Then when it comes time to explain a concept, they struggle. Practice, practice, practice… and always write code.

Don’t limit your potential by cutting corners by not writing out code to demonstrate what you are learning. Get your hands dirty and dive in.

Understanding Javascript’s this

I was recently asked what this means while reviewing some toy javascript problems.

There are a few different contexts for this and it is important to review them all, but for the shortest answer, this refers to the element that is executing the code.

This can mean different things depending on the context.

Global Context – Within the global scope, this refers to the global object and in most cases this is the window object.


 console.log(this === window); // true
foo = "bar";
console.log(this.foo); // bar

Function Context – Within simple functions calls, this refers to the object that the function is running on. If the function exists in the global scope, then this refers to the window/global object.

function func() { console.log(this); }
func(); // within the browser = window | within node = global

If the function is nested within another scope/object or run with bind(object) , then this refers to the object executing the function.

var testObj = {
name: "foo",
whatIsThis: function() {
console.log(this);
}
}
testObj.whatIsThis(); // {name: "foo"; whatIsThis: f}

.. to be continued

Syntax and Spacing – Javascript, HTML, CSS, and beyond

I know a few of my rookie javascript friends/family could use a friendly reminder about syntax. Syntax is important for each language you learn so make sure you review the basics.

Javascript Syntax Basics:

  1. Each line that should be run needs a semicolon at the end
  2. Functions don’t need semicolons after the closing curly bracket
  3. Every time you open a curly bracket, indent your code one tab (or 2 spaces) for readability
  4. When you are writing a callback, finish writing out the method, parens, and semicolon before writing your callback with the parens. This will prevent you from forgetting to close your parens or missing the semicolon at the end. For instance: 
    someString.map(); // write out the variable and method through the semicolon
someString.map(function(value){return value;}); // then you can write your callback
  5. When writing if, if/else, loops, switches, etc, try to write out the conditions before adding code within the cases For instance: 
    // start by writing your if conditions
if (someNumber > 10) {}
// then add your code within the curly brackets
if (someNumber > 10) { return true;}

HTML Syntax Basics:

  1. You need a <html> at the top of the doc
  2. Your file needs a <head></head><body></body> with the html
  3. <head> should only have your metadata, css links
  4. <body> will have the content of the page you are displaying
  5. place your javascript scripts and links at the end of the body
  6. Whenever you open a tag that will be more than one line long, indent with a tab
  7. Line up closing tags with their opening tags

CSS Syntax Basics

  1. you can apply the same styles to a selection of tags/classes/objects by listing them with comma separation before the style
  2. child inherit from their parents
  3. don’t use !important unless you have to

 

This is just a start. As more tips come to mind, I will add to this list. If you have any notes to add, please send me a comment.

 

Hack Reactor – Week0

I have never been this excited to dive into a lot of content, lack of sleep, and experiment with technology and web solutions.

I walked onto the program with graphic/web designer experience. I spent the last two years understanding and studying Magento CE, and trying to squeeze in time to learn iOS, Javascript, Java, User Experience/User Centered design and more. The little bits of information that I have taken the time to learn has left me in a limbo of knowledge. My main goal and intent of joining this program is to solidify my pervious knowledge and form expert Javascript skills.