How To Use A Chat App & Improve UX Design

We’ve all heard about ChatGPT by now. It’s very good at parsing natural language. If you haven’t heard about it yet. It’s also very good at promoting itself. When I explained this article and asked ChatGPT to introduce itself for my audience, here’s an abridged version of the reply:

I am Assistant, a large language model trained by OpenAI. I am an artificial intelligence program designed to answer questions and provide information on a wide range of topics. I do not have a physical body, but rather exist as a collection of algorithms and data that allow me to process and understand language. As a language model, my primary function is to generate human-like text based on input. I do not have access to the internet or external information, but rather rely on the knowledge and information that I was trained on during my development.

The reply’s abridged because it also likes to talk. Ha! But it responds to a wide range of questions and topics, and continually learns based on the interactions and chat history with its users. So it’s possible the extra chit-chat is based on my interaction somehow.

A Chat Bot For Web Development

I’m finding a chat bot to be valuable for getting help with web development in general. It started with HTML and CSS. I write my websites in VS Code without packages like Bootstrap. Sometimes I have specific questions or want to know best practices for a feature I’m coding. ChatGPT provides helpful feedback.

My Default ChatGPT Screen Awaiting Input

One of the things I really appreciate about ChatGPT is that it provides responses as code snippets I can easily copy and paste. This has been a huge time-saver for me. I no longer spend time typing out code or trying to remember the syntax for certain elements. Instead, I ask ChatGPT for help. It gives me a code snippet — and an explanation. I can paste the snippet directly into VS Code.

How I Asked ChatGPT For CSS Animation Help

It works easy. This is how I format the conversation to get the best answers. The first step is a one sentence brief description of the help you need. For example: I have an image carousel on my website and I could use some help with the CSS.

Then lay out the problem in the next sentence, like this: Currently the images in my carousel fade on a button click. I want them to fade and slide off the page to the right. It’s very important here to be specific about the function you are asking for. Without that, any chat bot will make assumptions based on previous training data. You might not get what you were asking for. In my example, I stated the specifications. They were to add slide to a fade transition and slide the image — off the screen to the right.

Finally it comes to the ask. What do I want the chat bot to do. This part is now extremely simple. It’s a simple question: Can you please create new animation key frames for this transition effect?Simple ask. And here’s the snippet provided in response.

@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.slide-out {
  animation: slideOut 1s ease-out;
}

Of course I got an explanation too. ChatGPT led the code snippet with a short explanation of the CSS animation property. Afterward, it defined the ‘slide out’ keyframes along with the opacity and translateX properties used in the code snippet. It also made sure I was aware this CSS animation is set to occur over a 1 second period.

I didn’t specify a length of time, so I got a long animation. But that’s easy to address after pasting the content into my CSS file. ChatGPT also gave post snippet instructions for its code:

To apply this animation to an image in your carousel, you would simply need to add the slide-out class to the image element in your HTML, and the animation will be applied when the class is added. You can also adjust the duration and easing of the animation by modifying the values in the animation property.

After pasting, the code snippets need a little love. But you’d do that with any code snippet you find online anyway. In summary, to help you get the best from any chat bot, here’s the format for my requests.

• I have an image carousel on my website and I could use some help with the CSS.
• Currently the images in my carousel fade on a button click.
• I want them to fade and slide off the page to the right.
• Can you please create new animation key frames for this transition effect?

Remember to say please and thank you. ChatGPT learns from, and adapts to, the interactions of its users.

Is ChatGPT Better Than Siri Or Alexa?

This works great for ChatGPT because it’s a text-based conversation. The same theoretically applies to voice chat, like Siri and Alexa. I have not tried or confirmed this, but my assumption is Siri and Alexa provide no base functionality to save their dialog to a text file.

This presents a unique opportunity for developers who write 3rd party apps on Apple’s Siri platform or Amazon’s Alexa platform. I realize Alexa is Amazon’s colossal failure, so maybe we stick to Apple and Google. Ha! The function to save chats as text in the users cloud storage would be cool. Even cooler would be a Siri app to apply generated code snippets directly to the user’s Macbook clipboard, were they could paste directly into a text editor. If I had enough free time, I would develop that app. Or… maybe I can ask ChatGPT for a little help.

Seriously though, working on web development projects is much more efficient right now. I’m grateful for ChatGPT as a resource to learn, reduce stress, and save time. I’ve asked for help with simple CSS animations, app menu UX formats in Flutter, and even asked for basic functions like sharing an example of an HTTP request for a Google Apps Script.

I don’t struggle with trying to search StackExchange for answers or examples for mundane things, like when I’m using a new API. Inevitably, I get distracted by search results that don’t apply to my question. If I need to see best practices for something new to me, I ask for an example instead of sifting through an internet search packed with keywords.

That kept me here longer enough to write this without a distraction. It’s good thing.