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) ?>;
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
-
@thegoryone said:
I would set fire to
somethingthe original developer's hair if that landed on my desk.FTFM
-
@thegoryone said:
I would set fire to
somethingthe original developer's hair if that landed on my desk.FTFM
That explains @codinghorror's avatar.
-
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
-
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.
-
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"
-
"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
-
-
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
-
[1] badly, in case you didn't know
TBQH, since I never tried, I didn't... hold on... Didn't you say...
[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.
-
[First Commit]
public/js/angular.js
public/js/angular.min.jsHaving both the original and the minified version committed instead of doing the minification as part of making the installation package?
-
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.
-
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)
-
```
'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
-
I thought it might be.
However, given the rest of the idiocy, can you really blame me for thinking it might not be? :P
-
-
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; }
-
console.log = status;
is that... redefining a function on a built in object?
Uuurgh
-
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?!
-
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)
-
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.
-
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.
-
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?
-
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.
-
-
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
-
...isn't that what happens when you include jQuery into a project?
-
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? ;-)
-
...isn't that what happens when you include jQuery into a project?
jQuery UI, yes; vanilla jQuery, not so much (it's one file)
-
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.
-
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.
-
-
Do you work for Microsoft?
-
Who is this "we"?!
-
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?
-
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.
-
Are you dealing with outsourcing and offshore devs, by any chance?
We speak the same language but yes, he's works for a third party. What pissed me off is that he asked the PM (who knows pretty much nothing about development) if he should do this. Not me, who's responsible for this kind of decisions.
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.
Yes, you can bake your own minimal features version of jQueryUI and use custom themes. But this guys didn't even bother. Hell, he even added jQuery again to the repository.
(aside from "brought in a whole library to make one dialog nicer" thing).
Not only that, but the total lack of care in the job. He could have added a feature limited version and the minified files only and a theme that looked a little bit like the actual application. But he simply took the first shit he found on "How to make a dialog" and copy/pasted it all.
But what about the nice-dialog library that already existed?
Exactly, we already have some dialogs working that use Bootstrap and follow the L&F of the different applications. The "new" jQueryUI theme this butcher chose is not even close to it.
Did I mentioned we are already using Bootstrap?
-
-
Got the developer to remove jQuery and use the already existing Bootstrap dialogs. Had to modify it a little so it was a confirmation one. Anyway, 30 LOC and 1 hour.
But I'm not here to write about good news, because, dear readers, this project just keeps on giving.
Right now the client was supposed to be deploying this thing to its production server (yes, server, another WTF on its own). When all was set and the files were in their place, all we got was a nice white page
Ask the guy doing the stuff on the client's end to check the logs and he finds this:
PHP Parse error: syntax error, unexpected '[' in ...
The line has nothing special:
$x = $this->getLocalConfig()['x']['y'];
Oh please God no!!!!
$curl -I http://clients.server.com/ HTTP/1.1 200 OK X-Powered-By: PHP/5.3.3 $curl -I http://our.dev.server.com/ HTTP/1.1 200 OK X-Powered-By: PHP/5.4.33
And the final nail in the coffin:
As of PHP 5.4 you can also use the short array syntax, which replaces array() with [].
So many WTFs here, but I'm too tired and frustrated to maintain the laptop open without punching the screen.
Edit: After reviewing a little and thinking: "PHP can't be that stupid to not support this" I dug a little and the problem is not quite that one, but this one:
As of PHP 5.4 it is possible to array dereference the result of a function or method call directly. Before it was only possible using a temporary variable.
So maybe I only have to hunt down for this situation and fix it all.