Forem: Alex Kubica 🇮🇱

Get the latest Software Engineering blog articles from the top tech companies in telegram

Alex Kubica 🇮🇱 — Sat, 28 Oct 2023 13:09:05 +0000

If you're a fellow professional software engineer, you probably enjoy staying up to date with the latest tech blogs from major companies like Monday.com, Wix, Meta, LinkedIn, Netflix, and more.

You can receive all the updates with AI-generated summaries on Telegram, check this out👇

https://t.me/softwareengineeringblogs

Help us spread the word and give us feedback so we can improve the feed 🙏

Create a simple web3 app to connect and sign with your wallet in 7 minutes

Alex Kubica 🇮🇱 — Wed, 05 Apr 2023 09:54:39 +0000

Are you ready to learn how to connect to a wallet and sign a message using Web3.js and MetaMask? 🤩 This step-by-step guide will show you how to get started with these powerful tools to create this web3 app.

With just a few lines of code, you'll be able to connect to a wallet and sign a message in no time! 😎 And don't worry if you're new to Web3.js and MetaMask, we've got you covered with detailed explanations and easy-to-follow instructions.

Step 1: Create a new CodeSandbox project

Go to CodeSandbox and create a new project by clicking the "Create Sandbox" button. Choose the "Vanilla" template to create a new sandbox with a basic HTML, CSS, and JavaScript setup.
You should install the web3 dependency which we will use in the next step.

Step 2: Modify the HTML file

In the CodeSandbox editor, open the index.html file and replace its contents with the following code:



<!DOCTYPE html>
<html>
  <head>
    <title>Wallet Connection Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Wallet Connection Example</h1>
    <button id="connectBtn">Connect Wallet</button>
    <button id="signBtn" disabled>Sign Message</button>
    <div id="confirmation"></div>

    <script src="./src/index.js"></script>
  </body>
</html>

This code defines a basic HTML page with two buttons and a div to display the signed message confirmation. We've also included a script tag to load our JavaScript code, which we'll write in the next step.

Step 3: Modify the JavaScript file

Now Open the src/index.js file and replace its contents with the following code:



import Web3 from 'web3';

const connectBtn = document.getElementById('connectBtn');
const signBtn = document.getElementById('signBtn');
const confirmationDiv = document.getElementById('confirmation');

// Check if MetaMask is installed
if (typeof window.ethereum === 'undefined') {
  connectBtn.innerText = 'Install MetaMask';
  connectBtn.disabled = true;
}

// Connect to the wallet
let web3;
async function connectWallet() {
  try {
    // Prompt user to connect to MetaMask
    await window.ethereum.request({ method: 'eth_requestAccounts' });
    // Get the provider object
    web3 = new Web3(window.ethereum);
    // Update button text
    connectBtn.innerText = 'Logout';
    // Enable sign button
    signBtn.disabled = false;
  } catch (error) {
    console.error(error);
  }
}
connectBtn.addEventListener('click', connectWallet);

// Sign a message
async function signMessage() {
  try {
    // Get the current account
    const accounts = await web3.eth.getAccounts();
    const account = accounts[0];
    // Create a message to sign
    const message = 'Hello, world!';
    // Sign the message
    const signature = await web3.eth.personal.sign(message, account);
    // Display the signature in the confirmation div
    confirmationDiv.innerText = `Signed message: ${signature}`;
  } catch (error) {
    console.error(error);
  }
}
signBtn.addEventListener('click', signMessage);

This code uses the import statement to import the Web3 library from the web3 package. It defines three variables to reference the two buttons and the confirmation div in our HTML code. We also check if MetaMask is installed and display a message if it is not.

The connectWallet function uses the window.ethereum object to prompt the user to connect to MetaMask and authorize the connection. It then initializes the web3 object with the provider returned by MetaMask and updates the button text and disabled status.

The signMessage function gets the current account from MetaMask, creates a message to sign, and uses the web3.eth.personal.sign method to sign the message with the current account. It then displays the signed message confirmation in the div below the Sign Message button.

Finally, we add event listeners to the Connect Wallet and Sign Message buttons to call the connectWallet and signMessage functions, respectively, when they are clicked.

Step 4: Preview the HTML file in the browser

To test our code, click the "Preview" button at the top of the CodeSandbox editor to open a new tab with the preview of the HTML page. Click the Connect Wallet button to connect to MetaMask and authorize the connection. Once connected, the Sign Message button will be enabled. Click it to sign the "Hello, world!" message and display the signed message confirmation.

Congratulations, you've successfully connected to a wallet and signed a message using Web3.js and MetaMask in CodeSandbox!

Resources

That's a wrap! If you liked this tutorial let me know in the comments and tell me what you'd like to learn next 😎

Pros and cons of TypeScript

Alex Kubica 🇮🇱 — Thu, 09 Jul 2020 10:44:10 +0000

This is going to be yet another article about the pros and cons of TypeScript based on my experience. I hope to give you a better understanding on it. I also hope to help you decide whether switching to it or not is worth for you.

What is TypeScript?

Simply put, TypeScript is a JavaScript superset. Meaning the TypeScript code is compiled into the plain old JavaScript that most browsers can run.

TypeScript adds to JavaScript some missing features such as static types system (you probably guessed from its name 😊). You can easily learn it yourself using its documentation.

My experience with TypeScript

In my first job we used to develop and maintain a legacy code written in angularjs, a.k.a angular 1. The codebase was not a pretty sight.

There were global variables referenced from everywhere. You changed a line of code to fix a bug only to discover you made 3 other bugs somewhere else.

There was no real use of dependency injection which was the main thing about angularjs at the time. There were also no tests so you couldn’t tell if you broke something while fiddling with the code.

After about 2 years of working this way we decided to refactor and switch to React. React was such an improvement to our frontend stack. Our code was divided into smaller, more maintainable components and we used PropTypes for dynamically type checking.

After a while into using React my teammate convinced us to start using TypeScript and boy, how I loved it. The setup wasn’t easy, it took a few days to make it work with the existing code. But after doing that things started to get much smoother.

Now warnings and errors that showed in the browser’s console or the development server were now compile errors. It meant no more procrastinating. We fixed issues as soon as they rose instead of lazing out and waiting for them to become bugs.

A few years have passed since my first role in that organization. Now I’m in another project which doesn’t use TypeScript so I decided to write this article and I dedicate it to the team ❤.

Pros 👍

Static type checking

In JavaScript you don’t need (actually you can’t as far as I know) to define types for variables. In some cases it has its advantages. But since you don’t enforce types you can misuse or misinterpret code easily which can lead to bugs.

For example:

function double(x) {
    return x * 2;
}
console.log("ali" + double("ba")); // prints "aliNaN"

In that case I could assume that “double” takes strings as argument and duplicate them. So in the example I would expect the output: “alibaba”.

In TypeScript you define parameter types which saves you from mistakes like that:

function double(x: number) {
    return x * 2;
}
console.log("ali" + double("ba")); // error: Argument of type '"ba"' is not assignable to parameter of type 'number'.

Of course it applies on other things besides parameters such as variables, function outputs, etc. See Basic Types.

Compilation prevents from errors to get into production

JavaScript is a scripting language which is executed line by line. Because of that you will discover if the code is broken only when it’s executed by runtime environments.

In other hand TypeScript code must be compiled. So you’ll see the errors in your terminal or code editor right away which can save you time.

TypeScript can work with vanilla JavaScript

In other static languages like Java you must define types everywhere. But because TypeScript is a subset of JavaScript it can work alongside it, you just need to configure it.

Better code documentation and design

When you incorporate types in your code you basically make it self-documenting. You also make it easier to understand how to use it properly.

Furthermore you’re enforced to pay more attention and effort into design rather then rushing into implementation.

Extensive IDE integration

TypeScript is already supported on most used code editors and IDEs:

That means you can start developing with TypeScript today without replacing you favorite developing tools.

Visual Studio Code for example supports navigation, formatting, code suggestions, syntax highlighting and many more!

Ready TypeScript definitions for non TypeScript libraries

Some libraries are written with TypeScript and are shipped with the type definitions out of the box, for example: material-ui.

But in reality many libraries are still written in JavaScript so you need to get the type definitions somehow. Lucky for us the most of them have type definitions written by the community.

If you can’t find any types you can still write your own type declarations.

TypeScript sounds amazing, I’ll start using it today!

Wait, hold on! I do love TypeScript there are also drawbacks to consider which I’ll discuss about in this section.

Cons 👎

It needs to be compiled

Earlier I mentioned compilation as an advantage but it’s also a disadvantage since it adds time to development and building.

I think the compilation time isn’t that critical but I don’t have experience working with large scale projects.

I will mention that, mainly in frontend, you will run some tools to modify your code anyway such as webpack, babel, etc. So compiling to TypeScript isn’t so different than bundling or minifying.

It’s nice to know that deno (a potential successor to nodejs) supports TypeScript out of the box without needing to compile!

It takes time to learn and get used to

I agree that the syntax might be a little intimidating at first.

Lucky for us the TypeScript documentation is good.

You even have the playground to fiddle with and test TypeScript’s features.

We already have type checking with PropTypes (React developers’ argument)

Surely there are alternatives to type checking such as PropTypes for React components’ props. But what if I want to check types for other things?

PropTypes is also easily replaceable by TypeScript. You just have to define interfaces for your props instead or you can use automatic tools for that.

Final words

I hope you enjoyed reading this article. Please leave a comment and let me know what you choose because I’m really looking forward to hearing it 😁

PS

I’ll appreciate it if you share this article and motivate me to write more content about dev stuff 🤓.

I’m new into writing but I hope my content will become of better quality with time. If it’ll help you to make better products that serve the needs of your customers I’ve done my job😁