Git Reset Or Git Revert?

A few months ago I had to clean up some branches from an older project that was being added to with new features where I needed to rollback one of the branches to a specified commit. 

In my mind I really had two choices overall: git reset and git revert. Here are the main descriptions for each:

NAME

git-revert - Revert some existing commits

SYNOPSIS

git revert [--[no-]edit] [-n] [-m <parent-number>] [-s] [-S[<keyid>]] <commit>…​
git revert (--continue | --skip | --abort | --quit)

DESCRIPTION

Given one or more existing commits, revert the changes that the related patches introduce, and record some new commits that record them. This requires your working tree to be clean (no modifications from the HEAD commit).

Note: git revert is used to record some new commits to reverse the effect of some earlier commits (often only a faulty one). If you want to throw away all uncommitted changes in your working directory, you should see git-reset[1], particularly the --hard option. If you want to extract specific files as they were in another commit, you should see git-restore[1], specifically the --source option. Take care with these alternatives as both will discard uncommitted changes in your working directory.

NAME

git-reset - Reset current HEAD to the specified state

SYNOPSIS

git reset [-q] [<tree-ish>] [--] <pathspec>…​
git reset [-q] [--pathspec-from-file=<file> [--pathspec-file-nul]] [<tree-ish>]
git reset (--patch | -p) [<tree-ish>] [--] [<pathspec>…​]
git reset [--soft | --mixed [-N] | --hard | --merge | --keep] [-q] [<commit>]

DESCRIPTION

In the first three forms, copy entries from <tree-ish> to the index. In the last form, set the current branch head (HEAD) to <commit>, optionally modifying index and working tree to match. The <tree-ish>/<commit> defaults to HEAD in all forms.

History: To Be Seen Or Not To Be See. That Is Thy Question

While there's a lot to look at, and there are other considerations to be thinking about, for me it mainly came down to whether or not I wanted a clean commit history or to maintain the older history of commits as well. 

Since I didn't want to keep the history, because there was no need in maintaining any commit history after the commit that I wanted to be the last shown (before the new features were added). I stayed with what I had done in the past--good old git-reset:

git reset --hard <commit>
git push --force

It's clean. It gets me what I want. It doesn't have the overhead of managing conflicts or multiple reverts, which can make it even more unwieldy because it adds another commit for each rollback. 

And absolutely--if not coordinated with multiple users it can lead to problems because it essentially re-writes history--and there are use cases where you may need or want to keep that history alive. 

But if there are bad commits that need to go?

git reset for the win!

So About That NY's Resolution...

And then right before I know it, three months has passed, and there's not one new blog post written.

But, while I could be a part of the New Year's resolutions statistics machine, this post only goes to show that I won't be going down without a fight--

I can feel those blog posts coming...

 

 

Why I Decided To Use Vitest Instead Of Jest (For My Purposes At Least)

 

 

 

I've been working on this new project where it's vanilla Javascript and HTML and really needed and wanted to implement good Javascript testing (more on that later). While I will need to cover more types of testing I first wanted something easy to setup that felt familiar like back-end unit testing in other languages. 

 

You may be asking yourself, what did you, or your teams, or teams you've been on use in the past for Javascript testing? 

I am going to lift the banner of shame:

• For React/Node.js some did use Jest. I saw it but didn't always work on those projects in-depth. I was probably working more on the back-end for those, albeit did pick up those skills, but I trended toward Vue.js...for another post.
  
  
• With ASP.NET/.NET MVC/Static HTML (basically fill in the blank), and javascript libraries like jQuery...sometimes absolutely no unit testing whatsoever because a lot are basic fetch calls, or yes some could be fairly complex, used Javascript classes, modularization, etc. but you had a browser debugger, you had integration testing.
  
  Sure, you made it easy to read, organized for good library and folder structures, etc. But testing was second or third to all of that.
  
  
• And then there was good old fashioned custom Javascript tests where you really needed to make sure it wasn't going to blow up if someone changed that code.

After years of projects in different languages and frameworks, the focus has been more on the back-end (especially in my own experience) and absolutely, being a full stack developer, you have to know CSS, HTML, Javscript, and client side frameworks--be modern, and I love that--tweaking out the CSS, making my Javascript more performant, doing more with less (no pun intended and I do not...).

 

But testing? Testing has always not been at the forefront of my development. 

 

And while I could be shamed--it's just been an opportunity to level up and do what I know I should be doing, as well as being able to pass on that knowledge to other developers who don't have that in their back pocket, or don't have those resources in their own companies or organizations (because not all places have dedicated front-end developers who focus solely on the client side--I have been lucky enough to have worked at places like that even if I did not pick up everything they were giving out at those times though).

 

So Now That The Above Is Done

I did not end up using Jest because of the experimental support for Javascript modules (aka ECMAScript Modules aka ESM) and I had heard that Vitest was a little faster. 

 

And Jest failed me. 

Because I tried it first which is when I found out it didn't have true support for ESM.

 

When I tried Jest (and just thought it would work, because I did not RTM on that part), I just thought to myself "And this is why I'm not doing this a lot because it should be much easier than this". 

 

And yes, I should have read the docs on that part before I chose it--but it was easy and quick to try versus choosing a whole back-end framework where you should due your due diligence before choosing and implementing.

 

So Vitest it was and it worked flawlessly.

 

Make the test files, do the installs, update my package.json, make a vitest.config, open up a terminal in Visual Studio, and I was off with a simple "npm test".

 

And it was exactly what I wanted. 

 

The output and seeing the tests, what failed, what passed was exactly what I was used to (overall) from a back-end coding perspective. And I didn't need to change any of my code or rely on a testing framework which was still experimental for ESM.

 

Since then I've found out and and read up more on Vitest (docs are great) and how it's really gaining support and being used (and yes, just in case you were wondering I am using Vite for my build as well).

 

I feel like I made a good choice, and more importantly--now I'm squarely in the game when it comes to Javascript and testing.

 

Vite and Vitest for the win!

NY Resolution: Blog More

I realize I have said this before, and while it has made me post over the last now two calendar years, albeit still not a lot, I will say it again, as a New Year's resolution:

I will blog more.

I will blog more.

I will blog more (hopefully...?).

Quick Bytes: Iterate Through A Tag Collection

 If you find yourself need to iterate through some tags in vanilla Javascript you can use:

const divElements = document.querySelectorAll('div');

 divElements.forEach(dv => {

 const query = dv.textContent.trim();

 const displayType = dv.getAttribute('display') || 'table';  // Default to 'table'

}); 

 

You could also use something like:

Array.from(divElements).forEach(dv => {

  const query = dv.textContent.trim();

  const displayType = dv.getAttribute('display') || 'table';

  dv.style.display = (displayType === 'table') ? 'block' : 'inline';

});

Which is just a little different overall in syntax and function and converts an object into an Array.

Quick Bytes: A HTML And Javascript Readability Analyzer

 
This was a fun quick app that does an analysis on reading and grade levels and takes some input and then outputs the score and some custom grade level information.

===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Readability Analyzer</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 50px auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        h1 {
            text-align: center;
            color: #007bff;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            margin-bottom: 20px;
            font-size: 16px;
        }
        button {
            width: 48%;
            padding: 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            margin-right: 2%;
        }
        button.clear {
            background-color: #dc3545;
        }
        button:hover {
            background-color: #0056b3;
        }
        button.clear:hover {
            background-color: #c82333;
        }
        .result {
            margin-top: 20px;
            padding: 20px;
            background-color: #e9ecef;
            border-radius: 5px;
        }
        .result p {
            font-size: 18px;
            margin: 10px 0;
        }
        footer {
            text-align: center;
            margin-top: 50px;
            font-size: 14px;
            color: #666;
        }
        @media (max-width: 600px) {
            .container {
                margin: 20px;
                padding: 15px;
            }
            button {
                padding: 10px;
                font-size: 16px;
            }
            textarea {
                height: 150px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

   <div class="container">
    <h1>Readability Analyzer</h1>
    <textarea id="inputText" placeholder="Paste your text here..."></textarea>
    <div>
        <button onclick="calculateReadability()">Analyze Readability</button>
        <button class="clear" onclick="clearText()">Clear</button>
    </div>

    <div id="result" class="result" style="display: none;">
        <p><strong>Scores:</strong></p>
        <p id="fleschScore"></p>
        <p id="fogScore"></p>
        <p id="daleChallScore"></p>
    </div>
  </div>


    <footer>
        Readability Analyzer
    </footer>

    <script>
    function countSyllables(word) {
        word = word.toLowerCase();
        if(word.length <= 3) return 1;
        word = word.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
        word = word.replace(/^y/, '');
        const syllableMatch = word.match(/[aeiouy]{1,2}/g);
        return syllableMatch ? syllableMatch.length : 1;
    }

    function calculateReadability() {
        const text = document.getElementById('inputText').value;

        const sentences = text.split(/[.!?]+/).filter(Boolean).length;
        const words = text.split(/\s+/).filter(Boolean);
        const wordCount = words.length;
        const syllableCount = words.reduce((acc, word) => acc + countSyllables(word), 0);
        const difficultWordCount = words.filter(word => countSyllables(word) > 2).length;

        // Flesch-Kincaid Grade Level
        const fleschKincaid = 0.39 * (wordCount / sentences) + 11.8 * (syllableCount / wordCount) - 15.59;
        let fleschDescription = getGradeDescription(fleschKincaid);
        
        // Gunning Fog Index
        const gunningFog = 0.4 * ((wordCount / sentences) + 100 * (difficultWordCount / wordCount));
        let fogDescription = getGradeDescription(gunningFog);

        // Dale-Chall Readability
        const difficultWordPercentage = (difficultWordCount / wordCount) * 100;
        const daleChall = 0.1579 * difficultWordPercentage + 0.0496 * (wordCount / sentences) + (difficultWordPercentage > 5 ? 3.6365 : 0);
        let daleChallDescription = getGradeDescription(daleChall);

        // Display individual results
        document.getElementById('fleschScore').textContent = `Flesch-Kincaid: ${fleschKincaid.toFixed(2)} (${fleschDescription})`;
        document.getElementById('fogScore').textContent = `Gunning Fog: ${gunningFog.toFixed(2)} (${fogDescription})`;
        document.getElementById('daleChallScore').textContent = `Dale-Chall: ${daleChall.toFixed(2)} (${daleChallDescription})`;
        document.getElementById('result').style.display = 'block';
    }

    function getGradeDescription(score) {
        if (score <= 4) {
            return "K - 4th Grade: Very easy to read, suitable for young readers.";
        } else if (score <= 7) {
            return "5th - 7th Grade: Easy to read, suitable for children.";
        } else if (score <= 10) {
            return "8th - 10th Grade: Moderately challenging, suitable for teens.";
        } else {
            return "11th Grade and Above: Challenging, suitable for advanced readers or adults.";
        }
    }

    function clearText() {
        // Clear the input text area and hide the results
        document.getElementById('inputText').value = '';
        document.getElementById('result').style.display = 'none';
    }
</script>


</body>
</html>

Don't Forget To Update That Azure Key Vault URL When Creating A New Version...Wait...Just Get The Latest

 

Sometimes you need to update a Secret in an Azure Key Vault and you may be referencing that from an Environment Variable. 

If you use ADF when you reference a Key Vault in a Linked Service it goes to the latest version automatically. 

When adding it as an environment variable so a Function could access it (securely and the MS way), I've used:

@Microsoft.KeyVault(SecretUri=https://myvault.vault.azure.net/secrets/mysecret/ec96f02080254f109c51a1f14cdb1931)

If the value was changed, I would often forget to update the version reference.

After some errors I've moved it to just be:

@Microsoft.KeyVault(SecretUri=https://myvault.vault.azure.net/secrets/mysecret/)

 

In this way it does not need to reference the version so it will always get the latest value and there's nothing to remember for the specific reference. Just change it in Key Vault and that's it!

 

Re: Ganache And Implementing The New

For a long time I would test contracts on testnets versus using any local environments. I would see scripts and code for contracts that I knew worked, starting out with simple tokens, and just push out .sol files through Remix (where you can do unit testing), compiling and interacting with the contract and testing functionality. 

It was, and is, easy for simple tokens and contracts, and even to a certain extent, large and more involved contracts if you know the code and what you want to do. 

And there's only so much you can do as Solidity isn't an all encompassing program language.

I'm not saying it's for every project or group, or that you shouldn't have a local environment like you do with so many other frameworks/languages/systems--but it fits within that ecosystem and you can cleanup code/waste.

But then I found Ganache and I'm still using it, eschewing other tools.

Because I honestly just need that for the type of projects I'm doing.

While I have to sometimes implement the very latest for different domains, for others, I can peripherally know what's new, but not necessarily implement it and use something "less new" regardless of support and other updates.

Again, I'm not saying you shouldn't be using something like Hardhat, I'm just saying I understand you if you are not.

It's a balance.

AI Will Kill The SaaS? Me Thinketh...Maybe?

I was reading this article on Medium and I think there's a lot of validity to it for a number of reasons but first, a snippet from the article:

The beating heart of this software will be AI and LLMs. In some cases, these entire workflows might be automated, where no UI is needed, and AI just navigates a series of API calls to do the job independently.

Don’t believe this is possible today? Here’s an example of how an intern at a YC startup built an AI-powered invoice processing pipeline instead of paying $16K for a SaaS tool. It took him, wait for it… two hours.

But, as the article also goes on to say, customized apps and processes, which are needed for business, and which AI can help create--still doesn't make it a SasS killer.

Why?

Because AI will augment SaaS, and Enterprises will still like SaaS because of software agreements, liability, coding and security resources, et al.--I agree. 

But it will change. It will depend on the company. And I'm not saying it's the right decision. 

AI helps automate tasks. Some of that is custom code and applications and processes. 

If you do business like everyone else does business what then makes you unique?

You have to have some SaaS.

But for customized processes, what makes you standout--you didn't really need SaaS anyway.

So maybe this isn't even a thing?

Hmmm.

 

 

Quick Bytes: Javascript Hex To Uint8Array

In a recent project I needed some javascript code to take a hex string and then convert to a Uint8Array.

Here's some quick code to get that done.

function hexStringToUint8Array(hexString) {
    if (hexString.length % 2 !== 0) {
        throw "Invalid hexString";
    }
    var arrayBuffer = new Uint8Array(hexString.length / 2);
    for (var i = 0; i < hexString.length; i += 2) {
        var byteValue = parseInt(hexString.substring(i, i + 2), 16);
        if (isNaN(byteValue)) {
            throw "Invalid hexString";
        }
        arrayBuffer[i / 2] = byteValue;
    }
    return arrayBuffer;
}