Javascript: Revealing Module Pattern

An example of how to use the Revealing Module Pattern:

var RevealingModuleExample = (function () {
 
        var privateVar = "Jane Doe",
            publicVar = "Hello World!";
 
        function privateFunction() {
            console.log("Name:" + privateVar);
        }
 
        function publicSetName(strName) {
            privateVar = strName;
        }
 
        function publicGetName() {
            privateFunction();
        }
 
        // Reveal public pointers to private functions and properties
        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };
 
})();
 
RevealingModuleExample.setName( "John Doe" );

The pattern can also be used to reveal private functions and properties with a more specific naming scheme:

var RevealingModuleExample = (function () {
 
        var privateCounter = 0;
 
        function privateFunction() {
            privateCounter++;
        }
 
        function publicFunction() {
            publicIncrement();
        }
 
        function publicIncrement() {
            privateFunction();
        }
 
        function publicGetCount(){
          return privateCounter;
        }
 
        // Reveal public pointers to private functions and properties
       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };
 
})();
 
RevealingModuleExample.start();

Source: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript (Author: Addy Osmani)

Upgrade Gulp to v4

1. First you need to install gulp 4 globally

npm rm -g gulp
npm install -g gulp-cli

Check gulp version

gulp -v

You should see this:

CLI version 1.2.1

2. Now you have to install gulp 4 locally in your project folder

cd /your_project_folder
npm uninstall gulp --save-dev
npm install 'gulpjs/gulp.git#4.0' --save-dev

Check gulp version again

gulp -v

And you should see

CLI version 1.2.1
Local version 4.0.0-alpha.2

Environment setup for Front-end development

What do we need to start modern front-end development? Here's my setup (on Windows machine):

  1. Git for windows
  2. GitHub profile
  3. Cmder - console emulator
  4. Bash setup (.bashrc, .bash_aliases)
  5. Node.js (for npm) - javascript runtime
  6. Gulp - automated task runner
  7. Brackets - coding editor

That's it. Let's see how to install and configure this awesome open-source software!


1. Git for Windows

  1. Visit website www.git-scm.com.
  2. Click the "Downloads for Windows" button on the green monitor image.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default, just be sure to select "Use Git from the Windows Command Prompt" and "Checkout Windows-style, commit Unix-style line endings" options when prompted.

2. GitHub profile

  1. Visit website www.github.com.
  2. Choose your username, email and password.
  3. Click "Sign up for GitHub".
  4. When welcome page is displayed, click "Finish sign up" button.
  5. Check your inbox and verify your email addres (click on the link).
  6. I suggest connecting to GitHub via SSH protocol, for which you can follow these instructions: http://www.numencode.com/post/connect-to-github-via-ssh-protocol/

3. Cmder

  1. Visit website cmder.net and navigate to the Download section.
  2. Download Mini version, because you already have Git for Windows installed.
  3. When you receive ZIP archive, extract it to a Cmder folder inside your "Program Files" on your system disk (eg. C:\Program Files (x86)\Cmder).
  4. Run cmder.exe file and click "Unblock and Continue" when "Warning!" prompt window appears.
  5. Cmder should be running now. Right click the Cmder's titlebar and choose "Settings..." (or press Win - Alt - P) and the settings panel should open.
  6. On the left navigation select "Startup / Tasks" and click "Add default tasks..." button.
  7. On the "Predefined tasks" menu select {Bash::Git bash} and add text '-new_console:d:C:\www' where 'C:\www' is your working projects root folder (can be any folder you want). The whole setting should look like this:
    "%ConEmuDrive%\Program Files\Git\git-cmd.exe" --no-cd
    --command=usr/bin/bash.exe -l -i -new_console:d:C:\www
  8. Now select "Startup" element on the left navigation and select {Bash::Git bash} option on the "Specified named task".
  9. Click "Save settings" on the bottom right corner and you're set to go.

4. Bash setup

  1. Visit https://gist.github.com/numencode/3ce8d0f9b386ab2342ec0a0c2c5ff728 
  2. Download files .bashrc and .bash_aliases to your computer (Click "Raw" button, press Ctrl - S).
  3. Move the two files to your Windows user folder (eg: C:\Users\JohnDoe).
  4. Open file .bash_aliases with text editor and change alias 'www' to your own projects path.
  5. Check other aliases in file .bash_aliases and customize them if you like.
  6. Start Cmder and type any alias to see if it's working. If you go to any Git project folder, you should be able to see Git branch name.

5. Node.js and npm

  1. Visit website www.nodejs.org.
  2. Choose the green "Download for Windows" button - you can choose between a "LTS" (long-term-support) version or the latest one, where I suggest the "Current" one.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.
  5. Once the installation is completed, open Cmder and test the Node and npm by running commands:
     node -v
    npm -v

6. Gulp - automated task runner

  1. Gulp can be installed with npm.
  2. Open Cmder and run the command
    npm install gulp -g
    which will install gulp globally to your computer.
    You might have to run Cmder as an administrator to take this action!
  3. Test Gulp installation by running command:
     gulp -v
  4. At the moment, version 4.0.0-alpha.2 can be installed locally for your project. I strongly suggest using Gulp4, for which you can follow these instructions: http://www.numencode.com/post/upgrade-gulp-to-v4/

Brackets - coding editor

  1. Visit website www.brackets.io.
  2. Click the link "Download Brackets without Extract" under the big blue Download button.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.

Now it's time to install some great plugins for Brackets.

  1. Open Brackets editor and navigate to "File / Extension Manager..."
  2. You will see three tabs on the top (Available, Themes, Installed), choose "Themes" and search for "Coders Theme" which is really great.
  3. There's a lot of useful plugins to choose from on "Available" tab, from which I recommend these:
    • Bootstrap 3 Snippets
    • Bootstrap Skeleton
    • Brackets-Gulp
    • Color Highlighter
    • LESS StyleSheets Formatter (nm|tU)
    • LESSHints
    • Show Git Branch for project
    • Tabs - Custom Working

Simple CSS Parallax effect

Create a div block with class 'parallax'

<div class="parallax"></div>

Apply CSS code (use your own background image path)

.parallax {
min-height: 600px;
background-image: url("images/background.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}