I want to track changes (review comments/edits) made to a document that we are displaying on a web page. - javascript

I want to track changes (review comments/edits) made to a document that we are displaying on a web page. What is the best way to do it other that Google Docs/Dropbox and Microsoft Word Online?

Need more info, at this moment I think that you and your team has shared document, that you are editing together and you want to track changes. I can propose for you three easy solutions.
Learn markdown(it's readlly simple) and use source control, for example git. For learning markdown and git I think you need about 4-12h. From my point of view it is very good, free and easy solution.
Small intro to git - minimum set of commands, also you can use UI client, but I think better to learn with console and than start using UI
git init
git remote add origin master https://github.com/yourRepository
git add *
git commit -m "description of the update"
git push
Another one is evernote. Evernote allows you to create shareable documents(notes), similar to google docs, and in premium account(costs 70 $/year) you can make snapshots of the notes and later compare them similar to version control. The big advantage of evernote - it is easy to use and you will get UI similar to word and other familiar to you(I guess) text editors. Moreover overnote have a lot of functionlity for team organizations. I steek to evernote in a week.
Attlassian Confluence. I can't tell you lot, because personally I'm not active user of(usually I'm only read content), but I can say it is great tool. Also it is used in my team. Costs 10$/20$ a month.
All solution will allow to have shared, organized documents with tracking and managing changes history. For my personal organazation tasks evernote and git were enough, switched to evernote because it more human friendly, but source control and especially atlassian provide much more powerfull, usefull posibilities.

Related

How to implement Speech 'Identification' in Javascript (or a Flask WebApp)?

I needed to implement speech 'identification', ie. Guess if the person who is trying to login, is actually him/her, by matching his/her voice.
To consider the case, where the app doesn't recognize the person, but the user is himself trying to login, then he may bypass it with a pin, setup during initial settings.
I am using Python and Flask, to build the webapp, and included javascript in the question, so as to know of possible ways in it too.
Till now, i read about it from some sources, but i couldn't arrive at a possible solution, on stack overflow, as well as 'few' blog posts.
The best 'possible' solution i could arrive at was Cognitive Speech Services by Microsoft -
https://azure.microsoft.com/en-us/services/cognitive-services/speaker-recognition/
I also thought of recording the voice using the Recorder.js, and analyzing at the server end, but couldn't implement it.
So, i wanted a way to implement it on the web app, even a simple gist with a bit of code on using ms cognitive services (i did read pages of the documentation, but it didnt help much), or doing it by python will be helpful.
The documentation at https://learn.microsoft.com/en-us/azure/cognitive-services/speaker-recognition/home will be helpful. Note that there are clickthrough links to the API reference. It explains the high-level process (use “enrollment” to train).
We have speaker identification, which is distinguishing who is speaking from a group of known voices that you train with. You need to provide labelled data (meaning examples of a known speaker talking): see https://westus.dev.cognitive.microsoft.com/docs/services/563309b6778daf02acc0a508/operations/5645c3271984551c84ec6797.
or
Please follow the below link speech SDK samples.
https://learn.microsoft.com/en-us/azure/cognitive-services/speech-service/
You can use batch transcription api and enable diarization.
https://learn.microsoft.com/en-us/azure/cognitive-services/speech-service/batch-transcription
As #Ram pointed out that we can use the Microsoft Cognitive Services, we used the same to implement it.
First, we needed an API key from Microsoft for the Cognitive Speech Service (they give a 2 keys, and an endpoint for 7 days in a free trial, without any card, and another free version for a year maybe, with card details)
Get the API keys here : https://azure.microsoft.com/en-in/try/cognitive-services/?unauthorized=1
Then, i went through the documentation of Microsoft, but couldn't really be helped by it.
What helped was this : https://github.com/rposbo/speaker-recognition-api
I went through all files, and the 'needed' part was mainly in the speech-recognition-api-demo-core.js and the demo.html
First understand what it's really doing, then only you can implement it on your page.
That actually concludes the answer, since that's how it 'can' be implemented using Javascript.
Extra - https://github.com/AdityaGupta150/ProtoMain - We have used only the needed part of Robin posbo's code (you won't be able to just copy paste, first understand it), and implemented it, you can see that in templates/verification.html

Is it possible to edit and save website content to server, making the change viewable by everyone?

I have created a website for a third party, who have no experience in editing HTML. However, the third party wishes to be able to edit the content on the website without having to open the files and edit it this way, they wish to do it somewhat WYSIWYG (For example, hit an "edit" button for the content they wish to edit). Is this possible to achieve? It is not an internal website, it has user tracking (this should obviously only be available to admin users).
Is there a way of making contents of a div editable, then saving the change directly to the server, so the content gets updated publicly?
I am currently researching the topic, and although I have found some indications that the solution may be a PHP script, I have yet to find any definitive solutions or examples of similar functionality.
Yes you will need a backend language or framework to archive this. Where Javascript is used to interact with the page, the actual storage of information requires a database or similar technology.
Unfortunately which backend language or framework to choose really is the million dollar question. It largely depends on exactly what you are trying to accomplish, what your client or user is comfortable with, and how much experience you have programming.
PHP is fast and time tested backend language. Node is the new kid on the block, and it very popular also. Java and dotNet are on the way out. You can dig up a bunch more including Go, Python, Haskel, Etc.
You can use a languge listed above and start scripting away, but this can be time consuming and error prone. Most people use a framework to get started, and program using that framework's tools. The most popular PHP framework is WordPress, but it is designed for blogs and might not fit your use case. I use the framework Craft CMS which is very customizable. But the way you are phrasing the question a framework might be overkill. This is really up to you to decide after doing research into the available options and comparing them to what you wish to accomplish.
For the WYSIWYG, you might want to look into the following tools for the client to edit content:
https://imperavi.com/redactor/
https://ckeditor.com/
Hopefully this provides some direction, happy coding!

Strategies to avoid code duplication in web application

I'm trying to find the best solution for a big problem with code duplication. We have an ASP.NET Web Api backend with an Angular frontend. Our backend solution also has multiples projects holding the Business Logic and DAO for access to the database.
Now, the problem is we have multiple customers, each one has a different UI with sometimes different Javascript code, but the backend remains the same. So, currently, for each customer we create a new project in Visual Studio with almost all the client side code being duplicated + the UI changes and also all the Controllers from the backend being duplicated too, as well as files as Global.asax, OWIN auth, etc.
This is becoming nightmare, there is a LOT of code duplicated and it's a pain to maintain. I have think some options:
Have a different .js, .css, .html file for each customer, but only for the files we change, then, when deploying, tell Visual Studio which file to deploy according to the configuration (I don't know if this is possible)
Find some tool that allows us to conditionally change code in javascript in the same way Visual Studio does with Web.config for the different deploy configurations
Look for another approach/architecture for the code?
You can reference a project in multiple solutions.
I would build a series of common projects and then individual customer projects which pull in and "finish" the web app.
It would probably be prudent to make that final customer project a template to make sure nothing gets missed.
What you need to do is convert your multiple systems into a product line.
A product line is a software code base plus configuration management driven by (product) features [in OP's case, a feature might be a customer-name]. The features specify the specific properties of a particular product line instance. The configuration management tools use the feature specification to pick out the parts of the software base that are relevant, and add it to the baseline (completely shared) part of the product. Good feature managementment will allow some features to imply or deny others to help minimize the problem of getting the right feature set for a product line instance.
Product lines are not easy to build; but then managing a big pile of systems in an ad hoc way that are pretty similar is even harder.
You can use open source tools such as XVCL [a kind of "conditional compilation" that works across any kind of source code] or commercial packages such as BigLever to implement product lines.
To get from your current state into a managed product line will require you to discover what what current systems share, how they vary, and invent a vocabulary to describe the variations as features. You can do that by hand (painfully). You will likely do better using a (JavaScript-capable) Clone Detector, and focus on language-specific commonality extraction. If your software has multiple kinds of artifacts (HTML, JavaScript, SQL, build scripts,...), you may find that an organized process for discovery of commonality across and within multiple levels (see heading "Refactoring to Product Lines") is constructive.

Real-time collaborative rich text editing

I would like to have a real-time collaborative rich text editor for my webapp. So far i've done a LOT of research and i'm really a bit frustrated that there is nothing fitting out there.
The thing is, that every solution out there is tightly coupled to an editor (Firepad for example uses CodeMirror/ Etherpad uses Etherpad).
There are only two other solutions i found interesting:
ShareJs -> works only for plain text
Webstrate -> This was the MOST promising to me. It can handle DOM synchronization and therefore it can handle every contenteditable - great!
But the problem with Webstrate is, that it is in an alpha Version. So for me it was too buggy - didn't work out. Tried to get it working for about 2 days. The text synchronization was easy. But it didn't work with iframes or other stuff.
My claims are pretty high for a collaborative RTE - it should support:
Images
Iframes
Video
Text (of course)
While i'm searching for about 3-4 days now for a solution - maybe someone of you has a hint? Would be very gentle ;)
You can try http://swellrt.org, is a complete framework to develop real-time collaborative apps including rich-text support and an editor for Web.
It provides a JS API, analogue to GD Real-time API, plus rich-text editting.
The editor can be extended to support any attachment.
It's a fork of Apache Wave that generalizes the original code.
The closest thing I found is http://quilljs.com/ - it has an API for getting and updating text deltas and also for getting and setting multiple labeled cursors. It doesn't manage the real-time editing for you, but it gives you enough to work with (more than any other project I found). However it is not as comprehensive as other editors in formatting (for example, it doesn't support tables and nested lists). It is somewhat extensible, so you may be able to add support for additional HTML elements.
Robust collaborative rich text editors are still somewhat bleeding edge. Most web based text editors fall into of two categories.
Those that are compatible with real time collaboration but have fairly limited functionality (e.g. no tables, no nested elements, etc.).
Those that are very robust web based rich text editors, but lack that API to integrate with real time technologies.
Then there are the collaboration engines like ShareDB, Google Drive Realtime API, SwellRT, and Convergence (full disclosure I am a founder at Convergence Labs). These types of systems each have their own opinion on data models and how to mediate collaboration. It may be the case that the way your favorite rich text editor works internally is incompatible with the API of the collaboration engine.
The technologies out there that simply sync the DOM are interesting because they are often portable across editors and are less dependent on the editor API, but they tend to lack a lot of the required real time editing capabilities that are required for good collaboration (shared cursors, shared selections, etc.). This can be very hard to implement on top of a DOM syncing approach from outside of the engine itself. Unfortunately, without these features, the collaborative editing experience is not that great.
There are several projects out there that are attempting to remedy this situation. The folks at CKEditor are working on CKEditor 5 which has collaboration in mind. Also, over at Convergence we are trying to work with the authors of many of the popular editors to enable real time collaboration.
The reality is that it is still a pretty new space and evolving quickly. There is no tested, scalable, slam dunk solution that provides and out of the box fully capable, collaborative, free and open source editor. The situation looks to be improving over 2018. Hopefully in the next 12-24 months this becomes a much easier problem.

What's a good way to merge remote, standalone web apps into a virtual site?

We have a few dozen web apps on multiple servers/platforms owned by 5 teams at our company and want to merge them into a single site. The UI part is straightforward - a common header with login/status info, tabs for the major sections of the site, and yui menus for navigation within a section.
The hard part is finding a way to do this while making minimal changes to the existing apps, which are easily breakable and a pain to deploy. We want to minimize updates to the apps and try to get it right the first time.
The only working solution we have now is to include a Javascript file to write the site header/navigation at the top of the page, which lets us easily deploy changes to all of the apps:
script src="..../site/include?appid=xxx" // app id determines which tab/navigation to display
Is there a better way to do this, especially one with better performance than remote dynamic Javascript that writes the entire page header? Are there existing frameworks to simplify this?
Consider using a portal framework like uPortal. You could aggregate all those webapps -- no matter what technologies they're written in -- by leveraging a web proxy solution.
This suggestion might be overkill if your needs are really & truly simple; but uPortal (and others) provide scores of additional functions -- like administration, statistics, SSO, and integrations with other platforms and services -- that quickly add to their attractiveness.

Categories