DEV Community: Hillary Chibuko

Hello world in Solidity

Hillary Chibuko — Tue, 08 Mar 2022 18:46:34 +0000

solidity is the most popular language for writing smart contract for the Ethereum blockchain.today I'm going to be showing you how to print "hello word" in solidity.
Firstly the solidity smart contract code starts with a pragma declaration which specifies the version of the compiler to compile our smart contract code

pragma solidity ^0.8.2

The caret symbol before the version number tells the compiler that any compiler version above 0.8.2 can be used to compile the smart contract...
A compiler of 0.9.0 would throw an error same as 0.7...n

After the Pragma declaration then we move to declaring the contract block

contract HelloWorld {}

This is the block that contains all the code for our smart contract,anything outside this block should be either another smart contract definition or Pragma declaration.

Then we move to declaring a string variable to store our text.
Also it is to be noted that solidity is a statically typed language

So declaring a variable ,the name of the variable must be preceded by the variable type
E.g
string public helloWorld;
Statement in Solidity should end with a semicolon.

and the public declaration before the variable name simply means that the variable can be accessed outside the smart contract..
Meaning any smart contract that inherits from this contract can call this variable and it also can be called from outside the smart contact

Now I move to declaring the constructor function that assigns value to the variable

constructor() public { helloWorld = "hello world"; }

Now it's time to put the pieces together

`Pragma solidity ^0.8.2;
contract HelloWorld {
string public
helloWorld;

   Constructor () public {

       helloWorld = "hello  
        world";
   }

Happy coding🎉🎉

Hello world in Solidity

Hillary Chibuko — Tue, 08 Mar 2022 18:44:05 +0000

solidity is the most popular language for writing smart contract for the Ethereum blockchain.today I'm going to be showing you how to print "hello word" in solidity
Firstly the solidity smart contract code starts with a pragma declaration which specifies the version of the compiler to compile our smart contract code

pragma solidity ^0.8.2

After the Pragma declaration then we move to declaring the contract block

`contract HelloWorld {

This is the block that contains all the code for our smart contract,anything outside this block should be either another smart contract definition or Pragma declaration.

Then we move to declaring a string variable to store our text.
Also it is to be noted that data types in solidity are statically typed

So declaring a variable ,the name of the variable must be preceded by the variable type
E.g
string public helloWorld;
Statement in Solidity should end with a semicolon.

Now I move to declaring the constructor function that assigns value to the variable

constructor() public { helloWorld = "hello world"; }

Now it's time to put the pieces together

`Pragma solidity ^0.8.2;
contract HelloWorld {
string public helloWorld;

Constructor () public {
    helloWorld = "hello  world";
}

}
`

Happy ccoding🎉🎉

Roadmap to become a Blockchain developer

Hillary Chibuko — Mon, 07 Mar 2022 11:52:40 +0000

Blockchain development is in no doubt a very exciting journey to venture into .
It could be a little bit tedious to go into if you are not properly guided on the paths to follow,before that I will be showing you the two types of Blockchain developers out there.

core Blockchain developer
DApp developer

Core Blockchain development
In core development, the developer writes the code for a blockchain client. Low-level programming languages are used in writing blockchain clients.

These include C, C++, Golang and Rust. In core development, you need to know the operating system of a computer, file system, and networking. However, core development is not for the faint of heart.

It takes time, practice, and commitment

DApp developer

Blockchain app development is what most blockchain developers do and it is what most people usually refer to when they mention blockchain development. In blockchain app development, we build apps on top of a blockchain client instead of creating a whole blockchain from scratch.

With the little that has been mentioned we could now move on the salaries of a Blockchain developer....

Salary Expectations.

As of Feb 28, 2022, the average annual pay for a Blockchain Developer in the United States is $154,550 a year.

Technology stacks needed to be a Ethereum Blockchain developer.

Ethereum blockchain
Web development
- Frontend development
- Backend development

3 Smart contract development

Solidity

4 Truffle (a framework for creating DApps)

Ethereum Blockchain Development.

it is recommended that you get started with the Ethereum blockchain as it is very popular and other promising blockchains such as the Binance smart chain and the Tron blockchain are based on the Ethereum technology.

Web development

One mistake that most newbies make is to dive straight into smart contracts without having a technical background in web development. Blockchain technologies are built on top of web technologies and so before you get deep into blockchain development you need to understand the fundamental concepts of web development.
There is necessarily no need to learn backend development just the basics of html, css and JavaScript is enough to get you going.

Smart Contract development

In simpler terms, a smart contract is a program that lives on top of the blockchain and constitutes a set of rules agreed upon by the involved parties.

The language for writing smart contract in Ethereum Blockchain varies ...
We have

viper
Solidity

But I would recommend solidity as it is more popular in the industry

Truffle

This is a framework that helps connect your front end application to your smart contract code.

Becoming a blockchain developer takes a lot of practice and commitment. It requires creativity to implement the concepts in code.

Wish you success in your journey ❤️

Powers of Nextjs

Hillary Chibuko — Thu, 19 Aug 2021 08:43:35 +0000

After a while I finally came up with something to write about.
Nextjs is a library built on top of Reactjs library,It is Seo friendly and also has server side rendering capabilities.

Below are some of the key features why you should consider Nextjs as a React developer

HOT RELOAD:
Nextjs make use of hot reload which is
similar to React virtual dom, as it renders
component after save and doesnt require a
page reload.

PREFETCH:
Nextjs provides developers with a Link
component with enables easy page routes.

NO NEED FOR ROUTE CONFIGURATION:
In Nextjs developers doesnt necessarily need

to set up page routes for every specific
component as all components could be
rendered in a pages folder serves specific
component with the components nme. for
example Header.js will be served as
process.env.NODE_ENV !== "production" ?
"localhost:3000/Header":"https://yourdomainname.com/Header".

Typescript support:
Nextjs is written with typescript and has
excellent typescript support.

Node Ecosystem:
    Nextjs being React based gels well with 
node ecosystem.

 Component specific styles:
      Nextjs components could have specific 
 styles for each of them ,thou a global 
 styles could be written but it is practically 
 recommended to add specific styles to 
 component.

Here are just a few of the capabilities of Nextjs...

setting up browser notification

Hillary Chibuko — Wed, 21 Jul 2021 23:39:01 +0000

 Setting up browser notifications are in every way crucial in web application development....

most times we do need to pass valuable informations to application users in order to decide our next step.

The process of implementing web notifications is made so easy with the browser notification api...

//first of all we check if the browser supports notification

if(!window.Notification){
//you could update the user interface if you like to inform the user that their browser does not support notifications

console.log("browser notification not supported")
}

// now we try to display a notification

const showNotification = () =>{

const title =" hey there man, how's it going ";
const options = {
    body:" would you like to recieve weekly updates from us",
    icon:"./assets/logo.png"
}
const notify = new Notification(title,options)

//optionally you could decide to clear the notification dialog after some time

setTimeout(()=>{
notify.close();
},10 * 1000)
}

//now we check the permission status

if (Notification.permission === "granted")
{
showNotification();
}

//this basically runs if the user neither accepted nor denied the request

else if (Notification.permission !== "denied"){
Notification.requestPermision().then(access => {
if(access === "granted"){
showNotification()
}
else{
// you could inform the user that accepting the notification request is neccessary for whatsoever reason

console.log('permission denied');
}
})
}

and thats all you need to start implementing browser notifications in your web application...

note: web notifications only works on a secure https, something of this sort "file:///C:/Users/HILLARY/Notify.html" would not work

How to handle form Validation in React ?

Hillary Chibuko — Tue, 20 Jul 2021 23:06:14 +0000

Today I bring you the ultimate way to handle form validation in a react application with a library called formik.

Formik makes form validation as easy as ......
lets get straight to the point....

npm install formik and thats it, we will also be making use of yup which may be used with Formik but it ain't mandatory if you feel comfortable writing your own form validation

import { useFormik } from "formik"
import * as Yup from "yup"
const FormValidation =()=>{

const signup =(e)=>{
const formik = useFormik({
initialValues:{
name:"",
email:"",
password:""
},

validationSchema:Yup.object({
name:Yup.string().required('this field is
required'),
email:Yup.string().email('invalid email
type').required('this field is required'),
password:Yup.string().max(16,"password must
not be more than 16 characters").required('required')
}),

onSubmit =() =>{
  alert(JSON.stringify(values))
}

})
}

return (

  <input id="name" name="name" type="text"
   onBlur={formik.handleBlur} onChange= 
  {formik.handleChange}/>
   {formik.errors.name && formik.touched.name 
  ? <div>{formik.errors.name} </div> : ""}


  <input id="email" name="email" type="text" 
  onBlur={formik.handleBlur}
  onChange= 
  {formik.handleChange}/>
   {formik.errors.email && 
        formik.touched.email ? <div> 
    {formik.errors.email} </div> : ""}

  <input id="password" name="password" type="text" onBlur={formik.handleBlur}
  onChange= 
  {formik.handleChange}/>

   {formik.errors.password && formik.touched.password ? <div>{formik.errors.password} </div> : ""}

);
}
This is pretty much all you need to get started using formik and yup....

for detailed information checkout www.formik.org/docs/tutorial

What are your opinions about a static site library?

Hillary Chibuko — Thu, 15 Jul 2021 22:38:58 +0000

Hello there developers how is it going?

I had an idea lately ,more like a project idea , i basically wanna implement a React library which could basically be used to generate static pages.

Nothing Dynamic just a simple blog page maybe, or maybe a portfolio generator, any basic layout at all...

and I need advice from fellow developers on how this idea sounds

Leave comments on your thoughts and opinions

Lastly I will be uploaded a video soon enough on how you could make use of the WebRTC api to make a well detailed video chat application probably zoom clone or something, stay tuned

How to implement copy and paste in a web application

Hillary Chibuko — Thu, 15 Jul 2021 03:05:04 +0000

Ever wondered how to implement copy and paste functionality in any of your web applications?
yes , I have
It is pretty much easier than it sounds , we only have to access the navigator.clipboard object to perform this.

1 copy

navigator.clipboard.writeText(e.target.value);

And that's all you need to copy whatsoever to the browsers clipboard

2 paste

This is almost same as the previous
navigator.clipboard.readText().then((text)=>console.log(text))
and there you have it , what you copied in your browsers console.

Easy peazy!!!

Web Real Time Communication

Hillary Chibuko — Sun, 11 Jul 2021 22:39:14 +0000

WebRTC, its an acronym that stands to represent
web Real-Time-Communication,its an api that enables computers share video,audio and even binary data.
understanding how webRTC does not really have to be a pain in the ass, I basically started using it myself and kinda already understand what it entails, unlike traditional websockets where-by all computers rely on a server for information from each clients-computer, WebRTC is much better.

WebRtc also works with a server which is basically for signalling purposes, at first the first computer makes a call which could be a video or audio request ,it does this by first creating a connection new RTCPeerConnection(), this function takes in an object which is nothing more than information about how to set-up ICE(internet connectivity establishment) and different ICE servers to choose from (Google provides us with tons of free ICE to choose from),after this has been passed to the function an offer is to be made by the local client this offer basically provides Sdp which is nothing more than media configurations about the clients machine this Sdp is then sent to the server, there are many servers out there to choose from, the intended client which is considered as the remote client gets this update from the server and in turn is required to respond by sending its own Sdp back to the local client and by this a connection has been created for both computers...

But we are not done yet, these computers also need to provide icecandidates,this contains ip/port information of both computers and once this has been established both computers can now communicate without the server having to take part in whats going on......

To learn more about this Technology visit https://webrtc.org for more information

The First known Computer bug.....

Hillary Chibuko — Sat, 03 Jul 2021 22:57:21 +0000

  Have you ever wondered where the term computer bug originated from ?

  well i have , the first bug to be discovered was actually a bug(insect).....

 On September 9, 1947, a team of computer scientists and engineers reported the world’s first computer bug. A bug is a flaw or glitch in a system. Thomas Edison reported “bugs” in his designs as early as the 1800s, but this was the first bug identified in a computer. Today, software bugs can impact the functioning, safety, and security of computer operating systems. “Debugging” and bug management are important parts of the computer science industry.

The team at Harvard University in Cambridge, Massachusetts, found that their computer, the Mark II, was delivering consistent errors. When they opened the computer’s hardware, they found ... a moth. The trapped insect had disrupted the electronics of the computer.

well , an advice from me to you, if you try debugging your code all day and nothing positive seems to be happening ,worry not , you only have to check your computer hardware for real bugs.....

who knows you might also be the first to discover something new

React page routes made easy!!

Hillary Chibuko — Sat, 03 Jul 2021 22:42:16 +0000

Ever wondered how to implement page routes in a complex react application?

worry not cuz i ve'gat a solution for y'all

an npm package @dev_hills/easyroutes ,it makes routing between pages as easy as easy!!

npm i @dev_hills/easyroute and you are all set-up, it accepts a single prop which is basically an array of objects.

//[{path:"/about",component:"About"}]

you can as well pass in any number of objects to the array , thats all you need as property to get up and running with this cool package ..

check it out guys

npm i @dev_hills/easyroute,my awsome routing React library

Hillary Chibuko — Sat, 26 Jun 2021 02:04:00 +0000

Hey developers about few days ago i made a post on my upcoming npm package and today i am here to announce that it is up and kicking

My own React library, i should say i am a bit excited thou.

no more hasle in setting up page routes as easyroute is here to save you time

simply run npm i @dev_hills/easyroute

or yarn add @dev_hills/easyroute

visit for more info on its usage --> https://www.npmjs.com/package/@dev_hills/easyroute