DEV Community: Timothy Olanrewaju

The Case for OAuth

Timothy Olanrewaju — Fri, 17 Oct 2025 14:16:07 +0000

Every modern application that uses third-party services struggles with one key issue: sharing resources without compromising security. On one hand, functionality demands collaboration, but on the other hand, security models demand isolation. Users need to grant applications access to their resources across multiple services.

However, traditional authentication models force developers to make a tough choice between security and functionality. The core problem is granting access to resources in a way that maintains security boundaries, limits privilege scope, and preserves user control.

Picture this: Application A wants to access data in service B. Application A stores the credentials and gains full access equivalent to the user, with no limit on scope or access. Now, service B cannot distinguish whether the user is acting directly or Application A is acting on their behalf. This makes audit trails or user-specific rate limiting impossible.

From this point, every additional service integration only increases these risks exponentially. With micro-services, API-first design, and sophisticated attacks, this model quickly became untenable.

A Look at Early Delegation Models

As the industry evolved, some approaches were introduced to solve the challenge of authorization delegation. These early models successfully established token-based access and federated identity, which would later pave the way for a standardized framework.

API Keys and Shared Secrets: Token tied to a user improved over passwords, but still carried a persistent security risk due to the longevity and broad-scoped nature of the API keys. The only way to revoke access in this approach is by manual deletion.

Signed Requests and HMAC Authentication: Cryptographic signatures could tell who was in possession of a secret key without transmitting it. However, they still operate on shared secrets that must be distributed and stored by client applications.

SAML and Enterprise SSO: Focused on federated identity, Security Assertion Markup Language (SAML) enables single sign-on (SSO) by allowing users to access multiple applications with a single set of credentials. It successfully separated authentication from authorization and introduced token-based delegation, but it introduced layers of complexity.

Defining the Solution

All of the early adopted models solved subsets of the problem. There was a need for a general-purpose delegation protocol that could:

Work across security domains without sharing credentials.
Support both interactive user flows and machine-to-machine communication.
Enable ecosystem tooling with flexibility for different security requirements.
Separate authentication from authorization.
Provide granular scoping, enable revocation, and work across device types.

OAuth: The Modern Authorization Protocol

OAuth is a standard designed to allow a website or application to access resources hosted by other web apps on behalf of a user. It provides consented access and restricts actions of what the client app can perform on resources on behalf of the user, without ever sharing the user’s credentials. Its strength lies in its ability to adapt to different security contexts while maintaining interoperability.

Core Architecture Flow

In the OAuth architecture, there are four roles that separate concerns unlike traditional authentication models.

Resource Owner: Is the end user who owns resources. This role controls the authorization process by having the power to grant or deny access.
Client: Is the application requesting access to resources on behalf of the resource owner.
Authorization Server: Handles the authentication of the resource owner and provides tokens after gaining authorization.
Resource Server: Serves as a host for the resources and validates access tokens to determine whether to fulfill requests or not.

This separation of roles brings about a crucial architectural shift where clients never handle user credentials. Instead, the authorization server authenticates the user, obtains their consent, and provides short-lived tokens that clients can use to access resources.

OAuth In Full Flow

Imagine you want to schedule an online meeting. The go-to choice is Calendly. But Calendly is just a meeting scheduler. For you to stay in the loop and get a reminder when the meeting is approaching, it needs to be added to your personal calendar (say, Google Calendar).

Technically, Calendly needs controlled access to your Google Calendar, as it doesn’t own or manage it directly. It must be able to write new events and read free/busy slots on your personal calendar.

With OAuth, instead of handing over your Google password to Calendly, it provides an efficient delegation mechanism:

Inside Calendly, you connect your Google Calendar. The app redirects you to Google’s Authorization Server.
Google presents you with a consent screen while authenticating directly using your existing account.
If you approve, Google sends an authorization code to Calendly.
Calendly then securely exchanges the authorization code with Google’s Token Endpoint using client_id and client_secret.
Google responds with an Access Token.
Now, when Calendly needs to fetch your calendar events, it appends the Access Token sent into the Authorization Bearer header to Google Calendar API requests.
Finally, Google validates the token, checks if the scopes match and returns the requested data.

This exchange means Calendly only uses tokens with limited scope and life without ever accessing your Google Password.

Benefits of OAuth

The success of OAuth stems from solving problems that follow modern systems architecture. It effectively solved the foundational problems of delegated authorization.

Credential Isolation: Users never share credentials with third-party applications. This reduces the attack surface drastically and limits the risk of client vital information being compromised. When there is a breach, attackers only gain access tokens with a short life span.

Granular Authorization: Applications only receive the permissions they need. Users can grant read-only access or limit access. Individual clients are not affected when access to others is revoked. It follows the Principle of Least Privilege (PoLP).

Revocation Without Disruption: When a user suspects their account is compromised, they can review all authorized applications and revoke suspicious ones. This can be done without changing passwords or affecting legitimate applications.

Audit and Visibility: Service operators can track activities carried out by a user, such as API usage, abuse patterns etc. This is made possible because every token-based request carries information about the client.

Third-Party Ecosystem Boom: Startups can integrate with major platforms without going through custom authentication schemes. Libraries and frameworks can now provide general-purpose OAuth clients.

Limitations and Challenges of OAuth

OAuth’s flexibility and general-purpose model come with limitations that you must understand. Implementation complexity stands as the biggest limitation. With the amount of work needed to implement multiple grant types, manage token lifecycle, handle consent flows etc, very few organizations can invest in such an architecture.

OAuth, being an authorization framework not an authentication protocol, brings up concerns about identifying the user. Receiving access tokens only tells you what the client is allowed to do. To identify the user, other layers have to be added, like using OpenID Connect and examining user info endpoints.

Refresh tokens are also a point of concern. Refresh tokens must be long-lived to provide a good user experience, but such longevity leaves it prone to attacks. Shortening or rotation of the token would increase implementation complexity if that route is taken.

Practical Considerations for Implementation

We’ve covered the numerous benefits of the OAuth framework in applications. Adoption is a different ball game, and for it to be successful, you must pay attention to several key factors.

Choose Proven Libraries: Building an OAuth system from scratch is complex, making custom implementations is risky too. Therefore, opting for commercial solutions like Auth0, Okta, or KeyCloak is a smarter choice. For clients, use well-maintained libraries like AppAuth for mobile, Passport.js for Node, or Spring Security for Java.

Design Good Scopes: Your application scope should be from a user perspective. Each scope should represent a clear permission that users can understand and evaluate. “Read your profile” is more user-centric than “api.read”.

Token Lifetime Balance: You should ensure your access tokens are short-lived, preferably 15 minutes to 1 hour. Refresh tokens can live longer but should expire or rotate at intervals. For high-security applications like bank apps, refresh tokens should be rotated on every use. The decision is up to you. Evaluate your risk tolerance and UX needs and tweak accordingly.

Monitor Activites: It is essential to keep track of failed authorization attempts, unusual token usage patterns, token validation failures etc. Build dashboards that display an overview of which clients are consuming which API with what permissions.

Test, Test and Test: As a custodian of your application, you are responsible for authorization code interception, token replay, scope escalation, and CSRF attacks against your implementation. Use tools like OAuth 2.0 Playground or Postman to simulate various attack scenarios. Also, remember to include security testing in your CI/CD pipeline.

Conclusion

OAuth represents a pivotal shift in how we think and implement authorization in software systems. By aligning with modern ways of app communication, you can tap into the security and convenience that OAuth provides. With a secured authorization architectural flow across services, this model fits naturally.

OAuth should be viewed as an infrastructure rather than as a feature to implement. It is a foundational layer that other security properties depend on. The question isn’t whether to use OAuth, but how to deploy it appropriately within your organization.

Build a Chat to Slack Integration for Real-Time Feedback

Timothy Olanrewaju — Fri, 29 Aug 2025 08:11:23 +0000

To build great products, start by listening. Everything matters. Every bug report, feature request, or glowing review. These are the signals that fuel your product roadmap.

However, standing between success and failure is the pain of managing and routing that feedback to the right teams.

According to a Zendesk report, 59% of support teams are overwhelmed. Feedback pours in from multiple channels, often causing delays and leaving users feeling ignored. Support teams want to help; they try to, but the fragmented channels jeopardize their efforts. When this happens, nobody wins.

What if feedback didn’t float around in limbo or reside in silos but instead went straight to the people who can fix the problem—right inside Slack. Slack is a well-known and widely recognized workspace tool for developers, project managers, and support teams. And when feedback is sent to a dedicated Slack channel, it’s more likely to be seen, fast.

In this tutorial, we will implement a feedback system that uses Stream Chat to gather user thoughts and sends them directly into Slack.

Here’s a quick look at what we’ll build: Live Demo

All of the code for this tutorial can be found in this repo.

Technical Prerequisites

Before we begin, ensure you have:

A free Stream account.
A Slack account.
Node.js and npm installed.
Basic knowledge of React.

Create Your Slack App

We need to create a Slack app to send messages from Stream Chat to Slack. This app lets your code securely talk to Slack’s API and send feedback to a specific channel. Consider it the connection point between your Stream Chat messages and your team’s Slack workspace.

A Slack app enables you to:

Secure an API token.
Have your application post messages.
Control which channels or data your app can access.

Let’s walk through the steps to set up your Slack app:

Go to Slack’s API portal and click the “Create New App” button.
From the resulting pop-up, click on the “From Scratch” option.
Choose an app name and the workspace in which you’d like to develop the app.
Click on “Create App”.
Once your app is created, go to the OAuth & Permissions tab.
Under Scopes, add the following Bot Token Scopes:
- chat:write - to allow the app to send messages to channels
- channels:read - if you want to post to public channels
In the OAuth Tokens section, click on “Install to {{workspace_name}}”.
On the next auth page, click on “Allow”.
You’ll get a Bot User OAuth Token. Copy the token and save it somewhere safe.
Enter the workspace you integrated with your Slack app and create a channel.
Click on the channel. Copy the last part on your browser’s URL, usually prefixed with C (e.g, C092WJFRJGZ). That is your channel ID.

Project Setup

We create and set up our React project with the Stream React Chat SDK. We'll use Vite with the TypeScript template:

npm create vite user-feedback-collector -- --template react-ts
cd user-feedback-collector
npm i stream-chat stream-chat-react axios

Next, we set up a Node.js backend by creating a server directory in the project root:

mkdir server
cd server
npm init -y
npm install express @slack/web-api dotenv cors

Finally, we set up our environment variables:

In the server directory, create a .env file and provide the necessary credentials:

SLACK_BOT_TOKEN=your_slack-bot_token
SLACK_CHANNEL_ID=your_channel_id
STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret
PORT=5000

In the project’s root, create a .env file and provide your Stream API key:

 VITE_STREAM_API_KEY=your_stream_api_key
 VITE_API_URL=http://localhost:5000

Backend Architecture

The Node.js and Express stack handles server-side logic and handles HTTP requests within this application for real-time feedback processing.

Server Initialization and Configuration

At startup, the server checks for critical environmental variables. These variables are:

SLACK_BOT_TOKEN
STREAM_API_KEY
STREAM_API_SECRET
SLACK_CHANNEL_ID.

The check is important as it ensures a secure and reliable operation. If any are missing, the server terminates to prevent incorrect configuration.

// server/index.js

const requiredEnvVars = [
  'SLACK_BOT_TOKEN',
  'STREAM_API_KEY',
  'STREAM_API_SECRET',
  'SLACK_CHANNEL_ID'
];

const missingEnvVars = requiredEnvVars.filter(varName => !process.env[varName]);
if (missingEnvVars.length > 0) {
  console.error('Missing required environment variables:', missingEnvVars.join(', '));
  process.exit(1);
}

With this, the backend establishes critical integrations with Stream Chat and Slack.

Slack and Stream Client Initialization

A Slack Web API Client authenticates with a bot token to enable real-time feedback to a designated Slack Channel. We must also create a Stream Chat client using Stream’s API credentials to manage users, channels, and messages.

// server/index.js

const { WebClient } = require('@slack/web-api');
const { StreamChat } = require('stream-chat');

const slack = new WebClient(process.env.SLACK_BOT_TOKEN);
const streamClient = StreamChat.getInstance(process.env.STREAM_API_KEY, process.env.STREAM_API_SECRET);

Stream Chat Integration

The integral aspect of this system relies on Stream Chat. Each customer is given a unique ID (e.g., customer-<id>) and a dedicated messaging channel (e.g., feedback-<customerId>). We’ll also have a support-bot user, initialized as an admin, and participating in every channel to send automated responses.

// server/index.js

async function createStreamUser(userId, name, role = 'user') {
  try {
    await streamClient.upsertUser({
      id: userId,
      name: name || `Customer ${userId}`,
      role: role,
      image: role === 'admin' ? 'https://via.placeholder.com/40x40.png?text=BOT' : 'https://via.placeholder.com/40x40.png?text=USER'
    });
    return true;
  } catch (error) {
    return false;
  }
}


// Initialize support bot user
async function initializeSupportBot() {
  try {
    await streamClient.upsertUser({
      id: 'support-bot',
      name: 'Support Team',
      role: 'admin',
      image: 'https://via.placeholder.com/40x40.png?text=BOT'
    });
    return true;
  } catch (error) {
    return false;
  }
}


// Get or create customer channel
async function getOrCreateCustomerChannel(customerId) {
  try {
    const channelId = `feedback-${customerId}`;

    const channel = streamClient.channel('messaging', channelId, {
      name: `Feedback from ${customerId}`,
      custom: {
        type: 'feedback',
        customerId: customerId
      },
      members: [customerId, 'support-bot']
    });


    await channel.create();
    return channel;
  } catch (error) {
    return null;
  }
}

Feedback Submission

The feedback submission process is the central workflow, orchestrated by the /api/feedback/submit endpoint. When a customer submits feedback, the backend:

Validates the input (customerId and message).
Creates a Stream Chat user for the customer if they don’t exist.
Establishes or retrieves a dedicated feedback channel for the customer.
Send the customer’s message to the channel.
Follows up with an automated support-bot response.
Posts a notification to Slack with the feedback details. This flow ensures real-time communication and enables visibility for both parties.

app.post('/api/feedback/submit', async (req, res) => {
  const { customerId, message } = req.body;

  try {
    if (!customerId || !message) {
      return res.status(400).json({
        error: 'Missing required fields',
        required: ['customerId', 'message']
      });
    }


    const messageText = typeof message === 'string' ? message : String(message);
    const formattedCustomerId = customerId.startsWith('customer-')
      ? customerId
      : `customer-${customerId}`;


    // Create customer user
    const customerCreated = await createStreamUser(
      formattedCustomerId,
      `Customer ${customerId}`,
      'user'
    );


    if (!customerCreated) {
      return res.status(500).json({ error: 'Failed to create customer user' });
    }


    // Get or create channel
    const channel = await getOrCreateCustomerChannel(formattedCustomerId);
    if (!channel) {
      return res.status(500).json({ error: 'Failed to create channel' });
    }


    // Send customer message
    await channel.sendMessage({
      text: messageText,
      user_id: formattedCustomerId,
      custom: {
        type: 'customer_message',
        timestamp: new Date().toISOString()
      }
    });


    // Send bot response
    await channel.sendMessage({
      text: 'Thank you for your feedback! Our team will review and respond soon.',
      user_id: 'support-bot',
      custom: {
        type: 'bot_response',
        timestamp: new Date().toISOString()
      }
    });


    // Send to Slack
    try {
      await slack.chat.postMessage({
        channel: process.env.SLACK_CHANNEL_ID,
        text: `💬 *New Chat Message*\n*From:* ${formattedCustomerId}\n*Message:* ${messageText}`
      });
    } catch (slackError) {
      // Don't fail the request if Slack fails
    }


    res.status(200).json({
      success: true,
      message: 'Message sent successfully',
      customerId: formattedCustomerId,
      channelId: `feedback-${formattedCustomerId}`
    });


  } catch (error) {
    res.status(500).json({
      error: 'Failed to submit message',
      details: error.message
    });
  }
});

The backend provides additional endpoints to support the application:

/api/health: Checks connectivity with Stream Chat and Slack, ensuring system health.
/api/stream-token: Generates authentication tokens for Stream Chat clients.

Run the Server

The application runs on port 5000 by default. Run the server by entering this command:

node index.js

Frontend Architecture

The frontend of this application aims to deliver a responsive, real-time chat interface for users to submit feedback using Stream Chat’s React SDK. It works hand-in-hand with the backend to authenticate users, manage sessions, and display a toggleable chat widget located at the bottom right of the web page.

The App Component

Like all React applications, the App component serves as the root. It is where we initialize the Stream Chat React SDK using the StreamChat.getInstance method.

const client = StreamChat.getInstance(import.meta.env.VITE_STREAM_API_KEY);

State Initialization and User Session

The App component manages state using the useState and useEffect hooks to handle connection status, loading states, and widget visibility. A unique currentUserId is generated for each chat session with a combination of timestamp and random string, ensuring distinct user identification.
We use the connectionError, isLoading, and isWidgetOpen states to track the chat connection, initialization, and widget visibility.

// src/App.tsx

import { useState, useEffect, useCallback } from 'react';
import { useCreateChatClient, Chat } from 'stream-chat-react';
import './App.css';
import ChatWidget from './components/ChatWidget';


function App() {
  const [connectionError, setConnectionError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isWidgetOpen, setIsWidgetOpen] = useState(false);

  const [currentUserId] = useState(() => {
    const timestamp = Date.now().toString(36);
    const randomStr = Math.random().toString(36).substr(2, 5);
    return `customer-${timestamp}-${randomStr}`;
  });
}

Connecting to Stream Chat

The connection to Stream Chat is established using the useCreateChatClient hook with a token provider function. The connection process performs the following:

Defines the tokenProvider function that checks the backend health via /api/health/ endpoint.
Requests a Stream Chat token from the backend’s /api/stream-token endpoint using the generated currentUserId.
Initializes the Stream Chat client using the useCreateChatClient hook with API key, token, provider, and user data.

// src/App.tsx

const tokenProvider = useCallback(async () => {
    try {
      const apiUrl = getApiUrl();
      const healthResponse = await fetch(`${apiUrl}/api/health`);
      if (!healthResponse.ok) {
        throw new Error(`Backend health check failed: ${healthResponse.status}`);
      }


      const response = await fetch(`${apiUrl}/api/stream-token`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: JSON.stringify({ userId: currentUserId }),
      });


      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`Failed to get Stream token: ${response.status} - ${errorText}`);
      }


      const data = await response.json();

      if (!data.token) {
        throw new Error('No token received from backend');
      }


      return data.token;
    } catch (error) {
      console.error('Token provider error:', error);
      throw error;
    }
  }, [currentUserId]);


  const user = {
    id: currentUserId,
    name: `Customer ${currentUserId.split('-')[1]}`,
  };


  const client = useCreateChatClient({
    apiKey: import.meta.env.VITE_STREAM_API_KEY,
    tokenOrProvider: tokenProvider,
    userData: user,
  });


  useEffect(() => {
    if (client) {
      setIsLoading(false);
      setConnectionError(null);


      const handleConnectionError = (error: any) => {
        console.error('Stream connection error:', error);
        setConnectionError(`Connection failed: ${error.message}`);
      };


      client.on('connection.error', handleConnectionError);

      return () => {
        client.off('connection.error', handleConnectionError);
      };
    }
  }, [client]);

Rendering the User Interface

Our UI would include a toggle button that controls the visibility of the ChatWidget component, which renders the Stream Chat interface. During initialization, a loading screen displays the currentUserId and API URL. Once the user is connected to Stream Chat, the ChatWidget is conditionally rendered when isWidgetOpen is true, ensuring a clean and non-intrusive user experience.

  if (isLoading) {
    return (
      <div className="loading-container">
        <h3>Connecting to chat service...</h3>
        <p>User ID: {currentUserId}</p>
        <p>API: {getApiUrl()}</p>
      </div>
    );
  }


  return (
    <Chat client={client} theme="messaging light">
      <div className="app-container">
        <header className="app-header">
          <h1>Welcome to User Feedback Collector</h1>
          <h3 className="session-id">Your session ID: {currentUserId}</h3>
          <h3 className="connection-status">✅ Connected to chat service</h3>
        </header>


        <button
          className="chat-toggle-button"
          onClick={toggleWidget}
          data-state={isWidgetOpen ? 'open' : 'closed'}
          aria-label={isWidgetOpen ? 'Close chat widget' : 'Open chat widget'}
        ></button>


        {isWidgetOpen && (
          <div className="chat-widget-container">
            <ChatWidget customerId={currentUserId} />
          </div>
        )}
      </div>
    </Chat>
  );

The ChatWidget Component

The ChatWidget is at the centre of our front-end real-time chat interface. It serves as the user-facing component working with Stream Chat and Slack. It renders a fully interactive chat window where customers can submit feedback and receive automated responses.

Component Setup and Context

This ChatWidget component receives a customerId prop, identifying the user interacting with the chat. It leverages Stream Chat's useChatContext hook and automated channel management to handle the chat interface and message routing. The component performs the following operations:

Retrieves the Stream Chat client from the chat context using useChatContext.
Creates a channel instance using useMemo with a formatted customer ID.
Defines channel members as the customer and a support-bot for automated responses.

// src/components/ChatWidget.tsx

const ChatWidget: React.FC<ChatWidgetProps> = ({ customerId }) => {
  const { client } = useChatContext();


  const channel = useMemo(() => {
    if (!client || !customerId) return null;


    const formattedCustomerId = customerId.startsWith('customer-')
      ? customerId
      : `customer-${customerId}`;


    const channelId = `feedback-${formattedCustomerId}`;

    return client.channel('messaging', channelId, {
      members: [formattedCustomerId, 'support-bot'],
    });
  }, [client, customerId]);

Message Submission and Backend Integration

The ChatWidget overrides the default message submission behavior of Stream Chat’s MessageInput component with a custom handleMessageSubmit function.
This function:

Ensures the message the user enters is a non-empty string, preventing invalid submissions.
Constructs a payload with the formattedCustomerId and message text.
Logs API or network errors without disrupting the UI.

This integration is important as it ensures messages are processed through the backend, enabling features like Slack notifications and automated bot responses.

  const handleMessageSubmit = async (params: {
    cid: string;
    localMessage: any;
    message: any;
    sendOptions: any;
  }) => {    
    const messageText = params.message.text;


    if (!messageText || typeof messageText !== 'string' || !messageText.trim()) {
      return;
    }


    const formattedCustomerId = customerId.startsWith('customer-')
      ? customerId
      : `customer-${customerId}`;


    const payload = {
      customerId: formattedCustomerId,
      message: messageText.trim(),
    };


    try {
      const response = await fetch(`${import.meta.env.VITE_API_URL}/api/feedback/submit`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });


      if (!response.ok) {
        console.error('API Error:', response.status);
      }
    } catch (error) {
      console.error('Network error:', error);
    }
  };

Rendering User Interface and Stream Chat Components

The ChatWidget renders a fully functional chat interface using Stream Chat’s pre-built components: Channel, Window, ChannelHeader, MessageList, and MessageInput.
The MessageInput component has the handleMessageSubmit function passed to its overrideSubmitHandler prop; enabling the MessageInput component to send the user-entered message to the chat and also to the backend.

 if (!channel) {
    return (
      <div className="chat-widget chat-widget--error">
        Failed to load chat
      </div>
    );
  }


  return (
    <div className="chat-widget">
      <Channel channel={channel}>
        <Window>
          <ChannelHeader />
          <MessageList messageLimit={100} />
          <MessageInput
            overrideSubmitHandler={handleMessageSubmit}
          />
        </Window>
      </Channel>
    </div>
  );

Run the Frontend

Enter this command to run the frontend:

npm run dev

Next Steps

Having completed the implementation of the feedback system with Stream React Chat SDK and Slack, you now have a streamlined system that collects user feedback in real-time and sends it directly to your team. This system makes feedback management easy and channels it in a single hub, ensuring it reaches decision-makers quickly.

What’s next? Keep building with these recommended tutorials:

Happy coding. 🎉

The Developers' Missing Piece for Boosting Productivity

Timothy Olanrewaju — Mon, 17 Jun 2024 14:22:32 +0000

As a front-end engineer and technical writer, my work life revolves around crafting interactive, responsive and dynamic User Interfaces and writing about tech. I am always eager to learn new things and share my views about them through writing. About two weeks ago, I came across two different posts talking about Pieces while scrolling on X, my curiosity kicked in and I decided to take a look at what it was all about. Since that day, I can say that my development productivity levels have sky-rocketed 🚀.

Productivity is crucial for every developer as we want to complete tasks within a set timeframe to either beat a deadline, complete a project or have time to do some other things. Helping my fellow developers out is the reason why I decided to write this piece 😉

In this article, I will be reviewing the Pieces for Developers tool and how it can boost your output levels just like it did mine. Walk with me!

What is Pieces
Pieces is an AI-powered productivity tool built to streamline developers' workflow activities. I like to call it a Hub of streamlined workflow, seamlessly integrating essential aspects of a programmer's development process.
Before I started using Pieces, my code snippets, screenshots and general workflow activities tracking were all over the place. I used Notion, sometimes Notepad and I always leave many tabs open on my browser, so I can visit those specific webpages housing code snippets when I need them. You can imagine how long it takes to trace a particular code snippet and how hectic it is.

Awesome Pieces functionalities

One important thing to note as we dive into the incredible world of Pieces is that it is a developer-focused tool - tailored specifically to assist developers.
Pieces has many cool and useful functionalities. However, in this section, I will focus on the aspects that blow my mind and I use quite often.

Robust Snippet Management
Pieces offers a snippet management functionality that enables you to save a bunch of code snippets from both your browser and IDE to the Desktop App.

The Desktop app stores all saved snippets which can be accessed at any time and also keeps track of workflow activities.

Scenario: After saving some code snippets to Pieces, I decided to edit by adding a comment to it and later on, deleted the snippet. When you navigate to Workflow Activity, you will be able to view all actions performed on your snippets. This enables you to keep track of your snippets. Imagine, a snippet was deleted by mistake, all you need to do is to view your Workflow Activity and get an idea of what happened.

Shareable Snippet Link
One cool thing about how Pieces manages snippets is, you can generate a link that can be shared with colleagues or anyone on communication channels like GChat, Teams, Slack and emails to access your code.

To generate a shareable link on Pieces,

First, click on Generate Shareable Link icon.

Then, copy your personal link after generation.

You can now share this link with whoever you wish to.
NB: You only generate a snippet link once. The next time you want to have access to the link, it would be attached to the Context Preview of your saved snippet.

Live Context
This is a powerful and versatile copilot feature that intrigues me the most and I know you would find it interesting too. Pieces Live Context can scan across your system and be aware of what is going on. It helps you remember anything and interacts with everything. It captures all context gathered from your system, processes and stores them entirely on-device.

Scenario: I want to get my work day started and I lost track of where I stopped the previous day, that is where Live Context can come into play.
To use Live Context, you need to switch it on before you proceed to prompt the copilot.

Already, you get some Suggested Prompt options including a prompt of where we left off. Just a click and it lists the last actions you performed!

Context
You can also manually set Context for the copilot to read files, folders, websites, snippets or messages.

Scenario: I was given an assignment to revamp the web pages of a particular project so, I cloned the Github repository to my local machine. It was a huge Laravel project with many folders and I did not have a clue as to where the user view was located. Aha! I do have a tool that can help me out in that regard. Up steps Pieces.
All I need to do is to set the Context to Folders and add the folder.

Then, I proceeded to ask the copilot for the user view in the project folder. It took some time but it came back with an answer correctly pointing to the location of the file which is resources > views > user.

Synchronized Workflow
My complete Pieces suite consists of the Desktop app, Visual Studio Code extension and a Chromium Browser extension (Google Chrome). When saving snippets in my Chrome browser, they get added to your Saved Materials in the Desktop app in real time which keeps your work flowing nicely and smoothly.

On-Device Large Language Models (LLMs)
On the 4th of June, the famous ChatGPT was down and the whole world was talking about it. People who heavily relied on the Generative AI tool were left stranded, but with an LLM locally deployed in your machine, you will not have to worry about such occurrences. Pieces offer LLMs that can reside on your computer system which enables you to go about your development activities without having to be online.

Also, I love the fact that Pieces copilot is readily available on my Visual Studio Code where I do all my coding and also on my Chrome browser where I carry out my research. This makes it possible for me to carry the same copilot conversation across all these tools.

Where Pieces Can Improve
The response time of the copilot when using Live Context. When using Live Context for huge folders, the delay is understandable as it is going through a lot of files/folders. But, for more straightforward Live Context prompting, the response should be delivered much faster.
The related links attached to saved snippets ironically links some unrelated web pages.

Overall, I am impressed by the idea behind the development of this software. The Pieces team took into consideration the complexity of a programmer's development process and built a software that streamlined the workflow.

And can I also say that the team at Pieces are amazing. Always willing to answer questions and help you resolve any issues you encounter. Kudos to the Pieces Team!

Having had early access to the stable and soon-to-be-released features, I can say that Pieces is here to stay for a long time and will grow as developers seek workflow organization.

Want to try it out?
You can download Pieces for free here

If you have any questions about Pieces, leave them in the comment section.

You can also connect with me on LinkedInfor software-related posts and articles.

How to generate AI images using ChatGPT-3.5 (free)

Timothy Olanrewaju — Tue, 21 May 2024 10:32:32 +0000

With the emergence and popularity of Artificial Intelligence, various tools have sprung up making certain tasks easier to accomplish. ChatGPT is one of the most widely used tool used for various reasons from research to coding purposes.

AI now has the capability of generating images. There are tools that render AI images from a photo and also generate from a user's specified input. The downside to these AI image generative tools are they are not free or limited.

In this article, I will be showing you how to use ChatGPT-3.5 and Pollinations AI to generate AI images for free.

Pollinations Ai are a team of machine-learning specialists, artists
that are deeply engaged in the open source AI ecosystem.

I found this hack and it has been super helpful for me in generating article cover images. Saves me the stress of looking up stock-free websites for images or having to design on Canva.

Enough of the intro, let's start generating some cool images 😎

To start the process, you will need to input this prompt into ChatGPT.

INPUT = {focus}
OUTPUT = {description} \n ![IMG](https://image.pollinations.ai/prompt/{description})
{description} = {focusDetailed},%20{adjective1},%20{adjective2},%20{visualStyle1},%20{visualStyle2},%20{visualStyle3},%20{artistReference}

Next, we add our INPUT and OUTPUT - which are like parameters of what we want our image to look like. The INPUT will be the main character of your expected image.

I want my main character to be a Cat(I am a huge cat lover, they are lovely creatures). So, I put cat as my INPUT

INPUT = a cat

Our OUTPUT provides more image details. You can detail every single thing you want your image to show. There are seven available criteria you can specify but, it is not mandatory to fill all.

{focusDetailed},%20{adjective1},%20{adjective2},%20{visualStyle1},%20{visualStyle2},%20{visualStyle3},%20{artistReference}

Here are the criteria we want for our soon-to-be generated image:

The cat to be outside in the night (focusDetailed).
The cat should be orange in color (adjective1).
The cat should be happy (adjective2).
It should be raining (visualStyle1).
It should be warm (visualStyle2).
The background should have lots of flowers (visualStyle3)

NB: I ignored the artistReference aspect, you can input it if you have an artist in mind.

This is what our OUTPUT would look like

OUTPUT = a cat outside in the night, orange cat, happy cat, rainy, warm, lots of flowers

We now have all the necessary parts for our image. The whole prompt to generate the image is:

INPUT = {focus}
OUTPUT = {description} \n ![IMG](https://image.pollinations.ai/prompt/{description})
{description} = {focusDetailed},%20{adjective1},%20{adjective2},%20{visualStyle1},%20{visualStyle2},%20{visualStyle3},%20{artistReference}

INPUT = a cat
OUTPUT = a cat outside in the night, orange cat, happy cat, rainy, warm, lots of flowers

This is all we need to have a cat image generated by Pollinations AI!

Press enter and below, it would generate an image link that looks like this

![IMG](https://image.pollinations.ai/prompt/a%20cat%20outside%20in%20the%20night,%20orange%20cat,%20happy%20cat,%20rainy,%20warm,%20lots%20of%20flowers)

Having a closer look at the link, you can see all the criteria we set for the image embedded in the link.

You can follow the link or copy and paste it in your favorite browser depending on how the link appears in your ChatGPT.

Here is the image generated:

How cool is that!

Let's try another image, this time it would be two people in the image.

INPUT = {focus}

OUTPUT = {description} \n ![IMG](https://image.pollinations.ai/prompt/{description})

{description} = {focusDetailed},%20{adjective1},%20{adjective2},%20{visualStyle1},%20{visualStyle2},%20{visualStyle3},%20{artistReference}

INPUT = a photo of two men

OUTPUT = A photo of two men shaking hands, cool, calm, green color, standing on the road

Here, is our generated image of two gentle men shaking hands on the road (looks dangerous though).

Try it out and let me know if it works for you in the comments.
Follow me on LinkedIn for interesting contents and tech-related articles.

Harnessing the Potential of AbortController with FetchAPI for Optimal Performance

Timothy Olanrewaju — Sun, 31 Mar 2024 07:36:18 +0000

The Fetch API is a modern JavaScript interface for fetching resources like data or files asynchronously from the web. The Fetch API is known for its asynchronous nature which means, the fetch requests does not in any way block the execution of other code while awaiting response from the Fetch API. It simplifies the process of fetching data, handling responses and plays an important role in allowing developers to build efficient and interactive web experiences.

Prerequisites

Good knowledge of JavaScript and Fetch APIs.
Intermediate experience in React.

Consuming the Fetch API

In React applications, any activity that involves external sourcing of data is handled using the useEffect hook. The useEffect hook houses the asynchronous function of the FetchAPI. In this article, we will make use of the Open Library Search API , a simple app to retrieve book data on Open Library. We would like to narrow our search to the authors and just like most Fetch APIs, we can attach a query parameter to the endpoint to fetch specific data.

function App() {
useEffect(
    function () {
      async function FetchBooks() {
        const res = await fetch(
          `https://openlibrary.org/search/authors.json?`
        );
        const data = await res.json();
}
FetchBooks();
},[dependency array]
)
return (
    <>
      Enter Author's Name:{" "}
      <input
        type="text"/>
      <h2>Search Results</h2>
      <ol>

      </ol>
    </>
  );
}

This is the basic structure of our React App component:

useEffect Hook: Responsible for handling side effects of data fetching and will cause the App component to render when the application mounts. It also houses a dependency array which is the state and it causes the component to re-render anytime there is a change.
FetchBooks: Is our asynchronous function that awaits a response in json format from the Open Library Search API and takes in a query parameter, which will be determined by an input state.
An input type that will take in the searchTerm state and dynamically add it to the fetch request.
An ordered list that will be rendered to display results of our search query.

Handling States and Events

States are referred to as any data that will likely change in a React application. When declaring states, two parameters are specified - the state value and the state updater function, that sets the state. In our Book Search application’s case, we need two states which are:

State that will take in the search term from the input, called the searchTerm.
State that will store the search results, called the searchResults.

const [searchTerm, setSearchTerm] = useState("");
const [searchResults, setSearchResults] = useState([]);

Next, is to attach an onChange event handler to the input to take in the event and pass it as a search query to the fetch API’s query parameter. The setSearchTerm handles the updating of every key pressed as a state value.

Adding the onChange event handler to the input

<input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        value={searchTerm}
      />

Appending the searchTerm state to the fetch API endpoint query parameter

const res = await fetch(
          `https://openlibrary.org/search/authors.json?q=${searchTerm}`

Rendering the List

After a successful response has been gotten from the API and the data gotten, we want to display it in the ordered list returned by our JSX. We achieve this by mapping through the data present in the searchResults array state.

<ol>
        {searchResults.map((books) => (
          <li key={books.key}>
            {books.name}
          </li>
        ))}
</ol>

We now have all our essential pieces in place to be able make a Fetch request and display the response(data).

A look at the Browser Network Tab

When performing fetch requests, it is good practice to keep an eye on the network tab of your browser. A quick look at that shows a request for every query parameter entered. This means that for every searchTerm entered or individual key pressed, there is a request sent to the Fetch API - some may come with data and some without any data.

Food for thought

As a good front-end developer,

Do you think that it is efficient and good work to allow so many requests to get sent to the API?
Imagine a situation whereby the search term is lengthy and the user’s internet connection is very slow. In fact, you can mimic such a situation by choosing slow 3G from the Throttling dropdown options above - still in the Network tab section. You will notice how terrible of an experience that can be. However, there is a fascinating solution to this problem which is the Abort Controller!

The AbortController JavaScript Web API

This Web API represents a controller object that has the capability to abort one or more web requests. It cancels many web requests leading up to a ‘final’ web request that is allowed to fetch data from the API.
Firstly, we create a new AbortController object using the AbortController() constructor.

const controller = new AbortController();

Secondly, we make use of the signal property of the AbortController object which we call controller.

const { signal } = controller;

Thirdly, the fetch API allows us to attach options. So, we attach the signal as an option object to the fetch request.

const res = await fetch(
          `https://openlibrary.org/search/authors.json?q=${searchTerm}`,
          { signal }
        );

Finally, we return a CleanUp function which calls the abort() method of the controller.

return function () {
        controller.abort();
      };

The clean up function should be returned immediately after calling the asynchronous function.

AbortController Error Handling

The AbortController generates an AbortError message on the Console anytime an operation is being aborted. This allows you to know when an operation is aborted and is different from other forms of errors you might encounter while performing asynchronous operations.

Final full code piece

import { useEffect, useState } from "react";
import "./App.css";
function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  useEffect(
    function () {
      const controller = new AbortController();
      const { signal } = controller;
      async function FetchBooks() {
        const res = await fetch(
          `https://openlibrary.org/search/authors.json?q=${searchTerm}`,
          { signal }
        );
        const data = await res.json();
        setSearchResults(data.docs);
      }
      FetchBooks();
      return function () {
        controller.abort();
      };
    },
    [searchTerm]
  );
  return (
    <>
      Enter Author's Name:{" "}
      <input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        value={searchTerm}
      />
      <h2>Search Results</h2>
      <ol className="olStyle">
        {searchResults.map((books) => (
          <li style={{ padding: "3px" }} key={books.key}>
            {books.name}
          </li>
        ))}
      </ol>
    </>
  );
}

Final Results

Now, the abortController cancels all fetch requests leading up to the last. The act of canceling these requests has prevented the network from executing numerous fetch operations, thereby enhancing the overall efficiency of the fetch process.

NOTE: A successful fetch request largely depends on the speed of keystroke as the abortController will permit the sending of query parameter requests if the keys are being pressed a bit slower.
The idea behind the abortController is pretty cool and is highly recommended to build efficient applications.
Connect with me on LinkedIn for more useful front-end related posts.

Frontend Development 101: Essential Skills and Tools

Timothy Olanrewaju — Tue, 25 Jul 2023 19:38:32 +0000

Frontend just as the name implies, is the end or interface that the user sees in front of them and they interact with. The act of developing softwares that renders an elegant interface while also maintaining engagements with users and ensures the experience of the user is seamless. There is also the backend which is the opposite end, that supports the frontend with resources.

In the above image, a user fills the form’s input fields for registration on a webpage and submits it. The form is the frontend resource he/she interacts with. The process of manipulating, storing the data is handled in the backend part of the application which is invisible to the user but is responsible for all the logical aspects.
Frontend development mainly focuses on the functional aspects of creating user interfaces. The demand for frontend developers is on the rise as the need to have an efficient interface that users can be comfortable navigating through is crucial in the world today.

SKILLS
There are numerous skills that are needed in frontend development. So, in this section we will be taking a sneak peek into these important skills.

HTML
Known as HyperText Markup Language. This is the main structure that serves as a building block for all webpages. It can also be referred to as the skeletal backbone of frontend web development. Html elements consist of resources visible on a web page such as buttons, forms, links etc.

CSS
Known as Cascading Style Sheet. It is used to design the layout of a webpage for elegant presentation and gives the developer the ability to customize as he/she wishes. CSS gives the Html elements styles and improves the interactivity with users. Animations are also achievable with CSS.

JAVASCRIPT
Is a frontend programming language that adds dynamism to the interactivity of a web page to the users. Javascript can make Html elements behave in a way that is customizable by the developer. For example, a button can be given a particular function or behavior when a certain event is triggered which can be a click, double click etc. With Javascript embedded in a webpage, it can be refreshed dynamically while responding to users actions.
Also, Javascript is capable of handling operations that takes time to execute without blocking the other tasks from executing. This comes in handy if you want an operation to carry on and not wait for some tasks to reach completion.

FRONTEND DEVELOPMENT FRAMEWORKS
In recent times, there has been an increase of highly functional collections of pre-written codes and tools for web development that improves efficiency and increases flexibility. They also come with features such as state management, responsive design capabilities and components. Popular frontend frameworks are React, Svelte, Angular, Vue.js etc

VERSION CONTROL
This is an extremely important skill in software development as it helps developers track and manage changes to codes and files. The most used version control system is Git. It is necessary to be able to use git efficiently in today’s Tech world and it also helps in collaboration on projects.

RESPONSIVE WEB DESIGN
This is a very important part of modern web development that takes into consideration various devices and screen sizes. Websites and applications are meant to adjust dynamically to corresponding devices and screen sizes to allow users to access contents and navigate seamlessly. Optimal user experience is the goal in making a responsive web design. Zooming and struggling with elements that are unresponsive can lead to frustrating and bad user experience which doesn't bode well for the developers of the application or website. To achieve a good responsive site, developers should use the following: flexbox, media queries, flexible layouts and grids. Fixed and layouts set to arbitrary values should not be integrated to achieve a fluid and responsive layout.

BASIC DESIGN PRINCIPLES
To build maintainable and effective frontend code, it is important to follow some fundamental design principles guiding frontend development. They are:
Responsive web design:Which is about embedding adaptation to different devices and screen sizes to keep consistent user experience across different platforms.
Mobile first approach:Is also essential due to the ever increasing use of mobile devices. Hence, priority must be given to mobile devices.
Simplicity: It is good practice to keep the interface simple so as to avoid overwhelming users with needless complexities.
Consistency: keeping a consistent layout, interaction pattern and design throughout the creation of an application is good practice.
Performance optimization: To get the best performance in the frontend, it is advisable to minimize file sizes and use lazy image loading. When applied, an application or website’s frontend loads faster which improves user experience and SEO ranking.
Scalability: Is all about organizing the codebase into modules and using scalable ways, that involves using components and modules to break down complex user interfaces.
Cross-browser compatibility: Testing the frontend across different web browsers to check if it maintains a good layout across web browsers is also very important.
Performance testing: Regularly testing the frontend to check for loopholes that should be improved on helps in upscaling overall application performance. Tools like Pagespeed Insights and Lighthouse perform these tests.

TOOLS

There are various tools used in building interactive frontend and they are:
Code Editors: These play significant roles in software development as they provide an environment for writing of Html, CSS and Javascript codes. They provide other features such as syntax highlighting, code completion, code formatting, error checking and integration with version control. Most code editors allow the integration of extensions that perform specific tasks on codes. Examples of Code editors are Visual Studio Code, Sublime Text, Atoms etc.
Package Managers: Due to the use of external libraries, frameworks and dependencies employed in an application, there is a need to use tools that help manage and organize them and that is where package managers come in handy. They help ease the process of installing, updating and removing these external packages. Examples are NPM known as Node Package Manager and Yarn.
Version Control Clients: These are software tools that provide a user an interface to interact with version control systems. They make the operation of version control easier for developers and manage repositories without the use of command line interfaces. Examples of version control clients are: GitKraken, Github Desktop, SmartGit etc.
Design Collaboration Tools: These tools play a vital role as it bridges the gap between designers and developers in streamlining the entire development process. Designers create prototypes and design mockups of the frontend with developers. The interaction can be mocked up and demonstrated on how the frontend will behave.

In conclusion, frontend development is a crucial part of software development which is also constantly evolving and plays a vital role in users’ interactivity with websites and applications. In this article, we have explored some essential skills and tools that every aspiring frontend developer should be familiar with to succeed in this field.