JavaScript Primer

The next step is to lear JavaScript (JS) basics by reading and doing the project included on the online and free book http://eloquentjavascript.net/ Don’t jump yet to other JS learning resources. Most of the time during your training you will enhancing the concepts introduced by this book, but if you find that you get stuck with the exercises you might want to alternate between EloquentJS andhttp://www.codecademy.com/en/tracks/javascript which has a more practical but less formal approach that might suit better your learning style. Nonetheless the goal of this exercise is to absorb the knowledge exposed on EloquentJS.

Writted by Mentor

Advertisements

6 thoughts on “JavaScript Primer

  1. FuzzyLittleTurtle for class names and fuzzyLittleTurtle for variable names, object properties and functions. The important thing is to keep a consistent style on the code you’re working on. If you contribute to an existing project you’ll have to use their style.

    What I normally do on my projects is to include a jshint http://www.jshint.com/about/ rule set to avoid common JS errors and jscs https://github.com/jscs-dev/node-jscs to enforce a consistent style (my preset is based on Google’s JS style https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml). Both tools can be installed as sublime text packages that will highlight issues for you automatically. The tools can also be “embedded” into the root of your projects by saving the specific settings as a .jshintrc and .jscsrc file.

    These files include my common settings

    .jshintrc

    {
      "sub": true,
      "bitwise": true,
      "curly": true,
      "eqeqeq": true,
      "forin": true,
      "immed": true,
      "latedef": true,
      "newcap": true,
      "noarg": true,
      "nonew": true,
      "plusplus": true,
      "regexp": true,
      "noempty": true,
      "undef": true,
      "unused": true,
      "trailing": true,
      "eqnull": true,
      "browser": true,
      "node": true,
      "indent": 2,
      "onevar": true,
      "white": true,
      "strict": false,
      "evil": true,
      "quotmark": "double",
      "globals": {
        "describe": true,
        "it": true
      }
    }
    

    .jscsrc

    {
      "preset": "google",
      "validateQuoteMarks": "\"",
      "validateJSDoc": {
        "requireParamTypes": false
      },
      "requireMultipleVarDecl": "onevar",
      "disallowMultipleLineBreaks": null,
      "requireLineFeedAtFileEnd": null,
      "maximumLineLength": {
        "value": 90,
        "allowComments": false,
        "allowRegex": true
      },
      "requireSpaceAfterKeywords": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "switch",
        "return",
        "try",
        "catch",
        "function"
      ]
    }
    

    and these are my sublime settings for the Sublime Linter extension.

    /*
        SublimeLinter default settings
    <em>/
    {
        /</em>
            Sets the mode in which SublimeLinter runs:
    
    <pre><code>    true - Linting occurs in the background as you type (the default).
        false - Linting only occurs when you initiate it.
        "load-save" - Linting occurs only when a file is loaded and saved.
        "save-only" - Linting occurs only when a file is saved.
    */
    "sublimelinter": true,
    
    /*
        Maps language names **as listed at the beginning of the README** (but all lowercase)
        to executables for non-built in linters. If the executable is not in the default system path,
        or on posix systems is not in /usr/local/bin or ~/bin, then you must specify
        the full path to the executable. Note that paths in Windows must use double
        backslashes, for example "C:\\Program Files (x86)\\nodejs\\node.exe".
    
        Please note that the map _keys_ do not always match the name of the
        executable, but rather the language syntax for the executable to lint.
    
        This is the effective default map; your mappings may override these.
    
        "sublimelinter_executable_map":
        {
            "perl": "perl",
            "php": "php",
            "ruby": "ruby"
        },
    */
    "sublimelinter_executable_map":
    {
    },
    
    /*
        Maps syntax names to linters. This allows variations on a syntax
        (for example "Python (Django)") to be linted. The key is
        the name of the syntax **as it appears in the syntax list
        at the bottom right of the window**, and the value
        is the linter name **as listed in the README** (all lowercase)
        that the syntax maps to.
    */
    "sublimelinter_syntax_map":
    {
        "Python Django": "python",
        "Ruby on Rails": "ruby",
        "C++": "c"
    },
    
    // An array of linter names to disable. Names should be lowercase.
    "sublimelinter_disable":
    [
    ],
    
    /*
        The minimum delay in seconds (fractional seconds are okay) before
        a linter is run when the "sublimelinter" setting is true. This allows
        you to have background linting active, but defer the actual linting
        until you are idle. When this value is greater than the built in linting delay,
        errors are erased when the file is modified, since the assumption is
        you don't want to see errors while you type.
    */
    "sublimelinter_delay": 2,
    
    /*
        Selects the way the lines with errors or warnings are marked; "outline" draws
        outline boxes around the lines, "fill" fills the lines with the outline color,
        and "none" (default) disables all outline styles.
    */
    "sublimelinter_mark_style": "outline",
    
    /*
        If true, lines with errors or warnings will be filled in with the
        outline color.
    
        This setting is DEPRECATED and will be ignored in future
        versions. Use "sublimelinter_mark_style" instead. For backwards
        compatibility reasons, this setting overrides "sublimelinter_mark_style"
        if that one is set to "outline", but has no effect if it's set to "none".
    */
    "sublimelinter_fill_outlines": false,
    
    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": true,
    
    /*
        Choose the theme for gutter marks; available built-in options are:
        "alpha", "bright", "dark", "hard" and "simple"
    
        Anything else will be treated as a path to a set of images.
        For instance, setting the value to "../User/my-awesome-theme"
        would cause SublimeLinter to look for the images:
        "../User/my-awesome-theme-illegal.png",
        "../User/my-awesome-theme-violation.png",
        "../User/my-awesome-theme-warning.png"
        These images should all be approximately 32x32px.
    */
    "sublimelinter_gutter_marks_theme": "simple",
    
    // If true, the find next/previous error commands will wrap.
    "sublimelinter_wrap_find": true,
    
    // If true, when the file is saved any errors will appear in a popup list
    "sublimelinter_popup_errors_on_save": true,
    
    // JavaScript linter: "gjslint" to use the closure javascript linter (if available),
    // or either "jshint" or "jslint" to use a built in linter.
    "javascript_linter": "jshint",
    
    // jshint: options for linting JavaScript. See http://www.jshint.com/docs/#options for more info.
    // By deault, eval is allowed.
    "jshint_options":
    {
        // To fix column positions for JSHint errors you may want to add `"indent": 1` to your
        // **User** "jshint_options". This issue affects users with tabs for indentation.
        // This fix was reverted due to a conflict with using the `"white": true` option.
        // "indent": 1,
        "evil": true,
        "regexdash": true,
        "browser": true,
        "wsh": true,
        "trailing": true,
        "sub": true
    },
    
    // A list of command line options to send to gjslint. --nobeep is always sent.
    "gjslint_options":
    [
    ],
    
    // A list of gjslint error numbers to ignore. The list of error codes is here:
    // http://closure-linter.googlecode.com/svn/trunk/closure_linter/errors.py
    "gjslint_ignore":
    [
        110  // line too long
    ],
    
    // CSSLint options:
    // Each rule can have three values: error|warning|true|false
    // false => rule is disabled.
    // true => alias to 'error'
    // All rules are enabled by default.
    // Currently the only difference between warnings and errors is in the prefix of the message in the Sublime status bar.
    "csslint_options":
    {
        "adjoining-classes": "warning",
        "box-model": true,
        "box-sizing": "warning",
        "compatible-vendor-prefixes": "warning",
        "display-property-grouping": true,
        "duplicate-background-images": "warning",
        "duplicate-properties": true,
        "empty-rules": true,
        "errors": true,
        "fallback-colors": "warning",
        "floats": "warning",
        "font-faces": "warning",
        "font-sizes": "warning",
        "gradients": "warning",
        "ids": "warning",
        "import": "warning",
        "important": "warning",
        "known-properties": true,
        "outline-none": "warning",
        "overqualified-elements": "warning",
        "qualified-headings": "warning",
        "regex-selectors": "warning",
        "rules-count": "warning",
        "shorthand": "warning",
        "star-property-hack": "warning",
        "text-indent": "warning",
        "underscore-property-hack": "warning",
        "unique-headings": "warning",
        "universal-selector": "warning",
        "vendor-prefix": true,
        "zero-units": "warning"
    },
    
    // Set this to false to turn pep8 checking off completely
    "pep8": true,
    
    /*
        A list of pep8 error numbers to ignore. By default "line too long" errors are ignored.
        The list of error codes is in this file: https://github.com/jcrocholl/pep8/blob/master/pep8.py.
        Search for "Ennn:", where nnn is a 3-digit number.
    */
    "pep8_ignore":
    [
        "E501"
    ],
    
    /*
        If you use SublimeLinter for pyflakes checks, you can ignore some of the "undefined name xxx"
        errors (comes in handy if you work with post-processors, globals/builtins available only at runtime, etc.).
        You can control what names will be ignored with the user setting "pyflakes_ignore".
    
        Example:
    
        "pyflakes_ignore":
            [
                "some_custom_builtin_o_mine",
                "A_GLOBAL_CONSTANT"
            ],
    */
    "pyflakes_ignore":
    [
    ],
    
    /*
        Ordinarily pyflakes will issue a warning when 'from foo import *' is used,
        but it is ignored since the warning is not that helpful. If you want to see this warning,
        set this option to false.
    */
    "pyflakes_ignore_import_*": true,
    
    /*
        Perl linter: "perl" to use the Perl language syntax check, or "perlcritic" to use Perl::Critic linting.
        Perl is now set to use "perlcritic" by default due to a vulnerability with blindly running `perl -c`
        on files with `BEGIN` or `CHECK` blocks.
    */
    "perl_linter": "perlcritic",
    
    // Objective-J: if true, non-ascii characters are flagged as an error.
    "sublimelinter_objj_check_ascii": false,
    
    // Set to true to highlight annotations
    "sublimelinter_notes": false,
    
    // The set of annotation phrases to highlight
    "annotations": ["TODO", "README", "FIXME"]
    </code></pre>
    
    }
    

    Written by Mentor

    Like

  2. Just finished with the complete JavaScript course at CodeAcademy, now that I have more absorbed the basics explained at the first 4 lessons of Eloquent JS, I am going to continue with Eloquent JS full throttle and looking forward to the mentoring session. 🙂

    Like

  3. I just scheduled one chapter of Eloquent JS per day so I can focus on everyday goal and have deadline to end the book (03-12-14). Despite I am not understanding the examples at 100% and not doing the exercises proposed at the end of each lesson, I keep going, I think it is more important to get a global view of the hole book and once I finished come back to settle the concepts I didn’t understand with the exercises and with some real practice that I find more fun 🙂

    Like

  4. I just ended last chapter of Eloquent JS. It is a really good book, with A LOT of theory and little practice, but it seems to cover the most important sectors of JS. However I need to come back and do all the exercises and the chapters I jumped because I didn’t have the level needed to completely understand them. All that said, I would like to settle the knowledge with more practice, so the mentoring session is a must. 🙂

    Like

  5. Congratulations!. You completed it as you estimated.
    I just sen you an invite for our 1:1. Let me know if the timing works for you or ping me over Skype so we can agree on a time that works for both of us.
    Given you’re “done” with the first pass…. Please grab a copy of https://www.acmi.net.au/media/12347/javascript_the_good_parts.pdf, it’s even denser but it’s a reference on the language that you’ll be revisiting over and over whenever you doubt on how something works. We’ll talk about that book on our 1:1.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s