Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!

 



Forgot your password?
typodupeerror
×
The Media The Internet

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.'"
This discussion has been archived. No new comments can be posted.

NYTimes.com Hand-Codes HTML & CSS

Comments Filter:
  • But don't your hands get tired?

  • Works for me too (Score:2, Interesting)

    by mrbluze ( 1034940 )

    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.

  • Great idea! (Score:5, Funny)

    by Anonymous Coward on Tuesday April 29, 2008 @10:47PM (#23247586)
    Maybe we can use this idea to write programs, too.
  • by bennomatic ( 691188 ) on Tuesday April 29, 2008 @10:48PM (#23247590) Homepage
    The badge [dimspace.com] I used to put on all my sites...
  • W3C (Score:5, Informative)

    by FST ( 766202 ) on Tuesday April 29, 2008 @10:49PM (#23247596) Journal
    • by Bogtha ( 906264 )

      It's awful, especially as these are easy errors that can be fixed without any problem whatsoever. The vast majority of errors are:

      • XHTML syntax for empty elements in an HTML page.
      • Unencoded ampersands.
      • Forgetting required attributes like alt and type.
      • Forgotten end tags.

      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)

        by tepples ( 727027 )

        Forgetting required attributes like alt
        What is the correct value of the alt attribute for the CAPTCHA image [w3.org] in a "free registration required" form?
        • by bcat24 ( 914105 )
          Mu. Said "free registration required" form should not exist, and neither should traditional CAPTCHAs. Problem solved.
        • Re: (Score:3, Funny)

          by JebusIsLord ( 566856 )
          oh gee, i dunno... how about... "captcha"??
        • What is the correct value of the alt attribute for the CAPTCHA image in a "free registration required" form?

          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 ?-)

    • Does it really matter though? If the end result looks good, then it's only the geeks who really care about a few errors. The site itself still works fine and as was intended.
      • As Bogtha pointed out to a similar comment upthread, this is a shortsighted view. Just because the "end result looks good" today doesn't mean that it will look good tomorrow, or next year, or ten years from now.

        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
    • by DigitalisAkujin ( 846133 ) on Tuesday April 29, 2008 @11:48PM (#23248036) Homepage
      While the purists are going to argue that valid markup defines the quality of the code on a given website the reality of the real world always tends to rear it's ugly head and debunk that fantasy.

      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! /rant >.>
      • Re: (Score:3, Interesting)

        by Bogtha ( 906264 )

        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.

        You're right about valid code being rare, but wrong about the reason. Sturgeon's Revelation applies to developers.

        It would be impossible to make a working website by being totally loyal to the markup rules.

        That's not even close to being true. Take th

      • Re: (Score:3, Interesting)

        It would be impossible to make a working website by being totally loyal to the markup rules.

        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)

      by clem.dickey ( 102292 ) on Tuesday April 29, 2008 @11:57PM (#23248102)
      Just what I was wondering: "Maybe, because they hand-code everything, they will pass the validation that all the fancy tools fail at so badly." Anyway, they are not alone. Here are the error couns for the Fortume top 20 companies (top of the Fortune 1000 list) manage on the w3c validator:

          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

    • by Pr0xY ( 526811 )
      to be fair, a lot of those errors are by using the XHTML style closing "/>" in non-paired tags...not a huge offense (though, if they claim HTML 4.01, they should use it and not XHTML!).

      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.
  • Let's look 'objectively' at this:
    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
    • by Punto ( 100573 )
      why would you buy shares of a newspaper anyway? never heard of the internet?
    • by njcoder ( 657816 )
      Just because he said they hardcode the HTML, CSS and javascript doesn't mean they create each page from scratch. They have some sort of content management system based on a number of templates that do most of the grunt work.

      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.

    • by fm6 ( 162816 )

      1. Handcoding takes a lot more effort and needs more 'actual' writers than before. So more techies keep their jobs in a recession.
      Typical Slashdot economics.

      When recessions happen, people look for ways to cut costs. What's a good way to cut costs? Automate your operations.
    • by rhavenn ( 97211 ) on Tuesday April 29, 2008 @11:24PM (#23247828)

      Let's look 'objectively' at this:
      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
      No, given a good IDE with some basics it takes less effort. Every time I want to use Dreamweaver I end up losing some hair. It's a frustrating piece of software if you know what you're doing or want to do and it won't let you.

      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
      This is a good thing. Your designers SHOULD know the ins and outs of 80-90% of their code and tags.

      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
      I doubt they hand code every story into the page. They have a template / publishing system for all articles / layouts. It's probably far, far faster to do it by hand then trying to wrap Dreamweaver into it.

      4. Dreamweaver allows preview easily and pretty much automates repeatable tasks. Handcoding requires a Mechanical Turk.
      Score: Hancoding 2: Dreamweaver: 2
      dual monitors, sshfs mounted file system and vim will do it far faster then Dreamweaver.. alt-tab works okay if you're stuck with one monitor.

      So its a tie.
      Nope, I would say hand-coding: 3.5 and Dreamweaver .5

      I appreciate NYTimes sticking to manual tasks for an electronic page as an end user and a techie.
      I hate them for wasting my money as a shareholder.
      I would applaud them for not wasting your money on software licenses and doing the job correctly.

    • 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"

    • WYSIWYG is just a form of abstraction - all the underlying (X)HTML, JavaScript and CSS are abstracted away by WYSIWYG graphics. There's nothing preventing you from trying other kinds of abstraction with code. Saying WYSIWYG web authoring is always faster/cheaper than web authoring by coding is like saying modern programming is a waste of time because every programmer has to write in machine code.
    • by Dirtside ( 91468 )

      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
      Then you'd be a foolish shareholder. They're not handcoding the HTML and CSS for every single story; they're handcoding the HTML and CSS for the story templates they use.
    • 4. Dreamweaver allows preview easily
      How to preview in two clicks of your mouse whilst handcoding html: Click out of text editor, into an browser with your work open in it, click on reload button.

      It's THAT easy.
    • As a shareholder, i would sue them for wasting money.
      You'd lose, and get laughed at for trying it. Management in publicly held companies have an ethical responsibility to maximize value for the shareholders, but they have no obligation to agree with those shareholders as to how to go about it. As a shareholder you have two options if you don't agree with the job management is doing: you can sell or you can try to change the management by exercising your voting rights.
  • Dreamweaver basically incorporated Homesite several years ago.

    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.
  • The title says it all, that's what's missing from the writeup.
  • by menace3society ( 768451 ) on Tuesday April 29, 2008 @10:58PM (#23247660)
    How much work does that actually involve? I don't read their online edition, but I imagine that they have all their articles in a database and put its contents into an HTML wrapper. That involves coding the wrapper once, and maybe a couple of conversions in the article text to make it HTML-friendly. You can do this when the article is converted into the database, or you can do it on the fly in your scripts, but the point is it shouldn't be that difficult to do.
  • Why??? (Score:2, Redundant)

    by Enahs ( 1606 )
    Templates, a decent text editor, and a Markdown or Textile reader with the option of macros. Maybe a short Perl, Python, or Ruby script to cherry-pick your macros (I do something similar at work with vim, erb, and RedCloth.)

    Hand-coding everything is just plain silly.
    • by Repton ( 60818 )

      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.

  • So, what is that in man-hours? Sorry, I mean web-monkey-hours.
  • Any self respecting web developer that is any good already knows this. The editor though is essentially all preference. He could have said Notepad.

    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.
  • by davebarnes ( 158106 ) on Tuesday April 29, 2008 @11:11PM (#23247736)
    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.
    • Re: (Score:3, Interesting)

      by njcoder ( 657816 )

      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

      • by G-funk ( 22712 )
        2. Unless of course you want to vertically centre something... Then tables are your only option on most browsers.
        • by njcoder ( 657816 )
          That's still no reason to make your whole site one big table.

          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
    • 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.

    • 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

      • Yes, I'm replying to myself, but...

        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!
    • 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

    • by Z34107 ( 925136 )

      DW does not rewrite your code (for the most part).

      Neither does the new Microsoft Frontpage! (ducks)

  • I feel OLD. (Score:4, Funny)

    by Valdrax ( 32670 ) on Tuesday April 29, 2008 @11:11PM (#23247744)

    wysiwyg (what you see is what you get)
    I remember when this acronym was so frequently used as a selling point in the 80s that you wouldn't have had to explain it.
  • A lot of newspapers, including the NYT, realized early on that they had to move onto the web in order to retain their readers. But despite this early insight, and 10+ years struggling to get viewers to come to their sites, none of them have figured out how to do a proper news web site. Not one.

    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
  • Hand coded gets you smaller pages, they load faster, and generally look better

    I do feel vindicated though... I hand-code everything...

    nano, notepad++, emacs... vi, I use them all
  • Well it looks great (Score:3, Interesting)

    by grrrl ( 110084 ) on Tuesday April 29, 2008 @11:16PM (#23247778)
    Personally, I have come to really enjoy reading the online NY Times (and I don't even live in the US).

    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)

      by Hemogoblin ( 982564 )
      If you like cool graphs, you might enjoy this Economist article [economist.com].

      Summary: "A good graphic can tell a story, bring a lump to the throat, even change policies. Here are three of history's best."
  • great! ... but I thought that any website worth its stuff was already doing at least SOME hand coding to ensure viewability... if not all.
  • Doesn't everyone? (Score:4, Informative)

    by consumer ( 9588 ) on Tuesday April 29, 2008 @11:21PM (#23247812)
    He doesn't mean that they hand-code every page -- he says very clearly that they use a CMS with templates. All he said is that they don't use a GUI tool to create the templates. This is true of just about any significant site. What is the imagined news here?
  • The pages would look even better and load even faster if they used Vi or Emacs. Obviously.
  • I really don't give a crap how it gets done if it gets done right, and I don't suppose they should either.

    Tools are meant to be used when they help, not just because they're there.
  • Holy shit! I used to use Homesite back in '96. I had no idea it was still in existence. Then again, I used to use Notepad and it's still around, too. I always got a kick out of the "Made with Notepad" websites :-)
  • Link Management (Score:3, Interesting)

    by joeflies ( 529536 ) on Tuesday April 29, 2008 @11:37PM (#23247950)
    For all the pros/cons on using a web site editor package vs writing code in a text editor, there's one issue that's been overlooked - how to manage links in a website with a large degree of depth and complexity.

    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.
  • However I know that certain sections are outsourced to consulting firms. Mostly the aggregated content.
  • by swm ( 171547 ) * <swmcd@world.std.com> on Tuesday April 29, 2008 @11:52PM (#23248070) Homepage
    I hear they have people who hand-write the news stories: sentence by sentence, word by word. Can you imagine?
    • Oddly, I hear computers are harder to please. You miss a closing parenthesis and they'll spit a few hundred errors at you.
  • Why the fuck not?

    '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)

    by stewbacca ( 1033764 ) on Wednesday April 30, 2008 @08:53AM (#23249240)
    Better results? Probably. Faster? No way. Never. Not gonna happen. Maybe they mean faster in the way that it is faster for guys who hand code lines of html all day to hand code lines of html all day because they don't have the first clue of how to use a WYSIWYG editor? If they know code so well, why not use Dreamweaver in pure code mode? The management tools of the suite alone are worth the ?extra? time.
    • Re: (Score:3, Informative)

      Management tools? What, ftp? Why the hell would you run some bloated WebDev environment entirely in code mode?

      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

Our OS who art in CPU, UNIX be thy name. Thy programs run, thy syscalls done, In kernel as it is in user!

Working...