I'm trying to make a website where my friends and I can colaboratively write a story. My first problem is figuring out how to create a text box on the website where a user can just write, with with the ability to do some basic formatting, such as tabs and italics. I'm having trouble finding information on how best to create and save that kind of text. I'm using Javascript and React to create this website, and probably a NoSQL database to hold the various entries. Any pointers in the right direction would be appreciated.
I would suggest just using a pre-existing library for a simple WHYSIWYG editor such as Draft.js (has react support and maintained by facebook) . Note with any library you pick you will need be careful with how you are storing and rendering user input, don't want to open yourself up to any XSS attacks. If you want to roll your own for the fun of it then you will need to store state I'd look into the object draft.js stores to handle this
Another issue you are going to run into is the collaboration part. You will need some kind of procedure for handling this. Google docs uses this Operational Transformation. You'll also probably want to look into websockets for handling all this realtime.
Related
How do I implement a Search Functionality in my website?
Is this search functionality made from any programming language or any framework?
I want to know the actual work in implementing a search system and not the HTML & CSS because I already know the designing part.
Also don't want to download any prebuilt tools, just wanted to write my own code.
This is a very basic question. However.
You will need a programming language for that purpose (of course JavaScript).
So , to get a search functionality, you first need to index your website. That is, create a list of texts or words/tags of posts or whatever whether in a database (preferred) or in a simple file.
Next, depending upon your backend, create a program that accepts input from frontend and search the query in the indexed file/database.
Return it to frontend (use JavaScript) and show it to user.
Good day,
I am currently working on an automatic system that generates invoices with data that it receives from an API. I am currently doing this with Django (Python) to create some variation. Well, I want to create a system with which you can easily create templates for these invoices. You have seen these kinds of systems before. You can move blocks with items such as a logo or text wherever you want. Well I know that these templates are further stored as HTML. Only nowhere I can find clear information about how I can easily assemble such a system or how such a system works. Below I show a GIF of the system what I want. If anyone has any information on this I will be very happy if you can share that with me :)
Only nowhere I can find clear information about how I can easily assemble such a system
Yes, because making such a system is not an easy feat. You shouldn't do it yourself unless you know what you're doing and you are ready to deal with a lot of edge cases.
That being said, there are libraries that enable you to create such interfaces. One being https://interactjs.io/ (not affiliated with them). Then you need a WYSIWYG/Markdown editor that can be enabled on click as a tooltip. For example, https://www.tiny.cloud/
Then you need to find a way to save and load everything. Depending on the library you use, you might be able to get away saving and loading the HTML. However, it's more likely you'll need to implement a proprietary way of saving data. For example, using JSON or XML.
Best of luck!
My business has hundreds of incoming emails daily and my plan was to have the sorting and answering at least partly automated. I know that using JavaScript it would be possible to select those elements on the webpage (i.e. in my inbox) that are email tabs but, as far as I'm concerned, I can't implement cursor movement and clicking in JavaScript to open up the emails one-by-one and copy-paste their contents into a separate file. I want to collect and analyze the texts from incoming emails, classify them based on topics using a large set of keywords, and, once the grouping is finished, assign sample answers to these messages that only have to be proofread and then can be sent out.
My idea was to use Python because it is quite convenient to move the cursor in Python. However, I can't seem to figure out how can I analyze information that is currently on the screen, so that the program can "see" if there are any new emails. In JavaScript this seemed easier, I don't know if it is even possible using Python though.
I am using Windows.
Am I on the right track? Or totally wrong? Maybe I should consider another programming language? Thank you for your insights in advance.
As far as i understand you need to automate the functionality of collecting information in emails to a separate file for further processing. For this I think you can use Selenium Web automation tool (Python) . It is normally used for web site testing. But can be used in use cases like you mentioned. Hope this helps.
https://selenium-python.readthedocs.io/
https://pypi.org/project/selenium/
I am working on a project/idea, my use case is for my significant other's blog/craft/recipe website. I want to create a personalized service that uses Firebase to host, and I want people (like my significant other) who have no coding/html/firebase experience to be able to upload new pages when they please (this will be done on the backend with firebase's hosting API, and on the front end with a customized UI and form).
I have most of this worked out, but I have a remaining question that I have been unable to find a direct answer on:
What is the best way to create a new html file, based on a template, just with new information gathered from the above mentioned form?
For instance: Given a recipe website, where each recipe has its own page and route. The form above would, theoretically gather all information needed to name this page, and gather all information needed to add to this page to make it complete.
I would imagine that I would need to have a template html page and copy then add information to it, upload and serve via Firebase API, etc.
Is there a specific templating engine that assists with this already? I am having a hard time trying to extend the existing templating engines that I know about into this use case.
TL;DR - I know this is a long-winded question, but in the end, I am looking for the best, most efficient way to programmatically create a new HTML file that will be based off of a given template, add custom information, and upload/serve via the firebase API - using Node/Google Cloud Functions, of course.
I do NOT need any code written for me, just looking to be pointed in the right direction, as I have been researching this for about a month prior to asking here, and this has been my last resort - I am just frustrated because I know there is a way to do this, but have been unable to find what I need.
I have a client who has requested I develop a simple web designer (ala CustomInk.com's t-shirt designer) which allows users to drag & drop text and uploaded images onto a canvas.
I have some ideas about getting started with javascript/jQuery but I wanted to ask SO: What is the most universally accessible way (in terms of browser support etc.) of developing an editor like this?
Does anyone have any advice/experience in the matter before I start fooling around blindly?
For cross browser support, your job will be much easier if you decide to use a Javascript library, such as jQuery. The big reason for this is because jQuery will encapsulate all of the difference between Javascript implementations between browsers. Writing this all from scratch is not really feasible.
So in your case, it sounds like you want users to select pictures and text, drag and drop them on a canvas of sorts. Then, what's your desired format for saving what they create? Are you trying to make a resulting image out of what they create?
To get started, I would check out jQuery UI. You can use the draggable and droppable functions for the front end, and when your users are done, you'll need to post the coordinates of their elements, text, and which pictures they're using, etc.
It seems like your biggest challenge is not making a pretty interface for this to happen, but instead, persisting what they create.
I've recently been working on something similar - you can check out the dev site here, and the js is not minified, so feel free to take what you want.
Initially I went for trying to 'render' the draft in SVG - this ended poorly, as browser support is still not that great, even using svg-web and similar libraries. I needed to do stuff like round text, and those features can really creep up on you.
In the end, I wrote a tiny python server (using CherryPy) that generates a png based on a set of querystring parameters using python-cairo. It takes serialized json object of 'text lines' and images. The png is actually the resource, and the function itself returns a 'render.png' filebuffer, so all you have to do on the front end is change the src attribute of the <img> tag and it will refresh. I added upload functionality to the "image processing" server, too.
Since I was already serializing json that contained all the information about the design, saving that in a database and loading it to edit designs was trivial.
I would definitely recommend a library like jQuery (which is what I used) to make development easier. I didn't manage to do much in the way of dragging/dropping, which is something I would probably try to do from the start if I was starting over. Feel free to email me if you'd like to see some of the back-end code or if you have any questions (my email is in my SO profile).
Jquery UI is the way to go, it provides drag and srop functionality and it's cross browser. Check it examples and documentations at http://jqueryui.com/demos/draggable/