Tag Archives: JavaScript

Where art thou: Converting addresses to latitude and longitude.

Previously, we have covered how to identify where the user is, based upon navigator.geolocation and based upon their IP address (there are definitely ways to make IP-based geolocation suck less).  I figured that in today’s post, we would look at how to go from an arbitrary physical location (zip code or city name) to latitude and longitude coordinates. Continue reading Where art thou: Converting addresses to latitude and longitude.

How to know your user

There are times when it is very important to know as much as you can about the user of your application.  A good example is how I need to know where the user physically is in order to calculate the distance between them and the park in the state parks app.  Another example is if the user is on a mobile device vs a desktop or if they are online or not, so that you know what to show them and how to do it. Let’s take a look at a few ways you can gather information about the user. Continue reading How to know your user

State Parks App: I made some new APIs for the app

Last week, I wrote about creating a cloudflare worker.  When I created that worker, I knew that I wanted to leverage that for the state parks app.  This week, I created three new workers: one to get the user’s location, one to get the list of parks, and one to get an individual park.  Let’s take a look. Continue reading State Parks App: I made some new APIs for the app

Playing with Vue Router

Back in July, we looked at how Vue CLI and webpack work and I figured that it was time to look at Vue Router, as a follow-up.  Vue Router is going to be pretty necessary for the state parks app, moving forward.

Like I did last time, I used VueCLI and Bulma.  I also put the code on Github and used Render to host the end-result at vue-router-demo.jws.app.  If you look at the repo, you will find three .vue files in the src/components folder: About.vue, Pizza.vue, and PizzaListing.vue.  If you look at src/main.js, you can see that the routes are set up like …

 

import About from './components/About.vue';
import Pizza from './components/Pizza.vue';
import PizzaListing from './components/PizzaListing.vue';


const routes = [
{ path: '/', component: About },
{ path: '/pizza/:id', component: Pizza },
{ path: '/pizzalisting', component: PizzaListing }
]

 

This makes the About file the file that loads when you go to the root of the site, the Pizza file what loads when you go to /pizza/[something], and PizzaListing loads when you go /pizzalisting.

If you have any questions, comments, etc, feel free to drop a comment below.

 

[ Cover photo by Peter Herrmann on Unsplash ]

New things in ECMAScript 2021: String.prototype.replaceAll()

This is going to be a pretty quick post (mainly because I am on vacation, next week).  I was skimming through what is new in ECMAScript 2021 and spotted replaceAll().  It is already supported in everything except for Internet Explorer.  Let’s take a look at a quick example.

See the Pen
String.prototype.replaceAll() Example
by Joe Steinbring (@steinbring)
on CodePen.

The reference is within computed properties but this definitely does not require vue.  As you can see, it works the same as replace() but it just doesn’t stop at the first instance.

Have any questions, comments, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Jamie Street on Unsplash  ]

How to sort a list of locations by how close they are to you

One of the things that are most important to me for phase 1 of the state parks app is to have the list of parks be sorted by how far the user is from the park.  After all, Tower Hill State Park might be interesting but if you live 4 hours away, you aren’t likely to give it a visit.  While I know vaguely how I would do that, I do not think that I have actually done that before.  So, let’s figure this out. Continue reading How to sort a list of locations by how close they are to you

Three ways to load lazily

Lazy loading is a method for optimizing a website by loading images (or iframes) on demand.  If properly implemented, the browser should load the images that are at the top of the page first and wait to load the rest until the user starts to scroll down the page.  This is something that is relatively easy to implement but more difficult to test.  While writing the examples for this post, I opened the browser console, switched to the network tab, and watched the images load.  If you want the effect to be more pronounced, you can throttle the speed of your network connection but it didn’t help to much in my case. Continue reading Three ways to load lazily

What the heck is hoisting?

This is a topic that I have been avoiding (mainly because I don’t feel like I understand it enough).  I figure that we have to tackle the idea eventually, though.  Hoisting is a JavaScript mechanism where variable and function declarations are moved (or hoisted) to the top of the scope before the code is executed.

Of course, there are a heck of a lot of caveats to be aware of.  Hoisting only moves the declarations and not the assignments.  Additionally, it won’t hoist anything that uses the let or const keywords and it won’t hoist function expressions or arrow functions.  So, what can you actually do with this?

See the Pen
JavaScript Hoisting – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

As you can see in the above example, we moved the declarations below the assignments and the places where we are using the variables and it executes fine.  If we remove the declarations completely, it doesn’t really matter, though.

See the Pen
JavaScript Hoisting – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

It is this fact that makes me think that this hoisting malarkey is kind of dumb.  So, what happens when you try to use let instead of var?

See the Pen
JavaScript Hoisting – Part 3
by Joe Steinbring (@steinbring)
on CodePen.

What you get is a “Uncaught ReferenceError: Cannot access ‘fname’ before initialization” error.  Frankly, that is what you would expect to see.

Have a comment, question, or concern?  Did I get something wrong in my analysis?  Do you secretly love hoisting?  Feel free to drop a comment, below.

 

[ Cover photo by Fas Khan on Unsplash ]

JavaScript Classes

Last week, we looked at arrow functions.  This week, I figured that we would look at Classes.  Support for classes was another thing added to JavaScript with ES6.

See the Pen
JavaScript Classes
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there is a Person class and a Person2 class.  The difference between the two is that Person2 has a default value for the birthday and Person doesn’t.  Easy enough. 🙂

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover Photo by Debby Hudson on Unsplash ]