DEV Community: Ayoazeez26

SegWit: Why we needed it

Ayoazeez26 — Fri, 04 Sep 2026 20:26:32 +0000

To understand why SegWit came about, we need to start with how bitcoin transactions are constructed. Bitcoin transaction data basically contains data that locks and unlocks bitcoins. An example transaction data is

010000000110ddd830599b17cc690535f7df28a84466eaca3c22f0d55b79023b6570f4fbc5010000008b483045022100e6186d6f344ce4df46b2e15d87093d34edbf5b50462b6b45f9bd499a6a62fbc4022055f56a1c4a24ea6be61564593c4196b47478a25cf596c1baf59f5a9a229b637c014104a41e997b6656bc4f5dd1f9b9df3b4884cbec254d3b71d928587695b0df0a80417432f4ca6276bc620b1f04308e82e70015a40f597d8260912f801e4b62ab089effffffff0200e9c829010000001976a9146f34d3811aded1df870359f311c2a11a015e945388ac00e40b54020000001976a91470d6734de69c1ac8913892f2df9be0e738d26c2d88ac00000000

This transaction spends from and pays to a Pay-to-PubKey-Hash (P2PKH) addresses which was the standard script type before SegWit. When deserialized, it looks like this

{
  "version": "01000000",
  "inputcount": "01",
  "inputs": [
    {
      "txid": "10ddd830599b17cc690535f7df28a84466eaca3c22f0d55b79023b6570f4fbc5",
      "vout": "01000000",
      "scriptsigsize": "8b",
      "scriptsig": "483045022100e6186d6f344ce4df46b2e15d87093d34edbf5b50462b6b45f9bd499a6a62fbc4022055f56a1c4a24ea6be61564593c4196b47478a25cf596c1baf59f5a9a229b637c014104a41e997b6656bc4f5dd1f9b9df3b4884cbec254d3b71d928587695b0df0a80417432f4ca6276bc620b1f04308e82e70015a40f597d8260912f801e4b62ab089e",
      "sequence": "ffffffff"
    }
  ],
  "outputcount": "02",
  "outputs": [
    {
      "amount": "00e9c82901000000",
      "scriptpubkeysize": "19",
      "scriptpubkey": "76a9146f34d3811aded1df870359f311c2a11a015e945388ac"
    },
    {
      "amount": "00e40b5402000000",
      "scriptpubkeysize": "19",
      "scriptpubkey": "76a91470d6734de69c1ac8913892f2df9be0e738d26c2d88ac"
    }
  ],
  "locktime": "00000000"
}

The scriptSig field which contains the signature is large and makes up a significant portion of the total transaction size, which accounts for about 60% of the blockchain size.
The transaction data above is used to compute the transaction id (txid) which serve as a reference for the relation between two transaction points. As you can see in the deserialized data above, each input has a txid field which points to the transaction that created the output that is about to be spent by being used as an input in this transaction. You can also search for a transaction on a blockexplorer by using its txid.

Ideally, txids are meant to be immutable, because it is a unique identifier of a transaction. This was exploited in the past by malicious peers because the signature could be tampered with by adding spaces or changing a thing or two that would still make the signature valid but the txid would be different. For example, if the signature contained a 3, a malicious peer could change that to 7 + 3 - 7 which still equals 3 and therefore make the signature valid because ideally nothing changed but the transaction id would be completely different. The implication of this was that if a transaction with a txid A was made and before it was confirmed, someone else modified the transaction to have a new txid B. The modified txid gets added to the blockchain and then trying to check for the transaction with txid A would always not return anything because that particular transaction's txid has been changed. This is widely known as the transaction malleability problem. This also made it difficult for the Lightning Network protocol to function as proposed because how it operates is by spending and receiving unconfirmed transactions, so changing their txids could prove costly by invalidating a lot of transactions and making it impossible for outputs to be used as inputs in new transactions.

The proposal of SegWit brought about a handful of improvements and fixes to the bitcoin ecosystem. It proposed moving the signature which is what could be tampered with to generate a new txid for the same transaction into a new field called the witness field. The witness field would be excluded when computating the txid so changes to the signature and other fields that the witness field accommodates would not affect the txid and this made layer two protocols like the Lightning Network possible to operate as expected.

Another benefit of SegWit implementation was effectively increasing the block size by introducing a new way to measure block data known as block weight. Block weight is defined as (Base size * 3) + Total size where base size is the block size in bytes with the original transaction serialized without any witness related data and total size is the block size in bytes with transactions serialized including the base data and witness data. The limit of block weight was set as 4 million units. This introduction would see SegWit transactions weigh lighter than non-SegWit transactions, and since miners charge for fees using the weight of transactions, SegWit transactions would effectively be charged lower fees.

Script versions is a technical trick employed by SegWit to make it easier to deploy future upgrades to the Bitcoin protocol. It exists so that a script's spending rules can change entirely just by incrementing a number in the output script without needing a new address format or breaking how older nodes relay and store the transaction. Here is the same kind of transaction like the one above but restructured for SegWit:

{
  "version": "01000000",
  "marker": "00",
  "flag": "01",
  "inputcount": "01",
  "inputs": [
    {
      "txid": "3c735f81c1a0115af2e735554fb271ace18c32a3faf443f9db40cb9a11ca6311",
      "vout": "00000000",
      "scriptsigsize": "00",
      "scriptsig": "",
      "sequence": "ffffffff"
    }
  ],
  "outputcount": "02",
  "outputs": [
    {
      "amount": "b113030000000000",
      "scriptpubkeysize": "16",
      "scriptpubkey": "0014689a681c462536ad7d735b497511e527e9f59245"
    },
    {
      "amount": "cf12000000000000",
      "scriptpubkeysize": "16",
      "scriptpubkey": "00148859f1e9ef3ba438e2ec317f8524ed41f8f06c6a"
    }
  ],
  "witness": [
    {
      "stackitems": "02",
      "0": {
        "size": "47",
        "item": "30440220424772d4ad659960d4f1b541fd853f7da62e8cf505c2f16585dc7c8cf643fe9a02207fbc63b9cf317fc41402b2e7f6fdc1b01f1b43c5456cf9b547fe9645a16dcb1501"
      },
      "1": {
        "size": "21",
        "item": "032533cb19cf37842556dd2168b1c7b6f3a70cff25a6ff4d4b76f2889d2c88a3f2"
      }
    }
  ],
  "locktime": "00000000"
}

More SegWit benefits can be found here

We can see the additional witness field to the transaction and the scriptsig in the input is empty and the scriptsigsize is 00. Segwit was activated as a soft fork in 2017, it being a soft fork meant it was a backward compatible upgrade which means that nodes that do not have SegWit activated yet would still process Segwit transactions the way they would normally and would not reject them and cause a split in the network

References:

Using vue-clickaway for your dropdowns

Ayoazeez26 — Thu, 05 Jan 2023 00:45:16 +0000

Do you ever want to close a dropdown anytime the user clicks outside of it? vue-clickaway is a package that covers listening for clicks outside an element so you can perform actions when it happens. I will be taking you on the easy installation process and how to use it within your components.

PREREQUISITE

Knowledge of Vue or Nuxt
Install vue-clickaway

Click here to install the package via npm or yarn. After installing, the recommended way of usage is to import clickaway into the component you intend to use it as a mixin like this:

import { mixin as clickaway } from 'vue-clickaway';

The next step is to call the mixin inside your

export default like this mixins: [ clickaway ]

After that, you call the method you want to trigger on clickaway in your template on your dropdown parent element.

v-on-clickaway="away"

Final step is to create the away function and watch the magic happen. Let's go ahead to demonstrate an example for you so you can understand how it works, if you don't already.

This example was built on a Nuxt.js project. The first thing I did after installing clickaway was to create it as a plugin so I would not have to import it and use it as a mixin on every component I intend to use it on

// plugins/clickaway.js

import { mixin as clickaway } from 'vue-clickaway'
import Vue from 'vue'

Vue.mixin({
  mixins: [clickaway]
})

Now add the clickaway file inside the plugins array in your nuxt.config.js

// nuxt.config.js

plugins: [ '~/plugins/clickaway' ],

Now we can go ahead to call our method on the clickaway directive

// components/Navbar.vue
<script>
  export default {
    data: () => ({
      showCityDrop: true,
      cityDrop: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]
    }),
    methods: {
      closeCityDrop () {
        this.showCityDrop = false;
      }
    }
  }
</script>

<template>
  <div v-if="showCityDrop" v-on-clickaway="closeCityDrop">
    <p v-for="item in cityDrop" :key="index" :to="item.to" class="drop flex items-start text-primary mb-4">
      {{ item }}
    </p>
  </div>
</template>

And that's all you need to do to use clickaway to close your dropdown when the user clicks outside of it. It has other use cases aside the use case demonstrated above. You can use vue clickaway whenever you need to listen outside of an element to perform actions.

I hope you find this helpful

What are topics a Junior Vue Developer can write about

Ayoazeez26 — Sun, 13 Nov 2022 01:25:54 +0000

This is a question I have been pondering on subconsciously for a while now. I would love topic suggestions on what I could write about as a Junior Vuejs developer with over 2 years experience writing Vue. I have a goal of increasing the rate at which I write articles and this would help a lot. Thanks

I used the SPREAD OPERATOR for the first time 🤯🤯

Ayoazeez26 — Wed, 19 May 2021 13:30:00 +0000

What is a spread operator?

The spread operator is used when all elements of an iterable variable such as an object or an array needs to be included in some sort of a list. This has a lot of use cases, below is a basic description of what using the spread operator looks like:

I was recently consuming API endpoints and I came across an endpoint whose response is an array of arrays and each array item contains several objects which I needed to get. First instance was to do a forEach() to loop through each arrays. Then I proceeded to do another forEach() to get to the individual objects of each of the arrays. All was going fine until I decided to render those items to the DOM and it turns out only the last array of objects was getting rendered. This was a point of confusion because everything seems to be working fine. After a lot of trying to figure things out, I decided to use a spread operator after the first forEach loop to push each item in each of the arrays to an empty array. This makes it that all objects are in a single array

Centering content in the middle of a page

Ayoazeez26 — Tue, 30 Mar 2021 23:22:37 +0000

Have you ever needed to center an element to the middle of a page? I would proceed to explain the simple way you can achieve that :)

The image above was gotten from a chellenge on Frontend Mentors where you sign up and take challenges and try to make your solution look as close to the design as possible.

As you can see from the image above, the container of the whole content is centered in the page. This is what my solution currently looks like

As you can see, it's perfect with the exception of the container being in the center of the page. We will proceed to make it centered now.

Setting the position of the container to absolute takes it out of the flow of the document. Next thing to do is to set the top and left properties to 50% each.

The reason we did that was to set the container to 50% from the top of the page and 50% from the left. Our container now looks like this

what actually happens here is that the origin of the container is its top left position, looking objectively at our solution would show you that the top left corner of our container is actually at the center of the page.

To make our container body appear at the body instead of just the top-left corner, we add a final style property.

What the transform translate property does is to move the container and in general, it acts relative to the body of the container so the (-50%,-50%) moves the container backwards half of it's width and height, so originally if we had our width set to 600px, -50% moves it backward 300px and same goes for the height.

Our container should now look like this

So, with just 4 style properties, we were able to style our container and center it on our page. I hope you have a better understanding of how centering an element works now.

Here's a link to the github repo

My Cry for Help

Ayoazeez26 — Mon, 13 Jul 2020 12:38:01 +0000

Hey guys, so I'm on Hackerrank and I decided to take on their 30 days of code challenge and lo and behold, I get stuck on day 1, so so frustrating. I decided to leave it for a while and came back to it after a few weeks but still with no positive results, so this is my cry for help for anyone willing to assist me in passing through day 1. Thank you in anticipation

The CSS :not() Selector

Ayoazeez26 — Fri, 26 Jun 2020 07:05:42 +0000

I stumbled upon this selector in CSS recently and I did a little reading on it and found its use cases very interesting so I decided to share it.

The :not() CSS selector has a wide range of use cases.

Use Cases

The general idea behind it's use case is to prevent certain items from being selected, hence it is known as the negation pseudo-class.

Using this saves you time and more lines of code, as in this case you would have had to give the remaining p tags a specific class name and apply the style to that class.

Linking :not() with other pseudo selectors

This selector can also be used together with other pseudo-class and pseudo-element selectors. For example, the following will add a box shadow and a background color to all buttons that do not contain the plump class when they are being hovered on.

Using :not() globally

You can also use the tag :not() selector globally in the sense that you are not applying it to an element so it selects all elements in the document except the ones specified in the brackets

The CSS style above styles the color of every element in the document except the buttons.
Another example of the :not() Selector use case is this:

More Examples

The above example will style all input text fields that are not disabled.
I hope you understand the basics and the general idea behind this awesome CSS Selector.

Resources for more insights

For further insights on the :not() Selector, I would recommend you check:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://tympanus.net/codrops/css_reference/not/