The essential news about content management systems and mobile technology. Powered by Perfect Publisher and XT Search for Algolia.
The News Site publishes posts to the following channels: Facebook, Instagram, Twitter, Telegram, Web Push, Tumblr, and Blogger.
We’re so excited to announce the release of Ionic 7.4 with updates to Datetime, Checkbox, Radio, Toggle, and more!
Here’s what’s new
In Ionic 7.1 we shipped new features for styling Datetime. We are excited to ship another Datetime styling feature in Ionic 7.4 too!
The new calendar-day
CSS Shadow Part allows
developers to style the individual day buttons in the calendar grid
layout. We also added active
, today
, and
disabled
Shadow Parts so developers can customize
these day buttons based on state.
ion-datetime::part(calendar-day) {
color: purple;
}
ion-datetime::part(calendar-day disabled) {
color: gray;
}
ion-datetime::part(calendar-day today) {
color: purple;
border: 1px solid purple;
}
ion-datetime::part(calendar-day active) {
background: purple;
color: white;
}
New “stacked” label placement styles have been added for the Checkbox, Radio, Range, and Toggle components. This feature allows the visible text label to appear stacked on top of the control. The “alignment” property was also added to handle how the label and control are aligned when stacked.
<ion-toggle
label-placement="stacked"
alignment="start"
>Enable Notifications</ion-toggle>
In previous versions of Ionic, asynchronously setting the
value
property on Datetime would not update the
Datetime view if the component was already visible. This was done
to avoid a scenario where the Datetime view updates while the user
is interacting with it. However, this caused an issue when the
Datetime’s value was loaded asynchronously such as from a remote
server because the view would not update.
In Ionic 7.4 this behavior was revised to always update the
Datetime view when the value
property changes. We have
also updated the Datetime documentation to note this behavior and
make developers aware that they should hide the Datetime until the
value is set to avoid the previously mentioned issue.
Custom page transition functions receive an options
payload that has information regarding the transition about to run.
The TransitionOptions
interface was exported to add
stronger types to that payload.
The getIonPageElement
function was also exported to
make it easy to select both the entering and leaving views’
.ion-page
elements.
Thanks to hoi4 for contributing this feature!
Developers can install Ionic 7.4 from the latest
tag on NPM:
# Ionic Angular apps
npm install @ionic/angular@latest
# Ionic React apps
npm install @ionic/react@latest @ionic/react-router@latest
# Ionic Vue apps
npm install @ionic/vue@latest @ionic/vue-router@latest
# All other Ionic apps
npm install @ionic/core@latest
Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!
The post Announcing Ionic 7.4 appeared first on Ionic Blog.
Read more https://ionic.io/blog/announcing-ionic-7-4
Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!
abs()
is
deprecated since Dart Sass v1.65.0. It resulted in a deprecation
warning when compiling Bootstrap with Dart Sass. This has been
fixed internally by changing the values passed to the
divide()
function. The divide()
function
has not been fixed itself so that we can keep supporting node-sass
cross-compatibility. In v6, this won’t be an issue as we plan to
drop support for node-sass.<mark>
color customization for color
modes.Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:
npm i bootstrap@v5.3.2
Read the GitHub v5.3.2 changelog for a complete list of changes in this release.
Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.
Read more https://blog.getbootstrap.com/2023/09/14/bootstrap-5-3-2/
If native mobile app testing makes you feel like you’re stuck in a “for” loop without an exit condition, then Native App Previews in Appflow are for you! Appflow, the mobile CI/CD solution built by Ionic, now offers in-browser testing on native virtual devices for both iOS Simulator and Android Debug builds.
Developers can now build and test their apps without ever leaving the Appflow dashboard.
For cross-platform mobile developers, ensuring your app works across multiple devices is a critical but tedious process. Even testing on virtual devices requires complex software dependencies and device configurations. Plus, for iOS testing, you need Mac hardware.
Native App Previews remove the headache associated with native virtual device testing. Gone are the days of context-switching between multiple platforms or tools.
And the best part? You can test your app on a variety of devices and operating systems, ensuring your application’s performance and compatibility across the board. You can even capture network and debug logs to better identify what’s happening when your app doesn’t work as expected.
The previews are accessible via a secure URL, enabling collaboration between your development and QA teams, as well as with stakeholders. Share the latest build of your app, and the recipient can interact with it immediately on a simulator or emulator – no installs required.
Native app previews are available for iOS Simulator and Android Debug builds on all paid Appflow plans.
To enable, select the “Native app preview” option for a new simulator or debug build.
Once the build is complete, either click the eye icon to preview the app from the Builds list, or click the “Preview app” button from the build log.
This will open a new window with the preview. Under the hood, Appflow leverages Appetize.io to install your app on a virtual device for testing. You don’t need a separate Appetize.io account to use this feature — the functionality is built right into Appflow.
From here, you will see the device emulator, followed by options for your testing session. You can customize the device size, the device type, the device OS if applicable for your build, and also enable network and debug logging.
Tap the on-screen device to install the app and start testing! You will be able to interact with your app just as you would on a simulator or emulator, without needing to set up a test environment on your machine.
If you’re already using Appflow for native builds, getting started with Native App Previews is a few clicks away. Learn more about available Appflow plans here to streamline your mobile app testing today!
The post Simplify native build testing with Native App Previews in Appflow appeared first on Ionic Blog.
Read more https://ionic.io/blog/simplify-native-build-testing-with-native-app-previews-in-appflow
Bootstrap Icons v1.11.0 has arrived with 100 new icons—including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at over 2,000 icons!
Here’s a quick look at all the new icons in v1.11.0:
Check out the pull request for all the details on which icons were added and which were updated.
I’ve also started adding a new added
tag to icon
pages with this release. So far I’ve only tagged v1.10.0 and
v1.11.0 versions, but more will come. Once those are all tagged,
you’ll be able to search for icons added in each release. Stay
tuned!
Looking for more new icons? Head to the issue tracker to check for open requests or submit a new one.
To get started, install or update via npm:
npm i bootstrap-icons
Or Composer:
composer require twbs/bootstrap-icons
You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
Read more https://blog.getbootstrap.com/2023/09/12/bootstrap-icons-1-11-0/
Whether you’re building for the web or mobile, we’ve all faced one of the greatest enemies of developer productivity – build errors. You’re on a roll, making great strides, and just when you’re about to deploy, a build error throws a wrench in your momentum.
Investigating and resolving build errors can be time-consuming and often frustrating, but not anymore. We’re thrilled to introduce a new feature to the Appflow mobile CI/CD platform: Appflow Assist.
Appflow Assist is not just another troubleshooting tool. Powered by artificial intelligence through OpenAI, it provides smart, actionable solutions to your build errors. Rather than sifting through logs and piecing together solutions from various sources, let Appflow Assist guide you through the resolution process with tailored tips based on your specific error.
Using Appflow Assist couldn’t be more straightforward. If your build fails, click on the problematic build in Appflow. At the top of the build log, you’ll find the new option to “Generate Solution.” Click on it, consent to proceed, and within moments, you’ll be presented with insights and recommendations derived from the exact error causing the build failure.
With Appflow Assist, we’re aiming to drastically cut down the time and energy developers spend on troubleshooting. We believe in empowering developers with the tools they need to remain in their creative flow. By swiftly addressing and resolving errors, teams can maintain their pace, ensuring quicker deployments and reduced downtime.
This is one of many new features the Appflow team has introduced recently, all with the focus on improving the mobile deployment experience. We’ve also added expiration warnings for your signing certificates, separated the build and deploy processes to better understand why failures occur, and made improvements to the Appflow UI.
Give Appflow Assist a try during your next build error, and experience the future of troubleshooting. Not using Appflow yet for cloud native builds and automations? Sign up for a free account today.
The post Introducing AI-Powered Troubleshooting for Your Builds appeared first on Ionic Blog.
Read more https://ionic.io/blog/introducing-ai-powered-troubleshooting-for-your-builds