I'm coming from a javascript/react/react-router/webpack background to a clojurescript/om environment.
With webpack & react-router it was possible to split my code and only load the javascript needed. E.g. on /login I would only load the js necessary to display the login-page everything else would be left out.
How do I the same with clojurescript/om?
Apparently it's possible to split your code into multiple files: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
The question is how do I only load the code necessary to render the current page: /login for example...
With webpack I would manually write require.ensure to asynchronously load the necessary javascript to render a certain page. React Router supports this very well.
Is there any equivalent in clojurescript without making multiple html files and each giving it the right script tag with the splitted code through google closure modules?
Sadly I don't have a concrete example yet, and I agree that webpack and react-router make this really easy. There are some links that may direct you to get it working:
Code splitting: http://swannodette.github.io/2015/02/23/hello-google-closure-modules
Manually adding script tags to html files
Actual docs: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
Dynamic loading of cljs modules: https://rasterize.io/blog/cljs-dynamic-module-loading.html
Uses multi-methods for route definitions to dynamically add implementations when loading more code
Dense read, there is no easy tooling regarding this use case right now, but the article has all clues to get it working
I hope this helps. If you get around to implementing this in an OSS example it would be great if you could share the link.
Related
This is a bit of a weird question, so please bare with me.
So I've joined a new project at work and it's pretty old (Vue2, no ts support, etc.). It also utilizes a couple UI libraries, amongst other dependencies.
As I am combing through, I've found a few tags labeled <Sider> and I cannot find where they are coming from. Neither of the UI Libraries seem to utilize it and I cannot just cmd click to see where it's coming from. It's also not a custom component or anything in the app.
Is there anyway to tell where these sorts of tags would be coming from?
This is for work so I can't share the app itself, but here's a quick image of what one of those tags looks like:
Any advice would be greatly appreciated. Cheers!
If the app is working and the components (Sider and side-menu) are not registered in the component it self, they might be registered globally (see vue2 docs). Global registration typically gets done in your main.js file.
This could also be the reason that you cannot find the component in your project, because it may have another file name. In your main.js might be something like:
import TotallyDifferentName from '#/components/TotallyDifferentName.vue'
Vue.component('Sider', TotallyDifferentName) // Now you can use component in templates as Sider
Hope this helps.
I know the question looks like some others I could read but it's not the exact same issue in my opinion.
I have a "loading screen" (small piece of HTML) in my Angular application. This loading screen is present in three places :
When the application is not loaded yet (so inside the tag of the root component in the index.html : <app-root>my loading html</app-root>
When the router inside the root component is not yet ready to display the "final" component. (See answer here for more detail)
In the "final" component itself waiting for some data to be loaded from an HTTP service.
In the second and the third cases the "loading screen" could be in another component. But it's not possible for the first one since another component will only be displayed after the app is fully loaded and we want the first loading screen to be visible as soon the user get the index.html.
So for the moment I have this short "loading screen" HTML duplicated in multiple places.
I don't care if it's duplicated once built and delivered to the user but from a code point of view I want it to exist only once... (You know how it is, when someone will have to change the message it will be forgotten in the other places...)
I could use iframe (or object but W3C advise to use iframe instead) but people here want to avoid it at all cost so I think the code duplication will be preferred to this solution.
I could also have a small JS to do it (like this answer) but it feel wrong to add a "wild js" in an Angular app...
My question is : Do I have a way to include HTML file into another HTML file (like the "include()" in PHP) with some markup (like in this answer about Service Side Include) that could be resolved during the Angular compilation?
I mean the AOT compilation is already checking the HTML template so it could be quite easy...
Thanks in advance!
It's not in the compilation time, but a way to do something similar to what you are asking, is this:
You could have your "loading screen" html code as a component (for instance, app-loading-component), declared and exported inside a Shared Module.
Then, in the component 'X' in which you want to use it, you have to import the Shared Module in the section imports:[] of the module of that 'X' component, and used it in your HTML in the usual way:
<app-loading-component></app-loading-component>
To dive a bit more in depth, for a Hackathon, a friend and I need to get an image from an HTML form and analyze it using an AI algorithm. We easily handled the HTML form part, but that hard part is sending the image to be analyzed by the algorithm.
How would we do this. Would we have to set the algorithm up on some sort of server and then post the image to it or would we have to somehow integrate the algo into the webpage so it can run there.
Also what frameworks would we need to use and is there a guide to this somewhere?
Thanks,
CantTouchThis
I can't provide you the code because it is a competition, but I can help you a bit:
First (if you are using python) make a script that downloads the photo. You have to download the page and parse html document, find your image with regex and download it.. You can use urllib2 for downloading and Beautiful Soup for parsing html file, or, use htmllib to extract all img tags (override do_img), then use urllib2 to download all the images. Make sure everything is inside a definition or method so that we can call it later in our main script.
Make sure that the images are saved in your same directory
Make the last and main script, first import the first script we have made, and the downloaded file(make sure to give the imports inside a try and except because we haven't downloaded the image yet, you will get a error), call the method or definition of the photo downloading script, then write the rest AI algorithm, tell the file name, after the algorithm executes and gave result, make sure you write a code at the end that deletes the picture, because you might in future be asked to download more images, so you can create a list of websites and use it using a for loop to change the web address in the first script.
Best of Luck!
I've a set of pre-generated html documentation files (provided via an external mechanism). These are fully standalone in their own right, but I'd like to integrate these files into an existing portal.
Ideally, I'd like the existing site to take care of the (common) layout, and simply embed the existing html into this layout. I've been trying to get it to work over the last few hours to no avail.
Problems I've encountered (no specific order):
The pre-generated content already contains html/body/etc. tags (as mentioned, it is standalone documentation in its own right).
Redirection is no use, as it bypasses the view mechanism, losing the common layout.
I'm not really sure how to proceed, as I seem to have exhausted my googling ability on this matter. I'd appreciate any tips or pointers on concepts or terminology surrounding what I'm trying to do - I'm happy to do the leg work investigation as required.
have you tried putting your html files in the wwwroot folder and in the Startup.cs Configure method, add the line app.UseStaticFiles();
If you really need to static *.html use
var htmlString = System.IO.File.ReadAllLines(#"patch/to/your.html");
And then pass it to view and render by #Html.Raw() but i not reccomend this way. Better create partial view and then simply use by #Html.Partial() (official docs)
I like working with the Brackets code editor for most of my projects. However, my team is doing a particular project right now for which we are going to need to create multiple re-usable components to provide prototype demos. We've used a GIT workflow to build all the various components and put them together on multiple prototype HTML pages.
However, every time the designer wants to make an update to a particular component/widget - we need to update it manually across all of the prototype pages.
I'm seeking a way to make a reusable code block like how Adobe Dreamweaver uses Library Items to streamline this workflow https://helpx.adobe.com/dreamweaver/using/library-items.html
I can't locate the equivalent in Brackets. I looked at this plugin https://github.com/chuyik/brackets-snippets - but I don't think it's what I need.
Is there a convenient solution to this? Perhaps I can just use import functions embedded in the HTML code to insert/import widget HTML code from another dir?
Update:
I have just attempted to use a JQuery solution as proposed here Include another HTML file in a HTML file but previewing the file locally - it does not appear to work. It gives an error like so
XMLHttpRequest cannot load file:///D:/Ryan%20GitHub/SLQ-Homepage-with-packery/html/widget-social.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.crossDomain.send # jquery.js:8625
I think I need to try this on a local server - shame it won't work on local preview :#
Best solution I can come up with for the time being is to use jQuery as I'm already using the library for interactions on our pages.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Unfortunately, it does not work or preview locally in my Chrome browser because of the cross domain blocking protocol. It's not that fast either but it will do.
Well you could use PHP includes. They work similarly as what you are describing with jquery. Simply put, create the file that has the code you want and name it something.php Then do a simple php include.
<?php
include('something.php');
?>
You can also organize the includes into a folder called inc to keep it more organized. I do this for all my website for footers, nav's, menues, etc. I update one file and boom, it updates across every webpage at once. Been doing this for years. Hope this helps anyone else that comes across this, since it is an older thread.