Being an avid vim user for several years now I have found that I am pretty comfortable with my settings but as I continue to learn and improve and watching other developers use their tooling, there are new features they are using that have made me look into more options. I will always have the vim mindset of movement with the keyboard, but if there is something that still keeps this philosophy yet includes some of today’s modern ide features then it’s time to upgrade!

Neovim has been around for a long time now and I tried it once during it’s early days but found it was buggy and very slow. But now after many years it has merited a revisit and I will just briefly lay out some of the reasons for the switch.

It’s basically vim enhanced. You don’t have to abandon all of your favorite vim plugins, they are mostly compatible with neovim.

Large mature community. Neovim has 32k+ stars as of this writing and over 460 contributors maintaining the library. This allows for quicker releases and better code review.

Less configuration. Some neovim plugins incorporate several features which makes configuring vim ez pz.

It’s very responsive now! After spending many hours with neovim, it appears to be at par with vim now in speed and maybe even faster in some areas.

Now I’ll show you a basic setup and let you decide for yourself if you think neovim is worth the jump. You can keep vim on your system and switch back and forth so you won’t lose your vim settings if you decide neovim is not for you.

Step One: Download and install neovim

If you have Chocolately or Scoop then use this guide:

Installing Neovim · neovim/neovim Wiki

If you want to install neovim inside of a vagrant box (ie.ubuntu) scroll the document and find your OS. I personally use this way because the linux boxes are a more stable environment for neovim vs windows.

For all others use this (this binary is at the bottom): https://github.com/neovim/neovim/releases/tag/v0.3.8

Step Two: Use your existing .vimrc file for neovim follow this guide:

https://neovim.io/doc/user/nvim.html#nvim-from-vim

windows 7:

1. Create a directory in your home directory named config and a file inside of that directory names init.vim.

2. Add these contents to the init.vim file:

    set runtimepath^=~/.vim runtimepath+=~/.vim/after
    let &packpath = &runtimepath
    source ~/.vimrc

ubuntu 18.04:

cp ~/.vimrc ~/.config/nvim/init.vim

Step Three: Install Python 3+

neovim requires a python version of 2.7 or 3+. Download and install the latest version 3:

pip3 install — user — upgrade pynvim

Then inside your .vimrc add this line:

let g:python3_host_prog = ‘/path/to/python3’ “ Python 3

Step Four: Install Essential Plugins

There is only one plugin I wanted from neovim. The other plugins I installed were just regular vim plugins.

coc.nvim

After installation open nvim and type:

:CocInstall coc-tsserver coc-eslint coc-json coc-prettier coc-css

coc-tsserver gives you almost everything you wanted from vscode. Check out the features here.

Other plugins I installed were ones I already use in my vim setup. Here’s what I use if your curious:

Plugin 'VundleVim/Vundle.vim' " plugin manager

Plugin 'vim-airline/vim-airline' " status and tabline

Plugin 'vim-airline/vim-airline-themes' " airline themes

Plugin 'christoomey/vim-tmux-navigator' " tmux and vim integration (need this to move between nerdtree too)

Plugin 'scrooloose/nerdtree' " directory tree for vim

Plugin 'jistr/vim-nerdtree-tabs' " nerdtree tabs

Plugin 'alvan/vim-closetag' " close html tags

Plugin 'tpope/vim-surround' " edit surrounding wtags

Plugin 'tpope/vim-fugitive' " git wrapper

Plugin 'tpope/vim-commentary' " comment/uncomment code with gcc

Plugin 'terryma/vim-multiple-cursors' " sublime multiple cursors

Plugin 'ctrlpvim/ctrlp.vim' " fuzzy file finder with ctrl-p

Plugin 'gcmt/taboo.vim' " edit tabs

Plugin 'mileszs/ack.vim' " ack for vim

Plugin 'easymotion/vim-easymotion' " vim easymotion

Plugin 'valloric/youcompleteme' " vim autocompletion

Plugin 'jparise/vim-graphql' " graphql syntax highlighting

Plugin 'SirVer/ultisnips' " the ultimate snippets pkg requires pythos support

Plugin 'honza/vim-snippets' " snippets for ultisnips

Plugin 'prettier/vim-prettier', { 'do': 'yarn install' }

Plugin 'Galooshi/vim-import-js' " auto importing for js

Uninstalling Neovim

If you find that something went wrong with your install or you just don’t want to use neovim any more you can use the following line in ubuntu to remove it:

$ sudo apt-get purge --auto-remove neovim

For window 7 users you can just delete the folder you extracted earlier.

Conclusion

Now that I’m using neovim I can start to venture into other areas such as adjusting my development environment to other languages with a few simple configuration changes. This allows me to not be afraid to break my existing config and not have to rely on using another ide. An example is switching from using javascript to java, and not having to boot up eclipse. I’m sure there are other things that will help improve my setup, but as for now I don’t worry about vim configuration like I used to and have more time to spend developing. Happy Coding!

NeoVim for windows 7 was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is a complete guide to setting up a development environment on a Windows 7 OS. As a fullstack JS web developer, I use this environment to build React web applications. But it can be easily customized for other applications. Approx time to complete: 30min. (w/high speed internet)

PreRequisites:

A shell: I use Git Bash (the windows command line is not recommended)

A virtual machine: I use Virtual Box (it’s free!)

A virtual machine manager: Vagrant

Step 1 Vagrantfile:

Open git bash and create a vagrant directory. Inside the vagrant directory create a Vagrantfile. Copy and paste this code into that file:

Vagrant.configure("2") do |config|

# ref: https://www.sitepoint.com/vagrantfile-explained-setting-provisioning-shell/
# Every Vagrant development environment requires a box. You can search for
# boxes at https://app.vagrantup.com/boxes/search.

config.vm.box = "minimal/xenial64"
config.vm.network :forwarded_port, guest: 80, host: 8080, auto_correct: true
config.vm.network :forwarded_port, guest: 8080, host: 8080, auto_correct: true
config.vm.synced_folder "./html", "/var/www/html", create: true, group: "vagrant", owner: "vagrant", mount_options: ["dmode=777","fmode=755"]
config.vm.network :private_network, ip: "192.168.68.8"

# Config for VM Box
# Find more configuration at https://www.virtualbox.org/manual/ch08.html#vboxmanage-modifyvm

config.vm.provider "virtualbox" do |v|
v.name = "my dev environment"
v.customize ["modifyvm", :id, "--memory", "1024"]
end

config.vm.provision "shell" do |s|
s.args = ["VAGRANT INSTALL COMPLETE", "arg2"]
s.path = "provision/setup.sh"
end
config.ssh.insert_key=false
end

Step 2 Syncing your vm’s html directory:

Create a directory inside the vagrant directory and name it html. This directory will sync up to your virtual machine’s html directory. This serves 2 purposes. 1) If your vm setup messes up in the future for whatever reason and you have to redo everything, this directory will preserve your web applications. 2) There may be cases where you need to work on your apps outside of your virtual machine.

Step 3 Vagrant Up:

Now create another directory inside vagrant and name it provision. Then inside of provision create a file and name it setup.sh.

Copy/paste the following to the setup.sh file:

#!/usr/bin/env bash
export DEBIAN_FRONTEND=noninteractive
apt-get update > /dev/null
apt-get install curl git nginx tidy -y

echo "INSTALLING CURL GIT NGINX TMUX TIDY
This may take up to 10mins. depending on your connection."

echo "SETTING UP NODE"
#ref: http://askubuntu.com/questions/589058/node-is-installed-during-provisioning-on-vagrant-but-disappears-upon-connecting (used bmans solution)
cd ~
git clone https://github.com/creationix/nvm.git /home/vagrant/.nvm && cd /home/vagrant/.nvm && git checkout `git describe --abbrev=0 --tags`
source /home/vagrant/.nvm/nvm.sh
nvm install 10.9.0
nvm use 10.9.0
n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; sudo cp -r $n/{bin,lib,share} /usr/local
 
 
echo "SETTING UP VIM"
sudo apt-get update -y > /dev/null
sudo apt-get remove vim vim-runtime gvim  -y > /dev/null
sudo apt-get remove vim-tiny vim-common vim-gui-common vim-nox -y > /dev/null
sudo apt-get install software-properties-common -y > /dev/null
sudo add-apt-repository ppa:jonathonf/vim > /dev/null
sudo apt-get update > /dev/null
sudo apt-get install vim -y > /dev/null
su - vagrant
su - vagrant -c 'cd ~'
su - vagrant -c 'git clone git://github.com/pak11273/dotfiles.git'
su - vagrant -c 'cd ~/dotfiles'
su - vagrant -c 'ls'
su - vagrant -c 'sudo chmod +x ./dotfiles/makesymlinks.sh'
su - vagrant -c './dotfiles/makesymlinks.sh'
su - vagrant -c 'git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim'
su - vagrant -c 'sudo apt-get install ack-grep -y > /dev/null'
su - vagrant -c 'vim +BundleInstall +qa'

echo "SETTING UP Yarn"
su - vagrant -c 'curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -'  
su - vagrant -c 'echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list'  
su - vagrant -c 'sudo apt-get update -y'  
su - vagrant -c 'sudo apt-get install --no-install-recommends yarn -y'

echo "YCM SERVER SETUP" 
su - vagrant -c 'cd ~'
su - vagrant -c 'sudo apt-get install build-essential cmake -y' 
su - vagrant -c 'sudo apt-get install python-dev python3-dev -y' 
su - vagrant -c '~/.vim/bundle/youcompleteme/install.py --clang-completer'

echo "MISC"  
su - vagrant -c 'mkdir ~/.vim/undo'
su - vagrant -c 'yarn init -y'
sudo npm install eslint prettier csslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import -g -y
su - vagrant -c 'sudo chown vagrant:vagrant -R ~/.nvm'

echo "TMUX SETUP"
su - vagrant -c 'sudo apt-get update -y'
git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm
su - vagrant -c 'sudo apt-get install libevent-dev -y'
su - vagrant -c 'sudo apt-get install autogen automake libevent-dev libncurses5-dev -y'
su - vagrant -c 'sudo apt-get install tmux -y'

echo "SETTING UP MONGODB"
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list
sudo apt update
sudo apt install -y mongodb-org
sudo systemctl start mongod.service

echo "SETTING UP REDIS"
sudo apt-get update
sudo apt-get install redis-server -y

echo "SSH FIX"
sudo apt-get update
sudo apt-get install -y lvm2
DEBIAN_FRONTEND=noninteractive apt-get dist-upgrade -y

echo "DOCKER INSTALL"
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common -y > /dev/null
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic test"
sudo apt-get update
sudo apt-get install docker-ce
sudo usermod -a -G docker vagrant

echo -e $1

Ensure that you are in the vagrant directory cd ~/vagrant

NOTE: Some of these modules(ie. mongoDB) take several minutes to install so don’t worry if it appears that the installation is hanging.

Run the command vagrant up

Note: If you get an error concerning your powershell version then you will need to upgrade. You can download powershell 4 here. For 64bit systems use the x64 file installation.

Step 3 Check Installations:

Run the command vagrant ssh

• Check curl: curl --version should return the version for curl
• Check git: git --version should return the version for git
• Check nginx: Open up a web browser and go to the address 192.168.68.8 You should see a “Welcome to nginx!” page. This address is the primary address to your server that we created in your Vagrantfile. Bookmark it!
• Check mongodb: mongo should run the mongodb shell. exit to exit the shell. If you get a ‘mongo failed to connect error’ then you might have to turn on the service with sudo systemctl start mongod.
• Check node: node -v should return v10.9.0
• Check redis: sudo systemctl status redis should return Active: active(running)
• Check docker: docker -v should return the version for docker

Step 4 Setup a password for root:

NOTE: This is only for development! In a production environment you want to remove passwords for root.

sudo -i
passwd
// enter a password
// retype the password

Step 5 VIM customization:

NOTE: You can skip this step if you are not a vim fan, however you cannot skip this step if you didn’t touch the setup.sh because you would have installed vim 8.1 and a dotfile. You will now need to install plugins and configure them.You should check out my other articles on why you should be using vim and tmux with vim if you’re not a vimmer:

• Web Development with Vim
• TMUX with VIM

Some shortcuts you have available now from the dotfile are:

c will clear the terminal

sv = sudo vim

mk = mkdir, but will also cd inside the directory

run = npm run

git s , git cm = git status, git commit

You can change or add any commands inside of ~/.bashrc

Ack

What is Ack? Ack is a super fast way to find stuff in your files and a lot more. I use it almost daily. Your vagrant machine already installed Ack for you.

In every project you will need to add an .ackrc in the root directory. Here is a starter template:

# Always sort the files
#--sort−files

# Always color, even if piping to a another program
--color

--ignore-file=is:tags
--ignore-dir=log
--ignore-dir=doc
--ignore-dir=tmp
--ignore-dir=tags
--ignore-dir=node_modules/
--ignore-dir=.cache-loader/

Let’s say you wanted to find every file that has the word “hello” in it. In a vim session you would type this command :Ack hello. This is just a small feature of Ack there is so much more you can do with Ack, like find all occurrences of hello and change them to goodbye.

Syntastic Setup

NOTE: I want to address why I don’t use ale? Ale is a realtime checker which checks syntax as you type. I tried it but found it to be very sluggish. Maybe I could have optimized it, but since I’m happy with syntastic I am going to stick with until I see a deal breaker.

Generally speaking, there are 2 things to configuring syntastic:

1. Find a linter on github and install it
2. Then add a syntastic checker in your .vimrc.

There are several checkers are already setup in your .vimrc for syntastic, so we’ll set those up and install them(eslint for javascript, and tidy for html).

eslint --init
// use popular 
// choose airbnb
// json format
// react if you use
// install now

// You will also have to add prettier to the eslintrc.json file so you won't have to deal with the string single quote errors

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

A syntastic checker is already setup in .vimrc. Open a javascript file and edit it. You should see errors when you try to save the file if it’s not in the correct format and your code should auto-format to prettier. This applies to html docs, too.

import-js

Globally install npm install -g import-js.

Include a config file in the root of your projects and name it .importjs.js.

Use this as a starter template:

module.exports = {
  excludes: ["./react-components/**/test/**"],
  emptyLineBetweenGroups: false,
  namedExports: {
    lodash: ["isEmpty"]
  }
}

Shortcut keys:

fw place cursor over a word and it will auto import if a available.

fe will find all imports and remove unused ones.

fg goto to the file of the import.

:e# return to previous file opened.

That’s it!

Step 6 SSH:

We need to setup ssh keys so that we can do things like push/pull to git remote repositories.

Create an ssh key

cd ~
ssh-keygen
// then hit enter 
// include a passphrase
// enter passphrase again

You now have a public ssh key you can put on any service that requires it.

Copy the ssh key

cat ~/.ssh/id_rsa.pub

Copy the string returned and place it in services that require it.

Step 7 Embellishments:

This step includes things which you do not need but I use in my own development.

Chalk: https://github.com/chalk/chalk

If you spend a lot of time doing console.log() for debugging in the terminal then this is one library you should look into.

Redis Commander: npm install -g redis-commander

A gui for redis.

Tmux:

Close your terminal with vagrant halt and do a hard restart(exit the terminal & restart your computer). Open up git bash and restart the box with vagrant up.

tkill = kills all tmux sessions

WARNING: Always remember to close tmux before vagrant halt or shutting down your computer. If you can’t shut down your computer because of active connections in virtual box, then you will need to reopen your terminal and shut down vagrant.

FINAL THOUGHTS:

There is a lot of hype around Docker and it would be wise to look into it. Many development teams use it and you probably would have to get involved if you are looking to get hired at the enterprise level. I tried to implement it but it was too much of a hassle because it really doesn’t work on Windows 7. I’m satisfied with this setup because it isn’t that hard to configure and it’s highly customizable. I’ve built MERN and LAMP stacks with it with no problems.

After 3+ years of using this setup even after upgrading to the latest versions I still have little to no trouble setting environments in less than an hour. I think the biggest takeaway is that in these days one of the biggest killers of production is the constant barrage of new technologies a developer has to learn and to find something that you can rely on for long periods of time. You want to spend more time building stuff rather than learning stuff. Windows 7 came out in 2009 and I still use it for development!

Ubuntu 18.04 Web Development Environment for Windows 7 Revisited: was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Pros

• Longevity — Vim has been around for 25 years and still has a large community of users.
• Increased Productivity — You increase your editing capabilities by eliminating the need for a mouse. What’s faster, a few keystrokes vs moving a mouse and clicking buttons then resetting your right hand back to your keyboard? In some cases this is not an issue but I have found that leaving my hands on the keyboard allow me to manipulate text extremely fast.
• Customization — There is practically no limits to the customization of vim. If you can think of something vim needs, someone probably has come up with a plugin for it.
• Architecture— Vim was designed for programming. It is like another body extension to a programmer. If you look at today’s awesome editors they make you very excited about the editor. If you look at a vim guru they make you very excited about coding.

The Cons

• It has a rather large learning curve.
• To have some of the features modern IDEs you have to do some things that are a bit hacky.

The Setup

I’ll be installing vim in Ubuntu 16.04 on windows through a virtual machine. The terminal i’ll be using is gitbash which comes with vim for windows, but this guide will be using Ubuntu. Let’s get started by opening your terminal and installing vim.

sudo apt-get update

sudo apt-get install vim

Plugins

You just need to download one — Vundle. Vundle is a plugin manager for vim. Once installed you will need to update your vim configuration file.

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

You might have to create the directories .vim and .vim/bundle if you don’t have them already.

sudo mkdir ~/.vim

sudo mkdir ~/.vim/bundle

Dotfiles

If you’d like to use the exact setup I have you can. If you haven’t heard about dotfiles then here’s where you can get your hands wet. Dotfiles are just configuration files. It’s become very popular to use other people’s dotfiles when you see that they have a setup that you like. Dotfiles can be just a little enhancement to your system preferences to a whole revamp of your OS. I would not use someone else’s dotfile unless I knew exactly what everything does inside that file. A huge reason why I use a dotfile is that if I need to setup vim in a new system, I don’t want to have to do what we just did all over again. With a dotfile I can just download it and run a simple script.

My Setup

My dotfile has my whole vim setup along with the plugins. It also changes some of my bash preferences. You can have a look at mine here. If you’re feeling lucky you can follow the README file and set it up on your machine(hopefully a virtual one). I would suggest just browsing over the files and googling some of the plugins. Find which ones you think would help in your workflow and download those. You could eventually create your own dotfile.

Note: If you are going to use the YouCompleteMe plugin(recommended) then you may have to recompile vim from source. This will add the python support you need.

Closing Thoughts

I used Sublime text for several years. It was so easy to use and it was free. I heard of vim but tried it and found it frustrating because you had to “learn” how to use a text editor. Who wants to do that? Once I changed my mindset to “what’s easy and the latest greatest thing out there” to “what can help me speed up my development” looking into vim became more appealing. It’s almost the equivalent to when you learned to copy text by right clicking it with a mouse and choosing copy. It’s probably so long ago that you forgot the transition to using ctrl-c. Do you still use the mouse for that? I don’t(unless I’m in a very very lazy mood). Ever since I learned Ctrl-C for copy I never looked back. If you think vim is the way to go then I would suggest learning it in little bites.

Don’t look at everything you COULD learn with vim, but start using vim for little projects until you get the hang of things and then once you are using it consistently, completely transition into it. I started by doing the awesome tutorial that every vim comes with. Just type in your terminal vimtutor. It teaches you basic vim commands that I use on a daily basis. If you already have an editor that you like then stick with it. Vim isn’t for everybody. But if you have a curiosity about it then I would suggest you get started asap. If you consistently use it daily in your coding, you’ll find it will be one of those tools that you can’t live without in a matter of weeks. I promise.

Web Development with Vim was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s tackle this advanced concept in javascript. It’s a must-know for javascript developers for you will see uses of this concept through-out the javascript world. It’s very powerful yet can be very confusing. So what is it?

A basic closure:

function outer() {

  var outside = "i'm outside";

  function inner() {
    var inside = "i'm inside";
    var both = inside + " and " + outside;
    console.log(both);
  }
  
  inner();

}

outer("outer"); //outputs "outer"

We add a reference to the outer function’s variable outside. This is possible because of lexical scoping — Javascript functions have access to all variables up their scope chain. Nothing surprising here, however we have created a simple closure. The inner() function depends upon it’s outer environment to work because it needs the value of outside. So technically speaking, the outer() function has become a closure because it is “enclosing” the inner() function. With this simple idea we can do some very useful things with closure.

Let’s first implement a cool javascript technique before using the closure. If we know that functions are basically function blocks stored inside of variables, we can use this knowledge to invoke the inner() function outside of the outer() function. You can do this by returning the function definition instead of invoking the function.

return inner; //will return what's inside the inner variable.
inner(); //will invoke what's inside the inner variable.

So now we can run inner() function outside of outer() by assigning the return value of outer() to a variable.

function outer() {

var outside = "i'm outside";

function inner() {
    var inside = "i'm inside";
    var both = inside + " and " + outside;
    console.log(both);
  }
  
  return inner;

}

var anywhere = outer(); //outer() returns the inner() definition so anywhere becomes the inner() function.

anywhere(); //outputs "i'm inside and i'm outside"

So from our scope rules we know that inner() function is the only thing that can access the outer() function. Armed with this knowledge let’s make our inner() function so that we can dynamically change the outside variable.

function outer() {

var outside = "i'm outside";

function inner(changer) {
    var inside = "i'm inside";
    outside = changer;

    var both = inside + " and i've change outside to " + outside;
    console.log(both);
  }
  
  return inner;

}

var anywhere = outer(); //outer() returns the inner() definition so anywhere becomes the inner() function.

anywhere("whatever I want"); //outputs "i'm inside and i've changed outside to whatever I want"

anywhere("blah"); //outputs "i'm inside and i've changed outside to blah"

We have just used closure to help us gain access to an encapsulated variable. Encapsulation is a fancy word that means to hide or make private. This is comparable to the implementation of classes in other programming languages. So we learned that by returning a function definition we can change “private” variables. We can also take that same idea and apply it to objects.

function outer() {

  var outside = "i'm outside";

  var inner = {
    inside: "i'm inside",
    outside: function(changer) {
      var both = inner.inside + " and i've change outside to " + changer;
      console.log(both);
    }
  }
  
  return inner;

}

var anywhere = outer(); //anywhere is now the inner object
anywhere.outside("blah"); //outputs "i'm inside and i've changed outside to blah"

So basically the reason why we can do this is because of one simple rule:

a function remembers it’s lexical scope even when it’s called outside of that scope.

This is most important thing to understand about closure.

Closing Thoughts

To understand closures we need to know how scope works. Closures give us a way to produce objects that can encapsulate(hide) and manipulate that data. Closures are used a lot in javascript so the more you experiement with them, the more you’ll understand applications that use them.

Javascript Closures was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s probably easier to think of scope in terms of access. What does an object have access to? Scope is also known as context, or envronment. I just use scope. It helps me to understand the developer console a little better since that’s the terminology it uses.

Lexical

We use the term lexical to refer to a language’s vocabulary usually referring to a lexicon, a dictionary of a certain language. So the idea is that when you want the true definition of a word you will consult a dictionary(the source). The true source of scope for javascript happens at compilation. Javascript establishes ALL scope at compilation time. There are three kinds of scope in javascript. Global, Local and Lexical.

Global Scope

Every thing inside your program has access to everything on the global scope. There is a reason why you hear often, “Don’t pollute the global scope.” Everyone has access to it making it easy to change.

var x = “x”;

Var x has just become a property to the global scope. Some people might call it a member of the global object. The global object owns var x. Var x is on the global scope.

this.x //returns "x"

The keyword this is a proxy for the global object in this scenario. What happens if you create a variable inside of a function? Anytime you run a function, you create local scope. Local scope cannot be accessed by anything outside of that scope.

Local Scope

function child() {
  var x = "x";
}

console.log(x); //x is not defined

Now we would describe var x’s scope as being local to the child() function. Var x only exists inside of the child function so it’s scope is just the function that declared it. Also note that local scope isn’t created until the execution of the function.

Lexical Scope

function grand() {
  var x = "Hi. I'm from grand.";
  function parent() {
    function child() {
      console.log(x);
    }
    child();
  }
  parent();
}

grand(); //will output "Hi. I'm from grand"

Lexical scope is when a local scope is dependent upon another local scope. In this example the lexical scope for child() function has access to the grand() function because it accesses a variable defined there — variable x. The child() function has access to that function() because of the rules for lexical scoping. So we see that the child() function not only has local scope, but it also has lexical scope. On execution, if a local scope uses something from another scope, the “enclosing” scope becomes a closure. Closures are a big topic in itself and are outside of the “scope” of this article.

Lexical Scoping

If you can’t define a variable from within it’s own scope, then look into that scope’s outer scope for the definition. If the outer scope doesn’t have it then look to it’s outer scope. Keep doing this until you reach the global scope.

Closing Thoughts

Scope is a crucial part in understanding javascript. It is one of those things that you don’t want to go through your programming career with a sense of what it means, but rather a definitive answer so that it can be correctly applied to your programs. I would put scope as an absolute must-know to having a firm foundation in javascript.

Javascript Scope was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Arrays are objects. Maybe you already heard that, but have you tested that premise? If they are objects, then they should be able to store any types of data like objects.

var arr = [];

arr.hello = "world"

console.log(arr.hello); //what will this be?

We get the value “world” returned. So it does have some characteristics like objects, but if it’s exactly like a literal object, then why even have arrays? Well, that’s because it has other characteristics that only pertain to arrays. We normally think of arrays as lists. That is, a list of values and not key/pairs like objects. We also think of arrays as being ordered by numbers with 0-index while objects are like hashes(in some programming languages) where the items don’t have any order. So with arrays we can do sort and filter through data through indexes. So let’s take the above example and get the value from the array through an index.

console.log(arr[0]);

You should have gotten undefined because there is nothing defined at index 0. But didn’t we just add an item to the array? Yes, it wasn’t an indexed value, it was a property(key/pair value). Huh? That’s dumb you say. And quite frankly, it is. That is why we have literal objects and array objects.

Array indexes are strings

The bracket operator for objects evaluates an expression and coerces that expression to a string.

var obj = {};
obj.hello = "world";
var hello = "hello";
console.log(obj[hello]); //outputs "world"

Let’s see this in arrays using our array example.

arr.push("bye");

console.log(arr); //outputs ["bye", hello: "world"]

console.log(arr[0]); //outputs bye

So at index “number” 0 is the string “bye”. Let’s add a string “2” property with a value:

arr["2"] = "foo";
console.log(arr); //outputs ["bye", 2: "foo", hello: "world"]

So at index 0 we have a string “bye”. But what’s at index 1?

console.log(arr[1]); //outputs undefined

So at index 2 we should get undefined right?

console.log(arr[2]); //ouputs foo

What?! This makes sense once you understand that indexes are strings. Now look what happens to our property (2: “foo”) once we give something to index 1:

arr[1] = "bar";
console.log(arr); //outputs ["bye", "bar", "foo", hello: "world"]

(2: “foo”) become “foo”. And there’s still nothing at index 3. Let’s further verify that indexes are strings by seeing what’s at string “0”:

console.log(arr["0"]);

Closing Thoughts

So if this all seemed confusing it should be. Arrays are objects but we don’t want to use them as such. We want to use them how we typically are taught to use them. Like lists. If you try and combine the two traditional ideas of objects and arrays like we did in the above examples we get into lots of confusion and trouble. This is also why we have loops that can be used by both, but are better used for their designed purposes. Yes it’s true that functions are objects, but for clarity I’m going to think of arrays as arrays.

Javascript Arrays was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

When I first learned about hoisting it was a very simple idea and it made sense. The explanation was that if you access a variable before it’s declared you won’t get an error because javascript will place that variable to the very top of your code but will assign it undefined.

console.log(a); //outputs undefined

var a = 1;

But when I came across this scenario with functions something different happened.

foo(); //outputs 1

function foo() {
  console.log(1);
}

It works. The explanation is that functions get “hoisted” up to the top but unlike variables, functions get their definitions. Why couldn’t they do the same with variables? I think it’s fine to code with this definition of hoisting it’s used numerous times in javascript tutorials. However, I think finding out what’s really going on under the hood will not only help you understand hoisting, but other aspects of javascript and why it does certain things.

Javascript Parsing

What does the javascript engine do when it first runs through your code? It first creates a global scope(environment) for your program to live in. This is referred to as the global execution context. Then it’s starts parsing your code. The parsing takes 2 steps. The first step quickly goes through your code to find any variable and function declarations. This first step is referred to as Compilation or Creation phase. I like to call it the hoisting phase — the very thing we are trying to figure out. Javascript is not putting all the declarations up to the top of your script, but rather it is allocating memory for all of these declarations. It will assign all variables to undefined in this step.

//Step 1

function b(
  console.log(a);
){}; //the engine puts the function body into memory as a string.

b(); //the engine ignore function invocation in this step.

var a = 1; //the engine puts variable a into memory and assigns it undefined. So a = undefined.

Once it runs through all of your script it will start parsing at the top again but this time it will assign your values to your variables and also execute your function invocations. This second step is known as the Execution phase.

//Step 2

function b(
  console.log(a);
){}; //the engine ignores this declaration in this step.

b(); //the engine finds the function body for b in memory and runs the function.  It will return an error when it reaches the console.log(a); statement.

var a = 1; //parsing has stopped due to the above error.

Now if YOU were to hoist variable a to the top of the script and run it. It will work:

var a = 1; //engine has reassigned undefined with 1.

function b(
  console.log(a);
){}; //the engine has allocated this function to memory.

b(); //the engine finds the function body for b in memory and runs the function.  The output will be 1.

Closing Thoughts

So it seems this is a programming issue since javascript has incorporated the “use strict” and the let identifier. You can’t run into undefined variables using these mechanisms. I think the solution is just to mimic how the old fashioned way of declaring all of your variables at the top of your program. I think this is the reason why so many people relate their explanations with the term hoisting, and also why the creators of javascript implemented this behavior in the first place — I don’t know for sure. But I have a good clue now to as to why I may have undefined variables in my code and how to tackle them.

Javascript Hoisting was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Some of the most basic things are confusing because everyone has an opinion on it and describes it in ways that we all may not agree with. Let’s absolutely define the terms so that we don’t have to question what it is every time we come across it.

Arguments vs Parameters

We interchange these two all the time. It’s not really that big of a deal but what’s the difference and is there one? Yes there is a difference. Parameters is just a variable names for arguments. So then the actual values you use will be the arguments.

function (x, y) {
  console.log(x + y);
};

function(3, 5); //outputs 8

So in this example we can conclude:

Parameters: x, y

Arguments: 3, 5

In conversation I still interchange the terms all the time and people still know what I’m talking about. It’s not that big of a deal, but when it comes down to making it clear and definitive, I choose to give them both clear definitions.

Statements and Expressions

You should check out the stackoverflow for this one. It’s very confusing and it’s seems different for each programming language. I would like a succinct definition that applies across the board and makes sense. I have concluded that:

expressions include variables, operators and values, and keywords or a combination of them, and functions.

statements consist of expressions but perform a task. All statements are expressions, but not all expressions are statements.

examples:

var a; //expresssion
"this is a sentence"; //expression
[0,1,2,3] //expression
{name: "name", color: "color"} //expression
var a = 1; //both
1 + 5; //both
function (){}; //both

Function Statements vs Function Expressions

So now that we’ve defined statements and expressions. How does that apply to this? This is supposedly a function statement:

function test() {
  ...
};

vs a function expression:

function() {
  ...
}

Here’s another function expression:

var obj = {
  "huh": function test() {
    ...
  }
}

The “huh” function is a “named” function expression. But isn’t function test() a function statement? Very confusing. So here’s what I’ve concluded about the matter. A function statement in javascript is a declaration of a function given a name with this format:

function <name>() {
  ...
}

Every other function construct is a function expression.

Closing Thoughts

I find it very hard to think through code when my mind is fighting some ambiguous idea. I like concrete things, i’m not a theorist. I have found that establishing concepts definitively makes coding a lot smoother for me. And even if my definition isn’t completely correct I can easily redefine if I understand why it’s not. I have found that arguing over semantics just make things very confusing.

The big takeaway is to make things CONCRETE in your mind and move forward. Ignore the debates when it’s about who is pronouncing “tomato” correctly.

Javascript Clarity was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

These instructions reference this tutorial.

1. First we’ll need to create a vagrant project if you haven’t done so already.

cd ~
mkdir project
cd project
vagrant init hashicorp/precise64
vagrant up

Vagrant creates a .vagrant.d folder and stores a vagrant box inside this folder (hashicorp/precise64 box).

2. Let’s move and rename the .vagrant.d folder to the desired storage drive and point Vagrant to that drive.

mv .vagrant.d <path to new drive>/vagrant_home
vim .bash_profile

<add this line at the end of the file>
setx VAGRANT_HOME "<drive>:<path to vagrant_home>"

ie. setx VAGRANT_HOME "d:/vagrant_home"

3. Change VirtualBox settings to match

Create a “VirtualBox VMs” folder in your storage drive. If you already have this folder then just move it to the storage drive.

cd /<storage drive>
mkdir VirtualBox VMs

4. Change VirtualBox storage path

Open up VirtualBox and then change File > Preferences > General > Default Machine Folder > (the new path to VirtualBox VMs in your storage drive). Remove any machines you have created before. Any virtual machines you have already created must be reestablished by double-clicking it’s .vbox file to restore it to the VirtualBox Manager.

5. Test it

Go back inside the project we created earlier start the machine

cd ~/project
vagrant up

You should now be able to go into your storage drive under the “VirtualBox VMs” directory and find your new virtual machine.

Done

Move Vagrant’s storage to save HDD space was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

15. Adding another application

Let’s add another web application just to test redundancy. Go back to part 2 and repeat steps 12 to 13 replacing occurrences of app1 to app2. You can skip the section to delete the default page since we’ve already done that. In your index.html file you might want to change the text to differentiate it from app1. Once you can view the app2.local.html you can add more apps depending on how much your server can handle.

16. Some routine processes you should know

Shutting down your virtual machine

When you’re ready to shut off your computer, you will want to shut off your virtual machine. You must first exit out of the machine by just typing exit. You should then be in your windows environment and use this command to shut down your virtual server:

vagrant halt

Restarting your virtual machine

vagrant up

Just remember that after your machine is up and running, you are still not inside of your machine. To jump inside use this command:

vagrant ssh

Reprovisioning your virtual machine

If you want to add more provisioning to your machine you can do so in your /vagrant/provision folder. Once added you can reload it with:

vagrant reload --provision

17. Change the user for nginx

We will want to change the default user(www-data) for you server on your development machine to you(vagrant). This will alleviate a lot of permission issues when we create files. This is only for a development environment.

sudo vim /etc/nginx/nginx.conf
<Change this line>
user www-data
<to>
user vagrant
<Restart your server>
sudo service nginx restart

18. Some helpful facts

● You don’t need to use sudo inside your windows environment, just inside your virtual machine. Sudo represents a super user. Your account is automatically part of the sudoers group.

● You can add a password to the root account by this code:

sudo passwd root

then login to root with

su root

this is not advisable in a production setting. But in our case, it comes in real handy.

● In your windows environment you will find an html directory inside your /vagrant directory. You’ll also find any apps you made there from your virtual machine. That’s because we synced those directories. Which means you could code in that directory and not have to do any code in your virtual machine. As soon as you boot up your virtual machine it syncs the directories together.

● We set your folder and files to automatically be set to the standard 755, 644 folder/file permissions each time you create one. You will not be able to change those permissions. This is fine in a development environment, but if you want that functionality removed, you can remove it from your Vagrantfile you created in Part I.

Closing Thoughts

If everything didn’t go as planned it’s not the end of the world. There are many methodologies to development environments on the web that are a little more simplified that you could implement, however I would not recommend something too idiomatic because you learn a lot from building a system that’s more robust and more adopted by the professional industry. The technologies used in this guide are used by industry professionals. If you want to dig in deeper and understand more of what all the code was about you can research this list which have most of the core technologies we used:

● javascript — the programming language of modern web development

● vagrant — a virtual machine manager

●virtualbox — a virtual machine. You could do all of your virtual machinery without vagrant, but vagrant makes life a whole lot easier.

● nodejs — a javascript backend. Built on google’s V8 engine, this is a real value if even if you only use it for the node packages.

● nvm — a node version manager. Not necessary, but gives you a lot of control over node versioning for projects.

● npm — a node package manager

● git — a version control system. You messed up somewhere in your code and want to rollback, no problem. Makes code collaboration trivial.

● nginx — an web server. Great for static web serving.

● vim — the best text editor in the world.

This development environment is a simple hybrid stack (MySQL, Nodejs, Nginx) but can easily adapt to any of the other stacks (LAMP, MEAN, LEMP etc.) Enjoy!

Create a Lean Web Dev Environment for Windows 7 — Part III of III was originally published in Full Stack Web Development on Medium, where people are continuing the conversation by highlighting and responding to this story.