Forem: Adewale Abati

Introducing codename goose

Adewale Abati — Mon, 27 Jan 2025 23:00:00 +0000

We are thrilled to announce codename goose, your on-machine, open source AI agent built to automate your tasks.

Powered by your choice of large language models (LLMs), a user-friendly desktop interface and CLI, and extensions that integrate with your existing tools and applications, Goose is designed to enhance your productivity and workflow.

You can think of Goose as an assistant that is ready to take your instructions, and do the work for you.

While Goose's first use cases are engineering focused, the community has been exploring other non-engineering use cases for Goose as well. And it goes without saying, Goose is open source 🎉.

How Goose Works

Goose operates as an intelligent, autonomous agent capable of handling complex tasks through a well-orchestrated coordination of its core features:

Using Extensions: Extensions are key to Goose’s adaptability, providing you the ability to connect with applications and tools that you already use. Whether it’s connecting to GitHub, accessing Google Drive or integrating with JetBrains IDEs, the possibilities are extensive. Some of these extensions have been curated in the extensions directory. Goose extensions are built on the Model Context Protocol (MCP) - enabling you to build or bring your own custom integrations to Goose.
LLM Providers: Goose is compatible with a wide range of LLM providers, allowing you to choose and integrate your preferred model.
CLI and Desktop Support: You can run Goose as a desktop app or through the command-line interface (CLI) using the same configurations across both.

Goose in Action

Goose is able to handle a wide range of tasks, from simple to complex, across various engineering domains. Here are some examples of tasks that Goose has helped people with:

Conduct code migrations such as Ember to React, Ruby to Kotlin, Prefect-1 to Prefect-2 etc.
Dive into a new project in an unfamiliar coding language
Transition a code-base from field-based injection to constructor-based injection in a dependency injection framework.
Conduct performance benchmarks for a build command using a build automation tool
Increasing code coverage above a specific threshold
Scaffolding an API for data retention
Creating Datadog monitors
Removing or adding feature flags etc.
Generating unit tests for a feature

Getting Started

You can get started using Goose right away! Check out our Quickstart.

Join the Goose Community

Excited for upcoming features and events? Be sure to connect with us!

Are the rubber ducks getting smarter?

Adewale Abati — Wed, 18 Dec 2024 17:42:04 +0000

Like many people, the solution to a coding problem I’ve struggled with suddenly appears when I try to explain it to someone or something. Sometimes even while sleeping.

This whole process of explaining to something else with the aim of figuring out the problem is known as rubber duck debugging.

A lot of people actually used to have physical ducks, mascots and maybe even the GitHub Octocat sitting right on their desks to come in clutch when they need it. Here’s a typical 100x developer’s table :D

In recent times however, the ducks have started talking back!!!!! 😲

AI tools like ChatGPT, GitHub Copilot (Chat) have slowly stepped in to replace the metaphorical duck. We are now able to not only explain whatever issues we are facing and hope to think of a solution in the process, but actually get suggestions and even outright solutions that we can then go back to try on our projects.

GitHub Copilot takes it an extra step, you can get code suggestions right in your IDE. And in complete honesty, that is still mind-blowing when I think back to the days I first started learning to code - thank you Dreamweaver.
But it can go even further.

What are AI Agents

You have probably already heard of AI agents somewhere in the winds. A simple way to think of an AI agent is as a personal assistant that is able to take your instructions, use a tool like ChatGPT to get more information, and then use this information to complete the task you assigned to it.

It can also ask you to review or present the final results to you when ready - all while you focus on other things.

These agents are often built on a LLM like GPTs, Gemini, etc but instead of just giving the responses back to you, they are able to autonomously act on these tasks for you.

Get it? 😂

Using AI Agents

As described, AI Agents can make attempts to accomplish any task you give to them - many are developer-only focused, some can help with refactoring code, migrating code bases, fixing CI failures, etc.

There are already many AI Agents out there - love this article from Ebony Louis that pointed out a couple you should check out.

I’ve been using Goose a lot recently - it’s open source so yaay. I am able to use Goose directly in my IDE within a project folder - when I need to, and basically tell it what I want to do.

I was able to build an application on livestream within an hour without writing a SINGLE line of code. As a developer, and developer advocate, I can’t begin to think of how many hours I could save with this.

The AI landscape is moving very fast. There are new releases shared every other day and I think we are up for quite an exciting time.

Recently I was able to share my thoughts on a State of the Frontend survey and it turns out about 75% of developers already use one form of AI or the other in their workflow. I believe the number is only going to go up and make these developers more efficient - embracing AI instead of being afraid of it.

// Detect dark theme var iframe = document.getElementById('tweet-1849471180295528646-753'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1849471180295528646&theme=dark" }

I’m spending more of my time looking into how AI tools like this could help developers everywhere improve their workflow, and I can’t wait to share everything I learn with you all along the way.

Hundreds of developers across Africa learn to speak tbDEX

Adewale Abati — Mon, 01 Jul 2024 10:28:00 +0000

Following the successful launch of tbDEX 1.0 in Rio de Janeiro, TBD embarked on a roadshow across Africa, visiting Accra, Nairobi, and Cape Town.
Our mission was to engage with local developers and share tbDEX, an open source protocol for global payments.

Recognizing that many African countries face significant barriers to participating in the global economy, we aimed to support the vibrant and growing developer communities in these regions.
These communities are already tackling these challenges head-on, and we wanted to contribute by providing open source tools to build robust payment applications.

The roadshow featured full-day, hands-on workshops in Accra and Nairobi, where hundreds of developers gathered to learn how to utilize tbDEX.
The excitement was palpable as participants built wallet applications using the tbDEX SDK.
The enthusiasm and curiosity among the developers were evident, and the success of these workshops was widely shared across LinkedIn and Twitter.

// Detect dark theme var iframe = document.getElementById('tweet-1794038435218387164-439'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1794038435218387164&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1794018057012072690-593'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1794018057012072690&theme=dark" }

Angie Jones, Head of Developer Relations, and Adewale Abati, Staff Developer Advocate, led the workshops, demonstrating the capabilities of developers eager to integrate advanced payment solutions.
Co-sponsored by Yellow Card and Circle, these sessions saw developers integrating wallet applications with tbDEX in just one day.

In addition to the workshops, TBD actively participated in notable conferences across Africa.
At the 3iAfrica conference in Accra, Mike Brock, CEO of TBD, delivered an insightful session titled "Trust Reimagined in the Digital Assets World," discussing the economic principles behind digital assets and their impact on trust and value exchange in business.
Angie Jones hosted a roundtable discussion on tbDEX as an open protocol for global money movement."

The team also made a stop at Joy 99.7 FM radio station in Ghana, where Mike and Angie discussed how digital identity can enhance payment systems.

The journey continued to the ID4Africa conference in Cape Town, where TBD engaged with local stakeholders to gain deeper insights into the challenges surrounding digital identity.

Overall, the roadshow was a significant step in connecting with developer communities across Africa.
We were inspired by the talent and determination we encountered and look forward to seeing the innovative solutions that will emerge from these collaborations.

Get Started with tbDEX

With tbDEX, anyone can dive into building innovative payment solutions without needing permission.
This open source tool empowers developers to start building immediately.
We welcome your feedback and contributions to make tbDEX even more robust and versatile.
Join us in breaking down barriers and building the future of global payments today.

Understanding Decentralized Identifiers for 10-year-olds

Adewale Abati — Mon, 08 Apr 2024 13:31:54 +0000

A few months ago, I started looking into decentralization on the web and how this could impact our world as we know it today - thanks to Web5 and our work at TBD. One of the biggest and most important pillars in achieving this decentralized future is called Decentralized Identifiers (DIDs).

I set out to learn more about DIDs and as a result, did a small experiment on Twitter. I wanted people to ask me questions about DIDs, believing that the process of finding and providing answers would help reinforce my understanding of the subject. I did get a lot of interesting questions but one stood out for me - “How would you explain decentralized identifiers to a 10-year-old?” So let’s give it a shot.

^{Tweet asking me to explain decentralized identifiers}

What is a Decentralized identifier?

To understand what a decentralized identifier is, let me start by asking you what your name is. My name is Adewale Abati. I’ve had this name for as long as I can remember. It’s what people know me as, what is written on my certificates, notebooks, etc. It’s how people identify me, you, and things.

Companies have names, schools have names, and objects have names that cannot be taken away from them. Let’s think of decentralized identifiers as your name. It is very rare to have someone have the same name as you, but with DIDs, it’s unique and belongs to you.

So, a decentralized identifier, is a string that uniquely identifies a person, organization, or object without having to rely on a central body.

^{Image (partly self-drawn 😭) illustrating how people introduce themselves with names but in this case, using a DID.}

A few things to note about Decentralized Identifiers:

A DID is unique. No two DIDs are the same. This means when someone sees a DID, they know exactly who it belongs to, just like how your teacher or parent knows who you are when they call your name.

^{Image showing the structure of a DID string.}

A DID is yours to own forever. Just like your name, once a DID is created for you, it's yours and only yours, forever. You can use it to identify yourself anywhere.
DIDs are safe and secure. If you have a bank account or information that you want to protect, only you with your DID can access or permit to access it. This helps keep your information safe.

I know what you’re thinking - what if someone tries to use my name?

Like with your name, if you are trying to verify your identity, there are additional documents that only you can provide to validate that this is you. Examples of these are your birth certificates, international passports, etc. For DIDs, these are private keys.

These private keys are used when needed to show that you are who you say you are - and like birth certificates or passports, that are stored in folders - private keys can be stored in digital wallets.

So Why Are DIDs Important

If you look at the internet today, the only way we have to identify ourselves is through services that belong to corporate bodies - email, social media handles, etc. All of this can be taken away or changed for whatever reason. DIDs however are different. They belong to you for as long as you want and they are universal.

They serve as the backbone of other pillars of the decentralized web. Decentralized web nodes are identified and accessed through DIDs, verifiable credentials are issued to DIDs and also used to verify claims. Just like our names, the importance of DIDs is enormous.

I hope the ten-year-old in all of us now understands decentralized identifiers a little bit better - enough to develop an interest in how the decentralized future can become a reality for all of us. If you want to learn more, check:

The Human API Experience with Web5

Adewale Abati — Thu, 17 Aug 2023 11:23:00 +0000

I've been reading a lot about Web5 and it's exciting to say the least.

But before you roll in with the jokes and the memes, it's not called Web4, simply because it's a synchronization between the web as we know it today - Web2 - with the blockchain and decentralized nature of Web3.

So, Web2 🤝Web3 = Web5.

What exactly is Web5?

Web5 is a decentralized platform. That allows users own their own data and identity and be able to reuse any of this information across multiple platforms in the way that they choose. Web5 is built on three core pillars:

A unique identifier called Decentralized Identifiers (DIDs). This is what's going to be stored on the blockchain and also points to the documents or anything that is holding your unique data or identity.
The second one is Verifiable Credentials (VCs). which allows you to verify, as the name implies, some of the information that is shared. So, for example, I'm Nigerian, and if I have to verify my education certificate, I go through a body like WES. And they are able to, stamp with their digital identity that yes, this information is valid. I think this comes into play when you're working with important organizations in web5 space.
Decentralized Web Nodes (DWNs) which are basically your own kind of individual server or multiple servers as the case may be. Where you can host your DIDs, your documents, your information to share with people and other websites.

Core Pillars of Web5. Source: TBD

These three core pillars, Decentralized Identifiers, Verifiable Credentials and the Decentralized Web Nodes work together to ensure that the Web5 protocol is being utilized to its maximum, protects you and gives you the control over your data and identity.

Why should you be excited about Web5?

I think the biggest thing for me would be the fact that my data and identity is totally decoupled from any application that I choose to use. So, my personal information and any other unique data can easily be reused and reshared across multiple platforms without having to fill a form or go through another onboarding process because that information is already there and accessible through the Web5 protocol.

Of course, this requires that these applications also support Web5 because that means we need to build decentralized web applications before we can be able to take advantage of this protocol in its own right.

An example use case is that I can have a music playlist run on multiple services without having to manually compile them on each service simply because I have a playlist entry on one of my decentralized web nodes accessible through my identifier.

With this I can easily create a playlist on a platform on Spotify, and if I choose to use another like Apple Music, my own data is already there and ready to go.

I like to call this the Human API experience where we don’t have to manually fill forms or reshare the same sets of information over and over again with platforms we want to grant access. As long as we, humans, are directly in control of our data and identity, this can be shared with any decentralized service at the click on the button - or a blink of an eye if we ever get to that point 😀

Web5 is still under development.

Web5 is still under development, constantly being improved, so there are a few concerns here and there, like what can this platform do with information that you've shared with them? Are there going to be like laws like GDPR and the likes being responsible for enforcing these terms of service etc.

There are still grey areas that need to be fleshed out, conversations that still need to be had, but if you want to get an update on what exactly is going on right now with Web5, there's a website called areweweb5yet.com and it covers the pillars of Web5 and how much progress has been made in figuring stuff out and also building up the entire infrastructure.

It's a work in progress that I am excited about. If you are as excited, there are a few resources you can take a look at to learn more about this technology.

What is the boring JavaScript Stack - Sails Boring Stack

Adewale Abati — Tue, 11 Jul 2023 08:33:00 +0000

What is the Boring Stack?

The web development industry is one that moves pretty fast. Every other week there's a new framework and every other day there's a new terminology or concept you need to get familiar with. More often than not, there are official terms for tools and practices that you may already use without realizing it.

Most recently, I started seeing an increased mention of the Boring JavaScript Stack on my Twitter timeline. Curious to what it was, I bookmarked and promised to get back to it. My first impression was that it was most likely a combination of specific technologies, like the Jamstack, MEAN stack etc that we'd have seen before.

This terminology isn't new however. You can find mentions of the Boring Stack as far back as 2016. This Hackernoon article defined the Boring stack as:

It’s whatever stack you already know so long as that stack is capable of completing the interesting thing that you want to build.

What this means is that if the primary goal of building a project is the end result, or to confirm that you are able to build it, then you are better of using technologies you already know - The Boring Stack.

If you want to ship great products, learning new languages and frameworks is not the way to go. You need to find your Boring Stack.

So What is the Boring JavaScript Stack

The answer here should be simple - especially if you've read the above. The Boring JavaScript stack for you should be a set of JavaScript tools that would help you focus on shipping that product as quickly as possible. Tools you are already familiar with - leaving you focused on the important part, your project.

That would be my default answer. However the purpose of this article was to explore the Sails Framework Boring JavaScript Stack.

I have never used Sails, so I'm probably going against the concept of the Boring Stack itself, but if you are unsettled about what tools could be your boring stack or if you've never shipped a fullstack JavaScript product on your own before, Kelvin Omereshone and other contributors over at Sails have also set up an architecture that could be your boring stack and it is so aptly named - Boring JavaScript Stack.

How does this stack work.

The Boring stack from Sails makes it easy to build a fullstack JavaScript application where you get to worry less about the architecture but more about your idea. It's currently built on:

Sails - A MVC framework for Node
InertiaJS
One of Vue, React or Svelte with Tailwind.

Why would anyone want to try this?

I think the obvious ideal scenario is if you already use sails. These are quick project starters that help you get right into the thick of things. Another scenario is when you currently don't have a set stack you are able to ship end to end products with. Then it's a good idea to pick a project like this one, get comfortable with and know you can always rely on it speeding up your development process.

The Sails boring stack promises stability, battle-tested architecture and technologies (listed above). You can try it out right away;

$ npx create-sails <project-name>

I'd like to know what other stack or tools you all use for end-to-end development of your side projects and products, so don't hesitate to share if you use something else in the comments.

Your Open Source Project needs CodeSandbox - Here’s why

Adewale Abati — Fri, 27 Jan 2023 16:44:00 +0000

When I moved from sending pull requests to open-source projects on GitHub to starting projects of my own and having different people send in their own pull requests with implementations and different ideas, I had a new-found level of respect for open-source maintainers.

Today we have countless open-source projects - from those powering a lot of the global technology infrastructure that we all build on today, to simple plugins that make it much easier to do certain things.

Each of these projects has maintainers that ensure their stability and integrity. As people are encouraged to contribute, it’s become more important than ever to ensure that these new contributions are properly tested, as easily as possible.

What do maintainers currently do?

Typically, maintainers use automated tests as the first line of defense to ensure that the pull request doesn’t break anything. However, to review it further, they are required to follow a rather tedious approach that often requires them to:

Check out of their current working branch
Switch to the new branch and update dependencies when needed
Review the changes and provide feedback where necessary before deciding whether or not to merge
And then go back to their own work.

This is where CodeSandbox comes in to make this much simpler and faster.

Using the CodeSandbox GitHub app

As a maintainer of an open source project where I work with other collaborators, the CodeSandbox GitHub app makes reviewing a new pull request as simple as clicking a link in the PR to get a running development and preview - all in the browser.

From a pull request sent in from a contributor

To having a running environment from the pull request in seconds.

How does this work?

As an owner or maintainer, you can import your project into CodeSandbox. After it finishes importing, you will be prompted to install the CodeSandbox GitHub app.

Once that is done, for every pull request sent to your project, a CodeSandbox bot adds a link to a running environment and preview to test out and review that pull request.

This means you can even review a pull request from any device without worrying about the development environment. Amazing, right?

To learn more about the CodeSandbox GitHub app and how it can improve your experience as a maintainer, check out the documentation.

Contribute to Sandpack in Hacktoberfest

Adewale Abati — Tue, 04 Oct 2022 09:31:21 +0000

At CodeSandbox, we are excited for Hacktoberfest and all the value that open source contributions generate at this time of the year for exciting open source projects, the maintainers and contributors.

We are thrilled to also share that we’ve added the hacktoberfest topic to Sandpack and would love your contributions.

Contributing Sandpack themes

Our key goal is empowering developers to include custom live coding experiences on the web, regardless of your website layout or level of design or expertise. To be able to do this, we have provided plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options from the community.

So, how can you contribute to new themes?

Sandpack Theme Builder

Sandpack provides a tool to guide you in creating your custom theme. Start with a dark or light theme, and then add your custom values like primary and secondary colors.

Plus, if you want to give it an even more personal touch, you can go to the Advanced tab and set colors for the syntax highlight and other cases. https://sandpack.codesandbox.io/theme

Publish a theme
At this point, you need to go to the Sandpack repository, fork it, and introduce some changes in your pull request. The easiest way to do this is to use CodeSandbox Projects:

Open the Sandpack repository on CodeSandbox Projects.
Create a contribution branch, which will fork the repository for you:

Create a new file in the codesandbox/sandpack/sandpack-themes/src folder with the following name [myAwesomeTheme].ts
The content of this file must be an export for an object that contains the theme:

import type { SandpackTheme } from "./types";

export const myAwesomeTheme: SandpackTheme = {
  colors: {
        ...
  },

  syntax: {
        ...
  },
  font: {
    ...
  },
};

Include your new theme into the index.ts file, which exposes all themes.
Commit and send in your pull request. Done 🚀

We cannot wait to see the amazing themes from the community. And if you have any questions or want to reach out to the team, feel free to contact us on Discord or on GitHub.

Happy contributing! 🎉

How to get started with Hacktoberfest

Adewale Abati — Mon, 26 Sep 2022 14:44:45 +0000

Introduction

Open source projects are built by developers all around the world and made freely available to anyone to use, study, modify and even contribute to. They are often hosted on GitHub under a specified license.

A lot of the tools we use (especially as developers) are open source. From the libraries we use for development, to tools that we use daily. Getting involved with open source is a great opportunity to be a part of something big, perfect your craft and collaborate with developers from anywhere in the world.

What is Hacktoberfest?

Hacktoberfest is a month-long celebration of open source software that aims to make it easier for people to be a part of the open source community. Open source maintainers create first-timer issues that users can fix, and new contributors get a very supportive community available to aid them.

Hacktoberfest isn’t all about just code. Everyone is welcome - from writing, designs, testing or even mentorship.

What Hacktoberfest isn’t

With the culture of Hacktoberfest focused on making it easier for newbies to break into open source, it is important to note that spamming - sending irrelevant PRs or adding commits that add no value across repositories - is highly discouraged and defeats the purpose of this month-long event.

What do you need to do to participate?

To be a part of this year’s Hacktoberfest, you need to:

Register at hacktoberfest.com anytime between September 26th and October 31st.
Find participating projects that are hosted on either GitHub or GitLab that you would like to contribute to. These projects would have the “hacktoberfest” label or topic added to them.
Send in your contributions by creating a pull request to the repository.
Your pull requests must be merged for them to count towards your total for the month.
Please note that spammy or low-quality pull requests are NOT going to count.
Be among the first 40000 participants to get 4 requests accepted between October 1st and 31st to receive one of two prizes: A tree planted in your name or the Hacktoberfest 2022 t-shirt.
Continue contributing and adding value to more open source projects around the world. 🚀

Getting started

CodeSandbox makes it extremely easy to get started making your contributions today. With CodeSandbox, you won’t have to worry about setting up your local environment to run the project before you’re able to make a contribution - either as a coder or a non-coder.

Find a project

I always recommend finding projects that you already use as a great start to break into open source. For Hacktoberfest, it’s required that the projects have the hacktoberfest label on them.

A good way to start is by visiting the Hacktoberfest topic on GitHub, where you’ll find all the projects you can contribute to.

Import to CodeSandbox

Different projects have different setup requirements. Depending on the complexity of the project, it might take you a few minutes to set everything up in your local environment — but, if you’re a beginner, this might become a roadblock. Fortunately, there’s a way to skip this setup entirely and get straight to working on the codebase: importing the project to CodeSandbox.

By doing this, you will save the setup time and complexity and be able to focus on the changes you want to make.

Let’s see this in action! ✨

For this tutorial, we will be importing the Swagger UI repository.

Go to the Projects Dashboard.
From the left sidebar, click on the Team (personal or another) you want to import your project into. New teams can be created through the Dashboard.
Click on the New Project button.
Enter a valid GitHub URL or choose a repository from the pre-loaded repository list.
- For example, https://github.com/swagger-api/swagger-ui.

You can also open up any open source repository through CodeSandbox simply by adding the repository’s GitHub URL to the end of the CodeSandbox URL, using the format below:

codesandbox.io/p/github/[org]/[reponame]

In our case, this would be visiting codesandbox.io/p/github/swagger-api/swagger-ui directly.

Make your contribution

By default, when you open up a project, you can’t contribute directly to the main branch. You can either create a contribution branch or fork the project.

Creating a contribution branch is the fastest and easiest way to contribute; this creates a disposable branch for you to make your edits and send a PR. Forking a project is also an option, as it creates a duplicate of the project in your own account and allows you to work from there — but for contributing, we recommend that you choose the contribution branch option.

Once this is done, you can focus on making your valuable contributions to the project before moving on to send a PR. As you make your changes, you will be able to see a handy preview of the project, because CodeSandbox is running a development server so you can immediately see the result of your changes.

Send in your pull request with a preview link

Once you’re happy with your changes, it’s really easy to commit them and open a pull request, as you can see below.

With CodeSandbox, every branch has a unique preview link that you can include in your pull requests. This makes it extremely easy for open source maintainers to view your contributions, provide feedback or make changes where necessary before merging.

If the open source repository already has the CodeSandbox GitHub app installed on their repository, this happens automatically. Otherwise, you can include the link to your branch in the body of the pull request.

Conclusion

Hacktoberfest is an exciting time of the month for open source enthusiasts all over the world. The activities go beyond the pull requests but also mentorships and conversations happening across the web. You can stay up to date with all we have in store for you this period on our Twitter account @codesandbox. Happy contributing! 🎉

Enabling communities to learn with CodeSandbox and IngressiveForGood

Adewale Abati — Wed, 25 May 2022 15:42:41 +0000

CodeSandbox is on a mission to empower web developers and make it easy to build solutions that can change the world.

For this reason, we partnered with Ingressive4Good, a non-profit developer community from Lagos, Nigeria that launched in July 2020 with a bold mission to train 1 million African youths with tech skills.

We had a month-long challenge for members of the Ingressive4Good community to build solutions for a problem statement using CodeSandbox.

Problem Statement

Ingressive4Good noticed a challenge amongst their smaller community organizers - which included tools to help promote their events. Having a local platform where users can create and share personalized event Display pictures (DP) would increase their campaign reach and also give events more visibility.

The goal was to identify the top 3 individuals/teams that will be able to build a solution for this in the specified time period.

The Challenge

Over 290 people applied with 155 active participants for the duration of this challenge and these are the top projects.

It's been an amazing experience for the participating developers and some have gone on to share their experience with the challenge.

Winners

Team Eagle

Team Eagle was excited about the opportunity to work together and collaborate on this project, as they explored delegation, helping one another out and feeling like a team.

Team Bracket

Team Bracket shared their enthusiasm about the learning they embarked on as they strived to build a useful product in the time frame specified.

Team iCreate

Team iCreate like the rest of the other teams shared how they embarked on a journey of learning and collaboration and look forward to making their application production ready in the near future.

We are thrilled to have been a part of this challenge and also looking forward to enabling members of the developer community to learn and collaborate as they build amazing products.

Stay up to date with @CodeSandbox and @Ingressive4Good on Twitter.

Build fun web animations and win prizes

Adewale Abati — Thu, 19 May 2022 11:05:56 +0000

Web animations, especially when used right, help create fun, interactive and engaging experiences for your website visitors. However, more often than not, they can be quite difficult to implement.

As CodeSandbox is dedicated to making web developers as productive as possible, we partnered with Greensock (GSAP) to host some fun and creative challenges for the month of April. Greensock puts a lot of animation power in the hands of developers through it's robust JavaScript library and they have now made all the Club Greensock premium plugins now available on CodeSandbox via npm. 🔥

Every week through April, we shared a new creative coding challenge and a sandbox to get started building something fun. You can find out all about the challenges at https://greensock.com/challenges.

Challenges

The first challenge encouraged everyone to build something fun on Scrolling animations with ScrollTrigger. There were a lot of amazing submissions but Victor and Ismael took the top spots.

Here comes the sun by Ismael

GSAP x CodeSandbox by Victor

The next challenge involved animating SVG Strokes with DrawSVG. Even more creative entries but our winners were Christian and av.

Cricut Drawings by Christian

Indiana Jones by AV

The final challenge using Greensock’s Flip plugin had our previous winners - Victor and Christian topping the charts again. So the well deserved runner ups - Toso and Julia took the prizes for this one.

Flip animation by Christian

Knowing the Alphabet by Victor

SpaceX by Toso

Tile builder by Julia

We want to say a big thanks to our judges who voted every week for their favorite demos despite how tough it got.

Stay up to date with @CodeSandbox and @Greensock on Twitter.

AMA with the Sandpack team Recap

Adewale Abati — Fri, 18 Feb 2022 17:44:07 +0000

On Wednesday, Feb 2nd, members of the Sandpack team - Danilo, Jasper and Alex hosted a live AMA (Ask Me Anything) with the CodeSandbox Discord Community. They answered questions about Sandpack, its licensing, different use cases and the roadmap for Sandpack.

In this blog post, we feature a recap of the session, as well as questions from the community and answers from the team.

Adewale opens the AMA:

Ace: Hello! I want to welcome everyone to this webinar with members of the Sandpack team - DaniloWoz, Alex Moldovan and Jasper - where we would be talking about what it was like building Sandpack, possibilities and opportunities and answering all questions you might have.

Hi DaniloWoz, Alex Moldovan, Jasper thank you for joining us. Please introduce yourselves. You can tell us a bit about your past experiences outside CodeSandbox as well 🙂

Danilo: Hi, my name is Danilo Woznica, frontend developer at CodeSandbox. I’m one of the core maintainers of Sandpack, and you’ll probably see me on the main repository responding to issues, approving (or rejecting 😀) pull requests, and addressing new features in the React package.

Alex: Hey everyone! Welcome! My name is Alex, I'm joining from Cluj, 🇷🇴 Romania. I'm a Product Engineer at CodeSandbox, I worked on Sandpack for the first half of 2021, so you might not see me so active these days, but I'm still trying to be on top of the project. 🙂

Jasper: Hey, I'm Jasper, full-stack developer at CodeSandbox from Belgium. I mainly work on the bundler part of Sandpack, adding new transforms, performance improvements... Besides CodeSandbox, I also work on Parcel, another open source bundler.

Ace: Awesome! Thank you!

Q1: It seems you all worked on different aspects on Sandpack over the last few months - can you share a bit about what aspect you worked on, and the story behind Sandpack?

Alex: Well I picked up the project back in December 2020. Ives had an early version of Sandpack (used to be named smooshpack 🙂) but it was really under the radar back then. So we decided to bring it up to date.

I worked extensively on Sandpack during my first few months at CodeSandbox, trying to give the library the shape it has today. So you'll still see some of my contributions today around the React components and hooks that make up the react side of Sandpack. Around mid-year, I passed that torch to DaniloWoz.

Ace: Oh that's exciting. We have a question from the community

Q2: “How does this compare to just using embed functionality” - Peter

Alex: Embeds are way, way bigger in terms of the amount of stuff that happens, because you're loading the entire page in your page (albeit a streamlined version perhaps). We also have CodeSandbox embeds, but once you add 2-3 of them on the same page you really start to feel it moving slowly. With Sandpack, you integrate the code editor and all other components directly into your bundled application, so only the preview needs to run in a separate iframe.

On top of performance, the fact that you can customize components directly is a huge advantage if you're building a custom solution. One good example is the react-docs project, which relies on Sandpack components to run the interactive snippets.

plondon: Community member here, but another benefit to Sandpack vs embeds is that if you want to save the users code/progress you can store their changes yourself and rehydrate them when they return.

Ace: Thanks for the answer Alex Moldovan, Does this affect build time for personal blogs or integrations in anyway?

Alex: Not really, the React components that are part of the Sandpack package are quite light and DaniloWoz worked extensively in the past few months on SSR support and other performance/bundle size improvements.

Q3: "Are there any contributing opportunities at Sandpack?" - Shahamsha

Danilo: Yes! There are a few issues where you can make your contributions right now:

Good-first-issue: https://github.com/codesandbox/sandpack/issues?q=is%3Aopen+is%3Aissue+label%3A"good+first+issue"
Help wanted: https://github.com/codesandbox/sandpack/issues?q=is%3Aopen+is%3Aissue+label%3A"help+wanted"

Plus, you can follow the contribution guide to explore more contribution opportunities.

Q4: "Will there be support for Sandpack on popular platforms like dev.to and similar?" - Friday

Alex: Sure that's a possibility, but it's not really in our control. Right now, any platform running React can easily integrate the library. We are also looking into building a Docusaurus and mdx plugin for easy integration on static sites.

Q5: "Do the code execute in the Browser like Stackblitz Webcontainers, or do they have to proxy to a server to process code and return a response?" - PeterMbanugo

Jasper: Sandpack runs entirely in the browser, transpiling code in webworkers and executing everything inside an iframe. The only servers Sandpack uses are CDNs for fetching the node_modules.

Ace: I'm guessing this also explains Alex Moldovan's answer earlier about Sandpack being light with massive improvements. Are there any other optimizations from Sandpack that ensured this ease?

Danilo: Yes, we've been working hard to bring more optimizations to Sandpack, both on the React package (such as SSR improvements, lazily loading heavy dependencies, and removing redundant code) and in the bundler side too (you can find more details here: https://github.com/codesandbox/sandpack/issues/295).

Q6: “What are the commercial plans for Sandpack?” - Petty

Tamas: Chiming in for this question as I'm acting as a PM for Sandpack. Regarding the commercial plans, we consider Sandpack as an open sourced project for now but maybe in the future we will introduce some paid plans or features.

Ace: A follow up question to this tamas "can you give us any hint about what those features might be? wink wink nudge nudge sse? - plondon 😄

Tamas: There is no concrete plan on this but yeah probably sse would be a paid feature!

Q7: Can I use Sandpack with other libraries? It’s only the React package that seems to be available, are there libraries for Vue etc?" - EmmanuelOloke

Danilo: Currently, we only support Sandpack React and we're still working to implement new features before porting it to another framework (Vue, for example). However, by using sandpack-client you technically can implement it in any JavaScript library.

For example, here's an amazing contribution from the community (not officially), which has started to port some features from Sandpack React to Vue https://github.com/Destiner/sandpack-vue.

Ace: To wrap up... DannyRuchtie would like to know who your most favourite colleagues are DaniloWoz, Alex Moldovan Jasper 😄

Alex: I can't think of anyone other than DannyRuchtie.

Ace: Thank you for joining us DaniloWoz, Alex Moldovan, Jasper. It's been great learning more about Sandpack from you all.

As we go, I'd like to ask you all to leave us with your favorite use cases of Sandpack you've seen so far so we can all check it out.

Danilo: Love how React docs is using the SandpackCodeViewer component and how they leverage the decoration API to explain how the React API works: https://beta.reactjs.org/reference/usestate. Plus, https://codeamigo.dev/, which brought the Sandpack integration to another level! Very impressed!

Jasper: I was amazed at how Blazepack https://github.com/ameerthehacker/blazepack was created, enabling anyone to have the same fast prototyping experience sandpack provides locally with their known editors.

Ace: Oh awesome! Thank you and have a great rest of your day!

If you have additional questions, or want to show us what you’ve built with Sandpack, you can share with us on Twitter or on our Discord community.