DEV Community: programORdie

GitHub Contribution Agent | Agent.ai challenge

programORdie — Thu, 23 Jan 2025 21:24:09 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent (See Details)

What I Built

I built a GitHub Contributions Finder using agent.ai. This Agent helps developers quickly analyze GitHub profiles to identify their most notable contributions, projects, and areas of expertise.

I built this Agent to save time when reviewing profiles for collaboration, hiring, or personal inspiration. It's designed for developers, recruiters, and open-source enthusiasts who want to explore GitHub activity without manually digging through repositories.

Demo

GitHub Contributions Finder Agent

Here’s a quick video showing the Agent in action:

How it Works

User Input: The user specifies preferences like programming language, skill level, and time availability.
GitHub API Integration: The Agent fetches relevant GitHub issues based on the selected language.
Issue Filtering: Using Python, issues are filtered based on the user’s skill level and available time.
LLM Ranking: A language model ranks the filtered issues based on relevance and importance.
Results Presentation: The Agent presents a ranked list of issues with details, including:
- Issue specifics.
- Repository information.
- Why the issue is a good match for the user.

Agent.ai Experience

Building with agent.ai was both exciting and educational. The platform made it easy to handle complex tasks like querying the GitHub API and processing the data.

Initially, I faced some challenges with radio inputs not saving correctly. Thankfully, the agent.ai team resolved the issue quickly after I reached out. Another hurdle was figuring out how to run Python code within the Agent. It turns out you just need to deploy an AWS Lambda function—which the platform handles for you completely free!

The most delightful moment was watching the Agent deliver results in seconds, but the learning curve of fine-tuning prompts and understanding workflows made the process even more rewarding. Overall, it was a smooth and enjoyable experience.

🚀 Time Traveler: A Pinata-Integrated Time Capsule for Future Explorers

programORdie — Sun, 06 Oct 2024 09:24:44 +0000

This is a submission for the The Pinata Challenge

What I Built

I created Time Traveler, a web application that allows users to create digital time capsules.

Users can upload various types of files—images, audio, videos—into these capsules, which will remain locked until a specified future date.

This project integrates Pinata’s Files API to facilitate file uploads and storage on the IPFS network.

Key Features

Multi-file Upload 📁: Users can upload multiple file types into a single time capsule.
Custom Unlock Dates ⏳: Each capsule has a designated unlock date for future access.
Intuitive Dashboard 🖥️: A user-friendly interface to view, manage, and create time capsules.
Responsive Design: Works seamlessly on both mobile and desktop devices.
User Authentication: Secure login system to ensure privacy and control over user capsules.

Technology Used

Next.js ⚛️:: The entire application is built with Next.js, providing a full-stack solution for server-side rendering and API routes.
Pinata: Utilized Pinata’s Files API for decentralized file storage on IPFS.
MongoDB: Used for storing user data and metadata related to time capsules.
Tailwind CSS: For styling the application, ensuring a modern and responsive design.
shadcn: Leveraged for UI components, enhancing the overall user experience.

Demo

View the live demo here.

Landing page:

New capsule creation form:

Capsules list:

Capsule:

File preview:

My Code 💻

Check out the source code for the project on GitHub:

programORdie2 / time-traveler

Time Traveler is a web application that allows users to create digital time capsules, enabling them to upload various types of files—images, audio, videos—and unlock them at a specified future date.

Time Traveler

Time Traveler is a web application that allows users to create digital time capsules, enabling them to upload various types of files—images, documents, videos—and unlock them at a specified future date. This project integrates Pinata’s Files API to facilitate secure file uploads and storage on the IPFS network.

Time Traveler

Key Features

Multi-file Upload: Upload multiple file types into a single time capsule.
Custom Unlock Dates: Set a designated unlock date for future access.
Intuitive Dashboard: A user-friendly interface to manage and create time capsules.
Responsive Design: Fully functional on both mobile and desktop devices.
User Authentication: Secure login system ensuring privacy and control over user capsules.

Technology Used

Next.js: Full-stack framework for server-side rendering and API routes.
Pinata: Decentralized file storage using the Pinata Files API and…

View on GitHub

Installation

To run this project locally, follow these steps:

Clone the repository:

   git clone https://github.com/programORdie2/time-traveler.git

Navigate to the project directory:

   cd time-traveler

Install the dependencies:

   npm install

Set up environment variables:
- Rename the .env.local.sample to .env.local and fill it out with your data. The required values are:

# The secret key for verifying the integrity of signed cookies.
# Run "npx auth secret" to generate it.
AUTH_SECRET="YOUR_AUTH_SECRET"

# You probably don't want to change this, except if you changed the port. If you deploy this to Vercel, you can remove this line.
NEXTAUTH_URL="http://localhost:3000"

# Replace with your MongoDB connection string
DATABASE_URL="mongodb://localhost:27017/timecapsule"

# Replace with your Pinata details.
# See https://docs.pinata.cloud/quickstart#1-get-api-key-and-gateway-url
PINATA_JWT="YOUR_PINATA_JWT"
NEXT_PUBLIC_GATEWAY_URL="YOUR_GATEWAY_URL.mypinata.cloud"

Start the development server:

   npm run dev

Open your browser and go to http://localhost:3000 to view the application.

More Details

Integration with Pinata 🔗:

File Uploads 📤: I utilized the Pinata API to allow users to upload files directly to IPFS.
Metadata Storage: The metadata for each time capsule is stored in a MongoDB database, with a reference to the files stored in Pinata.
Unlock Mechanism: The application checks the current date against the unlock date specified by the user, allowing access to files only when the time capsule is unlocked.

Thanks for reading! 🌟 Feel free to share your thoughts in the comments below!

Docker vs Virtual Machines: The Lightweight Contender vs. The Old Heavyweight

programORdie — Sat, 28 Sep 2024 09:05:28 +0000

This article is also available on Medium

So, you’ve built your app, and now you’re wondering how to package it up and run it in different environments without any headaches. You’ve probably heard about Docker and Virtual Machines (VMs), but which one should you choose? Both have their strengths, but they also come with their quirks. Let’s break it down, compare them, and see which one’s right for you.

Virtual Machines: The Veteran in the Ring 🥊

Virtual Machines are like the older, experienced heavyweight fighters in the deployment world. They’ve been around for years, and they’re reliable, but they also come with some baggage. A VM is essentially a full-blown machine that runs on a host machine (or hypervisor). It has its own operating system (OS), virtual hardware, and everything in between.

Performance:

VMs are like running an entire separate computer inside your computer. This means you get full isolation between environments, but it also means overhead. Each VM requires its own OS, which can consume a lot of system resources (CPU, memory, storage). So, while VMs are great for running multiple apps on different OSes, you’ll notice a performance hit, especially if you’re running a lot of them.

Ease of Use & Deployment:

Setting up a VM is like assembling a Lego set from scratch: it’s a process. You need to configure the OS, install the dependencies, and manage the virtual hardware. However, once everything’s up and running, you have complete control over your environment. Want to run Linux on your Windows machine? VMs got you covered.
But be warned—VMs can get complex quickly. The more VMs you have, the more resources they consume, and managing them can start to feel like juggling too many balls at once.

Use When:

You need strong isolation between environments.
You’re running apps that require different OSes.
You don’t mind the overhead or have plenty of system resources to spare.

Example: Companies like AWS offer virtual machines via their EC2 service, allowing developers to spin up different OS environments quickly for testing and deployment.

Docker: The Lightweight Challenger 🏋️‍♂️

Enter Docker—the new kid in town who’s lean, lightweight, and ready to take on the heavyweight champ. Docker doesn’t run a full OS like a VM does. Instead, it runs containers that share the host machine’s OS but keep the apps inside those containers isolated. Think of Docker as a boxing ring where each app has its own corner, but they all share the same arena.

Performance:

Docker containers are super fast and lightweight compared to VMs. Since they share the host’s OS, they don’t need to lug around their own, which means minimal overhead. Containers start up in seconds (or less!), making Docker ideal for apps that need to scale quickly or spin up on demand.
But with great speed comes a trade-off: Docker containers don’t have the same level of isolation as VMs. While containers are secure, they share the same kernel, which could be an issue if you need strict isolation between environments.

Ease of Use & Deployment:

Easy peasy. Docker simplifies the process of packaging and deploying apps. You just write a Dockerfile, define your app’s dependencies, and voilà—your app is packaged into a neat little container that runs anywhere Docker is supported. No more "it works on my machine" problems.
Docker is perfect for microservices architecture, where each service runs in its own container. It’s also great for quickly spinning up environments for testing and development.

Use When:

You need speed and scalability.
Your app runs on the same OS, but you want to isolate its environment.
You want to easily package and deploy apps across different environments without worrying about dependencies.

Example: Docker is widely used by companies like Spotify to deploy microservices, making it easier to manage complex distributed systems without the overhead of VMs.

Docker vs. Virtual Machines: A Quick Comparison

Feature	Virtual Machines	Docker (Containers)
Isolation	Full OS-level isolation	Process-level isolation
Performance	Higher overhead (runs full OS)	Lightweight, fast to start
Resource Usage	More resource-intensive	Less resource usage
Setup & Deployment	Complex setup (OS, dependencies)	Simple, Dockerfile defines everything
Use Case	Different OSes or heavy apps	Lightweight apps, microservices
Scalability	Slower to scale	Instantly scalable

Which One Should You Choose?

Go with Virtual Machines if you need strong isolation, especially between different operating systems. They’re ideal for scenarios where you’re dealing with complex environments, or if you need to run multiple OSes on the same machine.
Choose Docker if you need speed, portability, and scalability. Docker’s lightweight containers are perfect for modern, cloud-native apps where agility is key. Plus, Docker makes it easy to package your app and all its dependencies into a single, deployable unit.

Final Thoughts: The Winner Depends on Your Needs 🏆

In the battle of Docker vs. VMs, it’s less about who’s stronger and more about what you need. If you’re looking for agility and lightweight deployment, Docker is your champion. If you need heavy isolation and don’t mind the overhead, VMs still pack a punch.

At the end of the day, both tools are incredibly useful, and many organizations use both depending on the situation. The key is to understand your app’s requirements and pick the tool that best fits your needs.

About Me

Hi, I’m programORdie. I’m passionate about writing (this is actually my fourth article!) and all tech things. Feel free to check out my projects on GitHub: programORdie2.

Thanks for reading—hope you have a great day! 👋

GraphQL vs REST: API Showdown 🤜🤛

programORdie — Fri, 27 Sep 2024 19:11:24 +0000

This article is also available on Medium

When it comes to APIs, there’s a big debate between two major players: GraphQL and REST. Both are used to manage how your frontend talks to your backend, but each one has its own way of doing things. So, which one should you choose? Let’s break it down, sprinkle in some analogies, and figure out whether GraphQL or REST fits your project better!

REST: The Veteran

REST (Representational State Transfer) has been around for quite a while. It’s the tried-and-true approach that most web developers have used at some point. Think of REST as the classic restaurant experience—you look at the menu (your API endpoint), place an order, and the kitchen (the server) brings back exactly what’s on the menu. Nothing more, nothing less.

How REST Works:

REST APIs operate through standard HTTP methods like GET, POST, PUT, DELETE, and PATCH. You have multiple endpoints, each corresponding to a different resource (think /users, /posts, /comments). When you make a request to one of these endpoints, you get a response that typically includes all the data for that resource.

Pros:

Simplicity: REST is easy to understand and implement. If you’ve ever used a URL, you’ve basically interacted with a REST-like structure.
Statelessness: Each request stands on its own. The server doesn’t store any information about the client’s previous requests, which keeps things simple.
Cacheable: REST APIs can leverage HTTP’s caching mechanism, which can significantly boost performance.

Cons:

Over-fetching: REST sends all the data for a resource, even if you only need a small piece of it. For example, if you ask for a user’s name, you might also get their email, age, address, and favorite pizza toppings.
Under-fetching: On the flip side, if you need data from multiple resources, you might have to make multiple requests to different endpoints. For example, to get a user and their posts, you’ll need to hit /users and /posts.
Rigid Structure: REST has a fixed structure. If you need a slightly different set of data, you might end up creating new endpoints, which can get messy.

Example:
Let’s say you want to get information about a user and their recent posts. Using REST, you’d likely need two requests:

/users/123: Returns user info.
/users/123/posts: Returns the posts made by that user.

This works, but it’s not the most efficient.

GraphQL: The New Kid on the Block

GraphQL, developed by Facebook, is like a buffet. You walk up with a plate (your query), take only what you want, and leave behind the stuff you don’t need. No more overloading your plate with unnecessary data or running back for more!

How GraphQL Works:

With GraphQL, you define a schema for your API, and clients can request exactly the data they need using a single endpoint (usually /graphql). You send a query describing what you want, and the server responds with the requested data, and only that data—nothing more, nothing less.

Pros:

Precise Data Fetching: No more over-fetching or under-fetching. You ask for exactly what you need, and you get it. No more, no less.
Single Request: Need a user and their posts? You can do it all in one query! GraphQL gives you nested data in a single request, so no more juggling multiple endpoints.
Strongly Typed Schema: GraphQL has a well-defined schema that specifies the types of data you can request. This makes it easier to understand what’s available and ensures that clients only ask for valid data.

Cons:

Complexity: While GraphQL is powerful, it’s also more complex to set up. You’ll need to define a detailed schema and resolvers to handle how the data is fetched.
No Built-in Caching: Unlike REST, GraphQL doesn’t come with built-in HTTP caching. You’ll need to implement your own caching solution if that’s important for your use case.
Overhead for Small Apps: If your app is simple, using GraphQL might be overkill. Setting up a GraphQL API can feel like bringing a bazooka to a water balloon fight.

Example:
In GraphQL, getting a user and their posts is done in a single query:

{
  user(id: "123") {
    name
    email
    posts {
      title
      content
    }
  }
}

The server responds with exactly what you asked for. One query, one response, no extra data.

REST vs GraphQL: Head-to-Head 🥊

Let’s put these two to the test in a few key areas:

Category	REST	GraphQL
Data Fetching	Multiple endpoints, over/under-fetch	Single query, precise data fetching
Flexibility	Fixed, rigid endpoints	Highly flexible, query-based
Performance	Can require multiple requests	One request, but no caching by default
Ease of Use	Simple to set up and understand	More complex setup, but powerful
Caching	Built-in HTTP caching	No built-in caching
Scalability	Scales well with simpler apps	Better for complex, data-rich apps

Which One Should You Use?

Use REST when:

Your API is simple and doesn’t require complex data relationships.
You’re building a quick MVP or proof of concept.
You want to leverage HTTP caching for performance.

Use GraphQL when:

Your app needs to fetch data from multiple sources or has complex relationships between entities.
You want to reduce the number of requests and minimize data over-fetching.
You need a flexible, strongly-typed API that can evolve without breaking clients.

Real-World Examples 🌍

GitHub’s API: GitHub originally used REST for their API but switched to GraphQL to allow for more flexible data queries and to reduce the number of requests developers need to make.
Twitter: Twitter’s API still uses REST because it’s relatively simple, well-documented, and sufficient for the needs of most developers using their platform.

Final Thoughts: Choose Your Fighter 🥋

GraphQL and REST aren’t necessarily enemies; they’re just different tools for different jobs. REST is the battle-hardened warrior, reliable and easy to get started with. GraphQL is the agile newcomer, flexible and efficient but with a steeper learning curve.

If you’re working on a simple app with straightforward data needs, REST might be all you need. But if you’re building a data-heavy app with complex relationships, GraphQL’s flexibility could save you a lot of headaches (and extra requests).

Whatever you choose, remember: your API is only as good as the developer experience you create. Whether REST or GraphQL, make sure your users can easily interact with your data without needing a treasure map to figure it out! 🗺️

About Me

Hi, I’m programORdie. I love geeking out about APIs and simplifying complex tech topics for developers. Have a preference for REST or GraphQL? Let me know in the comments! Feel free to check out my projects on GitHub: programORdie2.

Thanks for reading—hope you have a great day! 👋

Serverless vs. Edge vs. Traditional Servers: Which One’s the Best Fit for You?

programORdie — Mon, 23 Sep 2024 18:21:29 +0000

You can always read this article on Medium

So, you’ve built your web app, it’s looking sleek, and now comes the big decision—where to deploy it? The options are plentiful, but today we’re focusing on three heavy hitters: traditional servers, serverless, and edge computing. Each one has its own strengths, weaknesses, and quirks. But which one suits your needs? Let’s break it down, sprinkle in some humor, and figure out what works for you.

Traditional Servers: The Old Reliable

Think of traditional servers like the grandparent of web hosting. It’s been around forever, and while it may not be the coolest kid on the block, it’s sturdy and dependable. You know exactly what you’re getting—a dedicated machine (or virtual machine) that does what you tell it to. You’re in full control of your environment, which is both a blessing and a curse.

Performance:

Traditional servers are like a trusty old sedan: solid performance, but not exactly zippy. You have complete control over the server’s hardware and software, so you can optimize it as much as you want. However, this also means that if something goes wrong, you’ll be the one under the hood with a wrench and a lot of Stack Overflow tabs open.
Latency can be an issue depending on where your server is located relative to your users. If your server is in New York and your users are in Tokyo, they’re going to feel the lag.

Ease of Use & Deployment:

Not exactly a breeze. You have to manage your infrastructure, set up the operating system, security patches, load balancing, and probably spend time figuring out why something worked in staging but exploded in production.
There’s a reason sysadmins drink a lot of coffee.

Use When:

You need full control over your server environment.
Your app has specific hardware or software requirements.
You’re fine managing everything yourself, and latency isn’t your top concern.

Example: Many legacy applications in industries like finance still run on traditional servers to ensure stability and compliance with strict regulations.

Serverless: The New Kid with No Servers (But Still Servers, Kind Of)

Serverless is like hiring a ride-share driver to do all the driving for you. You don’t care what kind of car it is or where it’s parked—just take me from A to B, please. Serverless computing allows you to focus purely on writing your code while the cloud provider (AWS, Azure, etc.) handles the infrastructure for you. Despite the name, there are still servers involved, but you don’t have to deal with them.

Performance:

Serverless environments scale instantly to meet demand. Whether you have one user or one million, serverless scales up and down on its own. No need to provision more servers or adjust load balancers.
The downside? Cold starts. When your serverless function hasn’t been invoked in a while, it takes a few milliseconds longer to “wake up” and start processing. That can be a bit of a bummer for latency-sensitive apps. However, there are ways to mitigate this issue, like using techniques to keep your functions "warm" or having shorter idle times.

Ease of Use & Deployment:

Super easy to deploy. You write your code, and the cloud provider handles the rest. You don’t have to worry about server configuration, security patches, or scaling. Plus, you only pay for what you use, so it’s cost-efficient for apps with unpredictable traffic.
You still need to think about how your app is structured, though—serverless functions work best for microservices or event-driven architectures.

Use When:

You don’t want to deal with server management (at all).
Your traffic fluctuates, and you want automatic scaling without having to manage it.
Your app is built as microservices, or you’re running functions triggered by events (like an HTTP request, a database change, etc.).

Example: A popular example is Netflix, which uses serverless architecture to handle its massive and fluctuating traffic, allowing it to efficiently process user requests during peak viewing times.

Edge Computing: The Speed Demon 🏎️

If traditional servers are the trusty old sedan, edge computing is the shiny new sports car. It takes the concept of serverless but pushes the computation even closer to the user—literally at the “edge” of the network. Think of it as having mini data centers scattered around the world. This minimizes the time it takes to respond to user requests, making your app super fast.

Performance:

Blazing fast. Edge computing reduces latency by processing requests at locations geographically closer to the user. Imagine a user in Tokyo accessing your app with computation done right in Tokyo, not halfway across the globe.
Like serverless, edge computing scales effortlessly, and it’s highly reliable because the load is distributed across many nodes. However, handling data consistency and persistence across edge nodes can be a bit tricky, especially if your app requires frequent updates to a centralized database. You may need to rethink how data is managed and synchronized globally to avoid inconsistencies.

Ease of Use & Deployment:

Fairly easy. Edge platforms like Cloudflare Workers, Vercel, or Netlify make deploying edge functions almost as simple as deploying serverless functions. But be prepared to tweak your architecture a bit. Edge computing works best for content delivery (like serving static sites or API responses) and applications where low latency is crucial.
You might have to rethink how state is handled, as working with databases can get tricky when you're running code in multiple locations around the world.

Use When:

You want ultra-low latency for users no matter where they are.
Your app involves a lot of real-time processing or is latency-sensitive (e.g., gaming, video streaming).
You’re fine with stateless or event-driven architectures.

Example: Companies like Akamai use edge computing to cache content closer to users, dramatically improving load times for websites and applications across the globe.

Which One Should You Choose?

Here’s a quick summary to help you decide:

Traditional Servers: Great if you want control, have specific hardware/software requirements, or don’t mind getting your hands dirty with infrastructure. Not ideal for super high-traffic, low-latency apps.
Serverless: Perfect if you don’t want to manage servers and need an app that can scale with unpredictable traffic. Deployment is easy, but beware of cold starts and architect your app properly.
Edge Computing: Best for speed demons who want ultra-low latency and global scalability. Perfect for high-performance apps, but make sure your app can handle the distributed nature of edge computing.

Final Thoughts: Pick Your Poison

There’s no one-size-fits-all solution. Each option has its pros and cons, and the best choice depends on your specific app and needs. If you want control, go with traditional servers. If you love simplicity and scalability, serverless is your buddy. If you’re aiming for lightning-fast performance with low latency, edge computing is your answer.

But no matter which option you choose, remember one thing: at the end of the day, everything still runs on servers. Just how much you want to think about those servers is up to you. 😊

Share Your Thoughts!

I’d love to hear what you think! Have you used traditional servers, serverless, or edge computing for your projects? What has been your experience? Feel free to share your insights, tips, or questions in the comments below! Let’s learn from each other!

About Me

Hi, I’m programORdie. I’m new to writing (this is actually only my second article), and I’d love to hear your feedback!
Feel free to check out my projects on GitHub: programORdie2.

Thanks for reading - hope you have a great day! 👋

WebAssembly: The Superpower You Didn’t Know You Needed

programORdie — Sun, 22 Sep 2024 20:32:57 +0000

Note: you can always read this article on Medium

If you’ve been lurking in dev circles long enough, you’ve probably heard the whispers about WebAssembly (or Wasm, because devs love acronyms as I like coffee).

It was once hailed as the “next big thing,” the shiny new tool that promised to transform your browser from a humble document viewer into a full-blown superhero. Well, WebAssembly has been around for a few years now, and guess what? It’s still here, delivering on that promise. JavaScript didn’t step aside, but Wasm’s been quietly doing some heavy lifting in the background, and it's become a solid partner in the web performance game.

So, What Exactly is WebAssembly?

Picture this: JavaScript and C++ go out for drinks, have a deep conversation about speed and efficiency, and boom - WebAssembly is born 🔥. Wasm is a low-level, assembly-like language that you can run in your browser, designed to make web applications faster, more efficient, and capable of running things you’d never think a browser could handle. Think of it as your browser having a six-pack under its hoodie—ready to lift way more than JavaScript can bench.

In plain English? WebAssembly is a compiled code format that can be executed nearly as fast as native machine code, and it’s designed to work alongside JavaScript, not replace it. So no, you don’t have to dump all your hard-earned JS skills into the trash bin just yet.

Why Should You Care? (Or: Why Are We Geeking Out About This?)

The web is great for showing cat memes and infinite scrolling on Twitter, but it’s historically been terrible at handling anything too intense - like 3D games, video editing, or real-time simulations. That’s where Wasm steps in, looking all buff and intimidating like a superhero ready to rescue your code from the clutches of inefficiency 💪.

Here’s what WebAssembly brings to the table:

Speed: Wasm runs really fast. Like, “shaves seconds off load times” fast. Like, “suddenly you feel bad for all the times you made JavaScript struggle” fast.
Language Flexibility: You don’t have to restrict yourself to JavaScript anymore. You can code in C, C++, Rust, and more. WebAssembly doesn’t care—it’ll turn all that into blazing-fast performance in the browser. It’s the Switzerland of programming languages: neutral, but secretly powerful.
Superpowers for Browsers: Want to run 3D games, CAD software, or machine learning models directly in your browser without your computer crying in the background? Wasm makes it possible. Your browser becomes less “word processor” and more “Iron Man suit.”

“But I’m a Web Dev, and JavaScript Is My Ride-or-Die!”

First of all, you don’t have to break up with JavaScript. Wasm plays nice with it 🤝. Think of Wasm as JavaScript’s muscle-bound buddy that helps out with the heavy lifting when JS gets winded after running a few loops.

In fact, WebAssembly can actually make your JS code better. If you’ve got some performance-heavy tasks (like complex calculations, file parsing, or video rendering), you can hand them off to Wasm, and let it handle the heavy-duty work while JS focuses on its usual DOM manipulation magic.

The relationship between JavaScript and WebAssembly is like that one superhero team-up where the brainy one (JS) and the brawny one (Wasm) work together to save the day. Neither is being replaced—they’re just better together. Like peanut butter and jelly. Or tabs and spaces (kidding, don’t start a flame war).

“Alright, Alright… But How Do I Start Using WebAssembly?”

Step 1: Breathe. Wasm might sound intimidating, but it’s not that hard to use - especially if you’ve ever written in a compiled language like C, C++, or Rust. If you haven’t? Well, congratulations! WebAssembly is a great excuse to finally learn that intimidating language you’ve been avoiding.

Step 2: Get a compiler that can generate Wasm. There are plenty of tools that’ll take your code (in C, C++, Rust, etc.) and compile it into Wasm. Emscripten is a popular choice for C/C++ projects, while wasm-pack is excellent for Rust projects.

Step 3: Throw it into your browser. Once you’ve compiled your code into WebAssembly, you can load it up in the browser and start leveraging those sweet, sweet performance boosts. Wasm doesn’t hog the spotlight, though - it’s meant to work in harmony with JavaScript. Your JavaScript code will call the WebAssembly functions like they’re just part of the gang. No drama.

Step 4: Profit. Or, at the very least, sit back and enjoy watching your web app zoom past performance bottlenecks like it’s got a nitrous button.

Will WebAssembly Take Over the World?

Look, we’re not saying that WebAssembly is going to make JavaScript obsolete or that your browser will start spontaneously combusting from the sheer power of running near-native code. But… maybe?

In reality, WebAssembly’s future is more about complementing the existing web ecosystem than replacing anything. It’s a tool. A powerful one, yes - but it’s just here to help, not to overthrow the JavaScript monarchy. And while we’re likely still a few years from Wasm becoming mainstream across the entire web, it’s already making waves in gaming, multimedia apps, and even blockchain. Yes, blockchain. Because apparently, there’s nowhere Wasm won’t go.

Final Thoughts: Wasm Is the Real Deal

If WebAssembly were a person, it’d be that friend who shows up unannounced, helps you move heavy furniture, and leaves without asking for pizza. It’s here to do the dirty work: heavy computations, performance optimizations, and transforming the browser into a powerhouse capable of so much more than we ever thought possible.

So, if you’re looking to push the limits of what your web app can do - or just want to make your browser feel like it’s gone through some superhero training - WebAssembly’s got your back 🚀. Just remember, with great power comes great compile times 😅.

About Me

Hi, I’m programORdie, and this is my first real article and I’d love your feedback, so feel free to leave a comment!!
You can also check out my projects or reach out on GitHub: programORdie2.

I hope you enjoyed the article, have a great day!👋

Service Workers - One Byte Explainer

programORdie — Thu, 19 Sep 2024 15:07:30 +0000

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

Service workers cache key data offline, like save points in a game 🎮. Even if your players rage-quit 😡 by closing the tab, they can pick up right where they left off. It's a safety net against crashes and connection issues!

🌊 Glam Up My Markup: Beach Edition 🌴

programORdie — Sat, 01 Jun 2024 12:41:40 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Beaches

What I Built

🌊 Welcome to my beach paradise site!🌴

I crafted a responsive and visually appealing beach website that brings the beauty of the coast to your screen. My goal was to create an immersive online experience that captures the essence of a perfect beach day, complete with vibrant colors, smooth animations, and user-friendly navigation.

Demo

You can see the demo in the Codepen below, or view it in full screen here.

Journey

Creating this site was an exciting adventure! I started by brainstorming the essential elements that make a beach experience enjoyable and decided to incorporate them into the design.

Key Highlights:

No HTML Edited: None of the HTML in the template is edited. The images are added with JavaScript (except the banner, which is CSS), and everything else is pure CSS.
Responsive Design: Ensured the site looks great on all devices, from desktops to smartphones.
Smooth Animations: Added subtle animations to bring the beach scene to life without overwhelming the user.
Interactive Elements: Implemented interactive features like an automatically moving carousel and clickable beach items.

Learning Points:

Advanced CSS Techniques: Improved my skills in using Flexbox for layouts.
JavaScript for Interactivity: Enhanced my understanding of JavaScript to create interactive elements.
Accessibility: Focused on making the site accessible to all users, ensuring a pleasant experience for everyone.

Future Enhancements:

Enhanced Animations: Plan to add more detailed animations to further enhance the user experience.
Additional Interactive Features: Intend to incorporate more interactive and educational elements, such as marine life information and beach safety tips.

Overall, I'm proud of how this project turned out and look forward to building upon it. I hope you enjoy exploring my beach paradise as much as I enjoyed creating it! 🏖️

Llama 3 Plugin

programORdie — Wed, 24 Apr 2024 22:38:18 +0000

This is a submission for the Coze AI Bot Challenge: Trailblazer.

What I Built

My Llama 3 Coze plugin enables you to integrate Llama 3, Meta's latest chatGPT-like LLM, into your bots effortlessly.

With seamless integration, you can leverage the power of Llama 3 to enhance the conversational capabilities of your applications.

Whether you're building a customer support chatbot, a virtual assistant, or any other conversational AI application, my plugin empowers you to tap into the advanced language understanding capabilities of Llama 3.

Demo

If you are interested in experiencing the capabilities of this super cool AI model firsthand, you can check it out in the plugin store.

Journey

When I started, I had no idea how to create a plugin, but thanks to the great docs, I found it very fast.
I already knew the Llama 3 8b model was on HuggingFace, so it didn't take me long to connect it to Coze.

If you have any feedback or suggestions, please don't hesitate to reach out, your input is greatly appreciated!

✨AI Travel planner ✈️

programORdie — Sat, 20 Apr 2024 09:29:16 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

What We Built

Introducing AI Wanderlust 🌍✈️, your ultimate travel planning companion powered by Coze.

AI Wanderlust is designed for globetrotters, adventure seekers, and anyone who loves exploring new destinations.

This innovative travel planner bot revolutionizes the way people plan their trips by offering personalized recommendations, itinerary creation, booking assistance, and real-time travel updates—all within a seamless chat interface. Whether you're dreaming of a relaxing beach getaway, an adrenaline-pumping adventure, or a cultural immersion, AI Wanderlust has you covered.

Demo

Intrested? Try it on the bot store!

Examples:

Visit AI Wanderlust 🌍✈️ on the Coze Bot Store to experience firsthand how this intelligent bot can transform your travel planning experience. Explore the intuitive chat interface, interact with the bot, and witness its capabilities in action through screenshots and recordings.

Our Configuration

Prompt:

Plugins:

Journey

We found immense joy in crafting WanderLust, a journey of creation enriched by the exquisite capabilities of Coze, a tool of remarkable quality. This collaborative endeavor not only ignited our creative flames but also honed our skills in the art of inspiration, promising invaluable dividends for our future endeavors.

Team Members:

Thank you for considering AI Wanderlust 🌍 ✈️ as a Bot Innovator in the Coze AI Bot Challenge. We're excited to continue pushing the boundaries of AI-driven travel planning.

If you have any feedback, please let us know in the comments!

✨ AI Fairytale generator

programORdie — Wed, 10 Apr 2024 15:36:35 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

A cool site where you can upload an image, select a language, let the AI do it's magic and receive a fairytale about that image, in your selected language, with 2 images!

Demo

⭐ Check it out here!

My Code

💻 If you want to see my code, here it is: https://github.com/programORdie2/fairytaleAI

Journey

🚀 During this journey, I explored cloudflare workers and AI models. I only used pages before, so it was a whole new experience for me!

📚 Everything was very well documented, what made it very easy to use multiple models.

🧠 I really learned a lot of this challenge, and as soon as a text-to-speech model is available, I'm going to add this feature too. 🎙️

Multiple Models and/or Triple Task Types

I used triple task types (see the tabel) and multiple models (text generation), here is the list:

Type	Name
Image-to-text	@cf/unum/uform-gen2-qwen-500m
text generation (SFE check)	@hf/nousresearch/hermes-2-pro-mistral-7b
Text generation	@cf/meta/llama-2-7b-chat-int8
Translation	@cf/meta/m2m100-1.2b
text generation (prompt generation)	@hf/google/gemma-7b-it
Image generation	@cf/lykon/dreamshaper-8-lcm

That's it, if you have any feedback or questions, please let me know in the comments!

Working Camp Inquiry - Glam Up my Markup

programORdie — Sat, 23 Mar 2024 13:42:47 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built a glass UI for the Glam Up my Markup frontend challenge.

I used a very futuristic theme to move away from the traditional camp theme that has already been used by so many other websites.

It's a resizable site, which makes it usable for both desktop and mobile users.

Demo

A better preview of the site is available here
All the source code is available on Github.

Journey

I started with just styling the form, but I realized that was pretty normal.
That's why I decided to add a database feature, what made me knock with my head on my desk.

I learned tons of new javascript skills by making my own pie charts, because animating on the canvas isn't simple.

After that, I made some cool confetti and popup scripts to make it look better and spendt 2 hours on animating (yes, 2 hours, don't laugh).

Credits

Stackoverflow for lighten and darken hex colors
ChartsJS for inspiring me with the pie chart.
Deta for hosting the backend
Everything else (confetti, charts, popups and database) is made by myself!

DEV Community: programORdie

GitHub Contribution Agent | Agent.ai challenge

What I Built

Demo

How it Works

Agent.ai Experience

🚀 Time Traveler: A Pinata-Integrated Time Capsule for Future Explorers

What I Built

Demo

My Code 💻

programORdie2 / time-traveler

Time Traveler is a web application that allows users to create digital time capsules, enabling them to upload various types of files—images, audio, videos—and unlock them at a specified future date.

Time Traveler

Table of Contents

Key Features

Technology Used

Installation

More Details

Integration with Pinata 🔗:

Docker vs Virtual Machines: The Lightweight Contender vs. The Old Heavyweight

Virtual Machines: The Veteran in the Ring 🥊

Docker: The Lightweight Challenger 🏋️‍♂️

Docker vs. Virtual Machines: A Quick Comparison

Which One Should You Choose?

Final Thoughts: The Winner Depends on Your Needs 🏆

About Me

GraphQL vs REST: API Showdown 🤜🤛

REST: The Veteran

GraphQL: The New Kid on the Block

REST vs GraphQL: Head-to-Head 🥊

Which One Should You Use?

Use REST when:

Use GraphQL when:

Real-World Examples 🌍

Final Thoughts: Choose Your Fighter 🥋

About Me

Serverless vs. Edge vs. Traditional Servers: Which One’s the Best Fit for You?

Traditional Servers: The Old Reliable

Serverless: The New Kid with No Servers (But Still Servers, Kind Of)

Edge Computing: The Speed Demon 🏎️

Which One Should You Choose?

Final Thoughts: Pick Your Poison

Share Your Thoughts!

About Me

WebAssembly: The Superpower You Didn’t Know You Needed

So, What Exactly is WebAssembly?

Why Should You Care? (Or: Why Are We Geeking Out About This?)

“But I’m a Web Dev, and JavaScript Is My Ride-or-Die!”

“Alright, Alright… But How Do I Start Using WebAssembly?”

Will WebAssembly Take Over the World?

Final Thoughts: Wasm Is the Real Deal

About Me

Service Workers - One Byte Explainer

Explainer

🌊 Glam Up My Markup: Beach Edition 🌴

What I Built

Demo

Journey

Key Highlights:

Learning Points:

Future Enhancements:

Llama 3 Plugin

What I Built

Demo

Journey

✨AI Travel planner ✈️

What We Built

Demo

Our Configuration

Journey

Team Members:

✨ AI Fairytale generator

What I Built

Demo

My Code

Journey

Working Camp Inquiry - Glam Up my Markup

What I Built

Demo

Journey