The 2018 Web Developer : Introduction

I've been reading a lot of blogs lately by developers who have been in the same position as myself. We're people who have skills in HTML, CSS, jQuery, PHP, MySQL, Apache, GNU/Linux etc. These skills are still relevant. You can find still work with them, but increasingly, less work, in favour of node.js approaches to building applications.
node.js seemed to usher in a whole new set of methods in the unfortunate coincidence of developers having to adapt to using SASS, Git and everything else. Not to mention the fact that understanding node.js also came with a requirement to understand nvm and npm, etc. Not to mention the introduction of Grunt.js Gulp.js, Vue.js, etc.
As I started to familiarise myself with for example node.js, the setup seemed to require you to now install ruby, gem, yum or some other installer. Having got through all that, some blogger would tell me how great it was I could now spend the rest of my development life editing variables listed within package.json files. It didn't really look like fun.
In this next series of posts, I attempt to simplify the process of adopting some of these new technologies. I'm going to try and highlight why they are a useful addition to your existing skill set, rather than having to dispose of everything you already know. This will be done through the lens of an Ubuntu user of the Atom text editor.
If you want to skip through the first few baby steps I offer these commands to get you set up with node.js, nvm, npm and node-sass
sudo apt-get install build-essential libssl-dev curl git-core
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
Now restart
nvm install node
Now restart
npm install -g node-sass
Job done.

Editing command-line JavaScript, using Atom in Ubuntu

I've been doing a lot of JavaScript recently. It would have been too painful to render through the browser each time. So I set up an environment to do this within the Atom text editor. I use Ubuntu, although I'm sure the following instructions can be easily adapted to lesser operating systems.

Install nodejs
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

Test this has worked by typing
node --version

Install Atom
sudo add-apt-repository ppa:webupd8team/atom
sudo apt update; sudo apt install atom

Add the terminal plugin to atom
Within atom type ctrl+, to get the settings window.
Click on install.
Type 'terminal'.
Now you will get a list of all terminal plugins for atom. I chose 'platformio-ide-terminal' and clicked the 'Install' button.
Restart atom.

Use the terminal within atom on your JavaScript
Open a directory containing your JavaScript. I suggest using the 'Add Project Folder...' option from the 'File' menu.
Let's imagine you have a directory such as /home/jimmy/js
If you haven't already, create a file such as 'hello.js'
Inside 'hello.js' add the line:
console.log('Hello world!');
Save the file.
Now at the bottom left-corner of Atom you will see a '+' symbol. Click the '+' and you will see a terminal window open in your chosen directory.
Click in the terminal window:
node hello.js
Hey presto!

Passing JavaScript arrays by reference and valuies

By default JavaScript arrays are passed by reference. See the code below. Notice that when a value in the 'firstArray' is changed, the corresponding value in 'secondArray' is also changed.

var firstArray = ['first','second','third'];
var secondArray = firstArray;

firstArray[1] = 'second most';

for (var i = 0; i < firstArray.length; i++)
{
  console.log(secondArray[i]);
}
/* Output
first
second most
third
*/

To overcome this issue you need to use the 'slice' method. This will pass the 'firstArray' to the 'secondArray' by value. See, in the output, that although a value in the 'firstArray' has changed, this hasn't affected the values within the 'secondArray'.

var firstArray = ['first','second','third'];
var secondArray = firstArray.slice();

firstArray[1] = 'second most';

for (var i = 0; i < firstArray.length; i++)
{
  console.log(secondArray[i]);
}
/* Output
first
second
third
*/

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.

jQuery media queries plugin

Media queries are really useful in CSS, but what if you could use them to control page events and content using jQuery. I have created the beginnings of a solution below.

Here we have 2 files:

• index.html
• mediaquery.plugin.js

index.html is a very basic page which passes the window object to mediaquery.plugin.js.

mediaquery.plugin.js listens for changes in the window width and reacts accordingly.

In this case it simply changes the background colour of the body which calls the plugin, but of course, this is only the start. In place of changing the page colour, you could do all sorts of useful things. For example, you could pass the identifier of a div the plugin and add external content to it. The list is endless. Have fun!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery media queries</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="mediaquery.plugin.js"></script>
<script>
(function()
{
    $(window).mediaquery();
})();
</script>
</body>
</html>

mediaquery.plugin.js

(function($)
{
    $.fn.mediaquery = function(options)
    {
        var defaults =
        {
            phone:'blue',
            tablet:'red',
            desktop:'green'
        };
        options = $.extend(defaults, options);

        $(this).handleWidths(options);
        $(this).resize(function()
        {
            $(this).handleWidths(options);
        });
    }
})(jQuery);

$.fn.handleWidths = function(opt)
{
    if($(this).width() < 481)
    {
        $(this).phoneFunc(opt.phone);
    }
    else if($(this).width() < 769)
    {
        $(this).tabletFunc(opt.tablet);
    }
    else
    {
        $(this).desktopFunc(opt.desktop);
    }
}

$.fn.phoneFunc = function(str)
{
    $('body').css('background-color', str);
};

$.fn.tabletFunc = function(str)
{
    $('body').css('background-color', str);
};

$.fn.desktopFunc = function(str)
{
    $('body').css('background-color', str);
};

How to install less css on Ubuntu

sudo apt install npm
sudo npm install -g less
sudo ln -s /usr/bin/nodejs /usr/bin/node

PHP resize image before base64 encoding

It took me a while to work this out, but it was worth it. base64 encoding can be really useful in presenting and storing images on the web. However you don't want to add a 2000 pixel width base64 encoded image to your database. Here's how to resize the image before it goes in.

<?php
$file = 'mypic.jpg';
$image = imagecreatefromjpeg($file);
$image = imagescale($image , 100);
ob_start();
imagejpeg($image);
$contents = ob_get_contents();
ob_end_clean();
$dataUri = "data:image/jpeg;base64,".base64_encode($contents);
echo '<img src="'.$dataUri.'" />';
?>