I have designed a user interface for a web application using Nuxt.js and Vuetify.js (Nuxt implies the use of Vue.js code)
My interface is quite good, but I need to embed it into an existing website which does not make use of Nuxt/Vuetify stack.
I wonder what are the techniques that could be used in such situations?
I read some old posts like this one: Embed website into my site but I wonder if there is anything more trend and more suitable for a Vuetify user interface?
You could take the transpiled, javascript bundle that Webpack creates for your Nuxt/Vuetify application and insert it into whatever webpage would use it. This would let you use the javascript you wrote where you need it on that existing site, but wouldn't use it for any other pages.
If you don't like that approach, however, <iframe>s are always an option.
Related
we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.
I am new in tvOS application. i am trying to integrate custom application with TVML & TVJS. I created a page and add banner in it. My requirement is to load a webpage inside that application. I tried different methods to load a webpage using that application.js file but fails. Please help me how to load a webpage using TVML and TVJS.
If I understood you correctly, you need to use UIWebView class but you cannot find it in the tvOS SDK (because it was removed). But you can use this class as a "private API class" (you can create an instance of this class and call methods for it, because you have enough information about UIWebView). It can be hard for you. If so, you can use some libraries (such as https://github.com/jvanakker/tvOSBrowser) that using the private API to make UIWebView available in the tvOS.
I think you might have a hard time on getting a web browser on the TV app store, as I think apple does really see people browsing on the apple tv.
Depends on your use case,
if you are only trying to display a page, you might able to use some of the online url to picture services like https://urlbox.io/docs, or build your own server using existing browser features. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot
If you are getting users to another services, the correct way to do is with deep link, which you can learn more about here. https://developer.apple.com/videos/play/wwdc2017/246/
or if you are trying to transfer the view into sales, displaying a QR code is the way to go. as iOS 11 makes QR Code scanning a standard, it will be very easy for your users to scan the code. https://www.cnet.com/how-to/how-to-use-ios-11s-hidden-qr-code-reader/
I developed a Shopify application that i install on Shopify Store and i want my application to add a javascript snippet in all the store pages. For this I want my application to modify the current theme, by using Shopify API, and add the javascript snippet to that theme.
I know of several ways to do it but they have several disadvantage:
Add a Shopify Asset/Snippet - The store owner has to manually modify the store's theme to link to the asset/snippet.
Add a script tag - I want my javascript to be embedded and not to be downloaded from a different source. A different source means longer page loads and i do not want my site to extend the page load.
Add an application proxy - This can also extend the loading time.
Can you suggest on what is the correct way to do it?
Add a script tag and be done with it. No other pattern offers up the same customer experience. When they install your App, your script is available. When they uninstall your App, their theme reverts nicely. Worrying about the load times of your asset is not worth it if you have done your job, and minimized your code and provided a fast CDN address for it.
In 2022, you get Theme App Extensions for OS 2.0. Do that!! Best way to add JS to a theme/store.
Are you using the embedded apps SDK? I'm pretty sure they have some option that makes this easier, like you can create a "sidebar" on every page and position it wherever you want (hidden if necessary).
Answering you question: the good way is using ScriptTag. Consider this article on this: https://docs.shopify.com/api/unlinked/using-javascript-responsibly
Still if you need to add code snippet as an asset, I want to point out that it's not necessary the customer must manually update the theme. As far as I know, you can add your snippet as an asset and then update another -- theme liquid template.
https://docs.shopify.com/api/asset#update
For the reasons described in an article I've provided above, you should not do that.
I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.
I want to rebuild an old website made on plain HTML and add some extra functionality with AngulaJS. But since I plan to use ng-views to render templates on my main layout, is it possible to make search engines still find the templates of these subpages?
In a general sense, this is not an angular problem - its the same problem with any single page site that uses javascript to generate your html.
The general solution would be to detect when it is a crawler accessing your page instead of a person (usually by using the query agent string), and then use server side logic to render pages that are suitable for the crawler to process.
Here is one article that discusses this problem:
http://www.webdesignerdepot.com/2013/10/how-to-optimize-single-page-sites-for-search-engines/
but google (or searching this site) for "google seo single page app" will give you lots of other ideas.