Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, 10 April 2019

Vanilla JavaScript Grid navigation

I have created a Vanilla JavaScript Grid navigation. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-grid-navigation
It employs ES6, BEM and SASS.

Thursday, 7 March 2019

Using the Vanilla JS Component template with LAMP

I use the Vanilla JS Component at https://github.com/guitarbeerchocolate/vanilla-js-component, and you have LAMP server on my box. However, when I want to call PHP scripts which are on the LAMP server such as, in a POST request using fetch or XHR within JavaScript I get the following errors in my browser:
Access to XMLHttpRequest at 'http://localhost/test/vanilla-js-POST-JSON/login.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

postjson_xhr.js:19 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost/test/vanilla-js-POST-JSON/login.php with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Obviously, it's treating the LAMP server like another domain.

The way to fix this is to put a line at the top of your PHP script thus:
header('Access-Control-Allow-Origin: *');
Happy coding.

Tuesday, 26 February 2019

Vanilla JavaScript Login form POST handler using XHR

I did a similar post to this called Vanilla JavaScript Login form POST handler using fetch. Fetch returns a JavaScript Promise, which can be a bit of a pain so I've also done a version using XHR, see below:

var postJSON = function(url, method, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send(data);
};

Here's how to call it:
const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  const url = this.getAttribute('action');
  const method = this.getAttribute('method');

  postJSON(url, method, new FormData(form), function(error, json) {
    if (error !== null) {
      console.log('parsing failed', error);
    } else {
      console.log('json.username', json.username);
      console.log('json.password', json.password);
    }
  });
});

Tuesday, 12 February 2019

Vanilla JS Bind

I have created a Vanilla JavaScript bind class. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/JS_Bind
It employs :


  • HTML5
  • ES6

Vanilla JS carousel

I have created a Vanilla JavaScript carousel. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-carousel
It employs :

  • HTML5
  • SASS
  • BEM
  • ES6

Vanilla JS component

I'm creating a number of elements using Vanilla JavaScript. They will use :

  • HTML5
  • SASS
  • CSS grid
  • BEM
  • Media queries
  • ES6

In order to put these elements together more efficiently, I have put together a small framework, from which I will fork.
It lies at https://github.com/guitarbeerchocolate/vanilla-js-component

Wednesday, 6 February 2019

Vanilla JavaScript Login form POST handler using fetch

I've been updating my gists lately because I'm now in position to leave jQuery behind. See https://gist.github.com/guitarbeerchocolate
So, here's how to pass login form data to some middleware and accept JSON in return using fetch.

const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  const url = this.getAttribute('action');
  const method = this.getAttribute('method');

  fetch(url, {
    method: method,
    body: new FormData(form)
  }).then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('json.username', json.username)
    console.log('json.password', json.password)
  }).catch(function(error) {
    console.log('parsing failed', error)
  })
});

Wednesday, 23 May 2018

The 2018 Web Developer : Installing webpack

webpack is a node module which allows us to package source files into a single bundle to cut down on the number of HTTP requests.
I'm going to assume we have a directory called 'myApp' and an index.html
cd myApp
npm init -y
This will create a package.json file.
Within package.json, add some text to the "description" field to avoid a warning at the next stage.
If you're not going to use git at this stage also within package.json, add the line "private": true,
Again this is to avoid warnings.
Now we're ready to take node modules.
npm install webpack webpack-cli --save-dev
Now we create a file for configuring webpack.
touch webpack.config.js
Now let's create a directory structure for our source.
mkdir src
cd src
mkdir js
mkdir css
cd js
touch output.js
Now let's add some code to output.js and save.
console.log('Hello world!');
Now let's go back to the myApp directory.
cd ../..
Now we can edit the webpack.config.js file.
Add the following content to webpack.config.js and save.
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/js/output.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
You can see from the code above a number of things:

  • A 'path' constant to be used to establish where to get files from.
  • A module.exports object.
  • The mode in which we're working.
  • 'entry' is the start location that webpack will look to find the things it need to bundle.
  • 'output' is the location of the bundle.

So our HTML file, index.html will look like this:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  </head>
  <body>    
    <script src="./dist/bundle.js"></script>
  </body>
</html>
Now it's time to run webpack
From the command line, and in the 'myApp' directory type:
webpack
The result should be a directory called 'dist', which contains a file called bundle.js.
When loading the page, if we look at the console. It should say 'Hello world!'.

Monday, 14 May 2018

Get blogspot content using JavaScript fetch

This example pulls in JSON data from a blog hosted on blogspot.com

First, I'll need to get fetch.
To add it to your project, change to your project directory:
cd myApp
Then use the following command:
npm install node-fetch --save

const fetch = require('node-fetch');
const url = 'http://some-website.blogspot.com/feeds/posts/default/-/blog?alt=json';
var myFetch = fetch(url);

myFetch.then(response => response.json()).then(function(data) {
  showMyData(data);
}).catch(function(err)
{
  console.log('Caught an error ',err);
});

function showMyData(md) {
  md.feed.entry.forEach((e) => {
    var title = (e.title.$t || '');
var url = (e.link || []).pop().href;
    var date = new Date(e.updated.$t || Date.now());
    var lessLines = e.content.$t.substr(0, 800);
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var theMonth = months[date.getMonth()];
    var theYear = date.getFullYear();
  });
}

Friday, 11 May 2018

The 2018 Web Developer : JavaScript JSON processing without jQuery

Enter 'fetch'. The JavaScript API which performs HTTP requests.
First, I'll need to get fetch.
To add it to your project, change to your project directory:
cd myApp
Then use the following command:
npm install node-fetch --save

In this example, I have a simple .json file which contains a set of URLs and their types.

const fetch = require('node-fetch');
const url = 'feeds.json';
var myFetch = fetch(url);

myFetch.then(response=>response.json()).then(function(data) {
    showMyData(data);
  });

function showMyData(md)
{
  md.forEach((value) => {
    console.log(value.URL, value.TYPE);
  });
}

Thursday, 10 May 2018

The 2018 Web Developer : Animating without jQuery

There's not much wrong with jQuery other than it's size. Sometimes when you want to keep your website very lean you may wish to rely on pure JavaScript. In this case, I use the excellent animate.css. Even better than that, you can use animate.scss.
To add it to your project, change to your project directory:
cd myApp/git
Then use the following command:
git clone https://github.com/geoffgraham/animate.scss
Here is an example page which, on page load brings in animate.css and runs the function doTheSlide, to animate the contents of the H1 tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Do the slide</title>
<link rel="stylesheet" href="scss/custom.css" />
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>
Nothing happens until you create your scss file. custom.css is created thus:
cd myApp/scss
node-sass -w custom.scss custom.css
Now let's put some clever stuff in the custom.scss file.
@import "../git/animate.scss/animate.scss";
h1 {
  @include slideInLeft();
}
Refresh the browser and, hey presto! Now we're animating.

The 2018 Web Developer : Adding and using babel

Babel is a JavaScript compiler. It allows you to use modern JavaScript, then compiles it to a file which will work in all browsers.
To install it, use :
npm install -g babel-cli
To run it, change to the directory containing your JavaScript:
cd myApp
Then run a command like this:
npx babel custom.js -w -o script.js
custom.js is the file you are editing ans script.js is your output file. If you are using the -w (watch) parameter as above, the compilation will take place each time you save custom.js.

Thursday, 26 April 2018

CSS Grid Layout accordion

This example highlights an important difference required by CSS Grid Layout to function properly. I've put it in red to make it obvious. If this line used the auto width setting, then as the accordion-content items expanded, they would mess up the layout. By using fractions (fr), we force the columns to retain their widths.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS Grid Layout accordion</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #container {
      max-width: 46em;
      margin: 0 auto;
    }

    .grid {
      display: grid;
    }

    .two-columns {
      grid-template-columns: 1fr 1fr;
    }

    .accordion-link {
      width: 100%;
      display: block;
    }

    .accordion-content {
      overflow: hidden;
      display: none;
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: auto;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="grid two-columns">
      <div id="column1">
        <a href="#" class="accordion-link">Link 1</a>
        <div class="accordion-content">
          Possumus noster ex excepteur firmissimum, voluptate dolore quid non quem e constias in illum doctrina, quid praetermissum offendit eram voluptate.
        </div>

        <a href="#" class="accordion-link">Link 2</a>
        <div class="accordion-content">
          Quibusdam sunt aliqua commodo culpa, quo ne illum culpa minim, noster commodo officia, id te culpa aliquip.
        </div>
      </div>

      <div id="column2">
        <a href="#" class="accordion-link">Link 3</a>
        <div class="accordion-content">
          Ad ipsum eiusmod. Consequat non legam excepteur, ut duis constias. Sint quibusdam ne anim enim.
        </div>

        <a href="#" class="accordion-link">Link 4</a>
        <div class="accordion-content">
          Se appellat an laboris nam nostrud ad eram nescius.Ubi aliqua officia quo eiusmod malis admodum occaecat ne te ingeniis transferrem, quo minim esse qui quibusdam, sed incurreret praetermissum, commodo te senserit ea aute imitarentur laboris quis officia,
          litteris sint expetendis.
        </div>
      </div>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName('accordion-link');

    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var accordioncontent = this.nextElementSibling;
        if (accordioncontent.style.display === 'block') {
          accordioncontent.style.display = 'none';
        } else {
          accordioncontent.style.display = 'block';
        }
      });
    }
  </script>
</body>

</html>

Tuesday, 24 April 2018

Live data to your page using EventSource

In the following example I deliver live data to a web page. It's possible to do this quite easily using node.js and socket.io. However most of the websites I create are delivered through a shared server and the providers won't let me install node.js, so here I provide an alternative.
In this instance I use a combination of HTML, JavaScript and PHP. It would also be possible to use jQuery instead of straight JavaScript and PHP with something like python or indeed any other language. I also use a JSON file which could be replaced by any other data source.

Let's begin with data source tester.json
[
{
"name": "Aragorn",
"race": "Human"
},
{
"name": "Gimli",
"race": "Dwarf"
}
]

Now, the HTML file (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Live data connectivity</title>
</head>
<body>
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Race</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<script src="updatetables.js"></script>
<script src="run.js"></script>
</body>
</html>

Basically we need to check if the HTML table has any data inside. if it doesn't we take data from the data source. If the HTML table does contain data, it will be updated with the contents of the data source. To achieve this we'll use a function inside updatetables.js.
function updateTable(jd, id)
{
  var tbody = document.getElementById(id).tBodies[0];
  for (var i = 0; i < jd.length; i++)
  {
    if(tbody.rows[i] == null)
    {
      /* No data in HTML table */
      var row = tbody.insertRow(i);
      var x = row.insertCell(0);
      x.innerHTML = jd[i].name;
      x = row.insertCell(1);
      x.innerHTML = jd[i].race;
    }
    else
    {
      /* Data in HTML table. Needs updating. */
      var row = tbody.rows[i];
      tbody.rows[i].cells[0].innerHTML = jd[i].name;
      tbody.rows[i].cells[1].innerHTML = jd[i].race;
    }
  }
}

Now that we have a means of updating the table, we need to get the data using stream.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$JSON = file_get_contents('tester.json');
echo 'data: '.json_encode($JSON).PHP_EOL.PHP_EOL;
flush();
?>

Finally we can use the JavaScript EventSource object to call stream.php and get our data. Once we have our data, we can pass it to updatetables.js. This is done through run.js
var source = new EventSource('stream.php');
var tableid = 'myTable';
source.onmessage = function(event)
{
  var jsonData = JSON.parse(event.data);
  jsonData = JSON.parse(jsonData);
  updateTable(jsonData, tableid);
};

If you have recreated these files, to test it all works, try changing the values of items in tester.json and see the updates on your page without refresh.




Saturday, 24 February 2018

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 : Adding node-sass globally

In the previous post I installed node.js (node). This also came bundled with the Node Package Manager (npm). npm allows me to install many packages created by the JavaScript community, both open-source and commercial. Examples include Twitter bootstrap, ReactJS, etc.
In this example I'm going install use node-sass, globally. This will allow us me develop CSS for any project using SASS on my system using.
From the command line type:
npm install -g node-sass
I then test that it has installed using:
node-sass -v

Using node-sass

In this first example, I have a terminal window open and I'm in a directory containing my custom.scss which will need compiling to custom.css in order to be used by my web pages.
node-sass -w custom.scss custom.css
In this second example, I'm in the root directory of my project with a subdirectory of /scss. Here, I am compiling all .scss files to their .css equivalents, in the same directory.
node-sass -w scss/ -o scss/

What next?

Now that I have used npm to install a package globally. I've applied a package, namely node-sass, which will improve my productivity. Now, in the next post, I need to begin a new project and prepare the ground for project specific packages.
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.

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.

Wednesday, 10 January 2018

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
*/

Monday, 14 April 2014

HTML Entities jQuery plugin for the code tag

Try presenting HTML in a web page. It's a pain in the neck. Even in between the code tag, you have to create HTML Entities for greater than and less than symbols etc.
Not wanting to go through that pain ever again, I have created a small JavaScript plugin which helps.
First, here is the HTML page important differences in red:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Convert to HTML Entities</title>  
  </head>
  <body>
    <code>Hello, <h1>world!</h1></code>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="htmlentities.plugin.js"></script>
    <script>
    (function()
    {
      $('code').htmlentities();
    })();
    </script>
  </body>
</html>
Now, htmlentities.plugin.js:
(function($)
{
  $.fn.htmlentities = function()
  {
 
    beforeString = $(this).html();  
    afterString = beforeString.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    $(this).html(afterString);
  }
})(jQuery);

Happy coding!