Category: coding

JavaScript fetch()
In a previous post I was refreshing my memory with vanilla JavaScript after years of jQuery-ing, especially AJAX request and the
```
XMLHttpRequest()
```
My eyes rolled when I was reading more about it then I found fetch() ( I know its been about since 2015 and now almost universally adopted).

Fetch does what XMLHttpRequest does but in a more elegant way and DOES NOT need additional libraries as it is bundled with JavaScript. It also makes use of “promises” .
```
const url = "https://randomuser.me/api/?results=10";

fetch(url)
.then(function(response) {
 return response.json();
})
.then(function(data) {
 console.log(data.results);
})
.catch(function() {
 console.log("Booo");
});
```
The above code queries the URL, then parses the string as JSON, then does something with the data.

It also catches errors.

Good eh?

Its looks to be easy to expand and do all manner of fetching. For example submitting a form
```
var form = new FormData(commentForm);
fetch( url, { method: "POST", body: form })
```
You can then chain .then() promises to get the desired outcomes.

For more information

A quick introduction video from Google

From Google Working with the Fetch API

Jake Archibald’s post Thats so Fetch

Scotch post The Fetch API
May 12, 2017
strpos() not working?
PHP strpos() not working as expected? It could be a “non-strict” comparison problem.

When using strpos() to determine whether a substring exists within a string the results can be misleading: Remember FALSE == 0?

Consider the following:
```
$quote = 'Dave rocks';
 
if (strpos($quote, 'Dave')) {
    echo 'Dave is awesome.';
} else {
    echo 'Dave is not awesome.';
}
```
strpos() Returns position is 0 ( zero ) that is evaluated as FALSE so, “Dave is not awesome”.

Much better. In this case adding the strict comparison === ( 3 equals ) to the “if” statement asks if strpos() returns a number and is not strictly FALSE. So, “Dave is awesome”
```
$quote = 'Dave rocks';
 
if (strpos($quote, 'Dave') !== FALSE) {
    echo 'Dave is awesome.';
} else {
    echo 'Dave is not awesome.';
}
```
For more see PHP.net
May 12, 2017

New querySelector() and querySelectorAll()

Catching up with JavaScript after years of using jQuery I found these two shortcuts for replacing longer getElementById() methods. NOTE: the querySelector is passed an ID in the CSS format

<button id="our-button">Add New Item</button>

<script>
    // These are both the same
    var ourButton = document.getElementById("our-button");
    var ourButton = document.querySelector("#our-button");
</script>

<ul id="our-list>
    <li>A thing</li>
    <li>Another thing</li>
    <li>A new thing</li>
</ul>


<script>
// These are both the same
   var listItems = document.getElementById('#our-list').getElementsByTagName("li");
   var listItems = document.querySelectorAll("#our-list li");
</script>

May 11, 2017

Javascript AJAX without jQuery

I learnt this stuff years ago but with the rise of jQuery I like many others had become lazy. Add the fact that so many browsers handled things slightly different going down the library route had its benefits.

It is 2017 and things have improved many jQuery(ish) approaches have been adopted by Javascript and browsers have become more similar.

So here goes. First off a GET request to retrieve a Chuck Norris joke

<script>
var url = "http://api.icndb.com/jokes/random";
var request = new XMLHttpRequest();

request.open('GET', url, true);

request.onload = function() {
 if (request.status >= 200 && request.status < 400) {
 // Success!

printJokes(request.responseText);

} else {
 // We reached our target server, but it returned an error
 console.log('There was a problem. Status:' + request.status);

}
};

request.onerror = function() {
 console.log('There was a problem!');
};

request.send();


var printJokes = function(jokes){

JSON.parse(jokes, (key, value) => {
 key == 'joke' ?
 console.log(value) : ''
 });

}
</script>

May 11, 2017

Toggling in Javascript, PHP and possibly other environments
For a long time if I wanted to change the state of a variable between true and false (toggling). In PHP I would do something like…
```
$switch = true;
if($switch == true){
    $switch = false;
}else{
    $switch = true
}
```
That worked fine, then there came Ternary shorthand
```
$switch = true;
$switch = ($switch == true ? false : true);
```
Not bad eh? Much easier to read. Then came this
```
$switch = true;
$switch = !$switch;
```
If you read it out loud it sounds like, ‘Switch is not true?’ So the answer would be either

True = $switch is false

Or

False = $switch is true
May 9, 2017

Javascript reminder #1 Spread syntax

Okay, a quick reminder on Spread Syntax

If you have a Javascript function that you call with

average(1, 2, 3);

function average(x, y, z){
// Average of the three numbers
}

You are limited to just three properties/arguments. Not very useful if you have more or less numbers you want to find an average. Using Spread Syntax we don’t have to worry about the number of values passed

function average(...args) {
  var sum = 0;
  for (let value of args) {
    sum += value;
  }
  return sum / args.length;
}

average(2, 3, 4, 5); // 3.5

The Spread Syntax ( the three dots{name}) includes all the unknown values. It gets better still

var averageMethod = 'mode';
var roundTo = 2; /Decimal places
doThing( averageMethod, [2,4,3,6,10,19], roundTo);

function doThing(method, ...valuesToAverage, roundTo)
{
// Calculate averages
}

And Spread Syntax can be used when creating arrays

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Good eh?

May 8, 2017

Composer – Init, Install and update
Assuming that composer is installed on your machine what next?

If you do not have a composer.json file lets create one. In your command line ‘cd’ into your projects root folder. Then type
```
composer init
```
and answer the questions. Easy.

Look at your projects root directory and you will see a composer.json file. This is where you can add/remove packages, set namespaces, set files that are always load, run scripts, and lots of other good stuff.

Do you see a vendor/ directory? No? At this stage type
```
composer install
```
This actually ignores the .json file and reads or creates a composer.lock file then installs all the packages and dependencies required ( as well a bunch of other stuff – see the end of the post). The lock file is important when there are multiple developers/users it ensures that we/you are all using the exact same versions of installed packages.

Now lets pretend that you have cloned a project from GitHub that uses composer. You wont see a vendor/ directory but you will have a lock file.
```
composer install
```
Now you have a vendor/ directory and all is right with the world.

If you try and run install again it won’t do anything ( try it if you want )

If you want to add packages use the
```
composer require name\package
```
If you want to update the composer files and logs
```
composer update
```
Updates your dependencies to the latest version according to composer.json, and updates the composer.lock file.

“A bunch of other stuff”

Composer can do a whole lot more. Including
- Running scripts after installing, updating, etc
- Autoload files. For example helper files with common functions
- Pulling packages from GitHub. Great if you are writing your own
- Lets you have a development environment and production sets of packages. E.g. so you can have PHPUnit just on your local machine.
March 30, 2017
Laravel Validation of unique fields
Laravel Validation of unique fields e.g email

Basic server side validation in Laravel is ridiculously easy. The following inside a controller will validate the passed values and redirect back if it fails.
```
$this->validate($request, [

            'firstName' => 'required',

            'lastName' => 'required',

            'email' => 'required|unique:users',

            'password' => 'required|confirmed',

            ]);
```
You can see what fields are required; the email has to be unique in the database users table and the password is required and must match a field named ‘password_comfirm’. When this validation passes you can then add the new user.

What about UPDATING or (PUT/PATCH) the user form is returned, the firstName has changed and the email remains the same. The original validation code will not pass and return an error of ‘email already in use’.

Solution
```
$this->validate($request, [

            'firstName' => 'required',

            'lastName' => 'required',

            'email' => 'required|unique:users,email,'.$id.'',

            ]);
```
The email’s unique rule now looks up the users table, looks for the email address except where the id column matches $id

For more information: https://laravel.com/docs/5.4/validation#rule-unique
March 22, 2017
PHP Don’t Abbreviate
Simply put, please do not abbreviate in your code.

Always code as if the guy who ends up maintaining your code will be a
violent psychopath who knows where you live. Code for readability. John F Wood

If others have to read it they will have no idea what an abbreviation means and when you come back to it in 6 months time will you remember what this does?
```
<?php
function delHisFile($p) { 
// Do something
 }
```
Or
```
function sort(array $a) {
 for ($i = 0, $c = count($a);  $i < $c;  $i++) { 
// Do something
 }
}
```
How does this read?
```
<?php
function deleteHistoryFiles($path) { 
// Do something
 }


function sort(array $array) {
 for ($index = 0, $array_count = count($array); $index < $array_count;  $index++) { 
// Do something
 }
}
```
When I started out coding for some reason I thought variables, functions, methods and class names that where long and descriptive would have an adverse effect on performance ( I know daft eh) .
March 20, 2017
PHP foreach() function
Okay, another everyday snippet of PHP code tweaked.

We all use the following
```
<?php

foreach($array as $item){

// Do something

}

?>
```
Which works fine, sometimes the // Do something gets complicated with HTML
```
<?php

foreach($array as $item){

echo '<tr>';

echo '<td>'.$item->first_name.'</td>';

echo '<td>'.$item->last_name.'</td>';

echo '<td><a href="'. $item->name .'">'.$item->email.'</a></td>';

echo '</tr>';

}

?>
```
After a while it gets messy and can be easy to have errors in your HTML which your editor might not pick up.

How about this for a solution – its an Alternative Form
```
<?php

foreach($array as $item) : ?>

<tr>

<td><?= $item->first_name ?></td>

<td><?= $item->last_name ?></td>

<td><a href="<?= $item->email ?>"><?= $item->email ?></a></td>

</tr>

<?php endforeach ?>
```
There are a few other ways but this reads really well. If you are looking to store the HTML as a variable before echoing it out have a look at ob_start(). However, creating chunks of HTML and passing them from place to another isn’t really good form – see separations of concerns and MVC

This also works for if() statments
March 16, 2017

Category: coding

For more information

Assuming that composer is installed on your machine what next?

Laravel Validation of unique fields e.g email

Solution

This also works for if() statments