Forem: Ayowande Oluwatosin

🛠 Fixing `Undefined property: TwilioSmsMessage::$contentVariables` in Laravel (Twilio Notifications)

Ayowande Oluwatosin — Tue, 06 Jan 2026 22:14:47 +0000

While integrating Twilio SMS notifications in a Laravel app using:

"laravel-notification-channels/twilio": "^4.1"

I ran into this error:

Undefined property: NotificationChannels\Twilio\TwilioSmsMessage::$contentVariables

Even though my notification code was perfectly valid and only used ->content(), Laravel kept throwing this exception.

This post explains why this happens, how I fixed it, and what to be careful about.

🔍 The Problem

The error occurs when some internal logic (or another package) tries to access:

$contentVariables

on TwilioSmsMessage.

However, in Twilio Notification Channel v4.1, the base class TwilioMessage does not define this property, causing PHP to throw an undefined property exception.

This is especially common if:

You upgraded/downgraded packages
You previously experimented with Twilio Content Templates
A dependency expects contentVariables to exist

✅ The Workaround That Fixed It

I fixed the issue by extending the base TwilioMessage class inside the package to explicitly define contentVariables.

📄 File edited:

vendor/laravel-notification-channels/twilio/src/TwilioMessage.php

✏️ Updated `TwilioMessage` class

<?php

namespace NotificationChannels\Twilio;

abstract class TwilioMessage
{
    /**
     * The phone number the message should be sent from.
     */
    public ?string $from = null;

    public ?string $statusCallback = null;

    public ?string $statusCallbackMethod = null;

    /**
     * Create a new message instance.
     */
    public function __construct(
        public string $content = '',
        public string $contentVariables = ''
    ) {
    }

    /**
     * Create a message object.
     */
    public static function create(string $content = ''): self
    {
        return new static($content);
    }

    /**
     * Set the message content.
     */
    public function content(string $content): self
    {
        $this->content = $content;

        return $this;
    }

    /**
     * Set content variables (prevents undefined property errors).
     */
    public function contentVariables(string $content): self
    {
        $this->content = $content;

        return $this;
    }

    /**
     * Set the phone number the message should be sent from.
     */
    public function from(string $from): self
    {
        $this->from = $from;

        return $this;
    }

    public function getFrom(): ?string
    {
        return $this->from;
    }

    public function statusCallback(string $statusCallback): self
    {
        $this->statusCallback = $statusCallback;

        return $this;
    }

    public function statusCallbackMethod(string $statusCallbackMethod): self
    {
        $this->statusCallbackMethod = $statusCallbackMethod;

        return $this;
    }
}

After this change, the error disappeared completely.

⚠️ Important Warning

Editing vendor files is NOT recommended for production.

Why?

Composer updates will overwrite the change
Other environments won’t have the fix
It hides the real compatibility issue

✅ Better Long-Term Alternatives

If you hit this issue, consider:

Ensuring all Twilio-related packages are on compatible versions
Avoiding contentVariables when sending SMS
Using Twilio REST API directly if you need Content Templates (WhatsApp)
Forking the package and maintaining your fix properly
Opening a GitHub issue / PR on the package repo

🏁 Final Thoughts

If you’re working with:

Laravel Notifications
Twilio SMS
laravel-notification-channels/twilio

…and hit unexplained property errors, check the base message classes first.

Hope this saves someone hours of debugging 👋
Happy coding 🚀

Real-Time Communication with WebSockets in Node.js: Testing with Postman

Ayowande Oluwatosin — Mon, 24 Feb 2025 23:28:52 +0000

Introduction

WebSockets enable real-time, bidirectional communication between a client and a server. Unlike traditional HTTP requests, WebSockets maintain an open connection, allowing instant data exchange. In this article, we'll explore how to set up WebSockets in a Node.js application, integrate them with a blogging system, and test using Postman.

Setting Up WebSockets in Node.js

To integrate WebSockets, we will use Socket.io, a popular WebSocket library for Node.js. Our implementation includes a centralized socket.js file for managing WebSocket connections.

Install Dependencies

Ensure you have Socket.io installed:

npm install socket.io

WebSocket Initialization (socket.js)

We'll create a socket.js file to manage WebSocket connections:

let io;

module.exports = {
    init: httpServer => {
        io = require('socket.io')(httpServer);
        return io;
    },
    getIo: () => {
        if (!io) {
            throw new Error("Socket.io not initialized");
        }
        return io;
    }
};

This module exports two functions:

init: Initializes WebSocket on the HTTP server.
getIo: Retrieves the active WebSocket instance.

Integrating WebSockets in app.js

Modify your app.js to initialize WebSockets:

const express = require('express');
const http = require('http');
const { init } = require('./socket');

const app = express();
const server = http.createServer(app);
const io = init(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    socket.on('message', (data) => {
        console.log('Received message:', data);
        socket.emit('response', { message: `Message received: ${data}` });
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(4000, () => {
    console.log('Server running on port 4000');
});

Implementing WebSockets in a Blog Post System

Let's create a blog post system where new posts trigger real-time notifications via WebSockets.

Blog Post Controller (controllers/postController.js)

const { getIo } = require('../socket');
const { User } = require('../models');

exports.createPost = async (req, res) => {
    try {
        const user = await User.findByPk(req.userId);
        const { title, content } = req.body;
        const image = req.file;

        if (!image) {
            throw new Error('Image file is required!');
        }

        const imageUrl = image.path;
        const post = await user.createPost({ title, content, imageUrl });

        getIo().emit('posts', { action: 'createdPost', post });

        return res.status(201).json({ message: 'Post created successfully!', post });
    } catch (error) {
        return res.status(500).json({ message: error.message || 'Something went wrong.' });
    }
};

Testing WebSockets with Postman

Postman now supports WebSocket testing. Follow these steps:

Step 1: Open a WebSocket Connection

Open Postman.
Click "New" → "WebSocket Request".
Enter WebSocket URL: ws://localhost:4000.
Click Connect.

Step 2: Send a Message

Go to the Messages tab.
Send a test JSON message:

{
   "type": "chat",
   "message": "Hello WebSocket!"
}

Click Send.

Step 3: Listen for Incoming Messages

If the WebSocket server is set up correctly, you should receive a response:

{
   "message": "Message received: Hello WebSocket!"
}

Step 4: Testing Blog Post Notifications

Create a blog post via a REST API request (e.g., POST /api/posts).

If successful, Postman (connected to WebSockets) should receive an event:

{
   "action": "createdPost",
   "post": { "title": "New Post", "content": "This is a new post" }
}

This confirms that real-time notifications work correctly.

Conclusion

By integrating WebSockets into a Node.js blog system, we enable real-time updates when new posts are created. Testing WebSockets with Postman ensures everything works as expected.

Real-Time Notifications with Server-Sent Events (SSE) in Laravel and Vue.js

Ayowande Oluwatosin — Mon, 09 Dec 2024 13:36:47 +0000

Server-Sent Events (SSE) is a great solution for enabling real-time notifications or updates in your application. Unlike WebSockets, SSE allows for one-way communication from the server to the client, making it lightweight and easy to implement. In this tutorial, we'll walk through how to set up SSE in a Laravel backend and consume the events in a Vue.js frontend.

Overview

We’ll be creating a simple real-time notification system using SSE. The server (Laravel) will push notifications to the client (Vue.js) whenever there are new notifications for the authenticated user. Here's a breakdown of what we'll cover:

Backend (Laravel): Set up an SSE endpoint to stream notifications.
Frontend (Vue.js): Set up an EventSource to listen for incoming notifications.

Step 1: Backend (Laravel)

1.1 Create an SSE Route in Laravel

In your routes/api.php, create an endpoint for the SSE stream. This will allow your Vue.js frontend to establish an SSE connection and listen for notifications.
use App\Http\Controllers\NotificationController;

Route::get('/notifications', [NotificationController::class, 'get']);

1.2 Controller Method for Streaming Notifications

Next, in the NotificationController, implement the logic to fetch unread notifications from the database and stream them to the client via SSE.

namespace App\Http\Controllers;

use App\Models\Notification;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class NotificationController extends Controller
{
    public function get(Request $request)
    {
        $headers = [
            "Content-Type" => "text/event-stream",
            "Cache-Control" => "no-cache",
            "Connection" => "keep-alive",
            "X-Accel-Buffering" => "no",
        ];

        return response()->stream(function () {
            while (true) {
                // Fetch the unread notifications for the authenticated user
                $notifications = Notification::where('clicked', 0)
                                             ->where('user_id', 2)  // For now, hardcoding the user ID, you can replace it with Auth::id() for dynamic user handling
                                             ->get();

                // If there are notifications, send them to the frontend
                if ($notifications->isNotEmpty()) {
                    // Format notifications as JSON and send them via SSE
                    echo "data: " . json_encode($notifications) . "\n\n";
                }

                // Flush the output buffer
                ob_flush();
                flush();

                // Sleep for a few seconds before checking again
                sleep(5);
            }
        }, 200, $headers);
    }
}

Explanation:

Streaming Response: The response()->stream() method is used to send an infinite stream of events.
Notifications: We are querying the Notification model for unread notifications (clicked = 0) for a specific user. The notifications are encoded as JSON and sent to the client.
Headers: The headers are set for SSE (Content-Type: text/event-stream).
Infinite Loop: The while (true) loop keeps the connection open and continuously sends new notifications every 5 seconds (adjustable by modifying sleep(5)).

Step 2: Frontend (Vue.js)

Now, let's set up the Vue.js frontend to listen for these notifications using the EventSource API.

2.1. Set Up Vue Component to Listen for SSE Events

Create a Vue component that will listen for the incoming events from the SSE stream.

<template>
  <div>
    <h3>Unread Notifications</h3>
    <ul v-if="notifications.length">
      <li v-for="notification in notifications" :key="notification.id">
        {{ notification.message }}
      </li>
    </ul>
    <p v-else>No new notifications</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: [], // Store notifications
    };
  },
  mounted() {
    // Initialize EventSource to listen to the /api/notifications endpoint
    const eventSource = new EventSource('/api/notifications');

    // Handle incoming events from SSE
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data); // Parse JSON data from the server
      this.notifications = data;  // Update notifications list
    };

    // Handle errors
    eventSource.onerror = (error) => {
      console.error("EventSource failed:", error);
      eventSource.close(); // Close the connection if there's an error
    };
  },
  beforeDestroy() {
    // Close the SSE connection when the component is destroyed
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
};
</script>

Explanation:

EventSource: We create an EventSource instance that listens to the /api/notifications endpoint. This establishes a persistent connection to the server. onmessage: This event listener processes incoming messages. The data is parsed from JSON and added to the notifications array. onerror: If an error occurs (e.g., if the SSE connection is lost), we log the error and close the connection.
beforeDestroy: To prevent memory leaks, the SSE connection is closed when the component is destroyed.

Conclusion

In this tutorial, we’ve set up real-time notifications using Server-Sent Events (SSE) in a Laravel backend and a Vue.js frontend. SSE provides a simple and efficient way to push real-time updates to the client, making it an excellent choice for features like notifications. With minimal setup, you can enhance your application with live, real-time capabilities.

Search Algorithms

Ayowande Oluwatosin — Thu, 18 Jul 2024 09:24:15 +0000

Understanding Binary Search in PHP

Binary search is a more efficient algorithm for finding an element in a sorted array. It works by repeatedly dividing the search interval in half. Here's a detailed breakdown of your binarySearch function:


function binarySearch(array $arr, float|int $x)
{
    $low = 0;
    $high = count($arr)-1;
    // $midIndex = (int) ($low + ($high - $low)/2);
    $i = 0;
    while($low <= $high){
        $i++;
        $midIndex = (int) ($low + (($high - $low)/2)); //the same as  intdiv($low + $high, 2);

        if($arr[$midIndex] == $x){
            return "The number {$x} was found in index {$midIndex} of the array. The number of iteration was {$i}";
        }elseif($x > $arr[$midIndex]){
            $low = $midIndex +1;
            echo $low."\n";
        }else{
            $high = $midIndex - 1;
        }
    }

return "The number {$x} was not found in the array";


}

echo binarySearch([1,2,3,4,5,6,7,8,9,10,44,45,46,47,48,49,50], 45)

The function binarySearch accepts two parameters:

$arr: A sorted array of integers.
$x: The number to be searched, which can be a float or an integer.
$low is initialized to the first index of the array.
$high is initialized to the last index of the array.
$i is a counter to keep track of the number of iterations.
The while loop runs as long as the search interval is valid ($low is less than or equal to $high).
$midIndex is calculated as the middle index of the current interval.
If the middle element is equal to $x, the function returns the index and the number of iterations.
If $x is greater than the middle element, adjust $low to midIndex + 1 (narrow the search to the upper half).
If $x is less than the middle element, adjust $high to midIndex - 1 (narrow the search to the lower half).

Understanding Linear Search in PHP

Linear search is one of the simplest searching algorithms used to find a particular element in an array. Let's break down the linearSearch function in PHP.

function linearSearch(array $arr, float|int $x)
{
    for($i=0; $i < count($arr); $i++){
        if($x === $arr[$i]){
            return "The number {$x} was found in index {$i} of the array\n";
        }
    }

    return "The number {$x} was not found in the array\n";
}

echo linearSearch([1,5,6,3,4,11,3,2], 4);

The function linearSearch accepts two parameters:

$arr: An array of integers.
$x: The number to be searched, which can be a float or an integer.
The for loop iterates over each element of the array. The count($arr) function returns the number of elements in the array.
Inside the loop, the code checks if the current element ($arr[$i]) is equal to $x. If a match is found, it returns a message indicating the index at which the number was found.
If the loop completes without finding the number, the function returns a message indicating that the number was not found in the array.
Linear search is straightforward and easy to implement. It sequentially checks each element of the array until the desired element is found or the end of the array is reached. This approach is simple but can be inefficient for large arrays, as it has a time complexity of O(n).

CoderByte Question

Ayowande Oluwatosin — Thu, 11 Jul 2024 07:28:56 +0000

......the question was something like this.......

Question: write a function that takes a string argument. The numerals used are I for 1, V for 5, X for 10, I for 50, C for 100, D for 500, M for 1000. Given IIIXXXVVVV is 200. Should return CC.

Solution:


function rommanToIntAndBack($s){
    $numerals = [
        'M' => 1000,'D' => 500,'C' => 100, 'L' => 50, 'X' => 10, 'V' => 5,'I' => 1, 
    ];

    $total = 0;

    for ($i = 0; $i < strlen($s); $i++) {
        $total += $numerals[$s[$i]];
    }

    $roman = '';
    foreach($numerals as $key => $val){
        while ($total >= $val) {
            $total -= $val;
            $roman .= $key;
        }
    }
    return $roman;
}
rommanToIntAndBack('IIIXXXVVVV')

Explanation:

Associative Array (HashMap):

The $numerals array is an associative array that maps Roman numeral characters to their corresponding integer values.
This array provides constant time complexity 𝑂(1) for lookups, which is efficient for converting characters to their integer values.

Algorithm Analysis

Part 1: Roman to Integer Conversion

Algorithm:

Initialize $total to 0.
Iterate through each character in the string $s:
Look up the integer value of the character from the $numerals array.
add the current value to $total.

Time Complexity:
The conversion from Roman to integer involves a single pass through the string, so the time complexity is O(n), where n is the length of the string.

Space Complexity:
The space complexity is O(1) as no additional space proportional to the input size is used (only a few variables are used).

Part 2: Integer to Roman Conversion

Algorithm:

Initialize an empty string $roman.
Iterate through the $numerals array:
For each numeral, while the integer value can be subtracted from $total, subtract it and append the numeral character to $roman.

Time Complexity:
The conversion from integer to Roman numerals involves iterating through a fixed set of numeral values and repeatedly subtracting them from $total.
In the worst case, the time complexity can be considered O(n), where
n is the value of the integer. However, given the fixed number of Roman numeral symbols, it is more practical to consider it as O(1).

Space Complexity:
The space complexity is O(1) for the numerical operations and O(n) for the output string, where n is the length of the resulting Roman numeral string.

Efficient PHP Script for Calculating Scores in a Baseball Game (code practice recuiter)

Ayowande Oluwatosin — Tue, 20 Feb 2024 17:04:43 +0000

Have you ever wondered how to efficiently calculate scores in a baseball game using PHP? Look no further! In this post, we'll delve into a well-optimized PHP script that effectively processes a sequence of baseball game operations and delivers accurate results.

<?php
$ops = ["5", "-2", "4", "C", "D", "9", "+", "+"];
$results = [];

foreach ($ops as $op) {

    if (is_numeric($op)) {
        // If the current operation is a number, add it to the results array
        $results[] = $op;
    } elseif ($op == "+") {
        // If the current operation is '+', calculate the sum of the last two scores and add the result to the array
        $score = end($results) + $results[count($results) - 2];
        $results[] = $score;
    } elseif ($op == "D") {
        // If the current operation is 'D', double the last score and add the result to the array
        $score = end($results) * 2;
        $results[] = $score;
    } elseif ($op == "C") {
        // If the current operation is 'C', remove the last score from the array
        array_pop($results);
    }
}

// Calculate the sum of all scores in the results array and echo the result
echo array_sum($results);
?>

Operations Array: $ops = ["5", "-2", "4", "C", "D", "9", "+", "+"]; - Defines an array of operations (numbers, '+', 'D', 'C').

Results Array: $results = []; - Initializes an empty array to store the scores.

Main Loop: foreach ($ops as $op) { ... } - Iterates through each operation in the $ops array.

Handling Numeric Values: if (is_numeric($op)) { ... } - If the current operation is a number, add it to the $results array.

Handling '+' Operation: elseif ($op == "+") { ... } - If the current operation is '+', calculate the sum of the last two scores and add the result to the $results array.

Handling 'D' Operation: elseif ($op == "D") { ... } - If the current operation is 'D', double the last score and add the result to the $results array.

Handling 'C' Operation: elseif ($op == "C") { ... } - If the current operation is 'C', remove the last score from the $results array.

Calculate and Echo Sum: echo array_sum($results); - Calculates the sum of all scores in the $results array and echoes the result.

Efficient PHP Function for Counting Valid Time Formats with '?' Placeholder (Turing code challenge)

Ayowande Oluwatosin — Tue, 20 Feb 2024 16:59:19 +0000

Are you in need of a versatile PHP function to count the number of valid time formats with a '?' placeholder? Look no further! In this post, we'll explore a well-optimized PHP function, countValidTimeFormats, that efficiently generates and validates time formats.

<?php
function countValidTimeFormats($s) {
    $count = 0;
    $splited  = explode(':', $s);
    $range = stripos($splited[0], '?') !== false ? range(0, 24) : range(0,59);
    foreach($range as $num){

      $formattedTime = stripos($splited[0], '?') !== false ? 
              str_replace('?', $num, $splited[0]).':'.$splited[1] : 
              $splited[0] .':'.str_replace('?', $num, $splited[1]);
        // Validate the formatted time
        if (isValidTime($formattedTime)) {
            $count++;
        }
    }

    return $count;
}

function isValidTime($time) {
    $pattern = '/^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])$/';
    return preg_match($pattern, $time);
}

// Example usage
echo countValidTimeFormats("?4:00"); // Output: 2
echo countValidTimeFormats("20:1?"); // Output: 10
?>

countValidTimeFormats Function:
Input Splitting: $splited = explode(':', $s); - Splits the input string into an array using the colon (':') as the delimiter. This separates the hours and minutes.
Determine Range: $range = stripos($splited[0], '?') !== false ? range(0, 24) : range(0, 59); - Determines the range of values based on the presence of '?' in the hour component. If '?' exists, the range is set from 0 to 24 (hours); otherwise, it is set from 0 to 59 (minutes).
Generate and Validate Formats: The foreach loop iterates through the specified range. It generates a formatted time string by replacing the '?' with the current value in either the hour or minute component based on the determined range. The formatted time is then validated using the isValidTime function.
Count Valid Formats: If the generated time format is valid, $count++ increments the count.
Return Count: The function returns the final count of valid time formats.
isValidTime Function:
Time Format Validation: $pattern = '/^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])$/'; - Defines a regular expression pattern for validating the 24-hour time format (hh:mm).

Validation Check: return preg_match($pattern, $time); - Uses preg_match to check if the provided time string matches the specified pattern.

In summary

The code efficiently generates and validates time formats based on the presence of '?' in the input string. It handles both hour and minute placeholders, ensuring adherence to the 24-hour time format. The provided example usage demonstrates how the function can be applied to count valid time formats for different input strings.

Simplify Large Numbers with Style: A Guide to Human-Readable Representations in JavaScript

Ayowande Oluwatosin — Fri, 02 Feb 2024 10:40:17 +0000

Introduction
In the world of finance, dealing with large numbers is a common occurrence. Imagine handling numbers representing amounts in the billions or trillions; it's essential to present these figures in a user-friendly and readable format. This blog post will delve into a JavaScript function that converts large numbers into a more compact and human-readable form.

The Challenge
Consider a situation where you have a value, say 1,360,000,000,000, and you want to convert it into a more manageable format like 1.36T. The challenge is not just about adding commas but about intelligently choosing the appropriate unit (K, M, B, T) based on the magnitude of the number.

reduceAmount(value){
    const shortsymbols = {
        4: 'T',
        3: 'B',
        2: 'M'
    }

    let number  = value.toString().split('.')[0];
    let commaCount = Math.floor((number.length-1)/3);

    if(commaCount > 1){
        let symbol = shortsymbols[commaCount];
        let dotPlacement = number.length % 3;

        if(dotPlacement === 0) dotPlacement = 3; 


        if(Number(number.substr(dotPlacement+1)) > 0) symbol += '+';


        number = number.substr(0, dotPlacement) + '.' + number.substr(dotPlacement)

        // Rounds to tenths place
        number = Math.floor(Number(number) * 10) / 10

        number += symbol
    } else {
        number = this.addCommas(number);
    }

    console.log(number);
    return number;
},

addCommas(x){
  x = (Math.round(x * 100)/ 100).toFixed(2);
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }

Explanation
Short Symbols: The function starts with a dictionary shortsymbols mapping the length of the number to a symbol (e.g., 'B' for billion).

Number Formatting: The function takes a numeric value, converts it to a string, and splits it at the decimal point, considering only the whole part.

Comma Counting: It calculates the number of commas required by dividing the length of the number (minus one) by three.

Handling Large Numbers: If the number is in the millions or above, it applies a shorthand symbol and intelligently decides whether to add a plus sign based on the remaining part after the dot.

Dot Placement: It calculates the placement of the dot and ensures that there's no need for a dot if the dot placement is 3.

Rounding: It rounds the number to the tenths place.

Result: The final result is a compact, rounded, and symbol-appended representation of the original number.

Conclusion
This function goes beyond merely formatting numbers; it intelligently chooses the appropriate unit and presents large figures in a concise, user-friendly manner. Whether you're dealing with financial data or any domain with large numerical values, this function provides a valuable tool for better data representation.

Creating a Countdown Timer with Vue.js

Ayowande Oluwatosin — Sat, 27 Jan 2024 10:46:56 +0000

Service Level Agreements (SLAs) often come with strict timelines, and having a visual representation of the time remaining can be crucial. In this post, we'll explore how to implement a countdown timer in Vue.js to display the remaining time for SLAs.

Step 1: Set Up Your Vue Component

<template>
  <div>
    <span v-if="sla.expired" style="color: red;">{{ `SLA Expired` }}</span>
    <span v-else style="color: rgb(80, 180, 80)">{{ `${displayTime}` }}</span>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    sla: Object,
    created_at: String,
  },
  data() {
    return {
      intervalId: null,
      displayTime: '',
    };
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    startCountdown() {
      const initialDate = moment(this.created_at).add(this.sla.time, 'hours');

      this.intervalId = setInterval(() => {
        const countdownDuration = initialDate.diff(moment());
        let secondsRemaining = moment.duration(countdownDuration).asSeconds();

        const hours = Math.floor(secondsRemaining / 3600);
        const minutes = Math.floor((secondsRemaining % 3600) / 60);
        const seconds = Math.floor(secondsRemaining % 60);

        this.displayTime = `${hours > 0 ? hours + 'h ' : ''}${minutes}m ${seconds}s`;

        if (secondsRemaining <= 0) {
          clearInterval(this.intervalId);
          this.$set(this.sla, 'expired', true);
        }

        secondsRemaining--;
      }, 1000);
    },
  },
};
</script>

<style scoped>
</style>

We use the mounted lifecycle hook to initiate the countdown when the component is mounted.
The beforeDestroy hook ensures that the interval is cleared to prevent memory leaks when the component is destroyed.
The startCountdown method calculates the remaining time and updates the displayTime variable accordingly.
The countdown is displayed dynamically, and when it reaches zero, the SLA is marked as expired.

Step 2: Use the Countdown Timer Component

<template>
  <ul>
    <li v-for="(sla, j) in liquidasset.slas" :key="sla.id">
      <CountdownTimer :sla="sla" :created_at="liquidasset.created_at" />
    </li>
  </ul>
</template>

<script>
import CountdownTimer from '@/components/CountdownTimer.vue'; // Update the path based on your project structure

export default {
  components: {
    CountdownTimer,
  },
  data() {
    return {
      liquidasset: {
        created_at: '2024-01-27T12:00:00', // Example date
        slas: [...], // Your SLAs array
      },
    };
  },
};
</script>

Conclusion
Implementing a countdown timer in Vue.js can enhance the user experience, especially in scenarios where time is of the essence. By breaking down the logic into a reusable component, you can easily integrate countdown timers into various parts of your application.

Feel free to customize the code further based on your specific requirements and styling preferences. Happy coding!

Efficient Data Generation in Laravel: Leveraging JSON Files && Laravel Factory for Your Database

Ayowande Oluwatosin — Sun, 06 Aug 2023 11:16:00 +0000

Hello! Generating dummy or fake data for testing purposes is a common need in software development, and Laravel provides several ways to achieve this. Let's explore some of the methods commonly used in Laravel to generate test data:

Using a JSON file to store dummy data, you can follow these steps:
Create a folder named "data" inside the "database" folder of your Laravel project.

Inside the "data" folder, create a file named "category.json" and add the following JSON data to it:

[
    {
        "id": 1,
        "name": "Electronics"
    },
    {
        "id": 2,
        "name": "Clothing"
    },
    {
        "id": 3,
        "name": "Books"
    }
]

This JSON data represents a list of categories with their respective IDs and names.

Next, you can read the JSON data from the file and use it in your Laravel application. For example, you can use the DatabaseSeeder.php

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        //get the data
        $data = File::get('database/data/category.json');
        //convert to array, of the asscociative kind
        $categories= collect(json_decode($data, true));
        $categories->each(function($category){
            DB::table('category')->insert([
                'category_name'=>$category['name'],
                'category_id'=>$category['id']
            ]);
        });
    }
}

Using faker Laravel comes with the Faker library by default, which allows you to create fake data like names, addresses, emails, and more.

create a factory for a post modal

php artisan make:factory PostFactory

In the PostFactory

class PostFactory extends Factory
{
 public function definition(): array
    {
        $title = fake()->unique()->sentence();
        $slug = Str::slug($title);
        return [
            'title'=>$title,
            'slug'=>$slug,
            'description'=>fake()->paragraph(9, true),
            'category'=>Category::inRandomOrder()->value('category_id'),
        ];
    }
}

Now, in the DatabaseSeeder.php,

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        //create 20 rows in the table
        Post::factory()->count(20)->create();
    }
}

Now, what if we want a relationship to build as well for the post. For instance, where an author has many posts, and we want a fake data for that as well??

Asynchronous Loading in Vue

Ayowande Oluwatosin — Fri, 16 Jun 2023 20:12:30 +0000

Recently, I came across a performance issue on a Vue webpage where the loading time was excessively long. Upon thorough investigation, it became evident that several functions were being loaded simultaneously in the mounted lifecycle hook. While these functions were necessary for the page, it was not essential for all of them to be called simultaneously. This simultaneous loading was causing a slowdown in the page's performance.

To address this issue, one approach is to load specific functions asynchronously. By leveraging the power of async/await, along with Promise and setTimeout, we can achieve asynchronous loading and execution of the required functions within the mounted lifecycle hook of our Vue component. This ensures that the functions are loaded and executed in a non-blocking manner, enhancing the overall performance of the page.

For example,

mounted() {
  this.synchronousFunction();
  this.loadAsyncFunctions();
},

methods: {
  async loadAsyncFunctions() {
    await this.delay(1000); // Delay for 1 second
    await this.asyncFunction();
    await this.delay(2000); // Delay for 2 seconds
  },

  async delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  },

  synchronousFunction() {
    console.log('This function is called synchronously');
  },

  async asyncFunction() {
    console.log('This function is called asynchronously');
  },
}

In the code snippet above, we have a mounted lifecycle hook in a Vue component. Inside the mounted hook, we call a synchronous function synchronousFunction() and an asynchronous function loadAsyncFunctions().

The loadAsyncFunctions() method utilizes the async/await syntax to load and execute functions asynchronously. It uses the delay() function, which returns a promise that resolves after a specified delay (in milliseconds). By awaiting the delay() function, we can introduce delays between the execution of different async functions.
The delay method is a utility function that returns a promise which resolves after the specified delay using setTimeout.

The synchronousFunction() is a regular synchronous function that is called immediately.

The asyncFunction() is an example of an asynchronous function that is also called within the loadAsyncFunctions() method. It showcases the asynchronous nature of the function.
Each async function is invoked using await, which ensures that the subsequent function is only called after the previous one has completed.

By using this approach, the synchronous function is called immediately, while the asynchronous functions are executed with delays, allowing for smoother performance and better user experience.

Write custom Javascript to customize tinymce. increase and decrease font size.

Ayowande Oluwatosin — Tue, 14 Mar 2023 14:05:51 +0000

Introduction

TinyMCE is a popular open-source WYSIWYG (what you see is what you get) HTML editor. It is designed to be used within web content management systems, online forums, and other web-based applications. It is available as a JavaScript library that can be integrated with other web technologies. It provides basic text editing features such as bold, italic, underline, font size, font color, and headings, as well as some advanced features such as tables, image insertion, and media embedding.

Add editing features to tinymce

TinyMCE can be extended with a variety of plugins that add additional editing features. Some popular plugins include a spellchecker, a visual table editor, a code editor, and a link checker. These plugins can be added to TinyMCE through the TinyMCE Plugin Manager. Additional plugins can also be added by downloading them from the TinyMCE website.

In addition to plugins, TinyMCE can also be customized by writing custom JavaScript code. This allows developers to add additional editing features to the editor, such as custom buttons and dialogs. Custom code can also be used to modify existing features, such as changing the way the editor behaves when a user changes the font or the size of an image.

Write custom Javascript code to customize tinymce

To write custom JavaScript code to customize TinyMCE, you first need to create a new JavaScript file and include it in your HTML page. Then, you can use TinyMCE’s API to make changes to the editor.

For example, you can add a custom button to the editor toolbar using the following code:

tinymce.init({
  selector: 'textarea',
  toolbar: 'increaseFont decreaseFont',
  editor.addButton('increaseFont', {
      // icon: element,
        text: 'A+',
        onclick:function(){                         
            var currentFontSize = editor.getContent({ format: 'html' }).match(/font-size: (\d+\w+)/);
            if (currentFontSize) {
                var currentSize = parseInt(currentFontSize[1].replace(/[^\d]/, ''));
                if(currentSize === 36){
                    return false;
                }
            var newFontSize = parseInt(currentFontSize[1].replace(/[^\d]/, '')) + 2;
            var newFontSizeUnit = currentFontSize[1].replace(/\d+/, '');
            editor.execCommand('fontSize', false, newFontSize + newFontSizeUnit);

            }else if(currentFontSize ===null){
                editor.execCommand('fontSize', false, 14 + 'pt');

            }
        }
    });
    editor.addButton('decreaseFont', {
        // icon: '',
        text: 'A-',
        onclick:function(){                         
            var currentFontSize = editor.getContent({ format: 'html' }).match(/font-size: (\d+\w+)/);
            if (currentFontSize) {
                var currentSize = parseInt(currentFontSize[1].replace(/[^\d]/, ''));
                if(currentSize === 8){
                    return false;
                }
            var newFontSize = parseInt(currentFontSize[1].replace(/[^\d]/, '')) - 2;
            var newFontSizeUnit = currentFontSize[1].replace(/\d+/, '');
            editor.execCommand('fontSize', false, newFontSize + newFontSizeUnit);

            }else if(currentFontSize ===null){
                editor.execCommand('fontSize', false, 10 + 'pt');

            }
        }
    })

});

This code adds two new button to the TinyMCE editor toolbar with the text “A+ and A-”. When the A+ button is clicked, the code inside the onclick function will be executed which increases the font on the selected text. Aso, When the A- button is clicked, the code inside the onclick function will be executed which decreases the font on the selected text. You can add more buttons to the editor by adding more addButton() calls to the setup function.

Forem: Ayowande Oluwatosin

🛠 Fixing `Undefined property: TwilioSmsMessage::$contentVariables` in Laravel (Twilio Notifications)

🔍 The Problem

✅ The Workaround That Fixed It

✏️ Updated TwilioMessage class

⚠️ Important Warning

✅ Better Long-Term Alternatives

🏁 Final Thoughts

Real-Time Communication with WebSockets in Node.js: Testing with Postman

Introduction

Implementing WebSockets in a Blog Post System

Testing WebSockets with Postman

Conclusion

Real-Time Notifications with Server-Sent Events (SSE) in Laravel and Vue.js

Overview

Step 1: Backend (Laravel)

Step 2: Frontend (Vue.js)

Conclusion

Search Algorithms

Understanding Binary Search in PHP

Understanding Linear Search in PHP

CoderByte Question

Explanation:

Algorithm Analysis

Efficient PHP Script for Calculating Scores in a Baseball Game (code practice recuiter)

Efficient PHP Function for Counting Valid Time Formats with '?' Placeholder (Turing code challenge)

In summary

Simplify Large Numbers with Style: A Guide to Human-Readable Representations in JavaScript

Creating a Countdown Timer with Vue.js

Efficient Data Generation in Laravel: Leveraging JSON Files && Laravel Factory for Your Database

Asynchronous Loading in Vue

Write custom Javascript to customize tinymce. increase and decrease font size.

Introduction

Add editing features to tinymce

Write custom Javascript code to customize tinymce

✏️ Updated `TwilioMessage` class