DEV Community: Michael

How Rompt Helped Me Optimize My GPT-Powered Product Through Massive A/B Testing

Michael — Fri, 12 May 2023 20:18:55 +0000

Introduction

One of the main challenges developers of AI-powered products face is refining the prompts that power my GPT-based applications. Fine-tuning prompts is a guessing game that involves intuition and trial and error, but that's where Rompt comes in.

Rompt is a platform that allows developers to perform massive A/B tests for the GPT prompts used in their applications. In this article, I'll share my experience using Rompt and how it helped me optimize the prompts for my AI-powered product.

Setting up experiments

The first step in using Rompt is inputting a set of potentially optimal prompts. These prompts can have embedded variables, which are wrapped in curly brackets. For instance, my initial prompt was: "Write a summary of the {book_title} book."

Next, I had to set the experiment parameters, which included:

Assigning models to each prompt

Defining a set of possible values for the variables in the prompts
Specifying the number of outputs to generate for each prompt
In my case, I assigned the GPT-4 model to my prompt, set the book_title variable to a list of popular book titles, and requested 10 outputs for each prompt.

Blind rating of generated outputs

Once Rompt generated the outputs, I received a flat list of responses without any indication of the source prompt. This blind rating system ensured that I could evaluate the quality of each output based solely on its appropriateness for my product, without any bias towards a specific prompt.

As I went through the list, I rated each output on a scale of 1 to 5, with 1 being the least appropriate and 5 being the most appropriate.

Identifying the highest-performing source prompts
After I completed rating all the outputs, Rompt revealed a list of the highest-performing source prompts. This allowed me to identify the prompts that generated the most appropriate responses for my product.

With this information, I could make data-driven decisions about which prompts to use in my AI-powered application, ultimately leading to better user experiences and more relevant content generation.

Conclusion

Rompt is a valuable tool for developers working with GPT-powered applications. It takes the guesswork out of optimizing prompts by enabling massive A/B testing, blind rating, and data-driven decision-making. As a user, I found Rompt easy to use, and it saved me countless hours that I would have spent manually testing and tweaking prompts. If you're a developer looking to improve the quality of your AI-generated content, give Rompt a try.

strz – Very Strongly Typed String Functions

Michael — Fri, 14 Apr 2023 15:00:00 +0000

dilan-dio4 / strz

💪 Very strongly typed string functions in TypeScript

`strz` – Very Strongly Typed String Functions

0️⃣ No dependencies
🌲 Tree shakable
📦 Small
5️⃣ Typescript 5
📝 Strongly typed

Why?

In projects that encourage strong typing, the standard library requires manually casting to match function parameter signatures. strz brings the power of strong typing to the standard library.

Example

import { split, suffix } from 'strz'
const str = "The quick brown fox jumps over the lazy dog"

const splitStr = split(str, " ") // splitStr is of type ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]
const suffixed = suffix(str, "!") // suffixed is of type "The quick brown fox jumps over the lazy dog!"

Installation

npm install strz

Usage

import {
  charAt,
  toLowerCase,
  toUpperCase,
  toArray,
  slice,
  uncapitalize,
  capitalize,
  prefix,
  suffix,
  split,
  trim,
  trimStart,
  trimEnd

…

View on GitHub

How To Accept Crypto Payments in Your SaaS With Keagate

Michael — Mon, 18 Jul 2022 12:47:40 +0000

Keagate Repo

Keagate API

Keagate: Open-source, high-performance alternative to Coinbase Commerce & CoinGate.

Michael — Sun, 10 Jul 2022 22:59:57 +0000

tldr – Keagate is an open-source cryptocurrency payment gateway for multiple currencies.

There's a couple reasons that Keagate is the superior method for accepting crypto payment. To name a few; no fees or middle, multiple coins available, open-source, etc...

The payment workflow can be api-driven or utilize the built in invoice interface.

Example invoice:

To use Keagate in your next project, there's two installation methods.

1 – One-liner in Unix environments

bash -c "$(curl -sSL https://raw.githubusercontent.com/dilan-dio4/Keagate/main/packages/scripts/keagate.sh)"

2 – Manual installation, as seen here.

Lastly, proceed through the configuration helper:

node packages/scripts/build/configure.js

More information is available on the Github.

A collection of the best HTTP clients for various languages

Michael — Thu, 24 Feb 2022 19:31:08 +0000

Hello fellow developers! We're making an Awesome * list of the best HTTP clients for different languages and frameworks.

The list is awesome-http and can be seen here.

Please contribute any of your ideas. We've already had some great contributions!

react-avatar-group: A responsive, automatically-generated group avatar component, powered by ui-avatars.

Michael — Thu, 30 Sep 2021 14:25:13 +0000

This library is great for displaying the 'active' users of your React application. The responsiveness of react-avatar-group is meant to be similar to the Google Docs user icons. Some live examples are available here.

If you need a more in-depth tutorial on using this package with actual, live users, check out this post here. Otherwise, here's a quick walk-through on how to use this package.

First, install the package:

npm install react-avatar-group

Then open up your React file and import the package, as follows:

// App.tsx
import AvatarGroup from 'react-avatar-group';

export default function App(){
  <AvatarGroup
    avatars={[
      "James", 
      "Ava", 
      {
        avatar: "Jackson",
        fontColor: "FF00FF",
        tooltip: "This is a custom tooltip"
      }
    ]}
  />
}

The only required prop to the AvatarGroup component is avatars, which is an array of strings or IAvatar objects, for more customization.

Another important prop is max. This will hide the avatars beyond a certain length with a custom overflow avatar (as seen in the gif above). displayAllOnHover will show all minions passed when the mouse hovers the avatar group, if there is a max number passed.

All the props for react-avatar-group can be seen here.

Using these other props, your AvatarGroup may look like the following:

import AvatarGroup from 'react-avatar-group';

export default function App(){
  <AvatarGroup
    avatars={[
      "James", 
      "Ava", 
      {
        avatar: "Jackson",
        fontColor: "FF00FF",
        tooltip: "This is a custom tooltip"
      }
    ]}
    initialCharacters={1}
    max={3}
    size={60}
    displayAllOnHover
    shadow={2}
  />
}

I made a questionnaire to help less familiar devs choose the best JS framework/library to use for their web projects.

Michael — Tue, 06 Apr 2021 00:41:41 +0000

Hey everyone!

I wanted to share the short quiz that I created to help individuals looking to get into web/app development choose the best library for their specific use case.

The quiz is available here and I welcome any feedback from those of you who have suggestions.

Thanks and have a great week!

Price Comparison of Popular Serverless Architecture Providers

Michael — Sat, 06 Mar 2021 16:49:14 +0000

Serverless computing has become very popular over the last decade. There are many benefits to going serverless, especially when deploying production applications as an individual or small team. One of the main benefits is the pricing model, whether it be pay-as-you-go or tiered. The monetary cost of serverless application development is very much to the benefit of the developer.

You may be asking, "what is a serverless application?". This model of application development abstracts away the overhead of manually owning and configuring the backend modules required for modern apps. You can learn more about serverless apps here. This piece will aggregate the pricing calculators and models of leading serverless providers.

1. AWS

Amazon Web Services is a popular, enterprise solution for highly experienced developers with demanding processes.

AWS Pricing

2. Easybase

Created with the small team or individual in mind, Easybase is great for adding serverless capability to your applications. Although lacking in some of the niche aspects of serverless computing, the platform features packages for React and React Native.

Easybase Pricing

3. Azure

Similar to AWS, Microsoft's Azure is the platform for many of the most popular applications today. Although its interface is quite complicated and can be difficult to set up and use for novice developers.

Azure Pricing

4. IBM Cloud

The newest member of the serverless computing game, IBM is similar to Azure but lacks the maturity featured in Microsoft's platform. IBM Cloud is definitely still a contender and has a bright future if they can cater to the needs not catered by the other competitors.

IBM Cloud Pricing

How I used Reddit & Twitter to Make Your README More Effective

Michael — Sun, 13 Dec 2020 21:20:57 +0000

Many lessons from my time at university have stuck with me throughout the years. One of the most important was in regards to technical writing (thank you to my CS 787 professor).

The lesson being that the process of technical writing is focused on being clear and concise. Every aspect of this technical work, whether it be visual or text, should be without redundancy or unrelated content.

This does not mean that your writing shouldn't be sophisticated or tedious, it just means you should be conveying relevant information. In other words, get to the point.

My Story

So that brings me to the README I've been working on. I have a repo that I wanted to be more alluring to potential users. This is a common situation that many open-source developers find themselves in. I didn't have too much experience writing high-quality READMEs.

Over years of using GitHub, I've seen some awesome READMEs with unique styles and crazy visuals/animations, but now I don't necessarily think that is always the most effective way to improve your README.

Last week I posted on various programming-related subreddits something along the lines of 'Looking for tips/criticism on my Github README?', about five in total. Furthermore, I DMed a couple of experienced open-source developers.

Over the following 48 hours, I received staggered feedback that I'm excited to share with you today. I've compiled the three most important points featured in the responses.

1. Informative Visuals

A picture is worth a thousand words. By that logic, too many pictures mean too many words. Take a look at this repo for example. There's a lot of images that clutter up the repo aesthetically. Are all of these images necessary? Too much large imagery damages the navigability of the page.

Imagery is very important as long it's purposeful. No-one likes reading a boring wall of text, but one or two branding/business images is enough. Your README should come off as a tool for potential developers to understand the purpose of your project, not as a sales pitch.

Furthermore, over-stimulating imagery can be a turn off to potential users as opposed to a mature, organized aesthetic.

This feedback led me to change the position and size of some of my more massive imagery. Stick to less than two branding images. Any other pictures/animations should be essential to either learning how to get up and running or understanding your project's purpose.

By the way, here's a link to my work-in-progress README. A star on the GitHub repo would be greatly appreciated if you liked this article. Thanks!

2. Navigability

For something like a GitHub page, organization and navigability go hand-in-hand. Users will likely reference your README multiple times. It's a one-stop shop for developers to find more information on specific topics (installation, dependencies, etc).

In my opinion, the most effective way to fulfill this navigability requirement is through the use of a Table of Contents. Many small to medium sized quality projects have some sort of ToC even if it's rudimentary.

This serves two purposes. First, it's a place for potential users to instantly navigate to their desired section. Second, it gives your README a structure to follow. Readers get a preview of what is to come as they continue forward. This structure results in a README that is organized and engaging.

Here's a tool that will automatically create a table of contents for an existing markdown document.

3. Expandable Content!

Now this one isn't as much feedback as much as it is my suggestion based on feedback. I didn't even consider using this markdown functionality until someone specifically suggested it to me. Turns out you can create expandable sections in your README with the following code:

<details>
<summary>Section Header!</summary>
<p>

Some information...

`# Here's some code`

</p>
</details>

After trying this formatting method in my README, I can say that I'll probably be using it in the future. It made the layout much more concise and aesthetically pleasing.

As I said previously, no-one likes reading a wall of text. This dramatically improved the readability of my repo. What's great about this markdown feature is that it dramatically reduces README clutter without losing content.

Users don't have to leave the page if they want more detail on a specific subject, they just have to click the dropdown arrow. Here's my specific implementation for reference.

For a more robust discussion on drop-downs in markdown, take a look at this gist.

Conclusion

Thanks for reading! These three tips can certainly boost the effectiveness of your READMEs. Remember, the core goal of your README is to be clear and concise at every step.

The three suggestions above were chosen by me, based on feedback from multiple sources. Be sure to consider informative visuals, navigability, and collapsable content in your future projects.

Feel free to leave a response regarding any questions or concerns. I'll be sure to get back to you!

5 Great React Libraries to Look Out for in 2021

Michael — Wed, 09 Dec 2020 02:36:45 +0000

Front-end JavaScript frameworks have become incredibly popular over the last five years, including Vue, Angular, and React. These modules have allowed beginners and exports turn their ideas into reality. Furthermore, they can deploy their applications on all kinds of devices.

Let's take a look at 5 React libraries that are going to be very influential in 2021. Particularly, we'll focus on packages that are relatively new and making strides in the community.

Enjoy!

1. react-data-grid

Github

Finally, an Excel clone for React that's actually intuitive and aesthetically pleasing. This is a difficult task to accomplish and I must say that this project really nails it. The featured grid has support for editors, keyboard navigation, and copy & paste.

Here's an example of a react-data-grid sheet. Notice how snappy it is. I'm assuming they utilized some form of virtualization and it really shows in this example. The application is snappy and sharp. Plus, initializing one of these grid could not be easier!

function App() {
  return (
    <DataGrid
      columns={[
        { key: 'id', name: 'ID' },
        { key: 'title', name: 'Title' }
      ]}

      rows={[
        { id: 0, title: 'Example' },
        { id: 1, title: 'Demo' }
      ]}
    />
  );
}

2. use-editable

Github

There a plethora of text editors available for React [especially when it comes to WYSIWYG]. This library takes a different approach though. I have to start by saying this library is incredibly small, so give it a look if this could be useful for your projects. The use-editable library provides a small hook that allows elements to be contenteditable while still being fully React renderable. This project's goal is to eliminate the needs for any interfacing with the DOM or innerHTML to deal with natively editable content. It works on almost much any element too!

To use this library, simply initiate a ref your React element and a state for your element. From there all you have to do is pass it to the useEditable hooks as follows: useEditable(editorRef, setRefContent). Here's a CodeSandbox demo. Give it a try!

3. easybase-react

Github

You know we had to plug our own! This library makes user authentication and database integration easier than ever before. It works with both Easybase projects or REACT integrations. The useEasybase() hook gives developers access to the functions needed for a scalable project. Just wrap your root component in a custom ebconfig.js:

import { EasybaseProvider, useEasybase } from "easybase-react";   
import ebconfig from "ebconfig.js";    

function App() {
    return (
        <EasybaseProvider ebconfig={ebconfig}>
            <ProjectUser />
        </EasybaseProvider>
    )
}

From there you can perform user authentication operations and access a stateful database array! Just for you, it's free. Here's some more information if you want to learn about Easybase and React. Let's take a brief look at user authentication with easybase-react:

function ProjectUser() {
  const { isUserSignedIn, signIn, signUp } = useEasybase();

  if (isUserSignedIn()) {
    return (
      <div>
        <h2>You're signed in!</h2>
        <FrameRenderer />
      </div>
    )
  } else {
    return (
      <div style={ { display: "flex", flexDirection: "column" } }>
        <h4>Username</h4>
        <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
        <h4>Password</h4>
        <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />

        <button onClick={_ => signIn(usernameValue, passwordValue)}>
          Sign In
        </button>
        <button onClick={_ => signUp(usernameValue, passwordValue)}>
          Sign Up
        </button>
      </div>
    )
  }
}

4. react-flow

Github

This package has solid usage for its age. It's main implementation is the ability to build interactive node-based editors, flow charts and diagrams. The developers focused on a solid mix of functionality and customizability.

The package accomplishes it goal of making it easy to implement node-based graphs with custom node types. Plus, it comes with components (mini-map, graph controls, etc.). Feel free to check out the examples or read the blog post to get started.

Take a look at an example here. This library appears to cover a lot of developer use cases regarding flow chart visualizations. It's fast and responsive too!

5. Atomic Layout

Github

Note this project's peer dependencies

Surprisingly this is our only layout library in this list (even though it feels like there's millions out there) and there is a good reason for that. I personally am not one for layout libraries due to the functionality of flexbox, but this package might change how I structure my projects in the future. Turns out atomic-layout handles much more than just spacing.

It's often very difficult to handle proper distributing and spacing when considering device scalability. Atomic Layout helps you to compose your elements by introducing a dedicated spacing layer called Composition. It encourages you to separate concerns between UI elements' visual appearance and spacing between them. Let's take a look at a brief example below:

const areasMobile = `
  thumbnail
  header
  footer
`
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition areas={areasMobile} areasMd={areasTablet}>
    {({ Thumbnail, Header, Footer }) => (
      <React.Fragment>
        <Thumbnail>
          <img src={imageUrl} alt={title} />
        </Thumbnail>
        <Header as="h3">{title}</Header>
        <Footer padding={10} paddingMd={20}>
          {actions}
        </Footer>
      </React.Fragment>
    )}
  </Composition>
)

The Composition element allows developers to contextualize their React components based on the size of the users device. This is much cleaner than conditionally rendering every attribute of the component. Take a look at a more detailed example that shows the true power of this library.

Conclusion

Thanks a lot for reading! Feel free to leave a comment if you have any questions/concerns, I'll be sure to get back to you.