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.
Related
I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.
Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.
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.
I have been searching around for quite a while on ways to do this, and I'm beginning to think it's not doable. I can't say I'm an expert in html or CSS, but I have done a lot of research and found no tutorial for this specific problem.
I am coding a software user's guide to be posted online. The guide will include screenshots of the software, with figure numbers. The original code (I'm not the first on this project) simply hardcodes in the numbers of each image, which becomes more and more tedious as more information is added in.
I know there is a way to simply add in a new image and then tag the caption to include an automatically incrementing figure number. This would be very helpful, for if a new figure is added in, the numbers automatically change in all of the figures after the new one.
IF that were the only facet of the problem, I would simply use a CSS counter and be done with it. However, I also want to be able to reference specific figures in the text of the guide. My question is this: Is there a way to do this in CSS?
An example of text within the guide would be "Figure n shows the dialog box for customizing x." Is there a way to reference the nth figure in the guide without hardcoding the numbers?
If this is not possible in CSS, is there another language that can do it?
Edit: To clarify: The figures themselves would be labeled consecutively. But if I wanted to, within my text, refer to Figure 3, for example, that could be anywhere.
Edit 2: I have tried a javascript implementation using arrays. However, now it seems that some versions of Internet Explorer refuse to show the script portions of my code.
I am using the <script></script> tags within the body of my document, calling a javascript function located in the head. I know the syntax must be right because firefox and google chrome both load the page just fine. Is this simply IE being picky about something? (I checked, it's not my security settings).
Thing is, referring to things by their page index (incrementing) and by some figure number you maintain (also incrementing) are two identical solutions.
Actual problem: Maintaining the figure list with a sequence of ordered numeric identifiers becomes more difficult the longer a document becomes.
Solution: Give figures names, not numbers, and generate a number for display to the user. This gives ordered numbering to the user and allows you to reference figures with memorable names, but does not require you to reorder or modify figure numbers after every edit. Here's a quick example using jQuery:
<h2>How to add a contact</h2>
<img id="add-contact" class="figure" src="figures/add-contact.png" />
<p>This screenshot shows the location of the Add Contact button.</p>
<script type="text/javascript">
$(function() {
var figNum = 0;
$(".figure").each(function() {
figNum++;
$("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")");
});
});
</script>
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.
I have a client who wants to do a website with specific height for the content part.
The Question:
Is there any way that when the text is long / reach the maximum height of the content part, then a new page is created for the next text.
Within my knowledge, somehow I know this can't be done.
Thanks for helping guys!
You will probably want to look into something like jQuery paging with tabs
http://code.google.com/p/jquery-ui-tabs-paging/
Unfortunately you would need to figure out the maximum number of characters you want to allow in the content pane and anything after that would need to be put into another tab. You can hide the tab and use just a link instead.
Without more knowledge on what you're development is, this is a difficult question to answer. Are you looking to create a different page entirely, or just different sections on a page?
The former can be done using server-side code (e.g. Rails), and dynamically serving out pages (e.g. Google results are split across many page).
The latter can be done with Javascript and/or CSS. A simple example is:
<div id="the_content" style="overflow:hidden;width:200px;height:100px">
Some really long text...
</div>
This would create a "scroll" bar and just not disrupt the flow of the page. In Javascript (e.g. JQuery), you'll be able to split the content into "tabs".
Does this help?
(Almost) everything is possible, but your intuitions are right in that this can't be done easily or in a way that makes any sense.
If I were in your position, I would go up to the client and present advantages and disadvantages to breaking it up. Advantages include the fact that you'd be able to avoid long pages and that with some solutions to this problem, the page will load faster. Disadvantages include the increased effort (i.e., billable hours) it would take to accomplish this, the lack of precedent for it resulting in users being confused, and losses to SEO (you're splitting keywords amongst n pages).
This way, you're not shooting down the client's idea, and in the likely case the client retreats from his position, he will go away thinking that he's just made a smart choice by himself and everyone goes away happy.
If you're intent on splitting it up into pages, you can do it on the backend by either literally structuring your content into pages or applying some rule (e.g., cut a page off at the first whole paragraph after 1000 characters) to paginate the results. On the frontend, you could use hashtags to allow Javascript to paginate the results. You could even write an extensible library that "paginates" any text node. In fact, I wouldn't be surprised if one didn't exist already.