Learn how to configure LeoFinance on your phone to browse and engage with the best user experience. We will create a lite-app with optimized screen-space (full-screen view), reader view, custom search bar and more.
You can undoubtedly apply this method for any frontend, or website.
This post is also available in French here.
Context of this post
While engaging under @taskmaster4450leās The Leofinance 12K Comment Push post, I mentioned that I had configured a lite-app of LeoFinance so that I could easily engage on my phone. It sparkled some interest from @shawnlauzon, @amr008, @jfang003 and @taskmaster4450le himself. I briefly explained that I was using Hermit to do so, and what were the benefits over just using the browser. I asked if I should create a detailed post and they encouraged me to, so here I am!
Hermit, lite-app creator
Before I share how I configured a lite-app for LeoFinance using Hermit, we need to know what it is.
Note that there might be other ways to create a lite-app, Iām using Hermit because I have been using it for some years and it suits me well. Iāll let you do your own research.
Replace large, bulky, slow native apps with tiny, lean, blazing-fast Web-based Lite Apps.
āSufficiently advanced technology that is indistinguishable from magic.ā
ā¢ But thereās no magic. Lite Apps are still Web applications.
ā¢ Hermit offers an excellently-designed app to wrap them into a thoroughly enjoyable experience. See our reviews!
ā¢ Each Lite App opens in its own app-like window.
ā¢ Hermit doesnāt open new windows if your Lite App is already open (unlike other browsers!)
ā¢ Links clicked in other apps open directly in Lite Apps.
ā¢ Every customization setting is configurable individually for every Lite App.
ā Hermitās Playstore description.
As you can see I have created multiple lite-apps, each has its own settings.
I find that the mere fact of having LeoFinance on its dedicated app window already makes for a better user experience than having it as a tab in your browser. (Oh and if youāre wondering: yes these can be added to your homescreen).
Now lets dive in and create a lite-app for LeoFinance.
Setting LeoFinanceās lite-app up
Overview
This is the view I get when browsing in the lite-app. As you can see, the entire screen is dedicated to LeoFinance.io, no distracting top and bottom bar that takes too much space.
Creation
Install Hermit and open it.
Type https://leofinance.io in the search bar and press enter. Before logging in, drag from right to left to open the right side panel and press ā³create a Lite Appā³.
Choose a title for your app and press ā³createā³.
You can now login. Once youāve successfully logged in, it will remember you.
Settings
You can customize your lite-app when opening the right side panel.
If you go under More Settings > Behavior you will see this.
I recommend disabling Pull to refresh as it can act weirdly when you scroll up.
I personally check Frameless to hide the top bar. And I check Scroll to Top to... scroll to top.
Reader mode
Something cool for a blogging platform, is the ability to extract all the text of a post and display it in reading view:
To do so, open the right side panel and click Reader. Please note that any link and styling will disappear.
Privacy
Under More Settings > Privacy you have a bunch of options. I let you explore them.
MOST OF THE FOLLOWING FEATURES ARE FOR PREMIUM ONLY. Thatās unfortunate I forgot about that... I am premium since a long time so I can show you these features, itās up to you to decide if you need them or not. Premium is a one time purchase of around 6 bucks I believe.
Style
There is a night mode available for both free and premium users, but it doesnāt work well with LeoFinance, and LeoFinance already has a clean dark mode so I would rather use it.
Under More Settings > Theme, I have this:
I use a custom icon because the one retrieved from LeoFinance.io was low quality. I got it from Reddit (here).
I set a custom color in the last section. It is the color of the notification bar.
I like to create a sense of uniformity so I used the color of the LeoFinance top menu which is #0F171F.
If you prefer to use the dark mode background color, to create uniformity when reading a post, then you want to use #1E2E3E instead.
Custom notifications
You can setup custom push notifications under More Settings > Notifications. I have not been able to have something functional yet š„ Any help is appreciated! There is a great helper page that I used, but nothing that I tried worked so far.
Here is what I tried: I first though of being notified when there is text update in @crazy-unicorn/notifications. However it canāt work as JavaScript is needed to load the notifications. So I tried with @crazy-unicorn/replies with the CSS selector .panel-body. In theory it should work, but it doesnāt and I canāt figure out why.
Anyway, this is a feature, and I will have it working eventually š Again, any help is welcomed.
Custom search bar
This is something easier to setup. You type a link, and you add %s where you want your query to be placed in the link.
For example if I setup my custom search with https://leofinance.io/@%s and then search for leo.voter, it will load @leo.voter.
Apparently you can also configure your lite-app to be available when using a share feature from an other app, but I havenāt look into that.
Bookmarks
If you drag from left to right you will open the left side panel.
You can then add links to have quick access. I have put https://proofofbrain.io even if I could have created a different lite-app. You can for example put https://hivestats.io/ and https://leopedia.io/ those would be a good fit I guess but itās up to you.
Please let me know if you have any question!