The 2018 Web Developer : Adding node_modules to a project using npm

In the last post, I prepared the ground for adding node_modules to my project. In my simple, learning project I'm going to add 3 modules:

• bootstrap
• jquery (which bootstrap needs)
• popper.js (which bootstrap 4 also needs)

First open the project within the atom browser. Then I open the terminal within the browser (which sets the current working directory to my project). Within the terminal I type:
npm install bootstrap
npm install jquery
npm install popper.js
Job done! Well not quite. The start page for my project is taken from the Twitter Bootstrap starter template. So I now need to change the paths of the scripts and CSS links to :
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="scss/custom.css" />

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Now I'm cooking with gas. I can also start employing the SASS elements of Twitter Bootstrap.

What next?

There is much greater power in using node.js, nvm and npm, but it's a good start.

The 2018 Web Developer : Preparing a project for node_modules using npm

To prepare my project for node modules, I must initialise node within it's root directory.
First change to the project directory, using:
cd /myproject
Then type:
npm init -f -y
This will avoid me answering awkward questions that I'm not sure of, and provide me with a package.json file.
I'm also going to use the opportunity to make sure I'm got some tools in place such as the atom text editor, the slimjet browser and the LiveStyle plugins for atom and Chrome (which we can use in Slimjet).

atom

I won't go through the reasons for using atom, you can get that from many places, but needless to say I'm convinced. To install on Ubuntu:
sudo add-apt-repository ppa:webupd8team/atom
sudo apt update; sudo apt install atom
I had a graphic problem on an old laptop. It kept flashing. To remedy this I changed the command of my Atom launcher to:
/opt/atom/atom --disable-gpu

I installed the platformio-atom-ide-terminal package. This will open up a terminal inside the editor. It's quite useful because some commands, such as node-sass.

I also installed the livestyle-atom package.

Slimjet

Slimjet is a slim, fast browser which will give me all the benefits of Google Chrome browser by using its engine, but without telling Google everything I'm doing. To install:

wget http://www.slimjet.com/release/archive/8.0.4.0/slimjet_amd64.deb

sudo dpkg -i slimjet_amd64.deb

Now to add the livestyle extension. Within the browser:

More tools->Extensions->Get more extensions

Type livestyle

LiveStyle

LiveStyle is a tool for live CSS editing. It means I'll be able to edit my SASS file and see the changes in real-time within the Slimjet browser.

What next?

I now have some good tools in place for my project. I have a fast browser. I have an editor which allows me to make SASS changes and see them in real-time. I can do this by opening a terminal and starting the node-sass package. I can also use the terminal to compile changes to my .js files using node. I can also use the terminal to initialise my project to be node ready.

Now I can start adding local node_modules to my project in the next post.

The 2018 Web Developer : Install node.js (node) on Ubuntu

In the last entry of this series, I installed Node Version Manager (nvm). This was important in order to give me the flexibility I need in this entry.

What is node.js (node)?

According to wikipedia "Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side".

How will node help me?

The first pleasure I got for using node.js was in testing JavaScript I'd written through the terminal. This meant, I could edit a file such jimmy.js, then test it on the command-line through:
node jimmy.js
No need to keep refreshing a browser. It also provided me with warning and error messages like any other compiler.
node also opens the door to much bigger things, particularly through the Node Package Manager, which I'll discuss in future posts. So it's well worth having.
Now to install node.js using nvm
nvm install node
Test that it has installed using:
node -v
If, for any reason, this call returns an error; node may not be in your PATH variable. To rectify this, open your .bashrc file, and at the bottom, add the line.
PATH=/usr/bin/node:$PATH

What next?

Now that I have nvm, npm and node installed what can I do?
Well I can begin by using node as a compiler for .js files. I mention this in the section titled "How will node help me?". I use the atom editor, which I'll be referring to in this series. So if I install the platformio-ide-terminal in atom, you can imagine how quick I'll be editing .js files now.
However, it's also good to know that I will face other, better improvements in my productivity with this new tool set. In the next post, I'll use npm to install node-sass globally. This will allow me to develop using SASS on all my projects.

Fast lightweight web development on an old laptop

I was given an old laptop. It's quite handy for doing a little development when it comes into my head. Below I explain how I set it up.

OS

The laptop has a 32-bit architecture so I downloaded Lubuntu from https://lubuntu.net and replaced the slow Microsoft Windows installation.
There was one downside to this. Since Microsoft bought Skype, they have stopped supporting it's 32-bit version. Not so much of a problem for me as I have another laptop I use for more serious work, but worth noting.

PHP & Web Server

I installed PHP, but not the rest of the LAMP stack. PHP comes with a lightweight server which you can run from your working directory from the command line with the cli call of:
php -S localhost:8000
After doing that, just open up your favourite web browser and use the address http://localhost:8000

Sass

CSS has become a bit cumbersome now. I use Sass to make the process of producing stylesheets a little easier.
To install this on Lubuntu use:
sudo apt install ruby-sass
Once the install has completed you're ready to use it. First, your terminal change to the directory of your app e.g.
cd /home/mick/htmlstuff/myapp
You'll need at least 2 files for Sass. In this example we'll use custom.scss (the one we'll be editing) and custom.css (the output file which is referred to by your HTML page). Then you want to put a watch on custom.scss to produce custom.css. This again is done from the terminal with the line:
sass --watch custom.scss:custom.css
Now every time you update and save custom.scss, custom.css will be updated.

Editor

I now use Atom as my editor. To install it on Lubuntu, first add the PPA thus:
sudo add-apt-repository ppa:webupd8team/atom
Then do an update and the install through:
sudo apt update; sudo apt install atom
I had a graphic problem with mine at first. It kept flashing. To remedy this I changed the command of my Atom launcher to:
/opt/atom/atom --disable-gpu
Once Atom has been installed successfully it's time to add a few extensions. I recommend the following:

• browser-plus - This will open up a browser inside the editor and will display changes your project live, on save.
• file-icons - This provides more informative icons for the various files within your project.
• platformio-atom-ide-terminal - This will open up a terminal inside the editor. It's quite useful because some commands, such as the sass one above provide you with error messages.
• remote-sync - This will allow you to edit remote files through ftp etc. It's also particularly good because you can list all the files which shouldn't be synced.