Forem: Leonel Elimpe

Laravel Sanctum Authentication for Mixed Access Routes - Optional Authentication

Leonel Elimpe — Fri, 05 Apr 2024 11:11:59 +0000

Let's unravel a common misconception about Laravel Sanctum and how it handles authentication, particularly around the idea that routes must be explicitly wrapped in auth:sanctum to utilize Sanctum's authentication capabilities.

One of Sanctum's features is the ability to handle routes that are optionally authenticated. This means that the same route can serve both authenticated and unauthenticated requests, adapting its behavior based on the presence of a valid authentication token. Surprisingly, this doesn't require the explicit use of auth:sanctum middleware on each route.

Understanding the Magic Behind Sanctum

The magic lies in the EnsureFrontendRequestsAreStateful middleware. When included in the api middleware group (as is typical in a standard Laravel application), it checks incoming API requests for authentication tokens. If a token is present, Sanctum attempts to authenticate the user, making the user instance available through $request->user(). If the token is missing or invalid, the request proceeds without authentication.

Key Takeaways

Routes don't need auth:sanctum to be authenticated: Simply being processed through the api middleware group allows Sanctum to attempt authentication.
Flexibility for route access: This setup enables routes to be designed for mixed access, serving both users who are authenticated and those who are not, without needing separate routes or explicit middleware assignments.
How to Implement Mixed Access Routes
To leverage this feature in your Laravel application, follow these guidelines:

Ensure the Sanctum Middleware is Set Up: Check your app/Http/Kernel.php file to make sure the EnsureFrontendRequestsAreStateful middleware is included in your api middleware group.
Design Your Routes for Optional Authentication: When defining your API routes in routes/api.php, simply create them outside any auth:sanctum middleware group. Laravel's automatic application of the api middleware group takes care of the rest.

Handle Authenticated and Unauthenticated Requests: In your controller methods, use $request->user() to check for an authenticated user. Your method can then adjust its behavior based on whether a user is authenticated.

An Example to Illustrate

Route::get('/profile', function (Request $request) {
    if ($user = $request->user()) {
        return response()->json(['message' => 'Authenticated access', 'user' => $user]);
    }
    return response()->json(['message' => 'Unauthenticated access']);
});

This route serves both authenticated and unauthenticated requests, adjusting the response based on the authentication status of the request, all without explicitly requiring Sanctum's auth:sanctum middleware.

Creating a Lazy Loaded Image Cropping Modal Component with Ionic 5 and ngx-image-cropper

Leonel Elimpe — Wed, 20 May 2020 00:00:00 +0000

Demo and source code

You can view a working demo here, as well as the source code on Github.

Introduction

Say you’re creating a signup screen for an Ionic Angular app and it’s required the user be able to upload and crop a profile image, how do you go about this? We’ll cover such a use case in this post.

Creating the project

We’ll need an Ionic Angular project to create the modal in, so let’s go ahead and create it.

Install ionic

npm install -g @ionic/cli

Create the project

ionic start imageCrop blank

Setting up the image upload input

Inside src/app/home, let’s go ahead and clear the contents of home.page.html and home.page.scss, then add markup and some styles for the image upload input.

Update home.page.html:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col sizeSm="4" offsetXs="4">

        <ion-label position="stacked">Profile image</ion-label>
        <ion-input type="file" clearInput (change)="processFile($event)"></ion-input>

      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Update home.page.scss:

ion-input[type="file"] {
  background: rgba(230, 230, 230, 1);
  padding: 1em;
}

Now run the command ionic serve, our app should look like this:

Next, let’s create a service that’ll use the FileReader API to retrieve the selected image. We’ll pass it the DOM event that we are capturing from the File input field in home.page.html.

Let’s generate the service with the command:

ionic generate service services/image

Then flesh it out as below.

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ImageService {

  /**
   * Creates a FileReader API object
   */
  private fileReader: FileReader = new FileReader();

  constructor() { }

  /**
   * Uses the FileReader API to capture the input field event, retrieve the selected image
   * and return that as a base64 data URL courtesy of an Observable
   *
   * @param event The DOM event that we are capturing from the File input field
   */
  handleImageSelection(event: Event): Observable<string> {
    const file = (<HTMLInputElement>event.target).files[0];

    this.fileReader.readAsDataURL(file);
    return new Observable((observer) => {
      this.fileReader.onloadend = () => {
        observer.next(<string>this.fileReader.result);
        observer.complete();
      };
    });
  }
}

Adding ngx-image-cropper

Having done that, let’s add ngx-image-cropper, an image cropper for Angular. Run the command:

npm install ngx-image-cropper --save

Creating the image-crop modal component

Next, let’s create a modal we’ll present to the user for image cropping after selection through the File input.

ionic generate component image-crop-modal

Update image-crop-modal/image-crop-modal.component.html with the following snippet:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="end">
      <ion-button (click)="dismissModal()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Resize Image</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-row>
    <ion-col>
      <image-cropper
              [imageBase64]="imageBase64"
              [maintainAspectRatio]="true"
              [aspectRatio]="4 / 4"
              [resizeToWidth]="0"
              format="png"
              (imageCropped)="imageCropped($event)">

      </image-cropper>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col></ion-col>
  </ion-row>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button color="primary"
                  [disabled]="!imageBase64"
                  (click)="dismissModal(croppedImageBase64)">
        Continue
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Then update image-crop-modal/image-crop-modal.component.ts as follows:

import {ChangeDetectionStrategy, Component, Input, NgModule, OnInit} from '@angular/core';
import {IonicModule, ModalController} from '@ionic/angular';
import {ImageCroppedEvent, ImageCropperModule} from 'ngx-image-cropper';
import {CommonModule} from '@angular/common';

@Component({
  selector: 'app-image-crop-modal',
  templateUrl: './image-crop-modal.component.html',
  styleUrls: ['./image-crop-modal.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ImageCropModalComponent implements OnInit {

  private croppedImageBase64 = '';
  /**
   * Image to be cropped as a base64 string.
   * Should be passed in from the component calling this modal.
   */
  @Input() imageBase64 = '';

  constructor(
      private modalController: ModalController
  ) { }

  ngOnInit() {
    //
  }

  imageCropped(event: ImageCroppedEvent) {
    this.croppedImageBase64 = event.base64;
  }

  dismissModal(croppedImageBase64?: string) {
    this.modalController.dismiss({croppedImageBase64});
  }

}

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    ImageCropperModule,
  ],
  declarations: [ImageCropModalComponent]
})
class ImageCropModalModule {
}

You should note Ionic 5 brings full support for Ivy, Angular’s new renderer. Ivy enables apps to only require pieces of the renderer that they actually need, instead of the whole thing. This means that our final output will be smaller, which is better for load performance. Read more here.

Building with Ivy equally allow us create components without necessarily adding them to a module, and the ability to lazy load them. I highly recommend you read this article if you’d like to learn more.

Creating an image-crop modal service

To call the modal after the user selects a profile image, let’s create a service that takes care of lazy-loading and presenting it, then returning the result after a cropping operation.

ionic generate service services/image-crop

The service’s content:

import {Injectable} from '@angular/core';
import {ModalController} from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class ImageCropModalService {

  constructor(
      public modalController: ModalController,
  ) { }

  async show(imageBase64: string): Promise<string | null> {
    // Lazy load the image crop modal (an Angular Ivy feature)
    const { ImageCropModalComponent } = await import(`../image-crop-modal/image-crop-modal.component`);

    const modal: HTMLIonModalElement = await this.modalController.create({
      component: ImageCropModalComponent,
      componentProps: {
        imageBase64
      },
    });

    await modal.present();

    const result = await modal.onWillDismiss();

    if (result.data && result.data.croppedImageBase64) {
      return result.data.croppedImageBase64;
    } else {
      return null;
    }
  }
}

Applying the image-crop modal and service

Finally, we use the service in home.page.ts to show the modal after an image is selected. We update home.page.ts adding a function that receives the file input event (from home.page.ts template), converts it to base64 using the ImageService, then passing the result to ImageCropModalService for cropping.

import { Component } from '@angular/core';
import {ImageCropModalService} from '../services/image-crop-modal.service';
import {ImageService} from '../services/image.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
      private imageCropModalService: ImageCropModalService,
      private imageService: ImageService,
  ) {}

  processFile($event: Event) {
    this.imageService.handleImageSelection($event)
        .subscribe(imageBase64 => {

          this.imageCropModalService.show(imageBase64)
              .then(result => {
                console.log(result);

                // Do something with the result, upload to your server maybe?
              })
              .catch(error => {
                // Handle any errors thrown
                console.log(error);
              })

        });
  }
}

You can pass a predicate to RxJS’s first() operator, I was not aware!

Leonel Elimpe — Sat, 18 Apr 2020 00:00:00 +0000

My typical use-case for RxJS first() operator is to emit only the first item of an observable stream. What if you want the first value based on a certain condition instead?

I recently found out you can pass in an optional callback function (predicate) just for this.

First

emit only the first item (or the first item that meets some condition) emitted by an Observable.

predicate is a function you write to evaluate an expression and return true or false. You can have a look at it’s source here.

export function first<T, D = T>(
  predicate: (value: T, index: number, source: Observable<T>) => boolean,
  defaultValue?: D
): OperatorFunction<T, T | D>;

As an example, say we setup a listener for DOM click events.

const clicks = fromEvent(document, 'click');

We later decide we’d like to receive only the first click event that happens on a DIV, here’s how we’ll do that:

import { fromEvent } from 'rxjs';
import { first } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');

const result = clicks.pipe(first(ev => ev.target.tagName === 'DIV'));

result.subscribe(x => console.log(x));

As seen above, we make use of the first() operator passing it a callback function that receives a click event, and returns true if the tag name is DIV, false otherwise.

Hopefully, like me, you’ve learned something new from this tiny blog post 🙂.

Configure Proxy Redirect with Scully - The Static Site Generator for Angular apps

Leonel Elimpe — Tue, 07 Apr 2020 00:00:00 +0000

Introduction
Proxy Configuration with Scully
- Using the scully configuration file
- Using the CLI
Conclusion

Introduction

Scully is the awesome new static site generator for Angular, and I've been working on integrating it into Xamcademy.

The biggest hurdle so far has been the unavailability of samples to follow for an existing Angular application, so it's taken a lot of trial and error to get things working as expected. I'll be writing more blog posts on my experience as I continue to use it.

Proxy Configuration with Scully

Scully uses the same config format as webpackDevServer, also used by the Angular CLI. Here's an example proxy config file located at src/proxy.conf.json in an Angular project.

{
  "/api": {
    "target": "http://localhost:8200",
    "secure": false,
    "pathRewrite": {"^/api": ""}
  }
}

What this means is we can take our Angular app's already existing proxy configuration file and pass it to Scully, ensuring requests are properly redirected as Scully prerenders our routes.

We can point Scully to our proxy configuration file in two ways.

Using the scully configuration file

The proxyConfig property can be added to scully.config.js, it's value being a relative filename for a proxy config file.

To point Scully to our proxy configuration file, we add the following entry to scully.config.js:

exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  proxyConfig: './src/proxy.conf.json', // <---- ADD THIS

  // ...
};

If say our proxy config file is at the root of the project instead, we can change the relative path to:

exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  proxyConfig: './proxy.conf.json', // <---- ADD THIS

  // ...
};

I got a hint after looking at the outDir value, ./dist/static, which points to a relative path from the root ./. Here's the code that loads the proxy config! Hopefully that link doesn't get broken 😑.

Using the CLI

Our proxy config file can be passed in using the proxy cli option. It's aliases are --proxy, --proxyConfig, --proxy-config, and --proxyConfigFile. Below are usage examples.

npm run scully --proxy src/proxy.conf.json

npm run scully --proxyConfig src/proxy.conf.json

npm run scully --proxy-config src/proxy.conf.json

npm run scully --proxyConfigFile src/proxy.conf.json

If our proxy config file was located at the root of our project instead, we can adjust as follows (using the scully:serve command in this example).

npm run scully:serve --proxy proxy.conf.json

npm run scully:serve --proxyConfig proxy.conf.json

npm run scully:serve --proxy-config proxy.conf.json

npm run scully:serve --proxyConfigFile proxy.conf.json

Note: You should be aware a proxy config file passed through the command line has priority over one added in the scully configuration file, more here.

Conclusion

With this set up, Scully will now correctly use your proxy configuration to redirect requests while pre-rendering your app's routes.

You can read the docs here, and if you have a specific proxy redirect issue you'd like to discuss, do reach out to me on Twitter, or leave a comment below.

Happy coding! 🙂

Debugging ScullyIO Rendering and Network Errors with the help of puppeteerLaunchOptions

Leonel Elimpe — Tue, 07 Apr 2020 00:00:00 +0000

With my Angular app’s Scully build broken due to proxy redirect issues, I was very happy today discovering we can control the underlying mechanism of rendering the pages to some degree.

As per the Scully documentation, we can add puppeteerLaunchOptions (a set of configurable options to set on the browser) to our Scully configuration file. You can find details on all the options here.

To debug the proxy configuration issue affecting the rendering of my pages, two options in particular were super helpful:

slowMo: Slows down Puppeteer operations by the specified amount of milliseconds. Useful so that you can see what is going on. And
devtools: Whether to auto-open a DevTools panel for each tab.

Here’s how to add these options to your scully.config.js file:

exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  /* ADD THESE */
  puppeteerLaunchOptions: {
    slowMo: 4000,
    devtools: true,
  },
};

Of course we have to use the --showBrowser option with the scully build command so we see the effect of the puppeteer launch options.

So run your scully build command adding the showBrowser option: npm run scully --showBrowser. You’ll now notice the addition of the Chrome devtools to each page scully is prerendering, as well as a noticeable slowdown of each page’s rendering.

With this slowdown, you have enough time to switch to the network tab and inspect the requests, hopefully finding the cause of the errors.

Of course you can adjust the duration of the slowdown by increasing or reducing the value of slowMo above. That’s it for this post, happy bug fixing!

Pass Typescript-like Typed Objects and Arrays to Your Laravel Functions by Leveraging Data Transfer Objects

Leonel Elimpe — Mon, 02 Mar 2020 00:00:00 +0000

When working on a PHP codebase, one thing I really miss from the Typescript world is the ability to pass properly typed objects and array into functions.

Been searching around for a proper solution in PHP and remembered the DTO concept today, which led me to Spatie’s data-transfer-object package.

It perfectly embodies what I’ve been looking for, only issue being you can’t just declare an object in PHP with braces like in Javascript 😁. So instead we create a new namespace in the project under which we keep the DTO files, e.g App\DataTransferObjects.

For a use case, I have this service App\Services\MobileMoneyPaymentService. It has a method requestPayment which sends a POST payment request to a payment server. This method currently looks like this:

<?php

namespace App\Services;

use App\AirtimeRequest;
use Zttp\Zttp;
use Zttp\ZttpResponse;

class MobileMoneyPaymentService
{

    /** @var string $paymentServerUrl */
    protected $paymentServerUrl;

    public function __construct()
    {
        $this->paymentServerUrl = env('PAYMENT_SERVER_URL');
    }

    /**
     * @param AirtimeRequest $airtimeRequest
     * @return ZttpResponse
     */
    public function requestPayment(AirtimeRequest $airtimeRequest): ZttpResponse
    {
        $payload = [
            'amount' => $airtimeRequest->amount,
            'phone' => $airtimeRequest->payer,
            'external_id' => ' *****',
            'notification_url' => ' *****',
            'reference' => ' *****',
            'payer_message' => 'Top up',
            'payee_note' => 'Top up',
        ];

         return Zttp::post("$this->paymentServerUrl/mtn-mobile-money", $payload);
    }
}

I would like to refactor requestPayment method to receive a RequestPaymentData object instead, so let’s go ahead and create the \App\DataTransferObjects\RequestPaymentData class.

Please note i’ve already installed the spatie/data-transfer-object package via composer with composer require spatie/data-transfer-object.

<?php

namespace App\DataTransferObjects;

use Spatie\DataTransferObject\DataTransferObject;

class RequestPaymentData extends DataTransferObject
{
    /** @var integer */
    public $amount;

    /** @var string */
    public $phone;

    /** @var integer */
    public $external_id;

    /** @var string */
    public $notification_url;

    /** @var string */
    public $reference;

    /** @var string */
    public $payer_message;

    /** @var string */
    public $payee_note;

}

Having created the class, we can now refactor the requestPayment method to accept it as follows.

<?php

namespace App\Services;

use App\AirtimeRequest;
use Zttp\Zttp;
use Zttp\ZttpResponse;

class MobileMoneyPaymentService
{

    /** @var string $paymentServerUrl */
    protected $paymentServerUrl;

    public function __construct()
    {
        $this->paymentServerUrl = env('PAYMENT_SERVER_URL');
    }

    /**
     * @param RequestPaymentData $requestPaymentData
     * @return ZttpResponse
     */
    public function requestPayment(RequestPaymentData $requestPaymentData): ZttpResponse
    {
         return Zttp::post("$this->paymentServerUrl/mtn-mobile-money", $requestPaymentData->toArray());
    }
}

With this setup, am always sure all the data passed in is actually set and of the correct type. The package throws a TypeError if the value doesn’t comply with the given type 🙂.

You can learn more by having a look at it’s Readme, there’s a lot more you can do with it!

Detect The Carrier/Mobile Network Of A Phone Number With Javascript, PHP, Java, C++, Ruby, etc

Leonel Elimpe — Fri, 21 Feb 2020 00:00:00 +0000

For a long time, I’ve struggled with this problem of determining the Mobile Network a given phone number belongs to. Today I found out Google’s libphonenumber library (or any of it’s third party ports for other languages) have this functionality built-in.

Specifically, the PhoneNumberToCarrierMapper functionality. I am currently using this with the PHP port here.

While researching this today, I equally came across this document which describes the breakdown of phone numbers by Carrier in Cameroon (MTN, ORANGE, and NEXTTEL). You can equally check it out if you intend to write functionality for a more specific use case.

How I Used Ionic 4 CLI Proxy To Redirect API Requests And Avoid CORS Errors

Leonel Elimpe — Tue, 18 Feb 2020 00:00:00 +0000

I recently refactored an Ionic Angular app that previously made use of jQuery to fetch data and update the view 😔. Having moved the API calls into dedicated services, all API requests were blocked by the browser given the different origins (localhost vs external api url).

I went ahead and created the file src/proxy.conf.json and updated angular.json to incorporate the new proxy settings (more here).

First up creating src/proxy.conf.json.

{
  "/api/*": {
    "target": "https://my-api-domain.com/api",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

Then updating angular.json by including the above proxy configuration.


"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "app:build",
      "proxyConfig": "src/proxy.conf.json"
    },

I then adapted my service to the new proxy setting as below, replacing the previously used full api path with just /api).

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {JourneyName} from '../models/journey-name';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class JourneysService {

  constructor(private http: HttpClient) {}

  getJourneyName(journeyId: number): Observable<JourneyName> {
    const body = new FormData();
    body.append('journey', `${journeyId}`);

    return this.http.post(
        `/api/get-journey-name`,
        body
      ) as Observable<JourneyName>;
  }
}

To my surprise I still got the CORS error after testing. A couple more minutes searching Google and I found out Ionic has it’s own CLI proxy - Service Proxies, meaning it doesn’t use that of Angular under the hood. Ok.

Went ahead and configured it as follows inside ionic.config.json:

{
  "name": "sampleAppName",
  "integrations": {
    "cordova": {}
  },
  "type": "angular",
  "id": "01aae245",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://my-api-domain.com/api"
    }
  ]
}

Now it should work! :-) Ran ionic serve, didn’t work, was still getting the CORS error as proxy redirect was for some reason not being triggered. Then tried ionic serve --proxy-config src/proxy.conf.json, still didn’t work.

Did another Google search, found this Stackoverflow answer which suggested using ionic serve -- --proxy-config src/proxy.conf.json, notice the extra dashes --. This worked!!

Thus I ended up passing the Angular proxy.conf.json to the ionic serve command. Will update this post should I find a way to make the proxy redirect work with the configuration in ionic.config.json, and if you do know how to, please leave a reply in the comment :-).

Also what exactly do the extra dashes -- do? Will equally update the post when I find out, I believe I’ve come across something similar before.

Passing Additional Parameters To An Angular Service

Leonel Elimpe — Fri, 17 Jan 2020 00:00:00 +0000

If you want to pass additional parameters to an Angular service, what you are looking for is @Inject decorator. It helps you pass your parameters to the service through Angular’s dependency injection mechanism.

@Inject() is a manual mechanism for letting Angular know that a parameter must be injected.

-- Rangle.io

Let’s say we’re writing a recaptcha service which requires the id of the recaptcha container in your html template, as below.

import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {
    constructor (private recaptchaContainerId: string) { }
}

Our example component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div id="recaptcha-container"></div>
  `,
})
export class ExampleComponent {

  constructor() { }

}

How do we go about properly passing in the recaptchaContainerId to the service? Here’s how.

1 - We make an injection token out of the recaptchaContainerId parameter as follows:

import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {
  constructor (
    // Make recaptchaContainerId an injection token
    @Inject('recaptchaContainerId') private recaptchaContainerId: string
  ) { }
}

Injection tokens are a feature of Angular that allows the injection of values that don’t have a runtime representation. What we mean by this, is that you can’t inject something like an interface as it only exists as a TypeScript construct, not JavaScript. Injection tokens provide a simple mechanism to link a token, to a value, and have that value injected into a component.

-- Inversion of Control

2 - We then provide this token to the service through our component’s providers array as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div id="recaptcha-container"></div>
  `,
   providers: [
     // Provide a value to be used by Angular's dependency injection
     // machanism to pass 
    {provide: 'recaptchaContainerId', useValue: 'recaptcha-container'},
  ]
})
export class ExampleComponent {

  // We also inject our service
  constructor(private recaptchaService: RecaptchaService) { }

}

Note that I’ve deliberately limited the scope of the provided recaptchaContainerId to this component due to the nature of such a token (an element id). In another component where RecaptchaService is injected, I might be using a different id.

It’s still very ok to provide the recaptchaContainerId token in the above component’s module or the root AppModule. More here.

And that’s it! We’ve successfully passed an additional parameter to an Angular service. Found something that can be improved? Please feel free to use the comment :-).

This Stackoverflow question served as a valuable guide in writing this blog post.

How to embed a PDF file in a dev.to post?

Leonel Elimpe — Tue, 31 Dec 2019 14:19:49 +0000

I've been trying the past couple of minutes to embed a PDF file into my post, but for some reason they don't display. Here's what I've tried:

<object data="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf"></embed>
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf">Download PDF</a>.</p>
    </embed>
</object>

This is how the above code renders:

This browser does not support PDFs. Please download the PDF to view it: Download PDF.

It's supposed to display the PDF document but instead defaults to the Not Supported text. My site equally uses markdown and the above snippet renders properly.

I've equally tried using an iframe but it doesn't render either.
Here's the iframe snippet:

<iframe src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" width="100%" height="500px"></iframe>

Would appreciate help from anyone who's succeeded with this before 🙏.

Generating Typescript Interfaces Directly From The Database

Leonel Elimpe — Thu, 12 Dec 2019 00:00:00 +0000

The past couple of weeks I’ve been adding new functionality to an API and today began updating the Angular front-end application to reflect these changes.

Am just now realizing how much work I have writing interfaces, services, etc (makes one think more about automation). Luckily I found this library for auto generating typescript interfaces directly from the MySQL database, Schemats.

Using Schemats, you can generate TypeScript interface definitions from (Postgres, MySQL) SQL database schema automatically.

To use it, you install the package globally with npm:

npm install -g schemats

Then inside the folder you’d like the generated files saved, run one of the following commands:

schemats generate -c postgres://database_username@localhost/database_name -t table_name -o output_file_name.ts

schemats generate -c mysql://database_username@localhost/database_name -t table_name -o output_file_name.ts

The above commands are to generate the typescript interface for a specific table. Given it’s not everyday I connect to a mysql database from the command line, I went through a couple tries before getting it to work, reason why I’ve used explicit names to describe the parameters the command takes.

To generate interfaces for all tables in the database, you run one of the following:

schemats generate -c postgres://database_username@localhost/database_name -o output_file_name.ts

schemats generate -c mysql://database_username@localhost/database_name -o output_file_name.ts

The output looks something like this:

/* tslint:disable */

/**
 * AUTO-GENERATED FILE @ 2019-12-12 10:28:45 - DO NOT EDIT!
 *
 * This file was automatically generated by schemats v.3.0.3
 *
 */

export namespace activitiesFields {
    export type id = number;
    export type user_id = number;
    export type subject_id = number;
    export type subject_type = string;
    export type type = string;
    export type created_at = Date | null;
    export type updated_at = Date | null;

}

export interface activities {
    id: activitiesFields.id;
    user_id: activitiesFields.user_id;
    subject_id: activitiesFields.subject_id;
    subject_type: activitiesFields.subject_type;
    type: activitiesFields.type;
    created_at: activitiesFields.created_at;
    updated_at: activitiesFields.updated_at;

}

There are more options and configurations you can checkout in the package’s readme. Happy coding!

Adding Custom Content To Akveo’s @nebular/theme 4.5.0 Sidebar Component

Leonel Elimpe — Wed, 27 Nov 2019 00:00:00 +0000

So I've been working with Akveo's Nebular UI Kit for a while now and it's been a real issue adding custom content to nb-sidebar.

Today, I had a look at the component's source code on Github and found out you can basically project anything into it, specifically into nb-sidebar > div.main-container > div.scrollable .

@Component({
  selector: 'nb-sidebar',
  styleUrls: ['./sidebar.component.scss'],
  template: `
    <div class="main-container"
         [class.main-container-fixed]="containerFixedValue">
      <ng-content select="nb-sidebar-header"></ng-content>
      <div class="scrollable" (click)="onClick($event)">
        <ng-content></ng-content>
      </div>
      <ng-content select="nb-sidebar-footer"></ng-content>
    </div>
  `,
})

Full source code here.

Notice the sidebar component projects nb-sidebar-header and nb-sidebar-footer into dedicated containers, and all other content into div.scrollable.

What this means is any custom content you put into <nb-sidebar>...</nb-sidebar> will be projected into div.scrollable. For example:

<nb-layout windowMode>

  <nb-layout-header fixed>
    <xc-header></xc-header>
  </nb-layout-header>


  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>

    <ng-container *ngIf="menu$ | async; let menu">
      <nb-menu [items]="menu"></nb-menu>
    </ng-container>

    <!--
      -- Found out I can just project any content into nb-sidebar template's .scrollable div.
      -- So decided to add the footer here and style it well so it displays properly.
      -->
    <xc-footer></xc-footer>


  </nb-sidebar>


  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>


</nb-layout>

Notice my xc-footer in the above sample. I was trying to add a footer to the sidebar but didn't want a "sticky footer" which is what nb-sidebar-footer offers. So I placed it below nb-menu and added css to push it well below nb-menu.

nb-menu {
  /**
    * Assuming here the footer (xc-footer) is directly below nb-menu
    * Push the footer a good distance below the menu.
    */
  padding-bottom: 3.5rem;
}

So basically you can add any content to the sidebar and if need be, properly style it 🙂.