Develop Reference

Assign views randomly using an array - react native

I'm trying to come up with a way of randomly inserting views into a flexbox grid I've made in my app. The app looks like this
I have an array which will have a maximum of 6 elements, however these can change.
I want to insert these elements into the grid at random, however it's proving to be more difficult than I expected.
I grab the array asynchronously, so it needs to update on the fly.
Can anyone recommend any way of doing this? I'd post the code I've tried but it's pretty useless up to now.

Limitation of Angular and browsers with regards to data loaded

I would like to know what is the maximum data that angular framework can handle. Say, I am displaying a chart using angular and some charting framework like chartjs. I'd like to know up to how many data can the browser display properly, with slowness, or up to when it crashes.

Your question has no simple answer, but I will try to flatten it and give a simple answer, or at least simple things to consider...
Angular (at runtime), like many other frameworks is simply JavaScript,
So let us reduce the question to "Limitation of JavaScript and browsers with regards to data loaded",
JavaScript has no upper limit of memory or storage it can handle,
I've seen JavaScript applications that require more than 15GB of RAM,
and they performed well too.
So assume data size itself is not an issue (unless your application is poorly implemented, leaking memory or just not very efficient, of course).
The main challenge as I see it, is displaying and manipulating the information
without causing unnecessary delay or unresponsiveness.
Displaying the information - let's say you have a list (or a table) containing 1,000,000 possible gifts which you then want to display for the user to select.
Adding the list items to the document one by one is tempting, but will require the browser to repaint after each addition (causing a delay or full unresponsiveness until finished), another way is adding the elements to some DOM element (denoted by N) still being kept in memory, then adding all elements corresponding the list items to the element N (still, just an in memory operation), finally adding N to the document containing the entire list - the will be a much better solution for displaying the large amount of data.
Manipulating the information - displaying is indeed not enough. you would like to move, drag, sort and filter the data being displayed. And as mentioned before, it is a bad idea removing many elements directly from DOM. You should instead remove container from the document's DOM to memory, manipulate the data in it, and then add the container right back to the document. Angular does this kind of magic for you.
(Toggling the 'display:none\block' css attribute of many elements has a similar blocking effect as I recall).
A good practice is implementing an application/page showing only the amount of data that can be processed by a human at a single glance. The rest of it should be considered in the application data-layer, in memory, and should be loaded to display given the appropriate need or request.
To conclude, you can deal with huge amounts of data as long as you provide a mechanism that efficiently filter the displayed information.
I hope it helps...
for further reading:
Slow and fast ways of adding elements to DOM
A question emphasizes the lack of memory limit used by JS
CSS display attribute performance
A good discussion about the reasons for slow DOM
About using HTML5 correctly - old but still true
Once the DOM creation procedure is understood - it much easier to display data without affecting performance / user experience

HTML/JavaScript - Determine how many pages to be printed

I'm developing a single page app that fetches data from the back-end to an AngularJS controller and then shows them in some grids and charts and stuff like that using KendoUI. Then I want to generate reports of these grids and I want it to be print-friendly; still fine.
The problem is that I want to add a footer row at the end of each printed page, that contains sum of all rows in that page, which I can't, because I got no idea about how many pages it takes and how many rows would fit in a page after printing.
I tried different ways like creating PDFs but the other issue is that most of pdf libs don't support UTF and that's something that I need.
What I want is: to have the number the of row elements in each "Printed" page, then I would calculate the sum row and add it to that "page". In fact I need something like "page-break event" or something like that, as the whole job would take place in JS runtime. But there seems no way to do this when printing HTML directly, Because the browser is the one that deals with the printer.
So the only way I found is to fix row heights and calculate how many rows each page contains, And hope that users don't change the paper size.
Is there any way?
PS. I wonder why I didn't find anyone with this issue. Because it's very common in report generators to calculate total of values in a page when printing.

? about DOM Scripting for a particular project

I was wondering if I could get a little bit of guidance with Javascript. This is all going to be from scratch so no frameworks or plug-ins involved.
I'm starting a new project where I'll have a page with 12 thumbs and a next button. Clicking the next button, slides the 12 thumbs to the left and hides them, showing 12 more thumbs which will be added to the DOM on the fly, etc etc. Once you're on page 2 or above, a previous button will be displayed. All of the info that will be used to populate the DOM I imagine will be in the form of JSON. Is that the best way? Would an array suffice? What is the best way to keep track of what page I'm on? When I'm on page 2, what is the best way to get items 13-24 from the JSON object, etc?
I have some ideas but I'm looking for best practices.

Use objects inside an array, with each object containing the info such as thumb path, image path, caption, etc.
You can slice() an array.
However, if using JSON, you probably want to request with XHR the images as you want them, so just pass the page number and your server side code can calculate the offsets.

Automatic Spacing for Flowchart

So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.

You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.

I look forward to seeing the results of your project. I agree with scompt about using graphviz.