Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am new to JS and am coding a game that will be totally client-side. I have a fundamental question about the HTML structure.
Say that the game is going to be a RPG and I want to show the user their character's statistics, like Intelligence 18, Strength 15, Charisma 20 etc.
Now since these values are not static and will change every new turn (the game is turn based) these values need to be filled in by JavaScript. Let's say we want to display them in a list.
As far as I can see there are two ways to do this, one is to keep a static HTML and use JavaScript only to fill in the values like this:
<ul>
<li>Intelligence:
<div id="IntValue"></div>
</li>
<li>Strength:
<div id="StrValue"></div>
</li>
</ul>
And then in JavaScript edit those divs like getElementById("IntValue").innerHTML = "18";
A second method might be to put only <ul id="CharStats"></ul> in the actual HTML file and then generate that entire list with all the <li> elements and such with JavaScript. For example I could create a tableHTML string and then dynamically add all the <ul>'s to it one by one, and then get CharStats and set its innerHTML to that tableHTML string.
Which is better? I know it would depend on the specific case, but can you at least guide me in the direction of some good resources about coding such things with JavaScript?
Both methods are fine, as a matter of fact there are entire frameworks built on rendering html client side to reduce server load - these frameworks need to be supplied with JSON from the server instead of an entire HTML response afterwhich the JS builds the HTML code that basically makes the page.
However in your case you might want to do things differently, look at it this way:
Method A: Update specific element
Method B: Refresh entire list every time
Method A, If you only change 1 stat per turn - this is the way to go since you'll be updating less of the DOM at a time but you'll have more ID's to keep track of.
Method B, If you're changing multiple stats per turn then you'll probably want to do this since you can just build the <li>'s and put them inside a ul every turn.
It depends on your situation, Method B does modify the DOM more than Method A but both are good to use.
NOTE
Method B removes more elements than Method A, note that if you have other event handlers bound to the elements being refreshed by Method B you're going to have to reselect these elements since the element you used before will be gone.
Performance wise I would not worry about wether Method A or Method B is best. The one least error prone is probably Method A since you're updating specific elements on the page (less DOM manipulation means less possible errors).
Hope this helps pushing you into the right direction, I linked the framework for reference since it uses a quite cool method of displaying data from the server side ;)
Good luck,
Sidney Liebrand
Related
I'm working with Readability library from Mozilla to show simplified content of articles and blogposts. But I would like to keep certain content based either on HTML tag or class, for example <time> elements.
How can I do that?
After looking into the code, it seems there isn't any user-exposed functionality for this, but you can do it quite easily if you don't mind editing the source code. There's an array PHRASING_ELEMS in Readability.js (line 159 at the time of writing) that determines which element tag names to preserve.
You'll need to modify that array yourself to achieve what you want, either by editing your local copy of Readability or by making a fork of the source code with your custom array and then using that in place of the original (or even better, fork and change it so that users can define their own included/excluded element arrays in the constructor options to solve the root problem here).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
So after trying out Vue.js for a little while, it got me thinking...Why do we have to use components? I don't understand the hype behind them as I can just take a for loop and create a div and get the exact same output as if I were using components.
Vue.js's documentation even says:
Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.
But again, it seems it can be done with for loops what Components give you.
The same goes for React as well.
If someone can explain it better, I am all ears.
Thanks.
Not using components in Vue.js or React is like using a hammer for everything. You can obviously try to nail a screw with a hammer, but not everyone will understand you why, as you can implement every GUI element using divs instead of CustomXComponent.
Using components is like using a screwdriver to screw something. Not only their names and shapes are coherent with the thing you want to achieve, but they are faster to do so. Not using it may look like an unprofessional behavior, just not adapting to the right tools for the right things.
If you look into a bunch of divs, you have to look down further what they do. If I give you a custom component named AutoCompleteSearch you may abstract what it is doing, even though its implemented using plain divs.
For the same reason that you would want to use a for loop instead of copy and pasting the same thing N times - the end result to the user is the same, but you'd have code that's significantly more difficult to understand, maintain, and update.
Components are extremely useful because they are meant to be used in a much more complex context than a handful of div.
For example, Imagine if you needed to add a calendar to your page along with a big table of data, a large form, dialog boxes and other UI elements. It sure is doable without components but it will be much easier to maintain and more readable if you split your code into components.
Any help would be appreciated -- I just started rails a few weeks ago and I'm pretty lost right now. So I made an app where people can submit questions, and those questions get randomized and displayed one at a time. I implemented this in a pretty roundabout way. I'm going to lay out what I did explicitly just in case.
I created a Question Model as well as a Question controller with new and create actions -- I put a form to submit the question in the view associated with the new action. To display the questions, I used javascript. I first used embedded ruby within the page to iterate through all the questions in the database. I then put them all in their own <li> and set the class of that to have a display: none. Then I used javascript to grab the class of the <li> tag and pushed all the questions onto an array.
Then, I just used javascript to display the question one at a time by updating a div element's html over and over again. Now, I want to add a simple rating system (like an +1 or -1 thing). I want to take people's ratings of the question and average them out. But I don't really know how to implement this. I THINK that I should have a ratings model that belongs_to the question model (which has_many ratings). There should be a ratings controller with an edit and update action that changes the score every time someone rates a question.
The problem is I don't know how to exactly implement this given what I've already done so far. A big problem for me is having the rating of the question linked to the question itself when I just used javascript to display the questions. Any suggestions? Apologies for the essay.
First of all, you should clarify what you mean by using JS to display your questions. It sounds like what you're doing is more or less right, if indeed you need to dynamically update the page through time, but it also potentially sounds like you just want to show a list of questions, which you can do with just HTML.
Second, you should decide whether or not you really need an extra Ratings model. It could be useful so that you can track things like when ratings come in, who made which ratings, and how it changes over time; but if you really just want to know the rating at any given time, you can just have an integer rating column on your questions.
Third, displaying your ratings just involves grabbing more info from the questions when you display them. Assuming you have an #question object in the view, and you were displaying its text like #question.text, you can do the same with the rating by doing #question.rating, or, if you go the model route, something like #question.ratings.count. From there if you still want to use JS to update the value you need to either just make a string or convert the entire object into JSON so that you can handle it in JS.
Finally, you mention needing a Ratings controller. That's fine, but recognize that you're going to need AJAX on your page to send events to that controller so that you can tie clicks (for voting) to actual database changes.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
There is an idea to create an online music theory quiz. I have created a drawing in Inkscape and saved it in svg format. The file is used as an external source and has been added to HTML code.
The challenges I have are as follows:
1) How to make lines below treble staff activate (selected)?
2) How to put the names of the notes (A, B, C, D, E, F, G) into the underlined spaces?
3) How to name the repeated notes with the same letter (e.g. "F" is repeated 2 times in my sample)?
<!DOCTYPE html>
<html>
<body>
<img src="image_library/grandstaff_drawing.svg" />
</body>
</html>
4) I have converted svg into png to show a quiz draft.
That actually involves quite complex javascripting :-) In your way, you'd have to do roughly the following:
Download the SVG as "text" (or rather XML), via XHR (e.g. $.get(image_library/grandstaff_drawing.svg))
Parse the downloaded data and create an <svg> element in the document (as opposed to <img>
Find all the notes and determine their position (on the y axis) and determine their name from that
Create all the programming necessary for the underlined spaces
Probably an easier approach would be to create the stave in the browser and have the graphics of the key and notes merely as components. Then if you'll want to create e.g. an "CDE" note sequence, you'll be positioning the note components manually. You'll have to determine the y axis offsets of each note (e.g. 60px from top for C, 55px for D, 50px for E - assuming a line height of 10px), but it will be easier than determining the same from an Inkscape SVG. You'll have to learn a bit more about how SVG works, but you'd need that sooner or later anyway :-) So the steps would be the following
Create an array in your browser, indicating the sequence to display (['C', 'D', 'E'])
Create an <svg> element for the stave and insert all the notes into it by iterating over the note array (you might want to use some SVG framework, like Raphael or D3)
Create the programming necessary for the underlined spaces area, again by iterating over the array
The advantage of this approach is that you'll have the sequence in a JavaScript variable and from that you'll build both the stave and the underlined spaces, making it easier to determine if the user matched the notes correctly. Reconstructing the same variable from the SVG, as in the first approach, is going to be quite messy and prone to errors (as even a small difference between two Inkscape SVG will mess up your programming and you'll have to cater for it).
I'd say this is a very broad question, it's basically how do I program this application. JavaScript doesn't have a function determineSequenceFromSvgStove or createBlankAreasWithFollowingCorrectAnswers Try one of the approaches above and if you run into a trouble with how to implement some of the steps, ask about them.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I am working with angularJS to create a simple side menu. I have the following two options for its directive design but cannot decide which one is better:
Option 1
The HTML markup:
<sidebar title="Sidebar Heading">
<sidebar-element name="Heading">Description</sidebar-element>
...
</sidebar>
Option 2
The HTML markup:
<sidebar>Sidebar Heading</sidebar>
And, the data is coming directly from the controller:
$scope.sidebarElements=[{name:'Head 1', description:'Description 1', isActive:true}];
Consider that the data is coming to me from the server in JSON.
If I go with option 2, I can pass the data directly to the controller.
If I go with option 1, I would have to do a <sidebar-element ng-repeat='element in elements' ...> in it, and then pass on the data to it. Option 1 seems 'better designed' somehow but I don't know if I should build another layer of abstraction this way when it is not especially required.
Which one of the two would be better and why?
I have just started to work with AngularJS and am trying to find the right way to 'think in AngularJS'
It depends on how extensible you need to make this design. If you want to make this design to work as option1 in future, then only you should go for it, because it is also going to consume more time to put extra piece of code.
If you want to go with highly extensible approach you should create directive and also the directive which will create collection using controller data. This (Option1) will allow user to use the combination of both the directives to get the menu with static or dynamic data.
If you decide to go with option1, this link will be useful [LINK] : http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
[It has live example] : http://jsbin.com/acibiv/3/edit
If your data is always coming from json (controller data) and there will never be the need to add from html (static ) then you just go with option2.
I think as you are starting, you should go for option2 (Less reusable but easier as compared).
About directive naming
I think sidebar may contain other elements (other than menu). So naming should tell that it is menu.