# Ionic Ionic is an open-source mobile UI toolkit and cross-platform app development framework for building mobile apps from a single codebase. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Stories from our latest intern class DevFeed: [Stories from our latest intern class]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-12-21T23:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Programming](), [Mobile](), [JavaScript](), [Ionic](), [AdventureX 2026]() Tags: [backup](), [blog-post](), [email](), [engineering](), [github](), [hackathon](), [intern](), [ionic](), [javascript](), [mobile](), [news](), [programming](), [project](), [stories](), [web-frontend]() ### AI overview This article shares reflections from Khan Academy's 2015 intern class. It describes a hackathon project that used Ionic to build a mobile app for browsing and playing JavaScript projects, and discusses backing up Khan Academy mailing-list data. ### Source excerpt By 2015 Interns We sent an email out to all of the 2015 interns in early November, shortly ... Read more ## Geo Queries with PostGIS in Ionic Angular DevFeed: [Geo Queries with PostGIS in Ionic Angular]() Original publisher: [Read original article]() Author: Simon Grimm Published: 2023-03-01T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [Supabase](), [Angular](), [Ionic](), [Databases](), [SQL](), [App](), [cross-platform]() Tags: [angular](), [app](), [code](), [cross-platform](), [data](), [database](), [geo-queries](), [geolocation](), [github](), [postgres](), [sql](), [storage](), [tutorial]() ### AI overview A tutorial showing how to use Supabase with the PostGIS extension in an Ionic Angular application to store and query geographic data. It covers geolocation storage, database functions for geo-queries, map markers, file uploads, and image transformations. ### Source excerpt Using the PostGIS extension to build a cross-platform application with Ionic Angular. ## 2022 Year In Review DevFeed: [2022 Year In Review]() Original publisher: [Read original article]() Published: 2023-01-01T00:00:00Z Content type: article Language: en Sources: [The Vue Point]() Topics: [Vue.js](), [Tooling](), [TypeScript](), [Vite](), [Nuxt.js](), [NativeScript](), [npm](), [Quasar](), [Ionic]() Tags: [developer-experience](), [nativescript](), [npm](), [nuxt](), [quasar](), [recap](), [release-cadence](), [releases](), [tooling](), [typescript](), [vite](), [vue](), [year-in-review]() ### AI overview Vue's 2022 year-in-review covers the transition to Vue 3 as the default, improvements to documentation, tooling, IDE and TypeScript support, ecosystem growth, and support for both Vue 2 and Vue 3. It also outlines plans for smaller and more frequent Vue 3 releases in 2023. ### Source excerpt Happy new year, Vue community! With 2023 upon us, we would like to take this opportunity to recap what happened in 2022, and discuss what to expect in 2023. ## Keeping Form Elements Visible in Hybrid iOS Apps DevFeed: [Keeping Form Elements Visible in Hybrid iOS Apps]() Original publisher: [Read original article]() Author: Andy Weiss Published: 2021-02-28T14:19:06Z Content type: tutorial Language: en Sources: [RBI Tech]() Topics: [Forms](), [Ionic](), [iOS](), [Mobile]() Tags: [android-studio](), [forms](), [hybrid-app-development](), [ionic](), [ios](), [mobile](), [simulator](), [view]() ### AI overview This tutorial examines why form elements can be covered by the soft keyboard in hybrid iOS app web views, despite behaving correctly in mobile browsers. It demonstrates a Capacitor-based hybrid app and discusses using the Capacitor keyboard API to improve iOS behavior while leaving Android unchanged. ### Source excerpt Keeping Form Elements Visible in Hybrid iOS Apps Today's mobile browsers provide a pretty great default user experience for forms. For a very simple example, visit the following url from any mobile browser: https://VisualViewport.andyweiss1982.repl.co. The user experience is great from mobile Safari. When you focus on an input field, the phone's soft keyboard animates up from the bottom of the screen. All of the content comes along for the ride, intelligently sliding up so you can see each input's value as you type. Close out the form and the viewport gracefully recedes from view. However, the same exact code can become far less elegant when consumed from a web view inside of a hybrid iOS app. Not so great inside of an iOS web view Not only do we lose the "Done" button that closes the keyboard without submitting the form; in many cases, the keyboard will pop up without displacing the form elements, covering them entirely and making the form appear completely useless! Well, It works in my web browser? 🤷♂ For reference, here is the full code for the original user experience as viewed from the mobile web: https://medium.com/media/7d7adf83c321357f9af250d2c90d1d4e/href To move this code inside of a web view, we can use Ionic's capacitor package to generate a bare-bones hybrid app that can be run in a simulator. Following the docs, you can create a new project, give it a name and assign it a directory, and then add the Android and iOS platforms. npx @capacitor/cli create? App name hybrid-forms-test ? App Package ID (in Java package format, no dashes) com.example.app ? Directory for new app hybrid-forms-test ? Which npm client would you like to use? yarnAdd platforms using "npx cap add":npx cap add android npx cap add ios For the purposes of this demo, you can just copy and paste the following code into www/index.html to generate a carbon copy of the original example into a boilerplate capacitor web view that can be run as either an iOS or Android application: https://me ## Manipulating Screen Brightness on iOS and Android with Ionic React DevFeed: [Manipulating Screen Brightness on iOS and Android with Ionic React]() Original publisher: [Read original article]() Author: Alejandra Del Valle Published: 2020-08-20T19:06:20Z Content type: tutorial Language: en Sources: [RBI Tech]() Topics: [Ionic](), [React](), [React Hooks](), [Android](), [iOS](), [PWA](), [Web Components](), [Development]() Tags: [android](), [components](), [development](), [how-to](), [ionic](), [ios](), [mobile-app-development](), [pwa](), [react](), [react-hooks]() ### AI overview This tutorial discusses controlling screen brightness on iOS and Android using Ionic React and Ionic React Hooks, including the package's Capacitor API wrappers and support for shared-codebase applications across mobile, desktop, and PWA targets. ### Source excerpt Manipulating Screen Brightness on iOS and Android Devices Undoubtedly one of the most annoying side effects our phones have is its ability to change screen brightness dynamically. Whether it's a setting enabled on your device to automatically adjust brightness based on your environment, or an app you downloaded manipulates it based on its needs, sometimes it's just out of your control. Maybe you're an avid digital content creator and having your screen brightness at its max is to help your content be "pixel-perfect" and edited just the way you want. Maybe you're visiting a store and need to scan your screen to quickly and easily pay for something without fumbling through your wallet or purse. Or, maybe you're at a show or at home for a movie night and having your screen brightness as low as possible is important to one, not blind you, and two, not blind your neighbors. Whatever the backstory, it's important for the apps we use to consider how we use our phones in our day-to-day lives to create a seamless experience that users will enjoy. Let's look at how we can help with this experience in native development using Ionic React with Ionic React Hooks (recently renamed to React Hooks for Capacitor). Keep reading if you have basic experience with React and React Hooks. If not, I would suggest getting familiar with React and then hop back on over! Why Ionic React? Short answer? Ionic React is ultimately just... React. Music to my ears. Ionic React is also built using web components, making it compatible with a multitude of web libraries and supports iOS, Android, Desktop, and PWA (i.e. progressive web apps) all by using one shared codebase (I'm hearing music again...). Ionic React Hooks Re-introduced Ionic announced their launch of Ionic React Hooks back in December of 2019. It has recently been renamed and moved to the Capacitor Community org -- @capacitor-community/react-hooks. This package provides a collection of wrappers around Capacitor APIs along with a few other Ioni ## Developer Spotlight: Robert Harris, CTO at Clutch! DevFeed: [Developer Spotlight: Robert Harris, CTO at Clutch!]() Original publisher: [Read original article]() Author: Bobbilee Hartman Published: 2019-06-26T19:00:00Z Content type: article Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [App](), [Mobile](), [Ionic](), [SDK](), [Android](), [iOS]() Tags: [android](), [apis](), [app](), [developer](), [developers](), [ionic](), [ios](), [mobile](), [sdk](), [spotlight](), [stories]() ### AI overview This Developer Spotlight interviews Robert Harris, CTO at Clutch!, about the company's gameday parking marketplace and its use of Square APIs and the Square Reader SDK. Clutch! supports advance reservations and in-person card payments, and its mobile app is built with Ionic for iOS and Android. ### Source excerpt Clutch! is a gameday parking marketplace ## The Latest Firebase Tutorials - Fall 2018 DevFeed: [The Latest Firebase Tutorials - Fall 2018]() Original publisher: [Read original article]() Author: Jen Person Published: 2018-09-27T00:00:00Z Content type: article Language: en Sources: [Firebase Blog]() Topics: [Firebase](), [Tutorial](), [Cloud Functions](), [Test-driven development](), [Realtime Database](), [Firestore](), [Ionic](), [Swift](), [Encryption](), [IO](), [iOS]() Tags: [best-practices](), [cloud-functions](), [community](), [encryption](), [firebase](), [firestore](), [ios](), [jest](), [location](), [swift](), [tutorials](), [updates]() ### AI overview A roundup of Firebase tutorials covering test-driven Cloud Functions with Jest, HIPAA-compliant chat using encryption, Swift integration with the Realtime Database, CRUD apps with Cloud Firestore, and Cloud Functions triggered by Radar events. ### Source excerpt News, tutorials, and updates from the Firebase team. ## Talks: Web meets Mobile powered by Angular DevFeed: [Talks: Web meets Mobile powered by Angular]() Original publisher: [Read original article]() Published: 2017-03-22T00:00:00Z Content type: article Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Mobile](), [Ionic](), [NativeScript]() Tags: [angular](), [ionic](), [mobile](), [nativescript](), [video]() ### AI overview This article reports on a Software Craftsmanship South Tyrol Meetup featuring talks about building mobile applications with Angular, Ionic, progressive web apps using the Angular Mobile Toolkit, and NativeScript for native iOS and Android apps. The article notes connectivity issues with one live broadcast and a later re-recording. ### Source excerpt Lorem ipsum dolor sit amet ## Video Course: Learning Angular Components DevFeed: [Video Course: Learning Angular Components]() Original publisher: [Read original article]() Published: 2017-01-22T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Front end](), [Testing](), [TypeScript](), [Ionic](), [Mobile]() Tags: [angular](), [frontend](), [mobile](), [testing](), [tests](), [typescript](), [video]() ### AI overview The article announces the second edition of a PacktPub video course on Learning Angular Components. The course covers Angular 2 and later, including component concepts, frontend tooling with TypeScript and SystemJS, component architecture, testing, debugging, Ionic 2 mobile development, and Angular Universal. ### Source excerpt Lorem ipsum dolor sit amet ## Interviewing Igor Minar and Adam Bradley for AngularBeers DevFeed: [Interviewing Igor Minar and Adam Bradley for AngularBeers]() Original publisher: [Read original article]() Published: 2016-12-18T00:00:00Z Content type: article Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Ionic](), [React](), [Angular CLI](), [NativeScript](), [React Native](), [bazel](), [Compiler]() Tags: [angular](), [bazel](), [cli](), [comparisons](), [compiler](), [interviewing](), [ionic](), [nativescript](), [react]() ### AI overview An AngularBeers AMA moderated by the author features Igor Minar and Adam Bradley discussing Angular versioning, Universal, mobile development, Angular Material, React comparisons, Bazel, Closure Compiler integration, and Ahead-of-Time compilation. ### Source excerpt Lorem ipsum dolor sit amet ## AngularJS and Ionic performance cheat sheet DevFeed: [AngularJS and Ionic performance cheat sheet]() Original publisher: [Read original article]() Published: 2015-08-24T00:00:00Z Content type: article Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Ionic](), [Cheat sheet]() Tags: [angular](), [article](), [ionic](), [performance](), [v1]() ### AI overview A cheat sheet listing performance tips and tricks for Angular v1.x and Ionic, including one-time binding, track by, disabling debug diagnostics, and loop-related considerations. ### Source excerpt Lorem ipsum dolor sit amet