Develop Reference

Non-css styling considerations for html, javascript and php [closed]

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 8 years ago.
Improve this question
Im trying to get a sense for proper web development techniques , and im wondering if there are any habits i should be developing outside of css usage in terms of structure and layout.
What I've gotten so far is a sense that strategic and logical use of divs can help to give needed control when working with javascript and css.
But are there any other basic things i should consider that may not be aware of?
For example, I know people used to control layout with tables, but is that still a thing? Or is it now bad practice?
Looking forward to your suggestions.

Regarding your table question- People generally choose divs over tables, BUT some things cannot be done well without tables. They still have their place. Divs and Tables inset within each other are often used for datagrid styled layouts for example. Often replacing tables with divs creates a nasty (oversized) amount of css code. If you can use divs cleanly, that is perfect. If it overbloats your code, then use the simpler cleaner old faithful table code - or combine them where it makes for better results.
More info on that here: Tables instead of DIVs (Joel Coehoorn's detailed answer: "The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.")
Regarding the topic of non-CSS since your question also refers to layout design formatting:
There are some things you cannot do well also without pure CSS, that in and of itself allows modern formats to work on multiple devices. This will reach more customers.
For newer layout types for sections of pages needing icons or photos, look into the use of inline-block styled lists. CSS does wonders with them. It is a nice third alternative.
For cross-device development, you should check out responsive and fluid formatting options. A good place to start is to look at http://html5boilerplate.com/ and also http://www.initializr.com/ (boilerplate and bootstrap).
If you haven't worked with them before, look into media queries for browser sizing and device orientation displays (landscape or portrait) - part of the fundamentals in responsive web development. You can then use your regular html within the constraints you set with these.

Try to think of your pages/documents in terms of structure rather than appearance. For example, a book is made up of a title page, table of contents and chapters. Similarly, the contents of a web page can usually be broken down into logical blocks, which are then styled as required. Don't forget that web pages may be read by screen readers - your want to structure your page so the spoken output makes sense.
There has been a discussion of tables vs CSS at Why not use tables for layout in HTML?. You may also want to check out CSS Zen Garden, mentioned in that thread. Beyond this, I strongly recommend validating any HTML and CSS you write. Check out http://validator.w3.org/ for that purpose.

Divs are span are a better options for laying out a page. Tables should be used if tabular data is to be displayed.
Other than that you should mostly consider re-factoring redundant code regularly and resolve paths to directories in config files. This will help you to manage your project better. Redundant code can become a huge problem, since making changes requires changing code at several places. Make sure that you re-factor code that is being used more than once or twice into functions and call them instead.
Try diving into CSS frameworks such as bootstrap or foundation since a big community contributes there and are usually built with best practices in mind. You will be surprised to see the problems you run into have already been encountered by many others and they have found an efficient way around it too. There are frameworks and libraries for JS too. Feel free to explore.

Is it possible to use web development tools and create an actual working WYSIWYM math editor, like desktop Applications such as MathType?

Before I started to try and make this thing, I wanted to know if it is possible, under the following circumstances:
The code to script up that math must be able to be taken, submitted and stored in a database
The code for two pieces of math which look exactly the same must have the exact same code
According to the requirements, wherever the user clicks his or her mouse, the caret must move to that specific element or part of the math
So, is it possible? I'm looking forward to using technologies such as HTML, JavaScript, jQuery, and even Flash as a last resort.

MathQuill lets you type maths in a WYSIWYG fashion, source here.
There is a demo on the homepage.

I think you want something like MathML. Take a look here. http://www.w3.org/Math/
or maybe http://code.google.com/p/mathmleditor/

I found this a while ago http://www.codecogs.com/latex/eqneditor.php pretty useful implementation of LaTeX with a live preview, I've used it a few times. Probably doesn't fit the bill for your point 3 either but just in case it is useful.

is positioning with javascript a good practice

I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.

Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.

I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!

You could use CSS for positioning and styling of elements. That's what it was designed for.

It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.

Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.

It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.

It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.

If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS

There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.

Codemirror - how to write own code editor in browser

I need to write my own code editor in browser. I found CodeMirror but I don't understand how to do this. I need simple code.
Can I use textarea or something else? (for example content editable). How to underline, colorize, auto complete the code?
Please, give me some advice. I will be very grateful.
I've read a book from O'Reilly, Douglas Crockford, about JS so I've some basics.

Check the html behind a code editor example page. Use WebKit's (Safari/Chrome) "Inspect Element".
As you can see there is a large div over a textarea that holds individual strings, so the user just gets the "illusion" he is typing in a textarea. The textarea is still there but it is not what you really are seeing.
If you want syntactical coloring you will need lexicographic analysis of the string, which is usually done by a lexer that outputs tokens. These tokens are caught by a process that collects them in individual div's that have f.i. the same text color. Then that div overlays the textarea.
If you want to go deeper in the code you will also need semantic parsing and a lot of coffee to program all of that.
Good luck, do you know you're taking on something big? And why would you reinvent this, it's already been done superbly by others.

You might want to take a look at tinyMCE if uou haven't already.

Anyone have a diff algorithm for rendered HTML? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm interested in seeing a good diff algorithm, possibly in Javascript, for rendering a side-by-side diff of two HTML pages. The idea would be that the diff would show the differences of the rendered HTML.
To clarify, I want to be able to see the side-by-side diffs as rendered output. So if I delete a paragraph, the side by side view would know to space things correctly.
#Josh exactly. Though maybe it would show the deleted text in red or something. The idea is that if I use a WYSIWYG editor for my HTML content, I don't want to have to switch to HTML to do diffs. I want to do it with two WYSIWYG editors side by side maybe. Or at least display diffs side-by-side in an end-user friendly matter.

There's another nice trick you can use to significantly improve the look of a rendered HTML diff. Although this doesn't fully solve the initial problem, it will make a significant difference in the appearance of your rendered HTML diffs.
Side-by-side rendered HTML will make it very difficult for your diff to line up vertically. Vertical alignment is crucial for comparing side-by-side diffs. In order to improve the vertical alignment of a side-by-side diff, you can insert invisible HTML elements in each version of the diff at "checkpoints" where the diff should be vertically aligned. Then you can use a bit of client-side JavaScript to add vertical spacing around checkpoint until the sides line up vertically.
Explained in a little more detail:
If you want to use this technique, run your diff algorithm and insert a bunch of visibility:hidden <span>s or tiny <div>s wherever your side-by-side versions should match up, according to the diff. Then run JavaScript that finds each checkpoint (and its side-by-side neighbor) and adds vertical spacing to the checkpoint that is higher-up (shallower) on the page. Now your rendered HTML diff will be vertically aligned up to that checkpoint, and you can continue repairing vertical alignment down the rest of your side-by-side page.

Over the weekend I posted a new project on codeplex that implements an HTML diff algorithm in C#. The original algorithm was written in Ruby. I understand you were looking for a JavaScript implementation, perhaps having one available in C# with source code could assist you to port the algorithm. Here is the link if you are interested: htmldiff.codeplex.com. You can read more about it here.
UPDATE: This library has been moved to GitHub.

I ended up needing something similar awhile back. To get the HTML to line up side to side, you could use two iFrames, but you'd then have to tie their scrolling together via javascript as you scroll (if you allow scrolling).
To see the diff, however, you will more than likely want to use someone else's library. I used DaisyDiff, a Java library, for a similar project where my client was happy with seeing a single HTML rendering of the content with MS Word "track changes"-like markup.
HTH

Consider using the output of links or lynx to render a text-only version of the html, and then diff that.

What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.

So, you expect
<font face="Arial">Hi Mom</font>
and
<span style="font-family:Arial;">Hi Mom</span>
to be considered the same?
The output depends very much on the User Agent. Like Ionut Anghelcovici suggests, make an image. Do one for every browser you care about.

Use the markup mode of Pretty Diff for HTML. It is written entirely in JavaScript.
http://prettydiff.com/

If it is XHTML (which assumes a lot on my part) would the Xml Diff Patch Toolkit help? http://msdn.microsoft.com/en-us/library/aa302294.aspx

For smaller differences you might be able to do a normal text-diff, and then analyse the missing or inserted pieces to see how to resolve it, but for any larger differences you're going to have a very tough time doing this.
For instance, how would you detect, and show, that a left-aligned image (floating left of a paragraph of text) has suddenly become right-aligned?

Using a text differ will break on non-trivial documents.
Depending on what you think is intuitive, XML differs will probably generate diffs that aren't very good for text with markup.
AFAIK, DaisyDiff is the only library specialized in HTML. It works great for a subset of HTML.

If you were working with Java and XHTML, XMLUnit allows you to compare two XML documents via the org.custommonkey.xmlunit.DetailedDiff class:
Compares and describes all the
differences between two XML documents.
The document comparison does not stop
once the first unrecoverable
difference is found, unlike the Diff
class.

I believe a good way to do this is to render the HTML to an image and then use some diff tool that can compare images to spot the differences.