INTRODUCING
#THEFUTUREISWRITTENINCODE

Watch Me Code: Vue3 Firebase Composable Introduction with Ionic Framework #ionic #vuejs #firebase Firebase has come a long way and IMHO the API has gotten much easier to integrate into your applications even without third-party libraries. In this video, we create a vue3 composable to manage a list of users that is in a firebase collection. - Intro To Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html 💥 SUPPORT THIS CONTENT 💥 https://ko-fi.com/fiwic 💥 CHAPTERS 💥 00:00 - Introduction 01:41 - Walkthrough the default list template generated from the cli and discuss the project 03:45 - Firebase Service Creation 10:20 - Accessing the composable in the Home Component 12:00 - getting errors and loading status 18:00 - Use ionic component to render the list 20:17 - connect the pull to refresh code 21:33 - Get a specific element from the collection 22:17 - Get user from local array 28:00 - Get the data directly from firebase 35: 00 - Confirm pull-to-refresh is working 36:26 - Wrap Up 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf #ionic #vuejs #tutorial #javascript #ionicframework #vue #compositionapi #capacitor #vuejs #firebase #vue3 #vuejs3 💥 SUPPORT THIS CONTENT 💥 https://ko-fi.com/fiwic 💥 SOURCE CODE 💥 https://github.com/aaronksaunders/vue3-firebase-composable1

https://ko-fi.com/fiwic Apollo And GraphQL with Vue3 Apollo Composables in Ionic Framework #vuejs #ionic #graphql In this post, we are assuming you understand the basics of GraphQL but are interested in how to use the Vue Composition API with GraphQL in VueJS. Older Video - https://youtu.be/MNxgQ4Ba7S8 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 SOURCE CODE 💥 - https://github.com/aaronksaunders/ionic-vue3-graphql 💥 LINKS 💥 - Vue Composition API: https://github.com/vuejs/composition-api - json-graphql-server: https://github.com/marmelab/json-graphql-server - Vue Apollo Guide: https://v4.apollo.vuejs.org/guide/ - @vue/apollo-composable: https://v4.apollo.vuejs.org/guide-composable 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf 💥 BLOG 💥 - https://dev.to/aaronksaunders

--------------------------------------------------------------------------------------------------------- 💥 SUPPORT THIS CONTENT: https://ko-fi.com/fiwic 💥 BOOK A CALL FOR SUPPORT: https://ko-fi.com/s/8ba3c11d35 --------------------------------------------------------------------------------------------------------- Vue 3 Composition API for State Management with Ionic Framework #ionic #vuejs #composition-api 1:13 - walkthrough basic tab application 2:22 - how we are managing data on one page 3:32 - making data accessible in both tabs - creating a composable 5:50 - using the data service composable in tab1 7:25 - accessing data in tab2 8:50 - delete the item and update data 12:30 - adding functions to get the current item and delete it… it was wrong because I was trying to use arrays 19:30 - realized deleting items by index in the array will break after I delete the first item 26:48 - Review what we accomplished 💥 LINKS 💥 - https://v3.vuejs.org/guide/composition-api-introduction.html - https://composition-api.vuejs.org/ 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf 💥 BLOG 💥 - https://dev.to/aaronksaunders

--------------------------------------------------------------------------------------------------------- 💥 SUPPORT THIS CONTENT: https://ko-fi.com/fiwic 💥 BOOK A CALL FOR SUPPORT: https://ko-fi.com/s/8ba3c11d35 --------------------------------------------------------------------------------------------------------- Using Vuex4 With Vue3 And Ionic Framework #vuex #ionic #vuejs A simple introduction to using vuex 4 in vuejs version 3 with ionic framework We cover two specific scenarios when using a simple count store - State management of the store by dispatching an action to change the value in the store, no payload passed - State management of the store by dispatching an action to change the value in the store, using the payload passed in my the component 💥 CODE ON CODESANDBOX 💥 https://codesandbox.io/s/vue-3-ionic-vuex-xv8li 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN 💥 VUEX LINKS 💥 Documentation - https://next.vuex.vuejs.org/ GitHub Repo - https://github.com/vuejs/vuex/tree/v4.0.0-rc.1 Website - https://vuex.vuejs.org/ #ionic #vuejs #tutorial #javascript #ionicframework #vue #vuex #capacitor #vuejs #firebase #vue3 #vuejs3 #statemanagement #ionic-vue

Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React with Tabs #react #ionic #tutorial We show an approach to managing page renders in an Ionic application, you can see the side effects in an application that has multiple tabs, but in general, it happens in all apps 💥 REACT IONIC PLAYLIST https://www.youtube.com/playlist?list=PL2PY2-9rsgl3OHIMYb1AzVG5wADUxOmUW 💥 00:00 - Intro - Problem 00:59 - The Code Begins 01:39 - Using React.memo to optimize rendering 03:23 - Using useEffect to load data when the component is first loaded 04:56 - Using Ionic React LifeCycleHooks 06:31 - Creating a state variable to indicate if the page is visible 09:30 - Wrap Up - Summary of Changes From Ionic React Documentation - "Ionic might keep the page around in the DOM" "For instance, componentDidMount fires the first time a page is displayed, but if you navigate away from the page Ionic might keep the page around in the DOM, and a subsequent visit to the page might not call componentDidMount again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire." 💥 SOURCE CODE 💥 https://codesandbox.io/s/solution-re-rendering-problem-tabs-6qskh?file=/src/pages/Tab1/Tab1.tsx:266-268 💥 LINKS 💥 Original Question: https://stackoverflow.com/questions/64615933/data-re-rendering-with-useionviewdidenter-hook-in-ionic-react React Memo: https://reactjs.org/docs/react-api.html#reactmemo Use React.memo() wisely: https://buff.ly/2Gj6XIx React useEffect: https://reactjs.org/docs/hooks-reference.html#useeffect Ionic ReactJS LifeCycles: https://ionicframework.com/docs/react/lifecycle 💥 SOCIAL MEDIA 💥 Twitter - https://twitter.com/aaronksaunders LinkedIn - https://www.linkedin.com/in/aaronksaunders/ GitHub - https://github.com/aaronksaunders Blog - https://dev.to/aaronksaunders 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf #ionic #react #reactjs #tutorial #javascript #ionicframework #capacitor

More Slides Using Ionic Framework with VueJS, SwiperJS and Tiny-Emitter Creating A Custom Event-Bus #ionic #vuejs #tutorial We are combining two questions I saw this week, that I thought would make for a great video 1) How to emit events, create an event-bus in vue3 2) How to have parent component sent events to child component in vuejs. Taking the Slides Demo from the earlier video [https://youtu.be/-Qm-tG4Kt9s] and create a way for the Slides Component to listen for an event to tell it to change what slide it is on... This decouples the slide component from being tightly integrated with its parent in many ways. 💥 BONUS SAMPLE CODE 💥 The library I used in tiny-emitter, the link is below, See a simple eventbus built using composition API here - https://codesandbox.io/s/quirky-minsky-hw0c2?file=/src/views/Tab1.vue 💥 CHAPTERS 💥 00:00 Intro 01:23 - Adding Tiny-Emitter to Application 02:41 - Make all slide options get set by Parent Component 03:59 - Put Buttons in Parent Component, when I click, send an event to slide component to change slides 05:43 - List for Events to Change Slides in the Slide Component 06:58 - Emit Events When Buttons Clicked from Parent Component for the Slides Component to Listen To 08:42 - Respond To Events and Call SwiperJS API to Change Slides 09:28 - Enable and disable Parent Button By Listening for Events from Slide Component 10:54 - Add Event Handler Properties to MySlides Component 13:26 - Using Vue DevTools to See Events 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN 💥 LINKS 💥 - tiny-emitter: https://github.com/scottcorgan/tiny-emitter - swiper: https://swiperjs.com/ 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf 💥 SOCIAL MEDIA 💥 Twitter - https://twitter.com/aaronksaunders LinkedIn - https://www.linkedin.com/in/aaronksaunders/ GitHub - https://github.com/aaronksaunders Blog - https://dev.to/aaronksaunders #ionic #vuejs #tutorial #javascript #ionicframework #vue #compositionapi #capacitor #vuejs #firebase #vue3 #vuejs3 #tinyemitter

Video From the Latest In3Talks - Friday, October 23rd 00:00 - Getting Facebook Live Setup 03:20 - The Real Talking Starts Here 05:00 - Why we shutdown, a lease terminated, funding from DMPED Ended 07:08 - Using Technology For Online Programming was seamless TOPICS COVER - Big Announcement, Closing Physical Location, Moving Programming Online - Let us know about the In3DC transition. - How your tech background has allowed you to transition online? - How are In3DC programs going to be customized for the online platform? - How do you plan on managing this new normal? Tell us how you are? - Give us a brief about your professional journey- how did you get to In3DC? - With your other company Clearly Innovative, how did you get your first client? - Why did you extend to In3DC? PRESS - Here’s how In3DC CEO Aaron Saunders plans to run the incubator online: https://technical.ly/dc/2020/10/26/in3dc-online-coronavirus/

Creating Slides with ReactJS and Ionic Framework - Accessing The Full SwiperJS API #ionic #reactjs #tutorial Quick video showing how to use useRef to access the SwiperJS object to have full access to the available APIS. 💥 LINKS 💥 SwiperJS Documentation: https://swiperjs.com/ IonSlides : https://ionicframework.com/docs/api/slides CodeSandbox.io: https://codesandbox.io/s/ionic-react-slides-jq57g?file=/src/SlideContainer.tsx 💥 REACT JS PLAYLIST 💥 - https://www.youtube.com/playlist?list... 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf 💥 BLOG 💥 - https://dev.to/aaronksaunders #ionic #reactjs #tutorial #javascript #ionicframework #reacthooks #capacitor #react #ionslide #swiperjs

Creating Slides with VueJS and Ionic Framework - Accessing the Full SwiperJS API #ionic #vuejs #tutorial 💥 CHAPTERS 💥 00:00 Intro 00:17 start clean up of template app 00:45 base code from Ionic documentation 01:52 styling the sliders 02:30 testing swipejs options 03:00 add some buttons to move through slides 04:00 creating a ref to access slides 06:00 creating function for navigating slides based on button click, debugging the issue 08:00 looking at swiperjs documentation for slideNext and slidePrev 09:45 listening for slide events 11:00 start of code to disable next and prev buttons when appropriate 14:00 disable prev 15:00 disable next button 15:48 wrap up 💥 See Part Two of the Video - https://www.youtube.com/watch?v=mCkrZYIbH10 💥 💥 VUE JS PLAYLIST 💥 - https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN 💥 NEWSLETTER 💥 - https://buff.ly/35bAMIf 💥 BLOG 💥 - https://dev.to/aaronksaunders #ionic #vuejs #tutorial #javascript #ionicframework #vue #compositionapi #capacitor #vuejs #firebase #vue3 #vuejs3