DEV Community: Victor Olaoye

Build the Future with the Auto Horizon Developer Challenge

Victor Olaoye — Sat, 18 Jan 2025 09:11:33 +0000

Developers and AI innovators, it's time to shine. The Auto Horizon Developer Challenge is your opportunity to explore the cutting-edge capabilities of Autonomys' Auto SDK, create innovative decentralized apps, and win exciting prizes.

Whether you're building AI-powered super dApps or agent proof-of-concepts (PoCs), this challenge is the perfect platform to showcase your skills, gain recognition, and win up to $1,000 USDC.

Why Should You Participate?

Here's why this challenge is unmissable:

**
**
1st Place: $1,000 USDC
2nd Place: $500 USDC
3rd Place: $300 USDC

Explore the Auto SDK
The Auto SDK simplifies the creation of decentralized applications on the Autonomys Network. Features include:

Auto Drive: Decentralized content-addressed storage for secure data management.
Auto Consensus: Tools for interacting with the Proof-of-Attention Stake (PoAS) consensus layer.
Auto DAG Data: Organize data seamlessly for on-chain storage.

What Can You Build?

The possibilities are endless:
Market intelligence oracles
Sentiment analysis tools
Prediction agents
Discord bots
Custom digital assistants

Express your creativity and build something truly unique.

How to Get Started

Learn the SDK: Check out the documentation and GitHub repository.
Build Your Project: Create an innovative decentralized application or agent using the Auto SDK.
Make It Open Source: Share your project on GitHub to help others learn and grow.
Submit Your Entry: Post your project in the Autonomys #developer-chat on Discord or Telegram with: A GitHub repository link A live deployment link A brief project description

Key Dates
Challenge Start: December 18, 2024
Deadline: January 31, 2025
Winners Announced: Two weeks after the deadline

Tips for Success
Combine SDK features in unique ways
Test your project thoroughly for reliability
Write clean, well-documented code
Leverage Auto Drive for seamless decentralized storage

Ready to Join?
Don't miss this chance to showcase your skills, connect with like-minded innovators, and win exciting rewards.

Learn More and Enter Here

Let's build the future, one super dApp at a time!

How To Access And Render Data Attributes With CSS & JavaScript

Victor Olaoye — Thu, 22 Dec 2022 13:38:31 +0000

Photo by Goran Ivos on Unsplash

Data attributes gives us the ability to embed custom data attributes in HTML. According to MDN, data attributes allows us to store extra information on standard semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

The beauty of these data attributes is that, it can be accessed in CSS and JavaScript. Let’s see an example of how it works with CSS first:

<b data-content="John Doe"></b>
<style type="text/css">
  b::after{
       content: attr(data-content);
  }
</style>

From the above CSS code block, we can see that the ::after pseudo-class selector uses content property to render the data attribute. In this context, it renders “John Doe” as the data content.

Also, JavaScript can be used to access and render data attributes on the web page. Let’s see an example below:

var name = b.document.getElementById("name");

console.log(name.dataset.parent);

From the example above, we can see that the data attribute is being accessed with the dataset property and then logged onto the console.

Notable References

String Methods In JavaScript

Victor Olaoye — Sat, 01 Oct 2022 04:47:02 +0000

Photo by Shahadat Rahman on Unsplash

In this article, I’ll be covering different string methods that helps us work with strings in JavaScript. Strings are considered primitives in JavaScript because it’s a single value; JavaScript treats primitives as if they were objects and provides methods to call them.

charAt()

The charAt() method is used to return the character at a specified position in a string.

From the code block in the image, we can see that it prints the first character to the console(“h”). If we want to print the 5th character of a given string to the console, then we replace 0 with 4.

concat()

The concat() method was coined from the word concatenate, which means joining two or more strings together. See how it works from this example;

From the example above, two strings were joined together using the concat() method

indexOf()

The indexOf() method returns the position of the first occurrence of a value in a string. Let’s see how it works;

lastIndexOf()

Unlike indexOf(), the lastIndexOf() method returns the position of the last occurrence of a value in a string. See the example below;

Caveat: Both the indexOf() and lastIndexOf() methods are case sensitive.

replace()

This is a generic method for replacing and searching. It can also be used with regular expressions.

search()

The search() method returns the position of the first match or -1 if not found. Let’s see how it works in the example below;

slice()

The slice()method is just one of the three ways to get a substring in JavaScript and it’s syntax is slice(start [, end]). It returns the extracted part in a new string. For instance;

substr()

The substring(start [, end]) is almost the same as slice — it’s also a way to get substring in JavaScript except that it allows the start to be greater than the end and also allows negative starts. For instance;

substring()

The substring() method extracts characters, between two indices (positions), from a string, and returns the substring. Let’s see how it works;

toUpperCase()

It changes the case of all characters in the string to uppercase.

toLowerCase()

It’s the direct opposite of the toUpperCase() method. It changes the case of all characters in the string to lowercase.

valueOf()

The valueOf() method is the default method for string, used internally by JavaScript. This method returns the primitive value of a string. The valueOf() method can be used to convert a string object into a string.

trim()

This is a very helpful method that removes spaces from the beginning and end of a string. For instance;

toString()

This method returns a string as a string. It can also be used to convert a string object to string. For instance;

split()

The split() method splits a string into an array of substrings and it returns a new array.

charCodeAt()

We can use the charCodeAt() to get the Unicode of any character in a string.

includes()

This method returns true if a string contains a specified string, otherwise it returns false. The includes() method is case sensitive.

match()

The match() method finds matches for regular expressions in a string. It has three modes:

If the regexp doesn’t have flag g, then it returns the first match as an array with capturing groups and properties index , input (input string, equals str)
If the regexp has flag g, then it returns an array of all matches as strings, without capturing groups and other details.
If there are no matches, no matter if there’s flag g or not, null is returned.

Let’s see an example of how this method works below:

Summary

In this article, we’ve seen different string methods, their descriptions and how to apply them in JavaScript.

References

. This whole article was inspired by codingtute JavaScript string methods cheat sheet I saw a while ago

. You can also take a look at JavaScript.info to learn more

. Also, w3schools is also a great resource to learn about strings in-depth.

Difference Between Local And Global State Management In React

Victor Olaoye — Thu, 08 Sep 2022 11:02:57 +0000

Photo by Kit Suman on Unsplash

State management is a programming technique that is very essential in any web application. It involves managing dynamic piece of information that makes the user interface of any app interactive thus, making the user experience swift.

When interacting with web applications, there are different noticeable changes in the UI, ranging from toggling the navbar to adding products to carts. These are all possible with state management techniques. State management can be very complex depending on the scale of the application. In recent years, there have been a lot of ways for managing state. In this article, we’ll look at the difference between local and global state management in react.

Local State Management

In local state management, the application state(dynamic information that will keep the user’s experience as smooth as possible) is component scoped. Keep in mind that while managing states in React, states can only be passed as a prop to the child component (unidirectional data flow), but we can’t do the same for the parent component. This unidirectional data flow in react makes local state management easy.

A real-life example of local state management is an application that increases count when a button is clicked. The state of the application is within that component. useState and useReducer hooks can easily be used to manage the state.

But then, what if the states of a large-scale application needs to be managed across all components, for example an e-commerce site where users can add products to cart in a component and display the number of products added in the header component, using useState & useReducer hooks will only make things complex; this is will be explained in the next section.

Global State Management

Managing a large scale application in the scenario given above, will mean that state will be shared across all components. Since there’s no connection between the cart component and the header component, how do we get the number of products added to cart displayed on the header component?.

In this case, it is recommended to avoid passing of data through several nested children components (prop drilling), many libraries have been created to sort this issue: Redux, MobX and so on. React itself also created a hook called Context APIs which can be used to manage global states in web application.

In this article, we have now seen how to manage states both locally and globally with React hooks and other libraries to make our applications very interactive.

Notable References

Error: useParams Not Destructuring In Typescript

Victor Olaoye — Sat, 03 Sep 2022 15:35:54 +0000

I've seen this error in the code block below cause issues for developers who are just starting out with TypeScript. I'm going to show you how to solve this error.

const { token } = useParams();

First, you need to be aware that typescript can't destructure generic plain objects like {} which means useParams() is a generic. Peradventure, you might have also tried using this code block below:

const { token } = useParams() as any

The code block above is very wrong because any can't just be thrown around in this case. The keyword any should only be used when the object can be of any type, in our case here we know the properties and the type of our object, therefore, any shouldn't be used in this scenario.

Side Note: If you know anything about the property of your object or what it will hold, then the keyword any shouldn't be used. It defeats the entire purpose of using typescript in this context.

Now, you might be wondering; what is the best possible solution. You need to tell TypeScript the value of the generic. Say, the value of our generic is a string. Then we write it like this:

const { token } = useParams<{token?: string}>()

From the above code, we're simply telling TypeScript that the value of our token is either a string or undefined. The ? in our code is an optional operating chaining operator in TypeScript. By now, your error should have been solved and doubts cleared.