@s-molinari said in Did you get support from the Quasar Dev Team or the Community?:

… And, we only can help during or own free time, so there isn’t any SLA to answer within 24h or the like. To be honest, the attitude you seem to have about OSS and how it should be “supported” is out-of-place.

just a thought - I always believed that it is we, who has a duty to support the open source authors, help them, be kind to them and praise them - not the other way around! It is they, who give something for free, something most valuable in their life - their time. It is they, who create something instead just consume as most others. Just $0.02 here.

@rstoenescu @s-molinari

Hmm, as an unfortunate author of this charming “solution”, please take my advice and do not incorporate this trick/hack at the framework level into Quasar. Yes, it looks nice in developer eyes, but it is valid only in specific situations and taking it out of the context of the whole typography would be IMHO more hurting to the image of Quasar as a CSS web pages platform.

Why?

1. Typography is about visuals, rhythm, beauty, composition. This hack is an algorithmic take on font sizes and it is linear in nature. In reality, the scaling of visuals should be non-linear and adjusted to the page purpose, specific font etc. If we will encourage designers considering Quasar as their next tool, to use linear design (at the framework level), they will laugh us off. It should be a developer decision if he wants to use linears in his specific web page.

2. Yes, it is only part of “typography” as a whole and it is rather crippled part. The more advanced take to font scaling (only) at the LIBRARY level is here:
   https://github.com/twbs/rfs
   If at the APP level, one would want to use this LIBRARY, then one would only need to:

npm install rfs --install

and in their app.styl code:

@import "../../node_modules/rfs/stylus";

Why is it encouraged to use this library and not incorporating anything into the framework? It is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency. Why is it important? Because for example “my” solution doesn’t work fully on safari browser. There are specific quirks which this library handles and my hack does not. There is a documentation of how and where use or not to use scaled fonts (not on HTML tag).

1. Why typography is so important on web pages (and even on web apps)? What is this typography anyway? Well, there are so many tutorials, books and knowledge. Those are interesting at the beginning:
   https://css-tricks.com/typography-for-developers/
   This one touches of the tip of the iceberg - rhythm:
   https://www.webfx.com/blog/web-design/css-typography-02/
   There is a beautiful parable - I’ll cite “The concept of vertical rhythm is simple: Line heights, margins, and padding should all be equal or within even proportion.”. Even if a daveloper knows how to use CSS typography properties (so many…) does she understands what rules needs to be followed and which ones could be broken?
   This is nice one too:
   https://practicaltypography.com/
   … and many more.

2. What can I do anyway? Well I’m strongly encouraging to somehow incorporate Bootstrap design concepts into Quasar, but not necessarily at the framework level, but rather as friendly agreement to “not reinvent” Quasar own solutions, in a way, which would prevent using of knowledge and solutions accumulated in Boostrap as a concept. As I said in previous posts, the key is to convince thousands of developers from Bootstrap to convert to Quasar.

3. Can I use Boostrap already in Vue and link it with Quasar? There are solutions at the Vue level for example:
   https://bootstrap-vue.js.org/
   https://medium.com/@BjornKrols/integrating-and-customising-bootstrap-4-in-vue-js-cbc29ba7688e
   But they won’t be rather compatible with Quasar, because Quasar, at the framework level, intentionally or not, is using similar CSS classes to Boostrap, and it would just make a mess if one would want to use those two CSS system at the LIBRARY level.

4. Why am I differentiate “framework”, “library” and “app” level? At the framework level there is an “inversion of control”, at the “library” level it is the “app” who decides where “control” is, and the “app” is where the “interaction” is. Without “interaction” there is only “web page”.

5. OK, so what are the options to play along with Boostrap4 in Quasar? Quasar is based on “material design” and Boostrap is not, so why we even are talking about that? Because the most important are those designers/developers to convert and thousands of web page templates and snippets to use. We do not need to USE the B4 as a base for Quasar, we only need to have “possible way” to use hard learned B4 skills in Quasar environment. It is sufficient for Quasar not to prevent this (as it is doing now). Have it be done in Vue? Yes, there is a project MDBootstrap - “Material Design with Boostrap in Vue”:
   https://mdbootstrap.com/docs/vue/
   The name is perfect, becuase this project, as it is claiming, converted 800 000 developers to using Bostrap in Vue! This is the scale of traction we are talking about.

6. How is it possible for this project to be this successful? It allowed to use B4 skills and promised to multiply the productivity by using Vue. This project is focused on presentation, which is Quasar weakness. If Quasar would incorporate some of the design elements/concepts/ideas from MDB, than because it is a superior FRAMEWORK it would just offer a win/win.

7. In essence - we really do not need to follow the path of manually dealing with every css typography property or scaling or visual specifics. It is Vue and it is 2019. The MDB project has something like “Sections”. Please take a look:
   https://mdbootstrap.com/docs/vue/sections/demo/
   This is what we (as “we” developers") need at the end of the day: the highly configurable web page compound elements, with superior layout, excellent typography, visually atractive and highly configurable sections of blog, contact, e-commerce, features, intros, magazines, projects, social, teams, testimonial, and of course, jumbotron. With those “bricks” the Quasar would not only be an excellent app platform but also web page platform. In MDB those sections are highly compatible with B4 semantics and this is why this project is so succesful at developer acquisition. In MDB they are manually converting those web templates and snippets (but it is possible and it is simple), in Quasar we just could write something to automatically convert existing B4/MDB templates/snippets (ideally of course).

8. What am I proposing? There is a concept of App Extensions in Quasar. It is just ingenious. What we need in V1 is to not overwrite CSS classes from B4 (which would allow to use some of the B4 concepts) and make an App Extension with default sections for web page developers (maybe even the same as in MDB - they’re great). There is a twist - in specific demos, there should be examples of incorporating Quasar app components in those sections! It would be just a killer feature for thousands of developers. They couldn’t resist the temptation to finally use something app centric on those boring web pages, they are making every day, just to bring some food on the table.

As a learning project I created a repo with BEX technology, as of now, it can interact with specific page, inserts some DOM and propagate events from host page to BEX, persists data between page changes, executes some privileged operations and some more stuff.

This is a learning/testing project. I would GLADLY donate this repository to Quasar devs as an example of BEX awesome technology. It is a starter of course, but it looks interesting. We as a developers alway like examples and code ready for copy/paste, so such projects will be useful.

This is the repo:

https://github.com/qyloxe/qbexlinks

In readme.md there are some questions, I think the main problem is why this doesn’t work in Firefox and how can w debug/test this on Mozilla platform. Unfortunately Chrome is better in this, there are more meaningful error messages for example. It worked in Firefox at the beginning but after changes to manifest.json and maybe in some other places it stopped working.

Firefox is important IMHO because it offers a sidebar technology for BEX. In Chrome there is no sidebar unfortunately.

All questions and comments are welcome. PR or anything on Github even more. Happy coding!

@rstoenescu said in fluid typography - SOLVED:

… Quasar is looking into the future and sets its own high and modern standards. And yes, in order to make progress in web development you need to break the current establishment. Otherwise we’d all be continuing to write websites in cgi-bin / perl today too, because maaany years ago that’s what developers were accustomed to. And what most developers are accustomed to at one point in time doesn’t actually mean it’s the best solution or the “definite” solution, and Quasar will never bend into choosing what we believe is not the optimal path to high quality work, not even over money.

We now have limited resources, but if you take a look at what has been achieved here then imagine what we can do with proper resources. What I want to achieve with Quasar is to raise the bar for web development as a whole. Make it go forward, evolve. Change minds. Point out when there’s a better alternative.

Please, please put above words somewhere on the main page. This is so strong, power and emotional narrative. Pure energy which leads and shows the new way to people. I’m in awe of those words, you used so many emotional and strong terms in such a short content. Almost like a poetry, but for developers Please, use those words not only on this forum but for rest of the world to hear. They deserve it.

@DDP said in Drag And Drop:

Upvote for built-in draggable features, especially for lists and tables

and q-tree and q-chips…

Scenario:
Let’s assume you are building a typical (business/product/blog) webpage with Quasar. You want it to be flexible and responsive and VERY mobile friendly and VERY big screen friendly. After a while, you realize it is very hard to achieve with Quasar. Almost impossible out of the box. In normal scenario you would use one of the thousands Bootstrap site templates, BUT, in this case you are just stubborn to use Quasar.

One piece of the puzzle is fluid typography:
https://www.madebymike.com.au/writing/fluid-type-calc-examples/
https://css-tricks.com/books/volume-i/scale-typography-screen-size/

In Quasar you could use something like this in your app.styl file:

fluid-font-size($minimumSize = 12, $maximumSize = 36, $minimumViewportWidth = 300, $maximumViewportWidth = 1600)
  font-size: 'calc(%spx + (%s - %s) * ((100vw - %spx) / (%s - %s))) !important' % ($minimumSize $maximumSize $minimumSize $minimumViewportWidth $maximumViewportWidth $minimumViewportWidth)

for num in (8..28)
  .fontsize-{num}
    fluid-font-size num (num*2+2) 300 1800

The code above will generate CSS classes fontsize-8 through fontsize-28. After that it is quite simple to use it like this:

<p class="fontsize-10"> this is content text</p>
<p class="fontsize-12"> this is caption</p>
<p class="fontsize-14"> this is header</p>
<p class="fontsize-16"> this is bigger header</p>

In similar style other CSS typography properties could be scripted (line-height etc.). I know, it is not ideal, I would strongly prefer to have something like responsive/fluid typography CSS system in Quasar itself, but for now - it just works.

@Ben-Hayat nice challenge

Let’s choose some constraints for this marketing style site:

1- loading speed
2- extremely easy integration with 3-rd party analatics, affiliates, ads, a/b testers, etc.
3- live data - option 1 - the data are loaded with initial page opening and then no loading
4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
5- live data - option 3 - the data are analyzed/displayed in real time (stock ticker, server load)
6- easy and fast changes to content
7- easy and fast changes to structure of the site (links, navigation, etc.)
8- app - option 1 - there is no need to login, authenticate, keep session for purposes other than analytics
9- app - option 2 - there is a need to authenticate users and show them personalized content/data
10.- … ok, there could be more criterions… especially organisational/logistics ones… but let’s stop here…

Lets evaluate 3 options for Quasar: UMD, SSR, SPA. I assume that every option will have a classic stack of:

• front server with reverse proxy (nginx, openresty)
• backend for API/www server
• and database/mq/data store

I will give those 3 options points in scale 1-5 - more points better, always scaled to best option:
1- loading speed
UMD - 5
SSR - 4
SPA - 1
2- extremely easy integration with 3-rd party analatics, affiliates, ads, a/b testers, etc.
UMD - 5
SSR - 2
SPA - 1
3- live data - option 1 - the data are loaded with initial page opening and then no loading
UMD - 4
SSR - 3
SPA - 5
4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
UMD - 3
SSR - 2
SPA - 5
5- live data - option 3 - the data are analyzed/displayed in real time (stock ticker, server load)
UMD - 2
SSR - 1
SPA - 5
6- easy and fast changes to content
UMD - 5
SSR - 2
SPA - 1
7- easy and fast changes to structure of the site (links, navigation, etc.)
UMD - 2
SSR - 4
SPA - 5
8- app - option 1 - there is no need to login, authenticate, keep session for purposes other than analytics
UMD - 5
SSR - 2
SPA - 1
9- app - option 2 - there is a need to authenticate users and show them personalized content/data
UMD - 1
SSR - 3
SPA - 5
10.- … ok, there could be more criterions… especially organisational/logistics ones… but let’s stop here…
UMD - is a quite viable solution. It is extremely easy to integrate with anything “marketing” style
SSR - wouldn’t go that way - there are too much quirks in integrations with 3rd party solutions
SPA - if you need app functionalities, if you think about mobile app, if you consider using PWA then this is the way to go. The only drawback is initial loading time.

Quasar is awesome! (it means you guys are awesome)

I would love to have that integrated into Quasar:

https://github.com/scrumpy/tiptap

look at the examples - “suggestions”

Drag and drop in quasar with vue reactivity would be a KILLER feature.

As for now, It is not possible, or VERY hard, to embed drag and drop in quasar application without quasar support.

In example someone would like to drag and drop tree items, or other elements and mix them with lists or even other vuex objects. If you are using external library (vue-dragula is in my opinion useful somehow) then there are situations, where you just can not do some things because quasar does not let you or actively prevents you from doing this.

So, I just patiently wait for drag and drop support in quasar. (Also for a support for keyboard navigation).

@necmettin said in Anybody tried out Svelte framework yet?:

@s-molinari said in Anybody tried out Svelte framework yet?:

You can’t do anything with Svelte without its compiler.

How is this an argument? Svelte IS the compiler. The counter-argument would be “You can’t do anything with Vue without the Vue framework.”

I believe he meant the distribution options of Vue. You can use production Vue in “runtime” mode, or in “full” mode - with Vue compiler. More here:

https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

IMHO argument stands. Not that it matters, but technically it is valid.

@stefanvh said in Would you use Vue + Quasar to build a Marketing site?:

@Ben-Hayat I don’t want to hijack your topic so let me know if I have to move this discussion somewhere else.

I’m also feeling uncomfortable here…

So, for example simple blog functionality. There needs to be a way to authenticate the user with an username and password. The authentication returns an authorization token. With the authorization token the user should be able to create a blog post (e.g. POST /posts). Unauthenticated people should be able to retrieve this post (e.g. GET /posts or /posts/1). This post is prefetched in Quasar and then displayed in a QCard for example. JSON-API covers creating and fetching resources (the posts), but authentication and even authorization can be performed in a billion different ways. Personally I am using PASETO tokens and /login and /register routes with simply {username, password} as payload with the appropriate HTTP status codes as response. But there are a lot of other ways (http://www.passportjs.org/packages/).

anyway, this scheme could be vulnerable to CSRF family of attacks. You need secure, same-site etc. cookie. Every other client side token, visible to JS is a potential vector of attack. If it is a blog for cats stories I wouldnt worry of course, but if it is a blog for bank official statements - this is another story. Do you know who your target is?
Well, the words are cheap and misleading. We, as developers has a opportunity and privilege to talk precisely and exactly about topic - we can use the language of code. So, please just create a repo on github, put your words into action and just create a skeleton, template, base of your thoughts in material (as in computers haha) form. It is much easier to discuss code in specific context than just dream about any possible or maybe possible context. At the end of the day, you will need to make a technical decision.

@stefanvh said in Would you use Vue + Quasar to build a Marketing site?:

I have been working on a templating solution in the form of an app extension for Quasar. Currently I’m stuck on how to integrate dynamic content. Unfortunately, there is no standard for the communication with the backend. I’ve been using json-api but that does not cover authentication for example.

I’m wondering what your thoughts are on what is the most convenient way to implement this @Ben-Hayat @qyloxe .
For example, if Firebase provides authentication, how do you login (which routes, payload, responses) with Quasar? Any standards you use?

This is a too broad question. “Dynamic content” could mean anything, “integrate” is almost a meme word, the “authentication” you write probably means “authorisation”, “convenient” is not a synonym for “secure”. Please just write what are your constraints, what is your expected outcome in specific context, then it would have sense to write anything. Any of us could come with different solutions which could be “convenient” “integrated” and any of buzz words, but without context they all would be wrong. There’s a little learning in this.

@apg said in QEditor guidance requested:

The only other thought I had at this point was to roll my own contenteditable WYSIWYG implementation, particularly since I’m not concerned about cross-browser / cross-platform usage - this app is just for my personal usage.

If you just have time and resources for that then it is the most LEARNING experience to build you own! From what you say, I like that you seek a learning process. In learning building and breaking and debugging and constant questioning is essential. If you can afford it then go for it and learn how content editable in browsers work, what is the proper data structure for keeping the strings of edited text (extremely interesting - please research), how to manage cursors and selections, what are differences in UI and expected UX in desktop/mobile, this is the most beneficial for you as a person.

And after that, with all that knowledge, just use something already prepared and maintained and production ready.

@Ben-Hayat said in Would you use Vue + Quasar to build a Marketing site?:

@qyloxe

and I compared Quasar, like a car that can drive on the road, can float and swim in the water and cal fly as well, yet still looks like a nice car.

ha ha nice one - Quasar is an UFO

It looks as there are needed already cooked and polished complete examples for integration of Quasar with Firebase capabilities. The whole templates, where one could just download/clone them, and there is a complete app where one just needs to put their own CONFIGURATION instead of CODE.

That would bring my attention at least. haha Why? Because some developers (many) are just afraid of a vendor lock with solutions like Firebase and this fear is multiplied by the need of time investment for learning new technology and even more multiplied by the fear of bad business decision. If one could have a 90% complete app template, then the business side of this decision could probably weight more.

This is another $0.02 that Quasar just needs a marketplace for templates, solutions or integrations not only for just a simple components. Imagine, that you could have such an example of app integration with Firebase and it will be maintained from both ends - kept up with Firebase goodies and kept up with ever changing influx (which is awesome) of Quasar versions. This is a whole new market for intermediate developers who like Quasar and Firebase but do not need to build a specific apps/solutions for specific customers. Oh sweet dreams…

@dobbel you need to watch for that statistics as a dynamical system not a static, always truthful constant.
The react or vue were created and optimized when svelte wasn’t in the horizon. Now, when people have svelte and they are convinced to make such comparisons, then we should wait for the answer of react or vue people. The reaction may something like “oh, we in React are the best, we need to cut and optimize our code base, we need to win in all the comparisons possible” ha ha or it could be “we essentially don’t care, because it is not a comparison of functionality or components 1:1 it is only a comparison of some part of behaviour, please upgrade your svelte to what we offer and come back”.
At the end of the day it is you who decides, not those comparison, and if I can only suggest something, do decide not what you need now, but what will you probably need in the future of at least one year. If you start a project with svelte, vue, react now, you will be deploying it, with the version of this framework from the year in the future.

@dobbel said in Quasar Admin CRM Template:

Unfortunately a lot of people are forced by their company to use only IE11, and because of that , me as developer will have to support it.

In the context of IE11 support I would be totally OK it this was available commercially in Quasar. The IE11 support is needed ONLY in business context, with already established user base, where the technical constraints decide about what is profitable and what is not.
In the context of open source no developer builds apps with target for IE11 in 2020.

Why this would be best?

1. Because it could from one side (open source) give more momentum to push Quasar into new territories - for example - web workers, drag’n’drop, bootstrap/firebase integration which would bring more people into the project.
2. Because core developers could make some money for they work in terms of quasar.COM not only quasar.DEV and this influx of money and security for core developers again would bring more safety the Quasar project as a whole.

Essentially - if you use Quasar to get money just toss a coin to your witch… sorry - your core Quasar developer haha

@apg said in QEditor guidance requested:

It also feels like many layers of abstraction: TipTap is built on ProseMirror. Quasar-Tiptap built on TipTap. And the whole thing is built on top of the Quasar framework. All to get a WYSIWYG editor I can use for creating mentions, key bindings, and table of contents capabilities.

ha ha you summarized that perfectly!

Thinking there must be an easier way.

Unfortunately, at the end of the day, IMHO “this is the (easier) way” From all the editors I found there were always a problem between data structure and presentation and operations. For example, most WYSIWYG editors gives you no data structure (just edit some HTML blob) nice presentation and operations dependend on available plugins or extensibility of editor component. There are WYSIWYG editors in the class where you have more advanced data structure - for example markdown, but again, there is complicated presentation (becuase you have to show the editor and the preview of the output) and there is much simple operations, because you need to keep the convention (for example markdown rules). And there is, as you said: prosemirror/tiptap/quasar-tiptap/quasar monstrosity! haha It has the most flexible data structure you can wish for, the presentation is separated from data and operations are always in a clear way of plugins/extensions. So yes, it is the most complicated but in the long term it is the most easy to maintain and extend. In my practice the solutions with the most flexible data structures typically win, for example.

@Ben-Hayat said in Would you use Vue + Quasar to build a Marketing site?:

I did some monthly pricing estimations last night and wasn’t so bad.
Firebase from ground up was designed to be a complete backend APP solution for development & deployment. So Vue style or Flutter style apps fits perfectly into package.

i wonder how much of your excellent work is similar to problems of other developers, who didn’t even heard about Quasar? Maybe it is another “marketing” haha oportunity, to tell people, who are attracted to Firebase, that there is some ingenious solution called “Quasar”? Maybe even a bigger support for Firebase in Quasar could bring those people here?
I do not work with Firebase, I’m rather “dedicated server farm” guy, but such solutions where much of development is already opinionated as in Firebase are quite alluring.
So, my (open) question is - if there are more people who need to decide similar as you, how can we bring them to Quasar (in the context of Firebase)?

@apg you’re probably looking for this:

https://github.com/donotebase/quasar-tiptap