In this blog, you'll learn how to deploy it on your local machine so you can explore and experiment with the thirdweb Engine for your next or current Web3 project.

Requirements

• Docker

• Git

• NodeJS

• Any code or text editor. (VS Code, Vim, or Nano)

• thirdweb API secret key.

• Wallet address. (any EVM-compatible wallet address)

Steps

1. Open your terminal on your local machine and execute the command below. It will clone my scripts into a new folder called engine.

    git clone https://github.com/warengonzaga/thirdweb-engine-deploy-locally engine
   

   

2. Navigate to the engine folder and open the file named .env.example. Fill out the required information. I prefer to use the Nano text editor in this guide because it is straightforward.

   

   ADMIN_WALLET_ADDRESS → The wallet address that can manage your engine.
   THIRDWEB_API_SECRET_KEY → The thirdweb API secret key; get yours here.
   ENCRYPTION_PASSWORD → The string to encrypt sensitive data stored in DB.

   💡

   To save your changes in the Nano text editor, press CTRL+X. It will then ask you to confirm the save. Simply press Y and then hit ENTER to complete the process.

3. After that, start Docker on your local machine and ensure it is running.

   

4. Now, return to your terminal and run npm run start, and it will handle everything for you. Watch your terminal pull the thirdweb engine docker image and set up your container. If you see the message below, your engine has been successfully deployed and is ready to use.

   

5. Lastly, visit your endpoint URL at http://localhost:3005 , and you should see something like the example below. That's it! ✨

   

Now that you have the endpoint URL, let's import your instance to the thirdweb Engine dashboard. Follow the steps here.

Try Engine Examples

To explore and experience the capabilities of thirdweb Engine, try some of our templates. Here are some of the best templates we have today for building with thirdweb Engine.

Mintcaster

Bootstrap your own client on Farcaster, complete with a feed, cast functionality, and Sign-in with Farcaster auth, and add NFT minting functionality using the thirdweb Engine.

Phygital Experience

Users can scan a QR code on a physical product to mint an NFT using the thirdweb engine. Perfect for buying and selling digital items physically.

Speed Racer

Try this template with the thirdweb Engine and Unreal game engine to build your own racing game powered by the blockchain.

That's all! Enjoy, and keep building! 🫶

Engine is a backend HTTP server that reads, writes, and deploys contracts on a large scale. It allows you to create and interact with backend developer wallets, supporting high throughput with automatic nonce and gas management. Think of this as your rail transport vehicle or train Engine for your Railway. 🚂

Railway is a deployment platform created to simplify the software development lifecycle. It starts with instant deployments and easy scaling and includes CI/CD integrations and built-in observability. Let's say this is the Railway track for your train Engine. 🛤️

In this tutorial blog, you'll learn how to deploy your self-hosted thirdweb Engine on the Railway platform in less than 3 minutes using our community-contributed Railway template. This is the official community Railway template maintained by the thirdweb community team.

Without further ado, let's deploy your Engine to its Railway. 🚂🛤️ (you get it?)

Requirements

• thirdweb API secret key.

• Wallet address. (any EVM-compatible wallet address)

Steps

1. Go to your Railway dashboard and create a "New Project."

   

2. On the new project page, search for "thirdweb" or "thirdweb Engine," and you will find the template we created.

   

3. You will be redirected to the deploy page. First, click the "Configure" button for the Postgres service. Lastly, save the configuration and return to this page.

   

   

4. Let's set up the thirdweb Engine service. Enter your wallet address into the ADMIN_WALLET_ADDRESS field, and then enter your "thirdweb API secret key" into the THIRDWEB_API_SECRET_KEY key input field. After that, save the configuration and return to the template deployment page.

   

   

5. All you have to do is click the "Deploy" button and wait.

   

6. In less than 3 minutes, your thirdweb Engine will be ready for use. Go to your Engine service > Settings > Networking > Public Networking to find your endpoint URL.

   

7. Open this endpoint URL in your browser, and you'll receive an API message response. This indicates a successful Engine installation. Be sure to save this; you will need it to import into your thirdweb Engine dashboard.

   

Manage Ending from the Dashboard

1. Now, let's import your endpoint URL to your thirdweb dashboard. Navigate to your Engine dashboard and select the "Import" button.

   

2. Name your self-hosted thirdweb Engine, enter the endpoint URL from your Railway project, and click the import button. Follow the example provided below.

   

3. After you import it, it should look like this. Go ahead and view and manage your self-hosted thirdweb Engine from your account dashboard.

   

4. Don't forget to create your backend wallet to execute write transactions and generate your access token. This will allow you to interact with your Engine API.

   

   

Testing

In this section, let's test your engine to see if it works. The simplest method is to make a direct request using curl in your terminal. Just replace the <xxxx> with your Railway endpoint URL and provide your access token from your thirdweb Engine dashboard.

We will send a GET request to read the contract information for name on the base-sepolia-testnet chain. Let's use 0xD1042CC90244beeE8E30e1655f1935C3e8BFB86a as our test contract address.

curl -X 'GET' \
  'https://engine-production-<xxxx>.up.railway.app/contract/base-sepolia-testnet/0xD1042CC90244beeE8E30e1655f1935C3e8BFB86a/read?functionName=name' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer <your access token here>'

Copy and paste this command into your terminal and press enter. It should return a response with the name of our test contract. The name should be Mata NFT.

You can also use the Insomnia software to test your Engine. We performed a similar request using its graphical user interface (GUI). Enter your access token in the Bearer field as your authentication method, and then input your GET request URL. After that, click "Send." You should receive a 200 response code and the test contract's name.

This is it. If you see a similar result, you're good to go! 🚂🛤️

Update

You need to update the version manually from the Railway dashboard. To do this, navigate to your Engine service and redeploy the source.

Enjoy, and keep building! 🫶

This means that Buy Me a Coffee now supports its own syntax for the FUNDING.yml file, which is buy_me_a_coffee followed by your username. It displays like this.

Beautiful right? This is like a dream come true for me as compare before it displays like this as we use custom syntax just to support Buy Me a Coffee platform.

This is a significant improvement after years of waiting! If you're curious about which platforms are supported, you can learn more about the GitHub sponsors button here.

Alright, now that we understand what this is all about, I'll show you how to enable this feature on your open-source project. This way, your users can support your project by actually buying you a coffee. ☕

Without further ado, let's get started! 🚀

Steps

1. Clone your GitHub project repository.

   

   In my case, I prefer to use GitHub CLI as it is convenient for me to clone projects easily in my local machine. You can use whatever you prefer to clone your project.

   

   Here's how I clone my project, as you can see cloned directly to my local machine. I'm using WSL on Windows 11. 😅

2. If you haven't already, Create a .github folder at the root of your project.

   

   After cloning the project, you'll need to navigate to the project folder. In my case, I use the terminal and cd command to do this. I have already a .github folder due to the fact that I'm using Buy Me a Coffee URL before using custom syntax to add my Buy Me a Coffee profile.

3. Inside your .github folder, you have to create another file called funding.yml.

   

   Navigate inside the .github folder and create a file name funding.yml. In my example, I have already a file name so I will not create another one.

   You might be wondering why I don't name it as FUNDING.yml? This is because it is my preference if the file is not so important inside my project I don't use uppercase. Both lowercase and uppercase works when setting up your funding file for GitHub.

4. Open funding.yml file in your favorite code editor in my case I'll use VS Code.

   

   It will open a VS code in my local machine so I can modify the file and enable Buy Me a Coffee button to my opensource project.

5. Use the following syntax below to specify Buy Me a Coffee platform as your GitHub sponsors button.

   

   You can use comment syntax for your YAML file like in my example. If your account has GitHub sponsors enabled you can add it to your funding tile too. In my case, I have both. You can apply here if you want!

6. Commit your changes, and push it!

   

   Once, you update your funding.yml file you need to commit your changes and push your updates. In my case, I'm using an AI-powered commit message tool called "Magic Commit" or "magicc" in short. If you like doing manual then follow the Git flow below.

   

7. That's it, you should be able to see the Buy Me a Coffee button from your GitHub project's repository homepage.

   

Enjoy your coffee and happy building! ☕

See you in my next blog... 💖

In this guide, you'll learn how to change your admin wallet to a new one without needing to spend gas from your compromised wallet address, using the thirdweb gasless method. Without further ado let's get started! 😎

Setup

1. Do npx thirdweb create app --node --javascript --evm

2. Rename the .env.example to .env

3. Copy and paste this to your .env

WALLET_PRIVATE_KEY=
THIRDWEB_SECRET_KEY=
RELAYER_URL=

4. After that, fill out the information needed.

5. Get the private key of the compromised wallet and paste it as a value to WALLET_PRIVATE_KEY=

6. Get the secret key from this https://thirdweb.com/create-api-key

7. Get the relayer_url from this tutorial https://blog.thirdweb.com/guides/setup-gasless-transactions

8. Copy and paste the code below to your local index.js

import { config } from "dotenv";
import { ThirdwebSDK } from "@thirdweb-dev/sdk";

config();

const newAdmin = "0x...";
const contractAddress = "0x...";

const main = async () => {
  if (!process.env.WALLET_PRIVATE_KEY) {
    throw new Error("No private key found!");
  }

  try {
    const sdk = ThirdwebSDK.fromPrivateKey(process.env.WALLET_PRIVATE_KEY, 'polygon', {
      gasless: {
        openzeppelin: {
          relayerUrl: process.env.RELAYER_URL, // Learn more: https://blog.thirdweb.com/guides/setup-gasless-transactions/
        },
      },
      secretKey: process.env.THIRDWEB_SECRET_KEY,
    });

    const contract = await sdk.getContract(contractAddress);
    // run this first so you can set it as owner.
    const tx = await contract.roles.grant("admin", newAdmin);
    // Uncomment this, and comment the code above ^ after you set the newAdmin as admin.
    // const tx = await contract.owner.set(newAdmin);

    console.log(tx);

  } catch(error) {
    console.error("Something went wrong: ", error);
  }
};

main();

4. Fill in the information for the variables.

const newAdmin = "0x...";
const contractAddress = "0x...";

9. Run the code by doing node index.js

Usage

1. After the setup, run the script straight. node index.js

2. Comment on this part by adding // in front of it.

const tx = await contract.roles.grant("admin", newAdmin);

3. Then, uncomment this part. By removing the // in front of it.

const tx = await contract.owner.set(newAdmin);

4. Run again the script. node index.js

That's it! ✨ See you on my next blog... 💖

For your reference here's the example setup I made with this tutorial. 😁

🤝 Intro

Today we are going to deploy a sample next.js app to GitHub pages using new GitHub actions to package your sample next.js app. The old way of doing this is that you need to use something like gh-pages package just to make it work.

Basically, it creates a separate branch just for your exported static site and it works like a magic. Let's learn the new way! Sounds good? Let's go! 💪🔥

📃 Requirements

Here are the basic requirements for today's tutorial.

1. GitHub account. (obviously 😅)
2. Code editor. (VS Code 👀)
3. Sample Next.js app.

📦 Sample Next.js App

Let's assume that you have the GitHub account and code editor ready. Now let's clone or fork my sample Next.js app to your local machine. I'm gonna use GitHub CLI for a quick repo clone. 👀

gh repo clone warengonzaga/sample-nextjs-app

After that, do yarn install and yarn dev to start a server on http://localhost:3000.

Feel free to edit the sample next.js to your liking. This sample next.js app is based on create-next-app so nothing special here.

🖥️ Set Up Repository

If you fork the sample repo and clone locally, you are good to skip this part. 💪

If you clone the repo without forking it, follow these instructions from GitHub! 🏋️

🧰 Pages and Actions

Here's the exciting part, now navigate to the Settings of your repository and click Pages. You'll see it like this. 👇

Now change it to the new GitHub actions! 😊

You'll see a recommended workflow here, let's configure it! ☕

We don't need to configure this for now as we are deploying a sample next.js app therefore committing this workflow to your repository is a go signal. 🔥

It is now building something similar to Vercel! 💪😊

Now deploying directly to GitHub pages... 👀

and... it's done with a URL. 😅

Here's what it looks like... https://opensource.warengonzaga.com/sample-nextjs-app

Don't forget to configure your custom domain via GitHub pages settings. 😊

🤔 Conclusion

To end this, unlike the old method this one is much easier now, as you may notice there is no additional branch created from the process, and all the building and deployment process happens on GitHub actions with the help of Next.js workflow. 💪

This update is still in beta at the time of this writing and hopefully, it will improve more in the future. If you have feedback about this fantastic update you can participate by going to GitHub feedback page. 👍

To learn more about this update, read this blog. 📖

Like this blog? 🤔 Please consider supporting me on GitHub Sponsors or nominate me (@warengonzaga) as a GitHub Star. Your support means the world to me. 🥰

See you on my next blog... 👋

Let me share one story with you; one time, I tried to do basic cleaning to my Windows machine using Disk Cleanup, and I checked all the items there and deleted them so I could free up some space. Do you know what happened? --- Blue Screen of Death shows! 🤦‍♂️

With this wonderful experience using Windows, I motivated myself to learn how to effectively do maintenance and optimization without breaking my computer. I know that's a funny reason, but that's my inspiration; that's why I created a tool that automates the optimization and maintenance of a Windows computer. 🤘

🧹 Cleaning Tool

Introducing the WRN Cleaner! 🎉🎉🎉

It is a maintenance tool that can automatically or manually clean up your Windows machine and reliably. It is designed specifically for Windows machines only. The motivation behind this project is to clean up Windows machines in an automated way with pre-configured optimization techniques. 😉💻🧹

⚡ Features

I'm using the native approach in cleaning Windows machines compared to other tools out there. Check out the different native Windows utilities to automate the maintenance and optimization. 🔥

Here's the cleaning process in sequence. 🧹

• Disk Cleanup

• Defragment (HDD)

• Retrim (SSD)

• Checks System File

• Cleans Recycle Bin

• Cleans Temp Folder

• Cleans Prefetch Folder

• Clears Windows Error Log

• Auto or Manual Shutdown and Reboot When Done

Disk Cleanup - As you may have noticed, I placed the Disk Cleanup at the top of the cleaning process; why? My reason is that this is the only native maintenance utility in Windows that needs user interaction. Getting the user's attention to finish all the steps before leaving the program running is good. Placing the Disk Cleanup somewhere in the process will prevent the whole process from finishing if the user is away from the keyboard, causing the program to hang and unable to complete the cleaning process. Make sense? 😅

Defrag / Retrim - Last year, I bought an SSD to upgrade my workstation, but here's the question: can I defrag my SSD? The answer is no! It has been a requested feature of the tool to support SSD-enabled Windows machines. I started to research this feature request and found out that Windows' Defrag utility software has an optimization feature that works with SSDs, which is the Retrim! The tool can safely detect and apply the necessary optimization for your storage device. 🤘

System File Checker - Built-in utility for Windows machines for checking and restoring corrupted system files. That's it! 😅

Recycle Bin / Temp Folder / Prefetch Folder - The tool cleans your recycle bin, temp folder and files, and prefetch folder to free up some storage. 👊

Windows Error Log - This can help reduce the noise in your Windows logs by deleting old error logs. 🤝

⚠ Reminder: It is recommended to use this tool once every month.

🧰 Maintenance

Now we have the tool, and we don't have to worry about making the same mistake I made. 🤣 It is so simple to use my cleaning tool. Follow the usage below... 👀

1. Get the latest stable version.

2. Run the batch script file as an Administrator.

3. Follow the on-screen instructions.

4. Wait...

5. Done!

⚠ Reminder: When you start to run the program the first cleaning method would be DiskClean so be careful on this one, don't check or uncheck things here. It is set to the default configuration and all you have to do is to click ok or next.

🔐 Security

Some of you may know that I'm a cybersecurity researcher by trade, and security is very important to me. The maintenance tool I made is safe to use as I'm also using it, I mean you can read the entire source code in the official GitHub repository. 😅

In addition, you can check the VirusTotal result here. 😉

If, in any case, you find a potential security bug, then feel free to reach out to me.

☝️ Last Words

Having a Windows machine can be painful, but this is where I started, and this is all I have. I'm planning to install a new machine with Windows OS soon. Yeah, I'm very comfortable with Windows as my main personal computer. I would probably use an Apple machine for work as it is very reliable in that use case, but that's soon. 🤞

Cleaning your machine can be painful too if you don't know the basics, that's where the tools become useful. Don't rely too much on tools; still, you have to learn the basics. 👊

The tool I made uses the native cleaning process for Windows. I just automated these steps and applied my years of experience in maintaining and optimizing Windows machines as I worked before as technical support. ⚡

So yeah, I hope you learned a lot, and this blog helps!

Docs: docs.warengonzaga.com/wrn-cleaner

Repo: github.com/warengonzaga/wrn-cleaner

📢 Nominate me (@warengonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open-source projects like this.

Cheers! 🚀👌 See you on my next blog...

7 awesome is my original blog series for everything awesome I found online. In this blog series, I'm gonna share with you the best places on the internet where you can learn about the future and next generation of the internet — Web 3.0! ✨

I'm not gonna talk more about Web3 here in detail maybe on a separate blog so better to follow and subscribe to my newsletter so you won't miss out on any Web3 related content soon! 😎

(Get the PDF version here to support my publication) 👈

Let's start! 🤘

✨ The 7 Awesome

GM, here are the top 7 awesome free websites, communities, and resources for you to learn everything about Web3. I'm sharing with you my personal Web3 favorites in top list style which I found when I was searching for Web3 knowledge. I ranked them based on my experience as a web3 student, advocate, and enthusiast. 🔥

Let's have some basic understanding of what Web3 is before we dive into the awesome list. Based on Eshita's article she describes it like this in a simple way.

• Web1 (read) 😬

• Web2 (read and write) 😨

• Web3 (read, write, and own) 😱

Amazing right? We are currently in the middle of this transition from Web2 to Web3. For me, Web3 is not just hype and a bubble. Web3 is here a long time ago waiting for us to adapt, transition, and accept the future of the internet. You should start learning Web3 right now while it is early we have nothing to lose if you know both Web2 and Web3 which is better than nothing! 🤝🔥 WAGMI!!!

Psst, new resources added! Check out 🔥 Awesome Update!!!

and... here's the list! enjoy! 🥰

📚 BuildSpace

Let's start this awesome list with BuildSpace! This is indeed a top place to learn and build real-world Web3 projects by doing. Why on top? BuildSpace offers different projects for you to start hacking. 🐱‍👤

Here's the motivation, you'll earn free exclusive and unique NFT when you're able to complete a project tutorial. On top of that, you'll get a special Discord role in their official Discord community to represent what you've learned and where you enroll. 🔥

For every project you completed you'll earn enough experience that leads you to get full-time work remotely on popular Web3 companies with the help of BuildSpace. 🦄

I can say BuildSpace nailed it, learn Web3, build Web3, and get a Web3 job. 💡

I have a great experience inside the community that leads me to meet different popular people in the Web3 space. Thank you @Farza for building this wonderful community!

📚 Odyssey DAO

Another personal favorite! 🔥 Not gonna lie, this is a good alternative to BuildSpace the only difference is that this is a learning DAO community. DAO means a decentralized autonomous organization, Odyssey has a pretty good definition of this.

A DAO is a community that’s owned and managed by its members.

Here's a good thing about Odyssey, they made it possible to provide 100% free Web3 education with the help of the community around it by offering NFTs and tokens. For me, this is a great use of NFTs and tokens because you're getting NFTs and tokens for a cause, not just you want to have an NFT and tokens. 🔥

As much as I love to support their work, their NFTs and tokens are all sold out. 😥 That's not gonna stop me from contributing, so I decided to volunteer by translating their tutorials to my first language — Filipino (Tagalog). 💡💖🚀

Odyssey has an active Discord community so better to join and start learning! 💖

Good job @petergyang for making this possible! 🚀

UPDATE: Sadly, the community is no longer active.

📚 CryptoZombies

Honestly, unlike BuildSpace and Odyssey, this one is a pretty good place to learn Web3 in a fun and interactive way for free. I can describe CryptoZombies as a Web3 version of Code School (Pluralsight), freeCodeCamp, or Sololearn. Plus, it is opensource! ✨

For me, It is recommended and helpful to have at least a technical background in programming, but that's not necessary or required for you to start learning blockchain development. Just go with the flow and take their courses and learn as much as possible. Huge respect to the creators (Loom Network) of CryptoZombies for their efforts in creating an interactive code school just for Web3 and Blockchain developers. 💖🤝🎉

Currently, they offer 4 paths — Solidity, Advance Solidity, Chainlink, and Beyond Ethereum. Which is enough for you to be considered as a blockchain developer. With the help of these paths, you will be able to develop your smart contracts, launch NFTs, and build NFT games. Sounds cool? 😎🤘

Fun fact, the creator of CryptoZombies is also the creator of popular EthFiddle it is like a JSFiddle but for super cool Solidity. 🤯

📚 Hashnode's Web3

Surprise! 😅🎉 Yes, I added to the list the very own Web3 blogs of Hashnode. Not gonna lie, the Web3 blogs are high quality and you can learn from them. Do you know what I love about Hashnode? The ability to listen to this blog! 😱 Yes, that makes it fun and convenient to learn from a Web3 audio blog like Hashnode.

This blog can be part of the Web3 blog topics under Hashnode but this is an independent blog. 😅 I want to... but you know, I need to publish something like this to be qualified. 😅

Speaking of that, Hashnode is currently looking for Web3 bloggers! (tell them that I refer you 🤫)

In addition, Hashnode is currently hosting a Web3 hackathon event together with thirdweb at the time of this writing. So it is better to check that out and win some cool prizes. Thank me later! 🤝😀

📚 UseWeb3

A great opensource community-contributed resource for Web3 enthusiasts like you. Better to check this out and bookmark it to your favorite browser because you're gonna use it on your entire Web3 journey. 🔥

It is like a simple website that has a list of very useful information related to Web3 space. Even CryptoZombies is included in their resource list! 😅 I hope I can include this blog too? 😂

No more to say, very useful Web3 resource!

📚 CryptoDevHub

If you like the wiki-style of learning about Web3 then this is the right place for you. CryptoDevHub is a wiki-type website where you can find tons of information about Web3. It also offers some guides for you to get started with Web3 development. Plus there is a community around it where Web3 peeps hang out by helping each other to build Web3 apps. Which is cool! 🤩

I would like to thank the webmaster @pmmuens for adding a dark mode to the website. 😂 It helps! (seriously).

📚 NFT School

Here we are to the last item on our list! Please welcome, the NFT School! NFT is one of the features of Web3 so why not add it to the list. I can define NFT School as the Web3 version of W3 School but for NFTs. 🙈

Wait, what is NFT? Well, NFT stands for Non-Fungible Tokens. I'm not gonna discuss this here, this deserves a separate blog. To keep it simple, NFTs are just like a ticket to a concert where you can buy it and keep it forever and you might sell it to collectors in the future since it has value, the same idea with paintings and artworks. Buy the digital copy of it and keep it for yourself or sell it to collectors. 😎

Bookmark this website as a resource if you're into the NFT journey! 😉

🐱‍👤 Last Words

That's pretty much everything about free Web3 resources. I compiled the best free resources possible so you can start learning right away. 😎🤝 I would suggest, start your journey with the hashtag #100DayOfWeb3 on Twitter, joining Web3 communities, or get a job at a Web3 company. 🦄

The time of this writing is the exact day 30 of my #100DaysOfWeb3 journey (yey 🎉). It is surprising that I learned so fast for the past 30 days. How do I do that? Well, I'm gonna write a separate blog for that! 😅

If you have any Web3 resources that we should know, kindly comment below! 🤝

Before you leave, why not check the bonus content below? 😅

🚀 Bonus Content

What if I tell you, that you can build Web3 applications without coding? (I know you're laughing right now, that's fine, no worries 😅)

That's actually possible with the help of the thirdweb! 🤫✨

I'm a general community manager at thirdweb and I would like to include this in this blog as it helps a traditional Web2 developer like me to transition to Web3 space. It is actually awesome because it enables no-code developers to participate in Web3 space without knowing Solidity or Rust to interact with smart contracts. Aside from being a no-code platform, you can actually use the programming language you already know such as JavaScript, Python, and much more... just to build some Web3 cool stuff! 🔥

Check out this awesome guide to get started! Don't forget to bookmark our developers portal for you to learn and start creating Web3 apps without writing any solidity or rust. 🤝

At this moment, we're currently giving away free NFT (Silver Early Access Cards) to the first 100,000 users to mint it. Hurry!!! Don't forget to join our community too! 🤯✨

🔥 Awesome Update

Hey, it turns out, there are new free Web3 learning websites, communities, and resources out there! 😱 I'm gonna quick list them here and I might create volume 2 of this blog for new resources. It's gonna be another 7 awesome new resources for learning Web3. Check out my additional links below! 😉

• Pointer - Learn web3 dev skills with fun interactive tutorials. Earn crypto rewards along the way!

• Web3 University - The open university covering the fundamentals of web3 development: from writing Solidity to minting NFTs, to building full-stack dApps. Bringing you resources from the best in the blockchain.

Shout out to Kenneth Cassel for building Pointer and Vitto Rivabella for building Web3 University. I'm proud, I'm part of their community too. 🔥

Thanks for reading, good luck with your Web3 journey! 💖 GM, WAGMI!

💖 Support Me

📢 Nominate me (@warengonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open-source projects.

Cheers, see you on my next 7 awesome blogs... 💻💖☕

🤝 Introduction

7 awesome is my latest tech blog series where I'm gonna share the top list of anything related to software engineering. Have a list in mind let me know in the comments below! 😉 Let's start!

Today I'm gonna share with you the top 7 awesome web animation libraries and frameworks you should know as a software developer. 🤯 These are the web animation that might help you in your current and future projects. Let's go straight to the content right away! 😅

✨ The 7 Awesome

Here are the top 7 awesome web animation libraries and frameworks. I ranked them based on my usage experience and how popular the project is. The decision I made is based on this tool to compare them easily.

📦 ThreeJS

Obviously the top on the list! Can't deny it... 😅

This is one of the best web animation libraries out there and you can create crazy amazing web animation with it. I have one example below of what it can do... 🤯

GitHub's landing page, the interactive and animated globe...

📦 AnimateCSS

Let's admit it, this is one of the most useful CSS animation libraries out there. 😅

I'm part of the core team and made some significant improvements to the web animation library. You are not a developer if you don't ever use animate.css before. 😂 Don't take it seriously, what I'm trying to say is that every developer knows about it. 😎

AnimateCSS has an active community and I'm still working on upcoming updates. It has clear and reliable documentation for you to start using on your web projects. 😎

📦 AnimeJS

If you want to make your web animation to the next level then AnimeJS is for you! 🤘 I can say that this is an all-in-one solution for web animation as it says "It works with CSS properties, SVG, DOM attributes and JavaScript Objects." Have a try! 👌

📦 Velocity

A fast and reliable web animation replacement for jQuery's animate. I can say it is easy to use since it has the same usage as jQuery's animate. 😉 Velocity has great documentation and has an active community and is being used by big companies. Check it out!

📦 MoJS

MoJS stands for Motion Graphics for the Web powered by JavaScript. It has a complete list of advanced tools to create advanced web animation for your projects. It has an active community and has comprehensive documentation for you to start using MoJS. 😎

📦 Vivus

Do want to animate web things like crazy? Then start using Vivus lol. 😅

This is so powerful when you want to play with SVG elements on your web projects. It blows my mind when I first discovered this simple and lightweight (with no dependencies) animation library. Check out the official homepage for you to see it in action.

📦 GreensockJS or GSAP

The final in the list, the amazing GSAP! 👌😉

GSAP by GreenSock is the most amazing and reliable animation library and framework. They are the standard for modern web animation. I agree with that... 😁 When I start working on web animation this is the first library and framework I use to create advanced web animation for making HTML5 banner ads when I was a junior front-end developer. This is the advanced web animation tool in my time. 😃

I'm one of the active community members back then and I help others how to use the library and framework. Until today I know how to use GSAP for rapid web animation. 😉

I recommend checking out the website for more information.

🐱‍👤 Last Words

I want to point out that it is not required to use libraries and frameworks when it comes to web animations. I learned the hard way back then when I start working as a junior developer. I animated the web without using any libraries and frameworks and it was like hell. 😅

To lessen the tasks, I started using these libraries and frameworks to get the job done as fast as I can. In the corporate world, they don't care what you know and what you use as long as you complete your job in the right way. 😁 I know you know what I mean... 😅

My recommendation, learn the fundamentals and start learning them with libraries or frameworks because along the way you'll pick up it. Just explore! Learn by doing... 🥰

🚀 Bonus Content

As a bonus, check out my GitHub list for this series and also you might want to grab the PDF version to support my publication. 😉

💖 Support Me

📢 Nominate me (@WarenGonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open source projects.

Cheers, see you on my next 7 awesome blogs... 💻💖☕

🤝 Introduction

GitHub list is a feature for grouping your starred repositories into a list. 🤯 With the help of GitHub List we can organize your favorite repositories and share them with your followers or friends. Sounds useful? 😉 This feature is currently in public beta at the time of writing so you might want to share your feedback and suggestion to help improve it. 😃

🕹 Usage

I'm not going to teach you how to use the GitHub list since it is very easy to understand. Just navigate to your GitHub profile and click stars and you should see like this...

If not, then you might not have yet access to the public beta. 🤔 Let me know if you don't have access I might help you. 😅

Anyway, to create a new list all you have to do is to click the green button that says "create list" and click that. A pop-up will show for you to input the necessary details for your list. When you are done providing list details then save it.

Now you have created your own list then obviously it is empty. 😁

To add a starred repository to your list you only need to click the drop-down button besides stars in a repository, something like this...

I told you it is easy... 😂

✨ Organize Like a Pro

Here's the fun part! Did you see how I manage my lists? 😅 I'm gonna share with you how I manage my starred repositories so you can create your own maybe get an idea from my setup. 😉

As you notice my style has some emojis. 😂 It's up to you what style you prefer but here are the ideas and setup that can help you to organize your starred repositories.

💡 My List Idea and Setup

📌Interested - You Have My Attention 😎🤝

This is my list of public repositories I really like and am interested in. These are the repositories that might be extremely useful to you or anything that got your attention. 😁 Special shout out to my mentor Eddie Jaoude for sharing the update and getting this idea from him, I'll share the video created by him at the end of this tech blog. ✌

💾Saved - My Saved Repositories 😎👌

This is the list for my saved repositories meaning repositories I found while searching or surfing the internet and need to check later. 😉

🛠Tools - Productivity Tools 😎👊

This is the list of tools I use for productivity. You might add your favorite open source tools too. The only limit is your imagination. 😎

The rest of the list setup might include your personal repositories and group them accordingly. For example, I published 6 NodeJS API clients and I grouped them into one list. Another example is a list of WordPress plugins I made and finally a list of OSS tools I made. It is extremely useful when you are working on multiple open source projects.

My current list setup 😉 Like it? let me know in the comments!

💖 Bonus

As mentioned above, here's the video created by my mentor Eddie Jaoude about GitHub's list. Don't forget to subscribe and support his channel! 😎

🐱‍👤 Share Yours!

Now it is time to share yours! If you have access to the beta then let me know what setup you prefer and why you like it? I'm waiting on the comments below. A screenshot of your list would be a good showcase. 😉

📢 Nominate me (@WarenGonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open source projects.

Cheers! 🚀👌 See you on my next blog...

Now, your open-source project should have at least a basic homepage then improve it from time to time as you have free time to work on it. Here's the question, what is the best domain name for a JavaScript library or framework? 🤔

js.org Subdomain Name

Here's the answer to the question above, js.org for me is the best and perfect domain name for every open-source JavaScript library or framework. I made several open-source projects under this domain and it looks professional and making your project stand out among the rest.

My projects are under the js.org domain name.

• buymeacoffee.js.org - A simple and lightweight but powerful Node.js client for Buy Me a Coffee API.
• gathertown.js.org - A simple and lightweight but powerful Node.js client for Gather Town API.

More projects coming soon...

As you can see, you'll probably think that these are the official libraries for the services right? Well, the buymeacoffee.js.org is considered official recently and the gathertown.js.org is currently under consideration. Your project will stand out if you put effort into it. ✨

Popular projects under js.org domain name.

• webpack.js.org - A static module bundler for modern JavaScript applications.
• discord.js.org - A powerful Node.js module that allows you to interact with the Discord API very easily.

js.org is FREE

You'll probably think that having a js.org domain name requires any payment? 😅

The answer is NO! You can enjoy your domain name for FREE forever. 🚀🥰💖 But, you might want to consider donating to the organization? 🤔🙏

I'm not affiliated with js.org I just love what they are doing to help others. Why not write a simple blog for them? 😁

Get Your js.org Domain Name

I'm not going to teach you the step-by-step process because it is already indicated here. What I'm gonna do is to share my experience of how I got my first js.org domain name (buymeacoffee.js.org) instead. 👌

The first thing you need to do is to think about what name you are going to use under js.org? Figure out this one first before applying to avoid duplicates. Try to visit the site if it is existing or not. If not, then you are good to go! 😎

Don't forget to read their terms of service before applying for a subdomain name under js.org.

If you agree with the terms then read the official documentation.

Now, once you have the basic information about js.org then I'm gonna share with you how I got my js.org subdomain name.

Name Your js.org

Think the best possible subdomain under js.org, that time I was thinking of buymeacoffee.js.org which is for me a professional domain name for an open-source project. It makes me happy when reading it or says it word by word. 🥰

To clarify things, before I apply for the subdomain the project is already existed for about 1 year. I'm not saying that don't apply if your project is too young or new. What I'm saying is to apply for a subdomain if your project is for long-term purposes and you want to make it public.

Fork js.org Repository

Make sure you have a GitHub account to get started. Let's assume you have an account and you know how to fork repository, now let's fork the official repository to your account. 🚀

In my case, I forked it into my account. ✌

Add Your js.org to the List

Now let's add your preferred js.org subdomain or my buymeacoffee.js.org subdomain to the official list. Open the file cnames_active.js and add yours!

I add buymeacoffee.js.org based on alphabetical order for example below.

var cnames_active = {
  // more subdomains above...
  "butterfly": "cname.vercel-dns.com", // noCF
  "buttermilk": "buttermilk.netlify.com",
  "buymeacoffee": "warengonzaga.github.io/buymeacoffee.js", // here!
  "bwb": "shbwb.github.io/bwb",
  "bwb-docs": "shbwb.github.io/bwb-docs",
  // more subdomains below...
}

After the changes, prepare the PR! Don't PR immediately! Just ready for the PR! 👌

Your Reason for js.org

The js.org is free for everyone, but consider applying if you have a valid reason. Honestly, before applying I published a discussion about the plan of applying to js.org for the project BuyMeaCoffeeJS. I guess following what I do is the best way to get your js.org subdomain. 👌😎

Let's ask for Pull Request

Here's my pull request for the buymeacoffee.js.org you can follow the format I did and see the conversation with the maintainer. That time, I was using Vercel for the deployments but we are having some weird issues so I switched to GitHub pages instead. I didn't remove the Vercel since I am using a separate domain for a reason. I love to keep this domain name buymeacoffeejs.warengonzaga.com since this is the default and first homepage URL of the project. 😅

Enjoy Your js.org

As you review my recent pull request it is successful with mild issues due to weird issues in Vercel. That's why this is my perfect example to share with you how I got my first js.org subdomain. 🎉

Your js.org subdomain should be available in no time. Please consider donating to the organization as they are helping thousands of open-source projects. 💖

Congrats on your first js.org subdomain! 🎉 Don't forget to share it with me in the comments below.

Pros and Cons of js.org

Almost everything has its pros and cons. Let's get straight to the pros and cons right away!

js.org Pros

• It's FREE! Forever.

  Yes, free forever! You don't need to pay yearly for your domain name.

• Easy to Apply.

  As you can see, it is easy to apply if you have a valid reason!

• Active Community.

  So active that you can get a response within 24 hours.

• Helpful Maintainers.

  The maintainers are so helpful and understanding, very responsive!

js.org Cons

• No control to DNS settings.

Honestly, you can't manage the js.org domain. They are providing subdomain access only. Every time you have changes to your subdomain you need to contact them.

• Public use only.

If you are planning to use your project for commercial use then I would suggest buying a dedicated domain instead of using js.org subdomains.

• Vendor-specific hosting.

In my case, I have an issue with Vercel while adding the subdomain. Don't worry you can still add Vercel hosted page, I'm just not lucky I guess lol. To make it work you need to host your page under GitHub or GitLab pages.

For me, that's all the pros and cons of using the js.org domain. Overall, I love what they do! 🥰

js.org/js.com Domain Name

Wait, what? 🤔

Pay attention! We are talking recently is your.js.org which is a subdomain! This time, we are talking about a root domain name or yourjs.org / yourjs.com.

Let's get to the point, this is a perfect domain name for your JavaScript library or framework if you want to have complete control of your domain name if you are planning to make it commercial sooner or have personal reasons. I don't have any yourjs.org/yourjs.com domain names. 😁

Here are some of the popular JavaScript projects with their own js.org/js.com domain names.

• nodejs.org - Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
• parceljs.org - Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to a massive production application.
• gulpjs.com - A toolkit to automate & enhance your workflow.

Register Your js.org/js.com

Register your js.org or js.com domain name to a domain name registrar. I recommended registering your domain to Namecheap or Cloudflare.

Please keep in mind that this is not free. You'll have to pay yearly for registering your domain. If you don't have funds or working on free software then I would recommend you to stick to the js.org subdomain name instead.

Next move? Point your domain name to your hosting. 😅😂

Conclusion

As you notice, the same pattern right? 😅

Most of the JS libraries and frameworks should have a JS suffix to their name to indicate that they are libraries or frameworks. In my opinion, this is part of the tradition or culture. When we are working with JavaScript we intend to name it script.js and for making it short we call it scriptjs and eventually when we add styling to it we can say ScriptJS then if we want to register a dedicated domain name based on that name, we'll end up using scriptjs.org or scriptjs.com or script.js.org are you with me? 😎

For me, that's the reason why I call perfect domain name for your JavaScript library or framework.

📢 Nominate me (@WarenGonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open source projects.

☕ Please consider sending me some coffees if you love my tech blogs like this.

Cheers! 🚀👌 See you on my next blog...

This is my girlfriend Emily, and I use lyrics from Beautiful in White by Shane Filan.

It is easy to create your own CSS text portrait from scratch, but how about others willing to create their own but have no knowledge in coding? That's where my builder comes for! 👊

Let's create your own CSS text portrait in less than 3 minutes using my builder!

🛠 The Builder

The CSS text portrait builder is a popular pure CSS text portrait builder for your loved ones. You don't need to waste your time just to create it from scratch and spend time working on its CSS sorcery.

I created this builder for the reason of adding space for freedom. That's why I created a builder instead of a plain web application or a drag and drop generator. I know it is more convenient but it is more fun if you allow yourself to get your hands dirty while building a text portrait specifically for your loved ones.

GitHub: github.com/warengonzaga/css-text-portrait-builder

⚡ Instant Setup

To get started, all you have to do is to go to the official GitHub repository.

Make sure you meet the following requirements. 👌

• GitHub Account
• Gitpod Account
• High-resolution image in JPG/JPEG format.

Now, here's the fun part. We are going to use Gitpod as our cloud-based development environment so that it can eliminate inconsistency in our building process due to differences in the operating system we are using. Why not use the same system under Gitpod? 😁

Open the builder using the link below.

gitpod.io/#github.com/warengonzaga/css-text-portrait-builder

A new Gitpod workspace will be created. Now proceed to the build steps below.

📋 Building Steps

1. Rename your image into bg.jpg and make sure it is in JPG/JPEG format.
2. Navigate to src/img and upload your image, just replace the existing image.
3. Next, open the config.json file by just clicking it, an editor will open.
4. Edit the contents of the config.json file to match your needs.
   • For the object name, this is the name of your portrait, it can be the name of your subject.
   • For the object text, this is the text you want to see in the portrait. It can be lyrics, a passage from a book, or a sweet message to your subject or loved one.
5. Navigate to src/scss and open the file _vars.scss to edit the settings.
6. Lastly, look in the command-line interface and hover your mouse to the https://localhost:1234 and press ctrl + left click to open it to a new tab. You'll see your builds in real-time.

✨ Customization

You can customize the output of the build by editing the src/scss/_vars.scss file.

This is the default configuration for the colored version.

$brigthness: 1;
$grayscale: 0;
$invert: 0;

If you want to use the classic version of text portrait then use the following configuration.

$brigthness: 0.8;
$grayscale: 1;
$invert: 0;

Then these are the variables inside the _vars.scss file.

/**
 * builder settings
 */
$subject-image: url('../img/bg.jpg'); // image to potrait
$black: #222; // background color
$regular: 12px; // font size

/**
 * image filter settings
 * defaults: brightness = 1, grayscale = 0, invert = 0 (colored result)
 * classic: brightness = 0.8, grayscale = 1, invert = 0 (black and white result)
 */
$brigthness: 1;
$grayscale: 0;
$invert: 0; // it will convert the color of the image

It is always up to you what you want with your builds. Every time you made changes to the code it will automatically update and save your changes.

💬 Discussions

To learn more about the builder or you just want to showcase your builds then you are welcome to hop in on our official GitHub discussions.

I want to share this build with one of the builders in the community! 🥰

I featured this build since it is very unique, the author of this portrait uses a special character to achieve this meme look.

🐱‍👤 Last Words

Alright, looks like that's fast enough to create your own CSS text portrait using my builder. The builder is currently under development and I will add more features sooner! I created this project in just 4 hours including the publishing of the project. I will leave some useful links below for you to take a look at and learn more about the project.

Official Documentation: docs.warengonzaga.com/css-text-portrait-builder

GitHub Repository: github.com/warengonzaga/css-text-portrait-builder

📢 Nominate me (@warengonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open source projects like this.

Cheers! 🚀👌 See you on my next blog...