I am trying to use makerjs with node.js but it doesn't work.
If I use cdn like bellow,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/makerjs#0/target/js/browser.maker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bezier-js#2/bezier.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js#0/dist/opentype.js"></script>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
It works well.
If I look at the documentation, it says
npm install makerjs --save
and put this in javascript
var makerjs = require('makerjs');
So I made my html like bellow after installing makerjs with npm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
But it is not working.
What am I missing?
Related
I'm getting this same error everytime I try to run my JS file on Node. I just got started with this whole thing so I'm probably overlooking some very obvious detail. This is what my HTML head section looks like:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="rooks.css">
<title>Rooks</title>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<script src="rooks.js"></script>
<script src="plotly-2.12.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
I am a web developer and using Atom as text editor but I always have to change some autocomplete suggestions.
For example when I type html and pres tab it gives me this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
This result is not actually what so I manually change it like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="theme-color" content="#00FFF0">
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
So I did a research and everybody solves this kind of similar issues with snippets I am not asking how can I do it with snippet. I already know it. I want to change these codes from editor's current location. Possibly it locates somewhere in ~/AppData/Local/atom but I haven't found it yet. I want to reach that file and change related suggestions from there.
This is not only for html suggestion I also want to remove something from PHP suggestion and add some for JavaScript suggestion.
Any idea how this system works and how to do it ?
Thanks.
I changed the title of my index.html page in my Angular app. Since it is not a component is it possible to test it, and if so, how?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animations Workshop</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
Installed node_modules and added faceapp.js as a dependency. Trying to use faceapp.js but didn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/faceapp/bin/faceapp.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<h1 class="text-center">Faceapp</h1>
</body>
</html>
Javascript
const faceapp = require('faceapp');
let image = await faceapp.process('assets/images/ajith.jpg', 'smile_2');
Seems like you're trying to add an npm module to a static web. You'll need to bundle the script and required modules that you're using first and include the bundled script to your static html.
I recommend looking at browserify or webpack on how to do so.