DEV Community: Edward Naidoo

Introduction to Smart Contracts Pt2

Edward Naidoo — Sun, 16 Feb 2025 08:16:00 +0000

Continuing from the first post, we have gone over the examples of smart contracts and what they essentially look like with an explanation. Now I am going to continue and get more into detail.

Here is where we left off, with this subcurrency example:

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.4;

contract Coin {
    // The keyword "public" makes variables
    // accessible from other contracts
    address public minter;
    mapping (address => uint) public balances;

    // Events allow clients to react to specific
    // contract changes you declare
    event Sent(address from, address to, uint amount);

    // Constructor code is only run when the contract
    // is created
    constructor() {
        minter = msg.sender;
    }

    // Sends an amount of newly created coins to an address
    // Can only be called by the contract creator
    function mint(address receiver, uint amount) public {
        require(msg.sender == minter);
        balances[receiver] += amount;
    }

    // Errors allow you to provide information about
    // why an operation failed. They are returned
    // to the caller of the function.
    error InsufficientBalance(uint requested, uint available);

    // Sends an amount of existing coins
    // from any caller to an address
    function send(address receiver, uint amount) public {
        if (amount > balances[msg.sender])
            revert InsufficientBalance({
                requested: amount,
                available: balances[msg.sender]
            });

        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        emit Sent(msg.sender, receiver, amount);
    }
}

address is a type where the variable will take in an address type. Its only for an address and no operations done. It can store addresses of contracts and half of a key pair belonging to any external accounts.

Where did all the time go??

Edward Naidoo — Mon, 12 Feb 2024 08:28:00 +0000

Oof. I just got a notification of my 2 year badge. I can't believe that 2 WHOLE YEARS has gone by.

What I'm doing now? Well...

Self Development

Ever since my recent post, I've been stuck in school. I then continued reviewing and learning more about Python. Mainly the turtle library.

AI

But it was without Perplexity that I would've lagged behind the tech train.

Blender Content

I've made a few more posts on Blender, recently posting my projects on Sketchfab!

Let's see what more content I can make on here. I'm not interested in watching the cobwebs appear on this account.

Stay Tuned...

Credits

Header: Pixabay

Day 8 in Redesigning Nasa's Astronomy Picture of the Day

Edward Naidoo — Sun, 22 May 2022 04:05:33 +0000

Intro -

For the past few days, I have been catching up on what I have missed and maybe rusty on. Reading back on the code was most helpful and just in case you have forgotten what or why I am doing this. I'll tell you.

Recap -

Nasa has an API that allows developers to show the picture of the day of the night sky! For approximately 3 months I have been completing this project where I am making it more "prettier". It is very straight foreword what Nasa currently has, and from months ago or a couple months ago, it was a tiktok/reel trend where people would look back on their birth date and see their image that was taken. I did not choose to do this project because of a trend as it is lightyears behind us. But it was cool how many people used it and I want to make this project more pleasing to look at where it is looking similar to a social media application.

Past to Present -

For a large chunk of time, I have been busy with school but I have looked over how APIs work but have not made enough time for posting. But thankfully I can and today I have done some work. I have been implementing the API to another, not this project as I want to get a grasp of the idea and I don't want to break the real thing. There is still more to learn.

Future -

This weekend or next week I will be recapping on my Javascript and Typescript because there are still some things to learn. I plan on learning from

Net Ninja - YouTube

Black-belt your web development skills. Over 2000 free programming tutorial videos about: - Modern JavaScript (beginner to advanced) - Node.js - React - Vue.js - Firebase - MongoDB - HTML & CSS - PHP & MySQL - Laravel - React Native - Flutter - Open AI - SolidJS ...And many more topics as well :)

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://www.youtube.com/s/desktop/e208051c/img/logos/favicon.ico"
        loading="lazy" />
    youtube.com
  </div>
</div>

. I have learned a lot from this creator and like his content to where I'll watch his video rather than going to online course, but they are still great options.

Plug -

If you want to see the code, I have it on my Github and post updates on DEV blogs on twitter if you are interested in my work.

Back in Action!

Edward Naidoo — Mon, 16 May 2022 17:24:00 +0000

Hi everyone, thank you for your patience while I was busy with exam season and taking a break from that.

I have mentioned it on my twitter (follow if you like my stuff) that I will be posting soon and unfortunately it was not as soon as I hoped, but I'm happy to say that I am back to researching and posting my findings online! I am still interested in Solidity and the inner-workings of Web3, but because it has been so long, I might have to revise and edit my articles. Maybe add more re-done versions that are up to date.

Before I used to post almost every two days, but school is taking a lot of energy and some days I just don't do work, hope you understand. But now I'm planning on extending the times I am posting to like a couple per week so I can research even more within that time.

That's about it from me, cya soon!

Introduction to Smart Contracts

Edward Naidoo — Sat, 19 Mar 2022 04:26:24 +0000

This is Part 2 of my journey understanding Solidity and answering whether this language can change how we develop software forever. I have been reading the official documentation and watching videos on the language and how it is done in a visual and audible environment. I have noticed a newer version as I was reading it and I have been reading it on that version. Version 0.8.12. Now there is 0.8.13.

What I have been reading could be old news depending when you see this so I deeply suggest looking at the latest versions if you want to stay up to date. These changes are more frequent than Flutter updates so keep that in mind. so I have started out by reading examples of smart contracts using this language and I will sum up all of the things I have read so far as the docs are really long.

Intro to Smart Contracts

So some of us might know, but just in case, a smart contract is the behaviour of the transaction between to people on Web3 or with NFTs and Crypto. It's files like a normal project with code written in Solidity with the .sol file type and can be compiled on the internet rather on your machine which is cool. It is what allows you to pay for that Ape or resale it for more currency but smart contracts are more versatile. I'll start off with this example, the Storage example.

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.16 <0.9.0;

contract SimpleStorage {
    uint storedData;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

The first line indicates the license,
The second line defines the Solidity Version with pragma being an instruction for compilers about how the code should be treated,
There are two functions, set() and get()

uint storedData; //unit is unsigned int with 256 bits

To access it normally won’t need the use of this.storedData as you just need to use the name. When you put this contract onto the blockchain, nobody will forcefully stop you doing so but people can overwrite x to be a different int. Your original number and the changed number will stay on the blockchain history.

Here is another example: Subcurrency

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.4;

contract Coin {
    // The keyword "public" makes variables
    // accessible from other contracts
    address public minter;
    mapping (address => uint) public balances;

    // Events allow clients to react to specific
    // contract changes you declare
    event Sent(address from, address to, uint amount);

    // Constructor code is only run when the contract
    // is created
    constructor() {
        minter = msg.sender;
    }

    // Sends an amount of newly created coins to an address
    // Can only be called by the contract creator
    function mint(address receiver, uint amount) public {
        require(msg.sender == minter);
        balances[receiver] += amount;
    }

    // Errors allow you to provide information about
    // why an operation failed. They are returned
    // to the caller of the function.
    error InsufficientBalance(uint requested, uint available);

    // Sends an amount of existing coins
    // from any caller to an address
    function send(address receiver, uint amount) public {
        if (amount > balances[msg.sender])
            revert InsufficientBalance({
                requested: amount,
                available: balances[msg.sender]
            });

        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        emit Sent(msg.sender, receiver, amount);
    }
}

NOW NOW, don't panic! I don't understand everything here, so we are most likely in the same boat. Only some things from the general programming syntax but they can still mean different things and still have the same name which makes things confusing.

What I have shown you is what a smart contract can look like, and in the second part I'll go down into detail what each word may mean and the context behind any terms or phrases in the documentation. I'll also continue reading the documentation.

Thank you very much for unpacking my short findings. If you would like to keep track of my posts and get news of certain posts, follow me on Twitter! If you would like to see my projects, you can go to my Github or go to this account to see the main projects I worked or am still working on.

Cited Works

Introduction to Smart Contracts

Solidity? What is it, and can this language change how we develop software forever?

Edward Naidoo — Fri, 11 Mar 2022 07:07:07 +0000

🛫 The Start

This is a late response to the language called, Solidity. I have only came onto DEV.to early this year and the last time I have read part of the documentation was when it was in version 0.8.4. Now Solidity is in version 0.8.12. Time has flown by, but that is no excuse.

Today I will be embarking on understanding this language and explore the vast horizons in Web3 technology. This will be a a series where I will document everything about what I have learnt and as many resources that supports my argument. Web3 is foreign to me, but from what I understand, I believe that Web3 will exist in the future and will be part of our lives, just not every single individual who has the technology to interact with it. It is a large say when I just said of how foreign it is to me. But I have spent a lot of time on such technologies. Some of them are:

Tokens
Smart Contracts
Defis
Dapps
DAOs
Blockchain intergration
Web2 => Web3 hybrids

and a few in which I cannot think on the top of my head. But now is the time where even though I have an existing project and posting schedule I have to fix, I am willing to create software that makes Web3 great and to solve a variety of problems around the world! Watch me as I plan on spending months on this. I will do a clean restart in my existing research because so much time as passed that I am extremely behind in Web3 related news and development/implementations.

🧐 What I plan to cover and what I plan to avoid

For this research and developing, I do not plan on looking into NFTs and Cryptocurrency related news/development in general. I might read articles to stay updated as much as I can. But the scope is just Web3 and most importantly, Solidity. Maybe on a different post (unrelated to this project and redesigning Nasa's APOD) I will post some things I find interesting.

I think this will be fun...

📚 Resources to start you off on your own - v0.8.12

📚 Resources to start you off on your own - Latest

If find yourself reading this whole post, then thank you, it's really cool when someone reads my posts, and also, if you'd like to. I will add my social media or other links down below so you can keep track of what I'll post or when I'll post. Or something else like "things are going to be delayed".

Day 7 on Redesigning Nasa's Picture of the Day webpage

Edward Naidoo — Fri, 11 Mar 2022 05:00:57 +0000

Hello once again! I'll make this more straight forward

📚 What I have learned for this whole time

Components in React are really functions in javascript where you can easily separate a portion of the whole project into a piece where you can read the code in either it's own file or on the default '/App.js' file which makes your code more clear to you and where they are meant to go. This is pretty well know and if you have been following along reading the code, you will also know that I have separated the main components into it's own file and directory as it does give me a peace of mind.

Now, I'll be going over props. What are props? How can I use them?

For those already in the programming scene, it is similar to this.blank (definitely in javascript) or self.blank (You can find this in Python), where the inputs of the user or developer will go into that function through props. First off, you do not need to type in certain content to everything in every place. With props you can make objects of an account or props of the current date. Heres what I mean.

function Content(props) {
  return (
    // Insert your code
    <h1>My name is {props.name}</h1>
  )
}

function App() {
 return (
    <>
      <Content name="Jordon" />
      <Content name="Samuel" />
      <Content name="Peter" />
    </>
  )
}

I have learnt how to add the correct time on a blank React project, and I think it was javascript too, but the types are not an issue or something to worry about now. There was a lot learnt from that especially on the ways it can be used. If you want to see more on how this is done click here.

🚀 States

A state is when the output of something is changed in real time, and will update depending on the code or any imported library that has a state. On Reactl.org, you can find the clock example in there and see the code on how it looks like. Here is what it looks like in case you don't want to look at it on the website:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

Heres what it looks like with props:

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

🛫 API

I have been watching this tutorial to APIs by FreeCodeCamp. I'll be learning from it and soon apply it to this very project and also continue to post more often.

Thank you so much for reading this post as I did have a chance to make this post a few days ago, but I didn't do it because I procrastinated. It sucks but I'm back at it again.
I have provided some links down below.

Hope to see you again soon!

⚙️ Resources

Day 6 in Redesigning Nasa's Astronomy Picture of the Day

Edward Naidoo — Wed, 02 Mar 2022 22:05:10 +0000

It has definitely been a while since I last posted. Unfortunately, I have not been spending every single day on the project, so I'm going to start again.

🚀 Here is what I have learned so far

What is an API?

Formally, an API is an Application Programming Interface. It is used almost everywhere on the internet and is a gate-key to information stored on a database or where-ever it is stored so developers like us can easily access it.

An API is a set of defined rules that explain how computers or applications communicate with one another.

Request? Response?

Those two words are exceptionally important, and are commonly used words when making or talking about APIs.

A Request is what is sent to the Web server's URI by your API which consists of verbs generally. Uniform Resource Identifier or URI, is a locater with a compact string of characters which identifies resources and locates a resource by depicting its primary access mechanism. Theres a ton of information on how a URI works, but is out of scope for this project. I could come across it in the future, if that does happen, I will document my entire journey through that. I have linked a few resources to support my explanation.

⚙️ Changes to the project

So today I have organized the /src directory in the project. Instead of having everything in the /src directory, I have created a components folder with each component having their own directory, then a static folder to put all of the pictures and svgs.

As you can see from this image, everything is made, and placed, were it will be for the foreseeable future.

Once again, thank you for reading this blog, it's been the longest I have gone without posting, and I will make a comeback with maintaining my weekly streak.

If you want to be notified on any changed on this project, follow my Twitter! I keep track with the things I do and regularly post this projects documentation on DEV.to (which was not that much since I have not posted in a while), and put any useful information that could a lot in your life.

If you would like to see this project, consider checking my Github project and my Github account!

See you Next Time!

📚 Resources - What is an API?

💻 Resources - Request? Response?

Day 5 in Redesigning Nasa's Picture of the Day Webpage

Edward Naidoo — Thu, 24 Feb 2022 05:29:24 +0000

Hi There!
It has been rather slow with this project. I don’t know how to use an API and I am learning, so that will take a while. Right now I have worked on the UI and no coding. I have worked on figma to look back on the designs and I was thinking of how the mobile version should look. As I was searching, I have stumbled on this really cool resource:

statcounter

It shows statistics of many things like Google trends and for my situation, I have found a large variety of mobile resolutions. I think this resource is an amazing stepping stone to understanding the general resolutions for web, mobile (or both) development.

I have signed up for the API key at Nasa’s site so I can experiment with it or use this project as the experiment grounds. I’ll probably make a separate branch in case or make a new project where I learn how to implement an API to gather information about a certain thing.

Oh! A tip for UI design that I forgot. I doubt that this is my idea as it’s simple. When you are in you project, you can make a separate rectangle like a splash screen on stock photos and set it to the resolution you want. With this, you can see what the user will see, if let's say, their system has a 1920x1080p screen, you can see where the height ends. This really did help me as I now know the true scale of how things should be sized so the view can see the appropriate amount of content.

Once again, thank you for reading this post. It is a quick one, but more will come soon. The weekends are coming soon so I can put more time into this project. Cya till next time!

Day 4 - Redesigning Nasa's Picture of the Day Webpage

Edward Naidoo — Sat, 19 Feb 2022 09:04:17 +0000

Wow, what a progress I have made! Good to meet you all, I’ll run you down on all that I have done quickly, then get down to the detailed things. Here we go..

For a few days I have split my work load to fit in with other tasks I had to do. On those days I have, made the closest replication to my designs and are pleased with the results. I have made only one card and all of the needed parts for that part.

This is currently what the navigation looks like. I have fixed the alignment by using

position: relative;

and decreasing the top portion by using -10px. This has aligned things nicely and I have previously added an animation with the logo. I forgot to mention this but it is not a huge deal. I think it looks cool and adds liveliness to the webpage. More animations will soon to come. The Logo moves up whenever you hover over it.

Here is the full illustration of what I see if the site were to be completed. It id obviously not done, but what you see here will most likely be the first thing you will see. I am willing to upscale and downscale this webpage, from a larger monitor, to a mobile device to accommodate most or all users.

As you can see here, the card itself is rather large for my screen. I have said before that I would have a 1920p version and a 1080p version. I thought that the 1920p version would be great for my display, but it is huge which I would need a larger screen. So I have been making this project in the 1080p scale. I know I said that I would go for the 1920p version as the main one, then scale down, but because I have chosen the 1080p version, I can still increase the scale plus decrease the scale and make everything responsive. I just changed the order I am going at. So I hope that makes sense.

I have reached an issue which I did think about but did not know when I will meet this problem again. The heart right now in the code is a png (which explains the blurriness), and to include the function where once you have clicked on it, the whole animation thing plays, I don't know how to do that and keep the state of a users "like". I am not interested in making a social media app for Nasa's APOD site, I just want to make things more modern and less like research where the information may be disregarded since it's far below the picture. I think making the experience more attractive for people to learn more about the photos.

This isn't a fully integrated webpage with all accommodation where people can make accounts and do things like DEV.to. That would increase the API calls significantly to where I might need to pay and if I strive for more viewers and clout towards this site.

🚀 What I have learned:

So recently when working on this project, I have remembered that I have to organize the project files at some point. What I have found was that us React Devs must organize our code the way we think is great for the project and there are no right answer to how the project should be organized. I do have a few thoughts.

I don't like the thought of having all CSS file in one spot, then tsx or jsx files in another. It just seems more time to find that specific file whereas putting both css and jsx/tsx file together would be a reliable choice because you find these file by its purpose or component. Instead of searching based on what file you want to edit, you can search for the navigation folder or the navigation component (which would already be organized in the navigation folder). It is best to take your time and then commit to it and not make any drastic change in the file structure. It can be a pain to change all of the imports to a different directory. Even if VScode can do it a bit faster, it can take long.

Right now, I have not made any new directories yet but they will come soon as I am stacking each component up. Oh! I also separated the code from one App.tsx (or App.js for others) into it's own components to give more readability since both css and tsx file have gotten longer.

Once again, thank you all for reading this. It is late for me but I did procrastinate at the end for today and a bit yesterday so Feb 19 should be the time this will be published, but Feb 17-18 my work so far is done. See you again! 👋🏽

💻 Sites to check out:

📚 Resources:

Day 3 - Redesigning Nasa's Picture of the Day Webpage

Edward Naidoo — Mon, 14 Feb 2022 03:50:15 +0000

Hello again 👋🏽, I have come back with some more news for this project. Yesterday, have made 4 projects in the Github to which I’ll be setting any sort of goals to accomplish and stay organized. You can see in the link below.

Today I have quickly looked back at the APOD site to check all of the main things needed for this webpage. I have them written down, and consists of a:

Date
IMG
Title
IMG Credit
Explanation
Other Credits

These are the main things I will be adding to the project.

For the Design, I have improved of the look of the secondary responsive version (on the right) where the width is 1080p, so then most of the monitors should have no problem.

Finally! I have started with coding the project! this was exciting as I have begun the process to completing the webpage with the actual code. I am satisfied with how the mock ups were, and how not so much has changed fro the first one. This is what the I have completed so far:

As you can see, the navigation is looking pretty good especially on the first day of coding this project. Here how I started off:

You first begin your React project with npm start. This will initiate a local server on your machine. With this, and the barebones project, you will see the React logo spinning as it is live. This is a good thing as it means that nothing went wrong with the project itself.
I then deleted all of the Css code from the App.css file because I will not using it anytime soon. All of the styling will disappear. I also deleted the JSX code from App.tsx (or in javascript, App.js) file. (One thing that helps with making a site is to always set the margin and padding to 0 and make the box-sizing to border-box in the App.css file).
After that, I got to listen to music. Great for me as I can stay in my mode.
Now onto the producing, since I. have been deleting stuff. I now structure my navigation like how I have from my previous projects. At first, I thought I would have the title the Home link as well, but that won't work and I decided to have the title there as is and be an H3 tag.
How I imported the svg logo was to look it up. What I found and forgot, was to include it as a React Component.

import {ReactComponent as NasaLogo} from './NasaLogo-96.svg'

<div className="logo__title">
  <NasaLogo />
  <h3>Astronomy Picture of the Day</h3>
</div>

NasaLogo is what I named the React Component in the code while the path to it is on the right.
I have used flexbox for the CSS side of the project. It is super handy to have and I try to minimize it as it can be cumbersome when you have so many flexboxes. This ordered and lined the links to one side, making it looks like actual navigation.

So that is pretty much it. There isn't much to talk about besides checking out my repo on Github as you will be able to see more detail.

I would like to thank everybody reading my posts and those liking it. It really helps but I'm gonna be honest, I don't know if this works like Youtube where you like, comment and subscribe to gain a larger following 😅. See you till next time. Cya! 👋🏽

Here are some things I have used so far

Day 2 - Redesigning Nasa's Picture of the Day Webpage

Edward Naidoo — Fri, 11 Feb 2022 05:55:25 +0000

I have made two versions of the Figma file. One that will be 1920p wide and one that will be 1080p wide. This will be part of the responsiveness in this webapp. There will also be a mobile version too. To accomplish this, I scaled each component or object in the file to the change in scale, for example, I multiplied each 1080p objects by 1.78 because of 1920 / 1080.

Next I have adjusted each component or object to fit the right scale and after doing that, I have changed the logo and title from Spacestagram or something else to a more suitable name. That was from the previous project which I forgot to change. I have been thinking on the scrolling effect for each card there is because I want the content to fit well in the screen and I do not want it to be busy. So I am going to do some research and take some inspiration by people who did it better.

I have left the Nasa logo hanging on purpose as I while I was resizing everything, I accidentally came upon the logo hanging over the edge and it just reminded me of a website or a few websites on Behance and it looked awesome. I hope I don't get a copyright notice for having Nasa’s logo on this webpage, I’ll have to do some research and ask people around. In the mean time, I’ll go without Nasa’s logo but it will be there be there if it was allowed to be used. If i cannot use their logo, then I will have to make my own or use a free one where I won’t get into any trouble.

I am currently thinking on if the previous card (on the right) should be smaller than the current one so it draws focus on the centre point and hopefully make the webapp less busy.

There currently is nothing at the bottom of the page, so now I am thinking of putting the credits there and the ‘works cited’ if research in the science field gets included.

I do not know where to put the credits for the images taken on the card without drastically changing the look, so I’m thinking of redesigning the whole card but that will be done later into the process. Right now I am happy with the general look, the functions such as the horizontal scroll and the colour scheme.

What I have learned:

Today I have realized that changing the standard, such as the navbar to something else, really makes a huge change and more unique. This can make any of us stand out if we are unique relative to the people around us.

Once again, thank you for reading my material, more will come soon...

Here is the Github repo

Apparently, the pictures are super squished, so for clarification this published post has the pictures with a proper height and width and I'm sure Dev.to is squishing that.