Online imaging tools to speed up your development

Moruling James — Mon, 16 Jan 2023 14:58:16 +0000

Lets say you are developing an app, mobile or web for someone or your own project but you need logos, icon or images with certain size and transparency real quick.

Here is a list of imaging tools available for free online that you can utilize to get that image in 5 minutes!

Say you scaffolded your app and need to change the header logo

and this is the logo you need to work with

and below is the style for the logo
.logo { width: 120px; height: 31px; background: rgba(255, 255, 255, 0.2); margin: 16px 24px 16px 0; float: left; }

Crop PNG & resize https://resizing.app/

crop

resize

Remove background onlinepngtools.com

use it

Now you have a transparent image to use as logo. Not the prettiest but that gets you going superfast!

Events removed in Ionic 5

Moruling James — Sun, 15 Jan 2023 08:23:52 +0000

Gone were the days where you were able to simply publish something like this from everywhere in your ionic app

this.events.publish('user:created', user, Date.now());

and listening to them by subscribing to the events by the given id

events.subscribe('user:created', (user, time) => { 
    console.log('Welcome', user, 'at', time);
  });

you ionic start your new app, created your first few components and by the time you were ready to have them communicate with each other realized,

the Events you were used to using, is not there anymore!. According to the changelog,

Events
The @ionic/angular Events service has been removed.
Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
Use "Redux" for advanced state management: https://ngrx.io

So now what?
Easy! lets go with something I would call as a notification based service. Lets build something simple.

Go ahead and use the ionic cli to create a new application, in this example I am using the tabs template. Here is what we will be building

We will be creating 2 components inside of Tab1 tab, name it

tab-info-component
tab-info-entry-component

we will have an input in tab-info-entry-component that will change the value of the tab-info-component on top when the input loses focus. Simple as that.

The structure should be something like this

Lets start by adding the controls in our components html and their binding property

tab-info.component.html
<h2>Tab-info Component</h2> <ion-label>Info</ion-label> <ion-textarea [(ngModel)]="text">

tab-info.component.ts
text = '...'; constructor() { } ngOnInit() {}

tab-info-entry.html
<h2>Tab-info-entry Component</h2> <ion-item> <ion-label>Enter Info</ion-label> <ion-input placeholder="Info" [(ngModel)]="info" (ionBlur)="onBlur()"></ion-input> </ion-item>

tab-info-entry.ts
info = ''; constructor() { } ngOnInit() {} onBlur(){ console.log('info') }

at this point, no communication is established yet. So lets go ahead and create a service called tabInfoEntryNotificationService for that purpose. This service will do 2 things, provide a method to notify other component consuming this service, and also returns a subscribeable subject to listen to the notification.

I will go an extra step now, to add an interface that will provide the blueprint of that, since logically, we will be having a lot of this notification service for each different components.

icomponent-notification.interface.ts
import { Subject } from "rxjs"; export interface IComponentNotification { notify(data: any): void; notification(): Subject<any>; }
then finally create the service

info-entry-notification.service.ts
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { IComponentNotification } from './icomponent-notification.interface'; @Injectable({ providedIn: 'root' }) export class InfoEntryNotificationService implements IComponentNotification { constructor() { } private subject = new Subject<any>(); notify(data: any): void { this.subject.next(data); } notification(): Subject<any> { return this.subject } }

Now in each of the components, inject the service and make use of it.

tab-info-entry.component.ts
constructor(private infoEntryNotificationService: InfoEntryNotificationService) { } ngOnInit() {} onBlur(){ this.infoEntryNotificationService.notify({ text: this.info }); }

tab-info.component.ts
text = '...'; constructor(private infoEntryNotificationService: InfoEntryNotificationService) { } ngOnInit() { this.infoEntryNotificationService.notification().subscribe((data) => { this.text = data.text; }) }

Now everytime you change the input value in the 'Enter Info' field, the value will be reflected at the 'Info' textarea field and this was communicated via the notification service.

Happy Morr n Morrr coding!

Github : https://github.com/captainmor/ionic6-service-based-component-notification.git

DEV Community: Moruling James

Online imaging tools to speed up your development

Events removed in Ionic 5