Chapter 6. Troubleshooting
No technologies or libraries are without bugs and issues at the beginning of their development. impress.js also has its share of bugs and limitations. As developers or designers, we should be capable of handling bugs and creating workarounds.
impress.js has an active community and hence you can report bugs or limitations and get solutions very quickly. This chapter will focus on providing the necessary knowledge to troubleshoot impress.js presentations when required.
In this chapter, we are going to cover the following topics:
Browser compatibility
Handling unsupported browsers
Limitations and new features
Troubleshooting and support
Even though impress.js is a presentation framework, it runs inside the browser window, so the compatibility of browsers needs to be taken into consideration when creating presentations. Let's take a look at supported and unsupported browsers and devices for impress.js.
impress.js uses transforms of CSS3 and hence it is mainly supported in web browsers, compared to mobile browsers. The following is the list of supported browsers for impress.js:
Firefox Version 10 and higher
Safari Version 5.1 and higher
Chrome
Internet Explorer 10 (needs additional polyfill libraries)
Currently, impress.js provides very limited support for mobile-based devices. The following is the list of supported devices for impress.js:
If you are using impress.js for presenting information, make sure you use one of the three browsers which provide comprehensive support. In case you are creating websites or applications accessed by online users, it's preferable to mention the supported...
Handling unsupported browsers
In browsers which do not have the support for impress.js, presentation steps will be displayed all over the place without proper alignment or design which can make it very hard to read. Since users don't have a clear idea about impress.js, it's common that they will consider it as a bad design which is going to ruin your reputation as a designer.
It is thus recommended to provide a notification for users using unsupported browsers. impress.js has an in-built method to provide this functionality using CSS classes. There are two predefined classes called impress-supported and impress-not-supported. When the browser is not supported, the impress-not-supported class will be assigned to the body element and when the browser is fully compatible, the impress-supported class is added to the body.
Now let's create the fallback message for the user. The following is the message used in the default official demo:
Limitations and new features
impress.js was built to create presentations even though we are interested in some amazing other applications with the framework. It is improving every day and there are a few limitations in some scenarios. Also, there are new functionalities which might add a tremendous boost to the power of impress presentations. In this section, we are going to figure out the limitations and necessary improvements that we are hoping to see in the future. We will look into the following list in this section:
Positioning steps relative to other steps
Defining the previous and next steps
Transition duration for individual steps
Adding and removing navigation keys
Creating substeps
Positioning steps relative to other steps
We define the positioning of elements using the data-x, data-y, and data-z attributes. For each step, we need to provide absolute values such as data-x=100 and data-x=300 , but it would be more appropriate to position steps relative to each other using syntax similar...
Troubleshooting and support
impress.js is not only used for presentations. We might find bugs on the core framework when we are trying to provide custom functionalities for our applications. It's our responsibility to report such bugs using the official Github site. impress.js has an active support forum where people will solve the bugs or new features in core impress.js or their own branched versions of impress.js. Once we identify an issue, first we have to go through the existing and fixed bugs list to see whether it has already been taken into consideration. Otherwise, you will have to report it and look for answers from the people who are using and developing impress.js.
The following screenshot shows us a list of existing and fixed bugs:
All your new ideas and feature requests should be submitted using the http://github.com/bartaz/impress.js/issues/new link. The active issues list can be found at https://github.com/bartaz/impress.js/issues.
Throughout this book we learned about various types of presentations and techniques using impress.js. Since every library has its limitations and issues, we need to have the proper knowledge to fix those issues without much trouble.
We identified the limitations and issues of impress.js and discussed possible solutions to get around them. Finally we learnt where to look for support in case we are not capable of fixing errors, so we discussed how to report bugs and get your issues resolved using the Github site for impress.js.
Now we have come to the end of creating impressive presentations with impress.js. You should be capable of building different kinds of presentations with impress. In Appendix, Impress Tools and Resources, we will be looking at some of the cool impress presentations and applications.
