How to use node and quill? - javascript

I want to try quill in my express.js app. So, I can install it using
npm install quill
but how do I actually use it with node?
I don't really understand why this is a node package since it basically only consists of a .css and a .js file and can be included directly inside the template which also makes most sense to me, because that's where the rich text editor takes effect.

I've seen a thread where one of the creators of quill (jhchen) was asked just that. I hope that helps someone.
Question:
Then what is the npm install command for?
Pretty much every application people build nowadays uses Browserify or Webpack to build things before the browser renders it, and if you can't even require() it, then how can you use it?
Answer:
You can absolutely require Quill for the purposes of building with Webpack or Browserify. You just can't run Quill in the Node.js REPL.
source: https://github.com/quilljs/quill/issues/1194

Related

Settings up postcss to use VH fix

I'm attempting to use PostCSS to fix the problem where 100vh doesn't account for the browser/navigation bar on mobile devices.
https://github.com/Faisal-Manzer/postcss-viewport-height-correction
The problem is, I have no idea how to set it up and the instructions assume I know how. I have very little experience with JavaScript and don't use any frameworks or know how to, I just do everything in VS Code with no plugins.
I installed the PostCSS extension in VS Code but am unsure what to do next.
The installation says:
"And then add this javascript to public/index.html (for React), or add to template.html (for Preact)."
I don't use React (I don't think?), so what do I do instead?
Then it says:
"Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.
If you already use PostCSS, add the plugin to plugins list:"
Would postcss.config.js be in my root folder? Am I supposed to create this file?
It then says to do this:
module.exports = {
plugins: [
+ require('postcss-viewport-height-correction'),
require('autoprefixer')
]
}
I added that to my .js file (Or does it go in the css file?), and am getting an error "module is not defined."
Could someone walk me through this as if I had no idea what I'm doing and have only been using JavaScript and VS Code for a week? Because that's where I'm at.
I'm on Windows if that makes a difference.
Part of the instructions say to do:
npm install --save postcss-viewport-height-correction
I don't know where to enter this command. I've come across similar instructions several times, and looking up "How to do npm install" doesn't produce any results. I've largely been avoiding using frameworks and extensions and plugins with JavaScript because I can never figure out how to use them, and every guide I can find assumes I already know what it all means.
Might be a long winded answer, but I'll try to respond to everything.
PostCSS is a JS-based tool for transforming styles with JS plugins. Typically, you use it as a plugin into your front-end build tool such as Webpack, Rollup, etc. You can also use it as a CLI app, manually running your build.
I just do everything in VS Code with no plugins.
Which editor you use is irrelevant. How are you building this content? Is it just plain HTML and CSS files?
I installed the PostCSS extension in VS Code
That extension is just for getting your editor on the same page as your PostCSS config. For example, you might write some CSS with your PostCSS config that will look like totally invalid CSS to your editor, and it would throw errors at this. That extension ensures it follows the same altered rules as your CSS now does, since you're using a tool that changes the rules.
Would postcss.config.js be in my root folder? Am I supposed to create this file?
Yes
I added that to my .js file (Or does it go in the css file?), and am getting an error "module is not defined."
JS, but it's throwing errors because you need to install it
Part of the instructions say to do:
npm install --save postcss-viewport-height-correction
I don't know where to enter this command.
From your terminal. NPM (and Yarn, if you run across it) is a CLI tool for installing Node packages, like PostCSS here.
Here are the instructions for installing Node & NPM: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

How to use external JS library methods in my Node.JS project if this library does not exist in NPM

I have a problem which can be easily solved by importing an external JS library into Node.js. However, this library does not exist in NPM.
I found out an old solution on StackOverflow which seems to fix the problem. However, it looks wierd.
Is there a more convenient solution in 2k20 to use external JS library methods into my Node.js code?
If your library have a package.json: You can install the package directly from the git repository, for example npm install https://github.com/vendor-creator/vendor-package. NOTE that for this method to work, in cases where the module has to be built, the git repository should contain a dist/ folder containing the built code or have in its package.json, a prepare step responsible for building the package upon installation.
If your library does not have a package.json and is simply a vanilla JavaScript file like the Lodash JavaScript file, I would advise just like in the post you linked, to create a vendor.js file (.min if the script is minified), copy and paste the content of the file and require it. Be aware that some libraries using CDN and not NPM, are designed for browser environment and may lack CommonJS support preventing you from using require. In that case you'll have to modify the library source code.
If it's a small library, there is no need to create an advanced build system. If the library is stable, just copy and paste it and you'll be fine. When in doubt always follow the K.I.S.S principle.

External JS library for angular 5

I have read all the topic about this subject but i don't understand.
I think that i need an example to understand.
I'm a new learner in angular, i wouldlike to do an mathematical application for mobule with ionic.
So after two weeks when i read a lot and a lot of tutorial, documenations, forum, about angular, i have try to install the two library Mathjax (that it permit to write mathematical character in HTML), and jsxgraph (that it permit to create geometry figure).
But really i don't understrand how.
For the moment i just try with mathjax and all i have succed to do is "npm install mathjax" that it install in node_modules directory Mathjax.js
But now ? What should i do ?
Thnaks in advance for your help, and sorry for my very bad english, i'm french :D
Best regards
If those two libraryies can be found in npm you just have to install and import them.
npm install js-library-name --save
import { moduleName } from 'js-library-name';
And if you dont find those libraries in npm you can add Javascript files to the global scope via the scripts option inside your project's build target options in angular.json. These will be loaded exactly as if you had added them in a <script> tag inside index.html.

Setting up a web project with npm/jQuery/RequireJS

I haven't started a new web project for years, so the latest technologies went past me mostly unnoticed...
Now I need to create a little dynamic webpage, for which I mostly need jQuery and maybe one or two plugins. One of them requires a library called RequireJS, which I then had a look at and immediately fell in love with. Javascript just looked so much nicer suddenly! :-)
But... I had also found npm and really like the way of installing new packages. "npm install --save jquery" is just so nice and simple. Now, npm install tons of files in a node_modules sub-directory, which I don't really like. I only need one or two files per library!
So: is there a nicer way than npm to handle packages (i.e. only download the necessary files)? Especially one that works well with RequireJS? Or do I have to set up some other tools (found something called "grunt")? Can someone please give me a working example?
Thanks!

How to publish a browserify bundle for npm and the browser

I wrote an editor in HTML/JS that I want to use for multiple Electron based applications and a website.
For testing purposes I have package all dependencies, some are npm modules, some are font files, some are images, into a single file using browserify. For development I find this quite attractive as npm take care of keeping the packages up-to-date and browserify build even things like images and CSS into a single JS file. And included this bundle using a script tag in a html file.
Now I would love to get this onto npm to use as a dependency for other projects. But frankly I am at a loos as to how to do this.
Some blogs suggest to use:
module.exports = mymodule
But I want people and myself to be able to either get a single file and insert it using a script tag to get a global function to start my editor as well as require it using npm for Electron based apps.
startEditor = require('mymodule')
<script src="path/to/mymodule"></script>
Should both be valid ways to use the editor.
You can see the current state of the project on GitHub

Categories

Resources