Example App Updates
The Example App has been a big part of the Scrivito journey, not only for you – our customers – but also for us as developers. We developed the Example App to showcase some of what could be done when implementing a Scrivito-based app. It is used, every day, to test new features of Scrivito and as a basis for tutorials and support queries. We are and will be continually improving the Example App. That being said, depending on when you started with Scrivito or if you are using the Example App as a base for your project, you might be missing some great features. We thought we would compile an overview of the improvements we have recently implemented to prevent any FOMO.
Image Widget Animation
As the Example App is based on JavaScript anyway, you might as well have some wow factor, and animating images is a great option to do just that. By adding some sensible options to the image widget, your editors can easily choose to make images move into place as visitors scroll through your web pages. As well, since the Example App is open source, developers can easily see how we implemented it and customize the animations for your project.
Page and Widget Class Generator
When preparing the page and widget types for a Scrivito project, each of them typically needs the same file structure. Sometimes a developer will just copy an existing object or widget class and modify it, but when building from scratch it can be unnecessarily repetitive. As we are developers first and hate repetitive tasks, we went ahead and built a generator to quickly set up the needed files with sensible defaults for each new object or widget class you would like to build. Check our generator documentation article for more details and start creating faster – with less resources.
Prerendering
As with SEO results, visitor happiness improves with page speed. Initially, we relied on the pre-rendering provided by Netlify to make pages visible to crawlers and bots such as those for Twitter and Facebook. It is still a great option and easy to turn on with no other changes needed. However, on our path to improve load times and make Scrivito sites super fast we determined we needed more. This lead to our own pre-rendering solution where we could decide what gets pre-rendered and present those pre-rendered pages to every visitor. In a nutshell, our pre-rendering uses a headless browser to render all the pages and saves those pages as HTML markup. Essentially, it’s a static site generator, which runs during the deploy process and does not require additional infrastructure. Thanks to the features of React, once the static page is loaded, React hydrates the page and provides all the dynamic functionality you expect from a modern web application. It’s pretty cool, and all the code is already part of the current Example App so it is easy to turn on. Check out our documentation about prerendering for all the details.
Videos in the Headers
Again with the intention to add some wow factor to the Example App, we have updated the headers to include videos in addition to images.
The headers in the Example App are a page level feature that is available in all page types and provides three display options. This flexibility is a multiplier for the design of your site. Initially, there were three options to layout the page. With the addition of videos, your editors essentially have three more designs to choose from, already built in. Keep in mind that some videos are better for page headers; file size, ability to loop and content should all be considered when adding a video in the header. One of our favorite sources of webpage videos is mixkit.
Performance Improvements
Page performance is paramount in today's web, you know. We are working hard to make Scrivito websites the fastest on the web. While we have been fine-tuning on multiple fronts, some things have proven more useful than others. font‑display: swap is one of those.
Page performance is quite the puzzle when you speed up one part, and something else delays the render. Recently, we found that when we got faster, fonts were slowing everything down. font‑display: swap basically just instructs the browser to use a system font right away rather than wait for the fonts we want to load. This all happens in a fraction of a second, loading the fonts you intended usually before the visitor even notices. Our testing indicated that this change resulted in a 55% improvement in the First Meaningful Paint score!
Content Browser Is Smarter
With the release of the Scrivito SDK 1.5.0, the content browser has become configurable. Using the configureContentBrowser API, you can customize the types of objects that are made available. We jumped right in and added this to the Example App for images so now, when you click an Image Widget, the Content Browser only offers images to choose from. See the pull request for more details.
Cookie Consent
Being based in Germany, we are bound to GDPR. One of the requirements is to make visitors aware of any tracking a website performs. Since almost all websites include tracking of some sort, we decided to make it super simple to have a cookie consent form displayed. Again, included in the Example App, all that is needed to activate the policy is providing a link to your company’s privacy policy. This can be done on the homepage, in editing mode, via the site settings. See the pull request for more details.
Simplified Content Security Policy
Content Security Policy (CSP) is an essential part of securing your website. Of course, the Example App included such a policy from the start. However, CSP implementation is not so easy so we set out to make it more simple. Now, instead of a cryptic policy file, we have provided an easily readable JSON file to keep track of your policies. With the new setup, it is a much easier implementation and easier to maintain. As well, we know, there is nothing worse than errors when your site is deployed to production and live on the web so we have enabled CSP for local development, too, meaning that CSP errors and warnings can now be fixed locally so you don't have to worry about them showing up only later in production.
Interactive Google Maps
Interestingly enough, our Google Maps documentation has for quite some time been one of the most viewed pages in our documentation section. It turns out when Google Maps changed their API, we were one of the first to provide a detailed implementation guide using the new settings. While not exactly what we were hoping for in traffic, it was comforting to know that we are on the cutting edge, as intended. The first version of the Google Maps widget we added to the Example App used the API to show a static map based on the default or the specified address. While this was sufficient, we realized that we were missing one of the better features of Google Maps. So we now have interactive Google Maps by default in the Example App. See the pull request for more details.
100 % Lighthouse SEO Score
Well almost, you will see the score for SEO is 93% right out of the box, but we make it super simple to get to 100%. The reason we cannot make the SEO score 100% is because your homepage needs a page description. And while we could provide some great info about Scrivito and the Example App, we worried about the effect on your website if it was not updated. So while the title of this section is clickbait, we hope you understand. Take two minutes, open the properties of the homepage and select the “Metadata” tab. Fill in a page description for your website and publish it, and you will get a SEO score of 100 %. There is a lot needed to get a SEO score of 100 %, but we were able to include just about everything in the Example App already. Most of the requirements will update automatically as you add your own content to the website, but we made it so you can fine tune as needed.
Package Upgrades
Thanks to the power of NPM, we can easily upgrade the packages used in the Example App and keep up with the latest and greatest features of the tools we use. This includes React and, of course, Scrivito. Our team makes a concerted effort to implement, test and release those upgrades as soon as possible. We work to ensure the Example App works flawlessly and includes the latest features.
Space Widget
Oh, and one last thing: we added some vertical space to the Example App.
We use the “space widget” in some of our other projects and thought you might benefit as well. The space added by the widget is adjustable via the widget properties, from .1 to infinity and beyond! (Though we wouldn't recommend the latter as your visitors really do want to see the content underneath it.)
We sincerely hope you enjoy these upgrades as well as the many smaller ones we decided to not write about, like a cleaner console output. As the Example App is open source, you can see all the changes we made any time by perusing the closed pull requests. If you have a feature or improvement you would like to see or share, please let us know, or send a pull request.
