Wappler 1.7 — a Holly Jolly Christmas Release

Just before we hit those eggnogs during Christmas and parties, we’ve been working hard to bring you even more goodness in Wappler!

Now we’ve greatly redesigned the Database Query Builder to look awesome, we also have totally rewritten the FTP connectivity on Windows! No more external dependencies on Windows — you just need to install Wappler and everything will be included. Of course we also fixed lots of bugs you reported and included some brand new components like App Connect Lazy Load, so you can make even more powerful and faster loading sites!

New Components

App Connect Lazy Load — Fast, intelligent and responsive image lazy loader! Now you can load pages, containing hundreds of images in just the blink of an eye!

Support for responsive images using srcset attribute, so you can serve different images depending on visitors’ devices viewport sizes. The device will only load the image that fits its size, which is really efficient in saving bandwidth and optimizing load times. You also can set a preloader image or a low quality image preview to be displayed while your image is being loaded.

Intelligent Image Loading

The App Connect Lazy Load will make sure to load the necessary images when they enter the viewport. This means that if users don’t scroll all the way down, any other images placed at the bottom of the page won’t even be loaded to optimize load times.

Image Placeholders

You can also choose to use a placeholder or a low quality version of the original image, these will be shown while the original image is still loading.

Low quality image

Animation Options

As shown below, you can animate the images once they are loaded, thanks to another component in Wappler called — Animate CSS. Here are the other two components combined to create beautiful animation effects.

Animate CSS

Improvements

Last week we managed to improve some of the components in Wappler, take a look down below:

Swiper’s Responsive Options

The Swiper component has been updated with even more responsive options. App Structure and Styles Panel have also been greatly improved thanks to all of your feedback! We have added new options for spacing and the number of slides displayed per page, depending on screen size.

App Connect Shortcuts

With App Connect, you can now use all of your keyboard keys as shortcuts, to control any events in App Connect — you can show modals, update records, change slide, etc…

Styles Panel

The editing of CSS rules in the Styles panel has also been improved.

Showcases

For this showcase we used App Connect Lazy Load for the images on the page. The script loads images only when they needed — when they enter the viewport, resulting in a really fast page loading time. We enhanced user experience by applying a fade in animation to the images, once they are loaded. Take a look at the showcase here!

Tierpark Lange Erlen Website

This week we present you the new website of Tierpark Lange Erlen and Erlen-Verein Basel, built by Swiss Web Factory using Wappler.

The site has been completely redesigned and developed with a responsive, modern new look, so it looks great on any device. The site features many of our Wappler tools — slideshows, masonry grids, navigation, video player, many of the bootstrap 4 components, animations. The data is being present on the front-end thanks to App Connect and Server Connect.

You can visit the website here.

Responsive Swiper Portfolio

For this showcase we used the Swiper component in order to create a responsive photography portfolio page. The Swiper is configured to display different number of slides per page, depending on the screen size: 1 for phones, 2 for tablets, 3 for laptops and 4 for larger screens.

Take a look here.

Not using Wappler yet?

Download Wappler here, and don’t forget to join our community forum! Share your experience, get help, showcase your work or just have nice chat with others.