DEV Community: Afolabi Abdullahi

CSS Animation Made Extremely Easy

Afolabi Abdullahi — Sat, 02 Sep 2023 17:37:45 +0000

Animating in CSS using keyframes requires time and effort. This is because it is hard to achieve in most cases. Let me introduce you to a JavaScript library named Animate on Scroll (AOS). AOS makes animation easy by adding attributes to your HTML tags.

Introduction

Having a website is a must for anyone who wants to have an online presence. When you have the website, you can tell the people on the internet about what they do or the services they render. The joy of every website owner is for people to find their website interesting. This will make website visitors spend more time and read more content on your website.

One of the ways to do this is to add friendly animations to your website and not overuse them. Most developers don't animate websites because it takes time and is stressful. With Animate on Scroll, animating websites is now easier than before. In this article, I will teach you how to animate your website with AOS.

Prerequisites

Basic knowledge of HTML and CSS.
Familiarity with JavaScript and JavaScript concepts like object.
Familiarity with integrated development environment (IDE) and terminal/command line for running code.

Animate on Scroll (AOS)

AOS is a JavaScript library with over 20 predefined animations for your websites. To add these animations to your website, you will need to install the library on your website.

Installation

There are two ways of installing AOS:

Basic Installation: Install the library by adding an external stylesheet to your head tag.

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add script right before the close of </body> tag and initialize AOS.

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Package Managers: Install the package using yarn yarn add aos@next or npm npm install --save aos@next After that, import the script and styles and initialize AOS.
```
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();
```

How to use it

Basic usage

Adding the animation to your HTML content is simple. To do this, you will add the data-aos attribute for the effect on your HTML.

<div data-aos="fade-in"></div>

Also, you can use the AOS attributes in all HTML tags.

A few of the predefined AOS animations are put into use below:

You can check the remaining available animations on the AOS website.

Advance usage

Adding AOS animations to your website with settings you would like to set yourself, like duration, delay, and offset. You can do this by adding the attribute you want to edit to the AOS default attribute data-aos-*.

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
  </div>

A few of the predefined advanced usage of AOS animations are put into use below:

You can check the remaining available animations in the table below.

Attribute	Description	Example value	Default value
`data-aos-offset`	Adjust the offset to start the animation sooner or later (px).	200	120
`data-aos-duration`	Animation runtime (ms).	600	400
`data-aos-easing`	Select the timing function for the element easing feature in multiple ways.	ease-in-sine	ease
`data-aos-delay`	Animation delay (ms).	300	0
`data-aos-anchor`	Offset value that will be used for the anchor element instead of the default set value.	#selector	null
`data-aos-anchor-placement`	Element on the screen that should be in the anchor position to start the animation.	top-center	top-bottom
`data-aos-once`	Select whether the animation should play only once or each time you scroll up or down to an element.	true	false
`disable`	The condition in which AOS should not function.	mobile	false

Global settings

If you are using the same advanced attributes for your animations, setting these attributes one after the other will take more time, and you will also write more lines of code. We will provide a solution to this using this setting.

To do this, add the options object to the init() function, like this:

  <script>
    AOS.init({
      offset: 200,
      duration: 600,
      easing: 'ease-in-sine',
      delay: 100,
    });
  </script>

Make your own animation

We can create new animations with AOS if we don't like the default animations that AOS gives us.

To do this, we will work on two states, which are

Before animation
After animation

/* Before animation*/
[data-aos="new-animation"] {
  transform: rotate(300deg) scale(0.3);
  opacity: 0;
  transition-property: transform, opacity;
}
/* After animation */
[data-aos="new-animation"].aos-animate {
  transform: rotate(0) scale(1);
  opacity: 1;
}

To use our newly created animation, we will add the attribute data-aos="new-animation" to the element we want to animate.

See our newly created animation in action below.

Conclusion

In this article, we talked about Animate on Scroll (AOS), one of the JavaScript libraries for animation. We break down every detail of how we can use this library to animate our websites. We also talk about how to make our own animations.

We can animate our websites now without worrying about the stress that comes with the default CSS way of animating elements on the front end of our websites.

References

Demystifying Blockchain Technology: Applications and Implications

Afolabi Abdullahi — Fri, 01 Sep 2023 15:49:32 +0000

Introduction

You've probably heard the term "blockchain technology" a lot in the last few years, probably about cryptocurrencies like Bitcoin. Indeed, you may be wondering, "What is blockchain technology?" Blockchain appears to be a platitude, but only in a hypothetical sense, as there is no real meaning that the layperson can easily understand. It is critical to understand "what is blockchain technology," including the technology used, how it works, and how it is becoming increasingly important in the digital world.

Understanding Blockchain Technology

What is Blockchain Technology

Blockchain technology is a complex database technique that permits the transparent sharing of information within a corporate network. In a blockchain database, data is kept in blocks linked together in a chain. The data is temporally consistent since you cannot delete or amend the chain without network consensus. As a result, blockchain technology may be used to construct an immutable ledger that can be used to monitor orders, payments, accounts, and other transactions. The system has procedures in place to prevent illegal transaction submissions and ensure consistency in the shared view of these transactions.

Blockchain technology possesses the following characteristics:

Decentralization: Unlike systems, a blockchain operates on a network of computers (known as nodes), where no single entity has ultimate control. This decentralized nature enhances transparency and bolsters security.
Immutability: Once data is recorded on a blockchain, it becomes unchangeable. Cannot be deleted. This immutability ensures the integrity and reliability of the information stored within.
Transparency: All participants in the blockchain network have access to the transaction history, fostering trust among users by promoting openness and accountability.
Security: Blockchain employs techniques to safeguard transactions, making it highly resistant to activities and hacking attempts.

These distinguishing features highlight the effectiveness and robustness of technology in applications.

Why is Blockchain Important?

The challenges of recording financial transactions using traditional database technologies are numerous. Take the sale of a piece of real estate, for instance. After a financial transaction, the buyer becomes the legal owner of the property. The buyer and seller can keep separate records of the financial transactions, but neither source is reliable. Both the buyer and seller are perfectly capable of claiming that they have paid the money even though they haven't. Even if they have received it, the seller can easily deny it.

A trustworthy third party must oversee and validate transactions to avoid any legal difficulties. The existence of this central authority not only complicates the trade but also provides a single point of failure. Both parties may suffer if the main database is hacked.

Blockchain solves these problems by creating a secure, decentralized system that can't be tampered with. For example, in a property transaction, blockchain creates a single ledger for each buyer and seller. All the transactions have to be agreed upon by both parties, and they're updated in real-time in both ledgers. If something goes wrong in one of the past transactions, it'll ruin the whole ledger. These features of blockchain have made it popular in different industries, like creating digital currencies like Bitcoin.

How Does Blockchain Work?

The blockchain operates using methods to achieve agreement including;

Proof of Work (PoW); This approach, utilized by Bitcoin involves miners solving puzzles to add blocks to the blockchain. Although it ensures security it requires power and time making it energy intensive.
Proof of Stake (PoS); In PoS validators are selected to create blocks based on the amount of cryptocurrency they possess and are willing to "stake" as collateral. PoS is more environmentally friendly compared to PoW.
Delegated Proof of Stake (DPoS) Proof of Authority (PoA) and other variations; These consensus mechanisms prioritize efficiency and scalability while maintaining a level of security.

Applications of Blockchain Technology

Initial Coin Offerings: Cryptocurrencies are blockchain's first and most well-known use. Blockchain technology has been used to develop several digital currencies, including Bitcoin, Ethereum, and many more. These currencies are not dependent on conventional financial institutions to function.
Smart Contracts: Smart contracts are self-executing agreements in which the terms are directly put into the program code. When predetermined criteria are satisfied, they automatically carry out and enforce the terms. The Ethereum blockchain serves as the main foundation for building and using smart contracts, which makes a variety of decentralized applications (DApps) possible.
Management of the Supply Chain: Blockchain can help make the supply chain more traceable and transparent. Businesses may use blockchain to track a product's route from manufacturer to customer, minimizing fraud, guaranteeing quality control, and boosting productivity.
Identity confirmation: Blockchain identity verification is secure and decentralized. By keeping your info private and only giving it to a third party if you need to, you can reduce your chances of being targeted for identity theft.
Health Care: Blockchain can securely store and manage patient data in healthcare, keeping data secure and making it easier for different healthcare providers to work together.
Voting devices: Blockchain voting systems can provide a secure and transparent way to vote, reducing the risk of fraud and keeping the democratic process honest.
Financial and Banking: Blockchain can revolutionize financial services by making international transactions faster and cheaper, reducing fraud, and increasing transparency.
Intellectual Property: Creators can use blockchain to prove who owns what and protect intellectual property rights.

Implications of Blockchain Technology

Disrupting Traditional Industries

Blockchain can revolutionize traditional industries by getting rid of middlemen, cutting costs, and making things more efficient. This could have a huge impact on finance, supply chains, and more.
Enhanced Security Measures

Blockchain has a lot of security features that make it really tough to hack and fraud, which makes it a better choice for a lot of different uses.
Decentralization and Building Trust

Blockchain makes it easier for people to trust each other in a network by removing the need for centralized authorities, which helps keep corruption and manipulation at bay.
Addressing Regulatory Complexities

Blockchain is decentralized, which means there are a lot of rules and regulations that need to be followed, especially when it comes to data security, taxes, and smart contracts.
Environmental Considerations

Blockchains like Bitcoin have been accused of using too much energy, so the industry is looking into more sustainable options.

Conclusion

Blockchain technology has evolved far beyond its initial role in cryptocurrency. Its decentralized, secure, and transparent nature holds immense potential across various industries. However, it also presents challenges and regulatory concerns that need to be addressed as it continues to disrupt and transform traditional systems. Understanding blockchain's applications and implications is crucial for individuals and organizations looking to harness its power in the digital age.

The Essence of JavaScript in Web Development

Afolabi Abdullahi — Fri, 01 Sep 2023 15:40:55 +0000

I know you have been wondering what exactly this JavaScript (JS) is that has gathered so much attention everywhere. The answer is straightforward: JS is a very potent scripting and programming language that web developers frequently utilize to add distinctive features like interactivity to web pages, applications, servers, and even games. What makes it great is the ability to work on the front-end and the back-end of any software, which most programming languages lack.

JavaScript, on the other end, can’t stand alone. In this regard, to begin your journey in JS, you need a solid understanding of two other standard web technologies, which are HTML and CSS.

HTML is the skeleton of a website that frames how the website will be structured.
CSS adds style and formatting to the skeleton, making it beautiful.
JavaScript turns those beautified skeletons into something that a user can interact with.

Brendan Eich created JavaScript in 1995. It was initially created for Netscape 2, and it became the ECMA-262 standard in 1997 after being given to ECMA. The Mozilla Foundation then kept working on creating JavaScript for the Firefox browser.

Year	ECMA Version
1997	ES1
1998	ES2
1999	ES3
2008	ES4
2009	ES5
2016	ES6

In 2018, the ES6 version was developed to provide full support for all browsers.

The general usage of JavaScript by most web developers is to modify HTML and CSS to update the user interface dynamically. This is usually done by the Document Oriented Model (DOM). You have to note that the written code on your web page is loaded and executed in the order of their arrangement. JS has to come last in the web document to avoid errors when the web page is loaded. This is because the HTML and CSS that are to be modified have to be loaded first before the script can modify them. There are two ways to add JavaScript to a web document:

External Linking: This is the practice of having the script in a separate file named with the extension .js, for example, script.js. The created file will be linked using the script tag with the src attribute right below the closing of the body tag and before the close of the HTML tag.
Internal Linking: This is the practice of having the script in the same HTML document using the script tag without the src attribute right below the closing of the body tag and before the close of the HTML tag. The script will go in between the opening and closing of the script tag.

JavaScript Data Types

All programming languages have structures on which they are built. These structures are accompanied by built-in data types to hold different types of values, and these differ from one language to another. For JavaScript, there are two types of data types into which data types are classified.

Primitive data type.
Non-primitive (reference) data type.

Primitive data type: In JS, a primitive data type is referred to as an object and has no methods or properties. There are 7 primitive data types:

String: This refers to data that is text and is enclosed with a quotation mark.

let text = "This is a string";
// A string that is stored in a variabled identified as text

Number: This refers to data that is numeric or an integer. It does not require being enclosed in a quotation mark.
```
let num = 45;
// A number that is stored in a variable identified as num
```

Boolean: This represents data that only defines if a variable is true or false.

const listData = true;
const bulletData = false;
// Boolean data defined with true or false

BigInt: This is a type of data that is an integer but in its arbitrary precision format. This is created by adding the suffix n to an integer.
```
const value = 98345689009876543n;
// BigInt
```
Undefined: As the name states, this is a type of data that is not defined. The variable has a variable identifier, but there’s no assignment operator or value.
```
let west;
console.log(west); // undefined
```
Symbol: An item of the specified data type named a symbol can also be referred to as a symbol value. This is an immutable primitive value. For instance,
```
// two symbols with the same description
const textA = Symbol('hi');
const textB = Symbol('hi');
```
Even though text A and text B both contain the word "hi," they vary because they are of the symbol type.
Null: Null is a special value in JavaScript that denotes an empty or undefined value. For instance,
```
const number = null;
```

Non-Primitive data types: These data types are the names given to objects in JavaScript. They descend from the primitive data types in JavaScript and are additionally known as derived data types or reference data types. Non-primitive data type variables are kept in the system's heap memory, whereas primitive data type variables are kept in the stack area.

Object: An object in Javascript is a variable that has properties and methods defined for it. Everything is an object in JS.

Let's look at how JavaScript can be used to create an object:

Creating an object with a constructor:

// creating an empty object
let obj = new Object();

// creating a user-defined object
let school = new School();

Making an object using the literal notation:

// creating an empty object
var cube = {};

// Here length and breadth are keys and
// 25 and 40 are the values
var rectangle = {length: 25, breadth: 40};

Array: Using an array, we can group several elements with comparable properties under a single name.

Let's look at how to do it with JavaScript:

// creating an empty array (no arguments)
var arr1 = new Array();

// creating an array with the number of elements (a single argument)
var arr2 = new Array(7);

// creating an array with multiple values (two or more arguments) 
var arr3 = new Array(4, 6, 8, "string");

RegExp: The RegExp object in JavaScript compares a string to a certain pattern. Using the comparison capabilities of the RegExp object, we can determine whether a regular expression pattern is present in the string or not.

Let's look at how to do this in JavaScript:

Using a constructor for creating a RegExp:
```
// defining a pattern to compare with a string using
// the RegExp constructor
var regex = new RegExp('pattern');
```
Making a RegExp by enclosing the pattern in forward slashes:
```
// defining a pattern with a modifier to compare
// with a string using forward slashes
var regex = /pattern/modifier;
```

JavaScript Frameworks

For quite some time, the development of applications has heavily relied on JavaScript frameworks. This has undeniably marked a milestone for this programming language.

Another noteworthy benefit of JavaScript is its compatibility with JS frameworks. These frameworks are widely utilized to access and leverage pre-existing JavaScript code that caters to functionalities and capabilities.

Popular JavaScript front-end frameworks

React.JS

Rather than being a JS framework, React.JS primarily serves as a library. It is also thought to have the fastest growth among JS frameworks, with 1,000 contributors on GitHub.

The elements of this framework may also be created, utilized for various applications, and distributed for use by the general public.

Additionally, it is said to be better suited for sophisticated, complex, high-load software solutions.

Vue.JS

Vue, another 2016 release, has proven to be the best of them all since it mixes Ember, React, and Angular into one handy package.

Additionally, it may be proven to be a cure-all for sophisticated single-page apps (SPAs) and effective in any scenario where efficiency is valued above app structure or clear code.

Angular JS

Most often, AngularJS is described as an MVW (model-view-whatever) framework that offers several advantages to various start-ups and mid-sized businesses.

It is mostly used for two-way data binding (changes in the back-end are immediately reflected in the UI), rapid code creation, and simple testing of any app component.

After being released, the framework has developed beyond all recognition and is now the most popular JS framework for building single-page applications.

The component-based design, enhanced dependency injection, effective logging service, inter-component connections, and many other features of Angular are also a blessing.

JavaScript as a back-end tool

Back-end development is the term used to describe the server side of web development, where you, the developer, build the code that powers the web application. When a user is exploring the web, they view and interact with the front-end, which is powered by the back-end, which normally operates on a web server.

The following are the responsibilities of the back-end

Keeping and getting information out of a database.
Data processing.
Data transmission to the front-end
Getting information from the front-end
Control of user sessions.
The application's security.

Node.JS, an environment for running JavaScript, enables JavaScript code to be run outside of a web browser. It was released in 2009 so that server-side applications could be run using JavaScript. It is a cross-platform environment based on the V8 JavaScript engine and has a ton of libraries and tools to help developers create reliable apps.

Node.JS is a well-liked back-end development framework since it is quick, lightweight, and effective. Next.JS and Express.JS are two other popular JavaScript frameworks.

Popular JavaScript back-end frameworks

NodeJS

A cross-platform, open-source server-side JavaScript run-time environment is Node.js. It can drive asynchronous I/O thanks to its event-driven design. Similar characteristics like packing, threading, and loop formation are present in this architecture.

Features;

Given that it was created using the V8 JavaScript engine from Google Chrome, the library executes code quickly.
The server doesn't have to wait for any APIs to respond with data because all of them are asynchronous.
Since it is open-source, it has a sizable community and several incredible models to give Node.js apps more functionality.

Next.JS

Most commonly, Next.js, a straightforward JavaScript framework, is employed on the back end to construct applications utilizing the React framework.

The primary objective of Next.js is to streamline the development of React applications, making the process as uncomplicated as can be.

Features;

A straightforward structure.
Quick performing.
Easy to understand and utilize.

Express.JS

Express stands out as one of the finest back-end frameworks for JavaScript scripting. It is the preferred choice for crafting web applications and APIs due to its speed and simplicity.

Its primary role is to serve as the default server framework for Node.js and as a front-end framework for Angular.js.

Features;

Quick performing.
Simple to learn.
Straightforward and light.
Robust and relatively immune to coding errors; it boasts extensive support for numerous plugins.

Conclusion

Imagine a world without JavaScript - websites would be static, apps would lack that interactive magic, and games would lose their dynamism. JavaScript, my friend, is like a wizard's wand in the digital realm. It's not just a language; it's a key that unlocks a universe of possibilities!

Think about it. Whether you're crafting a stunning web app, diving into the realm of mobile app development, cooking up the next gaming sensation, or even tinkering with a sleek terminal app, JavaScript has got your back. It's the Swiss Army knife of coding languages, armed with an array of tools and frameworks to help you bring your ideas to life.

So, what are you waiting for? Jump into the world of JavaScript, and let your creativity run wild. Who knows what incredible things you'll build? It's time to embark on a coding adventure that knows no bounds!