Spot the WTFs



  • http://www.santander-products.co.uk/123/standaloneSearch/

    I've recently done something similar for a company, and it looked nothing like this. Just one file for the UI, and another for the auto complete which returned a top 5 matches JSON result set after communication with a SQL DB for ease of maintenance.

    I realise the Santander approach means zero DB hits, but at a cost of downloading a 700K+ html file. Not sure what happens when they want to add or remove a company. 



  • @Mole said:

    I realise the Santander approach means zero DB hits, but at a cost of downloading a 700K+ html file. Not sure what happens when they want to add or remove a company.

    If it weren't for the "Joined on Tue, Sep 23 2008" I would say that you must be new here. I would not be in the least surprised to learn that each time that 737kB HTML file is rendered it does at least 3 DB hits.

    The most interesting snippet I've seen in there is:

        <!-- Using remote hosting to prevent O2 3G destroying JQuery -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>

    This turns out to be a well-known issue.

    The reason I suspect 3 DB hits is that the generation clearly uses three different iterations through the suppliers, and the kind of person who duplicates output this badly probably also duplicates the DB request:

                $("input#searchField").autocomplete({
                minLength: 1,
                source: ["","08DIRECT LIMITED","1 & 1 INTERNET LTD", several hundred others snipped]
                });
    
                search_dict = { "08DIRECT LIMITED":"08DIRECT LIMITED","1 & 1 INTERNET LTD":"1 & 1 INTERNET LTD", snipped again}
    
                ...
    
                function search(criteria)
                {
                
                if ("08DIRECT LIMITED" == criteria)
                {
                $(".results-img").css('background-image', 'url(/media/img/hub/search-tick.jpg)');
                $(".results-text").html("<p>You earn <strong>3% cashback</strong> with<br> 08DIRECT LIMITED</p>");
                            
                                            resultsObj = $("#search-results-container");
                                            showElement(resultsObj);
                            
                                            return;
                                        }
                                        
                if ("1 & 1 INTERNET LTD" == criteria)
                {
                $(".results-img").css('background-image', 'url(/media/img/hub/search-tick.jpg)');
                $(".results-text").html("<p>You earn <strong>3% cashback</strong> with<br> 1 & 1 INTERNET LTD</p>");
                            
                                            resultsObj = $("#search-results-container");
                                            showElement(resultsObj);
                            
                                            return;
                                        }
    
                 ...
    

    As a bonus, the database contains duplicates as well. For example, there are two instances of "ABERDEEN CITY COUNCIL Q0353" (in addition to "ABERDEEN CITY COUNCIL").

    Done sanely (i.e. using one object which serves as a map from name to cashback %, and deriving any other necessary objects from it with loops), the data can be reduced by 700k to under 30k, and still compress reasonably well when served with gzip.

    Yet another bonus WTF:

                                    function hideElement(object)
                                    {
                                        object.css('visibility', 'hidden');
                                        object.css('display', 'none');
                                    }
    
                                function showElement(object)
                                {
                                    object.css('visibility', 'visible');
                                    object.css('display', 'block');
                                }
    

    Yes, that css function is from jQuery. Yes, jQuery does have show() and hide() methods.



  • @pjt33 said:

    Yes, that css function is from jQuery. Yes, jQuery does have show() and hide() methods.

    How the original developer knew about the css method without knowing about show and hide methods is baffling. Even more baffling is the fact that they bother to change the visibility property when display: none works just fine.



  • I like how it has 12,000 lines of repeated if-statements instead of just having the body of one statement with two variables.
    Using return instead of an else-if statement is pretty damn funny, too.



  • @Soviut said:

    @pjt33 said:
    Yes, that css function is from jQuery. Yes, jQuery does have show() and hide() methods.

    How the original developer knew about the css method without knowing about show and hide methods is baffling. Even more baffling is the fact that they bother to change the visibility property when display: none works just fine.

    They behave differently. Display none removes the element from the page flow.

    Visibility hidden keeps the element in the page flow and layout, just makes it invisible. A more modern equivalent would be setting opacity:0 (but don't use opacity instead of visibility when appropriate.)

    Learn CSS kthx. :)



  • Except in this case where both visibility and display are changed; visibility makes no difference because it's not displayed anyway.



  • @gu3st said:

    Visibility hidden keeps the element in the page flow and layout, just makes it invisible. A more modern equivalent would be setting opacity:0 (but don't use opacity instead of visibility when appropriate.)

    Learn CSS kthx. :)

    Considering I'm a web designer I'd say I'm very familiar with how they behave. My point was setting both is redundant since the display: none will hide and reflow, so why bother setting the visibility at that point? It's as hidden as it can get. My guess is the developer read that the visibility property isn't supported fully on some older browsers so they wanted to be "extra sure". But perhaps you can give a valid reason for this redundancy rather than trying to give me CSS lessons?



  •  Uncertainty leading to Fuck It Just Set It All To Off

    Code possibly written by someone with only a passing familiarity with CSS.



  • Communications

    3% Cashback



    Sky

    Telefonica UK (O2)

    Virgin

    BT

    Orange

    Vodafone

    3





    I used to be subscribed to 3. Their slogan was "every time is prime time".



  • @Soviut said:

    ... My guess is the developer read that the visibility property isn't supported fully on some older browsers so they wanted to be "extra sure".

    My guess (based purely on the order of the settings) is that they tried visibility:hidden but found that it caused an unwanted blank area, so not understanding what was going on just added display:none.



  • @pjt33 said:

    Yes, jQuery does have show() and hide() methods.
     

    Hell. I didn't know that.



  • @pjt33 said:

    ... it does at least 3 DB hits.

    Nope. Cronned flat-file caching.



  • @Mcoder said:

    @pjt33 said:

    Yes, jQuery does have show() and hide() methods.
     

    Hell. I didn't know that.


    If you give it a number as an argument, it animates.



  • @pjt33 said:

    @Mole said:
    I realise the Santander approach means zero DB hits, but at a cost of downloading a 700K+ html file. Not sure what happens when they want to add or remove a company.

    If it weren't for the "Joined on Tue, Sep 23 2008" I would say that you must be new here. I would not be in the least surprised to learn that each time that 737kB HTML file is rendered it does at least 3 DB hits.

    Whilst I agree I was wrong (it was late, I was tired, left my brain at home, etc, etc), I don't fully agree with you. I know the last company I worked for would cache the results, so you'd have a few DB hits to generate the file, and then the result would be cached, and that result served to the customer. It would only generate the file again if you made the request look unique, such as adding &barf=rand(). Whether thats a WTF in itself, I don't really care :)

    Either way, the generated file (lets hope it IS generated) is still a complete abortion.



  • @Mcoder said:

    @pjt33 said:

    Yes, jQuery does have show() and hide() methods.
     

    Hell. I didn't know that.

    It's right on the front page of JQuery.com under the Learn JQuery Now heading. It's in the example they use to show what JQuery can do with a few chained methods in a single line:

    [code]$("p.neat").addClass("ohmy").show("slow");[/code]



  • @dhromed said:

     Uncertainty leading to Fuck It Just Set It All To Off

    Code possibly written by someone with only a passing familiarity with CSS.

    Considering that a quick search for "hide stuff with css" yields incredibly well explained results like this I'd say the developer was incredibly lazy; Ironically, more interested in trying random attributes than researching the proper technique.



  • @Mole said:

    Whilst I agree I was wrong (it was late, I was tired, left my brain at home, etc, etc), I don't fully agree with you. I know the last company I worked for would cache the results, so you'd have a few DB hits to generate the file, and then the result would be cached, and that result served to the customer.

    I completely agree that competent people use caches. I just struggle to conceive of someone competent enough to cache that monstrosity but not sufficiently competent to ask why it's such a monstrosity in the first place and do something about it.

    @Mole said:

    Either way, the generated file (lets hope it IS generated) is still a complete abortion.

    Absolutely. This is at least as good as a lot of the recent front page material.


Log in to reply