Forem: Chidiebere Chukwudi

'php artisan optimize:clear' might not always work

Chidiebere Chukwudi — Tue, 08 Apr 2025 01:33:20 +0000

php artisan optimze:clear might look like it cleared everything...hol' up...For example, if you run into route issues where you are sure that you are using right the route but getting an error, you are better off running php artisan route:clear than the one shot php artisan optimize:clear.

Conclusion, most times or for a serious debugging in your laravel application, clearing the specific cached resources can tremedously be of help.

Hope this helps.

BuilderStreak: How Streak timeline Works

Chidiebere Chukwudi — Sat, 07 Dec 2024 09:31:12 +0000

How It Works

Your streak on builderstreak.com has a start date and an end date. For example, when you commit to a 7-day streak, we track your progress starting from the start date (e.g., December 7, 2024) and ending on the end date (e.g., December 14, 2024). That's your window to build, share, and inspire.

We follow along using the #buildInPublic hashtag to keep an eye on your trail of progress (your tweets). Once your streak ends, we stop monitoring your updates. But don't worry—the footprints you've left behind are yours to revisit and celebrate!

Cheers.

Why my test-webhook-auto-syncer idea won't work

Chidiebere Chukwudi — Fri, 20 Sep 2024 19:09:48 +0000

Automating Stripe test Webhook Setup with ngrok

Wait,...before you continue reading, I feel the idea is cool and like every modern problem, there could be possible solutions around them but yeah, I didn't budget that time. BECAUSE I THOUGHT IT WOULD BE A QUICK ONE. haha.

Let's go....

Problem statement

As someone who has been working with Stripe API heavily, there's this repetitive task I intended to automate which is setting up test webhook URLs generated by ngrok every time I start my codebase. Github repo

The 'tedious' flow:

run ngrok http 8000
copy the generated https URL
login to Stripe dashboard
create/edit a Stripe webhook
add Stripe events to listen to

Automated version:

signup and login to webhookautosyncer dot com then press one ultimate button (deploy stripe webhook)

In a more detailed way:
Auto deploy test webhooks to Stripe dashboard for Stripe payments.
🐥 No need to manually add test webhook endpoints (e.g. the ones generated with ngrok) in Stripe dashboard every time you restart your application.
🐥 Just start your app locally, a secured endpoint is automatically generated for you and it is automatically set in your Stripe dashboard.
🐥 It should just work in one click.

What should work, I mean, theoritically:

Once you have ngrok running in the background:
The script makes a GET request to http://localhost:4040/api/tunnels/command_line
Extracts the https URL:

$ngrokUrl = $response['public_url'];

Using Stripe webhook API, the webhook will be automatically deployed to users' Stripe dashboard.

$stripe = new StripeClient("sk_test_YOUR_STRIPE_TEST_KEY");
$result = $stripe->webhookEndpoints->create([
    'enabled_events' => ['charge.succeeded', 'charge.failed'],
    'url' =>  $ngrokUrl . "/api/v1/webhook/settle-customer",
]);

Well,... them challenges:

You can't remotely access people's CLI esp from the browser: If this was possible, that's a big security flaw so the principalities of software architecture and custodians of the internet made this impossible --which is a good thing tbh.

I could get the ngrok https URL via a localhost but I am unable to do that because, again, I can't make a GET request to localhost from a remote server.

Lastly, I could write a Node.js CLI tool that, when users install it (globally), this script sends me (my remote server) the ngrok https URL, which I will use to automatically setup a Stripe webhook. Also, I will need to authorize users with an API key kinda. That's like a couple of overheads that I did not budget time for.

Solutions (but, I will leave you to try 🤭 ):

Local App Setup:
- Build it as an application one can setup on their own PC.
Distribute the solution as a package.
Build it as a Laravel package

Conclusion:

I had fun digging the ngrok API docs and doing research, trying possible approaches but yeah,...here we are. It was a good one.

Can I have a word?
If you feel you can crack this thing, maybe using another approach, that's super cool. Do let us know!

I have a recent announcement you want to check out.
Check me out on GitHub. I got some open source projects going on there: https://github.com/jovialcore.
Cheers to hacking stuff. ⚒️ 🥂

Integrating Netlify Frontend with External Backend Using Custom DNS Configuration.

Chidiebere Chukwudi — Fri, 23 Aug 2024 23:12:30 +0000

Hi there 👋, I put this piece together because this was me trying to host a frontend project on Netlify then host the backend on a different platform while using a primary domain for the FE (frontendapp.com) and a subdomain for backend API (backend.frontendapp.com)--Remember I said that backend is hosted on another platform too!

Please read on...😄

When you deploy an app on Netlify, Netlify generates a custom URL that you can use, e.g., gibberish-gibberish.netlify.com... Netlify also allows you to attach a 'real' domain to this custom domain so your frontend app is exposed to a primary domain.

For your attached primary domain to work properly, you will have to point to Netlify DNS in the custom nameservers section of the primary domain account, in my case, Namecheap.

Now, if I do this (point my DNS to Netlify), my subdomain (backend domain) will be affected. I mean, it will not work because my backend is hosted on another hosting platform.

So we have a problem: FE (frontend) URL works but backend doesn't work because using Netlify DNS as a nameserver for my primary domain will also affect the subdomain too.

You want to ask: why not host the backend on Netlify? Netlify only hosts static files and on top of that, my backend is PHP/Laravel. I hope we are getting somewhere 👀? Walk with me.

So how did I tackle this issue? It's simple. I switched to using the basic DNS config for my primary domain.

Let me explain in detail....

Configuring DNS For The Frontend

So in my DNS record settings via the advanced section, I added an ALIAS Record and set the host to @ then pointed the record to Netlify's load balancer which is apex-loadbalancer.netlify.com
Netlify's doc reference

One more thing,
After the domain system for the configuration was properly propagated, I got this error:

Site Not Found. This in itself is good news. You know why? It means that the domain configuration works but it happened that I still had an old Netlify DNS setup. So the solution will be to delete the former DNS entries from my Netlify account so the external DNS configuration can work.

Configuring DNS Record for Backend

For our backend which is a subdomain for the API deployment on another hosting platform, I created some DNS records for that too.
I set the Record type to A record then set host as subdomain name (e.g., backend) let it point to the platform's IP address.

With the following, I was good.

Summary

Now I have my FE hosted on Netlify with some perks like auto deployment, GitHub PR preview URLs, etc., which uses the primary domain (e.g., frontendapp.com) while I conveniently have my API on another platform that uses a subdomain (backend.frontendapp.com). All managed with the DNS configurations mentioned above.

Thanks for reading through. If you do have any questions, do let me know.

Between, I have an open source app I am maintaining with my friends, whatcompanystack.com. Where we are trying to see how we can contribute our quota to the African tech startup ecosystem. whatcompanystack.com lists African startups and their tech stacks. You can use this to get insight into what tech stacks some startups use, etc. It is opensource. You should take a look.

Using Bootstrap 5 with NUXT 3

Chidiebere Chukwudi — Wed, 10 Apr 2024 11:03:57 +0000

Nuxt js is an amazing addition to the vuejs ecosystem in a couple of ways. One of them is it's usefulness in handling SEO related issues while giving you the privilege of creating a full-stack web application in regular vue with robust server side rendering support.

In this tutorial, we are going to be looking at a straight forward demonstration of how to use boostrap 5 with nuxt.

Create a Nuxt App

npx nuxi@latest init <project-name>

Install Bootstrap and other dependencies

As of the time of writing this article, latest version of bootstrap is bootstrap 5.3.3

npm i bootstrap@5.3.3 

npm i sass -D

npm i sass-loader -D

Setting up

In your newly created nuxt app, at the file root, create a plugins folder. We are creating the plugins folder because we are going to be installing boostrap 5 as a nuxt plugin.

Next, inside the plugins folder, create a useBootstrap.client.ts and register the boostrap as a nuxt plugin:

import bootstrap from 'bootstrap';

export default defineNuxtPlugin(nuxtApp => {
  return {
    provide: {
      bootstrap: bootstrap
    }
  }
})

After that, we create a assets folder. This folder is where bundlers like vite look at to bundle assets. In this folder, create a main.scss file then import bootstrap's scss.

// main.scss
@import 'bootstrap/scss/bootstrap';

Finally, to include bootstrap styling in all of your pages, we will be referencing its path and Nuxt will include it to all the pages of your application.

Open nuxt.config.ts that is located at the root folder and add the following:

// https://nuxt.com/docs/api/configuration/nuxt-config 

export default defineNuxtConfig({
  devtools: { enabled: true },

  css: ['~/assets/main.scss']
})

Testing

To see bootstrap styling in action, lets create a typical button element and apply bootstrap class. Edit your app.vue :

<template>
  <div>
//app.vue

<h1> Using  boostrap 5 with Nuxt  </h1>
<button class="btn btn-primary"> share  </button>
  </div>
</template>

Result:

Thanks for reading. Let me know if you have any feedback or comment in the comment section.

Find me on X(Formerly Twitter ) : jovial_core

Linkedin: Chidiebere Chukwudi

Cover image credits: Photo by Marina M:

Media uploads to Azure blob storage: the REST API Way in Laravel/PHP.

Chidiebere Chukwudi — Sat, 23 Mar 2024 14:37:21 +0000

Hi there, I hope you're doing well. Firstly, this tutorial is somewhat Laravel-specific, but I assure you that you can apply the approach outlined here with vanilla PHP or any PHP framework you prefer.

Microsoft retired the PHP Azure Storage SDK, which means there will be no maintenance. So, if this is a concern for you, you may want to consider trying the REST API approach.

In this article, we are going to quickly highlight how you can upload images, videos or any media file to Azure using Azure Blob Storage REST API.

For sheer simplicity of a simple tutorial, let's just have a php method to put our logic and send a request to azure.

Like every normal PaaS out there, we will need some basic credentials to authorize access to the azure blob upload service.

Login in to your azure portal to get these credentials and also create a container then replace the placeholders in the following code with your credentials.

Typically, you want to protect these credentials by fetching them from your .env file. It's ideal not to hardcode your credentials.


public function uploadToAzureCloud($request)
    {
     $storageAccountName = config('services.azure_storage.account_name');
     $containerName = config('services.azure_storage.container');
    $accessKey = config('services.azure_storage.key');
}

For the following code, we want to ensure that the request has a file. Then, we obtain the original filename, create a hashed variant for the filename that we are going to use as our blob name, and also obtain the file size.


// the previous code

if ($request->hasFile('file')) {

 $file = $request->file('file');
 $orignalFileName = $file->getClientOriginalName();
 $mimeType = $file->getMimeType();
 $blobName =  $file->hashName();

$fileSize = filesize($file->path());


//the upcoming code
}

Constructing an Azure Blob Signature

Next up is constructing an azure blob signature.

A Shared Access Signature (SAS) is a security token that provides restricted access to certain resources in cloud-based storage services, such as Azure Blob storage or Azure File storage. SAS enables secure and controlled access to these resources without exposing the account's access keys or credentials.

A SaS token or signature is a string that azure demands that lets us make upload media files. The following code, generates SaS token.


$dateTime = gmdate('D, d M Y H:i:s \G\M\T');
 $urlResource = "/$storageAccountName/$containerName/{$blobName}";

$headerResource = "x-ms-blob-cache-control:max-age=3600\nx-ms-blob-type:BlockBlob\nx-ms-date:$dateTime\nx-ms-version:2019-12-12";

// Generate signature
$arraysign = [];                     // initiate an empty array (don't remove this 🙂)
$arraysign[] = 'PUT';               /*HTTP Verb*/
$arraysign[] = '';                  /*Content-Encoding*/
$arraysign[] = '';                  /*Content-Language*/
$arraysign[] = $fileSize;           /*Content-Length (include value when zero)*/
$arraysign[] = '';                  /*Content-MD5*/
$arraysign[] = $mimeType;         /*Content-Type*/
$arraysign[] = '';                  /*Date*/
$arraysign[] = '';                  /*If-Modified-Since */
$arraysign[] = '';                  /*If-Match*/
$arraysign[] = '';                  /*If-None-Match*/
$arraysign[] = '';                  /*If-Unmodified-Since*/
$arraysign[] = '';                  /*Range*/
$arraysign[] = $headerResource;     /*CanonicalizedHeaders*/
$arraysign[] = $urlResource;        /*CanonicalizedResource*/


// converts the array to a string as required by MS 
$str2sign = implode("\n", $arraysign);


$sig = base64_encode(hash_hmac('sha256', utf8_encode($str2sign), base64_decode($accessKey), true));

Your major focus should be on the $sig variable that holds the final outcome of the sas token construct. Take note of the content-Type comment: you can adjust this field with your desired content type.Now with the SaS token signature covered, we can now make our REST API call.

Uploading media file

We are making use of guzzle for the API request.

The $url variable we will be making the request to is in this format:

"https://<AzureStorageName>.blob.core.windows.net/<containerName>/<blobName>";

The HTTP verb to use is "PUT" followed by a header construct to pass certain header values like Authorization, etc.


// the previous code

$url = "https://$storageAccountName.blob.core.windows.net/$containerName/{$blobName}";


// use GuzzleHttp\Client;

$client = new Client();

$response = $client->request('PUT', $url, [
'headers' => [
   'Authorization' => $authHeader,
   'x-ms-blob-cache-control' => 'max-age=3600',
   'x-ms-blob-type' => 'BlockBlob',
   'x-ms-date' => $dateTime,
   'x-ms-version' => '2019-12-12',
   'Content-Type' => $mimeType,
   'Content-Length' => $fileSize
    ],
     'body' => fopen($file->path(), 'r'),
    ]);

//the next code up coming

Of course, we assigned a body to the put request. The body contains the actual file that we are trying to upload to azure.

Generating a url for our uploaded image.

If our upload is successful, Azure Blob Storage API sends a 200 response status code. If we confirm that our request is successful, we need to generate a media url to use in displaying images on the frontend.

To make sure we get a proper url that should work, we will generate a sas token from azure dashboard. This sas token is what will we use as our $mediaUrlSasToken . Follow the steps mentioned in this Azure guide to generate one

An example of interface to generate a Sas Token

Once we have the the token, replace the token with the placeholder assigned to $urlSasToken

if ($response->getStatusCode() == 201) 
{
  // image sas token 
$urlSasToken = 'generated_sas_token';
 return response()->json(
   [
      'original_name' => $originalFIleName,
      'media_url' => "$url?$urlSasToken",
    ]
        );

    } else {
          return response() -> json (['message' => 'Something went wrong']);
       }

Result

A successful request (201 status code) will look like this:

The full composite of the $mediaUrl is as follows:

"https://<AzureStorageName>.blob.core.windows.net/<containerName>/<blobName>?<urlSasToken>";

Complete Code:


public function uploadToAzureCloud($request)
  {
     try { 
    $storageAccountName = config('services.azure_storage.account_name');
     $containerName = config('services.azure_storage.container');
    $accessKey = config('services.azure_storage.key');

    if ($request->hasFile('file')) {

     $file = $request->file('file');

     $orignalFileName = $file->getClientOriginalName();

     $mimeType = $file->getMimeType();

     $blobName =  'folder/'. $file->hashName();

     $fileSize = filesize($file->path());

     $dateTime = gmdate('D, d M Y H:i:s \G\M\T');

     $urlResource = "/$storageAccountName/$containerName/{$blobName}";

    $headerResource = "x-ms-blob-cache-control:max-age=3600\nx-ms-blob-type:BlockBlob\nx-ms-date:$dateTime\nx-ms-version:2019-12-12";

                // Generate signature
$arraysign = [];  // initiate an empty array (don't remove this 🙂)
$arraysign[] = 'PUT';               /*HTTP Verb*/
$arraysign[] = '';                  /*Content-Encoding*/
$arraysign[] = '';                  /*Content-Language*/
$arraysign[] = $fileSize;           /*Content-Length (include value when zero)*/
$arraysign[] = '';                  /*Content-MD5*/
$arraysign[] = $mimeType;         /*Content-Type*/
$arraysign[] = '';                  /*Date*/
$arraysign[] = '';                  /*If-Modified-Since */
$arraysign[] = '';                  /*If-Match*/
$arraysign[] = '';                  /*If-None-Match*/
$arraysign[] = '';                  /*If-Unmodified-Since*/
$arraysign[] = '';                  /*Range*/
$arraysign[] = $headerResource;     /*CanonicalizedHeaders*/
$arraysign[] = $urlResource;        /*CanonicalizedResource*/


  // converts the array to a string as required by MS 
    $str2sign = implode("\n", $arraysign);
    $sig = base64_encode(hash_hmac('sha256', utf8_encode($str2sign), base64_decode($accessKey), true));

$url = "https://$storageAccountName.blob.core.windows.net/$containerName/{$blobName}";


           // use GuzzleHttp\Client;

     $client = new Client();
$response = $client->request('PUT', $url, [
   'headers' => [
    'Authorization' => "SharedKey $storageAccountName:$sig",
    'x-ms-blob-cache-control' => 'max-age=3600',
    'x-ms-blob-type' => 'BlockBlob',
    'x-ms-date' => $dateTime,
    'x-ms-version' => '2019-12-12',
    'Content-Type' => $mimeType,
    'Content-Length' => $fileSize
    ],
       'body' => fopen($file->path(), 'r'),
     ]);          
  if ($response->getStatusCode() == 201) {
         // image sas token 
  $urlSasToken = config('services.azure_storage.sas_token');
    return
        [
          'original_name' =>   $orignalFileName,
          'media_url' => "$url?$urlSasToken",
         ];
        } else {
  return response()->json(['message' => 'Something went wrong']);
           }
       }
  } catch (RequestException $e) {
       // If there's an error, log the error message
    $errorMessage = $e->getMessage();
 return response()->json(['error' => $errorMessage], 500);
        }
    }

Final Thoughts:

This is a REST API approach to uploading media and generating a media url to display the uploaded resource. You can organised your code properly into separate methods or have some blocks like .env configurations in a separate class or however you want.

Thanks for reading, I hope you do find this resource useful.

Find me on X(Formerly Twitter ) : jovial_core

Also, you can checkout what-company-stack 1.0 , an open source project we released earlier this year.

If you don't mind, there is a sponsorship button on my github profile 😊

Cover Photo by Sanat Anghan

Prepare for Google Summer Of Code 2025: Tips and Takes

Chidiebere Chukwudi — Sat, 06 Jan 2024 13:16:06 +0000

What is Google Summer of Code?

Google Summer of Code (GSoC) is a paid remote open-source program that provides individuals with the opportunity to contribute to open-source projects. On a 12+ week timeline, GSoC Contributors work with an open source organization on a programming project under the guidance of mentors. Participants receive a stipend during the course of the program.

Google Summer of Code initially started off as a type that only considered students or university undergraduates in 2005, not until 2022 when Google announced that it is going to open the program to contributors new to open-source software development and not just to students anymore.

Who is Eligible?

If you are someone who is starting out in tech, familiar with any programming language and want to gain more experience while being supervised by mentors; or you are the type with some experience but a beginner in the open source field and want the opportunity of contributing to a large project while gaining experience on real-world software development projects that will be used by thousands or millions of people? Then you are not far from home; you are welcome to participate.

You are eligible if you have not been accepted into Google Summer of Code more than twice. 👀
Must be at least 18 years old at the time of registration.
You must not reside in a country that is not currently embargoed by the United States.
You must be eligble to work in the country for which you reside in.

For more information on GSoC Contributor eligibility, click here

Aim And Objective Of Google Summer Of Code

According to the Google Open Source team, the aim of the program is to give people the opportunity to come on board open source organizations, especially bringing new contributors into open source communities that are centered around mentorship and collaboration.

The hope is that these GSoC Contributors will become passionate about the communities they are part of during the program and continue to actively contribute to these communities or even start their own open-source projects even after the GSoC program ends.

A favorite quote from Drupal:

”Let them come for the code and stay for the community” 😁

Now let’s get to the interesting part…

Choosing an Organization and Application Process

You have the choice to pick any organizations you want to contribute to.

You may choose an organization on the basis that the organization belongs to a niche that appeals to you, say it’s security, databases, etc, or you might choose an organization because you are familiar with one or more technologies they use, such as looking at organizations with JavaScript, PHP, or GO projects, etc. However, it does not mean that you must know all the technologies listed on an organization’s page.

Choosing an organization is very important as it decides the technologies you will be using, the project, and the people you will be working with. To add to what I mentioned earlier, you can form your decisions around the following:

What are your professional interests or areas of focus?
What open-source software have you used and for the love of the software, you want to contribute your own quota.

Once GSoC organizers announces organisations that will be participating in the 2024 cohort, you can simply filter the organizations you want based on the categories that interest you or use the search field to search organizations base on a programming language/framework of your choice.

If you are settled with an organization of your choice, the next thing you want to do is join the community platform the organization specifies. This can be a Discord server, Slack workspaces, Zulip, etc. So you want to identify with them upon joining like announcing your arrival or something like that 😅. You will be using this platform to communicate with other applicants and mentors or organization management.

Get Yourself Ready Ahead of Time

Now, this is very important…,
While you wait for organizations to be officially announced, you want to get yourself familiar with the organization’s community, pick up first issues on their respective GitHub repos and start working on them, create your first pull request starting with good first issues then you move on.

This proactive approach will give you an edge, increase your visibility and can earn you some points when you reference them in your proposal application.

Organization Announcement

Organization announced! What should you do next?

Each organization announced usually provides project ideas and detailed information about each project idea. Some organizations can have these project details in a document, GitHub readme, etc.

Project ideas come with some important details like difficulty level (medium, hard, etc),
Medium-size projects have an approximate duration of 175hrs while Large Size Project duration is about 350hrs.
One or more mentors will be assigned to each project idea. Project Ideas look like this:

Reference
The project ideas are specific tasks your organization is expecting you to do, most of which are code-related, and some may involve design.

Proposals:

Next thing you want to do is start working on your proposal for a selected project idea.
You will be writing a proposal per project idea that you select.

Generally, organizations allow you to select more than one project idea to work on but that is left for you to decide. You can also decide to apply to more than one organization (at most three) to spread your chances however, proposal preparation for multiple organizations require some extra commitment.

What are proposals: a proposal in GSoC context is a detailed explanation of what your selected project idea is all about. This includes detailed information on how you plan to execute that project idea, milestones and deliverables, plus, maybe, brief information about you and why you should be selected. Proposal formats differ with organizations but the information you will include in your proposals could follow this structure:

Project idea title and Profile details.
Project Idea description (In your own words. Showcasing how best you understand the project idea).
Your solution and approach.
Deliverables (sub-features/sub-tasks).
Timeline: This is the speculated timeline for each deliverable for the GSoC period which is by default 12 weeks except your request for a deadline extension with the permission of your mentor.
Your motivation: Understand “your motivation” more like “why you should be selected?”. Here you want to briefly highlight some of your other experiences in coding or design. If you have a portfolio, a blog or just anything at all, you can highlight them. You also want to mention why you choose that organization and how you want to be part of that community even after the program ends –borrow that tip from me 😉.

If you are selected, what do you do?

First of all, congrats 🎉. (Believe it !!! 🔥🤗 ) Post it on your WhatsApp statuses. Share it on LinkedIn and of course, X (formerly Twitter)!!! 🥂 🎊 😂

Selected participants are usually announced around May or so. However, going forward, you should have an understanding of what to expect. It is worth noting that you will need to pay attention to your emails as that will be the major means of communication between Google Summer of Code organizers and you. Through these emails, you will be guided properly on each next step you are to take.

There are about 3 weeks of community bonding before coding starts properly.
During this period, you get to meet with other selected participants. Your meeting dates will be communicated to you and any other organizations’ specific information. See the GSoC 2024 timeline for more information on dates and timelines.

Payment, Stipend?

Payment is made through Payoneer–The last time I checked though. I don’t know if the means of payment or platform might change this time. Just make sure you check your emails for guidance when you are selected. The Google open-source team will send you proper details on how to go about payment.

Stipend is based on the country you currently live in and depends on the duration of your project.

For example, for a 175hr duration project idea, usually, the payment is typically divided into two phases: $650 (45%) after the first evaluation and then $850 (55%) after the final evaluation. This payment structure spans across 3 months making it $1500 in total for a 175hr project. For more Info about payment, see full stipend breakdown

Certification

Will I be given a certificate?

After the program has ended, usually around September or so, you will be given a certificate of completion and a verification letter from the Google open-source team.

Post GSOC

Are there chances of getting hired after the program?

The answer is YES and NO. It depends on your organization’s decision and sometimes there are situations like that.

Conclusion

Key take-away here is that you should acquaint yourself early enough with any organization you intend to apply to. Start contributing to their codebase or simply familiarize yourself with the organization's projects. Work on your proposal and get along with their community.

Always keep an eye on Google Summer Of Code Official Website.

Before you go, here is a recent GSoC 2022 Introductory video you can watch to wet your appetite 😉.

Cheers to joining an open-source community of smart people, working on a great project and making some cash along the way. Congratulations in advance !

You can reachout to me on X (formerly twitter):
jovial_core
Also, you can checkout what-company-stack 1.0 , an open source project we just released.

Traits in php--bible perspective

Chidiebere Chukwudi — Wed, 06 Sep 2023 07:39:24 +0000

What are traits in php ?

Traits solves the problem where php classes can't inhrerit behaviours or use properties, methods, etc from other classes except the parent class it extends to.

Traits in php makes a class have access to methods, properties in othe classes.
Let's use the bible story to elaborate this: We are not native isrealites so by default we as gentile class can't have any inheritance with the jews. But traits (Jesus Christ ) has come to bridge this gap. Take for example :

The child class, isrealites extends (inherits) from the parent class, God

class isrealites extends God {
}

Gentile class (actually, Gentile Nation) wants to have access to the abrahamic promises but can't. Then Jesus Christ came in for us --Traits !

So create a trait class:

trait JesusChrist {

public function salvationPromise() {
echo "the promise is unto you and to your children, children";
}

public function prosperityPromise() {
echo "I will above all things that thou mayeth prosper even as thy soul prospereth ";
}

public function freedomFromSin() {
echo "If the son shall make you free, you shall be free indeed";
  }
}

For gentiles to use this trait as well inherit all the promises, we provide a "Jesus Trait" for them.

// ....
class Gentiles {
    use JesusChrist;
}

$gentile  = new Gentiles();

//pick one promise 
echo $gentile-> freedomFromSin();

A full code will look like this:


trait JesusChrist {

public function salvationPromise() {
echo "the promise is unto you and to your children, children";
}

public function prosperityPromise() {
echo "I will above all things that thou mayeth prosper even as thy soul prospereth ";
}

public function freedomFromSin() {
echo "If the son shall make you free, you shall be free indeed";
  }
}

class Gentiles {
    use JesusChrist;
}


$gentile  = new Gentiles();

//pick one promise 
echo $gentile-> freedomFromSin();

Traits are used to access methods and properties that extend the capabilities of a class.

More resources to learn from PHP DOC

Unlock the power of list: Practical usecase of list() in php.

Chidiebere Chukwudi — Sun, 06 Aug 2023 14:00:00 +0000

Hi 👋, yet another practical usecase of the "native php function array", list(). In this tutorial lets see an example for a likely everyday usecase for you. 👀 Let's go:

Wait 🙋! List() is not an array function but a language construct More like reserved keywords that have specific meaning and are used to define the structure and behaviour of code. Reason why I had the quotes in my intro. lol

Enough. Lets get to business, shall we ?! 🤗

So what is a List() ?
List() is used to assign values to a list of variables at once or in a single operation.It provides a convenient way to extract values from an array and assign them to individual variables in one go. You will find list() to be used mostly with arrays. Let's see an example:

$countries  = ['Nigeria', 'Canada', 'Lithuania'];
// we want to extract the items in the array and assign them a variable
                                        // the array
list($africa, $northAmerica,  $europe) = $countries;

// Now the variables are assigned the values from the array
echo $africa; // Output: Nigeria
echo $northAmerica; // Output: Canada
echo $europe; // Output: Lithuania

Here is that something for you:

If your application makes use of images and you have a situation where you want to get the size of a valid image only file and at the same time return other information about this image like the dimensions, file type and a height/width in text strings, getimagesize() can do this. Here is the typical result with this function:

array(7) {
  800,           // Width of the image in pixels
  600        // Height of the image in pixels
  2,         // Type of the image (IMAGETYPE_JPEG)
  [3]=> string(23) "width="800" height="600"" // Image attributes for html
  "image/jpeg", // MIME type of the image
}

With list() you can conviniently assign variables to those items in the array and retrieve them in a more readable fashion.

Since we know that the first element of getimagesize() function is the image width, second, is the height, so and so forth... We can just represent them as variables using list() :

$arrayOfImageProperties = getimagesize("geeks.png"); 

list($width, $height, $type, $imageAttribute, $mime ) = $arrayOfImageProperties;

// display properties 
echo " The width of the image is  : " . $width . "<br>";

echo "The height of this  image is: " . $height . "<br>";

echo "The image type is:" . $type . "<br>";

echo "The image attribute of this image is:" .$attr;

Result:

The width of this image is : 800
The height of this image is : 600
The image type is :2
The image attribute of this image :width="800" height="600"

Shorteeeer syntax:

Shorter syntax to save some key strokes 😉 :
From php 7.1+ , you can do this:

 [$a, $b, $c ]= ['a','b', 'c'];

So incase you go through a codebase and see something like that, it's same as this:

 list($a,$b, $c) = ['a','b', 'c'];

The end.👋

I believe we can borrow some of these examples play around them and improve our code. See other examples here

Verifying emails in laravel using laravel ui

Chidiebere Chukwudi — Mon, 05 Jun 2023 12:26:25 +0000

Laravel makes building web applications simple and pretty straight forward especially we give credits to it's out-of-the-box functionalities like Authentication Scalffolding.

In this tutorial, we will be creating our authentication files using laravel ui package.

Install laravel

create-project --prefer-dist laravel/laravel app

From your terminal, CD into app.

Next, go to your .env file and make the following changes.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=

Adjust those variables where necessary so they reflect your database configuration.

Generate Authentication files.

Like I mentioned earlier, we'll be generating authentication files using laravel ui package. Install laravel ui :

composer require laravel/ui

Scaffold Auth files (In my case, I will be using booststrap)

php artisan ui bootstrap --auth

When it's all set, run the commmand php artisan migrate. So we are migrating to our database users table. It is by default in a fresh laravel installation.

Start up your application to see what we have done so far in action:

php artisan serve

Email Configuration

In this example, I will be using gmail SMTP emailing service.
hence you can use your gmail mail account to send mail on behalf of our application. To do this, first, you will need :

Your email account username (e.g yourname@gmail.com) and
App password -- it is the app password we are going to be using as password. Worthy to note is that, to get an app password, you must enable two factor authentication on your gmail account.Follow these intructions to get your app password. How to generate app password

Following that guide, when you click on "2 factor tab", your app password card (like in the image below) should be at the bottom the page. Remember to fresh page if the "App passwords" section doesn't come up immediately.

Subsequently, you will be prompted to select a device:

Copy your app password (just like in the screenshot below) and fill them in their respective .env variables :

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME=yourusername@gmail.com
MAIL_PASSWORD= yourapppassword
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=codebere@gmail.com
MAIL_FROM_NAME="${APP_NAME}"

Model Setup.

To proceed, in your Model/User.php lets add the MustVerifyEmail class by implementing Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Contracts\Auth\MustVerifyEmail;
// other classes
class User extends Authenticatable implements MustVerifyEmail

Routing

The previous steps we have followed has automatically created the neccessary authentication files we may be needing. All we have to do now is prepare a proper routing and that will suffix.

Verify Email View Routing

Go to your routes/web.php. Lets first add the routes that redirect authenticated but unverified users to a view file. Notice that we attach an Auth middleware and our route name is verification.notice.

Route::get('/email/verify', function () {

    return view('auth.verify');
})->middleware('auth')->name('verification.notice');

You are not to change the route name as our Auth setup uses the the verified middleware included with Laravel to automatically redirect to that route name if a user has not verified their email address.

views\auth\verify.blade.php:

Email Verification Handler

Next route we will be defining will be in charge of verifying the email when the user clicks on the link sent to their inbox. Still in your routes/web.php,

// remember to import EmailVerificationRequest class

use Illuminate\Foundation\Auth\EmailVerificationRequest;

Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $r) {
    $r->fulfill();

    return redirect('/home');
})->middleware(['auth', 'signed'])->name('verification.verify');

In the code above, laravel will use EmailVerificationRequest to validate the request id and hash parameters, then call the fufill() method that marks the authenticated user as verified and dispatches a verified event.

Email Example:

What if the user deletes the mail we sent or they can't find it ? We want to give them opportunity to request for another verification mail. Here:

use Illuminate\Http\Request;

Route::post('/email/verification-notification', function (Request $r) {

    $r->user()->sendEmailVerificationNotification();

    return back()->with('resent', 'Verification link sent ');
})->middleware(['auth', 'throttle:6,1'])->name('verification.send');

Using this route via a post request, Laravel sends an email notification once again. You can find the responsible blade file in views\auth\verify.blade.php

That should be all. If you find any challenge following this guide please do let me know in the comment section

My Twitter
Linkedin

Cakephp plugin Development: using custom component in another component.

Chidiebere Chukwudi — Thu, 20 Apr 2023 11:02:00 +0000

In a traditional cakephp app development, I.e, if you are not building a pluigin and want to use a custom component in another component, the cakephp docs say you should simply register the component's name in a protected property that has an array value of the custom component's name you want to use, like so : protected $components = ['Existing'];
Lets get to an example:

// src/Controller/Component/CustomComponent.php
namespace App\Controller\Component;

use Cake\Controller\Component;

class CustomComponent extends Component
{
    // The other component your component uses
    protected $components = ['Existing'];

    // Execute any other additional setup for your component.
    public function initialize(array $config): void
    {
        $this->Existing->foo();
    }

    public function bar()
    {
        // ...
    }
}

// src/Controller/Component/ExistingComponent.php
namespace App\Controller\Component;

use Cake\Controller\Component;

class ExistingComponent extends Component
{
    public function foo()
    {
        // ...
    }
}

How about a situation where we want to use a custom component in another component this time, in a cakephp plugin context?
Easy. We can simply do that by prefixing the plugin name before the name of the component like so: protected $components = ['PluginName.Existing'];
Lets get to an example:

// src/Controller/Component/CustomComponent.php
namespace App\Controller\Component;

use Cake\Controller\Component;

class CustomComponent extends Component
{
    // The other component your component uses
    protected $components = ['PluginName.Existing'];

    // Execute any other additional setup for your component.
    public function initialize(array $config): void
    {
        $this->Existing->foo();
    }

    public function bar()
    {
        // ...
    }
}

// src/Controller/Component/ExistingComponent.php
namespace App\Controller\Component;

use Cake\Controller\Component;

class ExistingComponent extends Component
{
    public function foo()
    {
        // ...
    }
}

This same principle applies to helpers, behaviours, etc.

That should be all. This can be confusing sometimes especially in situations where the results you get when you google-search around these concepts often lands you on the traditional cakephp documentation.

Here is the plugin specific documentation for more info.

Also, check out a cakephp plugin for handling cloudinary media uploads I built: Cakephp-cloudinary

I'm on twitter

Empty requests data with multipart/form-data when using fetch api

Chidiebere Chukwudi — Wed, 14 Sep 2022 20:15:30 +0000

It took me quite some time to resolve this isssue. It was an issue with formData and laravel/php not being able to detect the request payload when I dd or dump the request to check.

There is (and I believe) other solutions but I think this will save you the need to do "messy" workarounds.

Here you go:

Mar 8 '22

DO NOT specify the Content-Type header yourself, when trying to make such a multipart request. That header needs to include the boundary value (so that the receiver will know how to parse this request) - if you specify it yourself, as just multipart/form-data, then that will be missing.

These…

Open Full Answer