Status bar covers part of navbar, and keyboard hides input…
*Where do you put cordova code in f7+ vue.js? for example code to control back button in the whole app?
*Android back button closes the app
*Google Autocomplete closes on selection without value
*Make ajax call in the background
*How to use localstorage
*Inline calendar not showing
*F7 panels slow peformance on Android(Box shadow issue)
When I remember more, I will post them…
Thanks for the great work @nolimits4web…
Let’s return to this topic. Sorry, but somehow it didn’t proceed.
Please guys, share your most common problems/issues/misunderstandings you had or have with Framework7. I will start working on this next week
Data binding and in particular data management between external resources and a webapp cq your UI are far from trival. Vue, React and Svelte make use of (data) stores but what would be considered best practice for F7core without using one of those three? Personnally, I like very much the way Svelte handles this problem. A guide or blog about this topic might help newcomers to Framework7 who want to use external data (provided by an API) at the client side.
The purpose of this topic is to collect CSS and JS libraries which are complementary to Framework 7. It is not intended to create another “awesome” list but to avoid re-inventing the wheel by sharing our collective experience. Finding multiple libraries that might fit your requirements is one thing but finding out how well the solution fits is also a time consuming effort.
Great solutions such as React, Vue, Svelte and Electron are complementary but deserve an topic entry on their own. Therefore I propose to narrow the scope to complementary libraries preferable not depending on other libraries.
The following two libraries are mentioned and recommended earlier in the Framweork 7 forum. They can also be used as an example for the amount of information c.q. level of detail I had in mind: just a summary and a reference to the library. No justification or review. Likes in the forum could be indication whether other members agree with the proposed library but the amount of stars in Github might also be an important indication of the useability and quality.
One day this thread might be more suitable as part of a tips & trick or best-practises collection. Until then, feel free to add you experience with addition CSS or JS libraries. Sugestions for other F7 complementary functionality are compression and encryption.
Again, the main purpose is to be aware of the existance of Framework 7 complementary libraries based on positive experiences. The judgement of a library is applicable for your application is up to you.
A JavaScript library for reorderable drag-and-drop lists.
Client side storage
I distinquish three different uses cases to store data at the client side:
easy storage below 5 MB which can be performed by using localstorage
storage less then 50 MB with roughly the same simple API as localstorage with an almost similar name: localForage.
storage less then 50Mb with query functionality and database versioning: Dexie.js
Note: only the last two are actual complementary libraries.
Localstorage and IndexedDB are default supported within browsers. localForage and Dexie are wrappers for IndexedDB and both simplify the API of IndexedDB.
localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API. It uses localStorage in browsers with no IndexedDB or WebSQL support.
localForage is a key-value based storage just like localstorage with simple set and get functionality. To find all objects that match a specific set of attribute conditions, you have to iterate yourself.
Also key-value based but with additional functionality to find all objects which match one or more attribute conditions.
Another feature is database versioning which allows you to implement backward compatibility in case your applications needs to be extended with other or different fields.
To detect what HTML, CSS and JavaScript features the user’s browser has to offer.
It allows you to detect the actual availability of next-generation web technologies and to deal with browsers who are not ready yet in an adaptive/responsive way.
There is a download page where the features you want to use in your project can be selected, to provide a smaller/customized build of Modernizr.