DEV Community: kamasuPaul

WSO2 Key Manager types

kamasuPaul — Thu, 11 May 2023 09:41:17 +0000

This is a list of key manager types that can be used as identity providers in the the wso2 api manager. Am listing them here incase anyone is looking for them.

AuthO
Azure AD
Wso2 Identity Server
Forgerock
KeyCloak
PingFederate
Okta

Nginx cheatcheat. List of mostly commonly used nginx commands

kamasuPaul — Fri, 21 Oct 2022 10:20:53 +0000

Nginx is known for its use as a web server and a reverse proxy.
It has several commands that can be useful when deploying new sites.

I have written the most commonly used nginx commands list sucthat i or any other person can easily look them up whenever needed.

1. Install nginx command:

sudo apt update sudo apt install nginx

2. Check if nginx is running:

systemctl status nginx

3. Check for syntax errors in nginx files:

nginx -t

4. Restart nginx:

sudo systemctl restart nginx

5. Create a symlink from sites-available to sites-enabled

sudo ln -s /etc/nginx/sites-available/**your_domain** /etc/nginx/sites-enabled/

6. Start Nginx :

sudo systemctl stop nginx

7. Stop nginx :

sudo systemctl start nginx

"Connecting to emulator" taking long in android studio solution

kamasuPaul — Tue, 27 Sep 2022 04:20:01 +0000

You have probably installed a new version of android studio, and then all of a sudden the emulator is not opening . It keeps displaying the message

Connecting to emulator.
and this is probably taking longer than usual.

I faced this same issue after installing anew version of android studio. I tried the following solutions from stack overflow

Creating a new emulator
Cold booting the emulator
Wiping the emulator data

All these solutions did not work.

The solution.

So how did i solve this problem of emulator taking long and most importantly how can you solve it as well.

The emulator is taking long to connect mostly probably because your android emulator sdk is out of date.
So the solution to uninstall it or update.
To do this, head over to android studio

From the toolbar of android studio open Tools
Then select Sdk manager from the dropdown menu
The android sdk section should appear.
Under the 'Android sdk' section, select SDK tools tab.
Under the SDK tools tab look for the android emulator
Uncheck the box appearing besides the android emulator and click apply button to unistall the emulator
After uninstalling, it should now display as not installed. check the box again to install the emulator again. After installation it should appear as installed. Close android studio and open it again

And now when you click run the emulator should open as expected.
Hopefully this solves your problem as it solved mine.

How to add default sort to q-table in quasar framework

kamasuPaul — Thu, 08 Sep 2022 12:00:57 +0000

Hi, my name is kamasu paul. Today am going to share with you about the default sort of q-table in the quasar framework.

The problem

Of recent, I found out I needed to have the quasar table sorted using a specific column on my table. My goal was to sort the table
and have the most recent items appear on top. Looking at the documentation I couldn't easily figure out how to achieve it.

The Solution.

After several searches, it turns out
The solution is to use the pagination attribute and add it to the table using v-model:pagination="pagination"

<q-table 
row-key="id" 
:rows="transactionsList" 
:columns="columns"
v-model:pagination="pagination"
>

And then in the pagination object, you specify the sortBy attribute

  data() {
    return {
      //... 
      pagination: {
        rowsPerPage: 25,
        sortBy: 'updated_at',
        descending: true,
      }
      //... other properties
    }
  },

For my case, the column is named updated_at and it keeps a javascript date timestamp.
To use a custom sort function add the sort function to the column you want to sort in the columns array, for my case updated_at

const columns = [
  {
    name: "updated_at", label: "Date Updated",
    field: "updated_at", sortable: true,
    sort: (a, b) => a - b
  },
  // ... other columns
];

For my case it's an inline function sort: (a, b) => a - b that compares two timestamps from two rows to sort them.

That's all. Hope it helps

How to solve: Too many redirects website error after adding SSL(lets encrypt) to nginx server?

kamasuPaul — Sat, 27 Aug 2022 09:56:27 +0000

So after adding lets encrypt on my server using certbot, i was asked if all HTTP traffic should be redirected to HTTPS. I gladly said yes and i was happy about my decision. Unfortunately When i checked the website again, it wasn't working, displaying a too many redirects error. What had i done wrong? and What's the solution?

Turns out the solution is to change the SSL/TSL to full(strict) in the cloudflare dashboard and that did the trick. Also if no ssl is setup on the server, its can only work if the SSL/TLS mode is set to flexible.
That's it. Hope it helped

How to connect to a web socket server 🔥 in Javascript using laravel echo

kamasuPaul — Thu, 09 Dec 2021 07:28:17 +0000

Web sockets?

Web sockets help a client application to receive events from a server application without asking the server for new information every few seconds, rather the server sends the client new information whenever it happens.

How do web sockets worker.

In simple terms, the following sequence of events happens,

The server creates a channel, which can either be public, private or a presence channel. Public channels can be connected to by anyone, private and presence channels require authentication to connect but presence channels allow channel members to see other members of the channel.
After a channel has been created, a client application wishing to receive events, connects to that channel using the channel name. The client can be any application, android, ios or web app that can implement the ws protocol.
The client application then listens to a particular event from a connected channel, using the event name.
Then whenever a server has new information to publish, it publishes an event with a particular name over a specified channel.
In turn the client application will receive this information without having to query the server for that information.

How do i connect to a web-socket server?

In order to receive events from a particular server, client applications usually connects to a third party server , which publishes messages on behalf of the original server. All the original server application has to do is to create channels on the third party server, the just publish event messages to that server, which frees the original server from the budden of dealing with web socket connections from clients.

Two of the most common third party servers for dealing with websockets are pusher and ably. All demostrations in this guide will use ably, but its the same thing for pusher and other custom websocket implementations.

So the client application connects to a channel on the ably or pusher websocket server, and the listens to events.

How to connect to ably from a javascript application. Vannilla js, Vue js or React Js

Connections to websocket servers is usually done using the ws protocol implemented by most browsers, but it would be in my opinion somehow complex to do a websocket implementation from scratch using the protcol. An approach i like to use is to "Donot reinvent the wheel" by using a websockets library.

Which library ?

The Laravel echo js library is a good option for most applications. So i will show sample code of how to connect to both public and private channels in a javascript application using the laravel echo library.

How to use laravel echo library?

For laravel echo to work, you will need to use the pusher-js library. There for you will have to install both echo and pusher js. Here are the steps for setting up the echo library to use web sockets.

Step 1: Initiate a js application. The js app can be vanilla, vue or react. Here i will destrate using vue.js.
Step 2: Install the laravel-echo and pusher-js libraries.
- install pusher-js and laravel echo
```
    npm install pusher-js
    npm install laravel-echo
```
Step 3: Create an instance of laravel echo. In your entry js file ie main.js, create an instance of echo an attach it to the window.
Import laravel echo

import Echo from 'laravel-echo';
Import pusher-js and attach it to the window.

window.Pusher = require('pusher-js');

Create an instance of laravel echo and attach it to the window.

window.Echo = new Echo({
broadcaster: 'pusher',
key: "Kp8mUw.DDCTHQ",//app public key: format='APP_KEY.APP_ID'
wsHost: 'realtime-pusher.ably.io',
wsPort: 443,
disableStats: true,
encrypted: true,`
})

Meaning of params:

broadcaster: the broadcaster is the protocol used to broadcast the messages which is pusher in this case.
key: for websockets as service servers such as ably, you will need to provide the public key of the app from which you will receive events. the format of the key is APP_KEY:APP_ID, both are available in the ably dashboard.
wsHost: the ip address or hostname of the web sockets server.
wsPort: the port on which to connect to the web socket server.

For public channels, the above code is enough to initiate a connection to a web socket server. However for private channels, the original application server will need to provide some form of authentication to those channels. Therefore when intiating laravel echo, you need to provide an authEndpoint or an authorizer function incase of a custom authentication setup.

Sample of laravel echo intialization code for private channels.

const baseUrl = 'http://localhost:8000/api';
const token = "Bearer eyJ0eXAiOiJ..."; // app bearer login token for apis 
const apiKey = "application key"; // api key,for apis that require api keys

window.Echo = new Echo({
broadcaster: 'pusher',
key: "Kp8mUw.DDCTHQ",//app public key: format='APP_KEY.APP_ID'
wsHost: 'realtime-pusher.ably.io',
wsPort: 443,
disableStats: true,
encrypted: true,
// authEndpoint: `${baseUrl}/broadcasting/auth`,
authorizer: (channel) => {
    return {
        authorize: (socketId, callback) => {
            axios.post(`${baseUrl}/broadcasting/auth`, {
                socket_id: socketId,
                channel_name: channel.name
            },
            {
                headers: {
                'Authorization': token,
                'key': apiKey, 
                }
            }
            )
            .then(response => {
                callback(false, response.data);
            })
            .catch(error => {
                callback(true, error);
            });
        }
    };
},

The authEndpoint on the application server needs to return authenticated or unauthenticated depending on wether the user is authorized or not.

Step 4: Connect to a channel. After initiating a web socket connection, the client application has connect to a specific channel.
- public channel: Using echo, here is how you connect to a public channel.
```
window.Echo.channel('status-updated')
```
  Here status-updated is the name of the channel,
- Private channel: To connect a private channel, use private instead of channel.
```
window.Echo.private(`bulk-upload-channel.${this.batch.id}`) 
```
  The ${this.batch.id}represents avariable part of the channel name.
Step 5: Listen to events. Using laravel echo, both public and private use the same method to listen to events. the listen method.
```
.listen('.updated', (e) => {
    console.log("event received")
    console.log(e)
})
```
updated is the name of the event, but it should be writen as .updated. Note the dot . infront of the word updated , it is required when using custom channel names.

So to to connect to a channel and to listen to events, here is the full snippet.
```
window.Echo.channel('status-updated')
.listen('.updated', (e) => {
    console.log("event received")
    console.log(e)
})
```
The e param, contains all information and data about the event.

Note :
Though i have only tested it with a vue js app, i believe the above steps, should work for all javascript implementations.

Also, i have only tested using a laravel powered server that uses ably , but the same should work even for pusher or the community pusher replacement.

Github repository. All the code can be found in the github repository here. Web sockets client demo repository

Alternatives 🔥😊 to the abandoned tymondesigns / jwt-auth 😠 laravel auth package

kamasuPaul — Tue, 30 Nov 2021 16:25:58 +0000

So the most popular and most widely used jwt-auth package appears to be abandoned by the owner.
Despite several issues, and pull requests by the community, the maintainer appears to be silent. The most common issue, described here makes the library unsuable with php 8.

Due to inactivity by the maintainer, this has forced laravel developers that use php 8, to look for alternatives.
Here is a list of alternatives to the tymondesigns/jwt-auth package, that i have managed to find, in my quest to find alternative packages.

PHP-Open-Source-Saver / jwt-auth . This package has 52 github stars , at the time of writing and has its documented at readthedocks
rcerljenko / laravel-jwt Another alternative that also rose out of the same need is this package by Ricardo Čerljenko . It has 26 github starsand appears to be less documented that the php-open source saver package.

PS: I will keep adding more great packages as i find them

Free tailwind templates for your next project

kamasuPaul — Sun, 24 Oct 2021 06:08:21 +0000

Problem: Cant find tailwind templates

In-case your looking to start a new front-end project using tailwind css , a popular utility first CSS framework, but looking for a starter template. Here is a list of starter templates i have discovered.

Why this list

So every time i am starting a new project, i prefer to use tailwind but most of the times, there is no good template that i can use to get started pretty fast.
I therefore decided to compile a list of free tailwind templates out there than can enable you and I get started quickly.
Ps: This is not a complete list, i will keep adding new items as i discover them. if you know of good templates please comment with its github link