i plan to implement a webapp that allows users to add widgets that are predefined by me in something like a menu (e.g. two buttons and a card with some content) to something like a canvas.
I then want to save this layout so it can be later restored on the same device as well as on an other device.
There should also be a fast way of deciding on one device to add one widget to a layout that is shown on another device right now. This addition i made from one device should be visible on the other device instantely.
I thought about how to do this but am unsure, I saw some stuff about saving it in databases or in json format like in this example with react https://www.storyblok.com/tp/react-dynamic-component-from-json.
As I am a beginner, I with vue.js as well as json etc I am quite unsure on how to decide how to implement such a functionality.
For example with a database/json file I am unsure on how the other device will receive that something was added by another device.
I am glad on any tips or suggestions.
Related
I need to create a web app where users can customize on real-time their bags using the available options.
Firstly I thought in having an image per every combination but that's not very intelligent due to the huge amount of possible combinations.
Another idea is to crop every customizable bag section and create a version for every option. This is better but not ideal. The idea is to be able to simply upload new options, without needing to be cropping images every time.
How would you do this guy?
I have some javascript experience but this is the first time when I do something like this.
Many thanks!
Until now I mainly made web sites suitable for PC (desktop) with help with Javascript, jQuery. Now I need to make some small web site Tabular job time records with menus, popups, dialogs, charts and the ability to input and modify data by click events (mouse or touch device) on table cell, plus additional statistics, math, etc. I started by making separate versions including jQuery mobile) but after some time it was very confusing for me to track all changes and understand such complex coding! Then I decided to apply some kind of responsive technique but after reading a dozen web articles I'm still unable to make conclusion what way is right!? Do I need to start web site as primary for mobile and then add some code for desktop, or opposite? Or is there some way, implemented does score for all three type of devices? Thanks.
This question is a little vague. If this question is only about the javascript interactions your answers will vary with UX requirements and libraries. As far as layout etc is concerned, both bootstrap and foundation recommend you start with a mobile design to have the minimum amount of elements necessary for all the content, then add features and readability as you get more real estate.
Mobile first is simply a way to ensure that you don't end up with too many elements to fit on a smaller screen.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
This is my first time asking questions here and I have just started learning jQuery mobile so if it is not quite relevant or if it is just really obvious I apologize in advance.
What I am trying to do is build a mobile site for an online catalog for lots of books.
The original website has a very sophisticated way of filtering and sorting the search results based on the user's input and preference so unless it's absolutely necessary, I would really like to keep the original functionality of the website.
I was thinking maybe I can create a "mask" that looks like a mobile site to cover the real content; and whatever the user requests, I will go "underneath" the mask, do the search and when the data is loaded in the original website, I will then present them in a more mobile-friendly way.
So here is my question:
Is it possible to somehow include/embed a mobile site in the original html?
If so, could you please give me a few hints (books, articles, tutorials, anything) as to how I can approach this?
If not, could you please tell me how I should make the mobile site without having to re-create all the nice functionality that original website already has?
Thank you so much! :)
You could do this but you shouldn't. Mobile websites are optimized for mobile users. Not only as layout but also in loading weight. The direction you are heading you end up with a regular side (probably big in load) and add an overlay (extra load) to rebuild the layout (CPU heavy). So it's not the right way. A better solution is to create a optimized layout for mobile users only.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.