DEV Community: Dani Passos

Building startups with Mina Protocol

Dani Passos — Thu, 16 May 2024 15:18:01 +0000

Traditional blockchains are hitting a wall. Scalability issues like skyrocketing transaction fees and slow confirmation times are a drag on adoption. Plus, privacy concerns and questions about true decentralization have been way too persist. Well, we can all take a breath 🌬️, Mina Protocol offers a fresh take.

It's the world's lightest blockchain, thanks to zk-SNARKs (zero-knowledge Succinct Non-interactive Argument of Knowledge) cryptography. Unlike traditional blockchains that keep growing, Mina's footprint stays fixed to 22KB, similar in size to a few tweets. This allows every user to fully verify the network from a standard smartphone, a big contrast to the OGs like Bitcoin and Ethereum.

This solid and unique feature not only enhances scalability and accessibility but also ensures enhanced privacy and security, making it an attractive platform for developers with a goal to build efficient, scalable, and privacy-preserving applications. One of the key factors that contribute to Mina's scalability is its use of recursive zero-knowledge proofs (RZKPs). RZKPs are a type of zero-knowledge proof that allows multiple zk-SNARKs to be combined, reducing the overall proof size and verification time.

By leveraging these innovative technologies, Mina Protocol is ready to transform the way we think about blockchain scalability and decentralized applications. Let’s explore it!

Background on Blockchain Challenges

Blockchain scalability issues are a major obstacle to the broad adoption of blockchain technology. For instance, Bitcoin's blockchain is estimated to reach 1 exabyte in size in the next few years, which will make it difficult to verify and maintain.

Scalability Issues

Traditional blockchains face significant scalability issues as they grow. Each transaction added to the ledger requires validation and addition to every node's copy of the blockchain, leading to increased transaction costs and slower confirmation times. This scalability problem is a critical barrier that Mina Protocol addresses through its innovative architecture.

Scalability issues not only affect the overall performance of the network but also have significant financial implications. High transaction fees and slow confirmation times can result in lost revenue for businesses and individuals alike. Furthermore, scalability issues can lead to the centralization of power, where small groups of users or miners control the network, rather than being decentralized.

Privacy Concerns

Privacy remains a paramount concern across digital platforms, particularly with stringent regulations like GDPR and HIPAA imposing heavy penalties for non-compliance. Mina’s use of zero-knowledge proofs ensures that data can be verified without exposing underlying personal information, providing a foundation for privacy-compliant applications.

Core Tech of Mina Protocol

zk-SNARKs (Zero-Knowledge Succinct Non-Interactive Arguments of Knowledge) are cryptographic proofs that allow one party to prove possession of certain information without revealing that information.

Mina uses zk-SNARKs to compress entire blockchain states into small proofs, which are easy to store and verify, drastically reducing the blockchain’s size and resource requirements. Recursive SNARKs are a further enhancement, allowing these proofs to be continually updated and verified without the need for recalculating the entire proof from scratch. This is key to enabling Mina's blockchain to remain so small.

Berkeley Upgrade: transforming zk-SNARKs

Mina Protocol has further enhanced zk-SNARKs with the Berkeley upgrade. This breakthrough, featuring Recursive SNARKs (RSN) and zero-knowledge range proofs, enhances Mina’s scalability, efficiency, and security. The Berkeley upgrade opens up new avenues for developers to build complex, scalable, and private applications.

The Berkeley upgrade demonstrates significant improvements in terms of proof size reduction and verification speed. For instance, the proof size for a standard zk-SNARK can be reduced by up to 90%, resulting in faster verification times and reduced memory usage. Additionally, the Berkeley upgrade enables the use of zero-knowledge range proofs, allowing developers to verify the range of values without revealing the exact values.

Developing Real-World Applications on Mina

You must be asking… OK, but what can I do with this information? Let me shed some light on the possibilities you can build with Mina!

Financial Services

In the financial sector, Mina can support a variety of applications from decentralized exchanges to privacy-centric lending platforms, and automated compliance systems, all benefiting from its scalable and private infrastructure.

Mina's zk-SNARKs and recursive SNARKs enable the creation of-scalable and secure financial applications that can handle large volumes of transactions efficiently and privately.

Healthcare Applications

Mina’s ability to handle sensitive information with complete confidentiality makes it suitable for healthcare applications, such as confidential medical data sharing systems, which can operate across borders while ensuring patient privacy.

In healthcare, Mina's zk-SNARKs and recursive SNARKs enable the creation of secure and private medical records that can be shared across multiple healthcare providers and institutions.

Supply Chain Management

Mina can enhance supply chain transparency and efficiency by verifying the integrity of goods without revealing underlying sensitive data.

This selective disclosure is critical in commercial settings where confidentiality must be maintained.

Future Prospects and Community Ecosystem

As Mina Protocol continues to evolve, we can expect to see new decentralized applications leveraging the innovation in the area of blockchain scalability and security. With the Berkeley upgrade, Mina has taken a significant jump forward in providing a scalable and private infrastructure for all of us, developers, to build on.

How to build a great Developer Relations strategy

Dani Passos — Mon, 04 Mar 2024 14:39:29 +0000

I have been working with Developer Education, developer-focused communities, and as a Developer Relations professional over the past 5 years. One point I can tell you about crafting an effective DevRel strategy is to clearly define your goals.

Is the goal to increase awareness of your stack?
Build a loyal developer community?
Gather actionable feedback for upcoming product development?

Your objectives will shape every aspect of your DevRel strategy, from the types of content you produce to the events you host.

Building and nurturing relationships between tech companies and developers is the core of Developer Relations. The goal is to create a living and growing community around a product or tech stack to facilitate an exchange of knowledge, feedback, and support. This relationship is bidirectional: while companies provide developers with the tools and knowledge to succeed, developers offer key insights that can drive product improvement and innovation in your roadmap.

Community-centric approach

Community is the cornerstone of any successful DevRel strategy. Building a community starts with understanding the needs, pain points, and interests of developers. Engage with them where they are, whether that's on your social media channels, forums like Stack Overflow, or at in-person conferences, meetups, and hackathons.

Providing value through educational content, technical support, and opportunities for developers to showcase their work fosters a sense of belonging and loyalty.

A community-centric approach also involves creating spaces for developers to interact not just with your team, but also with each other. Learning from individuals and collaborating with teams to build projects inside your community can be incredibly powerful, leading to a more engaged and active community.

Leveraging content and education

High-quality, developer-focused content such as tutorials, documentation, blog posts, and video tutorials can help developers get the most out of your tools. Ensuring a good developer experience overall is a powerful tool in a DevRel strategy, serving both educational and promotional purposes.

Content should not only be informative but also engaging and accessible, catering to both beginners, intermediate and advanced users. What if you need to create content not only for developers, but also to their tech leads, who may be the decision makers of adopting your company’s stack? Make sure your content caters to different audiences and is digestible enough for their non-technical team members.

Education extends beyond product-specific content. Offering insights into broader industry trends, best practices, and innovative use cases can position your company as a thought leader in the space. This, in turn, attracts developers who are eager to learn and grow their skills.

Feedback loops to product development

An effective DevRel strategy creates channels for open and honest feedback. Developers are a product's most knowledgeable users, and their insights can be crucial for identifying bugs, highlighting integration issues, and suggesting new features. Encouraging feedback through 1:1 calls with teams, surveys, beta testing programs, and direct communication channels shows developers that their input is valued and can significantly influence product development.

Incorporating developer feedback into your product roadmap not only improves your tools but also demonstrates your commitment to the community. Transparency about how feedback is used and acknowledging contributions can further strengthen the relationship between your company and your developer users.

Measuring success and adapting

Measuring the impact of your DevRel strategy is essential for understanding its effectiveness and areas for improvement.

Key performance indicators (KPIs) might include developer adoption, number of projects built in a hackathon, community growth, engagement metrics, content reach and consumption, and feedback quality and quantity. However, part of the success of DevRel often lies in less quantifiable outcomes, such as the strength and activity of your developer community or the quality of the relationships built.

Adaptability is crucial in DevRel. The tech landscape is constantly evolving, and so are the needs and expectations of developers. Regularly review, report, and adjust your strategy based on both quantitative data and qualitative insights from your community. This ensures your DevRel efforts remain relevant and impactful.

Real-world examples of Developer Relations strategies

We spoke a lot about the overview of how to setup a developer strategy, but how do existing monster companies actually do this? Many leading tech companies have pioneered innovative DevRel strategies to engage with developers and drive product adoption, starting with Apple in 1985.

Together with that, companies like Google and GitHub have put a strong focus on community engagement through comprehensive documentation, open-source contributions, and developer-centric events. These initiatives are built to not only educate developers about their platforms and tools, but also to open a collaborative ecosystem for developers to become ambassadors and where feedback is actively asked for and incorporated into product development.

Google's developer advocacy

Google's approach to Developer Relations showcases how strategic engagement can enhance product visibility and user adoption.

By hosting global events such as Google I/O, offering extensive educational resources on platforms like Google Developers, and actively contributing to open-source projects, Google has established a strong feedback loop and connection with the developer community.

Their strategy emphasizes accessibility, transparency, and support, ensuring developers have everything they need to succeed with Google's technologies.

GitHub's relationship with open-source

Well, if you think about it, GitHub's entire platform serves as a testament to the power of community-driven development.

Their DevRel strategy focuses on empowering developers to collaborate on projects, share code, and improve software together. Through initiatives like GitHub Stars, which recognizes influential community leaders, and GitHub Universe, an event celebrating software development, GitHub emphasizes the importance of community recognition and engagement.

These efforts highlight the company's commitment to supporting and growing the developer ecosystem.

Implementing takeaways from successful strategies

Now, taking some inspiration from these companies, developer-tooling teams can develop their DevRel strategies by focusing on a few key principles:

Community engagement Foster a vibrant developer community through events, forums, and social media, encouraging collaboration and knowledge sharing.
Education and resources Provide comprehensive documentation, tutorials, and learning resources to help developers get the most out of your tools.
Open-source and collaboration Support open-source projects and initiatives, demonstrating your commitment to the broader development ecosystem.
Feedback loops Implement channels for developers to provide feedback on your products, ensuring their insights contribute to your development roadmap.
Recognition and support Recognize and support community leaders and contributors, fostering a sense of belonging and appreciation within your community.

Conclusion

Crafting a great Developer Relations strategy requires a deep understanding of the developer community, a commitment to providing value and support, and an openness to feedback and adaptation.

By focusing on building a strong community, delivering high-quality content, engaging in meaningful feedback loops, and measuring and adapting your strategy, you can create a Developer Relations program that not only supports your company's goals but also contributes positively to the broader developer ecosystem.

Building a Hackathon in 2024

Dani Passos — Fri, 23 Feb 2024 19:13:08 +0000

Feedback loop. Pain points. New use cases for your documentation. These are all valid points for running a hackathon, and nurturing a strong connection with your developer community. Professionals in our field of Developer Marketing must understand hackathons are more than just mere technical marathons, they are hollowed grounds to incubate new ideas and potential for dev-tool companies growth.

Mastering the art of organizing and executing a hackathon is key to engaging with developers and fostering a space for creativity.

After hosting over 10 hackathons with Livepeer, AWS, 1Password, MindsDB, Appwrite, and several other companies, bringing over 1000 hackers per event, I will guide you through the process of building an effective, developer-focused coding fest. Shall we get started?

What is a hackathon?

Let’s cover the basics.

A hackathon is a collaborative coding event where developers, designers, and enthusiasts in the tech community come together to solve problems or develop new applications within a predetermined timeframe. Usually these events focus on specific challenges and offer a space for creative problem-solving and development of new ideas. Can you imagine a project built utilizing your tech stack during a hackathon becoming a Startup Unicorn? That’s the story of 1inch 😉

Together with bringing innovation and a space for companies to have a direct communication with their developer community, hackathons are crucial spaces for networking, learning, and community building.

What to consider when planning a hackathon

Not to pull your ear here in terms of processes and organization, but any hackathon's success hinges on meticulous planning and execution.

That’s why I like to think of DevRel professionals not only as developer marketers, but also project managers, in some capacity. From setting up a full campaign to locking in sponsorships and managing the hackathon's operational aspects, every step requires attention to detail. Utilizing resources like detailed planning documents, design best-practices, and operational guidelines ensures a streamlined process from inception to completion.

Before diving into the logistics of organizing a hackathon, it's crucial to identify the target audience and set clear, achievable goals. Whether the aim is to foster community engagement, encourage innovation, or scout for talent, understanding these elements will shape the event's structure and content.

Logistics, including venue selection, budgeting, and scheduling, are foundational to the event's success. Equally important is the consideration of participants' needs—ranging from technical resources to food and accommodations—ensuring a seamless and enjoyable hackathon experience for all involved.

Virtual or in-person…?

Choosing the right format for your hackathon— virtual, in-person, or, even, hybrid —is crucial, and should align with both your goals and participant preferences. Virtual formats offer broader accessibility, allowing global participation without the constraints of geography. In-person events, however, offer a unique energy and more direct interaction, which can enhance collaboration and networking opportunities. The choice will definitely impact your planning, from logistics to tech requirements, and shape the overall experience for organizers, sponsors, and, most importantly, developers.

Each format presents its own set of challenges and advantages. Virtual events require robust tech infrastructure to facilitate smooth communication and collaboration, whereas in-person events involve logistical considerations such as venues, accommodations, and on-site resources. Hybrid events demand a careful balance, ensuring both remote and in-person participants can engage effectively.

When selecting a format, consider factors like the potential reach, cost implications, and the nature of the challenges being posed to participants. The ultimate goal is to choose a format that maximizes engagement, fosters innovation, and aligns with the hackathon's purpose.

Setup your developers for success

Cater to the needs of the participants and the event format when selecting of appropriate tools and platforms. For a virtual event, the choice of a proper hackathon platform, landing page setup, hacker guides, and establishing solid communication channels is paramount. These tools will support fast dev cycles and real-time feedback, which are critical components of a positive developer experience (DX). Our goal here is to minimize any potential points of friction and enable participants to focus on innovation and problem-solving.

Selecting the right set of tools involves considering factors such as ease of use, integration capabilities, and the ability to support the hackathon's scale.

Additionally, incorporating DX best practices, such as providing complete documentation, directing your community onto how to take your stack for a ride in the quickest way possible; app ideas, giving direction to participants; boilerplate codes, so your developers can optimize for quick setup and iterations, can significantly enhance participant satisfaction and productivity.

Inclusivity… who?

Challenges at a hackathon should ignite creativity and push the boundaries of conventional thinking. They should be designed to be accessible and stimulating for a diverse range of participants, encouraging innovative solutions to real-world problems. Balancing technical complexity with the potential for creative freedom is key to crafting challenges both engaging and rewarding.

Inclusivity in challenge design ensures every participant, regardless of background or skill level, can contribute meaningfully. This approach not only levels up the hackathon experience, but also promotes diversity of thought, which brings more comprehensive and innovative solutions.

Collaboration and networking

The sense of being part of something bigger is what unites developers around a community. Especially in tech. So, fostering the sense of collaboration is the essence of any hackathon.

Facilitating teamwork among participants from various backgrounds enhances the creative process and leads to more effective problem-solving. Organizers can encourage collaboration through team-building activities, mentorship programs, and platforms that support real-time communication, support, and project sharing.

Let’s talk networking. This is another critical component of hackathons, providing participants with valuable connections that can last well beyond the event. Structured networking opportunities, such as keynote speeches, panel discussions, and social events, can nurture relationships and community building within your ecosystem.

Sponsorships

Sponsorships and partnerships with aligned organizations can significantly enhance the value and reach of a hackathon. These collabs provide financial support, access to trendy tools and technologies, and boost your efforts when it comes to co-marketing, awareness, and actually elevating the event's profile by putting it in front of new developers. Identifying sponsors and partners whose goals and values resonate with the hackathon's theme is crucial for establishing fruitful and mutually beneficial relationships.

In return, sponsors gain access to the hackathon’s community of developers, offering a solid opportunity to showcase their stack and services, have direct community feedback, and, even… identify talent.

Bringing projects to partner up or sponsor your event will take the event’s visibility and engagement to another level, together with promoting a lasting impression to the tech space and opening the stage for upcoming collaborations.

Marketing strategies for a hackathon

A well-thought-out marketing strategy is pivotal for attracting a diverse and talented group of hackers to your hackathon. By implementing a blend of communication pieces such as social media, email campaigns, and community outreach, you can effectively spread the word about your event. Highlighting unique aspects of the hackathon, like innovative winner tiers, notable workshop speakers, and enticing prizes, can serve as attractors to developers. Additionally, engaging with tech communities on social platforms amplifies your reach, drawing in participants who are eager to showcase their skills and connect with like-minded individuals.

Here is the recipe I’ve used for some hackathons over the past 6 months:

Efficient timeline management: An efficient timeline, starting with locking in companies eight weeks prior to the hackathon, ensures all stakeholders are aligned and prepared. Activities ranging from landing page creation to promotional efforts and post-event engagement are scheduled to maximize impact. Regular updates to sponsors, engaging social media posts, and targeted email reminders keep the momentum going, ensuring high engagement throughout the hackathon.
Resource allocation and promotional efforts: Allocating resources effectively and executing targeted promotional efforts are key. Leveraging newsletters for weekly communications, social media for regular updates, and a dedicated landing page for registration and information ensures participants are well-informed and engaged.
Social media: The person managing social media should execute platform-specific strategies to maximize reach. Creating engaging content, including videos, tailored to each platform ensures your message resonates with the intended audience. Collaborating with creators for specialized content needs can further enhance the campaign's impact.
Community outreach: Strengthening ties with the existing Hashnode community and partnering with tech communities and educational institutions broadens your hackathon's visibility. Exploring collaborations with events like ETH Global or US-based universities could offer new avenues for growth and participation.
Influencer collaborations: Teaming up with 3-4 tech influencers for each hackathon can significantly extend your event's reach. Lead DevRel also facilitates the identification and collaboration with the top tech influencers, while social media analytics help track the campaign's effectiveness, ensuring your message resonates far and wide. Feel free to reach out to us on X, LinkedIn, or email if you want support on this front.

DevRels, this is a comprehensive and multifaceted approach to help us to build and engage a developer community eager to participate in your hackathon and continue contributing overtime.

Providing resources and support

This shouldn’t even have to be said, but here we go: ensure all your hackathon participants have access to necessary resources and support. This includes comprehensive documentation, robust development tools, and responsive technical support. Good DX practices enable quick onboarding and iteration, support guidance, and even easy upgrade paths for dependencies.

Mentorship is underrated, but invaluable during hackathons. Providing mentors from your team who can offer expertise, guidance, and encouragement can greatly enhance the participant experience. A support structure ensures that all individual devs and teams, regardless of their initial skill level, have the opportunity to fully engage with the hackathon's challenges and learn from the experience.

Last thoughts

Organizing a successful hackathon in 2024 requires careful consideration of format, tools, challenges, and participant support, all with focused at providing an excellent developer experience.

By focusing on the elements mentioned throughout this post, dev-tool companies can create hackathons that not only spur tech innovation but also build stronger connections within the developer community, laying a solid foundation for advancements and future launches.

Code Structuring for Creative Coding

Dani Passos — Thu, 25 Jan 2024 10:00:00 +0000

When you're starting out with three.js, your projects might be simple enough to fit into a single JavaScript file. But as you take on more complex projects, you'll quickly realize that having everything tangled up like spaghetti in one file is a recipe for disaster.

Sure, you can use block comments to separate different parts of your code, but let's face it - you'll still need to scroll through a lot of code to find what you're looking for. And that's just the tip of the iceberg 🤯

Think about it: it's hard to find what you want when everything's jumbled together. It's even harder to reuse specific parts of your code, and you constantly have to worry about variable conflicts. And if you're working with other developers, forget about it - you'll be dealing with conflicts left and right.

Plus, let's not forget the physical toll it takes on you. Your fingers will start to cramp up from all that scrolling. And who wants that? 👀

We need to structure our code in a more maintainable way. Don't worry, it's not as daunting as it sounds. By breaking your code up into smaller, more manageable pieces, you'll make it easier to navigate and maintain in the long run.

Trust me, your fingers (and your fellow developer friends) will thank you for it.

Modules

When it comes to organizing our code, modules are a game-changer. The basic concept is to divide our code into multiple files, so that we can import and use only what we need, when we need it.

In fact, if you've ever imported dependencies into your code, you're already familiar with how modules work. It's a simple yet powerful way to keep your codebase neat and tidy, and avoid cluttering your files with code that you don't need right away.

By breaking down the code down into smaller, more focused chunks, we'll be able to make our code easier to read, maintain, and scale as the project grows.

import * as THREE from 'three'
import gsap from 'gsap'

Syntax

We are going to ignore the current state of our project for a moment to focus on syntax.

In /src/script.js, comment out everything (even the CSS import).

In the /src/ folder, create a cool.js file. We are going to add content to that file and import it into script.js.

A file can export one or multiple things, but, to keep things simple, I like to export only one thing per file.

To do that, write the following code in cool.js :

export default 'Hello developer friend!'

And then, to import this code into /src/script.js, write the following code:

import test from './cool.js'

console.log(test)

And that's it. Check your console and you should see Hello developer friend!.

One very important detail is that the path starts with ./. When we refer to a file, we need to do it that way, otherwise the build tool will try to find it in the node_modules folder.

Here, we exported a string, which is not very useful. But we can export functions:

// cool.js
export default () =>
{
    console.log('Hello developer friends')
}

// scripts.js
import test from './cool.js'

test()

We can also export objects:

// test.js
export default {
    hello: 'modules'
}

// scripts.js
import test from './cool.js'

console.log(test)

And we can also export classes, but we are going to see that later.

The export instruction can also be done after the object:

// test.js
const somethingToExport = {
    hello: 'modules'
}

export default somethingToExport

And as mentioned earlier, one file can export multiple things:

// test.js
const oneThing = {
    hello: 'modules'
}

const anotherThing = () =>
{
    console.log('Hi!')
}

export { oneThing, anotherThing }

// scripts.js
import { oneThing, anotherThing } from './cool.js'

console.log(oneThing)
anotherThing()

By exporting multiple things, we don't need to import everything in the module. We can select what we want:

// script.js
import { oneThing } from './cool.js'

console.log(oneThing)

And this is actually how Three.js classes can be imported without importing the whole library.

Currently, when we import Three.js, we do:

import * as THREE from 'three'

And everything that is being exported from three will be available in the THREE variable. But we can choose to import specific classes like this:

import { SphereGeometry } from 'three'

But again, we are not going to use that feature and each one of our files is going to export only one thing.

Inheritance

Inheritance is like creating a class based on another class. In a way, we create a blueprint based on another blueprint.

All the methods of the base class will be available in the new class.

To illustrate that, let's add a feature to our robots so that they can fly. But not every robot can fly like Wall-E. Still, every robot needs a name and legs.

To create a class based on another, use the extends keyword. Create the following class after the Robot class:

class FlyingRobot extends Robot
{

}

We have created a FlyingRobot class which we can now use for robots that can fly:

const wallE = new Robot('Wall-E', 0)
const ultron = new FlyingRobot('Ultron', 2)
const astroBoy = new FlyingRobot('Astro Boy', 2)

Currently, this FlyingRobot doesn't add anything to the Robot class, but we can add methods like this:

class FlyingRobot extends Robot
{
    takeOff()
    {
        console.log(`Have a good flight ${this.name}`)
    }

    land()
    {
        console.log(`Welcome back ${this.name}`)
    }
}

Robots instantiated with FlyingRobot will still be able to say "hi", but now they will also be able to take off and land:

astroBoy.sayHi()
astroBoy.takeOff()
astroBoy.land()

But if we try to do the same with Wall-E:

wallE.takeOff()

We get an error. Wall-E isn't an instance of FlyingRobot and thus can't take off.

Providing a method with the same name to the FlyingRobot class will override what the method does in the Robot class:

class FlyingRobot extends Robot
{
    sayHi()
    {
        console.log(`Hello! My name is ${this.name} and I am a flying robot`)
    }

    // ...
}

But if you want to provide a different constructor, you have to start the method with super() and send the needed parameters to it:

class FlyingRobot extends Robot
{
    constructor(name, legs)
    {
        super(name, legs)

        this.canFly = true
    }

    // ...
}

super corresponds to the base class (Robot) and using super() is like calling the base constructor so that everything we do in the base constructor will be done in the new class, too.

We can also use super to call methods from the base class. As an example, we can make the robot say "hi" like it use to and then, in another log, say that it is a flying robot:

class FlyingRobot extends Robot
{
    sayHi()
    {
        super.sayHi()

        console.log('I am a flying robot')
    }

    // ...
}

Note: this approach tends to complicate the code, don't overuse it.

Combining the classes and the modules

The idea here is that we are going to separate our code into files and each one of these files will export a different class.

To illustrate that with the robots, create a /src/Robot.js file and put the Robot class in it, but with an export default at the beginning:

export default class Robot
{
    constructor(name, legs)
    {
        this.name = name
        this.legs = legs

        console.log(`I am ${this.name}. Thank you creator`)

        this.sayHi()
    }

    sayHi()
    {
        console.log(`Hello! My name is ${this.name}`)
    }
}

Now create a /src/FlyingRobot.js file and put the FlyingRobot class in it, but with an export default at the beginning:

export default class FlyingRobot extends Robot
{
    constructor(name, legs)
    {
        super(name, legs)

        this.canFly = true
    }

    sayHi()
    {
        console.log(`Hello! My name is ${this.name} and I'm a flying robot`)
    }

    takeOff()
    {
        console.log(`Have a good flight ${this.name}`)
    }

    land()
    {
        console.log(`Welcome back ${this.name}`)
    }
}

Before importing them, however, we need to fix an issue.

FlyingRobot inherits from Robot, but Robot isn't available in the file. We need to first import that class to refer to it.

Add the following import:

import Robot from './Robot.js'

export default class FlyingRobot extends Robot
{
    // ...

In /src/scripts.js, we can now import and use these classes:

import Robot from './Robot.js'
import FlyingRobot from './FlyingRobot.js'

const wallE = new Robot('Wall-E', 0)
const ultron = new FlyingRobot('Ultron', 2)
const astroBoy = new FlyingRobot('Astro Boy', 2)

And our code to create robots becomes suddenly very simple.

At first, all of this might seem a bit complicated, but your code will become much more maintainable and you'll be able to reuse it in different projects simply by copying the classes you need.

Structuring a Creative Project

A good practice is to put the whole experience inside a main class that will then create everything else. This is particularly useful if your WebGL experience is part of a bigger website with HTML content, other pages, etc.

The code related to your experience will be separate from the rest of your code, but still accessible through the class and all the methods and properties you provide within that class.

As for the name of that class, I like to use Experience but it can be MySuperGame, WebGLAwesomeStuff, Application or whatever.

Create and instantiate the class

In the /src/ folder, create an Experience/ folder and, in that /src/Experience folder, create an Experience.js file.

In that file, export a class as follows:

export default class Experience
{
    constructor()
    {
        console.log('Here starts a great creative experience')
    }
}

All classes related to the experience will be in that folder.

In /src/script.js, we can import and instantiate that class:

import Experience from './Experience/Experience.js'

const experience = new Experience()

Canvas

Covering the canvas as our example for this article, is good to know that when instantiating the Experience, we are going to send the canvas as a parameter so that other developers using our class in different situations will be able to choose what <canvas> they want to use.

When instantiating in /src/script.js, use querySelector() to send the canvas parameter:

const experience = new Experience(document.querySelector('canvas.webgl'))

And, in the class, save it as a property:

export default class Experience
{
    constructor(canvas)
    {
        // ...

        // Options
        this.canvas = canvas
    }
}

Sizes

The first and super useful class we will cover in this article is the one that will handle the sizes of the experience. It'll include the width and the height of the viewport as well as the pixel ratio of the screen.

We are going to update these values when a resize occurs, but we are also going to warn the experience of that resize.

In the /src/Experience/Utils/ folder, create the Sizes.js class:

export default class Sizes
{
    constructor()
    {
    }
}

And instantiate it in the Experience class:

import Sizes from './Utils/Sizes.js'

export default class Experience
{
    constructor(canvas)
    {
        // ...

        // Setup
        this.sizes = new Sizes()
    }
}

In that Sizes class, add the usual width, height and pixelRatio as we did before, but save them as properties:

export default class Sizes
{
    constructor()
    {
        // Setup
        this.width = window.innerWidth
        this.height = window.innerHeight
        this.pixelRatio = Math.min(window.devicePixelRatio, 2)
    }
}

Then listen to the resize event and update those properties:

export default class Sizes
{
    constructor()
    {
        // ...

        // Resize event
        window.addEventListener('resize', () =>
        {
            this.width = window.innerWidth
            this.height = window.innerHeight
            this.pixelRatio = Math.min(window.devicePixelRatio, 2)
        })
    }
}

Here, we assume that the experience always fills the viewport. If that's not the case, you'll have to do things differently.

We can now access the width, height and pixelRatio from the Experience class:

import Sizes from './Utils/Sizes.js'

export default class Experience
{
    constructor(canvas)
    {
        // ...

        this.sizes = new Sizes()

        console.log(this.sizes.width)
        console.log(this.sizes.height)
        console.log(this.sizes.pixelRatio)
    }
}

At some point, we will also have to update other values like the camera or the renderer when a resize occurs. We could listen to the resize event on window like we just did, but instead, we are going to use the Sizes class to warn the other classes about that change.

Closing thoughts

If you're working on a Three.js or React Three.js project, you already know that these libraries offer a lot of flexibility and power when it comes to creating 3D visualizations, animations, and interactive experiences. But with great power comes great responsibility, especially when it comes to organizing your code. Here are some tips to help you structure your code in a way that's clear, efficient, and maintainable.

Start with a plan: Before you dive into coding, take some time to sketch out your project's architecture and flow. Think about the different components or modules you'll need, and how they'll interact with each other. Consider using a diagramming tool like Lucidchart or Draw.io to visualize your plan.
Break it down into components: In React Three.js, everything is a component. Take advantage of this by breaking your code down into small, reusable components that do one thing and do it well. This makes it easier to manage your code, test your components in isolation, and swap out components as needed.
Use a folder structure: Create a folder structure that makes sense for your project, and stick to it. For example, you might have separate folders for components, utilities, assets, and tests. This helps you find what you need quickly, and keeps your project organized as it grows.
Name your files and components clearly: Choose descriptive names for your files and components, and avoid using generic names like "utils" or "helpers". This makes it easier to understand what each file or component does, and helps you avoid naming collisions with other libraries or modules.
Use a linter: A linter is a tool that checks your code for style and syntax errors, and can also enforce coding standards and best practices. Use a linter like ESLint or Prettier to keep your code consistent and readable, and catch errors before they cause problems.
Use version control: Whether you're working solo or with a team, version control is essential for managing changes to your code over time. Use a version control system like Git to track changes, collaborate with others, and revert to earlier versions if needed.
Keep your code DRY: DRY stands for "Don't Repeat Yourself", and it's a fundamental principle of good code design. Avoid duplicating code across your project, and instead look for ways to abstract common functionality into reusable functions or modules.
Use comments judiciously: Comments can be helpful for explaining complex code or providing context for others who might work on your project. But too many comments can clutter your code and make it harder to read. Use comments sparingly, and focus on writing code that's self-explanatory.
Test your code: Finally, make sure to test your code thoroughly to catch errors and ensure that your project works as expected. Use a testing framework like Jest or Enzyme to write unit tests for your components and utilities, and automate your tests using tools like Travis CI or CircleCI.

By following these tips, you'll be well on your way to writing clean, organized code that's easy to maintain and build upon over time.

Remember, good code structure isn't just a nicety - it's essential for creating successful Three.js or React Three.js projects that meet your goals and exceed your users' expectations.

That is it for this article about structuring big creative projects!

Let's connect on Twitter and LinkedIn 👋

Web3: Getting Started

Dani Passos — Thu, 03 Nov 2022 15:24:21 +0000

Decentralized internet services using blockchain technology and encryption are known as Web3, a new approach to the World Wide Web. The third generation of the internet includes ideas like decentralization, token-based economics, and machine-based data comprehension to offer a more liberated, intelligent, and interesting web browsing experience.

In this article, we will go over the most common web3 terms and definitions for developers.

Cryptocurrency

A digital currency used as a medium of exchange is cryptocurrency or crypto. To protect and authenticate transactions, as well as to control the creation of new digital currency units, it uses encryption.

You'll notice that cryptocurrencies are frequently mentioned when talking about Web3. Anyone who wants to assist with the development, management, or improvement of the project will be compensated financially because many of these systems use cryptocurrency (tokens).

All crypto assets are typically referred to as tokens.

Smart Contract

A decentralized program known as a smart contract responds to events by carrying out business logic. Executing a smart contract may result in the exchange of funds, provision of services, unblocking of data under the control of digital rights management, and other types of data manipulation, such as changing the name on a property title. Solidity is frequently used to create smart contracts.

Solidity

For building object-oriented, high-level smart contracts that automate transactions on the blockchain, using Solidity.

As per its documentation, "The language of curly brackets is solidity. It is directed at the Ethereum Virtual Machine (EVM) and has influences from C++, Python, and Javascript."

Ethereum Virtual Machine (EVM)

The environment used to run Ethereum smart contracts is called the Ethereum Virtual Machine. EVM is dedicated to offering security and enabling computers worldwide to run programs.

Solana

Solana is an open-source project that implements a new permissionless, high-performance blockchain. Solana has its native token called $SOL. It can be passed to nodes in a Solana cluster for running an on-chain program or validating its output.

Polygon

Polygon is an L2 tech stack completely customizable and has an Ethereum-like user interface offered by Polygon to developers. Polygon also has its native token, $MATIC.

Speed The Polygon Network uses a high-throughput blockchain, with each checkpoint's stakeholders choosing a set of Block Producers to provide consensus. Blocks are verified using a Proof of Stake layer, which also periodically updates the Ethereum mainnet with evidence of Block Producers. Because of the high decentralization preserved and the quick block confirmation rates of roughly 2 seconds made possible, the network's throughput is good.

Ability to scale On a single sidechain, Polygon Network achieves a theoretical transaction speed of under 2 seconds. The network can handle millions of transactions per second using many sidechains. The Polygon network may scale quickly thanks to this method (already shown in the first Matic sidechain).

Protection Smart contracts in Polygon rely on Ethereum's safety. The network is protected by three important security models. It takes advantage of a group of motivated validators running Heimdall and Bor nodes and Ethereum's staking management contracts. Hybrid developers can integrate both models inside their dapp.

Gas Fees

Gas is essential to the Ethereum network. It is the fuel that allows it to operate in the same way that a car needs gasoline to run. The transaction costs that users pay miners on a blockchain protocol to get their transaction included in the block are referred to as "gas fees."

To stop malicious users from spamming the network, the Ethereum network imposes a fee on each computation performed there. Each transaction is required to set a limit on how many computational steps of code execution it can use to prevent unintentional or malicious infinite loops or other computational waste. "Gas" is the basic unit of computation.

Even though a transaction has a limit, any gas not used in the transaction is given back to the user (i.e., the maximum fee minus the base fee plus the tip).

Crypto Wallet

A crypto wallet is a program or software that allows users to engage and interact with blockchain networks directly. Some popular are Coinbase, Exodus, and BlockFinodes. Cryptocurrency wallets can be software or hardware-based.

Etherscan

Etherscan is a program that allows you to see information about any Ethereum blockchain transactions that are either pending or confirmed. Because Ethereum is a public, open blockchain, every interaction with it is documented in the transaction history, which is visible to anybody.

Decentralized application (Dapp)

A decentralized app (dapp) is a digital application or a program that lives and executes on a blockchain or peer-to-peer network of computers rather than a single computer and is independent of anyone's authority's control.

Non-Fungible Tokens (NFTs)

NFTs (non-fungible tokens) are blockchain-based tokens representing a unique asset such as a work of art, digital property, or photo/video media. It can be anything from music to a website domain.

Metaverse

The Metaverse will act as the user interface for the connected Web3, allowing people to engage online, communicate, and share experiences. The future of the internet will be considerably more immersive and social because of advancements in technologies like augmented reality (AR), and virtual reality (VR) applied within the Metaverse.

Conclusion

That is it for this guide!

Let's connect on Twitter and LinkedIn 👋