How do I mount multiple wasm components to a page? - html

I have a flask project I am working on. I would like to be able to start replacing some components with wasm.
I was able to get the yew component to mount to a specific <div>, But I'd like to be able to do that, as well as leverage some of the GUI libaries of Rust.
I was able to make some examples in the iced library work as WASM, but that was as standalone. I havent quite wrapped my head around how to wrap them in a <div> and use multiple wasm/rust/yew components on a page.
A very simple example to give you an idea of implementation is below.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import init from "./static/js/wasm.js";
init();
</script>
<style>
#yewapp{}
</style>
<meta charset="utf-8" />
<title>Flask+Rust</title>
<link rel="shortcut icon" href="#" />
</head>
<body>
<div>
  {{ message }}
</div>
<div id ="yewapp"></div>
  {{ message }} again
</body>
</html>
This works (yew app is just hello world right now).
I like the .mount(div) functionality in yew, but if there is another way to do this I'm open to it.

Related

Splitting large HTML file into smaller blocks and importing each file to a div?

I have an HTML file with around 4000 lines of code, it's a single-page website and it needs to stay that way.
The site is made up of 8 different 100vh div-s. Think about it like an 8-page full-size hero slider and each slide has something on it.
Debugging and editing this file is becoming a nightmare.
Is it possible to separate each part/component/section/div (whatever) into its own HTML file and import them into another HTML file? Like how it is done on React.
basically:
split index.html into 8 parts
a.html, b.html, and so on.
import a.html into index.html and make it visible in a div,
and do the same for b.html, place it in another div below a.html
You can use PHP and its include() function to have a main (php) file in which you include 8 or whatever number of files that contain HTML code.
Except of the including this hardly requires any other PHP code, i.e. that's easy to learn with any PHP basics tutorial.
I have no idea if the following would be sensible or not but in principle it should work.
You could try using JavaScript's insertAdjacentHTML() method:
In your HTML file:
<!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>Document</title>
</head>
<body>
<div id='file1-div'></div>
<div id='file2-div'></div>
<script src='file1.js'></script>
<script src='file2.js'></script>
</body>
</html>
Then in file1.js you could have:
const file1Div = document.querySelector('#file1-div');
file1Div.insertAdjacentHTML('beforeend', `
<!-- your HTML goes here -->
<p>Hello World from file1.js</p>
`);
and in file2.js you could have:
const file2Div = document.querySelector('#file2-div');
file2Div.insertAdjacentHTML('beforeend', `
<!-- your HTML goes here -->
<p>Hello World from file2.js</p>
`);
An advantage of this over using PHP or Node.js is you don't need PHP or Node.js running on the server.

Loading external .js (github) libraries in in codepen

Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.

What's the best way to translate a html file in Xamarin Ios

I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages ​​except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.

Is Semantic-UI + ReactJS available for a cave man?

I am a cave man in terms of web ui - I like it all without npm/nodejs and other nice infrastructure. I want it all in text files like in old days: include/link stuff from/to a HTML page and it's done. Is such cave approach possible for semantic-ui+ReactJS combination, meaning to have no npm/nodes/other server code for my front end to work?
You can always skip over using npm/nodejs/bundling by putting the 'packages' you want as script tags in the header of your html page. This still allows you to grab the extra libraries you want but means you don't need bundling and transpiling if you want to keep it simple. Like you mentioned, this is the way that used to be the standard and it still works just fine.
As an example, here is how to use react without a npm: JSBIN
Your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react#15.1.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.1.0/dist/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</script>
</html>
Then the JS code for using react could look like:
const Child = () => <div>Child</div>
const Parent = () => {
return (
<div>
Parent
<Child />
</div>
)
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
This answer is specifically for if you want to skip npm and bundling all together. I would definitely recommend checking out create-react-app if you are ok with having it do your config/bundling/transpiling for you.
I think the answer is yes, that is if I am understanding your question. One of the ways you can use react (and any css lib, like Semantic UI), is to generate a static build that can be hosted very simply on any static hosting service (all text files, like in old days). however, it is common to use npm and node during development.
this is a useful tool to get started: https://github.com/facebookincubator/create-react-app

Using a .Zap eraser file in html

I am making a website and my client wants what he refers to as a "Eraser file" to be on the top section of the site. Here is a example website that uses this feature http://flashpoint.gatech.edu/
How can I use this file and implement it in html? I have searched for eraser and zap file answers, but could not find anything on them.
This is very easy because it is actually a jQuery plugin...
(I did not find any viable CDN for that library, so I cannot give you the live example in a JSFiddle. Please download this in a file called "eraser.js" and put it in the same directory as this HTML file. You should be able to erase the Stack Overflow logo.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eraser</title>
</head>
<body>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eraser.js"></script>
<script>$('img').eraser();</script>
</body>
</html>