Nice way of using Angular & PHP & Bootstrap & jQuery



  • I may be wrong but wasn't Angular supposed to be a SPA framework? I say I may be wrong because I'm looking at something that is supposed to be an Angular application but uses it as a if it was jQuery. Oh, and it's all build on top of Zend Framework. Some WTFs:

    • A single 2000 LOC file called myApp.js
    • Instead of Angular templates, it uses several pages of PHP magic.
    • Some jQuery here & there.
    • No npm so all of angular + bootstrap + jQuery is included in the repository.
    • Bootstrap is included but not used.
    • Some calls to the backend are done in PHP and others in JS [1]
    • Some genius added to the repository a 200MB library (which is another WTF in itself) including this library documentation.
    • Of course, all of this crap is not minified in production.
    • All JS dependencies are included instead of using Bower or Grunt
    • All PHP dependencies are included even when there's a composer.phar file

    So, I'm debugging this crap and I don't know if I have to debug the JS code or the PHP code because FUCK YOU!

    [1] Some backend calls are done in PHP and data is given to Angular using this:

    dummyData.details = <?php echo json_encode($this->data) ?>;
    

    :wtf:

    I'll be adding stuff while I keep on discovering crap

    This cluster-fuck wasn't developed by our people, but by a third party which could as well have been in Guangdong



  • I would set fire to something if that landed on my desk.


  • sockdevs

    @thegoryone said:

    I would set fire to somethingthe original developer's hair if that landed on my desk.

    FTFM


  • Winner of the 2016 Presidential Election

    @accalia said:

    @thegoryone said:
    I would set fire to somethingthe original developer's hair if that landed on my desk.

    FTFM

    That explains @codinghorror's avatar.



  • @accalia said:

    I would set fire to the original developer if that landed on my desk

    FTFY.



  • This shit just keeps on giving.



  • So, I got curious about this and decided to track down when was Angular added to what seems like a full blown PHP thing.

    [First Commit]
    public/js/angular.js
    public/js/angular.min.js
    public/js/bootstrap.min.js 
    

    :triumph:


  • BINNED

    I had an opposite situation: there was a PHP-based MVC already in place. Needed some features that Angular provides so I was considering adding it.

    Then I read about what Angular actually is and sanity prevailed.


  • sockdevs

    that looks like we have ourselves a cargoculter....

    "I don't know what this is but it solved a problem last time so i'll include it this time even though i don't understand the problem or why this solved it"


  • Winner of the 2016 Presidential Election

    @accalia said:

    "I don't know what this is but it solved a problem last time so i'll include it this time even though i don't understand the problem or why this solved it"

    a.k.a. jQuery


  • sockdevs

    that too.

    actually that's true of $framework too

    Filed under Cargo culters gonna cargo cult



  • Which this project also includes, and we all know how well jQuery and Angular care about each other 1.

    jQuery should be renamed to jPlugins.

    [1] badly, in case you didn't know


  • BINNED

    @Eldelshell said:

    [1] badly, in case you didn't know

    TBQH, since I never tried, I didn't... hold on... Didn't you say...

    @Eldelshell said:


    [First Commit]
    public/js/angular.js
    public/js/angular.min.js

    public/js/bootstrap.min.js

    Shhhhhiiii ...

    Good fucking luck man. I feel for ya.



  • @accalia said:

    that looks like we have ourselves a cargoculter....

    "I don't know what this is but it solved a problem last time so i'll include it this time even though i don't understand the problem or why this solved it"

    Adding that to my vocabulary.


  • Discourse touched me in a no-no place

    @Eldelshell said:

    [First Commit]
    public/js/angular.js
    public/js/angular.min.js

    Having both the original and the minified version committed instead of doing the minification as part of making the installation package? :facepalm:


  • sockdevs

    bonus points for the inevitable eventual upgfrading of one or the other of those files to the new version and having to track down bugs when running in release mode that don't happen in dev mode.


  • BINNED

    WTF indeed.

    The fun bit, connected to what @Eldelshell said about Angular and jQuery... boostrap.js depends on jQuery.

    Also, thinking about it... oh, shit!

    Whew. It's not using .btn as a class. I know jQueryUI did / does, which means that it tends to blow up.

    There's no jQueryUI, is there?



  • As I said above:

    Of course, all of this crap is not minified in production.

    There's not "packaging" step.



  • Look for yourself:

    <!-- SCRIPTS -->
    <?php
    echo $this->headScript()->appendFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
    	->appendFile($this->basePath() . '/js/jquery.min.js')
    	->appendFile($this->basePath() . '/js/bootstrap.min.js')
    	->appendFile($this->basePath() . '/js/angularjs/angular.min.js')
    	->appendFile($this->basePath() . '/js/angularjs/utils/angular-route.js')
    	->appendFile($this->basePath() . '/js/myApp.js')
    	->appendFile($this->basePath() . '/yyyyyyyyyy.js')
    	->appendFile($this->basePath() . '/zzzzzzzzzz.js')
    	->appendFile($this->basePath() . '/js/jquery.slides.min.js')//New slides library
    	->appendFile($this->basePath() . '/js/jquery.raty.js')
    	->appendFile($this->basePath() . '/js/jtruncate.min.js')
    	->appendFile($this->basePath() . '/js/ccccccc.js')
    	->appendFile($this->basePath() . '/js/bbbbbb.js')
    	->appendFile($this->basePath() . '/js/custom_callbacks.js')
    	->appendFile($this->basePath() . '/js/aaaaaa.js')
    	->appendFile($this->basePath() . '/js/angularjs/utils/keypress.js')
    	->appendFile($this->basePath() . '/js/angularjs/utils/angular-facebook.js')
    	->appendFile('//platform.twitter.com/widgets.js')
    ?>
    

    At least the Angular version is not very old (1.2.x)


  • BINNED

    @Eldelshell said:

    ```
    'conditional' => 'lt IE 9'

    
    Oh boy...
    
    @Eldelshell <a href="/t/via-quote/8893/19">said</a>:<blockquote>```
    ->appendFile($this->basePath() . '/yyyyyyyyyy.js')
    ->appendFile($this->basePath() . '/zzzzzzzzzz.js')
    ```</blockquote>
    
    What...
    
    @Eldelshell <a href="/t/via-quote/8893/19">said</a>:<blockquote>```
    ->appendFile($this->basePath() . '/js/ccccccc.js')
    ->appendFile($this->;basePath() . '/js/bbbbbb.js')
    ```</blockquote>
    
    MAKE IT STOP MOTHER, PLEASE!


  • That's anonymized :stuck_out_tongue:


  • BINNED

    I thought it might be.

    However, given the rest of the idiocy, can you really blame me for thinking it might not be? :P


  • Discourse touched me in a no-no place

    @Eldelshell said:

    There's not "packaging" step.

    Maybe there ought to be one? ;)



  • This keeps on giving. So, today the whole site stopped playing videos, which makes it totally useless. While debugging I decided to, you know, remove this unfriendly part of the code

    var log = function(msg){
        console.log(msg);
    };
    

    And we have videos. Now, I don't know why this is happening but this code breaks the whole site and there's no error reported in the web console of either Firefox or Chrome. Somehow the exception is getting lost inside either Angular, jQuery or whatever layer of WTF is beyond.

    Edit: found the problem:

    if (status == "VALID_TOKEN") {
        console.log = status;
    }
    
    

  • BINNED

    @Eldelshell said:

    console.log = status;

    is that... redefining a function on a built in object?

    Uuurgh



  • @Jaloopa said:

    is that... redefining a function on a built in object?

    Redefining a function on a built-in object as a string. How do you expect that not to break the world and everything in it?! :facepalm:


  • sockdevs

    @Eldelshell said:

    Edit: found the problem:

    if (status == "VALID_TOKEN") {
        console.log = status;
    }
    ```</blockquote>
    :no_mouth:
    
    I can feel my IQ bleeding out of my ears… <small>it's hard enough keeping my quills clean as it is…


  • Well, it was probably a typo from console.log(status)


  • Discourse touched me in a no-no place

    @Eldelshell said:

    console.log = status;

    So, it's overwriting a built-in operation. And it's doing so with a known value; even if it was right, it would be dumb as a box of rocks.



  • @Eldelshell said:

    And we have videos. Now, I don't know why this is happening but this code breaks the whole site and there's no error reported in the web console of either Firefox or Chrome. Somehow the exception is getting lost inside either Angular, jQuery or whatever layer of WTF is beyond.

    console.log() is undefined in IE. (Unless there is an actual console open.)

    Note: IE's behavior is 100% correct according to the spec, but since Firefox and Chrome dummy-out console.log() instead of not defining it, this throws most terrible web developers. By which I mean, most web developers.

    This is also a good demonstration of why we need as many completely different parties as possible wailing-away at the W3C's awful specs.

    EDIT: Oh I see the problem in this case was trying to redefine a built-in function. The code in the first snippet is still wrong, though, unless you wrote some "safety" code in your init for IE to define console.log() as something if it's undefined.


  • β™Ώ

    @blakeyrat said:

    Note: IE's behavior is 100% correct according to the spec, but since Firefox and Chrome dummy-out console.log() instead of not defining it, this throws most terrible web developers. By which I mean, most web developers.

    Heaven forfend someone tries to make stuff easy, eh?



  • @boomzilla said:

    Heaven forfend someone tries to make stuff easy, eh?

    That's not the point; the point is bad developers write code that works by accident. ("Well I tried it in Chrome and it seems to work, so ship it.") Good developers wrote stuff that works because the specification says it works. Web guys are always the former.

    HOWEVER, I can't blame them that much, because their dev environment is so fucking complex, and the spec so goddamned poorly-written, that it would be nearly impossible to be aware of all the nuances of what you're doing at all times. (It isn't hard to test the damned thing in IE and notice it throws an undefined error, though.)

    I'd also argue that fudging the spec doesn't "make stuff easy". If the Chrome and Firefox guys were really interested in that (and they are not, BTW), they'd go to the W3C and say: "look, guys, this spec is gonna cause heisenbugs, let's fix it at the source."



  • So, I got the bill for that fix. Including the time it took to figure out why this was breaking the whole site and the fix itself, it amounts to more than US$600



  • So you're a HPC?



  • And this shit just keeps on giving.

    Now I'm digging into the pile of shit this PHP code is. Apart of the whole tabs+spaces all around and the different file encodings and EOL (seems a developer used Linux and the other one uses Windows) there's no logging. For all I can see errors are printed to the HTML but not a single log file is generated by this thing.


  • Discourse touched me in a no-no place

    @Eldelshell said:

    there's no logging.

    :scream: :anguished:


  • BINNED

    You mean custom logs? Or did they somehow managed to kill error logging into /var/log/<apachedir>/error.log?

    (Buttuming Apache. I know it might not be, but that's the path I know.)



  • I get the error logs in Apache when I break something in the PHP code, no problem there. Everything else is a blackbox.



  • Today we decided that to workaround an issue with a third party, that we need to show a confirmation dialog to a user saying: "Are you sure you want to stop playback?"

    The request is sent to the developer and we receive a native JS confirmation dialog. That's nice, but now try to do it with a nicer one, like the ones we're already using. This is the commit:

    +2 -0 Application/view/layout/layout.phtml
    public/js/jquery-ui-1.11.4/external/jquery/jquery.js
    public/js/jquery-ui-1.11.4/images/ui-bg_flat_30_cccccc_40x100.png
    public/js/jquery-ui-1.11.4/images/ui-bg_flat_50_5c5c5c_40x100.png
    public/js/jquery-ui-1.11.4/images/ui-bg_glass_20_555555_1x400.png
    public/js/jquery-ui-1.11.4/images/ui-bg_glass_40_0078a3_1x400.png
    public/js/jquery-ui-1.11.4/images/ui-bg_glass_40_ffc73d_1x400.png
    public/js/jquery-ui-1.11.4/images/ui-bg_gloss-wave_25_333333_500x100.png
    public/js/jquery-ui-1.11.4/images/ui-bg_highlight-soft_80_eeeeee_1x100.png
    public/js/jquery-ui-1.11.4/images/ui-bg_inset-soft_25_000000_1x100.png
    public/js/jquery-ui-1.11.4/images/ui-bg_inset-soft_30_f58400_1x100.png
    public/js/jquery-ui-1.11.4/images/ui-icons_222222_256x240.png
    public/js/jquery-ui-1.11.4/images/ui-icons_4b8e0b_256x240.png
    public/js/jquery-ui-1.11.4/images/ui-icons_a83300_256x240.png
    public/js/jquery-ui-1.11.4/images/ui-icons_cccccc_256x240.png
    public/js/jquery-ui-1.11.4/images/ui-icons_ffffff_256x240.png
    public/js/jquery-ui-1.11.4/index.html
    public/js/jquery-ui-1.11.4/jquery-ui.css
    public/js/jquery-ui-1.11.4/jquery-ui.js
    public/js/jquery-ui-1.11.4/jquery-ui.min.css
    public/js/jquery-ui-1.11.4/jquery-ui.min.js
    public/js/jquery-ui-1.11.4/jquery-ui.structure.css
    public/js/jquery-ui-1.11.4/jquery-ui.structure.min.css
    public/js/jquery-ui-1.11.4/jquery-ui.theme.css
    public/js/jquery-ui-1.11.4/jquery-ui.theme.min.css
    

  • Discourse touched me in a no-no place

    ...isn't that what happens when you include jQuery into a project?



  • @Eldelshell said:

    That's nice, but now try to do it with a nicer one, like the ones we're already using.

    To be fair; that's worded fairly ambiguously. Anything resembling current implementation (but not actually re-using the current implementation) still fullfills that condition, though it's probably not what you intended.

    Are you dealing with outsourcing and offshore devs, by any chance? ;-)


  • sockdevs

    @FrostCat said:

    ...isn't that what happens when you include jQuery into a project?

    jQuery UI, yes; vanilla jQuery, not so much (it's one file)


  • Discourse touched me in a no-no place

    @RaceProUK said:

    jQuery UI, yes; vanilla jQuery, not so much (it's one file)

    Oh yeah, I forgot. I brought jQ and jQUI into a one of my company's apps to update the feature set, so I knew they're two more or less separate things, but I forgot about that. Still, though, saying this makes me want to say "well, just pretend I wrote "jQueryUI" where I wrote "jQuery" in my first post. :smile:



  • @RaceProUK said:

    jQuery UI, yes

    Iirc as of 1.10 you can opt to use it with a minimal theme containing only the bare metal functional/structural CSS for things like overlay z-ordering to work correctly. And as of 1.11 you can use bits and pieces of the library via AMD / RequireJS without needing to include the whole thing and write shim configuration for it. There have been some improvements.


  • β™Ώ

    @FrostCat said:

    one of my company's apps

    Do you work for Microsoft?

    SCNR


  • Discourse touched me in a no-no place

    @boomzilla said:

    Do you work for Microsoft?

    :facepalm:



  • Who is this "we"?! :construction_worker:



  • Well I don't think they need both regular and minified files, but other than that no real WTF here (aside from "brought in a whole library to make one dialog nicer" thing).



  • But what about the nice-dialog library that already existed?


  • Discourse touched me in a no-no place

    @TwelveBaud said:

    But what about the nice-dialog library that already existed?

    That kind of reminds me how the web app I'm integrating this other one into is horribly ugly--it's all 8 or 10pt fonts, and suffers poor readability. The other app uses jQuery+jQueryUI and so on--you can tell by the skinning--and I'm afraid at some point someone's going to look at it and say "it doesn't look seamless; we need to skin it to look like the rest of the app."

    Fortunately they're aware the app looks like ass, and are supposedly redesigning it, although that's been going on for like 4 years now, so they're not likely to want me to reskin the third-party one. I hope.

    Oh, speaking of UI failures, the original GUI app this web one replaces, you double-clicked buttons to run stuff. I'll mock up something some time so you can see how 'orrible it is.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.