DEV Community: bonnguyenitc

What is smart contract ?

bonnguyenitc — Sat, 04 Feb 2023 10:16:25 +0000

Introduction
Smart contracts are self-executing digital agreements with the terms of the agreement between buyer and seller being directly written into lines of code. These contracts run on the blockchain and are secured by cryptography.

Benefits of Smart Contracts

Trust and Security: Smart contracts are stored on a decentralized blockchain network, making them tamper-proof and secure.
Automation: Smart contracts are self-executing, meaning they do not require intermediaries to enforce their terms.
Transparency: Smart contracts are public and their execution is recorded on the blockchain, making the entire process transparent.
Cost-effective: The removal of intermediaries results in lower transaction costs compared to traditional contracts.

Example of a Smart Contract
Let’s say two parties, Alice and Bob, want to enter into an agreement for the sale of a piece of land. In a traditional contract, this would involve the services of a real estate agent, lawyer, and a notary. With a smart contract, the entire process can be automated on the blockchain.

The terms of the agreement would be written into the smart contract, including the price of the land, the date of transfer, and any other conditions that need to be met. Once both parties agree to the terms, the contract is executed automatically, and the transfer of ownership of the land is recorded on the blockchain.

Conclusion
Smart contracts are revolutionizing the way we do business, making the process of contract execution more secure, transparent, and cost-effective. The blockchain technology that supports smart contracts provides an infrastructure for secure and transparent transactions, making it ideal for a wide range of applications beyond just financial transactions.

Operators in JavaScript: The Fundamentals

bonnguyenitc — Sat, 04 Feb 2023 10:03:25 +0000

Operators
Operators in JavaScript are symbols that perform specific operations on operands, or values, to produce a new value. In this post, we will discuss the different types of operators available in JavaScript and how they can be used in our code.

Arithmetic Operators
Arithmetic operators perform basic arithmetic operations such as addition, subtraction, multiplication, and division. These operators are +, -, *, /, %, ++, and --.

For example, 2 + 3 would evaluate to 5 and 10 / 2 would evaluate to 5. The % operator returns the remainder of the division of two operands. For instance, 10 % 3 would evaluate to 1. The ++ and -- operators are used to increment and decrement the value of a variable by 1 respectively.

Assignment Operators
Assignment operators are used to assign a value to a variable. The most commonly used assignment operator is =. Other assignment operators include +=, -=, *=, and /=. These operators perform the respective arithmetic operation and assign the result back to the variable.

For instance, x = x + 3 can be written as x += 3.

Comparison Operators
Comparison operators are used to compare values and return a Boolean value of true or false. These operators include ==, !=, ===, !==, >, <, >=, and <=.

For example, 5 == 5 would evaluate to true, while 5 == 6 would evaluate to false. The === and !== operators perform strict equality checks, meaning they check both the value and type of the operands.

Logical Operators
Logical operators are used to perform logical operations such as and, or, and not. The && operator returns true if both operands are true, while the || operator returns true if either operand is true. The ! operator is used to negate a value and return the opposite Boolean value.

For instance, true && false would evaluate to false, while true || false would evaluate to true.

Ternary Operators
The ternary operator is a shorthand for an if statement. It is written as condition ? expression1 : expression2. If the condition is true, the operator returns expression1, otherwise it returns expression2.

For example, let x = 5 > 3 ? "yes" : "no" would assign the value "yes" to x.

Conclusion
In conclusion, operators play a crucial role in JavaScript and allow us to perform various operations on values. Understanding these operators and their use cases can greatly improve our ability to write efficient and readable code.

Variables in JavaScript: The Fundamentals

bonnguyenitc — Sat, 04 Feb 2023 08:45:34 +0000

JavaScript is a dynamically-typed language that allows developers to store data in variables. Variables are containers that hold values, which can be of different types such as numbers, strings, arrays, and objects. In this blog post, we will go over the basics of variables in JavaScript and how to use them effectively.

Declaring Variables in JavaScript

In JavaScript, you can declare a variable using the var, let, or const keyword. The var keyword has been used for years and is still widely used in older JavaScript code, but it is generally recommended to use let or const for declaring variables in modern JavaScript.

The difference between var, let, and const is the scope and mutability of the variable. var variables are function-scoped, which means that they are only accessible within the function they are declared in. let and const variables are block-scoped, meaning that they are only accessible within the block they are declared in.

let variables are mutable, meaning that you can change their value after they are declared. const variables, on the other hand, are immutable, meaning that once a value is assigned to them, it cannot be changed.

For example, let's declare a variable name using const:

const name = "John Doe";

In this example, we declared a const variable name and assigned a string value of "John Doe" to it. Once the value is assigned, it cannot be changed.

Assigning Values to Variables in JavaScript

In JavaScript, you can assign values to variables using the assignment operator =. The assignment operator takes the value on the right-hand side and assigns it to the variable on the left-hand side.

For example, let's assign a value to a let variable:

let age = 30;

In this example, we declared a let variable age and assigned a value of 30 to it. The value of the age variable can be changed later in the code.

Data Types in JavaScript

JavaScript is a dynamically-typed language, meaning that the type of a variable can change based on the value assigned to it. There are several data types in JavaScript, including:

Number: Represents numbers, such as integers and floating-point numbers.
String: Represents a sequence of characters, such as words or sentences.
Boolean: Represents a value that can be either true or false.
Array: Represents a collection of values, such as a list of numbers or strings.
Object: Represents a collection of properties and values, such as a person's name and age.

You can use the typeof operator to find out the type of a variable. For example:

let name = "John Doe";
console.log(typeof name); // Output: string

let age = 30;
console.log(typeof age); // Output: number

In this example, we declared two variables name and age, and used the typeof operator to find out their types.

Conclusion

Variables are an essential part of any programming language, and JavaScript is no exception. In this blog post, we covered the basics of variables in JavaScript, including how to declare variables, assign values to them

Implement Stack widget Flutter in React Native

bonnguyenitc — Mon, 30 Jan 2023 14:39:06 +0000

What is Stack widget?

The Stack widget is a component in Flutter that allows you to position its children relative to the edges of the widget's box. This is a handy tool when building user interfaces. Unfortunately, React Native doesn't have a component like this, but you can still achieve a similar result.

How to use Stack widget?

To use the Stack widget in Flutter, simply provide a list of widgets as children to the Stack component, like this:

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

This will produce a stack of containers with different colors, as demonstrated in the accompanying image.

How to implement Stack widget in ReactNative?

If you need to achieve a similar effect in React Native, you can use the cloneElement API to modify the children of a component and add the necessary styles to each child. Here's an example of how to do it:

<Box {...props}>
  {React.Children.map(children, (child, index) => {
    return React.cloneElement(child as 
      React.ReactElement<any>, {
         position: 'absolute',
         zIndex: length - index,
    })
  })}
</Box>

This code creates a custom component called Box that uses the cloneElement API to add the position and zIndex styles to each child. The result is a stack of components with the desired behavior.

The post provides code examples and images to illustrate how to use the Stack widget in Flutter and how to create a similar component in React Native. The source code for the example is available on Github for you to check out.

Overall, the post provides clear and concise instructions for using the Stack widget and creating a similar component in React Native.

Happy coding!
You can check source code at Github

Build Bingo Online with NextJS 13 and Supabase

bonnguyenitc — Fri, 06 Jan 2023 02:47:27 +0000

Hi everybody, I try to make a Bingo game with:

NextJS 13, Chakra UI for font-end.
Supabase for back-end(authenticate, database).

Demo
Source code

Features

Authenticate with Supabase OAuth.
Realtime data.
Create a round to play.
Create a team to play together.
Join the game by code invitation or entry code of game.
Role: Host, Player

Hope we have a fun game.

Demo

Step 1: The host create a game

Step 2: The host copy code send to player

Step 3: Player enter code to join game

Step 4: The host click Bingo button to generate number

New React Native Template 2023 for start new app. I choice it

bonnguyenitc — Sat, 03 Dec 2022 03:20:26 +0000

Hi everybody, i just build a boilerplate React Native for my work, i can start new app a way easy. I'm inherited and inspired by:

I create many component to help build UI easier: Col, Row, Align, Stack, Positioned, Card, Image, If, Center, AppBar,...

To can build it i use:

React Native
React Navigation 6
Zustand
Typescript
Local storage with MMKV
Axios
Flipper
Multiple environment development with react-native-config
Modal, popup with react-native-modals
Theme with @shopify/restyle
Form validation with react-hook-form, yup
Multi language with react-i18next, i18next
Splash with react-native-bootsplash
Error Boundary
Font setting
Format source with eslint, prettier
Animation with moti, reanimated

Any developer seeing this post can give me advice to improve my repository. Really thank you very much.
Please checkout:
https://github.com/bonnguyenitc/react-native-starter