First I want to say this is my first question, sorry if it doesn't meet the standards of a quality one (whether it's too messy / badly organized or explained), I'm listening to all kinds of feedback. Also sorry if my english is not perfect, I'll try to be as understandable as possible.
So here is my problem : I'm implementing a React paginator, compatible with server-side content-range pagination. I want to navigate through pages, when there are too much of them.
A basic example without styling available here (EDIT : working, see answer) : https://codesandbox.io/s/w03lkpmy48
(I'm a React rookie, so the quality of my code is probably questionable.)
I created a function calculateNumberOfPages(itemsCount) (l.42) where itemsCount can be a huge number, e.g 7683, to return an int used to create the <li>s.
In the render, I call this function (l.48) to get the number, then I loop on it x times and push <li>s in an array (l.53 to 65).
However, when the itemsCount is huge, that can result in something like this : https://i.imgur.com/zea4QaD.png
which is why I put an ellipsis if the number of pages is above 10 :
https://i.imgur.com/7FstTlO.png
Now, the problem is that I want to navigate through pages, to get next pages (4 by 4). If I click on the 10th page, i should have 10 11 12 13 14 ... 16 (for example), and same when I click on the 10th page, in order to have previous pages.
But I'm logically stuck, and I quite need your help. Some comments in the code might point out what I want to do, but they might be as messy as my logic.
If you have other questions, I'm all ears. Thanks for reading my question !
Okay so I had help from a friend in order to do this.
What was essentially missing in my code was a way to conserve the state of the current page, to compare it. So I added a currentPage property in the state.
Then I added some Javascript (with if/else, needs to be optimized and cleansed) to compare values of the <li>s and the current page.
And I change the values displayed in the render.
You can see all of it in the codesandbox in the question !
Related
The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.
I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.
This is a follow up to a previous, unanswered question of mine.
Goal: an input field in a web page (the general sense, not a form specifically) where input of certain patters, such as $\int$, will render math - an integral sign in this case, within the field itself, not in a separate preview box.
In the linked question I linked to a conteneteditable div implementation with MathJax I attempted, but failed (works somewhat on IE, which doesn't count). Please no lip on how contenteditable is terrible, I know this very well now.
I came across the IXL website, which they have an interesting implementation which works nicely for superscripts and fractions (at least). After answering a few questions you get a toolbar, but you can type Shift+^ to see a superscript immediately.
I think I can expand this for other things I need, but I'm not sure what in their code does this - it looks like a canvas, but I'm not sure, and I was hoping someone smarter can recognize immediately what they're using. The source of the page has the JS.
I've posted on MathJax GitHub and some other tools to advance a solution, but currently no one has this functionality properly (only the 'preview' box).
SO is my final attempt - the diversity of people here hopefully can get me started. I just need to focus my reading - the first lines of code, how is a fraction rendered as that box over line over box in the input field.
I apologize for not posting code of my own, my previous question was my best attempt so far.
As per jiggzson's suggestion, I checkout out Guppy, forked it and it's awesome (as far as my needs). You can check my fork at https://github.com/uperetz/guppy. I'll post my latest demo there now. Current branch is textmix but I'm hoping Daniel will merge to master.
Is it possible to save the current state of a page and it's JavaScript variables in Chrome devtools, in order to later reload that same state?
As some background: I'm working on a project that has a question and answer system. This mechanism is handled by JavaScript and my workflow is awful at the moment because I'm coding question number ten and need to answer the first nine questions each time I need to test my code.
I would like to answer questions 1-9, save the state of the variables on the page, make changes to question 10 code and test after first reloading the state until question 9.
It's difficult to make this work exactly as you describe, since the concept of the variables on the page isn't easy to work with. What would happen if you add a remove a variable name in the code?
There are a few things you could try.
1. Remove the first 9 questions from the quiz
Are they necessary for testing?
2. Find out what variables are set and then back them up
For example, if the window.questionIndex and window.answersGiven properties describe the state of the page you could back them up like this:
function backup(){
localStorage.setItem("questionIndex", JSON.stringify(window.questionIndex));
localStorage.setItem("answersGiven", JSON.stringify(window.answersGiven))
}
function restore(){
window.questionIndex = JSON.parse(localStorage.getItem("questionIndex"));
window.answersGiven = JSON.parse(localStorage.getItem("answersGiven");
}
3. Automate the process of clicking through the quiz
Would a script like this do the trick?
var interval = setInterval(function(){
$("#answer1").click()
}, 100)
setTimeout(function(){
clearInterval(interval);
}, 100 * 9)
4. Develop the last question independently before integrating it
Create an empty page and load only the module for question #10 on it. Once the coe works as expected integrate it into the full quiz.
I'm making my portfolio website here,
and I'm wondering if I should replace my LONG HTML5 code that populates my skills/projects/project modals into javascript that runs in a for loop.
I know it won't matter much because it is not like thousands of list elements, but if I take asymptotic approach, would it make difference at all?
I read this thread: Simple html vs Javascript generated html? , but it was still vague to me.
Thank you in advance.
EDIT
Someone voted that this post is unclear about what it's asking. So let me rephrase.
Assume that I'm populating almost infinite number of <li> elements, will HTML5 tags (traditional way) load the page faster, or forloop in a JavaScript load the page faster? Another assumption is that page will be loaded at some point.
Thanks again.
You say an almost infinite number of items. I say you're grossly exaggerating.
Did you ever wonder why Google only shows you the first 10 results? How many times do you look at page 2 of your Google searches? The 3rd page? Ever even seen the 4th?
What's your usual conclusion when you have to go to the 2nd page? Mine is that my query sucks and I try to narrow it down.
There's no way a user is expected to peruse "an almost infinite amount of items" and get any useful information from it. Use a search engine, let people narrow their search (way) down, use paging. And after that's done, use HTML. There's no reason to add another two layers of work (outputting the Javascript code to render + sending the JS data) to just generate the same output in the end.
I need to find out if Google Chrome has a limit on Javascript execution that may slow down some scripts. I'm sorry in advance i cannot post any HTML or examples, but i will try to explain the problem as thorough as possible.
We have a page with a very complex structure (tables within divs within tables at least 20 levels deep) and there we have the core of the page split into 2 parts: on one side is a list of categories(1000 divs or so), and on the other are attributes that need to be mapped to them(10 or so). The 1000 categories each contain 10 tags within them( 4 span, 1 ul's and 5 divs) can also load their subcategories, increasing the number even more.
now, the main problem is that the attributes need to be dragged to the categories in order to execute the mapping, but then you start to drag, it sometimes takes more than 10 seconds for the dragged element to appear, and up to a minute when you drop it (the actual ajax executed in under half a second).
On Firefox the slowness is not such an issue (the script is still slow, but it executes 10 times faster). Is Chrome limiting the script execution resources? If so, can you give me any ideas on how to circumvent this from happening?
I wouldn't have thought Chrome would be limiting resources, it would be good if you tried the app on different operating systems with the stable, beta and dev versions of Chrome, just to see what the results are like across the board.
It's a shame you cannot post example code, a complex HTML structure linked with complex selectors might be the reason behind the slowness, is there no way you can show any HTML + JavaScript, perhaps with no private data in.
If not perhaps just try to simplify the markup and selectors, cannot think of much else, hands are tied without code.