Jor-Dani-Elder

How To Start Website Development

Mon, 18 Sep 2023 15:11:46 -0500

The first time you look at computer code you might stare until you go cross-eyed, but with a little guidance that same mangled text can quickly become a sharp tool for creativity. This introductory guide is something I wish I had when starting out. I hope it can help those with zero experience get started or at least walk away with an understanding of a few concepts found in website development.

Object

an object in programming is a collection of data

const message = {
    "sentence": "Hello world!"
}

const - stands for constant variable a variable can typically change its value, but a constant variable will not change.

HTML

HTML stands for Hypertext Markup Language which is in a class of languages called Markup Languages and it tells Web Browsers what to do with your important website information.

<div id="webpage">Hello world</div>

div - stands for division, but not like in math, a div tag seperates elements in a page.
This div has an id attribute we assign the name of “webpage” for use in our upcoming script.
</div> - every tag in HTML has a closing tag represented with the name of the Element with a / in front, in our case </div>.

Javascript

Javascript is what’s called a scripting language

This example is actually a subset of Javascript, called a framework, named jQuery. I find it both more efficient and easier to learn Javascript through playing with jQuery, but there are reasons, you’ll discover on your own, for pure Javascript and supersets of Javascript like Typescript

$("#webpage").text(message.sentence);

The $() is a jQuery selector it’s a shorthand selector for HTML DOM Elements, Classes, and in our case IDs, denoted by the preceeding # and our <div>’s given name webpage.
The . following the $() is a chain operator, which promises to execute each following function attached, in our case it’s text() with our Object called.
The Object is in a format called Javascript Object Notation typically shortened to JSON which also uses a . operator to denote the hierarchical structure we defined before
Our message variable contains the sentence key which returns the Hello world! value to the <div> with the ID (#) of webpage as text(). This is the essence of data structures in a format called Key-Value Store which will be your bread and butter for all things data going forward.

<filename>.html from a web browser

Putting It All Together!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key-Value Store Example</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body style="background:pink">
    <!-- HTML -->
    <div id="webpage">Hello world</div>
    <script>

        // Object
        const message = {
            "sentence": "Hello world!"
        };

        // Javascript
        $("#webpage").text(message.sentence);

    </script>
</body>
</html>

WOW THAT’S A LOT MORE STUFF!
Now that you understand the basics and the few things that really mattered in this web page, there’s nothing left but to see a real world example such as this.
There’s a lot here, but one thing to play with is the style attribute on the <body> tag, start by changing that value and have fun learning!
you can copy/paste this code into a file called hello.html and open it in your web browser to view. To edit again right click and select open with and choose a text editor. I recommend downloading Microsoft VS Code if you don’t have anything but notepad.
I also recommend typing all of this block out by hand so you can get a feel for it, but also understand that there is tooling out there such as Emmet that are meant to generate stuff for you later on in your journey~
From here check out the LAMP Stack
and be sure you have visited W3C Schools
Happy Hacking!

Helm Quick Start With Next Cloud

Sat, 21 Jan 2023 04:57:50 -0600

Getting started with Kubernetes can be a daunting task, especially for newcomers. This is where Helm comes to smooth out the experience. Referred to as the package manager for Kubernetes, Helm aims to simplify the deployment of k8s applications, making it easier for users to harness the full potential of Kubernetes. In this guide I’ll jump through the steps I took in gettin acquainted with Helm through the Next Cloud Chart.

This guide assumes you already have a Kubernetes cluster and Helm installed

Search for the App on ArtifactHub.io

I’ll be using the official nextcloud chart

Click the button labeled Default Values on the right side of the screen

and either copy/paste or save the file into a location of your choice. I will be using ~/helm/nexctloud/values.yml as my destination

This values.yml file is the full list of every possible change to be made to this application. This is the piece of the puzzle that everyone breezes over. You can edit any line of this file as-stated in the documentation.

in that file you’ll see plenty of things you’ll wanna edit such values as host, username, password, etc… give this file a good once-over, read some of the comments and understand that what we’re about to do is ephemeral, meaning there is not an underlying storage mechanism in this install of NextCloud. This post is about Helm after all.

and in my case I needed to add my access domain to the config: line which was stated in browser the first time I loaded without that line

configs:
  proxy.config.php: |-
    <?php
    $CONFIG = array (
      'trusted_domains' => array(
        0 => 'nc.10.1.1.254.nip.io',
      ),
    );

and after all that you can save the values.yml file and go on to install

helm repo add nextcloud https://nextcloud.github.io/helm/  

helm install my-release nextcloud/nextcloud --values helm/nexctloud/values.yml

note that --values helm/nextcloud/values.yml is the location of my edited values.yml file

now as for Ingress Controller that’s beyond the scope of this quickstart, but this Ingress Resource will work for Traefik and Nginx. I’m just sending it to the subdomain of nc and 10.1.1.254 is the address of my cluster, yours will more likely be another IP or localhost, and nip.io just let’s you attach subdomains onto an IP address:

apiVersion: networking.k8s.io/v1
  kind: Ingress
  metadata:
    name: my-release-nextcloud
  spec:
    rules:
      - host: nc.10.1.1.254.nip.io
        http:
          paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: my-release-nextcloud
                port:
                  number: 8080

and now when I visit nc.10.1.1.254.nip.io in my browser I see Next Cloud! You should be able to type the subdomain you provided attached to your cluster’s IP and run it against nip.io as well for the same result: nc.your-cluster-ip.nip.io

and I can log in with my user with admin and password which you should have changed if you’re on the public internet!

when you wanna make any changes just edit the yaml file again and run
helm upgrade my-release nextcloud/nextcloud --values helm/nextcloud/values.yml

REMINDER: we didn’t attach storage to NextCloud this is for testing purposes only! Your data will not persist across upgrades. Do not stop here if you intend to deploy Next Cloud for real world use.

Happy Helming!

LosslessCut: My Most Used Video Editor

Sat, 21 Jan 2023 04:57:50 -0600

Throughout my experience with Linux and Open-Source I’ve enjoyed many great free video-editing tools. Software like FFmpeg and ImageMagick have done so much of my heavy lifting over the years, and Editors like OpenShot, Kdenlive, and Lightworks all have their places in my different environments; but one video editor that has made its way into my upper-eschalon of tools over the last few years is a little-known tool called LosslessCut.

FFmpeg is a command-line tool that is widely used for video encoding, decoding, and conversion, it can be used for a wide range of tasks including trimming, cutting, and merging videos, but it is not a full-fledged video editor like LosslessCut. It can be challenging for users who are not familiar with command-line interface to use.

ImageMagick is a powerful and versatile tool for working with images, but it requires a good understanding of command-line interface and the software capabilities to take full advantage of its potential.

OpenShot and Kdenlive are both open-source video editors that offer a more traditional timeline-based editing experience. They provide a wide range of features such as advanced color correction, motion graphics, 3D animation, and more. However, they may not be as efficient or as fast as LosslessCut when it comes to trimming and cutting videos without re-encoding.

Lightworks is a professional video editing software that is widely used in the film and television industry. It offers a wide range of advanced editing features and a professional-grade workflow. However, it is not free, and it may be too complex for users who only need to perform basic editing tasks.

LosslessCut

Though I often turn to OpenShot for my overall video projects, I often start with FFmpeg and…

LosslessCut is a simple, efficient, and free video editing tool that is well-suited for quickly trimming and cutting videos without re-encoding. It may not be as feature-rich as other editors like OpenShot, Kdenlive, or Lightworks, but it is a good choice for users who need a fast and easy-to-use tool for basic video editing tasks.

is a simple and efficient tool that allows users to quickly trim and cut videos without re-encoding, as well mix and merge multiple sources. You’ll want to add this free and open-source tool to your workstation no matter what platform you’re on.

Options

Often I will just extract all tracks for a common workflow for the band, and that’s possible as soon as the file is open from the Edit->Tracks dropdown

I’ll go into just a little detail here about some of the different settings available in the File->Settings or with the keyboard shortcut Ctrl+Comma.

The list of settings and preferences offers a rich set of options to customize their experience when using the program, this is just a few options:

App language: Allows users to select the language that the program will be displayed in.
Keyboard & mouse shortcuts: Allows users to customize the keyboard and mouse shortcuts used in the program.
Working directory: Allows users to specify the location where working files and exported files will be stored.
Auto save project file: Allows users to enable or disable automatic saving of the project file.
Custom FFmpeg directory (experimental): Allows users to specify custom FFmpeg and FFprobe binaries to use.
Keyframe cut mode: Allows users to select the cutting mode to be used when exporting videos.
Extract unprocessable tracks: Allows users to specify what to do with tracks that cannot be processed.
Experimental ffmpeg features flag: Allows users to enable experimental features in ffmpeg.
Snapshot capture format: Allows users to select the format in which snapshots will be captured.
In timecode show: Allows users to specify whether timecode is displayed in the timeline.
Timeline trackpad/wheel sensitivity: Allows users to specify the sensitivity of the trackpad and wheel when navigating the timeline.
Auto load timecode from file: Allows users to enable or disable the automatic loading of timecode from a file as an offset in the timeline.
Auto convert to supported format: Allows users to enable or disable automatic conversion of unsupported files to a supported format when they are opened.
Hide informational notifications: Allows users to enable or disable the display of informational notifications.
Ask about what to do when opening a new file: Allows users to specify whether the program should ask what to do when a new file is opened while another file is already open.

Multiple Sources

As soon you pull a video file into the program, simply dragging and dropping on most systems, you’re able to export the tracks or start trimming up segments

Setting the Working Directory is where the files your exported files will be saved

If you open multiple tracks in you’ll see the menu on the left to show your different video layers. You’ll notice one of my tracks is has cut-merged in the name, that is how your files will be appended in LosslessCut.

Multiple Tracks

since LosslessCut doesn’t re-encode the video, it is very fast and since it also retains video quality. You’re able to mix, merge, and concat audio and video tracks from within the batch file list.

Lossless Export

LosslessCut is designed to handle multiple tracks. It lets you trim video tracks and export them down into tiny segment quickly. You’re are able to add multiple audio tracks and switch between them, which is useful for creating a final video with multiple audio tracks (e.g. for different languages, or to add a commentary). You can trim, cut, and adjust the video tracks independently of each other and place them in different layers allowing multiple videos to be combined into a single video.

Screenshots

LosslessCut is also a great way to grab screenshots from the video as you’re working on it, so you don’t have to go to external tools for that.

FFmpeg is still quicker for some things

Allthough FFmpeg can do anything that a video editor can do; LosslessCut doesn’t replace FFmpeg entirely for me, there are still some tasks that I leave up to my favorite command-line tool:

Video Information:
ffmpeg -i video.mp4 -hide_banner -f null -

and ripping audio is usually also something I’ll do with FFmpeg unless it’s a byproduct of a larger video project

Basic MP4 to MP3:
ffmpeg -i video.mp4 audio.mp3

Thunderbird in 2023

Mon, 16 Jan 2023 21:34:04 -0600

More Than A Mail Client

Thunderbird is a powerful, free and open-source email, news, and chat client developed by the Mozilla Foundation. It is available for Windows, Mac, and Linux operating systems and offers a wide range of features and functionalities to help users access your emails, schedule appointments and events, and customize the look and feel of the application.

One of the key features of Thunderbird is its interoperability with a wide range of email service providers. The application supports popular email protocols which allows it to work seamlessly with most email services, including Gmail, Yahoo, and Outlook, among others. Thunderbird also allows you to set up multiple email accounts within the same application, giving you access to all of your email accounts from one central location. Contrary to popular belief, mail isn’t all it’s capable of…

The Calendar and Reminders

Additionally, you can use the built-in calendar and task manager to schedule appointments and events, set reminders, and manage your to-do list across your accounts. Thunderbird’s Calendar is compatible with other calendar services, such as Google Calendar, Exchange, and iCloud, allowing you to synchronize your events and tasks across multiple devices, this is especially useful if you use multiple devices for work or personal use.

You can quickly check all of your calendars to see what you have planned for the day, week, or month, and make adjustments as needed and allows you to manage your tasks and to-do list. The task manager is quite rich in Thunderbird. Have a look here!

Thunderbird’s built-in task manager allows users to efficiently manage your tasks and to-do list, by setting due dates, priorities and marking them as complete, making it a useful tool for staying organized and on top of your schedule.

The built-in contact system allows you to store and organize information about your contacts, such as your name, email address, phone number, and other details; and allows you to create multiple address books, which can be used to organize your contacts into different groups or categories. For example, you can create separate address books for personal contacts, business contacts, or contacts from a specific project or organization.

Thunderbird includes support for newsgroups and RSS feeds, and now also includes Matrix chat support through an extension, allowing you to read and post to newsgroups, subscribe to RSS feeds, and join and chat on Matrix servers, all within the same application. Newsgroups in Thunderbird refers to online discussion forums organized by topic. They are similar to forums or message boards, where users can post messages, read messages posted by others, and respond to them.

There’s an extension for Matrix Chat, which allows you to join and chat on Matrix servers from within Thunderbird. Matrix is a secure, decentralized communication platform that enables real-time communication, including instant messaging, voice, and video calls, and allows for integration with other platforms and services. By using the Matrix Chat extension with Thunderbird, you can join any Matrix room, chat with your contacts, access to your room’s history, and more.

All this combined means that you can use Thunderbird as a central hub for all your communication needs, including email, newsgroups, RSS feeds, and Matrix chat, all within the same application; and can be very useful for people who need to keep in touch with multiple groups of people or who need to stay informed on different topics.

Building a Hugo Blog Website with Digital Ocean and GitHub

Mon, 16 Jan 2023 12:58:41 -0600

What is a Hugo?

Firstly welcome to the world of static sites! If you’re new to the concept, a static site is a website that is built using plain HTML, CSS, and JavaScript files, as opposed to a dynamic site that is generated on the fly using a server-side language like PHP or Ruby.

One of the most popular tools for building static sites is Hugo. Hugo is a static site generator written in Go, and it’s known for its speed and ease of use. With Hugo, you can create a website in minutes, without having to worry about setting up a server or a database!

One of the key benefits of using Hugo is that it’s incredibly fast. Since your website is just a bunch of static files, it can be served to your visitors quickly and efficiently. This means that your website will load faster, which is great for both your visitors and your search engine rankings.

Another benefit of using Hugo is that it’s extremely easy to use. You can create a new website by simply running a single command, and then you can add pages and content to your site by creating new markdown files. You can also use Hugo to create a custom theme for your website, which means you can make it look exactly the way you want it to.

Overall, Hugo is a great choice for building your next static website. It’s fast, easy to use, and highly customizable. So if you’re looking for a simple and powerful way to create a website, let’s go ahead and get moving!

Download a Few Things to Get Started

NOTE: I will be using Digital Ocean and GitHub (not sponsored) like the article title implies, but you can also use Linode and GitLab or other tools for these concepts.

If you don’t currently have a Digital Ocean account use this link to get extra credits, it doesn’t support me, but it does support Destination Linux, which is a podcast I like.

Hugo
Git

on Fedora Linux you can run:

sudo dnf install git hugo

and same with apt on the Debian derivatives, you know the drill.

Create Your Site

Now that the installation is taken care of, navigate to your desired directory, mine is ~/hugo:

mkdir ~/hugo
cd ~/hugo
hugo new site mydomain.com
cd mydomain.com
git init

don’t close this window just yet, we’ll be right back here

on Windows use these commands instead:

cd %userprofile%
mkdir hugo
cd hugo
hugo new site mydomain.com
cd mydomain.com
git init

don’t close this window just yet, we’ll be right back here

replace mydomain.com with your own domain name, and if you do not already own a Domain I recommend GoDaddy, not sponsored. The reason I recommend them is due to the ease of use in their dashboard. We’ll get to the steps of getting a Domain if you don’t already have one, but first we need to build our site locally and make it our own!

You’ll have noticed this particular bit of output when you ran the hugo new site command:

we’ll be adding a theme next but firstly let’s just see what we have going so far by running:

hugo server

this is my actual local development server for this site which is why my numbers are not set lower to 0 like a new site would be

The Local Server Is Now Running

don’t exit this window, but do note that near the end of the output, there is a line that reads:

Web Server is available at http://localhost:1313/

on Linux you can Ctrl+LeftClick to open the link in your web browser, and on Windows CMD you have to highlight the text and Right Click to copy the text, then paste that link into your web browser URL.

If all goes accordingly you should now be staring at a blank white screen… That’s not what we want our site to look like, but we’re about to change it. And before we go changing things we want to start adding things to our local git Repo to be later pushed to github.

We’ve already initialized our website directory as a git repo when we ran the above command git init so now we can add git submodules to our repo. To do this firstly we need to figure out which theme we want to add. Go to this site to browse the official themes list:

https://themes.gohugo.io/

This Site is Built with Hugo and Digital Ocean

Just like this article goes on to explain how to do, but before we can go on to host the site, we have to have it looking like we want it. The first step in any Hugo site was just done, creating the site, but next we need to serve the site locally so we can see our changes as we make them, and most importantly before anyone else can. I’ve landed on Terminal for my theme on this website, but want to use a Resume theme for one and a blog theme for another. To use any theme from https://themes.gohugo.io/ select the Download button and you’ll be taken to a GitHub page.

A Few Theme Options

I’m going to show a few different variations of websites, but by this point you should be following your own theme’s instructions. If you want to follow any of these themes, then we’ll continue. Otherwise meet me back here once your theme is installed and we’ll go through the GitHub and Digital Ocean steps down below

Now go back to your terminal window and use Ctrl+C to end the server instance so we can add our theme. Once the server stopped and you can type again follow the instructions on your theme’s GitHub page. If you’re following with this theme the following steps are from its GitHub:

Option #1: Resume Site

For this part I’ll be using the Simple CV Theme. Once you’ve made your way to your selected theme’s GitHub page

git submodule add https://github.com/hootan09/simple-cv.git themes/simple-cv

and copy in the example site information from the theme

cp -a themes/simple-cv/exampleSite/. .

and run:

hugo server

when going back to http://localhost:1313/ you should see the Author’s CV is what’s here by default, but now you can go on to edit everything that was copied from the theme, which are the following:

├── config.toml
├── data
│   ├── content.yaml
│   └── fa
│       └── content.yaml
└── static
    └── img
        └── avatar.jpg

Edit these files to your liking and skip the blog section for the next set of instructions!

Option #2: Blog Site

So I also want to go through the steps of getting a blog website up too

For this I’ll be using the hugo-paper theme

https://github.com/nanxiaobei/hugo-paper

git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

and copy this into your config.toml:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # use disqus comments

[params]
  # color style
  color = 'linen'                           # linen, wheat, gray, light

  # header social icons
  twitter = 'YOUR_TWITTER_ID'               # twitter.com/YOUR_TWITTER_ID
  github = 'YOUR_GITHUB_ID'                 # github.com/YOUR_GITHUB_ID
  instagram = 'YOUR_INSTAGRAM_ID'           # instagram.com/YOUR_INSTAGRAM_ID
  mastodon = 'YOUR_MASTODON_LINK'           # e.g. 'https://mastodon.instance/@xxx'
  rss = true                                # show rss icon

  # home page profile
  avatar = 'GRAVATAR_EMAIL'                 # gravatar email or image url
  name = 'YOUR_NAME'
  bio = 'YOUR_BIO'


  # misc
  disableHLJS = true                        # disable highlight.js
  monoDarkIcon = true                       # show monochrome dark mode icon
  gravatarCdn = 'GRAVATAR_CDN_LINK'         # e.g. 'https://cdn.v2ex.com/gravatar/'
  graphCommentId = "YOUR_GRAPH_COMMENT_ID"  # use graph comment (disqus alternative)

and replace the the personal information with your info.

and also I always make sure to go into archetypes/default.md and replace draft: true to draft: false:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---

so that the next command will populate the page as soon as its created, and when I want to create a draft I’ll switch it back off on a page-by-page basis.

now one last thing, we do need to add a post, and the way I like to do this is the following:

hugo new posts/my-first-post/index.md

this creates a new index.md file at content/posts/my-first-post/index.md and anything you create in this folder can be accessed by that index.md file, so I went ahead and created an images folder here too:

mkdir content/posts/my-first-post/images

and I copied my old discord avatar in as a test.png there.

As for the index.md that was created, in this example all I added was:

---
title: "My First Post"
date: 2023-01-16T15:55:59-06:00
draft: false
---

# This is the header

![Here's an Image](images/test.png)

make sure your server is running by this point:

hugo server

and you’ll see something like:

Other Options

There are many styles of Hugo Sites and they all have a slightly different setup process, but they all follow a general set of instructions. As you dig deeper the file hierarchy will make more sense!

Hosting Your Site

If this is your first time purchasing a domain take note that we will not need to purchase anything extra from GoDaddy besides the domain name. All of our storage and name resolution will take place on Digital Ocean’s servers. Your price should not be more than your advertised domain cost for this type of website.

on GoDaddy now that you have your domain and you’re logged into your account, you’ll have a lot of options, but the only one you need to worry about for the lifetime of this site is going to the GoDaddy Dashboard and beside your domain name click DNS and scroll down to the Nameservers section.

Select the Change button and replace each of the nameservers with:

Select the tiny font at the bottom:

Enter my own nameservers (Advanced)

Place the following Nameserver Domains into the fields like the picture shows:
ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

One of the major hurdles in Getting Started with GitHub is setting up your SSH key, and if you’ve never done that before the official documentation is the best place to go for information, however I will attempt to recap the steps required here:

on all platforms you should have access to the ssh-keygen command, but in case you’re having issues running the commands maybe try an application from this list, I recommend PuTTY which comes with an application called PuTTYgen but the usage of that tool is beyond the scope of this article.

open a terminal or command prompt on windows and use the following commands to get your desired key pair:

ssh-keygen -t ed25519 -C "your_email@example.com"

use the email address you used to sign up with GitHub

usually the defaults are okay, press enter a few times, and make sure that you enter a password for your safety.

and add it to the keyring:

ssh-add ~/.ssh/id_ed25519

on Windows the path is typically C:\Users\USERNAME\.ssh\ so you’d run:

ssh-add C:\Users\USERNAME\.ssh\id_ed25519

replace USERNAME with your profile name on Windows

now open your ~/.ssh/id_ed25519.pub file in a text editor and copy the contents into the GitHub Textbox and assign it a name of your choice

After Your Site is Up and Running and Your GitHub Key is Linked

and you’ve edited the personal information to your liking

While you’re still on GitHub go ahead and create the repo, without initializing it, we’ve already done that locally. We just need to have get a link to this repo.

Follow the steps you’re presented with:

Don’t worry about copying the link from the top of the final page, but remember your username and your repository name for the next step:

and you can issue the following commands:

git remote add origin git@github.com:USERNAME/REPOSITORY.git
git add .
git commit -m "initial commit"
git push origin master

Replace USERNAME and REPOSITORY with your GitHub username and the repo you want to publish

and when you’re finished you’ll be able to go back to that final page and see that it’s been updated with something similar to:

Now that our site is set to use Digital Ocean’s Nameservers let’s go over to our Digital Ocean Dashboard and get our App set up!

be sure that if you don’t have an account you take advantage of some free credit

once we’re on the dashboard select the Create App button

Link your Digital Ocean account from here with your GitHub, and it will present the repo to your site in the dropdown. If you don’t see it for some reason, unlink and re-link your account. I actually had to do that the first time.

Select your branch either main or master and leave the source directory / and autodeploy checked

You’re welcome to rename your deployment, but everything else can be left as default and you should be able to run on a starter plan for Apps as of this point in time which will only cost $1.00/mo

After everything looks good hit Create Resources and you should be able to go back to your Digital Ocean Dashboard and the domain management should prompt you near the top of the dashboard to enter your domain, and Digital Ocean will handle the DNS routes for you.

By the end of the process you should have a deployment linked to your GitHub posts

To Add More Posts

hugo new posts/name-of-your-new-post/index.md
mkdir posts/name-of-your-new-post/images

to remove any posts just delete the folder
to rename a post just rename the folder

If You’re New to Markdown

check out the Markdown Guide

and also check out the source files for this website

Building a Triangle with Vulkan and C++ in Fedora 37

Sat, 14 Jan 2023 18:23:21 -0600

Beginning the Journey

I’ve been looking at Vulkan from afar for 6 months while I honed my C++ skills and worked through SFML, GLFW, and OpenGL, along with a few windowing frameworks like ImGui and GTK3, but all of that work just barely prepared me for this most arduous of tasks… The legendary Vulkan Triangle! Settle in, this is going to take some time to even read through, let alone work through!

I sat down about ~~8 hours ago~~ yesterday, now at the time of finishing the post, thinking this might not be so bad, and in some ways it’s not that bad, but comparing it to everything I’ve done till now, it is the hardest thing I’ve had to comprehend in programming. What makes a Triangle less than simple in Vulkan is that by simply starting a Vulkan project you’re signing up for plenty of up-front thinking through the architecture of what you’re building as well as filling in the fields that Vulkan expects of Graphical Applications both small and massive. The tried and true OpenGL was pretty dang quick to get up and running and gave you a sense of “I can do this!”, but then at every turn there was something to add to your API, and if you didn’t know it was coming it could derail your project to the point of no return. Having gone through a few of the stumbling points with OpenGL I had some idea of what I was getting into with Vulkan, but not nearly enough to think twice about sitting down with it tonight. TL;DR: Vulkan forces you to double check your vision before stepping into the pitfalls you’ll surely encounter with OpenGL.

All of the content from this post summarizes the first 6 videos of Brendan Galea’s Vulkan Game Engine YouTube Series.

Pre-requisites

This must be the longest list of pre-requisites I’ve seen in a post, let-alone a post I wrote, but it’s all of the things you need to get going on Fedora Linux version 37 at the time of writing this.

The Material

I didn’t set out to follow a tutorial, but I absolutely had to, and everyone recommended Brendan Galea’s Vulkan Game Engine Tutorial over the last few months of casually looking into this. I decided that it was going to be the quickest way to get up and running in a manner that would allow me to continue learning and would align with my overall plans for Vulkan, which is to incorporate it into an game engine for myself to learn with.

I’m going to use Brendan’s tutorial as reference for some of the points I talk about, but mostly I’m going to make his process more specific to Linux and even more specifically Fedora. Fedora makes for a great workstation, so that’s where I’ve been spending my last few months.

Download These And Make Edits Accordingly

Brendan has 4 files hosted that you’ll need to download and follow his short instructions on what to change in those files, these links will take you to the timestamp in the videos, as well as to the download location within the description of the videos.

VulkanSDK

The biggest thing to get going up front is to Download the VulkanSDK and get it properly set up in your environment for use with glslc.

When you get the SDK - SDK Installer vulkansdk-linux-x86_64-1.3.236.0.tar.gz (at the time of writing this) file downloaded, follow the next few commands to get the ball rolling on this setup process. NOTE: There’s a script in the tar archive that is supposed to make it easy to install, but it didn’t work for me, so I created a new directory at ~/VulkanSDK and moved our tar into it:

mkdir ~/VulkanSDK
cd ~/VulkanSDK
tar -xzvf vulkansdk-linux-x86_64-1.3.236.0.tar.gz
cd 1.3.236.0/x86_64
pwd

pwd will output the path you’ll need for the $VULKAN_SDK environment variable

/home/USERNAME/VulkanSDK/1.3.236.0/x86_64

From there you can copy that path and use it for the following instructions.
since most people are using BASH I’ll post the instructions for that first,
but I’ll go into detail about the fish solution as well!

export VULKAN_SDK="/home/USERNAME/VulkanSDK/1.3.236.0/x86_64/"
export PATH="$VULKAN_SDK/bin:$PATH"

Run those in your terminal to add them temporarily, or add them to your ~/.bashrc or ~/.bash_profile or somewhere else you can think of.

Next up the solution that Fish Shell users have to live with:

set -gx VULKAN_SDK "/home/USERNAME/VulkanSDK/1.3.236.0/x86_64/"
fish_add_path $VULKAN_SDK/bin/

those are now added permenantly to your path, you can overwrite them them with the same command if you make a typo, or clear them entirely with another set command.

You should now be able to run `glslc`

test this by issuing a simple:

glslc --version

and you should see:

shaderc v2022.4 v2022.4
spirv-tools v2022.5-dev v2022.4-28-gd9446130
glslang 11.1.0-605-g728c6895

Target: SPIR-V 1.0

DNF

Now that the manual setup is out of the way is out of the way it’s time to get our development environment up and going!

dnf all the things!

sudo dnf install \
    @"Development Tools" \
    vulkan-headers \
    vulkan-loader-devel \
    vulkan-tools \
    vulkan-validation-layers \
    vulkan-devel \
    libcxx-devel \
    libcxx \
    glm-devel \
    cmake \
    libpng-devel \
    wayland-devel \
    libpciaccess-devel \
    libX11-devel \
    libXpresent \
    libxcb \
    xcb-util \
    libxcb-devel \
    libXrandr-devel \
    xcb-util-keysyms-devel \
    xcb-util-wm-devel \
    python3 \
    git \
    lz4-devel \
    libzstd-devel \
    python3-distutils-extra \
    qt \
    gcc-g++ \
    wayland-protocols-devel \
    ninja-build \
    python3-jsonschema \
    qt5-qtbase-devel \
    qt \
    xinput \
    libXinerama

CMake

My preferred build generator is CMake even with its blemishes. I’ve used a few dirty tricks to get this going quickly.

`CmakeLists.txt`

# CMakeLists.txt

cmake_minimum_required(VERSION 3.25)
project(Vulkan-Starter)

# Set C++ standard to a proper standard
set(CMAKE_CXX_STANDARD 20)

# Add the GLFW and Vulkan libraries
find_package(glfw3 REQUIRED)
find_package(Vulkan REQUIRED)
find_package(glm REQUIRED)

# Copy contents of src/shaders to the binary location
add_custom_target(copy_assets
    COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_CURRENT_LIST_DIR}/src/shaders
    ${CMAKE_CURRENT_BINARY_DIR}/src/shaders
)

# Dirty way to add all source files in the ./src directory
file(GLOB_RECURSE SRC_FILES "src/*.cpp")

# Create the executable
add_executable(Vulkan-Starter ${SRC_FILES})

# Link our executable against the libraries
target_link_libraries(Vulkan-Starter glfw)
target_link_libraries(Vulkan-Starter Vulkan::Vulkan)
target_link_libraries(Vulkan-Starter glm::glm)
add_dependencies(Vulkan-Starter copy_assets)

A CMakeLists.txt file is used to configure C and C++ projects with CMake, ours is called “Vulkan-Starter”.

This config sets the C++ standard to version 20, which is the latest version of C++ for now! I’m impatiently waiting for C++23 this year!
We’ll use the find_package command to locate and include the GLFW, Vulkan and GLM libraries, which are required for the project.
Create a custom target that I’ve named copy_assets which copies the contents of the src/shaders directory to the binary directory, the directory where the executable gets built.
I opted to use file(GLOB_RECURSE SRC_FILES "src/*.cpp") to add all source files in the src/ directory to the SRC_FILES variable… This is not a recommended option for modern CMake, but it does work, and before release you’d want to do a full revamp on the CMakeLists.txt file anyway.
Finally we create an executable called Vulkan-Starter using the add_executable command and links it against the GLFW, Vulkan, and GLM libraries using the target_link_libraries command.
The way that assets are handled is with a dependency between the executable and the custom target copy_assets using the add_dependencies command so that the assets are copied before the executable is built.

Testing Vulkan

This file can be copied to use as a test for your environment. If you don’t have any errors then you’re ready to move on!

`main.cpp`

// main.cpp

#define GLFW_INCLUDE_VULKAN
#include "GLFW/glfw3.h"

#define GLM_FORCE_RADIANS
#define GLM_FORCE_DEPTH_ZERO_TO_ONE
#include "glm/mat4x4.hpp"
#include "glm/vec4.hpp"
#include <iostream>

int main()
{
    glfwInit();
    glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
    GLFWwindow* window = glfwCreateWindow(800, 600, "Vulkan Window", nullptr, nullptr);

    uint32_t extensionCount = 0;
    vkEnumerateInstanceExtensionProperties(nullptr, &extensionCount, nullptr);

    std::cout << extensionCount << " extensions supported\n";

    glm::mat4 matrix;
    glm::vec4 vec;

    auto test = matrix * vec;

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();
    }

    glfwDestroyWindow(window);

    glfwTerminate();

    return 0;
}

This is just a simple introduction to the world of Vulkan graphics programming! Ultimately this file should open a GLFW window.

Our entrypoint starts by initializing the GLFW library, which we use to create a window that will serve as the canvas for our Vulkan graphics. We then specify that we want to use the Vulkan client API, and create a window with a width of 800 pixels, a height of 600 pixels, and the title “Vulkan Window”.
Next, we use the vkEnumerateInstanceExtensionProperties function to determine the number of extensions supported by the current system. This information is then output to the console. My number was 20, but yours could be anything depending on your machine.
We also utilize the GLM library for some matrix and vector operations, specifically creating a 4x4 matrix and a 4-element vector, and then performing a matrix-vector multiplication.
Finally, we enter a loop that repeatedly polls for events and continues running as long as the window remains open. Once the window is closed, we clean up by destroying the window and shutting down GLFW.
Overall, this program serves as a basic introduction to some key concepts and libraries in the world of Vulkan programming, and is a great starting point for our upcoming triangle.

The Starting Line

SPIR-V is the format that Vulkan expects for our shaders which is why we had to download VulkanSDK and get glslc added to the path The CMakeLists.txt sets up everything our project will need
and the main.cpp file utilizes GLFW to create a Window and logs the number of extensions supported by vkEnumerateInstanceExtensionProperties
which in my case is 20 extensions supported and is the only use for this file.
Since the purpose of this main.cpp was to simply test our installation you may now remove all of the code from it and follow along with Brendan Galea’s Vulkan Game Engine Tutorial series on YouTube

Let’s Make Some Moves!

Getting a window up and running with Vulkan is exactly the same as it would be with OpenGL and GLFW. I am very glad to have had a chance to play with GLFW when I did to smooth out this process!

I always prefer to start from the last file written and work my way backwards to the first. It usually layers properly in my brain that way, so we’ll be starting with first_app.cpp and work our way backwards ending with main.cpp.

Code Notes

anything you see that has jde or Jde is something that I changed, and is something that YOU can also change! In the videos you’ll notice these are originally lve and Lve but you should change these to something for yourself as it helps with the learning process.
every translation unit is namespaced with jde which was also originally lve in the tutorial

we’re starting with a small directory structure that will just create a GLFW window:

├── CMakeLists.txt                      BUILDS PROJECT
└── src
    ├── first_app.cpp                   
    ├── first_app.hpp                   CLASS "FirstApp"
    ├── jde_window.cpp                  
    ├── jde_window.hpp                  CLASS "JdeWindow"
    └── main.cpp                        ENTRY POINT

remember it’s totally encouraged to change anything named jde or Jde to your liking, but the two are case sensitve!

Starting The Vulkan Window

The `FirstApp` Class

calls FirstApp::run() in the jde namespace which contains a while loop that repeatedly calls glfwPollEvents() until the jdeWindow member variable of the FirstApp class returns true for the shouldClose() method. This is our Game Loop.

`first_app.cpp`

// first_app.cpp

#include "first_app.hpp"

namespace jde {

    void FirstApp::run()
    {
        while (!jdeWindow.shouldClose())
        {
            glfwPollEvents();
        }
    }
}

`first_app.hpp`

// first_app.hpp

#pragma once

#include "jde_window.hpp"

namespace jde {

    class FirstApp {
    public:
        static constexpr int WIDTH = 800;
        static constexpr int HEIGHT = 600;
        void run();
    private:
        JdeWindow jdeWindow{WIDTH, HEIGHT, "Hello Vulkan!"};
    };
}

note that we are including jde_window.hpp in the header in this file; the header for our FirstApp class in the jde namespace. This is where we define the WIDTH and HEIGHT of the application as static constexpr int, and at a resolution of 800x600. Finally the private method jdeWindow is initialized with our height and width when run() is called and our game loop begins;

The `JdeWindow` Class

`jde_window.hpp`

#pragma once

#define GLFW_INCLUDE_VULKAN
#include <GLFW/glfw3.h>
#include <string>

namespace jde {
    class JdeWindow {
    public:
        JdeWindow(int w, int h, std::string name);
        ~JdeWindow();
        JdeWindow(const JdeWindow &) = delete;
        JdeWindow &operator=(const JdeWindow &) = delete;

        bool shouldClose() {
            return glfwWindowShouldClose(window);
        }
    private:
        void initWindow();

        const int width;
        const int height;

        std::string windowName;
        GLFWwindow *window;
    };
}

this is our window class JdeWindow, its constructor takes a w, h, and a name which are used to initialize the width, height, and name of the window. We properly handle the available constructors, and the destructor destroys the window and terminates GLFW. The class has deleted copy constructor and copy assignment operator, which means that instances of this class cannot be copied. This is where our game loop is requested to terminate. JdeWindow has a public method called shouldClose(), which returns a bool indicating whether the window has been closed or not. Finally there is also one private method initWindow() that actually initializes the window. The private variables store width, height, and the name of the GLFW window.

`jde_window.cpp`

// jde_window.cpp

#include "jde_window.hpp"

namespace jde {

    JdeWindow::JdeWindow(int w, int h, std::string name):
        width{w}, height{h}, windowName{name}
    {
        initWindow();
    }

    JdeWindow::~JdeWindow()
    {
        glfwDestroyWindow(window);
        glfwTerminate();
    }

    void JdeWindow::initWindow()
    {
        glfwInit();
        glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
        glfwWindowHint(GLFW_RESIZABLE, GLFW_FALSE);

        window = glfwCreateWindow(width, height, windowName.c_str(), nullptr, nullptr);
    }
}

jde_window.cpp code starts by including the jde_window.hpp header file, which contains declarations for the JdeWindow class.
our namespace jde is defined.
The JdeWindow class is defined, which has a constructor that takes in three parameters: width, height, and a string name.
In the constructor, the input parameters are assigned to the member variables of the class. Then the function initWindow() is called.
A destructor is defined, which is called when the JdeWindow object is destroyed. It destroys the window and terminates GLFW.
The initWindow() function is defined, which initializes GLFW and sets some window hints.
The GLFW library is initialized.
The GLFW_CLIENT_API hint is set to GLFW_NO_API to indicate that no graphics API is used
The GLFW_RESIZABLE hint is set to GLFW_FALSE to indicate that the window is not resizable
A window is created with the specified width, height and name.
The window pointer is assigned to the window member variable.

Making Entry in `main.cpp`!

We now get to hit the run() command we saw very first! This is the main() function of the application, which is the entry point of our window!

#include "first_app.hpp"

#include <cstdlib>
#include <iostream>
#include <stdexcept>

int main()
{
    jde::FirstApp app{};

    try {
        app.run();
    } catch (const std::exception &e) {
        std::cerr << e.what() << '\n';
        return EXIT_FAILURE;
    }

    return EXIT_SUCCESS;
}

Our entrypoint creates an instance of our FirstApp class, which was defined in first_app.hpp, and calls run(); which is responsible for executing our main loop aka game loop, which just keeps running as long as the window is open. This loop keeps running as long as the window is open, by polling the events from the window. I like to use the powerful C++ standard when I can and haven’t had the opportunity to use try-catch blocks in a real-world application yet, so this tutorial has me happy for that. The main function also includes a try-catch block that catches any exceptions that are thrown by the run() method. If an exception is caught, the error message is printed to the standard error output and the program exits with the failure status code: EXIT_FAILURE; otherwise, if the program exits without an exception, it will return the EXIT_SUCCESS status code.

Opening the Window to the World of Vulkan!

Run the following CMake command if you’re not using something like Emacs or VS Code:

cmake -B ./build -S .

and you should see around the same output as:

-- The C compiler identification is GNU 12.2.1
-- The CXX compiler identification is GNU 12.2.1
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: /usr/bin/cc - skipped
-- Detecting C compile features
-- Detecting C compile features - done
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: /usr/bin/c++ - skipped
-- Detecting CXX compile features
-- Detecting CXX compile features - done
-- Found Vulkan: /lib64/libvulkan.so (found version "1.3.216") found components: glslc glslangValidator 
-- Configuring done
-- Generating done
-- Build files have been written to: /home/mac/Documents/Projects/C++/Vulkan/build

changing into the build directory and issuing a make command is next:

cd build
make

or I found that you can run make from anywhere using the -C flag make -C build
in any case you should see something similar to the following output:

[  0%] Built target copy_assets
[ 14%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/first_app.cpp.o
[ 28%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_device.cpp.o
[ 42%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_pipeline.cpp.o
[ 57%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_swap_chain.cpp.o
[ 71%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_window.cpp.o
[ 85%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/main.cpp.o
[100%] Linking CXX executable Vulkan-Starter
[100%] Built target Vulkan-Starter

the last line says Built target Vulkan-Starter is what matters, that’s our binary!

now we can change into the build directory, if you’re not already there cd build, and launch our ~~GLFW~~ Vulkan Window!

./Vulkan-Starter

and with any luck you’ll have a fully functional GLFW window that doesn’t immediately exit, but also doesn’t do anything!

Unfortunately That Was the Easy Part

Next we have to build out the entire Vulkan graphics pipeline and an API to interface with the Graphics Card.

image credit to Brendan Galea - Vulkan Game Engine Tutorial 2

Directory Structure for the Vulkan Triangle

You’ll need to download these 4 files if you haven’t grabbed them yet!

lve_device.cpp & lve_device.hpp
lve_swap_chain.cpp & lve_swap_chain.hpp
if you watch the section of the video he talks about the edits you will need to make to those files! Basically it comes down to the namespace and the first few letters of the class name, and each method of the class.

and create 5 more:

glslc.sh
jde_pipeline.cpp
jde_pipeline.hpp
shaders/simple_shader.frag
shaders/simple_shader.vert

my project directory tree AFTER video #7:

the .spv are the compiled output from glslc which we’re getting to soon

├── CMakeLists.txt                      BUILDS PROJECT
└── src
    ├── first_app.cpp                   
    ├── first_app.hpp                   CLASS "FirstApp"
    ├── glslc.sh                        COMPILES SHADERS
    ├── jde_device.cpp                  
    ├── jde_device.hpp                  CLASS "JdeDevice"
    ├── jde_pipeline.cpp                
    ├── jde_pipeline.hpp                CLASS "JdePipeline"
    ├── jde_swap_chain.cpp              
    ├── jde_swap_chain.hpp              CLASS "JdeSwapChain"
    ├── jde_window.cpp                  
    ├── jde_window.hpp                  CLASS "JdeWindow"
    ├── main.cpp                        ENTRY POINT
    └── shaders
        ├── simple_shader.frag          SPIR-V FRAGMENT SHADER
        ├── simple_shader.frag.spv      COMPILED SPIR-V FROM GLSLC
        ├── simple_shader.vert          SPIR-V VERTEX SHADER
        └── simple_shader.vert.spv      COMPILED SPIR-V FROM GLSLC

One Nice Thing About the Shader Chain

we can really only program two stages of the shader chain in Vulkan, the Vertex Shader and the Fragment Shader, which are right here:

`src/shaders/simple_shader.frag`

is our fragment shader, responsible for determining the color of each pixel on the screen.

#version 450

layout (location =0) out vec4 outColor;

void main()
{
    outColor = vec4(1.0, 1.0, 0.1, 1.0);
}

It defines a single output variable “outColor”, which is a 4-component vector representing the red, green, blue, and alpha (transparency) values of the pixel. In the main function, the outColor variable is set to a fixed value of (1.0, 1.0, 0.1, 1.0), which corresponds to a bright yellow color with full opacity.

`src/shaders/simple_shader.vert`

is our vertex shader, which is responsible for determining the position of each vertex in the 3D space.

#version 450

vec2 positions[3] = vec2[](
    vec2(0.0, -0.5),
    vec2(0.5, 0.5),
    vec2(-0.5, 0.5)
);

void main() {
    gl_Position = vec4(positions[gl_VertexIndex], 0.0, 1.0);
}

It defines an array “positions” of 2D vectors, which represent the coordinates of three vertices. This shader will be used to draw the triangle on the screen using the provided vertex positions.

Shaders Are Done, Now Let’s Compile!

and that’s the last time we’ll have to touch those before we get a Triangle on-screen, but that’s a ways off still. First we now need to utilize our VulkanSDK to run glslc. In the video he uses this script which works just fine in bash, so from fish I’ve just been launching a bash shell to run this src/glslc.sh file:

#!/bin/bash

$VULKAN_SDK/bin/glslc shaders/simple_shader.vert -o shaders/simple_shader.vert.spv
$VULKAN_SDK/bin/glslc shaders/simple_shader.frag -o shaders/simple_shader.frag.spv

Make sure that you change the mode of our file for executuion with chmod:

chmod +x src/glslc.sh

and finally

./src/glslc.sh

should run do the thing

It won’t tell you if you got it right, but glslc complain nicely if something didn’t go right.

if you’re using fish you may as well just go to BASH like I did:

bash ./src/glslc.sh

bash
./src/glslc.sh

to get a full shell environment up. If your environment variables aren’t working, make sure you’ve logged out of your user session since adding anything to your ~/.bashrc or ~/.bash_profile. If it really isn’t working just use the commands from the script as a guide to work through the process manually.

I didn’t go as far as incorporating the shader compilation step into the CMakeLists.txt file’s copy_assets function just yet, but that’s still something I will go on and do. I’ll update this post if/when it happens.

Toward The TRIANGLE!

The GLFW window we wrote is about to get Vulkanized, and this page is going to start looking like GitHub!

As Brendan Stated in the tutorial, there’s a lot of extra boilerplate that gets in the way and does not need to be thought about at this stage. By following the tutorial beyond the point of this triangle example

There are 4 files to download from the tutorial and at very least the namespace will need to be changed to jde in those downloads. It’s not proper etiquate to link directly to those files, and you should watch those parts of the videos anyway to really see what to change in the files.

We’re jumping right to the Tringle BTW, these next couple of files are the only things we still need!

The expanded `first_app.hpp`

#pragma once

#include "jde_window.hpp"
#include "jde_pipeline.hpp"
#include "jde_device.hpp"
#include "jde_swap_chain.hpp"

#include <memory>
#include <vector>

namespace jde {

    class FirstApp {
    public:
        static constexpr int WIDTH = 800;
        static constexpr int HEIGHT = 600;
        
        FirstApp();
        ~FirstApp();

        FirstApp(const FirstApp &) = delete;
        FirstApp &operator=(const FirstApp &) = delete;
        
        void run();

    private:
        void createPipelineLayout();
        void createPipeline();
        void createCommandBuffers();
        void drawFrame();

        JdeWindow jdeWindow{WIDTH, HEIGHT, "Hello Vulkan!"};
        JdeDevice jdeDevice{jdeWindow};
        JdeSwapChain jdeSwapChain{jdeDevice, jdeWindow.getExtent()};
        std::unique_ptr<JdePipeline> jdePipeline;
        VkPipelineLayout pipelineLayout;
        std::vector<VkCommandBuffer> commandBuffers;

    };
}

Our FirstApp class has a default constructor and destructor and a still similar run() method.

The constructor now creates a pipeline layout, pipeline, and command buffers.
The destructor now destroys the pipeline layout.
The run() method is still our main loop in the application, it polls events and now calls the drawFrame method.
The createPipelineLayout method creates a pipeline layout for the pipeline. It sets the layout count and push constant range count to 0 and creates the pipeline layout.
The createPipeline method creates a pipeline and assigns the render pass and pipeline layout to it.
The createCommandBuffers method resizes the command buffers vector to the size of the swap chain images. It allocates command buffers and begins recording them. It sets up a render pass, clears the color and depth values, and binds the pipeline and draws a triangle.
The drawFrame method acquires an image from the swap chain, and begins and ends the command buffer while submitting to the mailbox queue.

and the accompanying translation unit is rather large:

`first_app.cpp` Just Got A Lot Bigger!

#include "first_app.hpp"

#include <stdexcept>
#include <array>

namespace jde {

    FirstApp::FirstApp()
    {
        createPipelineLayout();
        createPipeline();
        createCommandBuffers();
    }

    FirstApp::~FirstApp()
    {
        vkDestroyPipelineLayout(jdeDevice.device(), pipelineLayout, nullptr);
    }

    void FirstApp::run()
    {
        while (!jdeWindow.shouldClose())
        {
            glfwPollEvents();
            drawFrame();
        }
    }

    void FirstApp::createPipelineLayout()
    {
        VkPipelineLayoutCreateInfo pipelineLayoutInfo{};
        pipelineLayoutInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_LAYOUT_CREATE_INFO;
        pipelineLayoutInfo.setLayoutCount = 0;
        pipelineLayoutInfo.pSetLayouts = nullptr;
        pipelineLayoutInfo.pushConstantRangeCount = 0;
        pipelineLayoutInfo.pPushConstantRanges = nullptr;
        if (vkCreatePipelineLayout(jdeDevice.device(), &pipelineLayoutInfo, nullptr, &pipelineLayout) != VK_SUCCESS)
        {
            throw std::runtime_error("failed to create pipeline layout!");
        }
    }

    void FirstApp::createPipeline()
    {
        auto pipelineConfig = JdePipeline::defaultPipelineConfigInfo(jdeSwapChain.width(), jdeSwapChain.height());
        pipelineConfig.renderPass = jdeSwapChain.getRenderPass();
        pipelineConfig.pipelineLayout = pipelineLayout;
        jdePipeline = std::make_unique<JdePipeline>(
            jdeDevice, 
            "src/shaders/simple_shader.vert.spv", 
            "src/shaders/simple_shader.frag.spv", 
            pipelineConfig);
    }

    void FirstApp::createCommandBuffers()
    {
        commandBuffers.resize(jdeSwapChain.imageCount());

        VkCommandBufferAllocateInfo allocInfo{};
        allocInfo.sType = VK_STRUCTURE_TYPE_COMMAND_BUFFER_ALLOCATE_INFO;
        allocInfo.level = VK_COMMAND_BUFFER_LEVEL_PRIMARY;
        allocInfo.commandPool = jdeDevice.getCommandPool();
        allocInfo.commandBufferCount = static_cast<uint32_t>(commandBuffers.size());

        if(vkAllocateCommandBuffers(jdeDevice.device(), &allocInfo, commandBuffers.data())!= VK_SUCCESS)
        {
            throw std::runtime_error("failed to allocate command buffers!");
        }

        for (int i = 0; i < commandBuffers.size(); i++)
        {
            VkCommandBufferBeginInfo beginInfo{};
            beginInfo.sType = VK_STRUCTURE_TYPE_COMMAND_BUFFER_BEGIN_INFO;

            if (vkBeginCommandBuffer(commandBuffers[i], &beginInfo) != VK_SUCCESS)
            {
                throw std::runtime_error("failed to begin recording command buffers!");
            }

            VkRenderPassBeginInfo renderPassInfo{};
            renderPassInfo.sType = VK_STRUCTURE_TYPE_RENDER_PASS_BEGIN_INFO;
            renderPassInfo.renderPass = jdeSwapChain.getRenderPass();
            renderPassInfo.framebuffer = jdeSwapChain.getFrameBuffer(i);

            renderPassInfo.renderArea.offset = {0, 0};
            renderPassInfo.renderArea.extent = jdeSwapChain.getSwapChainExtent();

            std::array<VkClearValue, 2> clearValues{};
            clearValues[0].color = {0.2f, 0.5f, 0.9f, 1.0f};
            clearValues[1].depthStencil = {1.0f, 0};
            renderPassInfo.clearValueCount = static_cast<uint32_t>(clearValues.size());
            renderPassInfo.pClearValues = clearValues.data();

            vkCmdBeginRenderPass(commandBuffers[i], &renderPassInfo, VK_SUBPASS_CONTENTS_INLINE);

            jdePipeline->bind(commandBuffers[i]);
            vkCmdDraw(commandBuffers[i], 3, 1, 0, 0);

            vkCmdEndRenderPass(commandBuffers[i]);
            if (vkEndCommandBuffer(commandBuffers[i]) != VK_SUCCESS)
            {
                throw std::runtime_error("failed to record command buffer");
            }

        }
    }

    void FirstApp::drawFrame()
    {
        uint32_t imageIndex;
        auto result = jdeSwapChain.acquireNextImage(&imageIndex);

        if (result != VK_SUCCESS && result != VK_SUBOPTIMAL_KHR)
        {
            throw std::runtime_error("imageIndex failed to acquire swap chain image!");
        }

        result = jdeSwapChain.submitCommandBuffers(&commandBuffers[imageIndex], &imageIndex);
        if (result != VK_SUCCESS)
        {
            throw std::runtime_error("result failed to acquire swap chain image!");
        }
    }
}

FirstApp constructor:

creates a pipeline layout
creates a pipeline
creates command buffers

FirstApp destructor:

destroys the pipeline layout

FirstApp::run():

enters a loop that polls events and calls the drawFrame method as long as the window is not closed

FirstApp::createPipelineLayout():

creates a pipeline layout with no set layouts or push constant ranges

FirstApp::createPipeline():

creates a pipeline with the render pass and pipeline layout from the JdeSwapChain and JdePipeline classes, and assigns it to the jdePipeline member variable

FirstApp::createCommandBuffers():

resizes the command buffers vector to the number of images in the swap chain allocates command buffers and begins recording them
sets up a render pass, clears the color and depth values, and binds the pipeline and draws a triangle

FirstApp::drawFrame(): acquires an image from the swap chain begins and ends the command buffer and submits it to the mailbox queue

Vulkan Graphics Pipeline Configuration

`jde_pipeline.hpp`

#pragma once

#include "jde_device.hpp"

#include <string>
#include <vector>

namespace jde {

    struct PipelineConfigInfo {
        VkViewport viewport;
        VkRect2D scissor;
        VkPipelineViewportStateCreateInfo viewportInfo;
        VkPipelineInputAssemblyStateCreateInfo inputAssemblyInfo;
        VkPipelineRasterizationStateCreateInfo rasterizationInfo;
        VkPipelineMultisampleStateCreateInfo multisampleInfo;
        VkPipelineColorBlendAttachmentState colorBlendAttachment;
        VkPipelineColorBlendStateCreateInfo colorBlendInfo;
        VkPipelineDepthStencilStateCreateInfo depthStencilInfo;
        VkPipelineLayout pipelineLayout = nullptr;
        VkRenderPass renderPass = nullptr;
        uint32_t subpass = 0;
    };

    class JdePipeline {
        public:
        JdePipeline(
            JdeDevice &device, 
            const std::string& vertFilepath, 
            const std::string& fragFilepath, 
            const PipelineConfigInfo& configInfo);
        ~JdePipeline();
        JdePipeline(const JdePipeline&) = delete;
        void operator=(const JdePipeline&) = delete;

        void bind(VkCommandBuffer commandBuffer);

        static PipelineConfigInfo defaultPipelineConfigInfo(uint32_t width, uint32_t height);

        private:
        
        static std::vector<char> readFile(const std::string& filepath);
        void createGraphicsPipeline(
            const std::string& vertFilepath, 
            const std::string& fragFilepath, 
            const PipelineConfigInfo& configInfo);

        void createShaderModule(const std::vector<char>& code, VkShaderModule* shaderModule);

        // implicitly will outlive any class that depends on it. "aggregation"
        JdeDevice& jdeDevice;
        VkPipeline graphicsPipeline;
        VkShaderModule vertShaderModule;
        VkShaderModule fragShaderModule;
    };
}

This code is defining a class called JdePipeline in the jde namespace. The class has a constructor, destructor, and a function called bind().

The constructor takes in a JdeDevice object, the file paths for a vertex shader and fragment shader, and a PipelineConfigInfo struct.
The destructor will clean up the pipeline and shader modules. The bind() function is used to bind the pipeline to a command buffer.
The JdePipeline class also has a static function called defaultPipelineConfigInfo() that returns a PipelineConfigInfo struct with default values for its member variables.
The class has a private function called createGraphicsPipeline() that creates the pipeline using the provided configuration and shaders.
It also has a private function called createShaderModule() that creates a shader module from the provided code.

The class has a member variable graphicsPipeline of type VkPipeline, which will store the pipeline object.

It also has two member variables of type VkShaderModule, which will store the vertex shader and fragment shader modules.
The class also has a reference to the JdeDevice object, which is passed in through the constructor and is used to interact with the device throughout the lifetime of the pipeline.

and the massive list of groupings of definitions lie ahead:

`jde_pipeline.cpp`

#include "jde_pipeline.hpp"

#include <fstream>
#include <stdexcept>
#include <iostream>
#include <cassert>

namespace jde {

    JdePipeline::JdePipeline(
            JdeDevice &device, 
            const std::string& vertFilepath, 
            const std::string& fragFilepath, 
            const PipelineConfigInfo& configInfo):
            jdeDevice{device}
    {
        createGraphicsPipeline(vertFilepath, fragFilepath, configInfo);
    }

    JdePipeline::~JdePipeline()
    {
        vkDestroyShaderModule(jdeDevice.device(), vertShaderModule, nullptr);
        vkDestroyShaderModule(jdeDevice.device(), fragShaderModule, nullptr);
        vkDestroyPipeline(jdeDevice.device(), graphicsPipeline, nullptr);
    }

    std::vector<char> JdePipeline::readFile(const std::string& filepath)
    {
        std::ifstream file{filepath, std::ios::ate | std::ios::binary};

        if (!file.is_open())
        {
            throw std::runtime_error("failed to open file: " + filepath);
        }

        size_t fileSize = static_cast<size_t>(file.tellg());
        std::vector<char> buffer(fileSize);

        file.seekg(0);
        file.read(buffer.data(), fileSize);

        file.close();
        return buffer;
    }

    void JdePipeline::createGraphicsPipeline(
        const std::string& vertFilepath, 
        const std::string& fragFilepath, 
        const PipelineConfigInfo& configInfo)
    {
        assert(configInfo.pipelineLayout != VK_NULL_HANDLE &&
        "Cannot create graphics pipeline:: no pipelineLayout provided in configInfo");
        assert(configInfo.renderPass != VK_NULL_HANDLE &&
        "Cannot create graphics pipeline:: no pipelineLayout provided in configInfo");
        auto vertCode = readFile(vertFilepath);
        auto fragCode = readFile(fragFilepath);

        createShaderModule(vertCode, &vertShaderModule);
        createShaderModule(fragCode, &fragShaderModule);

        VkPipelineShaderStageCreateInfo shaderStages[2];
        shaderStages[0].sType = VK_STRUCTURE_TYPE_PIPELINE_SHADER_STAGE_CREATE_INFO;
        shaderStages[0].stage = VK_SHADER_STAGE_VERTEX_BIT;
        shaderStages[0].module = vertShaderModule;
        shaderStages[0].pName = "main";
        shaderStages[0].flags = 0;
        shaderStages[0].pNext = nullptr;
        shaderStages[0].pSpecializationInfo = nullptr;

        shaderStages[1].sType = VK_STRUCTURE_TYPE_PIPELINE_SHADER_STAGE_CREATE_INFO;
        shaderStages[1].stage = VK_SHADER_STAGE_FRAGMENT_BIT;
        shaderStages[1].module = fragShaderModule;
        shaderStages[1].pName = "main";
        shaderStages[1].flags = 0;
        shaderStages[1].pNext = nullptr;
        shaderStages[1].pSpecializationInfo = nullptr;

        VkPipelineVertexInputStateCreateInfo vertexInputInfo{};
        vertexInputInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_VERTEX_INPUT_STATE_CREATE_INFO;
        vertexInputInfo.vertexAttributeDescriptionCount = 0;
        vertexInputInfo.vertexBindingDescriptionCount = 0;
        vertexInputInfo.pVertexAttributeDescriptions = nullptr;
        vertexInputInfo.pVertexBindingDescriptions = nullptr;

        VkPipelineViewportStateCreateInfo viewportInfo{};
        viewportInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_VIEWPORT_STATE_CREATE_INFO;
        viewportInfo.viewportCount = 1;
        viewportInfo.pViewports = &configInfo.viewport;
        viewportInfo.scissorCount = 1;
        viewportInfo.pScissors = &configInfo.scissor;

        VkGraphicsPipelineCreateInfo pipelineInfo{};
        pipelineInfo.sType = VK_STRUCTURE_TYPE_GRAPHICS_PIPELINE_CREATE_INFO;
        pipelineInfo.stageCount = 2;
        pipelineInfo.pStages = shaderStages;
        pipelineInfo.pVertexInputState = &vertexInputInfo;
        pipelineInfo.pInputAssemblyState = &configInfo.inputAssemblyInfo;
        pipelineInfo.pViewportState = &viewportInfo;
        pipelineInfo.pRasterizationState = &configInfo.rasterizationInfo;
        pipelineInfo.pMultisampleState = &configInfo.multisampleInfo;

        pipelineInfo.pColorBlendState = &configInfo.colorBlendInfo;
        pipelineInfo.pDepthStencilState = &configInfo.depthStencilInfo;
        pipelineInfo.pDynamicState = nullptr;

        pipelineInfo.layout = configInfo.pipelineLayout;
        pipelineInfo.renderPass = configInfo.renderPass;
        pipelineInfo.subpass = configInfo.subpass;

        pipelineInfo.basePipelineIndex = -1;
        pipelineInfo.basePipelineHandle = VK_NULL_HANDLE;

        if (vkCreateGraphicsPipelines(
            jdeDevice.device(), 
            VK_NULL_HANDLE, 
            1, 
            &pipelineInfo, 
            nullptr, 
            &graphicsPipeline) != VK_SUCCESS)
            {
                throw std::runtime_error("failed to create graphics pipeline");
        }
    }

    void JdePipeline::createShaderModule(const std::vector<char>& code, VkShaderModule* shaderModule)
    {
        VkShaderModuleCreateInfo createInfo{};
        createInfo.sType = VK_STRUCTURE_TYPE_SHADER_MODULE_CREATE_INFO;
        createInfo.codeSize = code.size();
        createInfo.pCode = reinterpret_cast<const uint32_t*>(code.data());

        if (vkCreateShaderModule(jdeDevice.device(), &createInfo, nullptr, shaderModule) != VK_SUCCESS)
        {
            throw std::runtime_error("failed to create shader module");
        }
    }

    void JdePipeline::bind(VkCommandBuffer commandBuffer)
    {
        vkCmdBindPipeline(commandBuffer, VK_PIPELINE_BIND_POINT_GRAPHICS, graphicsPipeline);
    }

    PipelineConfigInfo JdePipeline::defaultPipelineConfigInfo(uint32_t width, uint32_t height)
    {
        PipelineConfigInfo configInfo{};

        configInfo.inputAssemblyInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_INPUT_ASSEMBLY_STATE_CREATE_INFO;
        configInfo.inputAssemblyInfo.topology = VK_PRIMITIVE_TOPOLOGY_TRIANGLE_LIST;
        configInfo.inputAssemblyInfo.primitiveRestartEnable = VK_FALSE;

        configInfo.viewport.x = 0.0f;
        configInfo.viewport.y = 0.0f;
        configInfo.viewport.width = static_cast<float>(width);
        configInfo.viewport.height = static_cast<float>(height);
        configInfo.viewport.minDepth = 0.0f;
        configInfo.viewport.maxDepth = 1.0f;

        configInfo.scissor.offset = {0, 0};
        configInfo.scissor.extent = {width, height};

        configInfo.rasterizationInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_RASTERIZATION_STATE_CREATE_INFO;
        configInfo.rasterizationInfo.depthClampEnable = VK_FALSE;
        configInfo.rasterizationInfo.rasterizerDiscardEnable = VK_FALSE;
        configInfo.rasterizationInfo.polygonMode = VK_POLYGON_MODE_FILL;
        configInfo.rasterizationInfo.lineWidth = 1.0f;
        configInfo.rasterizationInfo.cullMode = VK_CULL_MODE_NONE;
        configInfo.rasterizationInfo.frontFace = VK_FRONT_FACE_CLOCKWISE;
        configInfo.rasterizationInfo.depthBiasEnable = VK_FALSE;
        configInfo.rasterizationInfo.depthBiasConstantFactor = 0.0f;  // Optional
        configInfo.rasterizationInfo.depthBiasClamp = 0.0f;           // Optional
        configInfo.rasterizationInfo.depthBiasSlopeFactor = 0.0f;     // Optional

        configInfo.multisampleInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_MULTISAMPLE_STATE_CREATE_INFO;
        configInfo.multisampleInfo.sampleShadingEnable = VK_FALSE;
        configInfo.multisampleInfo.rasterizationSamples = VK_SAMPLE_COUNT_1_BIT;
        configInfo.multisampleInfo.minSampleShading = 1.0f;           // Optional
        configInfo.multisampleInfo.pSampleMask = nullptr;             // Optional
        configInfo.multisampleInfo.alphaToCoverageEnable = VK_FALSE;  // Optional
        configInfo.multisampleInfo.alphaToOneEnable = VK_FALSE;       // Optional

        configInfo.colorBlendAttachment.colorWriteMask =
            VK_COLOR_COMPONENT_R_BIT | VK_COLOR_COMPONENT_G_BIT | VK_COLOR_COMPONENT_B_BIT |
            VK_COLOR_COMPONENT_A_BIT;
        configInfo.colorBlendAttachment.blendEnable = VK_FALSE;
        configInfo.colorBlendAttachment.srcColorBlendFactor = VK_BLEND_FACTOR_ONE;   // Optional
        configInfo.colorBlendAttachment.dstColorBlendFactor = VK_BLEND_FACTOR_ZERO;  // Optional
        configInfo.colorBlendAttachment.colorBlendOp = VK_BLEND_OP_ADD;              // Optional
        configInfo.colorBlendAttachment.srcAlphaBlendFactor = VK_BLEND_FACTOR_ONE;   // Optional
        configInfo.colorBlendAttachment.dstAlphaBlendFactor = VK_BLEND_FACTOR_ZERO;  // Optional
        configInfo.colorBlendAttachment.alphaBlendOp = VK_BLEND_OP_ADD;              // Optional

        configInfo.colorBlendInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_COLOR_BLEND_STATE_CREATE_INFO;
        configInfo.colorBlendInfo.logicOpEnable = VK_FALSE;
        configInfo.colorBlendInfo.logicOp = VK_LOGIC_OP_COPY;  // Optional
        configInfo.colorBlendInfo.attachmentCount = 1;
        configInfo.colorBlendInfo.pAttachments = &configInfo.colorBlendAttachment;
        configInfo.colorBlendInfo.blendConstants[0] = 0.0f;  // Optional
        configInfo.colorBlendInfo.blendConstants[1] = 0.0f;  // Optional
        configInfo.colorBlendInfo.blendConstants[2] = 0.0f;  // Optional
        configInfo.colorBlendInfo.blendConstants[3] = 0.0f;  // Optional

        configInfo.depthStencilInfo.sType = VK_STRUCTURE_TYPE_PIPELINE_DEPTH_STENCIL_STATE_CREATE_INFO;
        configInfo.depthStencilInfo.depthTestEnable = VK_TRUE;
        configInfo.depthStencilInfo.depthWriteEnable = VK_TRUE;
        configInfo.depthStencilInfo.depthCompareOp = VK_COMPARE_OP_LESS;
        configInfo.depthStencilInfo.depthBoundsTestEnable = VK_FALSE;
        configInfo.depthStencilInfo.minDepthBounds = 0.0f;  // Optional
        configInfo.depthStencilInfo.maxDepthBounds = 1.0f;  // Optional
        configInfo.depthStencilInfo.stencilTestEnable = VK_FALSE;
        configInfo.depthStencilInfo.front = {};  // Optional
        configInfo.depthStencilInfo.back = {};   // Optional

        return configInfo;
    }
}

The JdePipeline class provides an implementation for creating a graphics pipeline in a Vulkan application.

The constructor takes in a JdeDevice and file paths for vertex shader and fragment shader, as well as a PipelineConfigInfo struct containing information about the pipeline layout and render pass.
The class uses the provided file paths to create and load a vertex and fragment shader module.
It then uses the provided PipelineConfigInfo and the loaded shaders to create the graphics pipeline.
The destructor destroys the shader modules and the pipeline.
The readFile method reads a file and returns the contents as a vector of chars.
The createShaderModule method creates a shader module from a vector of chars.
The createGraphicsPipeline method sets up the pipeline, including specifying the shaders, vertex input, and viewport information.
defaultPipelineConfigInfo is a helper method that returns a PipelineConfigInfo struct with default values for its fields. The method takes in the width and height of the viewport, and sets the viewport and scissor fields accordingly. It also sets default values for the viewportInfo, inputAssemblyInfo, rasterizationInfo, multisampleInfo, colorBlendAttachment, colorBlendInfo, and depthStencilInfo fields.
The pipeline layout and render pass fields are initialized to nullptr, and the subpass field is initialized to 0.
createGraphicsPipeline is the method responsible for creating the graphics pipeline. It takes in the filepaths for the vertex shader and fragment shaders, and a PipelineConfigInfo struct that contains the configuration for the pipeline. The method starts by reading the vertex shader and fragment shaders from the filepaths, and creating shader modules from the code.
It then sets up the shaderStages array with the vertex shader and fragment shader modules, and sets up the vertexInputInfo, viewportInfo, and rasterizationInfo structs with the appropriate values. The multisampleInfo, colorBlendAttachment, colorBlendInfo, and depthStencilInfo structs are also set up with default values.
It then creates the graphics pipeline by calling vkCreateGraphicsPipelines with the appropriate parameters. It also binds the pipeline layout and render pass to the pipeline.

A New And Improved `jde_window.hpp` Window Class

#pragma once

#define GLFW_INCLUDE_VULKAN
#include <GLFW/glfw3.h>
#include <string>

namespace jde {
    
    class JdeWindow {
        public:
        JdeWindow(int w, int h, std::string name);
        ~JdeWindow();

        JdeWindow(const JdeWindow &) = delete;
        JdeWindow &operator=(const JdeWindow &) = delete;

        bool shouldClose() { return glfwWindowShouldClose(window); }
        
        VkExtent2D getExtent() {
            return {
                static_cast<uint32_t>(width), 
                static_cast<uint32_t>(height)
            };
        }

        void createWindowSurface(VkInstance instance, VkSurfaceKHR *surface);

        private:
        void initWindow();

        const int width;
        const int height;

        std::string windowName;
        GLFWwindow *window;
    };
}

We define a class called JdeWindow within the jde namespace.
The JdeWindow class has a constructor that takes in an integer width, an integer height and a string name, it creates a window using GLFW library with the provided width, height and name.
The destructor destroys the window, and a copy constructor and assignment operator that have been deleted to prevent object copying.
The shouldClose() public method returns a boolean indicating whether the window has been marked as closed by the user or not, it uses GLFW library to check the status of the window.
The getExtent public method returns the size of the window as a VkExtent2D struct, which is a struct that contains the width and height of an area.
There is also a method called createWindowSurface that creates a window surface and assigns it to the provided pointer, it takes in a VkInstance and a pointer to a VkSurfaceKHR.
The class also has a private method called initWindow() which initializes the window using GLFW library. It has several private member variables including width, height, windowName and window which are used to store information about the window.

and the final piece to our triangular puzzle..!

`jde_window.cpp`

#include "jde_window.hpp"

#include <stdexcept>

namespace jde {

    JdeWindow::JdeWindow(int w, int h, std::string name):
        width{w}, height{h}, windowName{name}
    {
        initWindow();
    }

    JdeWindow::~JdeWindow()
    {
        glfwDestroyWindow(window);
        glfwTerminate();
    }

    void JdeWindow::initWindow()
    {
        glfwInit();
        glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
        glfwWindowHint(GLFW_RESIZABLE, GLFW_FALSE);

        window = glfwCreateWindow(width, height, windowName.c_str(), nullptr, nullptr);
    }

    void JdeWindow::createWindowSurface(VkInstance instance, VkSurfaceKHR *surface)
    {
        if (glfwCreateWindowSurface(instance, window, nullptr, surface) != VK_SUCCESS)
        {
            throw std::runtime_error("failed to create window surface");
        }
    }
}

The JdeWindow class creates a GLFW window with a specified width, height, and name. The initWindow() method is called in the constructor to initialize the GLFW library and create the window with the given width, height, and name.
It has a destructor that destroys the window and terminates GLFW.
The shouldClose() method returns a boolean indicating whether the window should be closed or not.
The getExtent() method returns a VkExtent2D struct with the width and height of the window.
The createWindowSurface method creates a VkSurfaceKHR for the window by calling glfwCreateWindowSurface, passing in the VkInstance, the GLFWwindow, and a nullptr for the allocation callbacks. If the return value is not VK_SUCCESS, it throws a runtime error “failed to create window surface.”

And Finally Repeat The Build Steps From Before

Run the following CMake command if you’re not using something like Emacs or VS Code:

cmake -B ./build -S .

and you should see around the same output as:

-- The C compiler identification is GNU 12.2.1
-- The CXX compiler identification is GNU 12.2.1
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: /usr/bin/cc - skipped
-- Detecting C compile features
-- Detecting C compile features - done
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: /usr/bin/c++ - skipped
-- Detecting CXX compile features
-- Detecting CXX compile features - done
-- Found Vulkan: /lib64/libvulkan.so (found version "1.3.216") found components: glslc glslangValidator 
-- Configuring done
-- Generating done
-- Build files have been written to: /home/mac/Documents/Projects/C++/Vulkan/build

change into the build directory and issue a make command:

cd build
make

or I found that you can run make from anywhere using the -C flag make -C build
in any case you should see something similar to the following output:

[  0%] Built target copy_assets
[ 14%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/first_app.cpp.o
[ 28%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_device.cpp.o
[ 42%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_pipeline.cpp.o
[ 57%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_swap_chain.cpp.o
[ 71%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/jde_window.cpp.o
[ 85%] Building CXX object CMakeFiles/Vulkan-Starter.dir/src/main.cpp.o
[100%] Linking CXX executable Vulkan-Starter
[100%] Built target Vulkan-Starter

the last line says Built target Vulkan-Starter is what matters, that’s our binary!

LAUNCH THAT TRIANGLE!

./build/Vulkan-Starter

Using GraphQL and Express.js to Query Users from a MySQL Database

Mon, 09 Jan 2023 20:54:30 -0600

Starting with the Why?

We’ll get into what exactly these technologies are, but first I want to explain the reasoning behind my steps in this demonstration. I’m setting out to build a rich GraphQL API and I’ve never done that before. I’ve watched some videos, read some docs, and I worked through the following steps. Before it’s lost to sleep I’m writing it all down to come back to! I hope this piques your interest!

So then let’s start by defining what each of the technologies are that we’ll be using?

GraphQL is “a query language for your API” which is a way to ask for specific information from a server. You can use it to get just the data that you need. Think of GraphQL like like asking a librarian for a specific book, it provides a common interface between the client and the server for data fetching and manipulations. In this demo we use it to get two users named John and Jane.

Node.js is a programming language that lets you run JavaScript on your computer instead of just in a web browser.

NPM stands for “Node Package Manager”. It’s a Package Manager for Javascript that helps developers share and reuse code. It also helps easily install, update, and use these packages. It is used in conjunction with Node.js, which is a runtime environment that allows developers to run JavaScript on the server-side (as opposed to the client-side, which is what happens in a web browser).

Express.js is a popular web framework for building web applications in Node.js. It provides a set of features and functionality to make it easier to build and deploy web applications using Node.js. It allows developers to set up routes, handle HTTP requests and responses, and connect to databases, among other things. It is often used in conjunction with other tools and libraries, such as GraphQL, to build powerful and scalable web applications.

GraphiQL is an in-browser tool for testing and developing GraphQL APIs. It allows developers to send GraphQL queries and mutations to the server and see the results in real-time, as well as see documentation for available fields and their arguments. This makes it a useful tool for exploring and debugging GraphQL APIs.

MariaDB and MySQL are popular open-source database management systems. They allow you to store, organize, and retrieve data in a structured way. MariaDB is a fork of MySQL and is compatible with it, meaning that it can use the same data and run the same applications as MySQL. Both MariaDB and MySQL use the SQL language to interact with the database, which is a standard language for accessing and manipulating databases. They are often used in web development to store and retrieve data for web applications.

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. By doing so, Docker aims to eliminate the “works on my machine” problem.

Podman is a tool used to run and manage containers, which should work in every way that Docker does to my knowlege. It allows developers to easily package and deploy applications in lightweight containers, making it easier to manage and deploy applications in different environments. Podman is a standalone tool, meaning it does not require a daemon to run, making it more secure and efficient than Docker.

Now let’s just dive in, shall we?

Once you have node.js installed and either Docker or Podman up and running you’re ready to insall the NPM dependencies: npm install --save express express-graphql graphql mysql --force

The --save flag tells npm to save these packages as dependencies in your project’s package.json file. This is useful because it allows other people to easily install all of the required dependencies for your project by running npm install, and in this case it is what we are using to install the proper packages to the container image.

The --force flag tells npm to install the packages even if there are conflicts with already-installed packages. This can be useful if you want to overwrite an existing installation of a package. I had package conflicts and this is the dirty way to deal with them.

The real first step is planning…

Let’s stop and think. We are going to set up a GraphQL server using Express.js and connect it to a MariaDB database using the mysql library. There’s a few things to note about that setup going in: First we’re using podman to create two containers, one for our GraphQL app and the other for the MariaDB database; and next the containers will be deployed with podman-compose. There is one caveat that will be brushed over later. I’m manually inserting information into the MariaDB database for this post. It is possible to go on and add something like PhpMyAdmin to manage the database operations.

Copy the following Dockerfile to build out the image that will then be linked in the docker-compose step.

Dockerfile

FROM node:12-slim

# Install MariaDB client
RUN apt-get update && apt-get install -y mariadb-client

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./
RUN npm install

# Copy app source code
COPY . .

# Expose port 4000
EXPOSE 4000

# Run the app
CMD ["npm", "start"]

and run it with the following podman or docker command:
podman build -t my-app -f Dockerfile

Now that we’ve successfully built the image let’s talk about what just happened.

This Dockerfile is used to create a Docker image for a Node.js application that uses MariaDB as a database.

The first line FROM specifies the base image, which is a slim version of Node.js v12.

The next line RUN installs mariadb-client from apt-get, which is a command-line tool used to connect to and interact with MariaDB servers. You probably can just shorten that to apt but I didn’t for some reason.

The WORKDIR directive sets the working directory for the subsequent instructions in our Dockerfile.

The COPY instructions copy the package.json and package-lock.json files from the current directory to the working directory in our image. The RUN instruction then installs the dependencies specified in these files using NPM.

The second COPY instruction copies all files from the current directory to the working directory in our image.

The EXPOSE directive specifies that the application listens on port 4000.

Finally, the CMD instruction specifies the command to run when the image is run as a container. In this case, it runs npm start, which starts our Node.js application.

Next it’s time to set up the GraphQL schema and server files!

We’re going to need just two Javascript files for this project: a server.js and a schema.js

server.js

const express =         require('express');
const { graphqlHTTP } = require('express-graphql');
const mysql =           require('mysql');
const schema =          require('./schema.js');

const pool = mysql.createPool({
    host: process.env.DATABASE_HOST,
    user: process.env.DATABASE_USER,
    password: process.env.DATABASE_PASSWORD,
    database: process.env.DATABASE_NAME,
});

const root = {
    users: () => {
        return new Promise((resolve, reject) => {
            pool.query('SELECT * FROM users', (error, results) => {
                if (error) {
                    reject(error);
                }
                resolve(results);
            });
        });
    },
};

const app = express();

app.use('/graphql', graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
}));

app.listen(4000, () => {
    console.log('Listening for GraphQL requests on http://localhost:4000/graphql');
});

For server.js we pull in the required modules for our app, express, express-graphql, mysql, and our ./schema.js file, and go on to create a promise for the pool.query to pass in the mysql: SELECT * FROM users when GraphQL is asked for Users. Then we set the Environment Variables into the container image The root object contains the resolver functions for the GraphQL API. In this case, there is only one resolver function: users. The users resolver function accepts an args object as an argument, which contains the arguments passed to the user field in the GraphQL query. In this case, the args object contains an id field, which is used to specify the user to retrieve from our database. Then we set app = express() to initialize our express app, and set our endpoint to /graphql and to listen on port 4000. One thing to note is that setting graphiql: true ensures that we can run GraphiQL in the the web browser.

and next up is our Express-GraphQL Schema

schema.js

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
  
`);

module.exports = schema;

For schema.js it pulls in the required graphql module and sets the schema for which GraphQL will be able to query. For our example we have will provide a database that holds a users table with an auto-incrementing id field along with name, and email varchar fields, which looks like this:

+----+------------+------------------+
| id | name       | email            |
+----+------------+------------------+
|  1 | John Doe   | john@example.com |
|  2 | Jane Smith | jane@example.com |
+----+------------+------------------+

Which we haven’t set-up just yet, but we’ll have it up very soon!

Next up is the MariaDB connection

and to do that we’ll set up the final file in our project, the docker-compose.yml file, and here it is:

version: '3'
services:
  db:
    image: mariadb
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: my_database
  app:
    image: my-app:latest
    depends_on:
      - db
    environment:
      DATABASE_HOST: db
      DATABASE_USER: root
      DATABASE_PASSWORD: password
      DATABASE_NAME: my_database
    ports:
      - 4000:4000

This docker-compose.yml file specifically sets up two services, our db and our app. db pulls down the mariadb image from DockerHub and sets that containers Environment Variables for the Database Password and Database. This is just a demo so I’m fine with this password setup. Continuing, app will try to pull an image named my-app if you skipped running the build command prior to this step, again that command is podman build -t my-app -f Dockerfile (and yes I’m tacking the -f on to be explicit, everyone shows the -d command). The depends_on line is the reason we’re using the compose method, it makes it easy to link the containers together. Finally we add four environment variables to app, and set the port on the host:image to 4000:4000.

You’re FINALLY ready to run…

podman-compose up -d
Success!

Now that both of our containers are up and running we can run a:
podman ps to prove it, or if you didn’t have a successful run you may want to check out:
podman ps -a to see if anything has errored. If you have to modify any of the files you can issue a removal of the image with: podman rm -f <hash-of-the-image>
and rebuild the app image using the Dockerfile with:
podman build -t my-app -f Dockerfile
and re-running:
podman-compose up -d

But we’re not done yet!

Now that our containers are up we can check localhost:4000/graphql in a web browser to see that our GraphiQL instance is up and running, but we need to first insert our user information into the database to be retrieved by a GraphQL query. To do that I opted for a raw MySQL method. To follow me through these steps first run:

podman ps
to find your containers name, for me it’s the column at the furthest right, under the header called NAMES like in the above image.

using that name run the following command to start a MySQL connection from within the container:

podman exec -it graphql_db_1 mysql -u root -ppassword

Note that using podman run runs a new container whereas podman exec launches the currently running image!

Now that we’re successfully on the MySQL CLI let’s throw our user data in by issuing the following commands:

USE my_database;

Create the users table

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255)
);

and insert our users into the table

INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');
INSERT INTO users (name, email) VALUES ('Jane Smith', 'jane@example.com');

before we go we can quickly check that we are successfully able to query our table information:

SELECT * FROM users;

at which point you should see the following output:

+----+------------+------------------+
| id | name       | email            |
+----+------------+------------------+
|  1 | John Doe   | john@example.com |
|  2 | Jane Smith | jane@example.com |
+----+------------+------------------+

The Final Stretch!

Now that all of the pieces are in place, and the database is fueled up, let’s run a GraphQL Query!!!

Oh this part is so exciting. I worked for a long time getting it right, but now we should be able to go to localhost:4000/graphql in our browser and punch in the following query:

query {
  users {
    id
    name
    email
  }
}

and if everything goes right for you, you’ll see..!

{
  "data": {
    "users": [
      {
        "id": "1",
        "name": "John Doe",
        "email": "john@example.com"
      },
      {
        "id": "2",
        "name": "Jane Smith",
        "email": "jane@example.com"
      }
    ]
  }
}

This project was quite the journey! Firstly used NPM, the default package manager for Node.js, to install the required dependencies for our app This included the mysql library, which we used to connect to the MariaDB database, and the express-graphql library, which allows us to use GraphQL with Express.js. We really started things off by setting up a Dockerfile to initialize the Node.js container named my-app. Then we created two files server.js, and schema.js to run our Express server which hosts the GraphQL API that we defined that GraphQL schema.js file and finally built and linked in the MariaDB database through a docker-compose.yml configuration. Fueled up our MariaDB with some mock-up users, John and Jane, and used a GraphQL query to pull their info from the database!

Overall, working with Podman and setting up a docker-compose file was a great way to manage the different components of our project and make sure everything was running correctly. And using NPM to install the necessary packages for our server made it easy to get everything set up and running. It was definitely a learning experience, but in the end, we were able to get everything working and have a fully functional GraphQL API!

Building Games With Godot 4 and Other Free Software

Sun, 08 Jan 2023 05:40:47 -0600

Godot 4 Beta 10

Godot is an open source game engine that allows you to create 2D and 3D games. It has a user-friendly interface and a visual scripting system that makes it easy for beginners to get started.

Blender

Blender is a powerful open source software for 3D modeling, animation, and rendering. It has a wide range of features and a comprehensive set of tools for creating detailed 3D models and realistic animations.

Krita

Krita is an open source digital painting and illustration software. It is well-suited for creating concept art, comics, and other 2D art. It has a wide range of brush options and a user-friendly interface.

Laigter

Laigter is a free and open source 3D rendering tool that is designed to be easy to use and provide high-quality results. It is a good choice for beginners looking to create 3D models and animations.

OBS

OBS, or Open Broadcaster Software, is a free and open source software for recording and live streaming video. It is popular for its versatility and wide range of features, making it a good choice for beginners looking to stream their gameplay or other content.

LosslessCut

Lossless-Cut is a free and open source video editor that is designed to be simple to use and provide high-quality results. It is a good choice for beginners looking to edit and trim their video footage.

Openshot

Openshot is a free, open source video editor that is easy to use and packed with features. Whether you are a beginner or an experienced video editor, Openshot has something to offer. With a clean and intuitive interface, it is easy to get started with Openshot. You can import your video and audio files, trim and cut your clips, add transitions and effects, and much more. Plus, with its support for a wide range of file formats, you can work with just about any type of media. Give Openshot a try and see how it can help you bring your video projects to life.

GIMP

GIMP (GNU Image Manipulation Program) is a powerful, open source image editor that is perfect for both beginners and professionals. With a wide range of tools and features, GIMP is well-equipped for tasks such as photo retouching, image composition, and image authoring. Its user-friendly interface makes it easy to get started, and its support for a wide range of file formats means you can work with just about any type of image. Whether you are looking to touch up your photos or create original artwork, GIMP has something to offer. Give it a try and see how it can help you bring your creative vision to life.

*The description headers are hyperlinks to each project’s website *Descriptions provided by ChatGPT

Here’s the quick video I shot for this post

Introduction

I’ve used all of these softwares to varying degrees. Some as long as 15 years (GIMP) others I came across today (Laigter). In this article I will attempt to recap what I believe are the most important parts of DevLogLogan’s tutorial video putting all of the pieces I’ve known together in one package. Though his video is 25 minutes, I paused and followed closely along the way, and by the end of the project I spent just under 3 hours creating and designing and putting all the pieces together for myself; an invaluable experience.

Krita

I had never used Krita for much other than simplistic pixel art until today, and also I didn’t think I’d sign up for texutres.com, but as DevLogLogan mentions, it’s free for 15 downloads every day, and I only used 2 textures. I did however realize that, after using these textures and understanding the methods used within Krita, it’s quite possible I will be attempting my own seamless textures from my personal photo gallery next time which will feel even more unique. In Krita I imported the downloaded textures one at a time to work on them. Some good shortcuts to remember are:

Krita Shortcuts I learned in this project

Shift + w - Tiles the image in all directions
Ctrl + Alt + c - Resize Canvas
Ctrl + Alt + i - Scale to New Size

By using the Clone Brush Preset it’s possible to touch up seam or texture region. select a clone region with Ctrl + Left Mouse Button, resize the regions by Shift + Left Mouse Button + *Moving the mouse around*, and watching the clone region while dragging the seam or texture region.

Laigter

DevLogLogan goes into more detail than I can about Laigter, as I have only discovered it today through his video, however I will describe its usefulness in detail. Laigter is all about generating texture maps. I fed it the exported brick and floor images one at a time. It lets you add a normal map of the image as it would appear in a texture atlas, and I assume it does all kinds of other equally impressive operations.

Back to Krita, but next time I’ll use GIMP for this part

The tutorial at this point uses Krita to create a Texture Atlas to be used in Blender. I found Krita to be combersome for this task, and a more general purpose editor like GIMP would suit me better.

Blender

I’ve used Blender for many projects throughout 2022. Before that I made around a dozen projects in Blender all together. Even with that experience I still found it to be tricky, but I was glad to have the keyboard shortcuts down. I don’t think there was a shortcut I learned from the video which I’ve impressed myself with. I didn’t realize I was getting anywhere until noticing that. I started with a blank scene, added a plane, ensured it was 1m, and from there used edge mode to extrude in 1m increments. I haven’t had much experience with UV editing, but two textures is the perfect thing to get familiarized with the process. All together I made 4 dungeon structures: floor, wall, corner-in, and corner-out and fit the texture properly to the geometry like how it’s shown in the video. Although building the structure in Blender required actually building some kind of structure, it’s required to space each individual geometry out into a lineup to be properly exported. A solid tip is to name each layer “wall-col”, “corner-col”, etc, … for use with Godot (it automatically provides a Trimesh Static Body) .

A “trimesh static body” is a type of object that you can use in a video game or other interactive application. It is made up of a bunch of little flat shapes called “triangles” that are connected together to form a 3D object. This object is called a “trimesh”.

A “static body” is an object that doesn’t move around or change. It just stays in one place. So a “trimesh static body” is an object that is made up of triangles and stays in one place. It might be used to represent things like buildings, trees, or other objects that don’t move in the game.

There’s a ton of stuff I could go on about with this section, but what’s important is that once all the geometry is lined up it needs to be exported as *.glb file extension from Blender to be used with Godot, as seen in the video.

Static body definitions provided by ChatGPT

Godot

I’ve done some work in Godot, but never before 2022. I really like the engine, although I have my complaints that don’t belong in this article. This section of DevLogLogan’s tutorial starts with a World scene with just a plane, and a Player scene (which I made following another one of DevLogLogan’s videos). Adding the glb file was as easy as dragging it into the scenes list in Godot, I followed the prompts to create the resource, and added it to the Grid node to be painted onto the map after configuring the grid size to match with the geometry. This part was fun! Once you get to this point you’re making a game! I spent probably an hour here to be honest. Adding the animations came pretty easily to me for I’ve used the Animation Player for every project in Godot this far. I made my weapon look more like a sword than the video did. One of the more important pieces of setup in Godot is in Project>Project settings. Changing the keymap to WASD and also setting up the video display correctly to stretch from 320x240 up to 720p like it is to give it that retro look.

OBS

I always take a few minutes of video to wind down a project, and OBS makes it easy to screen record just about anything. I set it and just ran around the map jumping and slashing.

LosslessCut

I accidentally recorded trash audio from my room fan in the OBS recording, and LosslesCut makes it easy to add or remove tracks or media segments and concat a new muxed video of the original file. I chopped the OBS views from the video’s beginning and ending, and removed the audio. I was also able to easily grab an image from a keyframe of the video from this tool.

Openshot

I did almost nothing to the file in Openshot, I would usually have added quite a bit more, but this time I ony cropped out the desktop around the video. I recommend Openshot if you don’t already have a video editor. It’s far from the best, but it works for almost everything if you put the time into it.

GIMP

And finally I used GIMP to open the image captured by LosslessCut, crop down the area of the thumbnail and add the 4 logos. I already have a bunch of fonts that make this kind of work come together quickly. My go to technique is to layer everything out, add the similar ones to a group, duplicate that group and flatten it, then go on to use the select by color tool to select the alpha channel of the flat layer. Inverting this selection will yield a nice border to the elements on the canvas. select>selection to path will save this border for future layers. I use this path for two layers, the outline for text, or icons; and as well as a fill layer for the shadow backdrop which I typically offset down and right by holding ctrl with the move tool.

Extra for Godot

The `Player.gd` script in its entirty is as follows:

extends CharacterBody3D

const SPEED = 5.0
const JUMP_VELOCITY = 4.5

# Get the gravity from the project settings to be synced with RigidBody nodes.
var gravity = ProjectSettings.get_setting("physics/3d/default_gravity")

@onready var camera = $Camera3D
@onready var anim_player = $AnimationPlayer
@onready var hitbox = $Camera3D/weaponPivot/weaponMesh/hitbox

func _ready():
	Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED)

func _unhandled_input(event):
	if event is InputEventMouseMotion:
		rotate_y(-event.relative.x * .005)
		camera.rotate_x(-event.relative.y * .005)
		camera.rotation.x = clamp(camera.rotation.x, -(PI/4), PI/4)

func _process(delta):
	if Input.is_action_just_pressed("quit"):
		get_tree().quit()
	if Input.is_action_just_pressed("attack"):
		anim_player.play("attack")
		hitbox.monitoring = true

func _physics_process(delta):
	# Add the gravity.
	if not is_on_floor():
		velocity.y -= gravity * delta

	# Handle Jump.
	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY

	# Get the input direction and handle the movement/deceleration.
	# As good practice, you should replace UI actions with custom gameplay actions. Mapped in Project Settings
	var input_dir = Input.get_vector("left", "right", "forward", "back")
	var direction = (transform.basis * Vector3(input_dir.x, 0, input_dir.y)).normalized()
	if direction:
		velocity.x = direction.x * SPEED
		velocity.z = direction.z * SPEED
	else:
		velocity.x = move_toward(velocity.x, 0, SPEED)
		velocity.z = move_toward(velocity.z, 0, SPEED)

	move_and_slide()


func _on_animation_player_animation_finished(anim_name):
	if anim_name == "attack":
		anim_player.play("idle")
		hitbox.monitoring = false


func _on_hitbox_area_entered(area):
	if area.is_in_group("enemy"):
		area.queue_free()

That was a very fun project! I encourage anyone who wants to make games to just go for it. I thought about it for years before I found I could do it in a few months time!

Angular CLI Up And Running with Docker and Podman

Wed, 04 Jan 2023 23:04:46 -0600

Podman & Docker

Podman is a tool for managing and running containerized applications on Linux and uses a command-line interface to create and manage containers directly, without the need for a daemon process. It can access various container registries, including Docker Hub, to store and distribute images used to create containers.

Docker is a similar tool with its own registry, but it requires a daemon to run in order to work, but also runs on windows. Docker Desktop is a desktop application that provides an easy-to-use development environment for building, testing, and deploying Docker applications. It includes tools such as the Docker Engine, Docker Compose, and Docker Machine, as well as a Kubernetes server and support for other orchestration platforms. Docker Desktop makes it easy for developers to get started with Docker and streamlines the development workflow by providing a single, integrated environment for building, testing, and deploying applications. In this quick demo we we wil not get into the depths of Docker, but Dockerfiles are fully compatible with Podman, so you can use a Dockerfile to build an image with Podman just as you would with Docker.

A Dockerfile specifies the base image to use for the build, as well as any additional dependencies and instructions needed to build the image. With a few commands it’s possible to get anything up and running, but for this demo we’ll stick to a simple Angular CLI example.

Pre-requisites

Install Docker or Podman

VS Code has a few Docker extensions that may help but is not required, just make sure to have a text editor available

Create a new text file name `Dockerfile` without a file extension, and paste the following snippet in:

# Dockerfile
FROM node:latest

# Install Angular CLI
RUN npm install -g @angular/cli

# Set the working directory
WORKDIR /app

# Set the entrypoint to a shell
ENTRYPOINT ["/bin/bash"]

FROM: Specifies the base image to use for the build. In this case, the base image is node:latest, which is the latest version of the Node.js image from the Docker Hub registry
RUN: Runs a command during the image build process. npm install -g @angular/cli installs the Angular CLI tool globally
WORKDIR: Sets the working directory for the subsequent instructions in the Dockerfile. The working directory is set to /app
ENTRYPOINT: Specifies the command that will be run when a container is started from the image. The entrypoint is set to /bin/bash, which means that the container will run a bash shell when it is started

Build the `Dockerfile` use one of the following commands:

podman build -t angular-dev .

or

docker build -t angular-dev .

podman: and docker are interchangeable
build: is the command to build the Dockerfile into a Docker Image
-t: used to specify the name and optionally a tag to the name of the image in the name:tag format
angular-dev: the name of our image
.: the location of our Dockerfile

Finally to run the image in a container use one of these commands:

podman run -it --name angular-env --network host angular-dev

or

docker run -it --name angular-env --network host angular-dev

-i: stands for “interactive” and keeps STDIN open even if not attached. This allows you to run the container interactively, so you can input commands and see the output in the terminal.
-t: stands for “tty” and allocates a pseudo-tty. This allows you to interact with the container as if it were a terminal, even if you are not running it interactively.
--name: specifies a name for the container. In this case, the name is “angular-env”.
--network host: tells Podman to use the host’s network stack for the container. This means that the container will have the same network connectivity as the host and will be able to access the host’s network resources.
angular-dev: This is the name of the image to use to create the container. In this case, the image is called “angular-dev”.

podman run output…

A successful launch will look something like this in your terminal:

root@hostname:/app#

Finally once the Image has been built, and the container has been launched, you can input the following commands into the prompt:

# create a new Angular workspace
ng new my-workspace

# change into the workspace directory
cd my-workspace

# generate a new Angular application
ng generate application my-project

# change into the project directory
cd projects/my-project/

# build the sample application
ng build

# and serve to localhost:4200 by default
ng serve

There’s a lot more you can do once you get to this point, such as going on to link a Database and building out a portable Angular dev environment, but the main point of this article was to introduce Podman as a Development tool. I plan on continuing on with podman to build environments for other programming languages in the future.

Alma Linux and Cockpit: A Perfect Match

Wed, 04 Jan 2023 20:59:12 -0600

AlmaLinux

A Community-driven, free enterprise-grade distribution of Red Hat Enterprise Linux, or RHEL for short.

Cockpit

A free, open-source web-based server manager that allows you to easily manage your server through a web browser.

Installing AlmaLinux

My go-to for Linux is old school DD (do be careful with that one if you’re unfamiliar with DD maybe avoid it)

Installing Cockpit on AlmaLinux

To Install Cockpit on AlmaLinux requires the Extra Packages for Enterprise Linux (EPEL) repository to be enabled. To do so, run the following commands:

sudo dnf update
sudo dnf install epel-release
sudo dnf update
sudo dnf install cockpit

To start the cockpit service simply run the following `systemctl` command:

sudo systemctl enable --now cockpit.socket

From Cockpit you can now easily manage everything from your firewall rules to your podman containers and more!

Contact Jordan Elder for Design Services

Thu, 01 Dec 2022 12:00:00 -0100

Jordan Elder has been in Graphic Design for 15 years

Whether you need an ad, thumbnail, business card, web banner, emote or logo I can help you bring your ideas to life.

Here are a few highlights of my design work using Gimp, Blender, and other design tools:

Donkey Kong Gif Made with TV Panels and a CRT filter

Cinemagraph

YouTube Thumbnail

Games Library Collage

Penguin lake edit

Game Concept

Eidolon In-Game Photography

Sandbag art

Dino art

Gif Transformations

Reddit Edit

Before On All Sides there was a Wildcat Demo

Blender projects from 2013

Cowboy Bebop edits

Space Dandy Edit

memes

Photoshop battles from 2014

Zelda OOT in-game screenshot wallpaper

Kentucky Route Zero In-Game Screenshots/Wallpapers

Halloween Logo for On All Sides

Product accomodations made for internal use at a previous company - 2021

Profile Icon made for Discord

Side-Bars/Panels for OBS Streaming

Restraunt Menu for my favorite restraunt which is no longer around, The Whistle Stop - 2012

Album Art for On All Sides - Ghosted

Web Banner for Midwestern Japanese Learners - 2020

Discord emote for my emote server

Wallpaper for On All Sides - One Night One Moment

Photo Editing for On All Sides - Promotion

Poster for On All Sides - Red Flag Show

Sticker for On All Sides - Merch

Album Mockup for On All Sides

Be sure to come back from time to time, I will keep this section up to date with goodies in the future!

Contact Jordan Elder for Tech Services

Thu, 01 Dec 2022 12:00:00 -0100

Contact Jordan Elder for Tech Services

I’m available for freelance operations, development, and design work or just to invite to a gig!

If you’re interested in my design work, check out the Gallery.

Be sure to come back from time to time, and check out the band, I will keep posting here as long as there’s still words to write!

OLF 2022 Recap

Mon, 01 Jan 0001 00:00:00 +0000

Thanks OLF Organization

Special thanks to President of the OLF Organization Beth Eicher, Vice President Warner Moore, Chairman Vance Kochenderfer and the rest of the volunteer organizers for making the event warm and welcoming, and keynote speakers Amber Graner, and John ‘Mad Dog’ Hall spoke to being inclusive of all humans in our technology communities

Jupiter Broadcasting Faces and Handles

15 or probably more like 10 people from the JB audience met at North Market, a food Court containing “Ohio’s best independent merchants, farmers, and makers”. which had everything from Vegan to Ramen to Pizza to BBQ Joined by

Nev
the beav
retromat
losten
ScorchedMuffin
Jonathon_Bowman
all from the Matrix chat
and Carl George from RedHat/CentOS … Somehow I forgot to mention Carl George on the show. Anyways he’s from RedHat how could I forget. All the RedHatters were inspiring. It was fun talking to Joshua Preston during the conference as well!

Speakers

Listener Jonathon Bowman started off the fest with a great talk about automating tasks with Python
Joshua Preston from Red Hat taught me a lot about ~~Kubernetes~~ I mean Ansibel Idk why I said Kubernetes
Tim Quinlan from F5s NGINX talked about setting up reverse proxies
We had a few Linux Authors in the house: Ben Cotton from Fedora and David Both who has written many books over his 25 years in Linux
Amber Graner gave the first keynote about how EVERY user is someone’s technical guru and how to be more inclusive of all types of technical people into our communities
John Maddog Hall gave a talk titled United We Stand that hit me in the feels
Check the schedule to review the talks from the conference

Raffle

Raffled off many goodies including 2 Pi 400s and 16 Pi Picos

Freedom and Beer! Thanks Sponsors!

Free Coffee, Local Beers and Tacos sponsored by CIQ Open Logic and The Linux Foundation plus I got a picture with a life-size R2D2 from a neighboring “galaxy fest” going on at the same time

Mixed Excitement for Value-for-Value

There was mixed excitement for value-for-value but most of the hesitation seemed to be conflating Bitcoin with the other Crypto-currencies.

Community

There’s a grand sense of community between all of the large and small businesses and all individuals who attended the event.

Check out my Coverage on Jupiter Broadcasting’s Linux Unplugged #487

Hallway Track

Bumping elbows with everyone in the hallway track alone is well worth the all-night drive back to St Louis for anyone who’s on the fense next year.

Jor-Dani-Elder

How To Start Website Development

Object

HTML

Javascript

Helm Quick Start With Next Cloud

LosslessCut: My Most Used Video Editor

Options

Multiple Sources

Multiple Tracks

Lossless Export

Screenshots

FFmpeg is still quicker for some things

Thunderbird in 2023

More Than A Mail Client

The Calendar and Reminders

Building a Hugo Blog Website with Digital Ocean and GitHub

What is a Hugo?

Download a Few Things to Get Started

Create Your Site

The Local Server Is Now Running

This Site is Built with Hugo and Digital Ocean

A Few Theme Options

Option #1: Resume Site

Option #2: Blog Site

Other Options

Hosting Your Site

After Your Site is Up and Running and Your GitHub Key is Linked

To Add More Posts

If You’re New to Markdown

Building a Triangle with Vulkan and C++ in Fedora 37

Navigation

Beginning the Journey

Pre-requisites

The Material

Download These And Make Edits Accordingly

VulkanSDK

You should now be able to run glslc

DNF

CMake

CmakeLists.txt

Testing Vulkan

main.cpp

The Starting Line

Let’s Make Some Moves!

Code Notes

Starting The Vulkan Window

The FirstApp Class

first_app.cpp

first_app.hpp

The JdeWindow Class

jde_window.hpp

jde_window.cpp

Making Entry in main.cpp!

Opening the Window to the World of Vulkan!

Unfortunately That Was the Easy Part

Directory Structure for the Vulkan Triangle

One Nice Thing About the Shader Chain

src/shaders/simple_shader.frag

src/shaders/simple_shader.vert

Shaders Are Done, Now Let’s Compile!

Toward The TRIANGLE!

The expanded first_app.hpp

first_app.cpp Just Got A Lot Bigger!

Vulkan Graphics Pipeline Configuration

jde_pipeline.hpp

jde_pipeline.cpp

A New And Improved jde_window.hpp Window Class

jde_window.cpp

And Finally Repeat The Build Steps From Before

LAUNCH THAT TRIANGLE!

Using GraphQL and Express.js to Query Users from a MySQL Database

Starting with the Why?

So then let’s start by defining what each of the technologies are that we’ll be using?

Now let’s just dive in, shall we?

The real first step is planning…

Now that we’ve successfully built the image let’s talk about what just happened.

Next it’s time to set up the GraphQL schema and server files!

Next up is the MariaDB connection

You’re FINALLY ready to run…

You should now be able to run `glslc`

`CmakeLists.txt`

`main.cpp`

The `FirstApp` Class

`first_app.cpp`

`first_app.hpp`

The `JdeWindow` Class

`jde_window.hpp`

`jde_window.cpp`

Making Entry in `main.cpp`!

`src/shaders/simple_shader.frag`

`src/shaders/simple_shader.vert`

The expanded `first_app.hpp`

`first_app.cpp` Just Got A Lot Bigger!

`jde_pipeline.hpp`

`jde_pipeline.cpp`

A New And Improved `jde_window.hpp` Window Class

`jde_window.cpp`

The `Player.gd` script in its entirty is as follows:

Create a new text file name `Dockerfile` without a file extension, and paste the following snippet in:

Build the `Dockerfile` use one of the following commands:

To start the cockpit service simply run the following `systemctl` command: