When to use a virtual list? - javascript

I'm building a feed like Facebook or Twitter using React. I need a list of posts... however, I don't know if it's worth having a virtual list or not.
I don't know the height of each post until it's been rendered as it might contain an image or a video, I also need the whole window to scroll (not just one element), and I need it to be an infinite list (to load more posts when the users reaches the bottom).
What benefits would I get from using a virtual list rather than simply displaying all posts? it seems like a lot of work to maintain and set up what I'm looking for.

Related

Is there a way to determine if CSS class is active in HTML page?

this is more a curiosity of mine, I don't know if it's something possible.
If I am inside a HTML page, is there a way to quickly determine if a CSS class is active inside that page?
I explain better, let's say I am inside a website with a list of different users and near their avatar I may have a green badge for online users, while others has grey badge.
If this list is really long, is there a way to programmatically (or at least quicker than scrolling and looking by myself) detect which users are online?
I thought they have a different active CSS class but I don't know how to look for it.
Thanks
NOTE: I know how to detect an element, but if there's a list of elements I need to know which of them has a particular class active
you can use (inspect) in chrome ctrl+shift+i in inspect element you can see which css is active or not right side
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Placing the code below within your developer console should display the length of the existing classNames if they exist.
const classes = document.querySelectorAll(".className");
console.log(className.length);
You should then be able to navigate the classes for the relevant information by navigating the object trees returned for each object found by the querySelectorAll method.
But there may be times where this may not be the true count to the data set.
For example, if the data is dynamically loaded during page scrolling. You can then add an iterator loop to detect when you have reached the bottom of the page and push to the classes array.

Angular UiRouter potentially infinitely nested states.... Is it possible?

Ok so here's my problem Imagine a photo feed that can be grouped by tags.
I have states feed, feed.photo and feed.photo.tags;
Now when you go to feed.photo.tags its meant to show you all tags that you tagged the photo with.
But from there I'd like to be able to click the tag and see the feed of photos grouped by this tag so dynamically go to feed.photo.tags.feed and from there deeper and deeper as much as linking allows me (feed.photo.tags.feed.photo.tags.feed.photo.tags....) potentially infinitely nested.
Can someone point me in the right direction whether it is possible to do without actually specifying the state nesting through the $stateProvider other than getting to lets say feed.photo.tags and from there going dynamically down whatever route user chooses?
Also its not just a combination of feed.photo.tags it could be for example feed.photo.userprofile.feed.photo.tags.feed.photo.comments.userprofile etc... its not a finite list it could literally take you anywhere in the app. It kinda would have to generate possible child states at the moment of loading certain state.

Save position of draggable div jQuery

I have a website, and I am making widgets for it. Those widgets are draggable. I was wondering how I would save the positions of the widget (And if it is hidden or not [disabled or enabled]), and load the positions and if it is hidden or not when you join the website again (With the same user). Thank you for your time, please post comments if you don't understand what I need.
I am assuming that your widgets are in a <ul>, one <li> per widget which is quite normal.
Be able to position them
You need to arrange the widgets in a specific order in the first place. Imagine you already did the hard work and have the data that a user would have. Hard-code that and get your modules to appear correctly. Change the data, see if the modules appear as you expect.The user needs to drag them. jQuery draggable is your friend.
Prove you can get your data
Be able to get the order of widgets from the page after they've moved. draggable example shows a .serialize() function. Also you need to know which is on and which is off. You can create another list using jQuery .map() which can return their ID and state if you ask it nicely. Alert to the screen, write to the document, or preferably use console.log().
Interact with the server
You can skip this if you want to test using just cookies because the browser can set those.
But if you want to store this with the user's info in case they log out, start a new session or use another computer you'll need to use a database.
You need to know about sending data from browser to the server using ajax. jQuery is your friend.
You need to learn about storing user info in the database.
Restore the positions
You want to be able to set the positions of the widgets from a list that isn't hard-coded, so be able to order the widgets correctly on page load using the data that you saved. You did this in the first step but with hard-coded data.
What you will have to do is:
Save the status at a given time. For example when you change it.
$('#toBeDragableId').draggable({
// options...
drag: funciton(event,ui){
theUserposition = ui.position;
}
});
You need to save theUserposition in a consistent way, like a database or using cookies or client side storage. Afterwards, you need to recove it and set it when you load the page.
Similar Question
Example using Cookies

living web page elements

I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.

Refreshing "online" users with JavaScript

I have a chat app where it shows users who are online (username + profile pic). I have an ajax poll that basically checks to see which users are still online, and refreshes the list automatically. Also, the list is ordered based on last activity.
The way I've been doing it is:
Get list of current online users
Clear existing elements
Re-add them (will be ordered correctly since the returned list from step1 is ordered)
This works fine in Chrome, but I notice in Firefox that it is causing a "flickering" effect while the images get re-added.
What is the best way to do this? It seems overly difficult to create an algorithm check which elements exist, if they are in the right order and move them, etc. Thoughts?
How often do you poll to see if users are still online?
I think the best way may be to give the user records unique ids so you can then check the list of users that were online against the new list of users that are now online.
fade away the users that have left and fade in any that have logged on.
It will be a much more elegant solution and it solves the problem you are having.
Firstly, I would try to "cache" the images separately, using the "preload" technique. That's when you create an Image object and set it's src to the URL of the userpic. Then you store all those objects in a global array. This will prevent the browser from getting rid of the images when they are no longer on the screen, so that it will not have to load them again when you reload the list.
If that doesn't help, I would actually reuse the existing list elements. I would just go over the elements, one by one, and replace their content with the appropriate content from the list. If I run out of existing elements in the process, I add new ones. If any elements are left over when the list ends, I remove them. This is a bit more complex, but actually not as complex as it looks at first glance.

Categories