DEV Community: Steve Griffith

AI teaching you how to program in a week?

Steve Griffith — Fri, 14 Jul 2023 15:29:39 +0000

Learning is repetition.

This is the most important concept to keep in mind while learning how to program.

When you learn any task, from playing guitar, to baking cookies, to building a brick wall, practicing your skill is what you need to do. The same restriction applies to becoming a developer.

When an AI learns how to program, or more accurately, how to generate code that will accomplish the most likely next steps in your program, then it needs to practice too.

The large language models (LLM) that have been built to help tools like Github CodePilot help you write code required huge amounts of code to analyze.

Machine Learning requires millions or billions of repetition to become effective at what they do. If the Machine Learning AI's job is to identify tumors in X-ray images, then it required millions of sample images that have been classified. It required guided practice where it was told whether or not it was classifying images properly.

It required practice.

It's not that one great programmer sat down and wrote an AI program that knows how to write code like they do. Learning requires repetition and practice.

Human Learning

Despite how far our science, technology, engineering, and medicine have come in the last hundred years, our brains are effectively the same as they were 10,000 years ago.

Humans learned how to pass along skills through watching someone skilled, by emulating them, by using their hands to practice those skills. Through repetition and feedback they improved.

This approach to learning still applies today.

Our brains need time to assimilate new information.

There is only so fast that anyone can learn a new skills.

AI tools need repetition too. They actually need more repetition than people. A human can often grasp a concept and be able to infer greater meaning from just one single example. The AI tools just have the advantage of repeating the steps faster.

Guided Learning with AI

There seems to be a sense now with students that either: there is no point in learning how to program because the AI tools will be doing all the programming soon; or that AI is going to make you able to learn how to program in an abruptly quicker time frame.

Neither is really true.

We still use assembly lines to build cars. Those assembly lines still use people. Many of the jobs that are done on the assembly lines are different than they were 100 years ago. There are many robots that do the heavy or monotonous tasks. The humans do the jobs that require nuance. The humans do the tasks that are more supervisory in nature.

The same is true for programming and AI. As developers learn to use the AI tools, it changes their role. The focus of developers can shift from questions like what is the name of the method I need here? to what is the most intuitive sequence of interface elements to help my users?.

AI tools can actually increase job satisfaction for developers. Let the AI tools do the heavy lifting, error identification, and the monotonous tasks. Focus on actually building a better application.

AI is not taking development jobs. AI tools are changing the roles of developers.

As for the second point, and the focus of this article, AI cannot force your brain to learn things faster.

What AI tools can do is assimilate the best guidance from a wide range of tutorials and sources. AI tools can help to guide you through a series of steps in your journey to learn how to program.

AI tools can answer questions about concepts when you struggle with them. AI tools can provide alternate explanations when one analogy doesn't work for you. AI tools can explain your own code to you. AI tools can explain generated code to you. AI tools can provide a series of step-by-step instructions to accomplish a task.

AI tools will NOT make your brain learn faster, per se.

AI tools WILL help you to avoid time wasted if you struggle with a topic. They will help you to organize your learning journey.

AI tools will be your personal tutor, always available by your side to answer your questions and ready to provide your next topic to learn.

You will still need to practice.

You will still need to wrap your head around abstract concepts that programming is filled with.

But, just maybe, AI tools will help to keep you on the right path and keep you from getting lost in the woods.

Improving your JavaScript with Enums

Steve Griffith — Sun, 28 Aug 2022 04:06:52 +0000

Enumerations (Enums) are a common data structure feature in many programming languages. While JavaScript does not natively have this feature, we can quickly and easily add them.

What is an Enum?

Before we jump into the code and learn how to create an Enum, we should discuss what one is. Let's start with an Array. This Array is a list of possible error types that we could have in our web app.

const errors = ['Data Error', 'Lunch Error', 'Mom Error'];

While an Array allows us to store a list of error types that could be used later, it does require the developer to memorized the names and the order that they appear in the Array.

console.log( errors[0] );
//if you remember that zero refers to 'DataError'
//then you get the right value.

An Enumeration solves this problem by creating an uneditable list of values where each value has a String name as the key.

So, this can be more closely replicated with a JavaScript Object.

const errors = {
  DATAERROR: 'Data Error',
  LUNCHERROR: 'Lunch Error',
  MOMERROR: 'Mom Error'
}

With an Object we avoid this issue of having to remember the position of each value.

console.log( errors['DATAERROR'] );

We still have the problem that any of the keys or values can be edited or removed.

So, an Enumeration is a list of key-value pairs that cannot be altered at runtime.

Creating JavaScript Enums

Accepting that an Object is a better choice than an Array for replicating an Enum, we need to solve the readonly issue. That brings us to the Object.freeze method.

The Object.freeze method that allows us take any object and change the configurable and writable property descriptors of every property so that no changes can be made to either the key or the value.

const errors = Object.freeze({
  DATAERROR: 'Data Error',
  LUNCHERROR: 'Lunch Error',
  MOMERROR: 'Mom Error'
});

console.log( errors['LUNCHERROR'] );
//we can use either square bracket syntax 
//or dot notation to access the values
console.log( errors.MOMERROR );

The use of const will also prevent any new value being assigned to errors and replacing the original Object.

Applications of Enums

As an example for how we could use our Enum we can imagine a simple web app that attempts to do some asynchronous tasks, in sequence, and when it fails any of them, it will throw an error that is specific to the task.

Promise.resolve(123)
  .then(async (id)=>{
    let url = `https://example.com/users/${id}`;
    let resp = await fetch(url)
    if(!resp.ok) throw new Error(errors['DATAERROR']);
    return 'burger';
  })
  .then(async (food) => {
    let isGood = await enjoyAsyncLunch(food);
    if(!isGood) throw new Error(errors['LUNCHERROR']);
    return true;
  })
  .then((ready) => {
    if( !askMomForPermission() ) throw new Error(errors.MOMERROR);
  })
  .catch((err)=> {
    console.error(`Reason for failure is ${err.message}`);
  });

A nice added benefit of creating our Enum Object is that now, most IDEs, like VSCode, will be able to use code-complete to show you the possible values for errors.

DOM Methods append() vs appendChild()

Steve Griffith — Mon, 29 Mar 2021 11:28:07 +0000

Back in the Day

Starting back with the earliest versions of the DOM we had the ability to inject new content into our web pages by using the innerHTML property or the parentNode.appendChild() method.

If you had a DOMString, which is a String that represents some new HTML content for your page, then it made sense to use innerHTML. We could even concatenate our content on to the old version of the HTML like this:

let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.innerHTML += p;

These were the days when the DOM methods and properties you could use, really depended on which Browser you were using. 😬 You frequently had to test for script capabilities and figure out which browser was being used.

There have actually been different versions of the DOM. Version 0, 1, and 2. These disparities led to the rise of libraries like prototype, mootools, scriptaculous, and jQuery. 15 years ago you were grateful to have a library 📚 that let you skip all the testing and call one method which would work in all browsers.

AppendChild Usage

If you were generating content and elements dynamically then developers tended to use appendChild. It has been around since those early DOM days.

let p = document.createElement('p');
p.innerHTML = 'This is <em>NEW</em> content.';
let div = document.getElementById('main');
div.appendChild(p);

We would even mix and match, creating top level elements with createElement and then using innerHTML for the text inside the element, just in case it included inline elements like <span> or <b>.

For nearly 20 years this was what we did in vanilla JS.

The New Methods Arrive

Between 2016 and 2018 all the standard browsers added support for a number of new DOM methods, including parentNode.append().

On the surface, no big deal. I can now save myself typing the letters C-h-i-l-d. Right?

True. BUT. It comes with some cool new capabilities.

This is the Way

These new capabilities are what sets append apart from appendChild and are the reason you should switch today! 🗓️

First, the new parentNode.append() method is happy to accept DOMStrings, not just DOM Elements.

let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.append(p);

It still accepts DOM Element Objects but it can handle the DOMStrings too.

Second, the new parentNode.append() method lets you pass in multiple elements. That means I can add a series of new Elements and/or DOMStrings with one single call to append and they will be added in order!

//create a heading Element Node with text
let head = document.createElement('h2');
head.textContent = 'The Section Heading';
//create a paragraph DOMString
let p1 = '<p class="recent">This is <em>NEW</em> content.</p>';
//create a paragraph Element Node with an Img Element Node
let p2 = document.createElement('p');
let img = document.createElement('img');
img.src = 'http://www.example.com/image.jpg';
p2.append(img);

let div = document.getElementById('main');
//put all three into <div id="main">, in order
div.append(head, p1, p2);

What's the Catch

There is always a catch. What does it not do that appendChild could?

Only one thing. The older appendChild method returned a reference to the node that was appended. The newer append method returns undefined.

Is that bad? Not really. As you can see in my example above, much of the time you already have variables that refer to the elements you are appending.

And honestly, in the 20+ years of client-side scripting where I have been using appendChild, I have never used the return value from the method.

So, start today. If you were using appendChild change the habit and use append instead.

If you want to learn more about the DOM, Javascript or practically any web development topic: please check out my YouTube channel for hundreds of video tutorials.

Keep Your Methods Chained 🔗🔗🔗

Steve Griffith — Wed, 24 Mar 2021 16:57:47 +0000

Chaining methods is something that you have likely done at some point and you may not have even realized it. If you haven't then you will definitely have seen it in other people's code. This is what it looks like when you chain methods.

let names = ['Tony', 'Adesh', 'Robert', 'Su Cheng'];
//want to run both filter and map on this array.
names = names.filter(someFunc).map(otherFunc);

We will look at an expanded version of this and explain all the details below.

What is Chaining

The process of programming is simply sequential problem solving. We break a problem down into small logical steps and decide the best order to execute those steps.

By chaining our methods we can leverage best practices like pure functions. We can create our small logical steps with pure functions.

A pure function is one that will always provide the same output for the same input and it can't have any side effects - like changing the value of something outside the function that had nothing to do with the input or output values.

This article has a logical sequence to it. It is divided into sections. The sections are split into paragraphs. The paragraphs are split into sentences. The sentences are split into individual words. The sequence of each of those steps matters. Change the steps at any level and the tutorial fails. Just like your program.

Chaining your methods is a way that you can hard code, in a very readable way, the steps that you are taking.

let result = myobject.stepOne().stepTwo().stepThree();

How Does Chaining Work

The ability to chain them does have some restrictions. The result of the first step must be an Object or datatype that is capable of initiating the next step.

JavaScript will automatically read and execute these steps from left to right.

When it completes the final step then the result will be returned and assigned to the waiting variable on the left side of the =, if there is one.

As long as you are returning a valid object type for the next method, then you can keep chaining.

Here is a simple example with a couple of built-in methods - Number.prototype.toFixed(), and Number.parseFloat().

let pie = '3.1415 is the approximate value of PI';
let num = parseFloat(pie).toFixed(2);

The value of num will be "3.14". The global method parseFloat accepts a string and extracts the left-most digits, decimal is permitted. It will return a Number.

The toFixed method can be run on a Number. It will use its argument and convert the Number to the String equivalent of the Number with the correct number of decimal places.

The longer way to write this would have been to add the first method on its own line and create another variable to hold the value of the middle step.

let pie = '3.1415 is the approximate value of PI';
let middle = parseFloat(pie);
let num = middle.toFixed(2); 
// the value of num will be "3.14"

Chaining our methods saves that middle step. No creation of an extra variable. No extra line of code. We can just read the steps on a single line. 💯

Can I Chain my own Methods

If you are building your own Object(s) then you can also chain your own object methods, as long as you follow the same rule - return the correct datatype to be used in the next method.

Here is an example with a Person 🧔 object. (The object could be built with the class syntax too).

const Person = function(_name){
  this.name = _name;
}
Person.prototype.speak = function(_phrase){
  console.log(`${this.name} says, "${_phrase}"`);
}
Person.prototype.drink = function(_beverage){
  console.log(`${this.name} is enjoying a ${_beverage}`);
}

With our Person object we can now instantiate a person and call the methods.

let rashad = new Person('Rashad');
rashad.speak('Do your homework');
rashad.drink('coffee');

Everything works just fine. But we can't chain speak or drink. Both functions return the default undefined.

However, if we add a return statement and return our Person object that we instantiated...

Person.prototype.speak = function(_phrase){
  console.log(`${this.name} says, "${_phrase}"`);
  return this;
}
Person.prototype.drink = function(_beverage){
  console.log(`${this.name} is enjoying a ${_beverage}`);
  return this;
}

We don't want to add a return to the constructor function because it has to return the newly created instance.

NOW we can chain our methods and it WILL work 🙌.

let vladimir = new Person('Vladimir');
vladimir.speak('I am thirsty').drink('beer');

And just like that, you're almost ready to flex 💪.

Add Some Functions to the Mix

We have a couple simple methods on our Person 🧔 object, but we are still using really simple code.

What if our methods internally called on other functions? What if they accepted other functions as a supplied argument? How do we keep chaining and keep our methods pure?

Let's add an eat method to our Person object. We could just pass a String to the method with the name of the food. However, passing in a function that will choose a food item for us from some other source is a more practical and realistic way to do this.

...or why not both?

First, we add the new eat method to our Person 🧔 object.

Person.prototype.eat = function(source){
  let food = '';
  switch(typeof source){
    case 'string':
      food = source;
      break;
    case 'function':
      food = source();
      break;
  }
  console.log(`${this.name} is eating ${food}`);
  return this;
}

Now our method can accept either a Function to call to get the food OR a String with the name of the food.

It can also be chained because it returns some Object that has other methods which could be called.

Here is an example of a food function that could be used.

const food = function(){
  let types = ['a slice of pizza', 'two tacos', 'some sushi', 'a burrito'];
  return types[Math.floor(Math.random() * types.length)];
}

And now our new method as part of our chained method code.

let sarah = new Person('Sarah');
sarah.speak('Hello').drink('tea').eat(food).speak('That was great!');

We run this code and we get something like this:

Sarah says, Hello
Sarah is enjoying a tea
Sarah is eating two tacos
Sarah says, That was great!

Start flexing 💪!

Common Array Method examples

Let's move back to that original example with the Array methods - filter and map.

let names = ['Tony', 'Adesh', 'Robert', 'Su Cheng'];
names = names.filter(someFunc).map(otherFunc);

The Array.prototype.filter method will take a function as its parameter and run that function once on each item in the array. The filter method's function must return true or false for each item. true means keep the item. false means dispose of the item. After calling the function once per item, the filter method will return a new Array built based on those true and false responses from the function calls.

This new Array will be used to call the map method.

The Array.prototype.map method will take a function as its parameter and run that function once on each item in the array. The map method's function can return anything it wants. The map method builds a new Array containing all those returned values. The new Array will always have the same number of items as the Array that called the map method.

The new Array returned from the map method, since there is nothing chained onto it, will be assigned to the variable names.

Now you know how to chain your methods and why you want to.

Good for you! 🏆🥇💯🙌

If you want to learn more about Arrays, Functions, Javascript or practically any web development topic: please check out my YouTube channel for hundreds of video tutorials.

Create Your Own Custom JS Error Type 🤔

Steve Griffith — Fri, 19 Mar 2021 18:18:59 +0000

If you are fairly new to programming, then it is very natural to feel that Errors are evil nasty things to be avoided at all costs.

When an error happens, we are thankful that we have a catch() method or a try...catch block to stop our page from crashing. We log the error message to the console and move on to more important less stress-inducing things.

Sometimes those message are red, sometimes amber, often cryptic or unnerving to the uninitiated novice.

Taking control

Once you realize that every error message is actually meant to be a source of assistance from another developer, that fear can start to dissipate.

An error message is really another developer's best effort to give you some information that you can use to diagnose the cause of the problem.

If you are writing code, that means at some point another developer will be running the code that you wrote and a problem will occur. You should want to help that poor developer solve the problem.

Fake it till you make it

Why not start using the best practices of intermediate and senior developers now?

Start writing more detailed error messages.
Start building your own types of Error objects.
Start intentionally generating Error objects in your code.
Throw Errors and Catch them, on purpose.

How to Create an Error

A basic Error object is actually quite easy to create.

let err = new Error('This is my friendly message');

One line of code and now you have your very own Error object in a variable that you can pass around your code.

The String that we pass to the error constructor becomes the value of the message property in the Error object.

How do I Throw an Error?

Just because you create an Error object and put it inside a variable does not mean that anything will happen with the error. If you want the browser to react to the error then you have to throw it.

Think of it as shooting a flare up into the air. If you want your error to be noticed, then we need to draw attention to it.

let err = new Error('This is my friendly message');
throw err;
//or alternatively
throw new Error('This is my friendly message');

When you throw the error either your script crashes and writes out the message in the console, or we need to have a try...catch block or catch( ) method ready to catch the thrown error.

Try out the following snippets to see you error messages appear in the console without crashing your script. You can run them directly in the browser console if you want.

try...catch

try{
  throw new Error('This is my friendly message');
}catch(err){
  console.log(err.message);
}

catch( )

Promise.resolve()
  .then( () => {
    throw new Error('This is my friendly message');
  })
  .catch( err => {
    console.log(err.message);
  });

Create your Own Custom Error

While it is nice to be able to display a friendly message in the console, in the real world we have actual problems that happen in our code.

We have situations that you are occasionally just using if statements to handle: A user has failed to provide their usernam; an invalid product reference code was entered in the querystring; there was a network failure when making an AJAX call; and many other every day situations.

We can create our own type of Error object for each of these. We can add additional information about the error into the Error object. We can throw and catch these errors to make our code more resistant to failure, as well as, providing more details to other developers.

This code can be made with or without the class keyword but I am going to show the class version here. I am going to create my own special type of error to use with fetch() calls that fail because the browser is offline.

class NetworkError extends Error{
  constructor(msg, url){
    super(msg);
    this.name = 'NetworkError';
    this.target = url;
  }
}

My new Error type is going to be called NetworkError. It is going to inherit all the properties of a standard Error object. However, it is getting an extra property called target that will hold the URL which was being used when the failure occurred.

Use your Errors as Part of the Solution

So, we now have our own NetworkError type object that we can add to our JS files or put in a utilities file that we use in all our projects.

Let's put it into use as part of our project.

document.body.addEventListener('click', (ev) => {

let url = `http://jsonplaceholder.typicode.com/users/10`;

fetch(url)
  .then((response) => {
    //we got a response from the server
    if(response.status == 404){
      throw new NetworkError(response.statusText, url);
    }
    //run more code on the response.
    return response.json();
  },
  (err)=>{
    //err is a general error happened with fetch( )
    //this is a network failure, usually meaning offline
    throw new NetworkError('Unable to reach server.', url);
  })
  .then((data) => {
    console.log(data);
  })
  .catch( err => {
    //err could be either of those NetworkErrors or
    //an error that happened in the `run more code on the response`
    //check for the type of error
    switch(err.name){
      case 'NetworkError':
        //handle our network errors.
        console.warn(`Dude. You were totally trying to access ${err.target}. And then the browser was all like ${err.message}`);
        break;
      default:
        //handle any other errors
        console.error(`At least it wasn't a Network error. ${err.message}`);
    }
  });

}

If you put all our script into a webpage, and then in the dev tools Network tab set the browser to offline.

Run the script once online and once with the browser tab toggled to offline and you should see our custom NetworkError messages in the console.

I've wrapped a click event listener function around the fetch() call. You may have to add the following CSS to give you something to click.

body {
  min-height: 100vh;
  background-color: #333;
  cursor: pointer;
}

If you want to learn more about Error handling, Javascript or practically any web development topic: please check out my YouTube channel for hundreds of video tutorials.

You CAN Convert your Callbacks to Promises

Steve Griffith — Mon, 15 Mar 2021 19:36:28 +0000

Callback functions have been part of JavaScript since the start, and to be clear, I don't think that there is anything wrong with callback functions. They serve a purpose and have done so well. I still use callbacks regularly.

I have even posted videos about what callback functions are and how you can use them in your code. Here are a couple examples:

The problem that some developers have with callbacks is known as callback hell. This happens when you end up nesting multiple callbacks inside of each other.

Here is a completely fabricated example to give you an idea of what I mean.

myObject.someTask((returnObj) => {
  //this is the success callback
  //our `returnObj` is an object that also has a method
  //which uses a callback

  returnObj.otherTask( (otherObj) => {
    //successfully ran `otherTask`
    //the `otherObj` sent back to us 
    // has a method with callbacks

    otherObj.yetAnotherTask( (anotherObj) => {
      //success running yetAnotherTask
      // we are reaching callback hell
      // imagine if anotherObj had a method 
      // which used callbacks...
    },
    (error)=>{
      //failed to run yetAnotherTask
    }
  },
  (error)=>{
    //failed to run otherTask
  }); //end of otherTask
},
(error)=>{
  //this is the error callback
}); //end of someTask

The goal of the code above is to run myObject.someTask( ). When that is finished we want to run returnObj.otherTask( ) which uses the object returned from someTask. After otherTask runs we want to call otherObj.yetAnotherTask( ).

I'm sure you get the point here.

Just because we wanted to run these three methods in order, we ended up creating this large group of nested curly-braces and function calls.

The code runs fine. There are no errors. But the nested sets of parentheses and curly-braces make it easy to make typos and make it difficult to read.

The Promise Difference

With Promises we can turn a series of tasks into something that is alot easier to read. Each task gets its own then( ) method as a wrapper and we can chain them together.

Promise.resolve()
  .then(()=>{
    //first task
  })
  .then((returnedValue)=>{
    //second task
  })
  .then((returnedValue)=>{
    //third task
  })
  .catch((error)=>{
    //handle errors from any step
  })

Wrap that Callback

Now, while we can't take a built-in function like navigator.geolocation.getCurrentPosition( ) and change the native code to turn it into a Promise, we CAN wrap it in one to create a utility function that we use in all our projects.

The Basic Promise Syntax

When we create a Promise, we use the new operator and provide a function which has two arguments: one to be called when resolving the promise; and one to be called when rejecting the promise.

let p = new Promise( (resolve, reject) => {
  //This function is passed to the newly created Promise.
  //if we do this:
  resolve();  
  // we are saying that the Promise worked
  //if we do this:
  reject();
  // we are saying that the Promise failed
});

Inserting our Callback Function

We now need to place our original callback function inside the resolve-reject function, within the Promise.

let p = new Promise( (resolve, reject) => {
  navigator.geolocation.getCurrentPosition(
        (position) => {
          //success
          resolve(position);
        },
        (err) => {
          //failed
          reject(err);
        });
});

The result of our geolocation call is now a Promise object inside our variable p. We can chain then() and catch() methods on the end of it, like this:

p.then( (position)=>{
  console.log(position.coords.latitude, position.coords.longitude)
})
.catch( (err)=>{
  console.log(err); //the error from the geolocation call
})

We now have a functional solution which, at the top level, uses a promise instead of the callback.

However, we are not doing anything with the options object and we have not really made something that would be friendly to use in our future projects.

Reusable Context

To be able to reuse our cool location Promise and not repeat ourselves, we should wrap this code in a function.

The function should include a test for browser support for geolocation too.

const getLocation = () => {
  //check for browser support first
  if('geolocation' in navigator){
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          //success
          resolve(position);
        },
        (err) => {
          //failed
          reject( err );
        }
      );
    });
  }else{
    let err = new Error('No browser support for geolocation');
    return Promise.reject(err);
  }
}

If the browser lacks the support for geolocation then we should return a failed promise that holds an error object.

Now, we can call our getLocation function and chain the then and catch methods on it.

getLocation( )
  .then( pos => {
    //success. We have a position Object
  })
  .catch( err => {
    console.log(err); //the error from the geolocation call
  });

Add Support for Parameters

So, we have a Promise-based call for geolocation but we still can't customize the options parameter for our getCurrentPosition call.

We need to be able to pass an options object to our getLocation function, like this:

let options = {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 0,
}
getLocation(options).then( ... ).catch( ... );

Inside our getLocation function we can test to see if the parameter is passed in, provide a default set of values, and then pass it to the getCurrentPosition method as the third parameter.

const getLocation = (opts) => {
  if('geolocation' in navigator){
    opts = opts ? opts: {
          enableHighAccuracy: false,
          timeout: 10000,
          maximumAge: 0,
        };
    navigator.geolocation.getCurrentPosition(
        (position) => {
          resolve(position); //success
        },
        (err) => {
          reject( err ); //failed
        },
        opts
      ); //opts is the third argument
    });
  }else{
    //...same as before
  }
}

A ternary statement is a great way to check if one was passed in and if not, give it default values. An alternative way is to use destructuring with default values. (But that is an article for another day.)

Make Mine a Module

If you are already using the ES6 Module syntax to import your utility functions, like this one, into your websites and projects, then we can do the same thing with this approach.

Take our finished function declaration and expression and put it into a file called utils.js.

//utils.js

const getLocation = (opts) => {
  if ('geolocation' in navigator) {
    opts = opts ? opts : {
          enableHighAccuracy: true,
          timeout: 10000,
          maximumAge: 30000,
        };
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          resolve(position); //success
        },
        (err) => {
          reject( err ); //failed
        },
        opts
      );
    });
  } else {
    let err = new Error('No browser support for geolocation');
    return Promise.reject(err);
  }
};

export { getLocation };

As the last line in this file we export our cool new Promise-based geolocation solution.

Then, back in our main JavaScript file for our website we import our code so we can use it.

//main.js
import { getLocation } from './util.js';

document.body.addEventListener('click', (ev)=>{
  //click the page to get the current location
  let options = {
    enableHighAccuracy: true,
    timeout: 15000,
    maximumAge: 0,
  };
  getLocation(options)
    .then((pos) => {
      //got the position
      console.log('Latitude', pos.coords.latitude);
    })
    .catch((err) => {
      //failed
      console.warn('Reason:', err.message);
    });
});

And that's everything. We now have a previously callback-only bit of code that we have made run is it were a Promise-based method.

You can follow this approach with any callback methods and build your own library of promise-based utility functions.

Remember that Chrome now requires HTTPS to test geolocation functionality. If you are testing this code over localhost, Firefox still lets you run it without HTTPS.

If you want to learn more about Promises, Javascript or practically any web development topic: please check out my YouTube channel for hundreds of video tutorials.