Develop Reference

How to Embed React/Angular application in a widget popup style

So this is more a design/tooling question (no code to show)
The Idea:
I have an idea for a web app that I'd like to implement using either React/Angular depending on the outcome of this discussion really. The idea is that I want to be able to bundle up my web application and embed it in any website with as little code as possible. The end result for the website it's embedded on would be a new 'widget style' button hovering in the corner which when clicked opened up my new React/Angular application in a pop up or layover modal style window.
To be clear, I want to, if possible provide the clients host website with as little code as possible such as:
<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>
This would then leave them with a widget style button that when clicked opened my app as a layover
The How:
Now I know there are probably a few ways of implementing this. I come from an Angular development background as a full stack dev so embedding apps within websites would be a new concept to me. I guess the outcome I want is similar to that of a chat widget application on a website.I'm struggling to find online the best solution or toolset for the job.
Web components seem to have popped up quite a lot. This would result in me having to provide the website with the tag and the new html element but could this then add a widget style button which triggered the application popup. I've also read that React/Angular bundle sizes may be too much for web components, even in smaller apps, so something like preact may be preferred? Again the same question above stands. This youtube video explains preact/react web components and wonder if its the best option - https://www.youtube.com/watch?v=PUGDzA1uP-Y&t=545s
iFrames are definitely an option if I wanted to simply mount my application with any other website. That said its not really what I'm after, as although I want the contained app, I also want to be able to add this custom widget style button to the host website, without having to edit the website directly.
UMD Libraries - again something else I've come accross but this is the most unclear, and how they differ or would benefit my specific scenario compared to web-components.Now I may be barking up the wrong tree completely, and if so could you kind people please point me in the right direction of what I should be looking at.
I may also need to consider 2 apps, one for rendering a button that loaded quickly annd then facilitated the popup / modal type layover, and then one which loaded up my application with one of the 3 methods mentioned above?
THANKYOU IN ADVANCE! :)

Django custom page based CMS

I am searching for django CMS that allows me to create something like custom pages build from predefined components.
Every page should be builded from custom "inpage" components like:
carousel with images
gallery with images
richtext field
plain text field
So as a developer I will build a template for every page of a website from this components and assing a CSS file for the given page. For example one page can look like:
plain text field (heading)
plain text field (some kind of page abstract)
richtext field (part of the text)
gallery with images (few specified images with some style)
richtext field (another part of the text)
Another page could be build in a different way. The key idea is, that every page will have predefined unique layout (template) that is not breakable by users in CMS.
The CMS I would like to use, should allow the user to change content of the particular componets for particular page. So the CMS should create form to change the content of the particular components for a given page (heading, text, images in carousel).
The changable content of the page (form fields) can be stored in database of files, it does not really matter.
The main idea behind this concept is to prevent user from changing the layout provided by designer and enforce the correct styles and correct "content type" for every part of every page.
Note: I used a Mezzanine for last few years and it seems to me easier to code the proposed CMS from scratch rather than use the Mezzanine somehow in this way.
My questions:
does something like exist?
has this type of CMS a common name?
Sorry for being too broad, but I do not really how I can search such a thing (in case it already exists - or at least something similar). Any hint, comment or advice will be more than welcome.

your question is too broad but to answer it quickly:
I don't know that anything like this exactly already exists
There's no common name for this as far as I know.
You're asking two things - one, you want to create a website and give each user some control over the content they create (I suppose you're creating some blogging system or something). second, you want to use a CMS.
The problem with that, I think, is these two things are inherently unrelated. It feels like it's similar - you manage your content with the CMS, just like your users manage their content, but it's actually completely different. One is a tool for developers to quickly build a website, the other is a limited set of tools within an existing website that's exposed to the user. You will never want to expose any part of the CMS to your users, you'll want to have control over that, so it really doesn't matter if you use a CMS or not.
in short - sure, you can use any CMS to build your website, and you can build it from scratch. I'd prefer the latter cause I like building stuff from scratch, but it's really irrelevant to what you're trying to build.

How can I pop up a window containing a star rating system, so a user can input his rating

I am building a project and I want to implement this:
a user clicks on a button
a pop up window appears showing star rating
the user enters his rating in the pop up
then I get the inputted value
anyone knows how can I implement this?thank you

Ok.
Question is too broad, but here are a few elements:
- you dont want a popup, because it's ugly, and browser often block them.
If you control the code of the rating form (same domain, same security level, and same code base) I guess a modal is the way to go (templating systems like knockout or angular will help you a lot). Then you can get the result with simple javascript (synchronously).
If you don't, a iframe is probably a good solution, and you can communicate with it via postmessage API, or websockets, or any other solution you can find by searching for this specific question.

How can I disable a website using jQuery or similar?

I have a website that has merged with another. It is a high ranking website so instead of using a redirect or similar I would like to keep the website online as is so that it does not affect SEO.
I want it so that when users visit the website it appears grayed out and a central box is shown with a message saying that the website has moved to www.newsite.com and they are not able to click any buttons etc. on the page.
Is it possible using jQuery or similar?

This is possible with jQuery modal, but to be quite honest your best bet really is to issue a permanent redirect (301) to the new site. You can likewise go to each of the major search engines and use their webmaster tools to indicate the site has moved. Your SEO ranking might dip briefly but the search engines really do recognize the fact that sites and content move these days, and the ranking won't be permanently affected.

You could do this however you like. JavaScript is probably not needed here. Create a simple modal, and style it in such a way that it looks how you have envisioned.
There are jQuery plugins to do this kind of thing, but honestly that's going to be more work to hook up and create more overhead than you would just making your own.
If you need some CSS help to accomplish this, let me know and I'll update my answer.

You can hide Everything in body and append a div and style it like an modal or something as you like
$(document).ready(function(){
node = $("<div id='modal'>Site has been Moved moved etc.. </div>")
$("body").append(node);
$("body *").not("modal").hide();
});
css
#modal{
/*style modal here */
}

Doing what you say will likely damage the SEO, however is possible with some simple css an jquery as long as the user has scripting active. CSS and HTML can achieve the majority of what you want without the need for Jquery or scripting.
A properly implemented 301 redirect will ensure google maps across and acknowledges the movements of pages from one domain to another. BUt you need to do this properly.

Preventing the loss of keystrokes between pages in a web application

My current project is to write a web application that is an equivalent of an existing desktop application.
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed. Does anyone have any tricks for preventing this? Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT, or will that still have the problem of lost keystrokes?

Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.
Basically what you are really asking is; how do I speed up a web application to increase response times? Your anwser is AJAX!
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages. Remember, don't over-use AJAX. Using too much javascript can hinder usability just as much as it can improve it.
Related reading material:
Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.
Ajax Usability Mistakes
AJAX Usability Checklist

Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link. That way the form is already loaded as part of the page. It should appear almost instantly.
You can find modal div tutorials all over the place, shouldn't be too tricky. If you're using ASP.NET there's even one included in Microsoft's AJAX library.

AJAX or plugin are your only chances.

I think it will be quite hard to do what you want. I presume that the real problem is that the new page takes too long to load. You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible. (see Simple Tricks for More Usable Forms for some ideas)
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke)
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page. (see Save Changes on Close of Browser or when exiting the page)
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes.