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

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

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.

How do I mount multiple wasm components to a page?

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.

How to load external JS libraries for the whole project

How do you load an external library so that it is available all over the project?Say for example I have the below:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../public/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome core CSS -->
<link href="../public/css/font-awesome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../public/css/style.css" rel="stylesheet">
</head>
<body>
<p>This is a test</p>
<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../jsLib/bootstrap.js"></script>
</body>
</html>
So this includes the jQuery, Bootstrap, font-awesome and my personal stylesheet as you can see.
Question: What if someone goes to another page in my site for instance: /profileSettings.html
Will I have to load all the libraries again?
Sorry if this is a simple question but I am completely new to front-end development.
Thanks in advance
As your code grows in size, you'll start using more sophisticated frameworks that may use something along the line of an MVC setup. Some of these frameworks allow you to define multiple "views"(think of them as HTML files for now) that are called from a single HTML file(say the index file).
For those aware of AngularJS, i'm referring to writing Angular UI views and the <ui-view> tag.
This will allow you to have your dependencies in a single file, and the other pages just load from this page.
More importantly.
I'm surprised noone has mentioned the use of require-js or other loaders.
It's particularly useful in cases where you have multiple JS dependencies, and multiple controllers in javascript.
Definitely check out loaders such as require-js
Each page is completely independant of every other page.
If you want a script to run on any given page, it has to be explicitly loaded into that page.
Yes. U have to include the required lib in each file if it is normal file without any framework.
You have to include the scriipt in every page because even thought it is a website, every page works seperately from another. All you need is a <script></script> tag.
Yes, if you look each page as separate page. You need to include it in every page.
But if you have a master page, then we can inherit the same from master page so, no need to add the Codes/Script again.
A cool option.
Load one JavaScript file (JS File) for every page. Then load all the JS File using that JS File as you like.
Example
var Device = {
Device_Type: 'Desktop',
//Scripts to be loaded in master page
Common_Scripts: [
'/SiteAssets/Bar.js',
],
//CSS to be loaded in master page
Common_CSS: [
'/SiteAssets/nav.css',
],
//to get device type
Get_Device_Type: function () {
var Getdevice = detect.parse(navigator.userAgent);
if (Getdevice.device.type != null) {
Device.Device_Type = Getdevice.device.type;
Device.Process_Device_Files(Device.Device_Type);
Device.Process_Common_Files();
Device.Process_Common_Scripts();
} else {
console.log("Detected Device type :" + Device.Device_Type)
}
},
//to load device based css files
Process_Device_Files: function (File_Type) {
File_Type = File_Type.toLowerCase();
$('head').append(
'<link rel="stylesheet" title="' + File_Type + '" href="announcement.css">'
);
},
//To load css files to be loaded in master page
Process_Common_Files: function () {
_.each(Device.Common_CSS, function (eachfile) {
Common.appendfile("css", eachfile);
});
},
//To remove previously loaded device files
Remove_Device_Files: function () {
$('link[title="tab"]').remove();
$('link[title="Mobile"]').remove();
$('link[title="desktop"]').remove();
},
//To load scripts to be loaded in master page
Process_Common_Scripts: function () {
_.each(Device.Common_Scripts, function (eachfile) {
Common.appendfile("script", eachfile);
});
},
}
$(document).ready(function () {
console.log('Render device based files')
Device.Remove_Device_Files();
Device.Get_Device_Type();
});
Usage
(Copy the Above code after Example until usage and paste it into a notepad and save it as device.js. Then include to the page. Then add the necessary JS to this codes. Sample files are already in the codes)
// Dependencies
https://github.com/darcyclarke/Detect.js?files=1

How to have a common header shared by all webpages in AngularJS?

I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?
There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.
Thank you.
EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.
An AngularJS solution would look like this:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src='angular.js'></script>
<script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>
main.js:
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
header.html:
<p> Header content goes here </p>
The reason I did not simply advise a solution such as: <div ng-include="'header.html'"> is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.
Alternatively a jQuery would like this.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
</body>
</html>
Finally a PHP solution would look like this:
<html>
<head>
</head>
<body>
<?php include('header.html'); ?>
</body>
</html>
Best of luck learning!
The way I typically handle this, and it allows for more than a header, is to have a shell.html
It might look like this:
<div ng-controller="ShellController">
<div ng-include="'app/shell/header/header.html'"></div>
<div ng-view></div>
<div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
Where you're ng-including the static bits, and you're using Angulars ngRoute (or ui-router)
The other answers provided miss the point here of the client using Angular.js. Angular is actually designed for this concept. There are a couple different ways to achieve client templates with Angular.js.
Using Angular as a Single Page Application (SPA) where you dynamically change the content on a single HTML document rather than redirecting to different pages.
Using Angular Directives to encapsulate common page features.
You can use a combination of the 2 to achieve almost any combination of page layout.
using the angular route provider or a plugin like Angular UI-Router you can define a common HTML page, and within the HTML page use the ng-view directive to denote a section of your page to be dynamically replaced at runtime. you can then define html templates which populate the dynamic section.
Using Directives, you can create new HTML elements to design a more expressive page layout. For example, you could define a my-menubar directive containing HTML templates, javascript elements, even business logic, and then include the menubar on any page simply by using a syntax like <div my-menubar /> Directives are very powerful, and I highly recommend reading about them in the Angular Developer Guide.
An example of a simple page that might use these features:
<div ng-controller=MainController>
<div main-menu />
<div ng-view> </div>
<div page-footer />
</div>
Bottom line, you do not need a server to perform logic for reproducible code, as Angular.js is designed for exactly this purpose.

Including HTML <meta> element conditionally

Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);