Ionic 4 Theme Builder with CSS Variables

Build a dynamic theme generator with Ionic 4 using nothing but CSS variables. angularfirebas...
CSS Variables developer.mozi...
Coolors.co coolors.co/
Ionic 4 Docs ionicframework...

[@brettshep]

Another great video. I found your channel a long time ago when I was just beginning Angular. I just launched my first product today on product hunt, and just wanted to give you credit for helping me grow as a developer

[@Fireship]

Wow, that's awesome! Do you want to share the link so I can upvote it :)

[@brettshep]

Sure that'd be awesome! www.producthunt.com/posts/font-flipper

[@Fireship]

Dude! That is an awesome app. I'd love to feature it in a video. Message me on slack if you'd be interested in that goo.gl/qF8Q5r

[@brettshep]

Sounds awesome! I sent a message in slack.

[@pietersydney]

Great app!

[@Pranaytubes]

Thanks for the video Jeff. Look forward to your full ionic 4 course. One item to cover would be some in depth on notifications - not just the setup part (which you have done pretty well already), but also the firestore side of it. So say I am subscribed to 10 tags (weather by city / football teams etc) and a notification is sent for that tag. What is the right approach to store the info in database? How do you keep a tab of counts for each user for "new notifications", and when the use sees a specific set of notification, what do you update in the database vs what you do update in the local storage on his app? Other items I would suggest are: 1. Ionic app performance - how to get the best of what we have got, as close to native as possible? 2. Ionic storage: what goes in local storage vs what goes in firestore (for performance, offline usage etc). and 3. Setup "firebase app" for production usage (meaning having two separate firebase app - one for dev environment and one for prod for a single application)? Essentially the BEST practices that we cannot find anywhere else. Cheers!

[@rayscott5352]

Brilliant as usual! In your up coming Ionic 4 course I would love to see how you can incorporate an Ionic 4 searchbar with Algolia search.

[@Fireship]

That would be cool, have not done an ionic algolia integration on native yet

[@benjaminjameswaller]

great tutorial Jeff. looking forward to the course. 🙂

[@Fireship]

Thanks Ben!

[@kyeongjunlee7401]

I can't wait for ionic 3 + firebase project thang! pumped

[@jesucristoesteban908]

I'll become pro once again if you make that new course with ionic 4

[@QwertyNPC]

When the course You mention comes out I'll definitely go pro. I'd love to see something like multiple devices real time position tracking with firebase and google maps api.

[@Fireship]

I will very likely include a section on geolocation :)

[@carrillocarlosce]

Hi, I had a an app in ionic 3 and I've been migrating it to ionic 4 and the results are very good, performance is awesome, the only thing that surprise me is that for android it has to be at least API SDK 24, but its ok for me, i've been fithing a lot with theming, couse it has change a lot, so thanks for the tutorial

[@Fireship]

All the changes are positive IMO, but a complex app could be hard to migrate. That's partly why I'm developing a new course from scratch.

[@carrillocarlosce]

Yes, its hard and my app was almost finished but for a greater good I decided so. BTW something you should cover in the course is the lazy loading routing, I dont understand how it really work, when using nested routes if i got into a route for the first time it works well, but when i go back to a root and then i want to enter again in a nested lazy loaded route it just dont do anything, I hope to se this cover in your course because its a real pain XD

[@adithyasbhat]

Hey@@carrillocarlosce, can i get the sample Ionic 4 template. just need check with my build, could you please help me with this. [e-mail]. thanks:)

[@ThatsLifeWellEnjoy]

Hi, I would like to ask what plugin did you use to show the color in your editor inside a typescript. Thanks :)

[@johnshields_]

WebStorm can do this

[@will_abule]

Thanks allot for this I'm being waiting for it.

[@Skia_]

Bro i know you're Angular/ionic advocate. But what do you think of Flutter? Also, great content as always. You're godsend :D

[@Fireship]

I think flutter is great and may do vids on it in the future. In fact, I have a side project being built with flutter now. But there are tradeoffs, both good and bad. Ionic is still the fastest path to an app if you know the web.

[@jamieperkins906]

Pretty sure I heard a "meow" at 6:02 😂

[@Fireship]

Haha, it does sound like a meow, but that's impossible. Must have been my two-year old :)

[@omarhegazi1613]

me too

[@d4lep0ro]

Great content as always.

[@Fireship]

Thanks for watching :)

[@aswin123ify]

Hi, It was a nice video tho i have slightly different scenario, can we generate theme dynamically based on the database results. Like value for text-color will be received from database.

[@kouassidje2595]

Good evening, I just installed ionic v5, and I wanted to add my html template to make it native. But I have trouble adding css and javascript. Help me please

[@saadabbasi2063]

Superb :) thanks Jeff

[@Fireship]

Thanks Saad!

[@moradabdelgaber5958]

Awesome video as usual :)

[@Fireship]

Thanks Morad!

[@ashwinsharan6462]

Hey add a bit about the media capture plugin and also how we can store that on firebase!

[@VivekGawande1]

For the pro series - I'd love to see a video on how to deploy and test an ionic app on iOS with a Mac. Is there some sort of emulator available? I've heard that iOS development is a pain. I'd also love to see how can you differentiate between users in ionic/angular/firebase. Suppose an uber app has two types of users: drivers and customers. When they login to the app, what's the best way to take them to their respective dashboards?

[@JFkingW]

Have you had a look at ng-toolkit/universal and ng-toolkit/serverless yet? Its supposed to make SSR with only a few cli commands. A Video how to use it and host it on firebase would be awesome

[@Fireship]

I've seen that before, but have not tried it out yet. Thanks for the suggestion :)

[@ikezedev]

Thanks so much for this video..... I would love to buy your course on Ionic native and firebase, but I'm broke. Could you help me please.... Your biggest fan 😍

[@Fireship]

Yes, when it releases I'll provide a discount code to make it super affordable or maybe even free.

[@PhillipMwaniki]

I'm waiting in line for the promo code. I wish there was a place to subscribe by mail

[@ikezedev]

Thanks so much Jeff, you are blessing

[@VivekGawande1]

You're the best Jeff! I'd happily buy your course because honestly you're the best teacher I've ever seen for Firebase

[@saadabbasi2063]

So excited, its a big claim thar we will not find that stuff anywhere else. This will keep my eyes on open until you release the course

[@wes443]

I would like to see a video on dynamically loading components. For example, how would I implement functionality to create a component on a button click?

[@Fireship]

I like that, but what type of component do you have in mind? Can you expand on a use case

[@wes443]

Certainly. So I think a typical use case for this would be something like a configurable dashboard with widgets. So the user would initially load a blank dashboard and there would be 3 buttons (Load Widget A, Load Widget B, Load Widget C). When you click each button, it would load the appropriate widget (which would be an Angular component) and add it to the dashboard. Another use case would be an application for plotting (like in your PlotlyJS video). There would be some way to dynamically add new types of plots to the page, for analyzing different data.

[@Fireship]

Awesome, thank you. I will definitely think about adding something along these lines.

[@wes443]

Angular Firebase Thanks for the consideration!

[@byronglendon3947]

Look forward to the new course. I would like to see: 1. PWA's with Capicitor (Push notifications & Camera etc) 2. Email receiving (not just sending) with Mailgun or similar 3. Animated radial navigation. eg. www.jqueryscript.net/images/Path-Style-Round-Menu-Plugin-with-jQuery-CSS3-FerroMenu.jpg miro.medium.com/max/1400/1*1V-qn291fz_slQGCCdbdow.jpeg

[@johngeronimo8821]

I got an error "NullInjectorError: No provider for Storage!" is there any way to fix this?

[@snipe3045]

@angularfirebase what theme are you using for your vs code?

[@Fireship]

Atom One Dark + VS Code Icons

[@davetaylor1666]

For your next pro video, how about including details of how to detect if app is offline, and to what extent Angularfire2 can be used offline. Also, how would App Auth work when offline ?

[@Fireship]

I like that idea. Offline line is one of the more difficult areas to test and maintain. Are you more interested in iOS/Android offline or web apps?

[@davetaylor1666]

Angular Firebase I'm developing an Ionic 4 app (with much help from you), so would be most interested in how well an Ionic 4 App could still function while offline.

[@davetaylor1666]

Sorry, i misunderstood youy question. Ios/Android offline would be most useful,.

[@abdullahgd9]

How to use the Angular Material’s theme colors in components

[@bF93712]

Ionicv4 with stenciljs! Would be cool!

[@mrgrossartig]

Great video

[@moradabdelgaber5958]

can I do this with ionic 3 ??

[@Fireship]

It's possible because CSS variables are a browser implementation, but Ionic 4 has all the pieces in place for the ideal developer experience.

[@supermikeadventures6185]

Is this possible for Ionic3?

[@himesh_89]

how to architect on firebase.

[@swellingtonsantos9532]

Very good.

[@PezhvakIMV]

may i know what's the music name in the background when you start talking please?

[@chandra80inbox]

like to join the course ionic with firebase .

[@Fireship]

I expect it to be finished within 1 to 2 weeks, will post it on the channel when ready :)

[@chandra80inbox]

eagerly waiting

[@CSBD_Official]

really awesome.

[@srashtigupta59]

Inside the homepage.html content

[@mrshimizer]

I applied this method for ionic 3 but it does not set a new index, what do I have to do. github.com/Alan4747/Ionic-3-Dynamic-CSS-Theme

[@krivoviajes]

Ponle subtitulos a los tutoriales, no entiendo nada en ingles jajaja

[@ZeroG84]

These types of tutorials really make me want to clean my teeth with a gun. Speed is hectic. Had to watch in x0,5 times speed just to understand what was said in that monotone voice. Did you speed this up in edit, or are you on something? The fact you just paste in stuff to the editor lazily from another screen and it appears out of thin air, line after line and chunk after a bigger chunk, is not helping with the speed thing either. Second, you did not show any of the UI how you linked the buttons to change the css, or where the value should be sent and in what form. In fact, you did not run the actual project you "built" at all. It was always open in the background. So... "thanks" I guess. You made me quit coding. That was your goal with this video, right? It really did the job.

[@tiagobrancoprata7578]

found it profoundly useless....

[@ZeroG84]

These types of tutorials really make me want to clean my teeth with a gun. Speed is hectic. Had to watch in x0,5 times speed just to understand what was said in that monotone voice. Did you speed this up in edit, or are you on something? The fact you just paste in stuff to the editor lazily from another screen and it appears out of thin air, line after line and chunk after a bigger chunk, is not helping with the speed thing either. Second, you did not show any of the UI how you linked the buttons to change the css, or where the value should be sent and in what form. In fact, you did not run the actual project you "built" at all. It was always open in the background. So... "thanks" I guess. You made me quit coding. That was your goal with this video, right? It really did the job.