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!
Related
So i'm seeking for a couple of questions to be answered. I am using a api which returns a list of products (15000+) how ever they use pagination so it only returns 20 per page.
I would like to be able to show all of this data on my shop so users can search through it etc... however, issue... it takes A LONG time to loop through it etc etc.
Is there a good method to do this? Shall I just loop through all the data and allow it to be added into an array once loaded? Is there something "special" we can do with the pagination?
I am new to this, and just seeking advice on the above.
Kind Regards,
Josh
There are a few thoughts that strike me straight away so let's cover those first:
From a pure UX perspective, it's very VERY unlikely that any user will ever need or click through 15k+ rows of whatever. So loading them all doesn't serve your user even if you could figure out how to do this in a efficient way.
Instead, look at what serves your users which likely in this case is some sort of filtering or search options. I would look into if your API has any support for things like categories (that should be a set smaller than 1 request maybe) which is much easier to display to get the user to cut down a lot of the data set. Then also look into if they offer some sort of query or search filter, maybe the names of whatever is being displayed. This further lets your users zoom down to a dataset that is manageable (roughly 100 items max). From there, 20 items per page is just 5 pages. Still though, you should only really load 1 page at a time and focus on better ways to offer SORTING, if you can find what the user needs on the first page, you don't need to load those 4 other pages. Hope that gives you some ideas of what to look for inside your API, or what to add if you can add it yourself.
If not, perhaps it would be worth considering loading the data into your own database and set up some background/nightly task that fetches any updates from the API and stores them. Then you build your own API around your own database that has functionality for filtering/searching.
A final option is indeed to simply ask for the first page, and then display that while you wait for the 2nd page to load. But this risks making an awful amount of wasted requests which wastes not only your users bandwidth but also puts pressure on the API for what is likely going to be wasted work. So there are a few other UX ideas around this as well, like infinite scrolling. Load the first 1 or 2 pages then stop, until the users scrolls past the first page and a half, then request page 3 etc. This way you only load pages as the user scrolls but it's a bit more fluid than pagination with numbering. Still, you'd likely want to offer some way to sort this set so that it becomes more likely that they'll find what they need in the first few "pages".
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.
I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.
What would you recommend?
JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.
If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.
Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.
It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.
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.
TL;DR:
Best way to preview future-scheduled ads (i.e. for a newsletter)?
Possible to archive old ads associated with archived newsletters?
I'm working on a newsletter publishing tool, which uses GPT (Google Publisher Tags) for ad unit placement. I was wondering if it's possible to preview the ads that are scheduled to run at some point in the future (ideally, not counting impressions in this context).
Similarly, I'd like to keep an archive of old newsletters, and still show the ads that were published at that time (the ads correspond with the contents of each newsletter). This particular case might be better handled through placement targeting within DFP, no?
Ideally, the ads could be displayed as of a particular date or timestamp; is that possible?
However, if that's not feasible, I'm not opposed to changing our inventory structure (and/or using placement rules), but would like to avoid setting up individual ad units per newsletter to accomplish this. Any ideas?
Additional details (for process-related context):
Currently running 12 weeklys, but moving to dailys
7-10 ad units per newsletter
As far as I am aware the only way to preview creatives without generating impressions is to follow the instructions given here.
As for your archive, yes placement targeting is probably your best bet here. I made a jQuery plugin that allows me to target ads based on the URL. So you could do it that way as well... but you could just as easily use a keyword and the stock dfp scripts.
Also what is wrong with the built in date functions of DFP? You can have multiple line items within each ad unit starting at different dates... that sounds like it would solve most of your needs? If it is a case of needing the one line item to show within the same adunit on different pages starting at different times then it becomes a lot tricker but solvable with a little bit of extra js (let me know if you want to do this and I can give you some examples)... you are probably best to just duplicate the line item and change the running dates on it though... its a lot easier that way!