DEV Community: Joe Steinbring

How to deploy a PHP app to Azure

Joe Steinbring — Tue, 27 Sep 2022 11:56:58 +0000

In a previous post, we covered how to deploy a Node.js app to Azure. This time, we are going to cover how to deploy a PHP app to Azure. Just like last time, we are going to be using the Azure CLI to do this.

Prerequisites: PHP and Azure CLI

Before we go any further, you need to have PHP installed. We can install it using Homebrew. PHP is what is going to allow you to test your code before deploying it to the server. You are also going to need to have Azure CLI installed on your computer.

Step 1: Create a PHP app to deploy

Our test app is going to be pretty simple, this time. It is just going to be echo "Hello Flavortown!";.

If you want to test the app, you can run php -S localhost:8080 from the terminal.

With the PHP Development Server running, you can open http://localhost:8080/ in a browser.

Step 2: Deploy to Azure

From within the project folder, you can deploy the project by running az webapp up --runtime "PHP:8.0" --resource-group jsteinbring-demo-apps --name JWS-PHP-Example --os-type=linux.

At this point, you can visit https://jws-php-example.azurewebsites.net/ to see the end-result.

Step 3: Redeploying to Azure

Similar to last time, the details for the project are stored within .azure/config, so running az webapp up --runtime "PHP:8.0" --os-type=linux from the project folder should update what we have on the server.

If we update the index.php file ...

... and then run az webapp up --runtime "PHP:8.0" --os-type=linux ...

... the app should deploy.

Unlike last time, with PHP we do need to specify the runtime when updating the application. The process is pretty similar, though.

Have any questions, comments, or concerns? See something that I am doing wrong here? Please feel free to drop a comment, below.

[ Cover photo by Vishnu R Nair on Unsplash ]

How to deploy a Node.js app to Azure

Joe Steinbring — Thu, 08 Sep 2022 11:07:03 +0000

So far, we haven't talked much about Azure or Node.js on either of my blogs. The only Azure-specific post that I could find was the MS is EOLing Azure Functions which use .NET Core 3.1 on December 3 from July. I figured that we would address that, today. In today's tutorial, we are going to be covering how to deploy a node app to Azure using the command-line.

Prerequisites: Node, NPM, and Azure CLI

Before we go any further, you should make sure that you have node and NPM installed and that you have the Azure CLI installed. You can see if you have node installed by running node --version from the terminal.

Step 1: Create a Node.js app to deploy

For this example, we'll use the Express Generator. You can create your new app by running npx express-generator node-example --view ejs.

Next, if you cd node-example && npm install, you will navigate into the project folder and install the dependencies.

At this point, you can run the server by just running npm start.

If you want to get the debugging info also, you can alternately run DEBUG=node-example:* npm start.

With the server running, you can see the output at http://localhost:3000/.

Step 2: Change the server port

As you can see above, the server is using port 3000 but if you open bin/www and look for process.env.PORT, you can change what port the startup script uses.

If we are going to deploy this to Azure, we should probably change that to 80.

Step 3: Deploy to Azure

From within the project folder, you can deploy the project by running az webapp up --sku F1 --name <unique-project-name>. The <unique-project-name> bit must be a value that is unique across all of azure and contain only characters that are a-z, 0-9, and -. The F1 SKU is on their free-pricing tier.

At this point, your node app is live. You can see the demo app at http://jws-node-example.azurewebsites.net.

Step 4: Redeploying to Azure

The next, natural question is how to redeploy the app after you make changes to it. If we look at routes/index.js, the variable title is set to the value "Express" on line 6.

If we change that value to "Flavortown", it should change the output on the site. To save your changes to Azure, you can use the terminal command az webapp up.

You will notice that the command that we used had no arguments. If you look into .azure/config within the project folder, the details are defined there. If you need to change something, you can do it there.

Now, our demo site says "Welcome to Flavortown".

Have any questions, comments, or concerns? See something that I am doing wrong here? Please feel free to drop a comment, below. I am by no means an expert in Node or Azure but hopefully we can help each other.

[ Cover photo by Arget on Unsplash ]

Better living through database normalization

Joe Steinbring — Tue, 26 Jul 2022 09:26:24 +0000

Note: This is a republication of a post that I wrote almost 10 years ago, over on my other blog. I was on vacation last week and I am at That Conference this week, so I didn't have the time to write something new. Database normalization isn't really an evolving topic, though. Enjoy! :)

Database normalization is a process meant to reduce or eliminate data redundancy. Typically, a normalized database exists in first normal form (1NF), second normal form (2NF), or third normal form (3NF).

First Normal Form

In order for a database to be in first normal form, your tables must not contain repeating groups of data. Let’s look at a simple example. In the table below, we are tracking basic contact information. We have an ID, a first name, a last name, and the contact’s phone numbers.

So, what wrong with this table? Users can have more than one phone number, so we are storing multiple values within the “PhoneNumbers” column. This means that our DBMS is storing multiple values as a single value and we have to manage the phone number values manually. How can we better this?

In the above example, we placed phone numbers into their own table. We connected the contacts to their phone numbers using the “ContactID” column. Notice that there are no duplicate rows and every row/column intersection contains exactly one value.

Second Normal Form

In order for a database to be in second normal form, it first must satisfy the conditions for first normal form. In addition to that, all of it’s non-key attributes must be fully dependent upon its primary key. Let’s look at a table that tracks the things our contacts are experts in.

You will notice in the above table that contacts #2 and #3 are experts in two things. In the case of contact #2, he is an expert in PHP and Digital Design. You will also notice that we keep repeating the facility where the contact is. This was probably placed there to make it easy to find a ColdFusion expert at the Downtown facility. This example table can cause problems because, if contact #2 relocates to the Downtown facility, there is a chance that only one record will be modified, leave contradicting information. So, how do we fix it?

In this new example, the facility is now part of the “Contacts” table. You can still find your ColdFusion expert at the Downtown office but you can avoid update anomalies.

Third Normal Form

In order for a database to be in second normal form, it first must satisfy the conditions for first normal form. In addition to that, the columns should depend solely upon the primary key of the table. What does this mean? Let’s take a look at our “Contact Expertise” table.

Let’s say that we want to see a list of possible skills somebody could be an expert in. This could be so that we can indicate which skill a new contact is an expert in. Right now, we can query “Contact Expertise” for unique values in the “Expertise” column but if we don’t already have an expert in that skill, it won’t be available as an option. We can solve that with a “Skills” table.

Notice that you can now query for possible skills that a contact can specialize in. Additionally, all values are dependent upon the primary key of the table.

How to “cheat” at database normalization

A recent post on the Perl blog had a great set of rules to make sure your database is adequately normalized.

Every “noun” gets its own table.
“many to many” relationship get their own tables
“one to many” relationship require the table that “owns” another table have its ID in that other table
Any time a table has an ID that refers to a row in another table, use a foreign key constraint to make sure that ID really exists

Remember, your database is the foundation of your application. If you build it wrong, your application will struggle to succeed.

I’m speaking at That Conference Wisconsin, the week after next.

Joe Steinbring — Tue, 12 Jul 2022 12:33:36 +0000

Update: Well, heck. I just heard this morning that they are moving my talk to September 15's THAT Online - September. The problem is that I land in Delhi, India at 1pm (local time) on Sept 15th.

So, I am speaking at That Conference, later this month. I will be giving the talk “Locating your user in meatspace” on Tuesday, July 26, 2022 at 1:00 PM CDT. Swing by and I’ll show you what I have learned about geolocation and how to add it to your web application. You can pick up a $99 “ON THAT Camper” ticket at: https://that.us/events/wi/2022/tickets/.

What am I going to cover?

How to find your user’s location using what their device returns and using their IP Address (and how to make IP-based geolocation suck less)
How to use the United States census bureau‘s U.S. Gazetteer Files to build a web service to convert from a zip code to latitude/longitude coordinates and from a city and state to latitude/longitude coordinates.
Finally, I intend to show how to use the haversine formula to determine the distance between where the user is and possible points of interest.

In the process, I am also going to show how to use Cloudflare workers to minimize the amount of this logic that you have on the client side. Hopefully you find this mildly interesting.

I’ll see you there!

MS is EOLing Azure Functions which use .NET Core 3.1 on December 3

Joe Steinbring — Tue, 05 Jul 2022 11:36:52 +0000

Earlier this month, Microsoft sent out an email stating that "On 3 December 2022, .NET Core 3.1 will be retired. As a result, Azure Functions runtime versions 2.x and 3.x, which use .NET Core 3.1, will also be retired on that date." They went on to encourage folks to update their Functions applications to use runtime version 4.x before then. My intention is to use this article to explore the differences between .NET Core 3.1 and more modern versions and ultimately figure out what changes you might need to make to your code.

Microsoft is infamous for supporting dependencies for a frighteningly long time. If we look back at the breaking changes between .NET Core 3.0 and 3.1, the biggest change was to how SameSite cookies (something supported since .NET Core 2.0) are handled. There was a change to the standards that meant that if the SameSite attribute is not specified, the cooke would default to SameSite=Lax. Previously, the default was that cookies were sent for all requests. With SameSite=Lax, cookies are not sent on normal cross-site subrequests. In .NET Core 3.1, it changed the behavior for SameSiteMode.None and added a new SameSiteMode.Unspecified value to deal with this change.

So, what version do you move to next?

3.1 was the old LTS (Long Term Support) version. With 5.0 going out of support on May 5th and 7.0 still being only a release candidate, your only remaining option seems to be the new LTS version (6.0.6). Version 6 goes out of support on November 12, 2024. Since .NET 6 isn't .Net Core 6, the upgrade path looks a little complicated, though. My suggestion would be to check out Migrate from ASP.NET Core 3.1 to 6.0 on the microsoft site.

Have any any additional advice for folks dealing with this upgrade? Have a question? Please feel free to drop a comment, below. I'm not normally a ".NET Guy", so I'm learning this stuff as I go too. :)

How to add a JavaScript calendar to your Vue.js app

Joe Steinbring — Tue, 28 Jun 2022 12:51:45 +0000

In last week's post, we went over how to add a JavaScript calendar to your app. This week, we are going to go over how to add a calendar to your Vue.js app, while using the Vue CLI.

The first step is to install Vue CLI and create the app. (We have done this once before if you wanted to see a deeper dive into the process.) If you navigate into the folder from your terminal and run npm run serve, you should then be able open http://localhost:8080/ in a web browser and see the Vue CLI "hello world" app.

Next, to install the FullCalendar plugins, you can run npm install --save @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid. After that, you should be able to build out your calendar component like so:

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        // Don't show the weekends
        weekends: false,
        // Define the header for the calendar
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        // Define Event Data
        events: 'https://gist.githubusercontent.com/steinbring/80157cc5866de53c8cd975a1673f4425/raw/72d8dfb2880b76ffbd7bb8a48f3803aab3b804ba/events.json'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

You might remember last time, we built out a calendar that gets its data from a mock JSON api that we created. This demo should use the same header layout, use the same defaults, and (most importantly) use that same mock API. I created a github repo showing how to do this as well as a demo site, so that you can see the end-result. The demo URL is hosted on Render, like my previous examples.

steinbring / vue-calendar-demo

An example of how to use FullCalendar with a vue app

vue-calendar-demo

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

View on GitHub

The next step in this journey is to show how to replace that mock api with a real one. Stay tuned for that. Until then, feel free to drop a comment if you have any question, comments, etc.

How to add a JavaScript calendar to your app

Joe Steinbring — Tue, 21 Jun 2022 12:04:18 +0000

I recently got it into my head that I wanted to figure out how I would write a "time-off calendar". Feature zero of any time-off calendar tends to be the calendar itself. Today, I figured that we would look at one option for that.

I combed through the assorted google results and found a promising looking solution called FullCalendar. It advertises itself as working with React, Vue, Angular, or just plain javascript. For today's post, we are going to be looking at their vanilla-javascript, 100% framework agnostic solution.

Let's start by looking at the absolutely, most basic example of a monthly calendar with the library.

You will notice that we are waiting for the DOM to load, using document.getElementById() to identify the element that is going to contain the calendar, and then we are using that new calendarEl element to render the calendar. We are defining an initialView of 'dayGridMonth' but there are the alternate options 'dayGridWeek', 'timeGridDay', or 'listWeek'.

There are a lot more options that you can apply to a calendar, beyond just initialView. For our next example, let's check out weekends and headerToolbar.

By setting weekends to false, we are getting closer to the "time-off calendar" vibe and the headerToolbar value allows us to both make the calendar look less "standard" and expose the "month", "week", and "day" toggles. The toolbar has a heck of a lot more options, too.

So, the next step is to populate the calendar with actual events. In our next example, we are directly populating an "events" object with an array of events.

When creating an event, there are a lot of options available. For this example, we are going to keep it pretty basic, though. We have two multi-day events and two single-day events. Each event has a unique ID, a title, a start, and a background color. The multi-day events also have an end. The start and end values take a date object and can include a time.

For our final example, we are going to look at how pull in the event data from a JSON endpoint. Instead of creating an actual back-end for this thing, I just spun something up using GitHub Gist. Of course, I would recommend using something like Laravel or Firebase for an actual back-end.

As you can see, adding a JSON feed instead of an object as a value for "events" is all that is needed. There are a lot more options available, though. You can even use an iCalendar feed instead of a JSON feed.

So, what's next? Next week, there will be a follow-up on how to do the same thing, using vue.js. After that, I intend to show how to incorporate Laravel into the picture. If you want to follow along, I suggest following me on here and checking out my other blog. Until then, please feel free to leave a comment if you have any questions, comments, etc.

Internet Explorer is officially out of support!

Joe Steinbring — Wed, 15 Jun 2022 11:38:49 +0000

As of today, (June 15, 2022) Microsoft no longer supports Internet Explorer 11 (the final version of IE)! Internet Explorer mode still exists in Edge but you no longer need to worry about compatibility with the world's least compliant browser.

There was a time in my career where I worked for a company that once forbid folks from running anything other than IE6. If you were caught running FireFox, HR would write you up for it. Since then, FireFox, Chrome, Safari, and (eventually) Edge have successfully built a following and helped push the internet forward.

I am excited about the prospect of an IE-free future. :)

How to calculate the distance between two points, using the MapQuest API

Joe Steinbring — Tue, 14 Jun 2022 11:41:39 +0000

Previously, we looked at how to calculate the distance between two points using just math. The problem with that is that the distance is calculated "as the crow flies". Calculating the distance between Milwaukee and Chicago is close enough but the distance between Milwaukee and Ludington could be a problem (since Lake Michigan is a thing).

If we modify the example from last week to look at the distance between Ludington and Milwaukee, you can see what I mean.

The result comes back as 96.6 miles but if you take the ferry from Milwaukee to Muskegon, it is really 148 miles and if you go around the bottom of the lake, the distance is 333 miles. The difference is significant.

Luckily, there are services out there that you can use to do these calculations. For today's demo, we are going to look at MapQuest and specifically the the Route end-point of the Directions API.

As you can see, the API takes an API key, the origin of the trip, and the destination of the trip. It returns all of the details of the trip but for this example, we only really care about the distance. For more complex queries, MapQuest also offers a Route Matrix API. That one can go beyond a point-to-point trip and handle many more destinations.

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

How to calculate the distance between two points, using math

Joe Steinbring — Tue, 07 Jun 2022 12:16:51 +0000

Roughly a year ago, I wrote a post about how to sort a list of physical locations by how close they are to you. At the time, I was working on an app that needed to know how close you were to each of Wisconsin's State Parks. On July 26, I am giving an online presentation at That Conference on the topic of "Locating your user in meatspace" and ahead of that, I wanted to drill down on the topic of how to calculate the distance between two point while only using math to do so.

So, how do you do that? You use the Haversine formula. Now, I am not a great mathematician according to Simon Kettle:

The haversine formula is a very accurate way of computing distances between two points on the surface of a sphere using the latitude and longitude of the two points. The haversine formula is a re-formulation of the spherical law of cosines, but the formulation in terms of haversines is more useful for small angles and distances.

According to Kettle, the word "Haversine" comes from the function: haversine(θ) = sin²(θ/2). The formula can be used in javascript code like so:

The output is in kilometers but since 1 kilometer is equal to 0.621371 miles, it should be reasonably easy to convert the output to miles.

So, what do you think? How are you going to use the haversine formula in your projects? Feel free to let me know in the comments, below.

What are koans and how can they help level up your dev game?

Joe Steinbring — Thu, 02 Jun 2022 11:49:22 +0000

A koan is a story, dialogue, question, or statement which is used in Zen practice to provoke the “great doubt” and to practice or test a student’s progress in Zen. In the Zen school of Rinzai, the use of koans (often a paradoxical statement) is used to initiate the internal socratic method in the students, to break down prior deeply held notions that hold them back from Enlightenment. An example of a koan is the question “What do you call the world?”

So, what does this have to do with application development? There are technology-specific koans out there like Ruby Koans, ColdFusion Koans, Python Koans, and a number of different versions of JavaScript Koans. The goals of each project is to teach the particular technology through testing. A test runner like Jasmine, QUnit, or MXUnit is usually used. With koans, you need to run the tests and see them fail, make the tests pass, and then take a moment to reflect upon the test to see what it is teaching you. In doing this, the hope is that you will become a better coder.

The post What are koans and how can they help level up your dev game? appeared first on Blog.jws.

I built my first Cloudflare worker

Joe Steinbring — Thu, 28 Oct 2021 12:21:53 +0000

In the past two years, I have written a few blog posts that explored how to figure out where the user physically is. Most of these experiments involved navigator.geolocation but last week's iOS 15, Private Relay, and Geolocation post brought in the concept of figuring out the person's location based upon their IP address. After finishing that post, I started to wonder what it would take to simplify things. Can I reduce the number of API calls to things and make the result more reliable? In the process, I decided that I would also wrap things up into a central Cloudflare worker.

So, let's see what the guts of the worker look like.

As you can see above, a lot of the returned data is just things that cloudflare knows about you, out of the gate but in order to get your likely street address, an API call to Mapquest is still needed. I also set it up so that you can pass latitude and longitude values in as get variables. If the user is on an LTE or 5g connection, their location is likely to show up as being in a completely different place.

So, how do we implement this new API?

Using the "Use GPS to update position" and "Use IP to update position" buttons, you can toggle between the two modes of detection. Basically, one passes lat/long coordinates into the API and the other leaves it up to the node script to figure it out.

In a real-world setting, I would execute the IP-based detection by default and give the user the option to use the more accurate option if they wished to do so. This is definitely getting integrated into my Wisconsin State Parks project.

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