Forem: Jonah Lawrence

Create and Elevate Your GitHub Profile README

Jonah Lawrence — Sun, 13 Aug 2023 12:42:32 +0000

Create and Elevate Your GitHub Profile README

Your GitHub profile isn't just a place to showcase your repositories and contributions. It's an opportunity to leave a lasting impression on visitors. One way to do that is by creating an engaging profile README. In this article, I will show you how to get started with your profile README and add some dynamic components to make it stand out!

Getting Started

To begin, you'll need to create a public repository with the same name as your username (e.g., yourusername/yourusername) and add a README file.

Create a new repository 👉 https://github.com/new

Make sure to add a README to the repository. This can be done in the initial creation page by checking the box that says "Add a README file" If you've already created the repository, you can add a README by clicking the "README" link on the setup page or by uploading a file named README.md to the repository.

All that's left to do is to add content to your README. You can use the GitHub Flavored Markdown syntax to format your text, add images, and create links. You can also add emojis to your README by using the emoji code (e.g., :smile:). You can find a list of supported emojis here.

Adding Dynamic Content

1. Typing Animation with Readme Typing SVG

The Readme Typing SVG project enables you to create an SVG animation that simulates typing and deleting text. You can use this to display a quick bio, witty taglines, favorite quotes, or any text you'd like to highlight on your profile. You can customize the text, speed, color, and more at the demo site (link below).

🎨 Customization and Demo Site: https://readme-typing-svg.demolab.com
🐙 GitHub Repo: https://github.com/DenverCoder1/readme-typing-svg

2. Contribution Streak with GitHub Readme Streak Stats

The GitHub Readme Streak Stats project lets you showcase your contribution streak. It displays your total contributions, current streak, and longest streak in a visually appealing way. This feature can be a great motivator and adds a sense of accomplishment to your profile. If you prefer not having a daily commitment, you can also display a weekly contribution streak or exclude certain days such as weekends.

🎨 Customization and Demo Site: https://streak-stats.demolab.com
🐙 GitHub Repo: https://github.com/DenverCoder1/github-readme-streak-stats

3. Badges and Custom Icon Badges

Shields.io allows you to create badges for your profile README. You can use these badges to display your skills, interests, and accomplishments. You can also create dynamic badges to show off stats such as your GitHub followers, YouTube subscribers, and more.

📕 Docs and list of available dynamic badges: https://shields.io/badges/
🐙 GitHub Repo: https://github.com/badges/shields

To use custom icons other than brand names, you can use the project Custom Icon Badges which allows you to use GitHub's Octicons and your own icons on shields.io badges. This visual enhancement makes your profile more informative and visually pleasing.

🔼 Icon Uploader: https://custom-icon-badges.demolab.com/
🐙 GitHub Repo: https://github.com/DenverCoder1/custom-icon-badges

If you'd like to display a visitor counter on your profile, there are many options. One such option is Hit.sh by silentsoft. It's a free service that allows you to track visitors to your pages and repos including your profile README. You can customize the badge to match your profile and add it to your README.

🎨 Hit.sh: https://hits.sh/
🐙 GitHub Repo: https://github.com/silentsoft/hits

4. YouTube Video Cards with GitHub Readme YouTube Cards

The GitHub Readme YouTube Cards workflow enables you to showcase your recent YouTube videos as SVG cards in your README. If you're a content creator or simply share informative videos, this feature can attract visitors to explore your videos right from your profile.

🎨 Customization and Demo Site: https://ytcards.demolab.com/
🐙 GitHub Repo: https://github.com/DenverCoder1/github-readme-youtube-cards

5. GitHub Stats with GitHub Readme Stats

The GitHub Readme Stats project by Anurag Hazra generates dynamic statistics about your GitHub activities. This includes your top languages, total contributions, and more. You can use these stats to showcase your skills and dedication.

🐙 GitHub Repo: https://github.com/anuraghazra/github-readme-stats

6. Activity Graph with GitHub Readme Activity Graph

Ashutosh Kumar's GitHub Readme Activity Graph generates an activity graph representing your GitHub activities over the past month. It's a visually appealing way to demonstrate your commitment and involvement in open-source projects.

🐙 GitHub Repo: https://github.com/ashutosh00710/github-readme-activity-graph

Putting It All Together

Now that you've seen some of the dynamic components you can add to your profile README, let's put it all together. Click the link below to see a sample (my own) profile README with all the components mentioned in this article.

https://github.com/DenverCoder1/

It's also always a good idea to credit the creators of the projects you use in your README. You can do this by making the dynamic images link back to the project's GitHub repository, or by including a section at the bottom of your README. This is entirely optional, but it's a great way to show your appreciation for the creators of these projects. Leaving a star on their GitHub repository is another great way to show your support.

Conclusion

I hope this article has inspired you to create your own profile README. It's a great way to showcase your skills and interests. If you have any questions or suggestions, feel free to leave a comment below. I'd love to hear your thoughts!

Feel free to join my Discord server to discuss this article and other topics.

Hosting a Python Discord Bot for Free with Fly.io

Jonah Lawrence — Mon, 29 Aug 2022 01:11:00 +0000

Intro

As Heroku is no longer going to be free after November 28, 2022, I am sharing another way to host a Discord bot 24/7 for free.

You will be able to host any kind of bot on Fly.io with few limitations by following the steps below. You can also optionally attach a PostgreSQL database for storing data.

Deploying a Python Discord Bot to Fly.io

This article was originally a video tutorial, which you can check out here:

1. Install the `flyctl` command line tool

Mac OS

If you have the Homebrew package manager installed, flyctl can be installed by running:

brew install flyctl

If not, you can run the install script:

curl -L https://fly.io/install.sh | sh

Windows

Run the Powershell install script:

iwr https://fly.io/install.ps1 -useb | iex

Arch Linux

Run the package installer:

yay -S flyctl-bin

Linux

Run the install script:

curl -L https://fly.io/install.sh | sh

More info: https://fly.io/docs/getting-started/installing-flyctl/

2. Create an account by running `flyctl auth signup` and finishing through the browser

After installing flyctl, you should now be able to use it in the command line. Use flyctl auth signup to launch your browser and complete the account creation steps. If you already have an account, you can use flyctl auth login.

3. Add a `Dockerfile` with the Python version and dependency install method

Method 1: requirements.txt

Create a list of your dependencies in a requirements.txt. You can find out what you have installed using pip freeze.

Discord.py example:

discord.py>=2.0.0,<3
python-dotenv==0.20.0

Nextcord example:

nextcord>=2.1.0,<3
python-dotenv==0.20.0

To tell Fly.io to install these dependencies, create a file called Dockerfile (no file extension) with the following contents:

FROM python:3.11
WORKDIR /bot
COPY requirements.txt /bot/
RUN pip install -r requirements.txt
COPY . /bot
CMD python bot.py

In this case python bot.py is the command used to run the bot. If your bot starts in a different file, you should change that here.

Method 2: Using Poetry

If you are using Poetry for dependencies, your Dockerfile will look more like this:

FROM python:3.11
RUN pip install poetry
WORKDIR /bot
COPY . /bot/
COPY poetry.lock pyproject.toml /bot/
RUN poetry config virtualenvs.create false && poetry install --no-interaction --no-ansi
CMD python bot.py

Poetry Dockerfile is based on this tutorial by Replicate.com. Thanks Abraham Murciano for the correction.

4. `flyctl launch`

In the project folder, run flyctl launch

Give your project a name, type Y or N depending on if you want a Postgresql database or not, type N to not have it deploy.

This will create a fly.toml, but you can delete most of it so that it looks similar to this:

app = "my-bot-name"  # your bot's app name
primary_region = "den"  # a region of your choice

[[services]]
  internal_port = 8080
  protocol = "tcp"
  auto_start_machines = true
  auto_stop_machines = false  # prevent automatic suspension
  min_machines_running = 1  # keep a machine running at all times

5. `flyctl deploy`

Type flyctl deploy to deploy the first version!

Once it is completed, your bot will be running on Fly.io!

6. Set the environment vars

If you will be deploying your bot without your .env or configuration files, you will need to set secrets for fly.io to know about.

This will include all environment variables, for example:

flyctl secrets set DISCORD_TOKEN=My.TOken.3213.example LOG_CHANNEL_ID=1234567890

See https://fly.io/docs/reference/secrets/#setting-secrets

You're done!

To deploy further versions, you can run flyctl deploy or see below for automatic deploys from GitHub.

Note: If your bot is responding to commands twice, this may mean your bot is running on multiple machines. To fix this, try running the command fly scale count 1 in order to remove the extra machine(s). Also, you should ensure your bot is only running in one location; you should not run the bot on fly.io and locally or on another host at the same time.

Continuous deployment from GitHub

You can find the video for this part here:

Run flyctl auth token to get a Fly API token
Go to your repo's Settings > Secrets > Actions and click New repository secret
Enter FLY_API_TOKEN as the name and your token from step 1 as the value
Create a folder, .github/workflows/ and inside create a file that uses the flyctl action on push. You may name it what you like, for example, fly.yml.

Example fly.yml:

name: Fly Deploy
on:
  push:
    branches:
      - main

env:
  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

jobs:
  deploy:
    name: Deploy app
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: flyctl deploy --remote-only

Make sure the branch name is correct for your default branch.

More info: https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/

Conclusion

Thanks for reading!

I hope you found this tutorial useful.

Check out the full video for further explanations and be sure to like and subscribe!

Part 1 (Setup and Hosting) - https://youtu.be/J7Fm7MdZn_E

Part 2 (Continuous Deployment) - https://youtu.be/6u9BrDaSHJc

- Jonah Lawrence

GitHub: DenverCoder1

YouTube: Jonah Lawrence - Dev Pro Tips

Discord server: https://discord.gg/fPrdqh3Zfu

Why Most Wordle Clones are Wrong!

Jonah Lawrence — Mon, 07 Feb 2022 19:27:09 +0000

Wordle, the new online viral game everyone's talking about, at first glance, seems to be not such a difficult feat for an average programmer.

In this post, I will be talking about a mistake that even experienced developers make when coding Wordle and how it can be fixed.

The rules of Wordle are straightforward:

Guess the secret word wihin 6 tries.
Each guess must be a valid 5-letter word.
After each guess, the color of the tiles will change to show how close your guess was to the word: GREEN: The letter is in the word and in the correct spot. YELLOW: The letter is in the word but in the wrong spot. GRAY: The letter is not in the word in any spot.

So why are most hobbyists and even content creators such as Web Dev Simplified and Burke Holland from Visual Studio Code getting it wrong?*

The mistake

The common mistake that nearly all Wordle clone creators make is by oversimplifying the algorithm by misunderstanding an ambiguity in the rules.

During my attempt at creating a Wordle clone, I admit to have fallen for this trap initially myself until I realized that for some inputs, the most obvious solution is not a correct one.

Consider the following code snippet used for determining which color should be assigned to each letter in the guess. Can you spot the mistake?

function colorRow(answer, guess) {
    const colors = [];
    for (let i = 0; i < guess.length; i++) {
        if (guess[i] === answer[i]) {
            colors.push("GREEN");
        } else if (answer.includes(guess[i])) {
            colors.push("YELLOW");
        } else {
            colors.push("GRAY")
        }
    }
    return colors;
}

The mistake here is that if the guess contains multiple of the same letter, they would all be marked with at least yellow, even if there was only one of them in the answer!

Example:

Consider the correct answer is "THOSE".

If a player were to guess the word "GEESE", the algorithm above would produce the result:

['GRAY', 'YELLOW', 'YELLOW', 'GREEN', 'GREEN']

This would imply that the correct answer has two E's in the wrong location and one E in the correct location (a total of three E's).

A correct algorithm, however, working the same as Wordle itself, would produce the result:

['GRAY', 'GRAY', 'GRAY', 'GREEN', 'GREEN']

As another example:

If the answer is "DREAD", and "ADDED" is guessed, the result produced would be:

['YELLOW', 'YELLOW', 'YELLOW', 'YELLOW', 'GREEN']

This implies no letters are missing, but in fact, one of the D's is wrong and the R is missing. Only one of the wrongly placed D's should be marked Yellow.

A correct algorithm would produce the result:

['YELLOW', 'YELLOW', 'GRAY', 'YELLOW', 'GREEN']

Feel free to take a moment to challenge yourself to come up with a correct algorithm before continuing to the last section of the article.

The solution

A single for-loop is not enough as the colors of the tiles will change depending on the colors of other tiles in the same row.

We always want correct letters in the correct spot to be green, so we will score those first and remove them from the answer so they cannot be scored again later as a yellow letter.

Next, we want to score the correct letters in the wrong spot as yellow. Again we need to remove them from the answer so they cannot be scored again later by an additional yellow letter (as in the case of "DREAD" and "ADDED").

Finally, all the remaining letters that are not in the answer are gray.

Here is an example of an algorithm that has been corrected for this mistake (there is more than one possible solution):

function colorRow(answer, guess) {
    // initialize all colors to GRAY
    const colors = Array(guess.length).fill("GRAY");
    // loop through guess and mark green if fully correct
    for (let i = 0; i < guess.length; i++) {
        if (guess[i] === answer[i]) {
            colors[i] = "GREEN";
            // remove letter from answer, so it's not scored again
            answer = answer.replace(guess[i], " ");
        }
    }
    // loop through guess and mark yellow if partially correct
    for (let i = 0; i < guess.length; i++) {
        if (colors[i] !== "GREEN" && answer.includes(guess[i])) {
            colors[i] = "YELLOW";
            // remove letter from answer, so it's not scored again
            answer = answer.replace(guess[i], " ");
        }
    }
    return colors;
}

In this algorithm, the first occurrence of a letter in the answer is replaced with a space, so that it still takes up an index in the answer string, but it is no longer able to be scored again.

After the first line, we will have an array containing "GRAY" for each letter in the guess.

Once we have completed the first loop, we will have an array containing "GREEN" for each letter in the guess that is fully correct, and "GRAY" for all other letters. The answer will now no longer have letters that have been scored as green.

After the second loop, we will have an array still containing the greens, but now also including all "YELLOW" tiles that have been scored. All letters that do not appear in the word will remain as "GRAY". colors[i] !== "GREEN" must be checked in the second loop since we don't want to change letters that were scored as "GREEN" into "YELLOW".

Finally, we will have an array containing all the colors for each letter in the guess and we can return it!

Conclusion

I hope you found this tutorial useful. Maybe it will help you to make or fix a Wordle Clone of your own!

*I do not mean in any way to say that any creators or their tutorials are bad in any way. The creators who made these tutorials have great educational content and I do not think one should think less of them due to a commonly made error. Always remember to be nice when approaching creators in comments.

If you're interested in learning how to make a Discord Bot in Python to play Wordle, check out my tutorial!

- Jonah Lawrence

🐙 GitHub: DenverCoder1

📺 YouTube: Jonah Lawrence - Dev Pro Tips

🐦 Twitter: @DenverCoder1

Update (2022-03-01): Anonymous#9495 pointed out on Discord that there was a slight error in the code (checking guess[i] !== answer[i] in the second loop instead of colors[i] !== "GREEN"). The code did not work in some cases such as where the answer is "MAXIM" and "MAMMA" is guessed, since the answer string has been changed to have spaces, so the guess and answer will no longer match.

Using GitHub Actions to Publish Doxygen Docs to GitHub Pages

Jonah Lawrence — Mon, 06 Dec 2021 06:34:03 +0000

My Workflow

Doxygen GitHub Pages Deploy Action is a new GitHub action for automating the process of making documentation using Doxygen and publishing it to GitHub Pages.

This action is a composite action using shell scripts for installing necessary tools and preparing docs and makes use of JamesIves/github-pages-deploy-action for deploying the docs to a GitHub Pages branch.

Example Usage

name: Doxygen GitHub Pages Deploy Action

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: DenverCoder1/doxygen-github-pages-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages
          folder: docs/html

Submission Category:

DIY Deployments

Yaml File or Link to Code

DenverCoder1 / doxygen-github-pages-action

GitHub Action for deploying Doxygen documentation to a GitHub pages branch

Doxygen GitHub Pages Deploy Action

GitHub Action for making and deploying Doxygen documentation to a GitHub pages branch

Basic Usage

To deploy docs on every push to the main branch, create a new file in the .github/workflows/ directory called doxygen-gh-pages.yml with the following contents:

name: Doxygen GitHub Pages Deploy Action

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: DenverCoder1/doxygen-github-pages-action@v2.0.0
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

Options

github_token (required): GitHub token for pushing to repo. See the docs for more info.
branch (optional): Branch to deploy to. Defaults to gh-pages.
folder (optional): Folder where the docs are built. Defaults to docs/html.
config_file (optional): Path of the Doxygen configuration file. Defaults to Doxyfile.
target_folder (optional): Directory within the deployment branch to push to. Defaults to empty (root).
doxygen_version (optional): Version…

View on GitHub

In the Making

First I needed to create a new repo with an action.yml to start making the composite action.

This action is the first action I have listed on the Marketplace. In order to set up the listing properly, the following data appears at the top of the action file:

name: 'Doxygen GitHub Pages Deploy Action'
author: 'Jonah Lawrence'
description: 'Make docs with Doxygen then deploy the generated HTML to GitHub pages'
branding:
  icon: "upload-cloud"
  color: "purple"

Since the github_token, folder, and branch used for deployment should be configurable, these three inputs were added to the action to allow these to be set in a workflow using the with: property.

inputs:
  github_token:
    description: 'A GitHub token for pushing to the repo. Example: https://git.io/passing-token'
    required: true
  branch:
    description: 'Branch name for pushing GitHub pages files'
    required: true
    default: "gh-pages"
  folder:
    description: 'Folder where Doxygen will generate the HTML build files'
    required: true
    default: "docs/html"

This action is a composite action. First we add a runs property using composite, then we add the steps.

runs:
  using: "composite"
  steps:

The following are the steps added to the action:

1. Checkout repository

    - name: Checkout repository
      uses: actions/checkout@v2
      with:
        submodules: "true"

The actions/checkout step is used to checkout the repository with any submodules.

2. Install Doxygen

    - name: Install Doxygen
      run: sudo apt-get install doxygen -y
      shell: bash

Doxygen is installed by running apt-get install

3. Generate Doxygen Documentation

    - name: Generate Doxygen Documentation
      run: doxygen
      shell: bash

Doxygen documentation is generated by running doxygen.

4. Create .nojekyll

    - name: Create .nojekyll
      run: touch ${{ inputs.folder }}/.nojekyll
      shell: bash

Creating a .nojekyll file ensures pages with underscores work on GitHub Pages.

The folder where the documentation is built is where the .nojekyll file will be created. The folder input is used for this purpose.

5. Deploy to GitHub Pages

    - name: Deploy to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.7.1
      with:
        github_token: ${{ inputs.github_token }}
        branch: ${{ inputs.branch }}
        folder: ${{ inputs.folder }}

The JamesIves/github-pages-deploy-action action is used to deploy the documentation to GitHub Pages.

The folder input option determines which folder to deploy. By default, it is docs/html.

The branch input option determines which branch to deploy to. By default, it is gh-pages.

Additional Resources / Info

To see it in action, I have set up the action to run on my C-Workshop GitHub repository.

GitHub Action for Updating Your Readme with a Download Button

Jonah Lawrence — Mon, 06 Dec 2021 01:37:41 +0000

My Workflow

Readme Download Button Action is a new workflow that allows you to keep a direct download link of the latest version of your repo in your README file.

Example download button generated by the workflow:

The steps for setting up the workflow are explained in detail on the GitHub repository.

Getting started

name: "Download Button Action"
on:
  release:
    types:
      - published
  workflow_dispatch:
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Get latest release
        id: get-latest-release
        uses: InsonusK/get-latest-release@v1.0.1
        with:
          myToken: ${{ github.token }}
          view_top: 1
      - name: Readme Download Button Action
        env:
          GITHUB_USER: "DenverCoder1"
          REPO: "readme-download-button-action"
          FORMAT: "zip"
          VERSION: "${{ steps.get-latest-release.outputs.tag_name }}"
          COLOR: "blue"
          BEGIN_TAG: "<!-- BEGIN LATEST DOWNLOAD BUTTON -->"
          END_TAG: "<!-- END LATEST DOWNLOAD BUTTON -->"
        run: |
          UPDATE=$(cat README.md | perl -0777 -pe 's#(${{ env.BEGIN_TAG }})(?:.|\n)*?(${{ env.END_TAG }})#${1}\n[![Download ${{ env.FORMAT }}](https://custom-icon-badges.herokuapp.com/badge/-Download-${{ env.COLOR }}?style=for-the-badge&logo=download&logoColor=white "Download ${{ env.FORMAT }}")](https://github.com/${{ env.GITHUB_USER }}/${{ env.REPO }}/archive/${{ env.VERSION }}.${{ env.FORMAT }})\n${2}#g')
          echo "${UPDATE}" > README.md
      - uses: EndBug/add-and-commit@v7
        with:
          message: "docs(readme): Bump download button version to ${{ steps.get-latest-release.outputs.tag_name }}"
          default_author: github_actions
          branch: main

Submission Category:

Maintainer Must-Haves

Yaml File or Link to Code

DenverCoder1 / readme-download-button-action

GitHub Action workflow configuration for keeping a direct download link to the latest version on your repo's readme

Readme Download Button Action

GitHub Action workflow configuration for keeping a direct download link of the latest version in your README.md file.

Example

With a single click of the button below, a zip of this repository will start downloading.

The URL this button leads to is automatically updated on each release by this workflow.

Basic Usage

This workflow consists mainly of four parts:

Checkout the latest version of the repo with actions/checkout
Get the latest release with InsonusK/get-latest-release
Insert a download button for the latest version in the readme using a custom shell script
Update the readme with EndBug/add-and-commit

Step 1

Add the following snippet within your README.md file anywhere you want the button to appear:

<!-- BEGIN LATEST DOWNLOAD BUTTON -->
<!-- END LATEST DOWNLOAD BUTTON -->

Step 2

Create a workflow by placing the following in a .yml file in your .github/workflows/ directory:

name: "Download

…

View on GitHub

Background

This project was created due to the fact that many users may come to a repository to download a project but are not familiar enough with the site to navigate the repository and find a proper download link.

This workflow aims to simplify the process, by putting a download button front and center in the Readme so it can't be missed.

Having a download button on the Readme allows visiting users to quickly download your source code with just a single click!

Why does this require a workflow?

In order to make the process a single click away, a direct download link must be included.

For example, a link to download the source code of version 1.0.1 of readme-download-button-action will look like this: https://github.com/DenverCoder1/readme-download-button-action/archive/1.0.1.zip.

Notice that the url contains 1.0.1, the version. This number changes with every new version released, so in order to keep the download button up-to-date, we will have to update the readme to change the link.

That's where this workflow comes in. With just a few seconds of one-time configuration, your button will be generated and automatically kept up to date whenever you make a new release.

Making of this workflow

First, we need to set the trigger event. A good choice here is when we publish a release. Additionally workflow_dispatch: is added so that it can be manually triggered from the Actions tab in case you want to re-run it without creating a new release.

on:
  release:
    types:
      - published
  workflow_dispatch:

Next, we create some steps:

Checkout

In order to be able to read and overwrite the files in the repo such as the readme, we will need to first checkout the repository.

- uses: actions/checkout@v2

Get Latest Release

The following workflow by InsonusK allows us to get info on the latest release. We can access the tag name later using ${{ steps.get-latest-release.outputs.tag_name }}

- name: Get latest release
  id: get-latest-release
  uses: InsonusK/get-latest-release@v1.0.1
  with:
    myToken: ${{ github.token }}
    view_top: 1

The custom shell script

The actual replacement of the button is done with a shell step:

- name: Readme Download Button Action
  env:
    GITHUB_USER: "DenverCoder1"
    REPO: "readme-download-button-action"
    FORMAT: "zip"
    VERSION: "${{ steps.get-latest-release.outputs.tag_name }}"
    COLOR: "blue"
    BEGIN_TAG: "<!-- BEGIN LATEST DOWNLOAD BUTTON -->"
    END_TAG: "<!-- END LATEST DOWNLOAD BUTTON -->"
  run: |
    UPDATE=$(cat README.md | perl -0777 -pe 's#(${{ env.BEGIN_TAG }})(?:.|\n)*?(${{ env.END_TAG }})#${1}\n[![Download ${{ env.FORMAT }}](https://custom-icon-badges.herokuapp.com/badge/-Download-${{ env.COLOR }}?style=for-the-badge&logo=download&logoColor=white "Download ${{ env.FORMAT }}")](https://github.com/${{ env.GITHUB_USER }}/${{ env.REPO }}/archive/${{ env.VERSION }}.${{ env.FORMAT }})\n${2}#g')
    echo "${UPDATE}" > README.md

perl is used here to make a multiline replacement using regular expressions. At first I was going to try sed but it deals with lines one at a time, so it's much more complicated when dealing with multiline matches.

An env section also appears to make configuring the download button as simple as possible.

Add and commit

Finally we can use EndBug's add-and-commit to make the change persist!

- uses: EndBug/add-and-commit@v7
  with:
    message: "docs(readme): Bump download button version to ${{ steps.get-latest-release.outputs.tag_name }}"
    default_author: github_actions
    branch: main

Additional Resources / Info

This action works great in combination with several open-source workflows:

InsonusK/get-latest-release - Determine the tag for the latest release
EndBug/add-and-commit - Commit your changes
tvdias/github-tagger - Create new tags to push to
fregante/release-with-changelog - generate changelogs for your releases

Keeping your dependencies updated automatically with Dependabot

Jonah Lawrence — Wed, 19 May 2021 12:28:39 +0000

In this tutorial, you will learn how to use the GitHub dependency bot to make sure your packages stay up to date without breaking your code.

I will be showing you how to add versions to Python dependencies and how to set up Dependabot to run on your GitHub repository to make sure you always have the latest version in your requirements.txt. Dependabot will send Pull Requests to your repo whenever a package is out of date so you can easily check the changelog, test the new version, and update your requirements file with a single click.

The Dependabot configuration steps can be applied to dependencies of many types and in many languages including github-actions, docker, pip (Python), npm (JavaScript), composer (PHP), and many others.

This article was originally a video tutorial, which you can check out here:

Make sure your packages have version numbers

When using a requirements.txt in a Python project, version numbers are optional. If they are not provided, running the command to install the packages will always get the latest version of the package.

So why should we add version numbers?

It is very risky to install dependencies without specifying version numbers. Often times packages will receive updates that break or alter existing functionality and require the dependent to update their code to continue using the package. In the case of a new major release, your code may all of a sudden break just because you wrote it for a different version of a package you are using.

How do you add version numbers?

In your requirements.txt, you can specify version numbers by appending == followed by the version to the package name. To find out what version of each package your are using, you can run pip freeze in your terminal.

This is an example requirements.txt with version numbers included:

Automatic updates with Dependabot

Step 1 - Click on Insights

Step 2 - Click "Dependency graph", then "Dependabot"

Step 3 - Enable Dependabot and create a config file

Make sure to insert the name of your package ecosystem on the line that is highlighted below. See this link for the list of possible options.

Step 4 - Push the configuration file to your main branch and wait for pull requests

Within a few minutes, you should start receiving PRs (possibly longer if you already have everything up to date 😄)

Reviewing Dependabot PRs

Here's what a Dependabot PR looks like:

It will give you details about the changes to the package and allow you run tests if that is applicable to your repo.

Once your code is tested and seems to be working with the new version, you can update your requirements by simply clicking "Merge Pull Request".

Whenever a change is made to the requirements, Dependabot will automatically rebase all of it's open PRs to ensure there are never any merge conflicts.

Conclusion

I hope you found this tutorial useful.

Check out the full video for further explanations and be sure to like and subscribe!

- Jonah Lawrence

Twitter: @DenverCoder1

YouTube: Jonah Lawrence - Dev Pro Tips

Discord server: https://discord.gg/fPrdqh3Zfu

How to run an HTML/PHP website on Localhost

Jonah Lawrence — Wed, 17 Feb 2021 14:46:26 +0000

In this tutorial, I'm going to show you how to run your website locally with XAMPP. This is especially useful when writing PHP since you will be able to test your site without putting it on a web server!

Installation

The first thing you'll need to do is install PHP. My preferred way of doing that is by installing XAMPP from https://www.apachefriends.org.

Click the download button for your operating system to get the latest version.

Once it's finished installing, you should be able to access all of the PHP features from your command line.

Open a command prompt in your working directory

You'll need to open a command prompt in the directory containing your root directory or index file.

There are a few ways to do that on Windows:

Method 1

Open a File Explorer to the directory and click on the bar containing the path

Enter "cmd" in the bar and press enter.

Method 2

Open a command prompt by searching for the application "Command Prompt" or "Terminal".

Run the "change directory" command by typing cd followed by the path of your project.

Method 3

If you have Visual Studio Code installed, you can press Ctrl + ` to open a terminal within the editor.

Running your code on localhost

Type the command php -S localhost:8000 to run your site on port 8000.

Note: If you get an error that 'php' is not recognized, you likely will need to add it to your path manually. To do that, locate php.exe (for me it is in the directory C:\xampp\php\). Search for "Edit system environment variables", at the bottom of the window that comes up, click "Environment variables", then click the row for "Path" and click the "Edit..." button. Add a row containing the directory you found earlier (ex. C:\xampp\php\).

See your site live!

Go to http://localhost:8000/ in your browser to see your site live!

Make sure to keep the command prompt open while you want your site to stay live!

Conclusion

If you found this useful, consider leaving a like and subscribing to my YouTube channel! 😎

- Jonah Lawrence

🐦 @DenverCoder1

📺 Jonah Lawrence • Dev Pro Tips

Easily Bulk Rename Files on Windows

Jonah Lawrence — Mon, 15 Feb 2021 21:00:22 +0000

In this tutorial, I will show you how to rename several files at once in Windows 10. You not only can append text to filenames, but you can even create advanced regular expressions or enumerate your files. There are also text transformations available to make your filenames all uppercase or lowercase.

To get started, I will be using PowerRename which is part of Microsoft PowerToys.

microsoft / PowerToys

Windows system utilities to maximize productivity

Microsoft PowerToys

How to use PowerToys | Downloads & Release notes | Contributing to PowerToys | What's Happening | Roadmap

Build status

Architecture	Solution (Main)	Solution (Stable)	Installer (Main)
x64
ARM64

About

Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity. For more info on PowerToys overviews and how to use the utilities, or any other tools and resources for Windows development environments, head over to learn.microsoft.com!

Current utilities:
Always on Top	PowerToys Awake	Color Picker
FancyZones	File Explorer Add-ons	File Locksmith
Hosts File Editor	Image Resizer	Keyboard Manager
Mouse utilities	PowerRename	PowerToys Run
Quick Accent	Screen Ruler	Shortcut Guide
Text Extractor	Video Conference Mute

Installing and running Microsoft PowerToys

Requirements

Windows 11 or Windows 10 version 2004 (code name 20H1 / build number 19041) or newer.
Our installer will install the following items
- .NET 6.0.10…

View on GitHub

You can install PowerToys by heading to this link and downloading the executable for the latest release (as of writing this, it's called PowerToysSetup-0.31.2-x64.exe)

Once it's installed, you should be able to see PowerRename as an option in your Right-click menu when selecting files in your File Explorer.

Once you click that, you should see a popup come up with a search box, replace box, some options, and a preview.

To make a simple word replacement, you can type the word to search for in the first box, the word to replace it with in the second box, preview the results, and click "Rename".

If you want more complex replacements, such as matching several different words or characters, reordering parts of the filename, or duplicating sections, you can do that with Regular Expressions.

For example, to match the words "Lab" or "Lecture" in a filename, we can use (Lab|Lecture) in our search text. Just make sure to click the box for "Use Regular Expressions."

To rearrange parts of a filename, you can reference capturing groups in the replace text.

For example, if you had files that all ended with a 2-digit number and you wanted to move it to the beginning, your search text may be in the form (.*)(\d\d) and you could replace it with $2$1 where $2 is the second capturing group, (\d\d), and $1 is the first capturing group, (.*).

In my video, How to Bulk Rename Files Easily on Windows, I show how it is possible to reorder parts of a filename, add padding zeroes, and change date formats with just a few simple replacements.

Be sure to check it out and subscribe for more tips!

Thanks for your support!

- Jonah Lawrence

🐦 @DenverCoder1

📺 Jonah Lawrence • Dev Pro Tips

From Developer to Dev Content Creator - My 2020 Story

Jonah Lawrence — Sun, 03 Jan 2021 15:31:49 +0000

Here is my review of 2020 and the story of how I became a content creator from being just a quiet developer.

2020 was a very interesting year. Staying inside and not having so many commitments gave me more time to learn new things and begin teaching what I love!

Before 2020, I mostly worked alone on personal projects, but this past year, many things changed and I became a content creator!

Without further ado, here are my highlights from 2020...

Made some online friends

Although I haven't been extremely social online, I found a few developers on Twitter, YouTube, and Discord who I look up to and would consider my new friends.

Here are just a few of the many awesome developers & content creators who I've connected with on social media:

Check out their content! These are all amazing people I hope to get to know better in 2021!

YouTube

On May 31, 2020, I made my first real YouTube video which has since been unlisted due to the change in plans for my channel.

About a month later, I realized my channel could become a resource for people who want to learn programming.

On July 20, 2020, I made my first programming tutorial where you can hear me speak (before July 20 I only used background music).

I now have been teaching web development and other coding tips about once a week.

Since I started, I have made a total of 28 public tutorials and gained 786 subscribers!

Including my unlisted and public videos, I achieved over 104,000 views this year!

Check out my channel 👉 https://www.youtube.com/c/DevProTips

Twitter

Starting in September, I have been posting JavaScript tips and quizzes every week.

I also post any programming resources I find useful.

Check it out 👉 https://twitter.com/DenverCoder1

Dev.to and Hashnode

I only very recently started writing articles/blog posts (this is my 6th one). In 2020, my posts on DEV community have gotten 6800 views and 169 reactions.

One of my first articles even got featured on Hashnode!

Hacktoberfest

Hacktoberfest was a great event this year. I learned about contributing to open source projects and even made some of my own for others to contribute to.

Learning how to make a pull request on a public project was a very important skill I picked up and now I do it all the time!

GitHub

In 2020, I made 1220 commits, 50 pull requests, and opened 34 issues.

My open source projects received a total of 134 stars! ⭐

I contributed on GitHub every day from September 26 to December 17 making an 83-day streak. Hopefully, I can extend that this year! You can get this streak stats card for your profile at git.io/streak-stats!

My top open source projects of 2020

Helping Computer Science Students

As a Computer Science student finishing my degree, I had the chance to help other students who have been struggling with programming and math concepts.

In 2020, I spent over 90 hours tutoring other students.

New Programming Skills

I have learned many new things in 2020!

Here are a few programming topics I learned and practiced in 2020:

Node.js
Chrome Extensions
Bootstrap and Material UI (I still prefer plain CSS though)
C#
Logical Programming (Prolog)
Functional Programming
Oracle Database Systems
SQL, PL/SQL
Building WordPress Plugins
Interacting with WordPress Databases
Introduction to Cybersecurity
Software design patterns and UML
OOP in Java
Dynamic Programming and Memoization

Let me know what you're interested in learning in 2021!

Conclusion

2020 was a great year for me and I hope 2021 will allow me to continue to help others learn!

Helping others is very rewarding and I'd recommend anyone who's considering it to give content creation a try.

Making the first video or first post is the hardest, but it becomes easier from there.

Interested in what I'm teaching?

You can find me on:

YouTube 📺 https://www.youtube.com/c/DevProTips

Twitter 🐦 https://twitter.com/DenverCoder1

- Jonah Lawrence

Getting the user's location with JavaScript

Jonah Lawrence — Thu, 24 Dec 2020 17:07:54 +0000

In this tutorial I will show you how to get the user's location with the JavaScript Geolocation API.

You can use it to redirect them to a site in their language or on sites such as a News or Weather App and use their location to adjust the home page to show content relevant for where they are.

This article was originally a video tutorial, which you can check out here:

Checking if the navigator API is available

The geolocation functions are part of the window object can be accessed with window.navigator.geolocation or simply navigator.geolocation.

Some older browsers may not have support for the geolocation API, so you should use an if statement to check if it exists before using it:

if (navigator.geolocation) {
    /* use the API here */
}

Getting the user's coordinates

If your browser supports the API, you can use its methods. The method to get the user's coordinates is navigator.geolocation.getCurrentPosition.

It requires as parameters, a success callback and optionally an error callback and options.

To test it out, we can use console.log as the the success callback function and console.error as the error callback.

One of these two functions will get called depending on whether the call is successful or not.

window.navigator.geolocation
  .getCurrentPosition(console.log, console.error);

The user will be prompted to allow the site to access their location the first time this is used.

Once permission is granted, you should see something like this in the JavaScript console:

/* GeolocationPosition */
{
    /* GeolocationCoordinates */
    "coords": {
        "accuracy": 1000,
        "altitude": null,
        "altitudeAccuracy": null,
        "heading": null,
        "latitude": 39.7501,
        "longitude": -104.9957,
        "speed": null
    },
    "timestamp": 1608826371767
}

You will have a GeolocationPosition object containing a GeolocationCoordinates object labeled as coords and a timestamp.

Success function

Instead of using console.log, you can use a custom success callback to do exactly what you need to with the data.

function success(data) {
    // extracting the latitude and longitude from the data
    let latitude = data.coords.latitude;
    let longitude = data.coords.longitude;
    alert("Your location: " + latitude + ", " + longitude);
}

if (navigator.geolocation) {
    window.navigator.geolocation
        .getCurrentPosition(success, console.error);
}

This will tell the getCurrentPosition function to call success when it successfully looks up the location and send it the Geolocation Position as the parameter.

The success function above will extract the latitude and longitude and make a popup telling it to the user.

What if you want to know their city or country?

If you want to know where your user is located in a more meaningful way, you can look that up using a reverse geocoding API.

There are many APIs available to do this. For this tutorial, I used the OpenCage API.

Create a free account at opencagedata.com and get an API key to use with your application.

You can find a code snippet for reverse geocoding with OpenCage in their JavaScript documentation.

We can simplify it using modern JavaScript techniques:

  let apikey = "your API key goes here";
  let latitude = '51.0';
  let longitude = '7.0';

  fetch('https://api.opencagedata.com/geocode/v1/json'
    + '?'
    + 'key=' + apikey
    + '&q=' + encodeURIComponent(latitude + ',' + longitude)
    + '&pretty=1'
    + '&no_annotations=1')
   .then((response) => response.json())
   .then((data) => alert(data.results[0].formatted));

Assuming you have a valid API key from OpenCage, the snippet above should make an alert that says "Grüner Kuhweg, 51061 Cologne, Germany". That is the location for the coordinates 51.0, 7.0.

If you log data.results[0] in the console, you will see there are a few fields in addition to just the formatted address that you can access:

{
  "bounds": {
    "northeast": {
      "lat": 51.0008597,
      "lng": 7.0042934
    },
    "southwest": {
      "lat": 50.9973232,
      "lng": 6.999946
    }
  },
  "components": {
    "ISO_3166-1_alpha-2": "DE",
    "ISO_3166-1_alpha-3": "DEU",
    "_category": "road",
    "_type": "road",
    "city": "Cologne",
    "city_district": "Mülheim",
    "continent": "Europe",
    "country": "Germany",
    "country_code": "de",
    "political_union": "European Union",
    "postcode": "51061",
    "road": "Grüner Kuhweg",
    "road_type": "service",
    "state": "North Rhine-Westphalia",
    "state_code": "NW",
    "suburb": "Flittard"
  },
  "confidence": 9,
  "formatted": "Grüner Kuhweg, 51061 Cologne, Germany",
  "geometry": {
    "lat": 50.999559,
    "lng": 7.0002524
  }
}

Accessing specific components

You can access any component of the returned JSON object.

To access the user's city, we can say data.results[0].components.city.

To get their country, we can say data.results[0].components.country.

Reverse geocoding the user's location

Now that we can access the user's coordinates and reverse geocode coordinates, we can put it all together:

function reverseGeocode(latitude, longitude) {
    let apikey = "your API key goes here";

    fetch('https://api.opencagedata.com/geocode/v1/json'
        + '?'
        + 'key=' + apikey
        + '&q=' + encodeURIComponent(latitude + ',' + longitude)
        + '&pretty=1'
        + '&no_annotations=1')
     .then((response) => response.json())
     .then((data) => alert(data.results[0].formatted));
}

function success(data) {
    // extracting the latitude and longitude from the data
    let latitude = data.coords.latitude;
    let longitude = data.coords.longitude;
    // reverse geocode
    reverseGeocode(latitude, longitude);
}

if (navigator.geolocation) {
    window.navigator.geolocation
        .getCurrentPosition(success, console.error);
}

The alert function at the end of the reverseGeocode call can be replaced with any function you need to use the data for.

In my video, Getting the user's location with JavaScript, I show how this can be used in a weather app to display weather for the user's current location.

Conclusion

I hope you found this tutorial useful.

Check out the video for further explanations and be sure to like and subscribe!

- Jonah Lawrence

Twitter: @DenverCoder1

YouTube: Jonah Lawrence - Dev Pro Tips

C++ Pointers and Dynamic Memory Allocation

Jonah Lawrence — Wed, 23 Dec 2020 14:33:43 +0000

In C and C++, pointers allow you direct control of the way you access memory. This becomes very useful when learning to use build complex data structures or trying to save space when allocating memory.

One of the most basic ways pointers help is when you want to dynamically set the size of an array based on an external input not known beforehand to the compiler or you may want to change the size of the array in runtime. In C++, arrays must have a constant size which can't be changed, but with pointers, you can allocate just the space you need, allowing you to improve your program's space efficiency and make the shape of your data as flexible as the user needs.

A pointer storing an address

&x (referencing operator) = “address of”
int* p (pointer declaration) = “p is a pointer to an integer”
int** p (pointer declaration) = “p is a pointer to a pointer to an integer”

+-----Example-------------------------------------------------------+
| int x = 6; // x is an integer with the value 6                    |
| int* a = &x; // a is a pointer that points to the address of x    |
| int** b = &a; // b is a pointer that points to the address of a   |
+-------------------------------------------------------------------+

Dereferencing pointers

*p (dereferencing operator) = “content at the address stored in p”
**p = “content at the address stored in the address stored in p”

In the example above, *a and x can be used interchangeably. Modifying *a (ex. (*a)++) will also modify x.

A pointer storing an array

Before you assign a value to an address in memory, you need to be sure that the memory is unused.

The new operator will allocate a given size in memory to store consecutive values.

+-----Example---------------------------------------------------------------------------+
| int* numbers = new int[3]; // numbers points to memory where 3 integers can be stored |
| *numbers = 5; // the first value in the memory numbers points to is now set to 5      |
| numbers[1] = 3 // using array notation, the value after the first value is now a 3    |
| *(numbers + 2) = 7 // using pointer notation, the value at index 2 is now a 7         |
| // The current array, 'numbers' is now storing the integers, {5, 3, 7}                |
+---------------------------------------------------------------------------------------+

In a two-dimensional array, the values the pointer points to are pointers pointing to arrays

+-----Example-----------------------------------------------------------------------------------+
| int numOfRows = 4;                                                                            |
| int** numArr = new int*[numOfRows]; //numArr points to memory where 4 addresses can be stored |
| *numArr = new int[3]; // the first row of numArr points to memory where 3 ints can be stored |
| *(*(numArr + 1) + 2) = 3; // The value at coordinates 1,2 (numArr[1][2]) is now a 3           |
+-----------------------------------------------------------------------------------------------+

Dynamic Memory Allocation

The delete[] operator deallocates memory so that it can be used later.
To deallocate the two dimensional array, numArr, use:

for (int i = 0; i < numOfRows; i++) {
    delete[] numArr[i]; // frees up the row at i of numArr
}
if (numOfRows > 0) {
    delete[] numArr; // frees up the address numArr itself
}

When you change the size of the data an array points to, you need to delete[] each row and the original address of the array.

Then, use the new operator to allocate the amount of data you will need.

If you need to keep the contents of the old array, you will need to create a temporary array to back up the values.

After you change the size with the new operator, copy the values back into the array from the temporary array.

You will need to do this for both shrinking and expanding an array.

The example program at the end includes a pointer array which changes size using dynamic memory allocation.

Visualization

Below are two ways to visualize arrays and access their contents.

Array as a grid with subscript notation (left) and pointer dereferencing notation (right)

    +-----------+-----------+-----------+           +---------------+---------------+---------------+
    | arr[0][0] | arr[0][1] | arr[0][2] |           | *(*(arr+0)+0) | *(*(arr+0)+1) | *(*(arr+0)+2) |
    +-----------+-----------+-----------+           +---------------+---------------+---------------+
    | arr[1][0] | arr[1][1] | arr[2][2] |           | *(*(arr+1)+0) | *(*(arr+1)+1) | *(*(arr+1)+2) |
    +-----------+-----------+-----------+           +---------------+---------------+---------------+
    | arr[2][0] | arr[2][1] | arr[2][2] |           | *(*(arr+2)+0) | *(*(arr+2)+1) | *(*(arr+2)+2) |
    +-----------+-----------+-----------+           +---------------+---------------+---------------+
    | arr[3][0] | arr[3][1] | arr[3][2] |           | *(*(arr+3)+0) | *(*(arr+3)+1) | *(*(arr+3)+2) |
    +-----------+-----------+-----------+           +---------------+---------------+---------------+

Pointer map with subscript notation

                     +--------+      +-----------+-----------+-----------+
               +---> | arr[0] |----> | arr[0][0] | arr[0][1] | arr[0][2] |
    +-----+    |     +--------+      +----- -----+-----------+-----------+     +-----------+-----------+-----------+
    | arr |----+     | arr[1] |----------------------------------------------> | arr[1][0] | arr[1][1] | arr[1][2] |
    +-----+          +--------+      +-----------+-----------+-----------+     +-----------+-----------+-----------+
                     | arr[2] |----> | arr[2][0] | arr[2][1] | arr[2][2] |
                     +--------+      +----- -----+-----------+-----------+     +-----------+-----------+-----------+
                     | arr[3] |----------------------------------------------> | arr[3][0] | arr[3][1] | arr[3][2] |
                     +--------+                                                +-----------+-----------+-----------+

Pointer map with pointer dereferencing notation

                     +--------+      +---------------+---------------+---------------+
               +---> |*(arr+0)|----> | *(*(arr+0)+0) | *(*(arr+0)+1) | *(*(arr+0)+2) |
    +-----+    |     +--------+      +---------------+---------------+---------------+     +---------------+---------------+---------------+
    | arr |----+     |*(arr+1)|----------------------------------------------------------> | *(*(arr+1)+0) | *(*(arr+1)+1) | *(*(arr+1)+2) |
    +-----+          +--------+      +---------------+---------------+---------------+     +---------------+---------------+---------------+
                     |*(arr+2)|----> | *(*(arr+2)+0) | *(*(arr+2)+1) | *(*(arr+2)+2) |
                     +--------+      +---------------+---------------+---------------+     +---------------+---------------+---------------+
                     |*(arr+3)|----------------------------------------------------------> | *(*(arr+3)+0) | *(*(arr+3)+1) | *(*(arr+3)+2) |
                     +--------+                                                            +---------------+---------------+---------------+

Example

In this program:

The user is asked for a number of rows and a value to start filling the cells with
A pointer array changes size to hold the given number of rows
The number of columns will be 12 throughout the program
New rows are filled using the fill value provided (incrementing by 1 for each new row)
The new array is printed

#include <iostream>
using namespace std;

void changeSize(int** & arr, int & currentNumOfRows, int newSize, int fillValue);
int numDigits(int x);
void printArray(int** arr, int currentNumOfRows);

int main() {

    // declare a pointer that will point to an
    // array of pointers to integers (see diagrams above)
    int** arr = new int*;

    int currentNumOfRows = 0;

    int newSize, fillValue;

    while (true) {

        cout << "How many rows? ";

        cin >> newSize;

        // if newSize is less than current size, no rows added, so no need for fill value
        if (newSize > currentNumOfRows) {
            do {
                cout << "Enter the fill value: ";
                cin >> fillValue;
                if (fillValue < 0) {
                    cout << "Please enter a positive number." << endl;
                }
            } while (fillValue < 0);
        }

        // Loop will continue until a negative number is chosen
        if (newSize >= 0) {
            // change amount of memory 'arr' points to
            // (new amount of memory will be enough to store 'newSize' number of pointers)
            changeSize(arr, currentNumOfRows, newSize, fillValue);
            // print the new array
            printArray(arr, currentNumOfRows);
        }
        else {
            // exit the loop
            break;
        }

    }

    // free up remaining memory which is in current array
    for (int i = 0; i < currentNumOfRows; i++)
        delete[] arr[i];
    if (currentNumOfRows > 0)
        delete arr;

    return 0;
}

// changes amount of memory arr points to
// and fills new cells starting with fillValue
// incrementing by 1 for each row
// parameters:
// arr is a pointer to pointers to integers. 
// It is passed as a reference so that you can change
// the location it points to from within this function.
// currentNumOfRows is the number of rows the array has
// at the time the function is called. It will also
// change within the function.
// newSize is the new number of rows the array will point to.
// fillValue is the number to starting filling new rows with
void changeSize(int** & arr, int & currentNumOfRows, int newSize, int fillValue) {

    // when the new operator is used, the pointer will point
    // to a new location in memory with the required size
    // therefore, if we want to keep the data, we will need
    // to back it up in a temporary array

    /* CREATE A TEMPORARY ARRAY TO STORE ARRAY'S DATA */

    // create a pointer that points to the size of the array (before we change it)
    int** temporaryArr = new int*[currentNumOfRows];

    // for each row in original array (that we will backup and delete):
    for (int i = 0; i < currentNumOfRows; i++) {

        // in this example, each row in arr contains exactly 12 values
        // create a pointer to an array of 12 integers at temporaryArr[i]
        // which can be written as: *(temporaryArr + i) -- 
        // i.e. content of the address, 'i' values after the address of temporaryArr
        *(temporaryArr + i) = new int[12];

        // for each of the 12 values in row i:
        for (int j = 0; j < 12; j++) {
            // copy data from arr into temporary array
            *(*(temporaryArr + i) + j) = *(*(arr + i) + j);
        }

        // original array location is no longer being used,
        // so free up the memory for current row
        delete[] * (arr + i);
    }
    // free up the original address of arr
    delete[] arr;

    /* CHANGE THE SIZE OF ARRAY BY POINTING IT TO A LARGER AMOUNT OF MEMORY */
    arr = new int*[newSize];

    /* PUT THE DATA THAT WAS REMOVED BACK INTO ARRAY */

    // for each row in temporaryArr (that we will move back into arr and delete):
    // if i becomes greater than or equal to old size (if size is increasing)
    // or new size (if size is decreasing) stop loop
    for (int i = 0; (i < currentNumOfRows && i < newSize); i++) {

        // create a pointer to 12 integers at *(arr + i)
        *(arr + i) = new int[12];

        // for each of the 12 values in row i:
        for (int j = 0; j < 12; j++) {
            // copy data from temporaryArr back into arr
            *(*(arr + i) + j) = *(*(temporaryArr + i) + j);
        }

        // temporaryArr row is no longer being used, so free up the memory for current row
        delete[] * (temporaryArr + i);
    }
    // free up the original address of temporaryArr
    delete[] temporaryArr;

    /* FILL IN SOME VALUES INTO EMPTY SPOTS */

    int numOfAddedRows = newSize - currentNumOfRows; // original size - new size
    for (int i = currentNumOfRows; i < newSize; i++) { // for each new row starting at first new row
        // create a pointer to 12 integers at *(arr + i):
        *(arr + i) = new int[12];
        // now that memory is allocated, we can set the values:
        for (int j = 0; j < 12; j++) { // for each column in row
            // set *(*(arr + i) + j),
            // i.e. arr[i][j],
            // i.e. content of j values past address stored in content of i values past address of arr
            *(*(arr + i) + j) = fillValue + i - currentNumOfRows;
        }
    }

    /* CHANGE currentNumOfRows TO NEW SIZE */
    currentNumOfRows = newSize;
}

// prints out the array's values
void printArray(int** arr, int currentNumOfRows) {
    // to line up numbers in columns:
    int highestNum = -32767;
    for (int i = 0; i < currentNumOfRows; i++)
        if (*(*(arr + i) + 0) > highestNum)
            highestNum = *(*(arr + i) + 0);
    int maxNumOfSpaces = numDigits(highestNum); // get number of digits in largest number in column
    for (int i = 0; i < currentNumOfRows; i++) { // for each row in the array
        for (int j = 0; j < 12; j++) { // prints the 12 pieces of data in arr[i]
            // num of spaces needed to line up text = maxNumOfSpaces - digits in currentWord
            // print spaces that many times:
            for (int k = 0; k < maxNumOfSpaces - numDigits(*(*(arr + i) + j)); k++) {
                cout << ' ';
            }
            // print value
            cout << *(*(arr + i) + j);
            cout << ' ';
        }
        cout << endl;
    }
}

// get number of digits in an integer
int numDigits(int x) {
    return (x < 10 ? 1 :
        (x < 100 ? 2 :
        (x < 1000 ? 3 :
        (x < 10000 ? 4 :
        (x < 100000 ? 5 :
        (x < 1000000 ? 6 :
        (x < 10000000 ? 7 :
        (x < 100000000 ? 8 :
        (x < 1000000000 ? 9 :
        10)))))))));
}

Sample run of the program

How many rows? 5
Enter the fill value: 7
 7  7  7  7  7  7  7  7  7  7  7  7
 8  8  8  8  8  8  8  8  8  8  8  8
 9  9  9  9  9  9  9  9  9  9  9  9
10 10 10 10 10 10 10 10 10 10 10 10
11 11 11 11 11 11 11 11 11 11 11 11
How many rows? 3
7 7 7 7 7 7 7 7 7 7 7 7
8 8 8 8 8 8 8 8 8 8 8 8
9 9 9 9 9 9 9 9 9 9 9 9
How many rows? 10
Enter the fill value: 50
 7  7  7  7  7  7  7  7  7  7  7  7
 8  8  8  8  8  8  8  8  8  8  8  8
 9  9  9  9  9  9  9  9  9  9  9  9
50 50 50 50 50 50 50 50 50 50 50 50
51 51 51 51 51 51 51 51 51 51 51 51
52 52 52 52 52 52 52 52 52 52 52 52
53 53 53 53 53 53 53 53 53 53 53 53
54 54 54 54 54 54 54 54 54 54 54 54
55 55 55 55 55 55 55 55 55 55 55 55
56 56 56 56 56 56 56 56 56 56 56 56
How many rows? 15
Enter the fill value: 2
 7  7  7  7  7  7  7  7  7  7  7  7
 8  8  8  8  8  8  8  8  8  8  8  8
 9  9  9  9  9  9  9  9  9  9  9  9
50 50 50 50 50 50 50 50 50 50 50 50
51 51 51 51 51 51 51 51 51 51 51 51
52 52 52 52 52 52 52 52 52 52 52 52
53 53 53 53 53 53 53 53 53 53 53 53
54 54 54 54 54 54 54 54 54 54 54 54
55 55 55 55 55 55 55 55 55 55 55 55
56 56 56 56 56 56 56 56 56 56 56 56
 2  2  2  2  2  2  2  2  2  2  2  2
 3  3  3  3  3  3  3  3  3  3  3  3
 4  4  4  4  4  4  4  4  4  4  4  4
 5  5  5  5  5  5  5  5  5  5  5  5
 6  6  6  6  6  6  6  6  6  6  6  6
How many rows? 3
7 7 7 7 7 7 7 7 7 7 7 7
8 8 8 8 8 8 8 8 8 8 8 8
9 9 9 9 9 9 9 9 9 9 9 9
How many rows? 6
Enter the fill value: -1
Please enter a positive number.
Enter the fill value: 0
7 7 7 7 7 7 7 7 7 7 7 7
8 8 8 8 8 8 8 8 8 8 8 8
9 9 9 9 9 9 9 9 9 9 9 9
0 0 0 0 0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1 1 1 1 1
2 2 2 2 2 2 2 2 2 2 2 2
How many rows? 0
How many rows? -1

I hope you find this helpful, let me know if you find any questions or corrections.

- Jonah Lawrence

Twitter: @DenverCoder1

Making a Responsive (Birthday) Card with HTML and CSS

Jonah Lawrence — Sun, 06 Dec 2020 13:04:40 +0000

In this tutorial, I will show you how to make a responsive card using just HTML and CSS.

A responsive card is one that looks good on every size screen. We can accomplish this by using flexbox, relative heights and widths instead of absolute measurements, and also @media rules to define CSS properties to take effect only on specific screen sizes.

The HTML

Here we have a simple card. Inside, we have an image and some text.



<div class="card">
    <img src="./birthday.svg" alt="birthday" class="birthday">
    <div class="text">
      <h1>Happy Birthday!</h1>
      <p>I hope you have a wonderful birthday</p>
      <p>- Jonah Lawrence</p>
    </div>
  </div>

Relative Sizes and Flexbox

Here I have set the height to 85vh (85% of the viewport height) and the width to 80vw (80% of the viewport width). Using relative measurements like this instead of absolute measurements (ex. 800px) allows you to have elements that stretch and shrink depending on how large the screen is.

Using flexbox, we can spread the elements in the card across the height or width. We can also use this to center them vertically and horizontally. I recommend checking out Flexbox Froggy by Codepip for an interactive way to understand how flexboxes work.

By default, the flex direction is row (left to right), but you can overwrite this by using flex-direction: column (top to bottom). Now our image appears on top and the text appears on the bottom.



.card {
  height: 85vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

`@media` Rules

When the screen is at least 1000px wide, we don't need to keep the image on top anymore, we can put it side by side with the text.

Using a @media rule like the one below, when the screen is a minimum width of 1000px, the flex-direction: row-reverse will be applied to .card causing the flexbox to place items right to left (the image on the right and the text on the left.



@media only screen and (min-width: 1000px) {
  .card {
    flex-direction: row-reverse;
  }
}

On very short devices such as phones in landscape, we may want to use this landscape layout as well, so we can use the following rule using max-height.

The CSS properties inside this rule will only take effect on screens with a maximum height of 640px.



@media only screen and (max-height: 640px) {
  .card {
    flex-direction: row-reverse;
  }
}

Demo

Try running the demo in full page view to see the effects.

Resize the viewport to switch from portrait view to landscape view.

Watch the full tutorial

In this video, I walk through the full process of creating this demo from scratch.

For a full understanding of how I designed this responsive birthday card, be sure to check it out!

About me

My name is Jonah Lawrence and I am a full stack developer.

You can find me on:

YouTube 📺 https://www.youtube.com/DevProTips

Twitter ✍ https://twitter.com/DenverCoder1

Github 👨‍💻 https://github.com/DenverCoder1

If you like my content, be sure to react, like, and subscribe to my channel!

Forem: Jonah Lawrence

Create and Elevate Your GitHub Profile README

Create and Elevate Your GitHub Profile README

Getting Started

Adding Dynamic Content

1. Typing Animation with Readme Typing SVG

2. Contribution Streak with GitHub Readme Streak Stats

3. Badges and Custom Icon Badges

4. YouTube Video Cards with GitHub Readme YouTube Cards

5. GitHub Stats with GitHub Readme Stats

6. Activity Graph with GitHub Readme Activity Graph

Putting It All Together

Conclusion

Hosting a Python Discord Bot for Free with Fly.io

Intro

Deploying a Python Discord Bot to Fly.io

1. Install the flyctl command line tool

Mac OS

Windows

Arch Linux

Linux

2. Create an account by running flyctl auth signup and finishing through the browser

3. Add a Dockerfile with the Python version and dependency install method

Method 1: requirements.txt

Method 2: Using Poetry

4. flyctl launch

5. flyctl deploy

6. Set the environment vars

Continuous deployment from GitHub

Conclusion

Why Most Wordle Clones are Wrong!

The mistake

Example:

As another example:

The solution

Conclusion

Using GitHub Actions to Publish Doxygen Docs to GitHub Pages

My Workflow

Example Usage

Submission Category:

Yaml File or Link to Code

DenverCoder1 / doxygen-github-pages-action

GitHub Action for deploying Doxygen documentation to a GitHub pages branch

Doxygen GitHub Pages Deploy Action

Basic Usage

Options

In the Making

1. Checkout repository

2. Install Doxygen

3. Generate Doxygen Documentation

4. Create .nojekyll

5. Deploy to GitHub Pages

Additional Resources / Info

GitHub Action for Updating Your Readme with a Download Button

My Workflow

Getting started

Submission Category:

Yaml File or Link to Code

DenverCoder1 / readme-download-button-action

GitHub Action workflow configuration for keeping a direct download link to the latest version on your repo's readme

Readme Download Button Action

Example

Basic Usage

Step 1

Step 2

Background

Making of this workflow

Additional Resources / Info

Keeping your dependencies updated automatically with Dependabot

Make sure your packages have version numbers

Automatic updates with Dependabot

Step 1 - Click on Insights

Step 2 - Click "Dependency graph", then "Dependabot"

Step 3 - Enable Dependabot and create a config file

Step 4 - Push the configuration file to your main branch and wait for pull requests

Reviewing Dependabot PRs

Conclusion

How to run an HTML/PHP website on Localhost

Installation

Open a command prompt in your working directory

1. Install the `flyctl` command line tool

2. Create an account by running `flyctl auth signup` and finishing through the browser

3. Add a `Dockerfile` with the Python version and dependency install method

4. `flyctl launch`

5. `flyctl deploy`

`@media` Rules