NYTimes.com Hand-Codes HTML & CSS 496
eldavojohn writes "The design director of NYTimes.com, Khoi Vinh, recently answered readers' questions in the Times's occasional feature 'Ask the Times.' He was asked how the Web site looks so consistently nice and polished no matter which browser or resolution is used to access it. His answer begins: 'It's our preference to use a text editor, like HomeSite, TextPad or TextMate, to "hand code" everything, rather than to use a wysiwyg (what you see is what you get) HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.'"
Hand-coding? (Score:2)
Re:Hand-coding? (Score:5, Funny)
Hand-coding agent: I hate this guy, he's refreshing his browser every minute on the same news. I can't keep up.
Hand-coding supervisor: PrintScreen it!
Hand-conding agent: Brilliant!
Re:Hand-coding? (Score:5, Funny)
Works for me too (Score:2, Interesting)
I find that hand-coding works for HTML/CSS, provided of course you include it in a scripting language like PHP.
It's less work than it sounds and the results DO look better - you get a more original look and things can be made to look exactly how you want, instead of being restrained by the wysiwyg software's design limitations.
Re: (Score:3, Interesting)
Re: (Score:3, Informative)
Great idea! (Score:5, Funny)
Re:That's nothing. (Score:5, Funny)
Another opportunity to post... (Score:4, Funny)
Re:Another opportunity to post... (Score:5, Funny)
Re: (Score:3, Informative)
http://www.subir.com/lynx/enhanced_images.html [subir.com]
W3C (Score:5, Informative)
Re: (Score:2)
It's awful, especially as these are easy errors that can be fixed without any problem whatsoever. The vast majority of errors are:
These are the kind of things any new developer would be able to fix in half an hour on his first day on the job. This demonstrates not that they cannot write valid code, but that they don't bother to check. It's like a newspaper edi
Re: (Score:3, Interesting)
Re: (Score:2)
Re: (Score:3, Funny)
Re: (Score:2)
A description of the sequence of letters required to pass it, in a form which is difficult to parse by a computer ? Failing that, the CATPCHA image in SVG form ?-)
Re:W3C (Score:5, Informative)
I knew somebody would pop up with this misconception. Did you know that the web has already been through this — not once but twice — and proven you wrong?
Netscape 2 was quite aggressive when it came to guessing when ampersands were mistakenly unencoded. Cue lots of people not bothering to do things correctly, and saying things exactly like you are — "What's the point? It makes no difference!"
Then Netscape 3 came out. It wasn't as aggressive as Netscape 2. All those people who cut corners had to rush to fix all of their pages. All the people who did it correctly the first time around didn't have to do any extra work.
Now Netscape 3 still guessed a little bit — if you left off the semicolon, it would pick up on it and guess correctly. So lots of the dumb people from the previous example didn't learn their lesson, and skipped the semicolon.
Can you guess what happened? Yep, that's right, Netscape 4 came out and broke all their pages again. And all the people who did things correctly laughed at them.
Sure, if you don't bother to do things right, today's major browsers will probably guess that you're an idiot and work around your bugs. But there's certainly no guarantee that tomorrow's browsers will do so. When you can do things correctly right now for no effort, why on earth would you risk incurring extra work in the future? Is it really so difficult to type & instead of &?
Re: (Score:2)
Re: (Score:3, Insightful)
They will try to work around your bugs. There's no guarantee that the heuristics of a given browser will succeed in correctly guessing what you actually meant in a given case.
The best argument for writing bugless web pages is not that it takes less work (it does), nor that they works with more browsers (they do) and thus give you more customers. No, the best argument
Re: (Score:2)
Re: (Score:2)
Unless you enjoy refactoring crappy HTML every time a new browser version comes out, it's a whole lot more pleasant to just do it right and conform to standards the first time.
Browsers today may put up with their unencoded ampersands and other general laziness, but some browser in the future (maybe
Valid Markup != Good Code (Score:5, Interesting)
In the real world us web developers have to deal with interoperability on many different levels. We have to make sure the layout looks the same on Internet Explorer, Firefox, Opera, and Safari with Windows XP & Vista, OSX, and Linux using the same code base. Most of this however has a lot to do with how talented your CSS developer is. And unfortunately for you kiddies, any less isn't perfect.
So to spell it out for those that don't know, here's the real difference between WYSIWYG and pure text:
In a WYSIWYG editor you tend to do everything the same way every time you do it. That means that all your links, images, and code snippets come from the same code base and therefore have all the same pitfalls and good points. Unfortunatly the wonderful world of DOM doesn't work that way. HTML, CSS, JavaScript, and objects like Flash, Quicktime, and Java have very specific ways that they interact with each other and the browser and so what you generally find is that the reason you code by hand is not for the specific reason of coding by hand but simply put you really can not build good, quality websites with WYSIWYG editors. At some point you will most assuredly find yourself digging in the HTML.
Finally, on the topic of validating your markup. The Markup validaters that are out there are only good as tools of the trade and shouldn't be used as the end-all be-all certification of quality markup. They are tools that should be used by a web developer to run through and make sure they can be as close to valid as possible but I am willing to bet that out of the top 100 sites on the internet, the front page of all of them will produce Markup validation errors. The reason is simple: The validation rules are so restrictive that there is no point even worrying about them. It would be impossible to make a working website by being totally loyal to the markup rules.
Especially with the validator's stupidity in treating & signs in the href attribute of my a elements as the beginning of an entity which it's not!
Re: (Score:3, Interesting)
You're right about valid code being rare, but wrong about the reason. Sturgeon's Revelation applies to developers.
That's not even close to being true. Take th
Re: (Score:2)
The above example alone debunks your entire argument so try again
Re:Valid Markup != Good Code (Score:4, Informative)
Yes, it is. Don't just take my word for it, take a look at what the HTML specification has to say on the matter [w3.org].
You are confusing a URI with the representation of that URI within an HTML document. Just because it appears as & in the document, it doesn't mean that's what you end up with after it has been parsed.
Re: (Score:3, Interesting)
This is quite wrong. You absolutely can make a site that validates, and (what's more important, in fact) is actually semantically correct HTML, yet displays properly in all the major browsers out there. A good example is the Opera [opera.com] website (validates as XHTML 1.0 Strict [w3.org]). Also, if you have a browser that has such feature, try disabling CSS and JavaScript entirely, and see how it looks then - I was pretty surprised to
Re:W3C (Score:5, Interesting)
53 walmart.com
36 exxon.com
26 chevron.com
33 gm.com
76 conocophillips.com
0 ge.com
29 ford.com
52 citigroup.com
105 bankofamerica.com
26 att.com
28 www.berkshirehathaway.com
8 jpmorganchase.com
148 aig.com
55 hp.com
0 ibm.com
144 valero.com
2 verizon.com
180 mckesson.com
5 cardinalhealth.com
1082 www.goldmansachs.com
Re: (Score:2)
Beyond that, the errors don't get much worse, a lot of things like using an ampersand instead of "& amp;" (space added so it shows here) and the like... easily fixed.
Re:W3C (Score:5, Informative)
No, it's not telling them that some browsers will think it's wrong, it's telling them it is wrong. Validators don't check to make sure browsers can understand your document, they check if you have made any syntax errors. Writing <br/> in an HTML document is wrong, regardless of any particular browser's handling of it.
Re: (Score:2)
Re:W3C (Score:5, Informative)
No, one is correct for XHTML and incorrect for HTML, and one is incorrect for XHTML and correct for HTML. The NYTimes use HTML. That means the XHTML syntax is incorrect.
Re: (Score:2)
Re:W3C (Score:4, Informative)
This is simply not true. It's incorrect and invalid.
What you may be thinking of is Appendix C of the XHTML 1.0 specification. It lays out a series of guidelines that minimise incompatibility with legacy user-agents. This means that it is relatively safe to transmit XHTML 1.0 documents following these guidelines as text/html. What it does not mean is that those XHTML 1.0 documents magically become valid HTML documents. They are not.
Re:W3C (Score:4, Informative)
Re:W3C (Score:4, Insightful)
Agreed. <br /> should be, AFAIK, guaranteed to work in any working HTML parser because all HTML browsers have to ignore unknown properties in tags, including potentially that slash, in order to be forward-compatible with future changes to the specification. Assuming they included the space, then IMHO the W3C validator is being way too pedantic (as usual). If they left out the space (<br/>), then the W3C validator is right to warn about it, as that form does choke some HTML parsers, IIRC.
Re: (Score:2)
Re:W3C (Score:4, Insightful)
That reasoning would work if the people behind XML had chosen any other character to indicate empty elements. But unfortunately, they chose the slash. Not many people realise because browser support is rare, but a slash inside an opening tag means that it is the end of the tag and the contents follow. Basically, <foo/>x/ is equivalent to <foo>>x</foo> .
So no, while parsers that don't implement HTML fully might mistakenly treat it like an attribute, a parser that fully implements HTML cannot do so, and a validator certainly shouldn't.
What on earth do you think a validator is for, if not to point out syntax errors? Do you complain that your spelling checker is being pedantic when it tells you that you have misspelt something?
Re:W3C (Score:5, Informative)
It may or may not be improper American English, but "misspelt" is certainly correct English. Consult the OED [askoxford.com] if you don't believe me.
This is far from the first time I've had an ignorant American attempt to "correct" my proper English into your regional dialect. It's pretty annoying and reinforces negative aspects of your national stereotype.
Blame our woefully inadequate education system (Score:3, Insightful)
I must say however, that your insistence on lumping everyone in this country into the "ignorant American" stereotype is also pret
Re: (Score:2, Insightful)
In other words they worried about the user experience, not technically standard syntax or some parser's score.
It's nice to see that not only does the New York Times hire the best writers, they also hire the best techs.
Re:W3C (Score:5, Insightful)
Re: (Score:2)
One additional thing:
HTML doesn't define error handling. It offers non-normative suggestions, but HTML parsers aren't required to follow them.
Re: (Score:3, Insightful)
Browsers that don't comply are pretty much worthless. You can't even view the W3C specification without ignoring unknown attributes. Good luck with almost any web page on the planet. The following sites all either have nonstandard attributes or are missing required attributes:
You get the picture. Good luck using the web with a browser that performs strict attribute validation.... It may technically be non-binding, but in reality, any br
Benefits vs Issues (Score:2, Interesting)
1. Handcoding takes a lot more effort and needs more 'actual' writers than before. So more techies keep their jobs in a recession.
Score: Hancoding 1: Dreamweaver: 0
2. Hancoding requires extensive knowledge of all CSS and DHTML codes plus javascript/JScript. So only the really good techies get the job, and not some script monkey. Survival of fittest.
Score: Hancoding 2: Dreamweaver: 0
3. Handcoding takes far more time than is necessary in a changing scenario of today's news. Ef
Re: (Score:2)
Re: (Score:2)
I haven't used Dreamweaver in a while and it was only to check it out but I never found an easy way to easily preview dynamic content.
Re: (Score:2)
When recessions happen, people look for ways to cut costs. What's a good way to cut costs? Automate your operations.
Re:Benefits vs Issues (Score:5, Insightful)
1. Handcoding takes a lot more effort and needs more 'actual' writers than before. So more techies keep their jobs in a recession.
Score: Hancoding 1: Dreamweaver: 0
Score: Hancoding 2: Dreamweaver: 0
Score: Hancoding 2: Dreamweaver: 1
Score: Hancoding 2: Dreamweaver: 2
I hate them for wasting my money as a shareholder.
Re: (Score:2)
3. Handcoding takes far more time than is necessary in a changing scenario of today's news. Effort not proportional to returns. As a shareholder, i would sue them for wasting money.
Score: Hancoding 2: Dreamweaver: 1
Things like brand perception & recognition are worth money.
If you think of the hand coding as an investment in brand value, then it instantly makes a ton of sense.
This value normally shows up in SEC filings as part of a lump sum called "Goodwill and Other Intangible Assets"
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
It's THAT easy.
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
I'm partial to a widesceeen monitor in portrait mode with Coda's split view live previewing. Keep the eyes on the code and the preview, and generally no manual refreshing.
Just because I'm hand-coding doesn't mean I have to waste my time using inadequate tools. At work I use Dreamweaver occasionally in split view for the same reason, though only because there's no good equivalent to Coda for
Dreamweaver/Homesite (Score:2)
While I do like the split development window(code/WYSIWYG), being a coder I spend most of my time in the code window and always have to check against multiple browsers.
I think having the WYSIWYG view is a benefit, although I hate having to hit F5 to refresh the WYSIWYG continuously.
[GIANT FOOT ICON GOES HERE] (Score:2)
How much work does that involve? (Score:3, Informative)
Why??? (Score:2, Redundant)
Hand-coding everything is just plain silly.
Re: (Score:2)
I doubt he's saying they build every single page from scratch, banging away at their favourite text editor. It would be madness not to use templates or something similar to avoid repeating work. He's saying that they build the templates by creating the HTML/CSS manually, rather than using some code-generation tool like Dreamweaver.
To you and me, that's 49 years (Score:2)
Duh (Score:2)
I personally use Dreamweaver but only because I like it's project management. Never find myself in design view ever. Especially since with PHP Dreamweaver has no idea what to display.
Dreamweaver is an excellent tool (Score:5, Interesting)
1. DW lets you code at the source code level if you choose.
2. DW is much faster--in Design View--at creating tables.
3. DW allows for flipping back and forth or split view.
4. DW does not rewrite your code (for the most part).
I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.
CSS support is very good in DW.
Re: (Score:3, Interesting)
Stupid comment by Vinh about Dreamweaver.
1. DW lets you code at the source code level if you choose.
2. DW is much faster--in Design View--at creating tables.
3. DW allows for flipping back and forth or split view.
4. DW does not rewrite your code (for the most part).
I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.
CSS support is very good in DW.
1. Why use a heavy tool like DreamWeaver if you're mostly just editing the source directly?
2. Nobody uses tables anymore, at least not as much as they incorrectly used to before for formatting since CSS gives you a lot more control. This practice thankfully died out.
3. Alt-Tab is just as fast if you have your browser open, or multiple browsers. I usually check IE and FF when I'm working on layout.
4. For some people, even a little bit of code changes is too much.
If I'm working on a php or jsp page that r
Re: (Score:2)
Re: (Score:2)
This is definitely something that should have been taken care of with CSS a while ago. There is a vertical-align property but only works in some browsers if you define the display property as table-cell or something like that. Another trick is to create three nested divs and set the top property to 50% and -50% for two of them. I forget the details but it's a pain in the ass to work consistently across browsers for something that used to be so
Re:Dreamweaver is a mediocre tool (Score:3, Informative)
CSS support is very good in DW.
Actually, no, it's not. At least through Dreamweaver 8, CSS is sort of a bolted-on afterthought. The Dreamweaver "Properties" pane and the CSS system do not play well together. Dreamweaver has a useful GUI for table-based layout, but falls down on DIV-based layout. (This isn't entirely Dreamweaver's fault. DIV-based "float" and "clear" just weren't a well chosen set of primitives. It's trying to solve a 2D problem with a 1D mechanism.)
Dreamweaver 3 was easier to use.
Re: (Score:2)
4. DW does not rewrite your code (for the most part).
It'll screw up your indentation pretty thoroughly, though, if you make any changes in Design View.
I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.
With the exception of inserting objects (like images, tables, etc.) everything is better in Code View.
I despise Dreamweaver 8 when pasting text copied from a Word document. The vast majority of the time, it decides to wrap paragraphs in div tags. If I'm lucky, it merely confuses paragraph breaks for line breaks.
Also, the fact that I can't use it to access files outside of the document root makes it a pretty f
Re: (Score:2)
My God, Dreamweaver. If you don't recognize the type of the file I double-clicked on in your Files pane pass it on to the fucking OS!
Re: (Score:2)
Stupid comment by Vinh about Dreamweaver.
1. DW lets you code at the source code level if you choose.
2. DW is much faster--in Design View--at creating tables.
3. DW allows for flipping back and forth or split view.
4. DW does not rewrite your code (for the most part).
I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.
I always saw it as similar to what the teacher said about using calculators on math tests -- you don't get the calculator when you're learning your arithmetic, you get it when you go to algebra. Why? Because teaching arithmetic is about getting you used to working with numbers and thus have a feel for how things work and can recognize when things aren't working. How would you know that 550 x 200 = 400 is wrong if you have no idea what's going on with the numbers when you hit enter?
So as far as Dreamweaver
Re: (Score:2)
DW does not rewrite your code (for the most part).
Neither does the new Microsoft Frontpage! (ducks)
I feel OLD. (Score:4, Funny)
The Failure of Web Newspapers (Score:2, Offtopic)
Absurdities like use of hand-coded HTML and CSS are just the tip of the iceberg. What really bothers me is that nobody seems to have thought of a way, or even tried to think of a way, to properly use the Inverted Pyr
Good (Score:2)
I do feel vindicated though... I hand-code everything...
nano, notepad++, emacs... vi, I use them all
Well it looks great (Score:3, Interesting)
The re-design they did a couple years ago is a pleasure to navigate, to read (I love the fonts) and while the photos are always top notch, I must say the award goes to whoever makes the graphs. They have the most fantastic and unique ways of presenting data - far beyond a boring Excel bar graph. I am really really impressed by the interesting and informative graphs which are often highly interactive, and I would love to know who thinks them up.
At the end of the day, they use templates (I believe he says as much in TFA, IIRC, I read it a week or so ago) and hand tweak the site to make it sure it stays cross-platform pretty. Each story has a similar layout so it can't be hard for them to simply tweak by hand where needed.
Re: (Score:3, Interesting)
Summary: "A good graphic can tell a story, bring a lump to the throat, even change policies. Here are three of history's best."
News? I thought everyone knew WYSIWYG sucked... (Score:2)
Doesn't everyone? (Score:4, Informative)
text editors (Score:2, Funny)
Re:text editors (Score:4, Funny)
Well, it works. (Score:2)
Tools are meant to be used when they help, not just because they're there.
Homesite?! (Score:2)
Link Management (Score:3, Interesting)
As much as it may work in principle to build highly optimized pages by hand markup, it must be a nightmare to make any changes to something as tightly constructed as a hardwired web site.
For what is done in house this may be true (Score:2)
And that's not all... (Score:5, Funny)
Re: (Score:2)
In short,... (Score:2)
WTFN? (Score:2)
'WYSIWYG' are terrible and, in my opinion, hold absolutely no increase in productivity to anyone who knows and understand what s/he is doing.
Yes and, err, no? (Score:4, Insightful)
Re: (Score:3, Informative)
Dude. Let me help you.
This will be KDE-specific, but I'm sure you could use Gnome programs for the same thing. For that matter, you could also setup SSHFS, or NFS.
Open Kate.
Click File, Open.
In the file selector, type: fish://user@someserver/some/path/and/file.html
Edit.
Save.
Marvel as your file is magically updated, without any bizarre management tools. With the benefit of being secure.
For extra
Re: (Score:2)
I also recently inadvertently triggered an argument between my parents on the virtues of IDEs in software development. My dad likes them, my mom regards them as the bane of true programmers everywhere. What does /. think?
IDEs? I love 'em. Granted, I only use them to manage multiple source code files and compile everything automatically, but still, I like using them for the quality-check utilities and debugging.
Now, to stay relatively on topic: a major company hand-coding is not news. I do it for my company all the time, and I know plenty of other people who also hand-code. And only one that does not.
Re: (Score:2)
1. GUIs: Always a pain in the ass, always tedious. Unlike web development, I think there's no problem with using WYSIWYG for app development.
2. Memory aids: I know how to program. I don't, however, have every method of every object memorized. Being able to look through a list is often quite helpful. It's also a good way to find things you never knew existed.
3. Compiling: I fail at compiling. I don't know how to do it-- I'm sure I could learn, if I had to, but that's the thing. At
Re: (Score:2)
Re: (Score:2)
Personally, I like IDEs if its easy to get them up and running. If I can sit down at the IDE and have it working with my project in 5 minutes or less, then I'll use the IDE. Otherwise, I find that I'm sometimes taking longer to get my workspace set up than I'm spending on the actual task.
Re: (Score:2)
I think finding a slashdotter who's parents can both code is a sign I am getting old. I taught my Dad to code in the same way as your parents taught you. Dad is a retired mechanical engineer, he's now 77 and has been programming childrens games as a hobby for the last 10yrs or so. He h
Re: (Score:2)
Re: (Score:3, Funny)
Re: (Score:2)
Re:Yes, and? (Score:4, Insightful)
It's the case for almost any *large* dynamic website, but having spent a couple of years doing web development in the design industry, I can tell you that at least in the UK, a large proportion of the small agencies are using Dreamweaver for most things.
Fuck knows why - I'd rather be handed an Illustrator file and turn it into HTML then have the crap that Dreamweaver spits out given to me, and have to try and turn it into something dynamic.