DEV Community: Pluralsight

The newest must-have developer tool is ChatGPT

Jeremy Morgan — Fri, 17 Mar 2023 17:10:32 +0000

Rather watch this as a video? Click here to view

You might be thinking: another article about ChatGPT? Really?

There's been no shortage of press dedicated to this tool, but let's get specific. Let's talk about how you can use it as a software developer.

I've been using this tool since its release. The output has been outstanding. It has made me better at software development. That's right, this tool has improved my work tremendously. Is it because now I generate all my code with ChatGPT and work 10x faster?

No.

But it has made me more productive. So I will share some tips with you that will help you learn more and leverage this tool for your software work.

What is ChatGPT?

Generative Pre-trained Transformer 3, or GPT-3, is a language processing model developed by OpenAI. ChatGPT is a GPT model trained on conversational data. It's designed to be a hyper-intelligent chat bot. It uses articles, research papers, books, documentation, and more to predict answers to questions. We'll get into that a bit more.

You can try out ChatGPT here for free.

If you're wondering what all the hype is about, you can sign up and immediately use it through an easy-to-use chat interface:

No, I didn't use ChatGPT to write this article. It's written by a human being (this time). However, I did have ChatGPT write an application for me the other day. I'm impressed.

If you want to learn more about ChatGPT and how it works, check out this awesome course on ChatGPT by Amber Israelsen. It covers what you need to know to understand and use it better.

What it is

You've probably heard about people using ChatGPT to generate content, rewrite their bios, or come up with catchy names for a company. It's great at that. Many folks have been using it as a supercharged search engine.

ChatGPT thinks like a person and speaks like a machine. It learns from words and predicts the next word or set of words. This is an important distinction because many think it is a giant database, or "Google on steroids." It's not. It's a much different tool for another purpose: predicting text.

Put simply:

ChatGPT doesn't do an internet search for answers; It predicts Answers based on its training data - Amber Israelsen

That's great news for you as a developer. If you're searching for the meaning of an error message, Google and Stack Overflow are still your best bet. However, if you want to know, "what's a better way to write this?" ChatGPT is the tool to use. Let's explore that deeper.

How to use it as a developer

You can extract valuable information from ChatGPT using prompt engineering. Asking the tool what you want from it can be tricky, but changing the questions will improve your answer. Let's look at some prompts we can use to improve our code.

Prompt 1: What's a better way to do this?

This is one of my favorite prompts, so I'm listing it first.

After a few years, you're dusting off your C# skills and are writing an application. You create a vehicle class with a few properties:

public class Vehicle
{
    private int _numberOfWheels;
    private string _typeOfCar;
    private string _color;

    public int NumberOfWheels
    {
        get
        {
            return _numberOfWheels;
        }
        set
        {
            _numberOfWheels = value;
        }
    }

    public string TypeOfCar
    {
        get
        {
            return _typeOfCar;
        }
        set
        {
            _typeOfCar = value;
        }
    }

    public string Color
    {
        get
        {
            return _color;
        }
        set
        {
            _color = value;
        }
    }
}

Is this valid code? Sure. It uses getters and setters, and you can implement data protection on your properties. It will compile and work just fine.

However, this isn't how we implement properties in C# anymore. But you have no way of knowing that, especially if you haven't written C# since version 3.0.

So out of curiousity, you go into ChatGPT and paste in the following:

What's a better way to write this class? <insert code here>

ChatGPT takes this prompt and spits out the following:

Not only does it tell you about auto-implemented properties, but it tells you why you should use this suggestion. Now you know that you can perform the same thing that 41 lines of code used to do in just six lines of code. It tells you why that's important. You just learned something.

Let's look at another example.

You have an array of data in Python that you'd like to iterate through. You write the following code to do it:

my_array = [1, 2, 3, 4, 5]

for i in range(len(my_array)):
    print("The value at index", i, "is", my_array[i])

Does it work? Yes. It makes sense, and it is pretty concise. But is there a better way?

What's a better way to write this <insert code here>

ChatGPT returns this:

While less drastic than the first example, you just learned a new way to do something and why it matters.

Prompt 2: How do I (do something)

This is yet another way to use ChatGPT. However, there is a caveat attached. You can always ask it how to do something:

how do I connect to postgresql with php?

And for many common things, it will usually spit out an answer that's correct.

You can have it generate a variety of great boilerplate code for various tasks.

Not only will it write the code for you, but it will explain the reasoning behind it:

This can be incredible if it's a concept you are unfamiliar with. ChatGPT can generate things like this much faster than a Google query.

As I said earlier, I pretended to know nothing about Go, JavaScript, and HTML and created an entire web application with ChatGPT. Even if I knew little about these technologies, I could assemble an application using ChatGPT as the primary resource.

But what's the caveat I mentioned earlier?

You must understand the code you are generating.

I can't stress this enough. Don't blindly say, "how do I do this" and dump the code into your application. Generate the code, study it, and understand it. You can also use ChatGPT for this, as we'll see with the next prompt.

Prompt 3: How does (this) work in the code you just generated?

You can dig deeper into what ChatGPT generates with this prompt. ChatGPT keeps a conversational context by bundling your queries in a single conversation. That means you can keep iterating on the results, just like in a real conversation with a human.

This gives you a deeper explanation of how things work before you use them.

This is one example of how ChatGPT has made me a better developer. I have gone down some rabbit holes for sure and gained a deeper understanding of the things I'm working on. I suggest doing this. Especially if you are generating code you don't fully understand.

Prompt 4: Rewrite this code with syntactic sugar

This is another one of my favorites. If you don't know, Syntactic sugar is programming language syntax that is concise and (sometimes) easier to read and express. It's not for everyone, but I like it, especially when it de-clutters my code.

Let's take this example in C#:

int? nullableValue = null;
int value;

if (nullableValue.HasValue)
{
  value = nullableValue.Value;
}
else
{
  value = 0;
}

In this code, we're looking for values that may be null, and if they are, we'll assign them a value of 0. If they have a value stored, we'll pass that value.

Pretty straightforward, right? But one look at this code tells you there's a shorter way to do this. So we'll ask ChatGPT:

And we get this, which is much better:

int value = nullableValue ?? 0;

This is yet another way ChatGPT can teach you and help you be a better programmer. Keep in mind this isn't bulletproof. I have seen some code generated using this that didn't work as expected. But it's pretty cool when it does!

Summary

ChatGPT is cool and a lot of fun to play with. However, it can also be a useful tool to improve productivity, as we've shown. It can teach you new ways to write code.

We didn't cover some of the other ways it helps, such as generating documentation, providing answers to support questions, and more. I'll share a follow-up article to this, so keep checking back.

It might sound like a dumb fad, but it isn't. From here forward, developers need to learn this tool. This is a significant turning point for software development, and I can only see it improving.

Check out this great course if you'd like to learn more about ChatGPT.

Questions, comments? Let me know!

Building a QR Code Generator with Azure Functions

Jeremy Morgan — Fri, 27 May 2022 18:34:33 +0000

Here's a fun project if you want to learn how to build Azure Functions. This project is going to be a little silly but educational.

We will build a QR Code Generator that runs 100% within an Azure function. There are thousands of QR Code generators on the internet, so this is a silly exercise, but I wanted to push the limits of what an Azure Function can do, show you how cool they are, and inspire you to build cool stuff with them.

If you'd rather watch a video, we have it here:

In this tutorial, you will learn:

How Azure Functions work and how simple they are
How to generate QR codes with .NET libraries
How little effort is required to build something like this

It'll be fun, and I hope you follow along. What we'll do in this tutorial:

Create an Azure Function
Implement a QR generator
Build a crude frontend for it
deploy it to Azure with Azure Functions Core Tools.

By the end of this tutorial, you'll have a functional QR code generator, and it may inspire you to build more cool things with Azure Functions. They are compact, simple, and easy to build.

You can find the full source code to this project here.

What is an Azure Function?

Azure Functions are serverless applications that run in Azure. They're small bits of code you can execute without a server or complicated instance. Most Azure Functions are "microservices" that do one small task and do it well.

Azure Functions can also respond to HTTP triggers to act as a sort of "mini API." They respond to HTTP requests just like a Web API would, but it takes much less setup with functions.

I'm starting to sound like an advertisement, but it is awesome. Years ago, this same project required you to set up a server or set up an ASP.NET Web API on an IIS server somewhere. Now we can do it in a few lines of code and push it to the cloud. Azure Functions allow you to focus on building cool stuff instead of all that setup.

Requirements

Here's what you'll need for this tutorial. I'll build this in Windows 11, but we're not using Visual Studio. I'll use the dotnet driver for this, so you can replicate it on Mac or OSX if you'd like. You will have to have this (free) software installed on your machine.

You will need:

A Microsoft Azure Account
.NET 6
Azure Functions Core Tools
Azure CLI Tools
Visual Studio Code (or editor of your choice)

So let's get started!

Creating a new Project

We're going to use the Azure CLI to create a new Azure function for us, and we'll use the dotnet driver to install software.

Visual Studio can automate this for us, but doing it this way gives a better view of the steps involved and can be done on many platforms.

First, we'll initialize a new function. We'll use the func command to create a new project named QRCodeGen. We'll specify the worker runtime as "dotnet" to choose C# as the language used.

Run this command in your project or repositories folder:

func init QRCodeGen --worker-runtime dotnet

If you look in the folder, there isn't much here:

We still need to create an Azure Function within the project. Azure Functions have a set of templates, depending on what type of application you're making. We want to create an HTTP trigger, a function that responds to an HTTP request.

func new --template "Http Trigger" --name QRCodeGen --authlevel anonymous

If you're using Visual Studio Code, you may see this message:

Select yes to install the extensions.

Now you will see a sample function that func created for you:

You can run it locally if you want to try it out. Type in

func start

You will then see the function startup, and the console will give you some guidance on how to use the application:

As we can see, we can either send a GET or a POST to http://localhost:7071/api/QRCodeGen. Let's load it up in a browser and see what a simple GET returns:

We have a message showing:

This HTTP triggered function was executed successfully. Pass a name in the query string or in the request body for a personalized response.

Ok cool. Let's dig into the code and see what this message means.

string responseMessage = string.IsNullOrEmpty(name)
    ? "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."
    : $"Hello, {name}. This HTTP triggered function executed successfully.";

As you can see in the code above, it's doing a check for a value in name. If that variable is empty or null, it will display the message we just saw.

But how do we populate that value? A few lines up, we see a parameter in the query that we can use:

string name = req.Query["name"];

It will display a message with the name included if it's populated. We need to send it a URL with the name as a parameter like this:

http://localhost:7071/api/QRCodeGen?name=Jeremy

So let's try that:

And there's my message. So now we know the function is working as expected. We load up a URL, get the parameter and modify the output.

For simplicity, we'll use this model for our QR code generator. We'll establish our URL to listen for requests, and pass the value in a GET command, then return a QR code. Let's start with generating that QR Code.

Install QRCode Generation tools

Turning text into a QR code is relatively complex. Luckily, you're using .NET. You won't have to build your generator by hand. The problem was solved a long time ago. We will use a library to generate a .PNG QR code for us. We only have to write some code around it and build a tool that solves our problem.

First, let's install the QRCode Generator package from Manuel BL. We'll do that using the dotnet driver. I'll specify the latest version at the time of this writing.

dotnet add package Net.Codecrete.QrCodeGenerator --version 2.0.1

The QRCode generator works great but can only generate .svgs. Since we want a .PNG (bitmap) format, and want it to work under multiple environments, we need to install the SkiaSharp package:

dotnet add package SkiaSharp

SkiaSharp includes the ability to generate bitmaps. But you must download and add this file to your project:

https://github.com/manuelbl/QrCodeGenerator/blob/master/Demo-SkiaSharp/QrCodeBitmapExtensions.cs

Create a file named QrCodeBitmapExtensions.cs in your project folder and copy the contents of this file to it. This will allow you to work with bitmaps, specifically .PNG files.

Now we have our QR Code generator tools, so let's make it work in our function.

Creating the QR Code Generator Function

If you open up QRCodeGen.cs, you'll see the Azure Function (a method) generated for us. It will look like this:

[FunctionName("QRCodeGen")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
            ILogger log)
        {
            log.LogInformation("C# HTTP trigger function processed a request.");

            string name = req.Query["name"];

            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            dynamic data = JsonConvert.DeserializeObject(requestBody);
            name = name ?? data?.name;

            string responseMessage = string.IsNullOrEmpty(name)
                ? "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."
                : $"Hello, {name}. This HTTP triggered function executed successfully.";

            return new OkObjectResult(responseMessage);
        }

Let's delete this method. The only thing you should see in QRCodeGen.cs is this:

namespace QRCodeGen
{
    public static class QRCodeGen
    {

    }
}

Next, let's add a new method to generate QR codes.

First, add in the name decorator. This will give the method a name and change the URL to access it.

[FunctionName("GenerateQRCode")]

Now, when we run our app, the URL will be:

http://localhost:7071/api/GenerateQRCode

This will be the URL we call to generate a QR code, and we'll call it from JavaScript.

Next, create the method:

public static async Task<IActionResult> Generate(
  [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)
  {

  }

We're creating a method named Generate. We're passing in some parameters to tell the application we want an HttpTrigger:

[HttpTrigger

And within that trigger, we are passing some parameters.

We want to set our authorization to anonymous so that anyone can access it:

AuthorizationLevel.Anonymous

We only want to accept GET requests to this URL, so the following parameter specifies that:

"get",

Then we'll set our route to null. If we wanted a different URL or particular route, we could specify it here. For simplicity's sake, we'll leave it as it is:

Route = null)]

Next, we will pass in an HttpRequest object. This will contain the data from the incoming request so that we can grab parameters from it. When a GET request is sent to our function, we can extract things like headers, parameters, and more.

HttpRequest req

Finally, we'll pass in a logger so we can log messages.

ILogger log

Great now we have the method constructed. Let's fill it out.

Gathering Info from the Query String.

The user must send the text they want turned into a QR Code. It's usually a URL. We decided early on to keep things simple. We'll just gather this info from the query string sent to the API.

Remember that HttpRequest we passed into the method? We can get our Query parameter from that. We can establish a string variable and then grab the parameter from the query string:

string qrtext = req.Query["qrtext"];

Add in the following message to log our output. We want to display what was sent to our qrtext variable:

log.LogInformation("Generating QR Code for {0}", qrtext);

This way, we can doublecheck what was sent.

Now, let's generate our QR Code.

Generating the QR Code to PNG

Next, we want to take our string, encode it into a QR Code, then export that to a PNG.

So we'll make a static call to the QRCode library we installed earlier. We'll pass in the text we want to generate and the error correction value. Medium should be fine.

var qr = QrCode.EncodeText(qrtext, QrCode.Ecc.Medium);

This is all it takes to generate a QR Code. But it's in an SVG format. We need to convert it into a PNG so we can display it.

Since we added that bitmap extension above, now our qr object has a method to turn the QR code into a PNG with a few parameters.

We need to add a scale: I used 10, which seemed to generate a decent size.

I used 1 for the border.

And I set the foreground (code) to SKColors.Black, and the background to SKColors.White.

Here's the code to enter:

var pngout = qr.ToPng(10, 1, SkiaSharp.SKColors.Black, SkiaSharp.SKColors.White);

Ok, so now we have our QR Code. That was easy! Now let's package it up in JSON and send it out!

Creating a JSON Return Object

We've been creating this code within public static class GenerateQRCode. Let's create another class that will create a simple object we can return when the API is called.

Just outside of the GenerateQRCode class (before the last } ) create a ReturnObject class.

This class will have a single property named Image. This will be a string and we'll encode our PNG as text into it.

public class ReturnObject {
  public string Image { get; set; }
}

Now back in the GenerateQRCode class, let's go back to where we were. We'll create a new ReturnObject:

var ourResult = new ReturnObject{};

Now, we'll take our PNG image and convert it into a Base64 string, and add that string to our return object:

ourResult.Image = Convert.ToBase64String(pngout);

Easy. Now we'll just return our POCO (Plain old class object) as a new JsonResult, so it returns JSON to the caller:

return new JsonResult(ourResult);

And that's there is to it. In about seven lines of code, we're taking a string, converting it to a QR code, and shipping it out the door.

Let's try it out.

Start up the Function Locally

We will start up the function and have it listening locally. We'll send a GET request with a query to test it out.

Type the following at the command line:

func start

To start up the function.

You should see something like this:

Now we'll send a request to

http://localhost:7071/api/GenerateQRCode

Remember the parameter we specified in our code was qrtext, so I'll add that to the end:

http://localhost:7071/api/GenerateQRCode?qrtext="hello world"

I'm using Postman for this, so I can see the JSON rendered out:

And the bit of logging we did shows that it's rendering for "hello world":

So the steps are simple:

Send a GET to our URL
Append the text to generate and add it to qrtext
Accept the JSON.

Here's all the code we entered so far:

public static class QRCodeGen
   {
      [FunctionName("GenerateQRCode")]
       public static async Task<IActionResult> GenerateQRCode(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)
       {
           string qrtext = req.Query["qrtext"];
           log.LogInformation("Generating QR Code for {0}", qrtext);

           var qr = QrCode.EncodeText(qrtext, QrCode.Ecc.Medium);
           var pngout = qr.ToPng(10, 1, SkiaSharp.SKColors.Black, SkiaSharp.SKColors.White);

           var ourResult = new ReturnObject{};
           ourResult.Image = Convert.ToBase64String(pngout);
           return new JsonResult(ourResult);
       }
   }
   public class ReturnObject {
       public string Image { get; set; }
   }

And that's fantastic, but we're not done. We still need to deploy it. But before we do that, let's build a small, simple JavaScript front end to interact with this function.

Building the Front End

We want this QR Code generator to be totally self-contained. While Azure Functions aren't really designed to serve up web pages, it is possible. In this case, we can set this up so we don't need to host our front end somewhere else. It's just a simple webpage so let's serve it up.

First, we'll create our index.html.

Create a folder named www and create a file named index.html.

This is going to be a super simple, crude front end—nothing fancy, just enough to get the job done.

Add in the following at the top:

<!DOCTYPE html>
<html>
<body>

<h2>QR Code Generator</h2>

This is our basic header. Next, we'll need to add an input to get text from the user.

<input id="inputbox" style="width: 250px;" ></input>
<br /><br />

This input has an id of inputbox, so we can grab this text with JavaScript. I added a couple of line breaks after it to space it out.

Next, we'll create a button that will call a JavaScript function:

<button type="button" onclick="GetQRCode()">Create QR Code</button>

Then we'll have a place where we will insert the QR code. Remember this will be Base64 encoded so that we can populate this div with an image in our GetQRCode function.

<div id="demo"></div>

Next, we'll put in the GetQRCode function, which makes an XMLHttpRequest back into our Azure Function and retrieves the JSON. It then parses it and replaces the "demo" div with our image. Note that we're adding an img tag with the header information so it creates an image we can view in our browser.

function GetQRCode() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var ourJSON = JSON.parse(this.responseText);
      document.getElementById("demo").innerHTML = "<img src=\"data:image/png;base64, " + ourJSON.image + "\">";
    }
  };
  input = document.getElementById('inputbox').value
  xhttp.open("GET", "/api/GenerateQRCode?qrtext=" + input, true);
  xhttp.send();
}
</script>

Great! So now we have an index page that will draw up a small UI for our QRCode Generator.

I know we could add in error correction/handling or use a library for this, but I want to keep it as simple as possible.

Next, we need to serve this up with our Azure Function.

Serving the Index Page

Azure Functions are not intended to be web servers. In fact, Azure Static Web Apps do a much better job, but we're trying to keep this as simple as it can be. One single Azure Function to accomplish this task.

We can push out the index.html file so it will be served up by a browser. This gives a small interface for our application, and we can go back later and build a complete web app that takes advantage of this function or add it into a bundle of microservices if we like.

Open up GenerateQRCode.cs again, and at the top of our class (above [FunctionName("Form")]) let's add in another function.

We want this function to return a HttpResponseMessage this time. We're still going to make this an HttpTrigger, with anonymous authentication, and pass in the same values as before.

This time though, we need to pass in ExecutionContext context. This gives us our execution context so we can locate files within the local filesystem, and I'll explain why in a bit.

Another is this will return HttpResponseMessage instead of an IActionResult.

[FunctionName("Form")]
          public static HttpResponseMessage Form(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
            ILogger log, ExecutionContext context)
        {

Next, we're going to open the index.html file we put in the www folder and read it all in as text. This is where the execution context comes from.

We want to open up the index.html file that lives in the www folder on the filesystem where the application is running. We do that with this line of code:

string indexPage = File.ReadAllText(context.FunctionAppDirectory + "/www/index.html");

Then we'll create a new HttpResponseMessage with status code of OK (200):

var result = new HttpResponseMessage(HttpStatusCode.OK);

Now we'll need to add some headers to that, and fill the "content" with the text we read from our index file:

result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
result.Content = new ByteArrayContent(System.Text.Encoding.UTF8.GetBytes(indexPage));

Now we have a 200 OK message with text/html header, and we have all the text from our index.html added to the content section of the header.

It's pretty hacky, but it works.

Then we simply return it:

return result;

So the entire function looks like this:

[FunctionName("Form")]
public static HttpResponseMessage Form(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
    ILogger log, ExecutionContext context)
{

    string indexPage = File.ReadAllText(context.FunctionAppDirectory + "/www/index.html");

    var result = new HttpResponseMessage(HttpStatusCode.OK);

    result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    result.Content = new ByteArrayContent(System.Text.Encoding.UTF8.GetBytes(indexPage));

    return result;
}

Now, since we're introducing this outside file (index.html) that will need to be included in the build, we need to add this to our .csproj file.
In an ItemGroup, add in the following code:

<None Update="www\index.html">
     <CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>

I added mine in with the other file publishing settings:

Save it, and let's run our Azure Function Locally again:

func start

And let's see how it works.

Testing our Front End

Now I have my function up and running locally, so I can just bring up a web browser to:

http://localhost:7071/api/Form

and there it is in all its glory:

So I'll drop in a URL,

And there's my QR Code, temporarily generated. Awesome!!

Let's deploy this to Azure.

Deploying our Application

So I'm now calling this an "application" because it is. We've gone beyond the expected functionality of a simple function, just to show how powerful Azure Functions can be. Let's deploy this and see how it works.

With the Azure CLI, type in

az login

You'll be directed via a web browser to log into Azure.

In your Azure Console, create a new Azure Function App. You can name this whatever you'd like.

Select to publish as code, and use the following Runtime stack. You can choose whatever region you'd like.

I'll choose Windows and the Consumption (Serverless) model:

I'll create a new storage account and press "review and create"

Make a note of your details:

Now we need to publish with the Azure CLI. We'll do that by using the func command and specifying that we want to publish an azure functionapp, the name, and we'll put "--nozip" to tell the command we aren't deploying a zip of the application, but rather the source code.

func azure functionapp publish qrcodegen --nozip

You should see something like this when it's done.

You will need to log into your Azure portal, load up the function app and select "configuration".

Then find WEBSITE_RUN_FROM_PACKAGE and set the value to 0. This will allow our function to run from the files we've published.

Let's take a look!

Running the Application on Azure

After deployment, you should see a screen like this:

The "Form" URL is the one that will bring up our UI for the function:

And you can punch in your website and create a QR code from it!

And it works!! Our very own QR code generator that runs 100% from an Azure Function.

Conclusion

If you've been following along, thanks for sticking with it! You now have a cool project and a better familiarity with Azure Functions.

Serving up websites isn't exactly what Azure functions are designed for, but I wanted this to be a complete solution front to back on an Azure Function. No servers, no databases, and you don't have several services to keep track of.

We learned how Azure Functions work and how simple they can be. We didn't write much code here! We learned how to generate QR codes with .NET libraries, build a mini-application and deploy it to the cloud. I wanted to keep this as simple as possible for a good introduction. If you were building a "real" application, here's what I would recommend:

Hosting the front end on Azure Static Web Apps or similar service
Error checking the heck out of the input
Graceful error handling and logging
Pushing the images into storage for later retrieval
Designing the API so that it can be used by other types of applications as well

I hope this was fun! If you want to learn more about Azure Functions, we have several great courses here at Pluralsight:

Again here's the video version of this tutorial:

Questions? Comments? Let me Know!

When Instagram becomes TikTok

Silvia Cristina Higareda — Mon, 09 May 2022 17:46:28 +0000

Did you notice the recent changes to the Instagram Feed? Although subtle, they're loudly warning where social platforms are heading. A world of social-first content creation and consumption that keeps people on the platform.

If you want to geek out with me on what these changes mean and why they matter here are 4 points:

📱 FULL SCREEN: Social media consumption happens largely on mobile, with the years platforms have expanded the aspect ratios. TikTok went full screen and now Instagram has followed. This was true on IG Reels, but now it's true to the feed as well.

💡 WHY THIS MATTERS: Content creation will have to be made for mobile or your content will appear so small compared to your competitors, brand awareness and relevance will suffer.

🔉 SOUND & ENGAGEMENT BUTTONS FRONT AND CENTER: TikTok started it, that sound button you can so easily click, discover new artists, but more importantly... remix and create your own content. This same functionality is there on your feed now.

💡 WHY THIS MATTERS: Having this sound button readily available is pushing not only toward native consumption but also native creation! This is the button that gave the great Khaby the ability to remix content and curate a 137M following. The platforms want us to create and consume social-first content on their platform. This means traditional ways of content creation will be pushed out.

💰 PAID ADS: Paid ads on TikTok and now Instagram as well are blending seamlessly into the rest of the organic content. I don't know about you but sometimes, especially on TikTok, it takes me a few seconds to realize it's an ad.

💡 WHY THIS MATTERS: If you're ads ain't blending into the native platform you are spending money on... you're at a loss. This will require innovation. This will require entire teams stepping out of their comfort zone to adapt to this new world.

🥊 THE HOOK: Straight to the point. This new way of consuming content is forcing content creators to get straight to the point. You have to immediately deliver: education, inspiration, entertainment or value, if not you lost your audience.

💡 WHY THIS MATTERS: Whether you’re teaching grammar or programming the winners in these platforms are those who are able to educate and entertain in snackable sized content.

✨ CONCLUSION: This is a blatant example of where Social Media Platforms are heading: video, social-first video content that keeps you watching, engaging and creating in the platform.

TikTok came to disrupt the way content is created and consumed, all the other platforms are catching on and implementing these changes. These subtle changes are hugely important, we need to notice them and prepare for them because the algorithms are changing whether we want to or to not.

PLEASE SHARE YOUR THOUGHTS WITH ME AND LET'S CONTINUE TO GEEK OUT ON THE FUTURE OF SOCIALS.

Building an application with Go and SQLite

Jeremy Morgan — Fri, 15 Apr 2022 21:34:59 +0000

Today we're going to learn how to use SQLite with Go. By the time you finish this tutorial, you can build CRUD (Create Read Update Delete) applications with Go easily.

Go is one of the hottest languages in development right now, known for its simple structure and blazing performance.

SQLite has been trending among developers for its ability to host small data very quickly, safely, and contained in a single file.

Why SQLite?

Great Performance
Tiny footprint
Self contained (file based)

In fact, you're likely already using SQLite every day and you don't know it. It's ubiquitous in mobile phones and devices, and SQLite powers many websites today.

So we're going to combine these two technologies to show you how easy it is to marry the two.

What this tutorial covers

We'll build a CLI (command-line interface) application with Go and SQLite. It will cover:

Creating
Reading
Updating
Deleting

With SQLite. You can follow along and build this application or use this as a reference to build something of your own. I'll start with pre-populated database you can download here. It has a database full of people with their first name, last name, email address, and IP address.

We'll start by creating a menu, then building out methods for each operation, and in the end, you'll have an application that looks like this:

So let's get started!

Creating the menu system

We will build a CLI application that accesses a SQLite database. I'm going to use The WMenu package from Dixonwille for this, so we have an interface for our data. We'll use this menu and a scanner to accept input to interact with our database.

We won't focus too heavily on the menu system itself because the intent of this article is to show you how to utilize SQLite.

First, we'll create a Go module and work with main.go to start.

Install the WMenu package:

go get github.com/dixonwille/wmenu

Let's create a main.go that looks like this:

package main

import (
    "log"
    "github.com/dixonwille/wmenu/v5"
)

func main() {

    menu := wmenu.NewMenu("What would you like to do?")

    menu.Action(func(opts []wmenu.Opt) error { handleFunc(opts); return nil })

    menu.Option("Add a new Person", 0, true, nil)
    menu.Option("Find a Person", 1, false, nil)
    menu.Option("Update a Person's information", 2, false, nil)
    menu.Option("Delete a person by ID", 3, false, nil)
    menuerr := menu.Run()

    if menuerr != nil {
        log.Fatal(menuerr)
    }
}

We will create a menu with the following options:

Add a new Person
Find a Person
Update a Person's information
Delete a person by ID

Notice we are calling a function named 'handleFunc(opts)' to handle which option is chosen:

menu.Action(func(opts []wmenu.Opt) error { handleFunc(opts); return nil })

So let's create that function and have it display some values for now:

func handleFunc(opts []wmenu.Opt) {

    switch opts[0].Value {

    case 0:
        fmt.Println("Adding a new Person")
    case 1:
        fmt.Println("Finding a Person")
    case 2:
        fmt.Println("Update a Person's information")
    case 3:
        fmt.Println("Deleting a person by ID")
    case 4:
        fmt.Println("Quitting application")
    }
}

When we run the application, you should see a menu that looks like this:

When you make a selection, it should display what you selected:

This is the menu we will use to interact with our SQLite Go code. I will break it up into CRUD parts, and we'll add to it as we go along.

So let's dive in. We'll start with a quick look at the database.

The SQLite database

The database we're using for this exercise is available here.

The Schema is pretty simple. We are storing "people" with the following attributes:

The create statement is here:

CREATE TABLE "people" (
    "id"    INTEGER,
    "first_name"    TEXT,
    "last_name" TEXT,
    "email" TEXT,
    "ip_address"    TEXT,
    PRIMARY KEY("id" AUTOINCREMENT)
)

I've populated it with fake data from Mockaroo, my favorite test data generator. We will access this data, and add to it without our Go CLI application.

In the spirit of CRUD, we'll build out our application in that order, Create, Read, Update, Delete.

Connecting to the database

We'll need to add some additional code to connect to the database. We'll use an object to create a connection, and we can pass it to other parts of the program.

First, to catch errors in our code, let's create a simple function named checkErr that looks like this:

func checkErr(err error) {
    if err != nil {
        log.Fatal(err)
    }
}

Next, let's add the go-sqlite3 library from mattn to connect with SQLite.

go get github.com/mattn/go-sqlite3

This is by far the best SQLite library for Go that I've used. It's easy, fast, and well documented.

Then, we'll create a connection to our database, in the main() func:

// Connect to database
db, err := sql.Open("sqlite3", "./names.db")
checkErr(err)
// defer close
defer db.Close()

What this does is create a db object. The sql.Open method opens up names.db as a SQLite 3 database. It's a simple step. Then we defer the close of the database.

Now let's refactor our menu code so we can pass this object into our menu actions.

Change this:

menu.Action(func(opts []wmenu.Opt) error { handleFunc(opts); return nil })

to this:

menu.Action(func(opts []wmenu.Opt) error { handleFunc(db, opts); return nil })

And add the parameter to our function

func handleFunc(opts []wmenu.Opt) {

to this:

func handleFunc(db *sql.DB, opts []wmenu.Opt) {

Now we can pass this database connection and use it with our options.

Creating a model

Let's create a model we can use to store and transport our person records. We'll want to separate this into a new file. I've named it person.go.

In that file, I'll create a struct that matches the datatype of our record:

package main

import (
    _ "github.com/mattn/go-sqlite3"
)

type person struct {
    id         int
    first_name string
    last_name  string
    email      string
    ip_address string
}

Save the file.

Creating a new record

We will add the functionality to create a new record in the database. You can use DB Browser for SQLite to access this database to verify changes.

First, we'll add some code to handle the data.

If you remember, back in main.go, we have a switch statement within handleFunc that looks like this:

func handleFunc(opts []wmenu.Opt) {

    switch opts[0].Value {

    case 0:
        fmt.Println("Adding a new Person")

Let's change that to handle accepting a new record as input.

case 0:

    reader := bufio.NewReader(os.Stdin)
    fmt.Print("Enter a first name: ")
    firstName, _ := reader.ReadString('\n')
    fmt.Print("Enter a last name: ")
    lastName, _ := reader.ReadString('\n')
    fmt.Print("Enter an email address: ")
    email, _ := reader.ReadString('\n')
    fmt.Print("Enter an IP address: ")
    ipAddress, _ := reader.ReadString('\n')

    newPerson := person{
        first_name: firstName,
        last_name:  lastName,
        email:      email,
        ip_address: ipAddress,
    }

    addPerson(db, newPerson)

    break

Here we use a bufio scanner to read in the first name, last name, email address, and IP address of a new person. We read those values into a buffer one by one, then create a new person struct, and pass that to the addPerson method (which doesn't exist yet)

The menu system will prompt us for these values, one by one and then save them to the database.

Open up person.go and let's create the addPerson method.

func addPerson(db *sql.DB, newPerson person) {

    stmt, _ := db.Prepare("INSERT INTO people (id, first_name, last_name, email, ip_address) VALUES (?, ?, ?, ?, ?)")
    stmt.Exec(nil, newPerson.first_name, newPerson.last_name, newPerson.email, newPerson.ip_address)
    defer stmt.Close()

    fmt.Printf("Added %v %v \n", newPerson.first_name, newPerson.last_name)
}

This function takes the db object and the new person struct and inserts it into the database. We create a new SQL statement, stmt. We use db.Prepare to prepare our insert statement, and protect the application from SQL injection. Then we run stmt.Exec with the parameters we want to insert. Then defer the close method and print our results.

Save the file, and let's run it.

You can see our menu come up, ask us for each part of the record, then save it. We can check the database and confirm that it was saved:

Now you may notice something here. Notice the line breaks right after the first name?

This is because the newline (when you press enter) is scanned into the buffer, and it saves into the database this way. But we can fix this problem easily.

We can trim the suffix of each of those strings like this:

firstName = strings.TrimSuffix(firstName, "\n")

To remove the newline before it's inserted into the database.

So refactor your case statement to look like this:

case 0:

    reader := bufio.NewReader(os.Stdin)

    fmt.Print("Enter a first name: ")
    firstName, _ := reader.ReadString('\n')
    if firstName != "\n" {
        firstName = strings.TrimSuffix(firstName, "\n")
    }

    fmt.Print("Enter a last name: ")
    lastName, _ := reader.ReadString('\n')
    if lastName != "\n" {
        lastName = strings.TrimSuffix(lastName, "\n")
    }

    fmt.Print("Enter an email address: ")
    email, _ := reader.ReadString('\n')
    if email != "\n" {
        email = strings.TrimSuffix(email, "\n")
    }

    fmt.Print("Enter an IP address: ")
    ipAddress, _ := reader.ReadString('\n')
    if ipAddress != "\n" {
        ipAddress = strings.TrimSuffix(ipAddress, "\n")
    }

    newPerson := person{
        first_name: firstName,
        last_name:  lastName,
        email:      email,
        ip_address: ipAddress,
    }

    addPerson(db, newPerson)

    break

Now let's rerun it and add another person:

Now we can see that the newline was removed, and it even looks proper in the database:

We'll go back and fix Lloyd at a later time.

Now we have our Create portion finished! We can now create new people for this database.

Reading a record

Now we want to read a record, the functionality in our second menu option:

menu.Option("Find a Person", 1, false, nil)

We will create code to find a person by their name.

Add the following to the case statement in handleFunc.

change

case 1:
    fmt.Println("Finding a Person")

case 1:

        reader := bufio.NewReader(os.Stdin)
        fmt.Print("Enter a name to search for : ")
        searchString, _ := reader.ReadString('\n')
    searchString = strings.TrimSuffix(searchString, "\n")
        people := searchForPerson(db, searchString)

        fmt.Printf("Found %v results\n", len(people))

        for _, ourPerson := range people {
            fmt.Printf("\n----\nFirst Name: %s\nLast Name: %s\nEmail: %s\nIP Address: %s\n", ourPerson.first_name, ourPerson.last_name, ourPerson.email, ourPerson.ip_address)
        }
        break

Here we create another bufio reader to read from standard input (your keyboard). We read in the name you search for into searchString.

Then, we will create a variable named people to store our results in. It's populated by the searchForPerson function that we'll create.

This function returns a list of people results based on our search string. It could be one or more results, so we'll print out how many people we find.

Then we'll loop through the results and display them on the screen.

In person.go let's create a searchForPerson function:

func searchForPerson(db *sql.DB, searchString string) []person {

    rows, err := db.Query("SELECT id, first_name, last_name, email, ip_address FROM people WHERE first_name like '%" + searchString + "%' OR last_name like '%" + searchString + "%'")

    defer rows.Close()

    err = rows.Err()
    if err != nil {
        log.Fatal(err)
    }

    people := make([]person, 0)

    for rows.Next() {
        ourPerson := person{}
        err = rows.Scan(&ourPerson.id, &ourPerson.first_name, &ourPerson.last_name, &ourPerson.email, &ourPerson.ip_address)
        if err != nil {
            log.Fatal(err)
        }

        people = append(people, ourPerson)
    }

    err = rows.Err()
    if err != nil {
        log.Fatal(err)
    }

    return people
}

We'll create this function that takes the db object and a search string and returns a slice of person objects (structs).

We'll run a SELECT statement to select id, first and last name, email, and IP address based on whether the first or last name matches our search string.

We iterate through each row, create a person struct and populate it with the resulting data. Then we append it to our slice and return the completed collection with the function.

Let's build it and run it:

Run the program and select 2 to find a person, and search for a first and last name, and you'll see the results! Great stuff.

Now let's build something to update these records.

Updating a record

Now we can add people and look them up. What if we want to update the information? If you remember, we inserted Lloyd Christmas with newlines attached to it. So let's build something to update the record and save it.

This one will be a little different. Here's how it works:

Get an ID from user input
Retrieve a record from that ID and put it in a person struct.
Display the current value when asking for a new value
Save new value into a new struct
Save the update(s) to the database.

In main.go let's add another case for our third menu option.

replace:

case 2:
    fmt.Println("Update a Person's information")

with:

case 2:

    reader := bufio.NewReader(os.Stdin)
    fmt.Print("Enter an id to update: ")
    updateid, _ := reader.ReadString('\n')

    currentPerson := getPersonById(db, updateid)

    fmt.Printf("First Name (Currently %s):", currentPerson.first_name)
    firstName, _ := reader.ReadString('\n')
    if firstName != "\n" {
        currentPerson.first_name = strings.TrimSuffix(firstName, "\n")
    }

    fmt.Printf("Last Name (Currently %s):", currentPerson.last_name)
    lastName, _ := reader.ReadString('\n')
    if lastName != "\n" {
        currentPerson.last_name = strings.TrimSuffix(lastName, "\n")
    }

    fmt.Printf("Email (Currently %s):", currentPerson.email)
    email, _ := reader.ReadString('\n')
    if email != "\n" {
        currentPerson.email = strings.TrimSuffix(email, "\n")
    }

    fmt.Printf("IP Address (Currently %s):", currentPerson.ip_address)
    ipAddress, _ := reader.ReadString('\n')
    if ipAddress != "\n" {
        currentPerson.ip_address = strings.TrimSuffix(ipAddress, "\n")
    }

    affected := updatePerson(db, currentPerson)

    if affected == 1 {
        fmt.Println("One row affected")
    }

    break

We create another bufio scanner to read in the ID you want to update.

Then we search for that id with getPersonById and store it in currentPerson.

Then we go through each value and display the current value while asking for a new value.

If the user presses enter, it will keep the current value. If they type in something new, it will be updated in the currentPerson object.

Then, we'll create a variable named affected and call the updatePerson method, and pass in the db connection method and the currentPerson object with the new information.

If the update is successful, we'll return a message.

Let's create the methods we need in person.go:

func getPersonById(db *sql.DB, ourID string) person {

    rows, _ := db.Query("SELECT id, first_name, last_name, email, ip_address FROM people WHERE id = '" + ourID + "'")
    defer rows.Close()

    ourPerson := person{}

    for rows.Next() {
        rows.Scan(&ourPerson.id, &ourPerson.first_name, &ourPerson.last_name, &ourPerson.email, &ourPerson.ip_address)
    }

    return ourPerson
}

This method takes our db object and an ID as a string. We run a query to select records that match that ID. Then we create a new person object and iterate through the row, and scan in each value to the object. Once complete, we return it.

After displaying the current values and taking in new ones in main.go, we need to process the new person object and update the database. We'll do that with the updatePerson function:

func updatePerson(db *sql.DB, ourPerson person) int64 {

    stmt, err := db.Prepare("UPDATE people set first_name = ?, last_name = ?, email = ?, ip_address = ? where id = ?")
    checkErr(err)
    defer stmt.Close()

    res, err := stmt.Exec(ourPerson.first_name, ourPerson.last_name, ourPerson.email, ourPerson.ip_address, ourPerson.id)
    checkErr(err)

    affected, err := res.RowsAffected()
    checkErr(err)

    return affected
}

Here we use a prepared statement and use the values from the person object passed in to run an UPDATE against the database. We execute the statement and return the rows affected, which should be one.

Save the file and run it. Let's fix Lloyd's record.

Notice the display is all messed up. That's because these records contained a newline, so it looks funny. But we've updated that record now so they are gone.

The next time we go to update it, we see the newlines are gone:

And we can now update any record we like and change all the values except for the ID. Great!

Deleting a record

Finally, we need to delete a record from the database. This is easy.

in main.go let's add the following case option:

Change:

case 3:
    fmt.Println("Deleting a person by ID")

case 3:

    reader := bufio.NewReader(os.Stdin)
    fmt.Print("Enter the ID you want to delete : ")
    searchString, _ := reader.ReadString('\n')

    idToDelete := strings.TrimSuffix(searchString, "\n")

    affected := deletePerson(db, idToDelete)

    if affected == 1 {
        fmt.Println("Deleted person from database")
    }

    break

This will look familiar. We're reading in an ID from standard input. Then, we're trimming the newline and passing that string to a deletePerson method. This method takes our db object and the ID we want to delete and returns affected, which should be 1.

Let's add the deletePerson method to our person.go file:

func deletePerson(db *sql.DB, idToDelete string) int64 {

    stmt, err := db.Prepare("DELETE FROM people where id = ?")
    checkErr(err)
    defer stmt.Close()

    res, err := stmt.Exec(idToDelete)
    checkErr(err)

    affected, err := res.RowsAffected()
    checkErr(err)

    return affected
}

The deletePerson method is pretty simple. It takes in our db connection and the ID to delete. It prepares a statement that's a DELETE and accepts a parameter for id. That is inserted into stmt.Exec and executed. Since there's no output from this command we look for the rows affected and return that as our output. Easy.

Let's delete a record from the database. We'll find the id of Lloyd (1001):

Then we'll build and run our program, and enter that ID:

And now record 1001 is gone:

And now we can successfully Create, Read, Update, and Delete records with our application!

Exiting the program

Finally, we need to be able to exit the program.

Replace

case 4:
    fmt.Println("Quitting application")

with

case 4:
    fmt.Println("Goodbye!")
    os.Exit(3)

Now let's build and run it:

Great! Now we have a complete CRUD app with SQLite and Go!

Conclusion

Fast, small, cross-platform applications are excellent for many use cases. This is why Go is becoming so popular. Fast, small and self-contained databases are the perfect addition to such applications which makes SQLite and Go a natural combination. This stack is no silver bullet and won't solve every problem, but there are many great uses for this.

The source code for this demo application is available here.

If you have any questions, or comments, let me know.

If you'd like to learn more about Go:

To learn more about SQLite:

Linux Commands You Need to know Part 2: Working with Files

Jeremy Morgan — Mon, 11 Apr 2022 17:42:45 +0000

In the last article in our series, Linux Commands You Need to Know - Navigation we learned how to travel around the file system in Linux. Today, we're going to learn how to work with files.

We will learn:

How to make a directory
Remove a directory
Make a copy of a file
Move or rename a file
Create an empty file

So let's dig in!!

1. mkdir

Purpose: to create a directory

As we covered in the last article, folders in Linux are called "directories". They serve the same purpose as folders in Windows.

usage:

mkdir [directory name]

Here's mkdir in action:

You can even make a directory within a directory, even if the base one doesn't exist with the -p option.

Here I will create a new directory called test2 within a test directory, with the -p option:

2. rmdir

Purpose: to remove a directory

With the rmdir command, you can remove a directory quickly and easily.

usage:

rmdir [directory name]

Here's rmdir in action:

Now this works great if the directory is empty. But what about the directory I created that has another directory in it? Here's what happens when I try to use rmdir on that directory:

rmdir cannot remove directories that have files or directories in them. To do that, you must use the rm command (which we'll cover again in command #5 )

Do that we need to type in

rm -rf [directory name]

Note: this will delete all files and directories within the directory.

3. cp

Purpose: to make a copy of a file

Here's one you'll use all the time, especially if you're making a config file backup. Let's use that as an example. I want to make a backup of this file. If I mess something up, I can go back to the old version.

usage:

cp [file name] [new file name]

You can also copy the file to another directory and keep the same file name:

cp [file name] [new location]

This is a great way to make copies of a file. But what if I want to move it?

4. mv

Purpose: to move a file to another location or rename it

This one is pretty straightforward. You use it to move a file from one place to the other.

usage:

mv [file name] [new location]

It's used the same way as cp, though it moves the file instead of making a copy.

This is also how you rename a file.

usage:

mv [file name] [new file name]

So if I want to rename my nginx configuration file, I can do this:

And it's done. What if I want to remove it?

5. rm

Purpose: to delete a file

We used rm earlier to remove a directory. It's also you delete individual files.

usage:

rm [file name]

You can remove all the files in a directory with the following:

rm -rf *

It's a handy command for removing files.

6. touch

Purpose: create an empty file

You may have noticed my "nginx.conf" was zero bytes. This is a nifty command for creating empty files. This is handy for creating a new file or testing things.

usage:

touch [file name]

This creates a file with nothing in it:

7. find a file (find)

This is a powerful command for finding files in the file system.

usage:

find [path to search] -name filename

Let's say I want to find my hello world code. I know the filename. I just don't know where it's located.

Now I can see exactly where my file is located with a simple command.

Summary

In this article, we learned how to work with files. Working from the command prompt can be very fast and efficient, so now we know how to create, move, copy, and rename files from the command line.

Please keep checking back to this site as we add to this series. We'll get into some advanced command line topics that will have you feeling like a Linux wizard in no time.

You can test your Linux skills to see where you're at:

I scored a 203, so I still have some room to grow. What's your score? Take your SkillIQ now.

Have any questions? Comments? Let me know!

--Jeremy

Linux Commands You Need to know Part 1: Navigation

Jeremy Morgan — Wed, 06 Apr 2022 17:36:21 +0000

The command prompt in Linux can be intimidating. It's one of the reasons many people avoid trying Linux if they come from a Windows or Mac environment. For years you had to know the command prompt very well to use Linux, so many people avoided it.

This series will tackle the mystery of the command prompt, and help you learn how to use Linux better and faster.

Popular Linux distributions like Ubuntu, Pop!_OS, Fedora, etc., are very graphical. You don't have to do much with the command prompt to use Linux. However, it's still a valuable skill to have, especially if you're developing software or websites in Linux. In this series, we will dive into Linux commands, how they are used, and why we use them.

If you can't navigate around the file system, you can't do much. So in part one of this series, we'll learn how to explore the file system from the prompt.

Here is a typical file system in Linux:

You'll notice it looks a lot like Windows and Mac. However, if you notice at the top where it says /home/jeremy, there is a file structure there, and that's what we're going to explore. Note that in Linux, we usually call folders "directories." They're the same concept, but it can be confusing at first.

Let's dive into some well known commands for navigation.

We will learn:

How to tell where you are in the filesystem
Change your location
Show the objects in a directory
Return to your home folder
Visualize the file system

1. pwd

Purpose: to show where you are located on the filesystem

This stands for "print working directory," it tells you where you're at on the file system. It's handy because it's easy to get "lost" on the file system.

usage:

pwd

When I run pwd on my machine, it shows I'm in /home/jeremy:

2. cd

Purpose: to navigate the file system

This stands for "change directory," and it allows you to navigate.

usage

cd (name of the directory you want to go to)

Now this one has more than a few interesting options.

You can go into the next folder up by typing its name.

cd [name of directory]

So if I'm in /home/jeremy and I want to go to games I would just type in cd games.

That's a relative path. If I want to do an absolute path, I will type in cd /home/jeremy/games.

Now I'm in that directory. What if I want to go directly to my Go bin folder? I would type in

cd /usr/local/go/bin

and you'll move directly to that folder:

You can cd into a directory above where you are, or explicitly.

You can also go down one directory by typing

cd ..

If you want to go down two directories, you can do that too.

So let's say you're in /usr/local/go/bin and you want to go to /usr/local you would type:

cd ../..

And there you have it! cd is a great navigation tool.

3. ls

Purpose: to list the objects in a directory

The ls command lists all the objects in a directory. So, we're in our /usr/local directory. If we type in ls we'll see this:

This isn't super helpful. I prefer something like ls -la which shows "all" of the information about the objects:

If you want to show what's in the directories as well, type ls -R

If you want to search for a specific file name or extension, use the * symbol. Let's say I want to find every .toml file in my directory.

I type in ls -la *.toml. The asterisk means "everything that has .toml" at the end:

Or, we can look for "every file with the name staging in it" by typing ls -la *staging*

ls is a simple command that can be very powerful.

4. ~

Ok, so ~ isn't a command, but something you append to commands. It simply means "home".

if you type in cd ~ it will take you to your home directory:

Not only that, you can create directories using ~ as a shortcut for home. You can navigate to directories under your home directory with ease.

Let's say I'm in /etc/X11/init and doing some work. But I want to get to a specific directory in my home directory.

Instead of typing out cd /home/jeremy/repos/JeremyMorganDotCom,

I can type cd ~/repos/JeremyMorganDotCom as a shortcut.

This may seem like a small thing but can add up to big savings once you get into the habit of using it.

5. tree

Tree is a helpful command for visualizing a file system. As a note: this command doesn't come with all Linux distributions. You may need to install it. It's a great way of visualizing the directory layout in the filesystem where you're at. Here's an example in a repository of one of my projects.

To use it, you type:

tree

I haven't used this one as much, but it can be helpful for confusing filesystem layouts.

Conclusion

Here are the typical commands for navigating in Linux. I encourage you to try them out and get comfortable with moving around. If you haven't installed Linux yet, you can still get some practice doing this. Here are some options so you can try it out on your Windows or Mac machine:

Open Terminal on your Mac. It's the same commands.
Install WSL (Windows Subsystem for Linux) and get a Linux installation within Windows.
Use Virtualbox and create a virtual Linux installation

These are some ways you can try out Linux virtually risk-free. If you've already been bitten by the Linux bug, start expanding your skills with our Linux Fundamentals Path where you can advance your Linux skills quickly.

You can test your Linux skills to see where you're at:

I scored a 203, so I still have some room to grow. What's your score? Take your SkillIQ now.

Have any questions? Comments? Let me know!

--Jeremy

What's the Best Way to Optimize Images for the Web?

Jeremy Morgan — Mon, 06 Dec 2021 17:00:53 +0000

Want fast loading web pages?

You probably aren't optimizing your images enough. Image optimization is frequently overlooked because it's only a small difference and takes some time to do. But a series of small changes will lead to a screaming fast website. It's worth it. Your pages will load faster.

Why does this matter?

It's better for your user
It makes your page more accessible in low bandwidth situations
It's better for SEO

All this in exchange for a few minutes of your time. Do you need any more reasons to optimize your images?

What We'll Do

In this article, I will show you four ways to optimize your images and the results from each of them. I'll explain how I tested them and show you the results.

You can download the files and perform your own tests by downloading this repo. Feel free to play around with it.

For testing, I decided to grab random images from unsplash. I randomized the width and height to get various dimensions you might see on the web.

I used this script to pull down 32 images and put them into a folder.

We're going to look at:

The raw files - with nothing done to them
Photoshop optimizing
RIOT optimizing
XNConvert JPEG optimizing
XNConvert to Webp optimizing

And we'll see how these methods stack up. We will examine file size and page load time. As a note, I do not change the resolution or color depth of these images, so they are all the same except for the optimizations.

How I'm Testing Load time

I'm testing load time by creating a simple index.html file in each folder that loads up a table of the images. I am serving it up with the NPM serve package because it's a simple HTML server that runs locally. I don't want network latency to affect the results.

Then I use CURL to grab the load time:

curl -s -o /dev/null -w "%{time_total}\n" -H "Pragma: no-cache" https://localhost:3000

Let's optimize some images and see the results.

Raw Images

This is a test with the images straight from Unsplash. It is our baseline measurement.

Here is the total file size for all images:

So we're starting with 3.1MB of images. Not too shabby, but not small either.

Here is the page load time:

I ran the test ten times and got an average load time of 0.0013495 seconds. It seems fast, but we can improve on it.

Optimized with Photoshop

For the next set of images, I optimized these with Photoshop. I used the following settings:

I set a quality of 60 and set it to progressive with no metadata. I got some interesting results.

Here is the total file size for all images:

It's 3.3MB, which is more than we started with. I have no idea why this is and will investigate and update later. But most of the time, this creates smaller images.

Here is the page load time:

Our average load time is 0.001213 seconds, which is a little above the raw files. Not much of a surprise with this file size.

Optimized with RIOT

Next, I optimized the images with the Radical Image Optimization Tool (RIOT). This is only available in Windows, but it's an excellent tool I've been using for years.

I used the following settings:

And even though I left the quality pretty high at 82%, it shrunk the files down considerably:

Here is the total file size for all images:

At 2.3MB, that's quite a bit of savings. This reduces your website's footprint without sacrificing quality.

Here is the page load time:

Our average load time is 0.0010877 seconds, which is our fastest yet.

Optimized with XNConvert (JPG)

For this test, I optimized the images with XNConvert and used it to optimize the JPEGs. This is the tool I use the most because it runs in Windows, Mac, or Linux and does batch processing quickly.

I removed the metadata:

Then saved them with the following settings:

Here is the total file size for all images:

At 2.2MB, this is the smallest we've seen yet. However, I don't expect it will significantly improve load time over the previous 2.3MB of images.

Here is the page load time:

The average is 0.001085 seconds, which is a little faster than RIOT. Great!

I highly recommend XNConvert for image optimization. But, we can take this even a step further and convert everything to Webp images. These will be significantly smaller and hopefully faster.

Optimized with XNConvert (WebP)

So I took the same set of raw images and converted them to .webp images. This is Google's recommended image format these days, and it's easy to see why.

Here are the settings I used:

Here is the total file size for all images:

Wow! We went from 3.1MB of images to 1.5MB. That's significant. Let's see what it does to load time.

The average is 0.0010326 seconds, which is a new record. Great!

This is something you should consider when doing image optimization on your site. Webp images are the way forward.

Let's Look at the Results!

This is the total file size for all images:

Method		File Size
Raw images		3.1MB
Photoshop		3.3MB
RIOT		2.3MB
XNConvert (JPG)		2.2MB
XNConvert (Webp)		1.5MB

Method		Load Time
Raw images		0.0013495
Photoshop		0.001213
RIOT		0.0010877
XNConvert (JPG)		0.001085
XNConvert (Webp)		0.0010326

Conclusion

Optimize your images! As you can see, it makes a difference, even with this small page with 32 images on it. I will do this experiment again with a larger image set to see how the changes scale.

Overall it's pretty clear that .webp images are smaller and more efficient.

It's definitely worth the few minutes of extra time.

Questions? Comments? yell at me on Twitter!

-- Jeremy

Pop!_OS 21.04 First Impressions

Jeremy Morgan — Mon, 12 Jul 2021 14:39:35 +0000

Pop!_OS has become one of my favorite Linux distributions over the last couple of years. It's a fantastic distro for many reasons, most of which is the way it "just works." Sorry Apple, that's not exclusive to you. System76 released version Pop!_OS 21.04 and I upgraded immediately. Here are my first impressions.

I'm basing this review on a native install on my Lenovo Thinkpad E590 laptop. I use this laptop for personal projects, website maintenance and building articles/tutorials like the one you're reading now.

Here's what I generally do with this laptop running Pop!_OS:

Backend development (Golang, .NET Core)
Frontend Development (recently Vue)
Virtualization (small VMs)
Container stuff
Data stuff (MariaDB, SQLite)

All of this can be done extremely well with Pop!_OS. The thing I enjoy most:

In January I slated my laptop, installed Pop!_OS, and forgot about it.

I'm able to do the work I want to do without thinking about my operating system and configuring it. While I generally love to tinker with operating systems, if I have a machine dedicated to work, I'd prefer not to. I got tired of updating Arch Linux and diagnosing things when I fired up the machine to write some code.

The Pop!_OS 20.10 Experience

Version 20.10 is based off Ubuntu 20.10 and it's important to know that Pop!_OS is Ubuntu under the hood. But it's not just a reskinned Ubuntu.

System76 knows that all the effort spent to make Pop!_OS great will make their hardware run great. So they pour efforts into the system as a whole and it shows when you use it, even if you don't have System76 hardware. (I'm still waiting for the Gazelle to become available again so I can purchase one.)

While you can use whatever desktop you want, System76 offers its own desktop environment, and that's one of the biggest draws for the distribution. It's more than a skin, but it's a pretty great skin.

Once I'd gotten used to this desktop, my productivity soared. It's easy to use and I developed habits to quickly navigate around and do what I need to do. I can bounce between Windows with ease and generally move fast. I'm not a person who cares a lot about aesthetics but it looks great. And works great.

Then I found out they're changing the desktop in 21.04. Great.

I was a bit concerned. I can always roll it back to the old desktop if I want, so I took the plunge and upgraded the system. YOLO and what not.

How long did I take to get used to it? The answer surprised me.

The Pop!_OS 21.04 Experience

I upgraded to the new OS, and everything went as planned. Zero problems. It found my hardware, configured everything, and still had a bunch of settings from before. Painless to say the least. Microsoft, take note!

And hey this UI looks.... oddly familiar. Yes, it's now using the OSX style dock. You could configure something similar before, but now it's a default.

This doesn't bother me as I use a Mac every day for work and I like the UI. Thankfully this isn't a clone of the OSX UI though.

You can maximize windows. Yes, unlike OSX you can have Microsoft Windows style window handling. Love it.

It also offers a ton of customization. You can make it like OSX, like Windows, or like neither. You can take the best of both worlds if you like.

Bottom line: I jumped in and made it what I wanted it to be. Once I got to work I found the new desktop environment very fluid and fast. I adapted to the changes quickly.

Also, I love the window tiling:

I can't remember an operating system upgrade I've done that went so smoothly.

Bottom Line

An operating system upgrade is a risky and sometimes annoying process. Not so much with Pop!_OS 21.04. It's easy. I didn't have any hardware or configuration problems and I love the new desktop. I'm already incredibly used to it.

If you're thinking about the upgrade do it. If you've never used Pop!_OS before, now's the time. I recommend it frequently for new Linux users because it's so easy to install and use. Now it's one step closer to being the ultimate replacement for OSX or Windows if you want to leave those platforms.

It's also highly performant and configurable like other versions of Linux. (Geekbench) You aren't giving up either of those things to have an easy painless experience. So check it out.

Download Pop_OS! 21.04 Here

Questions or comments? Yell at me!

--Jeremy

How to Run Windows 10 on the Apple M1

Jeremy Morgan — Sat, 05 Jun 2021 17:24:48 +0000

In January I picked up an Apple M1 Mac Mini. I immediately put a bunch of miles on it. It does much of what I need it to do well. But the one thing it doesn't do that I need it to: virtualization.

This stands to reason: The M1 is an ARM processor and nearly everything running on this machine uses Rosetta translation technology to translate x86_64 instructions to ARM. It's so well designed and tightly integrated with the hardware that some x86 applications run faster on the M1 than they do on Intel Macs. It's incredible. But it doesn't support something as complex as an x86 virtual machine... yet.

But I set up a couple VMs on here, and I'll show you how to do it, and what you need to know.

Step One: Parallels

I'm not a Parallels expert. In fact, I purchased it for the first time, installed it, then started up a live stream to try it out.

You can't run the standard version of Parallels on the M1. You'll need to download Parallels for Mac with Apple M1 Chip. This is a version specially built to work with Rosetta.

Ok cool, so Parallels runs on the M1, that means we can run any Virtual Machine now right?

No. Not exactly.

So, I wanted to run Windows on this thing. However, we have no option for Bootcamp, and I can't download a x86_64 Windows 10 ISO and install it.

So what do we do?

Step Two: Get the Windows 10 for ARM Preview

The Windows 10 for ARM preview will run in Parallels. It's a Windows Insider preview. If you're not a Windows Insider, you can sign up here.

You can download and install it in a few clicks just like any version of Windows.

Step Three: Enjoy Windows 10 on the M1

This is a preview version of Windows 10 for ARM processors. Here are some things you need to know:

It is not officially supported on the M1
It cannot be activated (for now)
It runs x86_64 apps under emulation (the reverse of Rosetta)

So it will run, but it's not perfect. Let's talk about how it went.

First Impressions

So in my live stream I installed Windows 10. It installed fairly quickly. I installed several x86 applications and set up my machine for some front end development. What I noticed:

I can go full screen
It runs fairly snappy
It "feels" like any other version of Windows
Can't do much for memory

I then ran a Geekbench test on it. It was less than impressive.

Less than half on the Single-Core score and about 12% of the native Multi-Core score. Ouch.

Full scores:

There are several reasons for this. One being going through two translation layers. So running Geekbench "natively" on Big Sur isn't even truly native, it's running through the Rosetta system, but pretty fast.

In Windows 10, it's a x86_64 app translated to ARM, going through Parallels back as x86_64 then translated again for native ARM. Yikes.

That being said, the machine didn't feel all that slow. I should note you won't be able to assign much memory to this.

This is because the M1 is limited, in my case I have 16G of memory, and about 10G is being used up before I even start the Windows machine. So, you can add virtual memory at your own peril.

Summary

This is how you can run Windows 10 on your new Apple M1. I haven't spent a lot of time with it yet, but you can do basic "Windows stuff" on your M1 if you really need it. If there are a few applications you need to run, it can probably handle it. I don't see a compelling reason to run Windows 10 this way as a full-time machine. You're giving up memory and CPU power for it. You won't be able to run games so don't even try it.

But it's nice to at least have this option available if you need it.

Have you tried this? Let me know how it goes!

It's Tech Skills Day!

Jeremy Morgan — Thu, 22 Apr 2021 14:17:04 +0000

Hello friends! It's Tech Skills Day, and I want you to join me!

Tech Skills Day is an annual holiday that brings the global tech community together to honor the spirit of lifelong learning, helping each other grow and celebrating what technology can create

It's a 100% FREE Virtual Event. Click here to join.

This year Cassidy Williams and I are hosting Tech Skills day, and it's going to be fantastic. Tech Skills Day combines valuable content, inspired experiences and thought-provoking narratives together in one incredible virtual experience.

Who will be at Tech Skills Day?

Levar Burton

Multi-talented actor LeVar Burton is best known for his role as Lieutenant Commander Geordi Laforge in syndicated science fiction hit Star Trek: The Next Generation and his role as "Kunta Kinte" in television miniseries Roots, which broke viewing records and inspired a national discussion on the issue of race. He is also host and co-producer of the long running, Emmy-winning PBS educational series Reading Rainbow.

Scott Hanselman

Scott Hanselman is a web developer, Pluralsight author and speaker. He works in open source on ASP.NET and the Azure Cloud for Microsoft out of his home office in Portland. Scott has three podcasts, has written a number of books and spoken in person to almost a half million developers worldwide.

Deborah Kurata

Deborah Kurata is a software developer, consultant, conference speaker and Pluralsight author. For her work in support of software developers, she has been recognized with the Microsoft Most Valuable Professional (MVP) award and is a Google Developer Expert (GDE).

John Papa

John Papa is a Principal Cloud Advocate with Microsoft and an alumni of the Google Developer Expert, Microsoft Regional Director and MVP programs. John is a co-host of the popular Adventures in Angular podcast and author of the Angular Style Guide, several books and many popular Pluralsight courses.

Troy Hunt

Troy Hunt is an Australian Microsoft Regional Director and Microsoft Most Valuable Professional for Developer Security. He also creates courses for Pluralsight and travels the world speaking at events and teaching technology professionals. You'll regularly find him in the press talking about security and even testifying before the U.S. Congress on the impact of data breaches.

April Speight

April Speight is an author, developer and style aficionado from Los Angeles. She began her career in luxury fashion as a menswear stylist and visual merchandiser, but in 2013, she made her transition to working in IT. She’s since been dabbling in coding (primarily Python, some C# and JavaScript) and has found her forever home within Developer Relations at Microsoft.

Mona Chalabi

Mona Chalabi is a data journalist in New York. Her work has appeared in The New Yorker, The New York Times, The Guardian, as well as on NPR, Gimlet, Netflix and many more. Before she became a journalist, Mona worked with large data sets in jobs at the Bank of England, Transparency International and the International Organization for Migration.

Cassidy Williams

Cassidy Williams is a Principal Developer Experience Engineer at Netlify. She's active in the developer community and one of Glamour Magazine's 35 Women Under 35 Changing the Tech Industry and LinkedIn's Top Professionals 35 & Under.

Jeremy Morgan

Pluralsight Developer Evangelist, tech blogger, and passionate geek. Jeremy likes to stay immersed with the latest in .NET development and DevOps during the day, and tinkers with Linux machines and microcontrollers at night.

Let's Go!

So join me today for this fun and exciting time with these tech superstars!

Watch Tech Skills Day Live Now!

See you there!!

Pluralsight is FREE in April!!

Jeremy Morgan — Sat, 10 Apr 2021 17:13:52 +0000

Great news!! Pluralsight is FREE for the entire month of April! If you've been wanting to skill up, and have never tried the platform, here's your chance!

Try out Pluralsight Now!

If you sign up now, here are a few things you can do to take advantage of Free April. Here are some things you can do right now if you sign up and get started.

1. Learn Angular

With the Angular Getting Started course, you can finally jump in and learn some Angular! Deborah Kurata teaches things like nobody else I know. Her expert instruction will get you on the right track.

2. Artificial Intelligence

Curious about AI? Do you want to get into it but don't know where to start? Artificial Intelligence: The Big Picture of AI will get you where you need to go fast!

3. Learn C

C# is one of my favorite languages of all time. I absolutely love coding in it, and if it's something you've been curious about The C# Path at Pluralsight will get you where you need to be, FAST.

4. Get Started with Python

OK if you know me, you already know about my love of Python. The ultimate “glue” language that empowers you to do SO many things. You can take this Getting Started with Python course and hit the ground running! You'll be amazed at what you can accomplish with this.

5. Learn Some React

React is undoubtedly one of the hottest front end frameworks out there, and it's taking over the world. React Getting Started is the course that will launch you into this world head first and you'll understand the basics of React FAST.

What's So Great About Pluralsight?

You might ask, what's the difference between Pluralsight and just going on to YouTube and learning stuff?

Courses are Organized - Finding tutorials and videos online, and trying to piece things together is difficult. It's tough to know what you need to know, find it all, and get full coverage of a topic. Pluralsight does that for you and puts together a solid package of the right knowledge.
Taught by Experts - Not anyone can just record a few videos and put a course up on Pluralsight. Expert authors are recruited from the field and vetted. They are experienced, knowledgeable folks who have done real work in the field.
Courses Meet Strict Standards - Every course goes through a quality control process to make sure they are clear and accurate. The content is thoroughly checked to make sure you're getting accurate, useful information about a topic.

You can:

Take a Course
Check Your Knowledge with SkillIQ
Get HANDS ON with Cloud Labs and Sandboxes

So what are you waiting for? Give it a shot! It's Free during the month of April.

Try out Pluralsight Now!

What Do You Do for a Living Anyway?

Jeremy Morgan — Sat, 06 Mar 2021 18:34:39 +0000

I get asked this question a lot. My friends and family barely understand what I do, and my title Technical Marketing Manager doesn’t help at all. So I’ll try to explain it.

TL;DR: My job is awesome. I build cool stuff, talk with amazing people, and have fun. If you want to join me, click here and let’s talk

In 2002, I went from being a Network Administrator/IT person to a developer. With a background in administration, I would take on those duties with most jobs I had. So for around 18 years my job description was "write software and keep systems running."

When asked, "what do you do for a living?"

My answer was "I write software for ____" or "I lead a team that writes software for _____"

It was easy to explain. Simple to understand. Most non-technical people could grasp it and move the conversation to another topic.

My current role is not so easy to describe. But it’s certainly more interesting.

Pluralsight: Customer to Author to Employee

I discovered Pluralsight in 2012 when I was an Engineer looking for ways to "sharpen my axe" and get better at my job. I fell in love with the platform. The first course I took was by the late, great Scott Allen. He broke things down in a clear and understandable way. It inspired me immediately.

I’d always loved teaching those around me, but I never pictured myself as an "instructor" until that point. I’d always imagined the loud, egotistical, showboat professor types and never identified with that. Scott’s relaxed, ego-free method of delivery showed there was room for someone like me in this space. Years later, I shared this with him over lunch. He’ll always be one of my heroes.

In 2016 I auditioned to be a Pluralsight author and was accepted. My first course experience was rough, but I got through it and enjoyed it. I particularly enjoyed working with Pluralsight. They treated me very well, and the people were great to work with. So when an opportunity came up at Pluralsight as a Technical Marketing Manager, I was stoked.

Imagine interviewing with a company where you had four years of exposure to the company, culture, and people. I already had an excellent preview. If it were any other company, it’s unlikely I would have accepted walking away from day-to-day coding. It was risky, but it was the best move of my career.

Technical Marketing Manager

My job when I started was much different than it is now. What it has evolved into is a mission-driven position that is fun, motivating, and fulfilling.

Every day I get to:

Host a podcast
Build instructional / fun videos
Present new tech at conferences and meetups
Write articles
Build presentations
Give input to marketing materials
Speak with brilliant, passionate leaders

Here’s my core mission:

Share what I’ve learned in 18 years of development
Demystify new technology and present it in a way that makes sense
Speak with others who share their wisdom and knowledge

And the "North Star":

Help technologists get better at their job

That’s what Pluralsight is all about. We make sure that anyone coming to Pluralsight looking for help to improve their skills will succeed. They will get relevant, accurate information and a path to success. Which is part of what makes this job so fun. The "ace in the hole" is knowing I'm helping promote the most solid toolset for engineers in the world.

I work with smart, talented, and passionate people. I get to talk tech with people every day, some who I’m teaching and some are teaching me. I also get to work with some of the most renowned leaders in technology.

Our Team is Expanding

We’re looking for another "Developer Evangelist" to join the team. Someone who is passionate about technology, teaching, and the tech community. We are looking for someone who wants to create great learner content. Someone who loves learning new things and makes sure hears about it. Someone who wants to engage with leaders and add to the body of knowledge in tech.

If you:

Love to write and speak about your work
Get excited about connecting with the dev community
Are passionate about learning and continuous improvement

Then we want to hear from you. Full Description Here. Go ahead and SMASH THAT APPLY BUTTON!!

You can ask me anything or apply for the position. I’d love to hear from you.