How can I use CKEditor 5 classic in VueJS 2 WITHOUT NPM? - vuejs2

My question is simple. I'm using VueJS 2, and I want to implement CKEditor 5 Classic. I know better than to just hook it up in HTML, but due to constraints I can NOT use NPM/Webpack. I need a component wrapper that's in JS format.
Can anyone help?

What do you mean when you say "I know better than to just hook it up in HTML"? After all, the files are included in your HTML anyways, that's how HTML works with JavaScript.
The best option is to use the corresponding source-file from CDN of CKEditor. Either by including the direct CDN link or (in case you have doubts about availability) after you download them manually or via shell and ship them with your application.
If you don't want to go one of these ways, I don't think you'll be able to use the desired library at all.

Related

Arbitrary values for Bootsrap?

I am currently developing a web application. I am using Bootstrap-vue in frontend. Does Bootstrap has feature in which I can create on-the-fly class? Tailwind has it . I tried searching it in the internet but no luck.
Here is my case:
Color values are save in the database.
Every time the page loads, I will fetch those colors and create class based on their colors
Your help is much appreciated. Thanks in advance.
Bootstrap is not really an utility-based CSS framework, hence there is nothing similar to Tailwind because it's not the mindset of the tool.
Also, even if this kind of code exists in Tailwind, it can become funky pretty quick and the best thing is still to write some bare simple vanilla CSS code alongside your template to get what you want.
You won't get any performance benefit by using an arbitrary value anyway and hence it should be used for exceptional cases anyway, a CSS declaration will be far more cleaner.
Feel free to create global CSS variables in vanilla CSS for your use case.

How to generate and scan barcodes with aurelia?

I have a webpage that needs to be able to generate and later read barcodes. But i cannot seem to find any small scale addon to aurelia that does even one of these. Is there any libary that does this or do i have to write my own somehow? Or can i somehow use some preexisting barcode stuff that is not directly designed for aurelia?
looks like you have to find a suitable library for the task on npm.
For barcode generation, you can use this test app:
https://codesandbox.io/embed/barcodes-bxgf1
Be sure to adapt to your own bundling choice.
I used quaggaJS in my aurelia app for reading existing bar codes.
(it's actually just a regular JS package - not specially for aurelia)
the API is kind of old (callbacks instead of promises), and overall it's a little weird (the Initialization process), but in the end it works great with little effort.
you can use https://www.npmjs.com/package/qr-scanner only draw back is that your website need to be https.

What is the most up-to-date recommended seed/setup for latest riot version (3.11)?

What is the most elegant way to get a riot based UI today?
i'd love the following points to be addressed:
A proper code-mapping for easy debugging
A good way to bundle the application (so far i used Webpack and JSPM)
It would be lovely if it would work elegantly with Typescript.
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
If you have more items for consideration - please add them....
Thanks for asking these questions. I have tried to answer to all your questions hoping they could be useful also to other Riot.js users
A proper code-mapping for easy debugging
the riot compiler generates simply javascript code without modifying too much the structure of your original source code. Any modern browser should be able to provide with debugger breakpoints and console calls all the debugging tools you need. Check for example the stack trace of this error you don't need much more to figure out where it's coming from.
A good way to bundle the application (so far i used Webpack and JSPM)
In this repo we provide 3 different javascript bundle examples: rollup, webpack, riot-compiler. I personally prefer rollup but you can (and should) use whatever works best for you and your team.
It would be lovely if it would work elegantly with Typescript.
The riot public methods are already available as Typescript interfaces:
- https://www.npmjs.com/package/#types/riot
- https://www.npmjs.com/package/#types/riot-route
I am not a typescript user and that's why I will not invest time in making examples in a technology I don't use but PR are welcome
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
I recommend you to just use Tag files because riot was designed as component library and it embraces completely the philosophy of components composition vs class inheritance. If you have code you share across several components you can either use mixins or import it with your bundler directly in your tags see for example
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
Riot 3 will be not compatible with Riot 4. (that will be a full rewrite) I can't recommend any best practice to make your code portable to Riot 4. Remember that Riot 3 will be still supported and your code will run even on IE9 for the next 10 years. Once riot 4 will be released and the API will be stable I can provide more hints about a migration path.

Anybody using Aurelia with graphql

My backend exposes graphql wanted to know what is your experience with aurelia and graphql.
Are there any good libraries out there to use?
I could only find a minimal apollo bind library here https://github.com/stphdenis/aurelia-apollo-bind
Aurelia does not impose any restrictions. From examples I see in graphql docs there is nothing you can't do with Aurelia.
There is no need in specific bridge or wrapper library.
I suppose you can use this Angular 9 sample https://www.youtube.com/watch?v=GifdPhc_OWU
You will need the same GraphQL queries generator. And a similar way of calling a back-end.
I guess it is even possible to write content item templates in Aurelia syntax in place of Liquid templates of content type definitions, gather them to front-end along with JSON and render together. I would try to achieve that.

using dojox.mobile and dijit together

We are trying to make an app maker with dijit. Do you know what to do more or less to have the dojox.mobile.* branch running parallel to my dijit app ?
I know there is a seperate dojox.mobile.parser,... I guess, I need to fork it quite deep ?
I thought first about an iFrame but we need drag'n drop from the designer and the simulator.
Any help is welcome,
g
dojox.mobile offers a very light-weight parser which can be used in place of the standard dojo.parser. I think it skips stuff like attachpoints and probably wouldn't work too well with Dijit, so if you use both types of widgets on your page, stick with dojo.parser. The parsers share some globals and are unable to co-exist, so do NOT load both.