The essential news about content management systems and mobile technology.
Powered by Joocial & JoomGap.

As many of you know, we’ve been working incredibly hard to make Ionic a great option for building Progressive Web Apps, and today I’m happy to announce a project that furthers those initiatives: The beta release of the Ionic PWA Toolkit!

The Ionic PWA toolkit is the recommended way to easily build fast, production-ready PWAs with Ionic. Let’s dive in and go over why we’re building this, what it offers you as a developer, what’s in store for the stable release, and finally, how to get started using it!

PSA – if you are not familiar with what PWAs are, make sure to read this overview first.

Why?

PWAs have become the de facto way to ship a great web experience to your users, but they have been very challenging to build. Making sure you are code-splitting your bundles correctly, lazy-loading them, handling service worker updates correctly, following best practices, etc. can quickly turn into a mountain of engineering work.

We looked at these challenges and, with inspiration from the Preact CLI and the Polymer App Toolbox, realized we had a unique opportunity to create something that would make building great PWAs dead-simple. And thus, the Ionic PWA Toolkit was born.

What do I get from it?

Everything you need to easily build a great PWA!

  • Ionic
  • Routing
  • Stencil
  • Push Notifications setup
  • Showing a toast when a new version of the PWA is available
  • Unit Tests
  • Pre-Rendering
  • zero config lazy-loading
  • zero config code-splitting
  • Polyfills selectively loaded depending on the browser support
  • ES6 by default for new browsers, ES5 for older browsers
  • Everything needed for an add to homescreen PWA (service worker, web manifest and iOS meta tags)
  • lazy-img component for lazy loading below the fold images

Let’s go over some of the key things in this list:

  • Ionic: We have been hard at work on porting Ionic to web components and the Ionic PWA Toolkit is using an early release of Ionic. This means you have all the awesome pre-designed, pre-built UI widgets that you’re familiar with from Ionic-Angular, but ported to Web Components.
  • Stencil: Stencil is a compiler that makes it easy to build Web Components that are automatically lazy loaded and code split. Check out stenciljs.com for more info!
  • Push Notifications: All of the boilerplate code for web push notifications, including the service worker, are included out of the box saving you time and setup.
  • Add to Homescreen: We include a service worker (thanks to Workbox), a web manifest, and the correct meta tags for iOS. This means your PWA can be added to the homescreen on both Android and iOS devices out-of-the-box.

When is the 1.0 release?

The team is fast approaching the next big release of Ionic (v4), which as mentioned above will be ported to Web Components. This means you will be able to use the Ionic components you know and love in Angular, Vue, React (really any framework of your choice), or even with no framework at all!

Also, as we head towards a 1.0 release of Stencil, the Ionic PWA Toolkit will be updated to use it as soon as it is released. The 1.0 release of Stencil will be even smaller and faster than the current release thanks to our use of Dynamic ES Imports. We’ll have more to say about this soon, stay tuned…

And finally, one of the best features we will soon be adding is an integration with our upcoming Ionic PWA Hosting service (part of Ionic Pro)! Ionic Hosting provides zero config, PWA-focused hosting with all the best practices built in, and performance best practices such as zero config HTTP2 push out-of-the-box.

Get started today

The Ionic PWA Toolkit is available on GitHub. To get started, simply follow these directions. As you’ll find out, it’s incredibly simple to get going – you’re only a few commands away from building your next great PWA!

As we continue our work on making PWAs a first-class citizen in Ionic we also want to make sure that its incredibly easy to make any Ionic app, including ones built for the app stores, work as a PWA. We are working hard on a project called Capacitor(formerly known as Avocado) that will bring this to reality. Keep an eye out for more on that in the future!

We’re excited to finally release the first beta of the Ionic PWA Toolkit, and even more so to see what you build! As with any beta release, you may find some bugs, but we feel confident it’s stable enough to successfully build great PWAs. If you do find any bugs feel free to open an issue here. Let us know what you think and feel free to provide feedback in the comments!

Read more

XT Adaptive Images 4: Support of HTML's new responsive image attributes

We have released XT Adaptive Images 4.0. This new major version of the plugin brings with several big news for responsive images generation:

  • Adaptive Images, we have rewritten the code to empower the following techniques and implemented unit testing to confirm that it works reliably in all cases. 
  • HTML's new responsive image attributes, the new version can generate an image adapted for the screen and declare all the available image sizes in the new srcset and sizes attributes. For more information about the HTML features,  Responsive Images Done Right: A Guide To picture And srcset
  • Lazy Load, we have updated the original stable version of the jQuery plugin and added a new Vanilla Lazy Load (beta) alternative, with support of srcset and sizes attributes.
  • Compatibility with Joomla 3.8 or superior. Including compatibility with Joomla! 4.

This new major version also embodies a new direction in our development practices, where we manage the process to include unit testing and best coding practices as part of the general methodology to produce high-quality software for desktop and mobile devices.

To the moon!

Read more

JD Consult Template for EasyBlog

It's finally Friday and we would like to introduce to you a brand new template exclusively designed for EasyBlog, by none other than the awesome team of JoomDev

Read more

ConverseKit 1.1.2 Update

As we enter the third week into 2018, we have a maintenance update available for ConverseKit. 

Read more

UIkit 3 Beta 36 released

Happy New Year, everyone! Let's start 2018 with UIKit Beta 36 and its highlight – the new Slider component. Other great features in this release include improvements of the uk-video attribute, more accessibility and some neat extras.


Slider

The new Slider component allows you to display multiple content items at once. You can slide through the row of items, smoothly revealing new ones. The Slider was written from scratch, sharing its code base with the Slideshow component. Thanks to this modularity the UIkit JavaScript only got 2KB bigger (gzipped) in file size including the Slider component and all other improvements. We think that's really great! And remember, all this works without jQuery dependency! :-)

The new Slider allows you to do everything that was possible with its predecessor from UIkit 2. It's fully customizable, responsive, and supports swipe and touch navigation as well as mouse drag. Other Slider features include center mode and infinite scrolling. When clicking through the items, the Slider keeps up with your pace, so that no click or swipe is lost. Meanwhile, hardware accelerated animations ensure smooth transitions. You can apply the Grid component to add gutter and use different classes from the Width component to define the size of all items and build the Slider you want. If no width classes are used, each item's width depends on the dimensions of the content itself. Of course, you can also create a Slider that extends to full viewport height. Both the Slideshow and the Slider are able to generate their dotnavs automatically when there is no item specific content in the navigation items. The dotnav of the Slider even recalculates the number of hidden items depending on the Slider's width. By the way, the Slider and the Slideshow now also have RTL support, so both adapt perfectly to websites using right-to-left languages.

Scrolling through sets

The new Slider combines the functionality of the Slider and the Slideset that you know from UIkit 2. You can now choose if you want to loop through single items or sets of visible items. The number of dots in the navigation will also adapt automatically depending on how many items are visible on the specific viewport. The Slider now offers the Slideset functionality, the only difference is that the Slideset offers different animations. For this reason, we have decided not to implement a Slideset component into the UIkit 3 stable release. This puts into question whether a new Slideset is even necessary. What do you think?

Video Component

Apart from the Slider, the uk-video attribute was improved as well. Now videos play and pause when they enter or leave the viewport. Since it's recommended to use videos instead of animated gifs due to their smaller file size, we can now deprecate the uk-gif attribute, which does the same as the video attribute but for gifs.

Accessibility

The accessibility of UIkit has been greatly improved. The Transition and Accordion components as well as the show on hover functionality from the utility component are now accessible through the keyboard.

Breaking Change

There is one tiny breaking change in this release: To make it keyboard-accessible, the accordion title now uses <a> elements instead of headings. See the Accordion documentation.

Removed Support

In the new release we have removed support for iOS and IE10 and also most -webkit and -moz vendor prefixes. This results in a smaller UIkit CSS file size.

What's Next?

This is an huge UIkit release with many improvements under the hood. For the full list check out the changelog. We are now on the homestretch for the final UIkit 3 Stable release. Masonry Grid and Priority Nav are next, which will complete UIkit 3. We hope you'll enjoy working with our new Slider! Stay tuned and give us your feedback in the comments section.

Read more