Sensei, teach me the way of non-WTF web application



  • Since most of my work experience is basically WTF, I would like to learn more non-WTF implementations of web applications. (So not the software development methods but implements of frequently used features on a web application/CMS)

    For example,

    • what are some good ways to show messages to users? Javascript alerts? Modal dialogues? Tiny red writing at the corner?
    • Let's build a non-WTF implementation of simple private messaging feature
    • How to implement the search feature: fire queries to your database or use a search engine?
    • How to implement user groups, privileges
      etc.

    Books will be most helpful.

    Otherwise a well designed open source CMS could also be nice.



  • Oops, that's a subjective question that I'm afraid if you ask 1 million web developer you'll get 1 million answers, often with some aspects contradictory.

    It's way easier to get agreement on what is WTF on web development. (And even that is not easy on certain topics, hence you can see where the contradiction comes from)



  • @cheong said:

    Oops, that's a subjective question that I'm afraid if you ask 1 million web developer you'll get 1 million answers, often with some aspects contradictory.

    Which is why I'm asking here not SO.
    Still wrong place?

    @cheong said:

    It's way easier to get agreement on what is WTF on web development.

    I agree.



  • See this recent thread for starter.

    There are always some web developer believe we should do everything the old school way through standard web controls with postbacks because:

    • The website will work even if javascript is disabled
    • It works even on basic browsers like "links" or "lynx".
    • Most if not all of bots (web spiders) will be able to read full page contents from these sites, but not so for sites that requires javascript enabled.
    • It's easier to find people maintain it because you only need to find something who knows the server-side coding language only.

    And then there is another group that insist everything which is not about data access must be created with javascript (hence the rant) because

    • Most modern website won't work with scripting disabled anyway
    • Use context specific postback reduce both server loading and response time for a huge extent.
    • It enables the site to do some fancy effects, allows it to be easier to impress visitors.

    Although most time web developers opinion lies somewhere between these two, the mileage varies on how the developer you asked got comfortable on coding with javascript or how they hate javascript.

    P.S.: Note that I only give points that I can think of here, the reasons I listed are not necessarily all the reasons.



  • In my experience, the only way to learn how to make a good thing is to make a crappy thing.
    Then iterate on it.
    Then throw it away, and start from scratch, this time avoiding all the mistakes from the last time.
    Then iterate on it.
    Then realize you made a new set of fatal mistakes, then throw it away and start again.

    Do this long enough, and you'll eventually make... well, if not a good thing, then at least a decent one.

    There's no magical book or secret formula. Just work, work, work. Practice and experience, on top of some base talent.



    1. Make stuff that works and fulfill the basic requirements
    2. Shoot yourself in the foot for writing crap
    3. Rewrite it, trying not to make the same mistakes.
    4. Repeat point 1

  • Fake News

    @cartman82 said:

    this time avoiding all the mistakes from the last time

    The tricky thing is recognizing your mistakes though, having a job in a :wtf:y environment won't help.

    But yeah, better start building something.


  • FoxDev

    @cheong said:

    that's a subjective question that I'm afraid if you ask 1 million web developer you'll get 12 million answers,

    FTFY

    (i find that developers in general will eventually contradict themselves on what makes a good application)



  • @Ascendant said:

    Books will be most helpful.

    The Inmates Are Running The Asylum

    Don't Make Me Think

    Those are the two most important books you need to get a foundation in usability and thinking about usability.



  • @cartman82 said:

    There's no magical book or secret formula. Just work, work, work. Practice and experience, on top of some base talent.

    That's crap. Experience helps, of course, but there's nothing inherent in the process that prevents it from being learnable in the abstract.

    And most web developers are doing their iterating without user testing, which is worse than useless. Unless you want to make another Discourse.



  • @blakeyrat said:

    That's crap. Experience helps, of course, but there's nothing inherent in the process that prevents it from being learnable in the abstract.

    Yes, but the best way I found to learn is to actually do it. Reading about stuff, following tutorials, etc. That stuff just goes into one ear, out of the other.

    I might work differently for other people, but I doubt it. Given a choice between a guy who wrote his own crappy CMS and a guy who spent an equal amount of time studying a great CMS, I'll take the first guy any time.



  • @cartman82 said:

    Yes, but the best way I found to learn is to actually do it.

    Only as long as that includes actually working with the people who are using the site. If your "actually doing it" is all inside your own head, there's no assurance version 50 will be any better than version 1. You need outside verification for that.


  • I survived the hour long Uno hand

    @cartman82 said:

    I might work differently for other people, but I doubt it.

    Some people learn best by reading, digesting, and understanding something in the abstract before they work on it.

    Some people learn best by guided execution through something, like a class.

    Some people learn best hands-on by experimenting.

    Some people learn best by watching someone do something, like a video tutorial.

    Never dismiss people just based on learning style. All those people can learn the same things, they just require different resources. Instead, focus on their initiative; people who really want to learn things will find resources to help themselves where possible.



  • @Yamikuronue said:

    Some people learn best by reading, digesting, and understanding something in the abstract before they work on it.

    Some people learn best by guided execution through something, like a class.

    Some people learn best hands-on by experimenting.

    Some people learn best by watching someone do something, like a video tutorial.

    And I claim actual experience trumps them all.

    I mean, sure, you need books, tutorials, videos, etc. to get you started. You need Stack Overflow to get you past hurdles. You need theory books to truly gain a deep understanding about a subject matter. You can benefit greatly from lectures, coaching, hearing other peoples experiences, reading OSS code, etc. These are all very useful, and I grant you that different people can find some method preferable over others.

    But after reading and listening and looking and absorbing, EVERYONE needs to then go out and actually DO IT. That's the only way to make it actually stick. The only way to get from an academic who can talk the talk, to an actual developer who can walk the walk.

    Because they DID walk the walk.



  • Btw, there are also cases that, assume you have not prejudice on the topic, no amount of experience will help you decide whether which way is WTF, and you just pick what works for you.

    Say the use of old school "HTML table control" based layout, CSS flex based layout and CSS "display: table*" layout for layouts that need evenly distrubuted width and so on. This can be a "religious war".

    IMO what to use is really based on what brower you're going to support. The table based layout is the only thing work for IE67 or below ("display: table-cell" still have a few gitches in IE7 so not ideal even there), and "flex layout" only works in IE10+ and as of IE11 there is still lots of layout bugs.



  • The main problem I see with this question, is that it assumes that a non-WTF web application is an actual possible thing.



  • It actually depends on how sensitive your WTF sensors are. The less sensitive they are, the more probably you view what you create as non-WTF code.

    And yup, I confess sometimes I do still knowly write WTF code due to a number of reasons, mostly because it'd be quicker to write that way. 😛



  • @blakeyrat said:

    Those are the two most important books you need to get a foundation in usability and thinking about usability.

    If you hadn't said that, I would have just assumed you were saying gibberish. Good job on that user experience, book title people!



  • I write WTF code when I have decided not to bother to give a fuck for the particular portion, due to unreasonable demands.


  • Dupa

    @cartman82 said:

    There's no magical book or secret formula. Just work, work, work. Practice and experience, on top of some base talent.

    Man, why are you so quick to kill silver-bullet programming? It's a genuine technique!



  • @cheong said:

    It works even on basic browsers like "links" or "lynx".

    It is also better for assistive technologies. Screen readers, Braille terminals (that thing might just be running links anyway) and similar have decent understanding of HTML, but fancy JavaScript or CSS abuse can throw them off.

    On a side-note, I've tried finding out how to test whether a web site will work fine on a Braille terminal and/or with screen reader without having to get any special equipment and didn't find much.



  • @Bulb said:

    On a side-note, I've tried finding out how to test whether a web site will work fine on a Braille terminal and/or with screen reader without having to get any special equipment and didn't find much.

    Do ARIA works for them?



  • Thanks. They have a FAQ and it links some tools in which it should be checked, which is what I wanted.



  • @cheong said:

    IMO what to use is really based on what brower you're going to support. The table based layout is the only thing work for IE67 or below ("display: table-cell" still have a few gitches in IE7 so not ideal even there), and "flex layout" only works in IE10+ and as of IE11 there is still lots of layout bugs.

    So basically, don't bother trying to support broken Internet Explorer ? 😉



  • @ben_lubar said:

    Good job on that user experience, book title people!

    The titles probably have colons followed by a more detailed description of the subject matter, as non-fiction books are wont to do.



  • From CanIUse, in Chrome and Safari you cannot set flexbox height in percentage (this however works in IE and Firefox) so one of the main reason to use flexbox is lost, and Firefox don't support flexbox in button element which is relatively minor problem.

    So you can probably say it's only ready in Firefox.

    For table-* in display CSS property, I just gave up trying to apply table-cell directly on controls in jQuery dialog. Life is much easier when you apply this on containers only. If you need not support IE6 and 7 and aware of this, it's quite usable.



  • @cartman82 said:

    Given a choice between a guy who wrote his own crappy CMS and a guy who spent an equal amount of time studying a great CMS, I'll take the first guy any time.

    First, better ask him what he thinks about using it for your SuperImportantProductionSite. If he recoils in horror at the idea, says "No way! I only spent a few days on it. Let's use a real CMS" then hire him. If he says "Sure, nothing else out there could possibly be better than anything I wrote because I'm the smartest human being to ever live", then you have the beginning of a TDWTF story.



  • @cheong said:

    this recent thread

    All I took away from that thread is that <noscript> tags are incredibly important serious business, like, a matter of life and death itself.



  • @blakeyrat said:

    The Inmates Are Running The Asylum

    Don't Make Me Think

    I haven't read either of these, but I do have a copy of Spolsky's User Interface Design for Programmers which isn't bad, but a little dated these days (yay Netscape Navigator references), so I'd be interested in comparisons and/or other recommendations...



  • No, according to W3C recommendation, instead they should just place H1 tag with red text that the page detected your javascript engine is not functioning, and in the Load event, clear it and replace it with all the content. (Although the page I linked in that article propose a different way, I just took the essence and modify it to suit for page with every elements rendered with javascript)

    The W3C recommend against noscript tags, if you choose to render everything in javascript you should use the approach that works even if it's not javascript got disabled, but the script engine got some malfunction.





  • @Yamikuronue said:

    Some people learn best by reading, digesting, and understanding something in the abstract before they work on it.

    Some people learn best by guided execution through something, like a class.

    Some people learn best hands-on by experimenting.

    Some people learn best by watching someone do something, like a video tutorial.

    Never dismiss people just based on learning style. All those people can learn the same things, they just require different resources. Instead, focus on their initiative; people who really want to learn things will find resources to help themselves where possible.

    And this is why most interviews suck. The interviewer asks the candidate questions that are good questions only if the candidate has the same learning style as the interviewer.



  • Good. If the multiple line case also added and tested okay, we should see it in next update.



  • Regarding table-* in display CSS property... it has some loss in functionality in the spec. when compare with HTML table control. If your original layout contains TD with colspan or rowspan attribute, don't bother changing to this approach.



  • @cheong said:

    H1 tag

    H1 tags? You are literally Satan-Hitler!



  • It's also the recommended way from W3C, note that <body> tag itself is a sectioning root.

    Although technically in this case there's no content following it.

    ( @Ascendant : See how I keep suggesting practices from W3C recommendation and the others have different idea? People can disagree even on the supposed "standard". //joke )

    And I'll add that I seldom use H1 - H6 tags and normally will use div tag instead, just to have explicit control on fontsize, typeface and style of the content be displayed. I only use H1 tag when I want to save some typing. 😛

    So if anyone say the use of H1 here is :wtf: I tend to agree.



  • If my intention seemed to be asking for the silver bullet, it isn't so.

    Without proper knowledge, I would not be able to see which part of my code can be identified as a mistake, thus unable to fix it and iterate this process.

    I was asking for a book that shows me some good(of course not perfect silver bullet) ways to implement common features.

    Perhaps as some suggested here, it might be easier to find a book like "How not to write WTF software", "Please don't do these".


  • I survived the hour long Uno hand

    @cheong said:

    just to have explicit control on fontsize, typeface and style of the content be displayed

    TIL css can't restyle an H1.

    Oh wait.


  • Discourse touched me in a no-no place

    The way I've heard it is make the page content sensible before applying the CSS, then apply the CSS to make it look good. People who start out assuming a particular CSS styling tend to make all sorts of horrors. I guess it helps that I learned to make documents that use styles heavily back with LaTeX, and that I use the same sort of technique with Word too.

    I prefer to pay someone else to make good CSS for me. A good style is a great thing. It should be orthogonal to the content.



  • I mean to have fontsize, typeface and style of the content spelt out. 😛

    Actually the standard font be used in H1 to H6 is spelt out in the standard, but you have to search for it.


  • I survived the hour long Uno hand

    Literally the only advantage to a div over an h1 that can't be removed with CSS is that a div doesn't carry a semantic meaning. So in essence, you're saying you prefer that your page reads "Here is a division of the page styled like a heading" rather than "Here is a heading styled like a heading". TDEMSYR.



  • You're right, just that the semantic difference usually doesn't matter to users (unless they need to use it on screen reader or the sort), and the web applications that I write usually is not to be indexed by search engine.



  • @blakeyrat said:

    most important books

    The Systems Bible aka Systemantics. OP: Rid yourself of the belief that a non-wtf system is possible. There will always be :wtf: as long as humans are involved.



  • Most people won't admit there are differing definitions of web apps and thus demand it would support this or that.

    This the the problem not the tech.


Log in to reply