profile

Jorge Vergara

Web Developer and Instructor sharing what I know about building mobile applications with web technologies such as Angular, Ionic Framework, Firebase, and nodejs

PostsLinks
Featured Post

Use native CSS parts to access the shadow DOM in an Ionic component

Hey Reader, Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly. Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components. You can learn how to use shadow parts in this 3 minute video:...

22 days ago • 1 min read

Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...

about 1 year ago • 1 min read

Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...

about 1 year ago • 1 min read

Hey Reader, I'm working on a video course for the EggHead platform and I wanted to share a quick bit with you. In this video, you'll learn how to set up your Firebase project in Ionic or Angular applications using AngularFire and the `ng add` schematic. After that, we'll explore the Firebase console to see the available services we have, talk a bit about the Firestore database and explain the 2 main types of data: Collections and Documents. After that, we'll use AngularFire to reactively pull...

about 1 year ago • 1 min read

Hey Reader, When you use the slot="end" in a button icon, the icon is placed to the right side of the button text, It renders the button and the icon close to each other. Regular ion-button with text and icon I recently had a requirement to space them out so that the text was to the far left and the icon to the far right, as shown in the image below ion-button with the text aligned to the left and the icon to the right After spending an embarrasing amount of time trying to access the shadow...

about 1 year ago • 1 min read

Hey Reader, When you use the slot="end" in a button icon, the icon is placed to the right side of the button text, It renders the button and the icon close to each other. Regular ion-button with text and icon I recently had a requirement to space them out so that the text was to the far left and the icon to the far right, as shown in the image below ion-button with the text aligned to the left and the icon to the right After spending an embarrasing amount of time trying to access the shadow...

about 1 year ago • 1 min read

Hey Reader, If you’re adding Capacitor to your Nx monorepo, there’s really nice tool called Nx Extensions that lets you add Capacitor and then it generates new nx run commands for you. It works fine in general, but due to how Capacitor looks for plugins, it made you install your capacitor plugins in the application level package.json file, which defeats one of the purposes of the monorepo, to have and maintain only 1 node_modules folder for all my apps and libraries. For my personal project...

about 1 year ago • 1 min read

Hey Reader, If you’re using Firebase Authentication from the Modular version of the Firebase SDK (version 9.0 or above) you might have noticed that when you deploy to iOS using Capacitor the app doesn’t just work™️ I found this out rather painfully, because I tested my app fully on Android, and when I was ready for the app store my first iPhone test was a white screen with no logs, no errors, no nothing. After spending an embarrassing amount of time debugging why my authentication guard was...

about 1 year ago • 1 min read

Hey Reader, The Firebase Emulator Suite is must have for Firebase developers, it lets you develop locally without the fear of breaking your bank, if for example, you make an error in development that triggers an infinite loop on a Cloud Function. But what happens when you want to test your app on real mobile devices while you’re using the emulator? I recently tried this just to hit an error every time my app tried to talk to Firebase: Failed to load resource: Could not connect to the server....

about 1 year ago • 1 min read

Hey Reader, The Firebase Emulator Suite is must have for Firebase developers, it lets you develop locally without the fear of breaking your bank, if for example, you make an error in development that triggers an infinite loop on a Cloud Function. But what happens when you want to test your app on real mobile devices while you’re using the emulator? I recently tried this just to hit an error every time my app tried to talk to Firebase: Failed to load resource: Could not connect to the server....

about 1 year ago • 1 min read
Share this page