Chipotle using Angular to reinvent standard HTML badly
-
An HTML attribute potentially worth $4.4M to Chipotle
I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. My parents are retired. They continue to try to pay for meals. I don’t want them…
-
13 DAYS LATER
-
Also,
is Angular?
-
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
-
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
You're missing the point. Angular 1.x was released in 2010. The "standard" we're talking about here, the Constraint Validation API, is an HTML5 thing and so comes out later than Angular. See this and this. They're implemented in browsers starting from 2011-12, and new features typically take a few more years before they're considered usable. (Not to mention
of browsers, Safari, has this bug where an unmatched patternwill not stop a form being submitted and it was not fixed until 2017)That's like blaming your colleagues not using streams in their Java projects when these projects are older than 2014.
-
@_P_ Be that as it may, it's not 2012 anymore. The Angular code is doing it incorrectly, it's presumably been doing it incorrectly since 2010, and here we are in 2019 with it still incorrect and in all that time no one has fixed it and Chipotle has also not switched off of it to the HTML version that does it correctly.
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
You're missing the point. Angular 1.x was released in 2010.
I thought about this too, but wasn't sure when Chipotle's website was created, and didn't want to make fool out of myself by getting the timeline wrong. But saying that built-in validation is absolute PITA to get working right in anything more advanced than beginner's tutorial, is a rather safe bet regardless of current year or technologies involved.
-
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ Be that as it may, it's not 2012 anymore. The Angular code is doing it incorrectly, it's presumably been doing it incorrectly since 2010, and here we are in 2019 with it still incorrect and in all that time no one has fixed it and Chipotle has also not switched off of it to the HTML version that does it correctly.
Do you actually understand any of the front-end development stuff at all? I said "
is Angular" because basically nobody develops front-end apps with it anymore (not to mention that nobody likes the draconian nature of Angular), and that's like since 2014-15. To request this change you're basically telling them to migrate to React, which is much more hassle than its worth.And it's only for you
s who use auto-completion. Go back and reflect on how much portion of the users actually use that function.
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ Be that as it may, it's not 2012 anymore. The Angular code is doing it incorrectly, it's presumably been doing it incorrectly since 2010, and here we are in 2019 with it still incorrect and in all that time no one has fixed it and Chipotle has also not switched off of it to the HTML version that does it correctly.
Do you actually understand any of the front-end development stuff at all?
Yes. More than I'd like to.
I said "
is Angular" because basically nobody develops front-end apps with it anymore (not to mention that nobody likes the draconian nature of Angular), and that's like since 2014-15.As much as I'd love for that to be true--and trust me, I definitely would--it's just not. Angular remains in wide, active use today in a lot of different places.
To request this change you're basically telling them to migrate to React, which is much more hassle than its worth.
Or to fix the Angular validator. Or to remove the angular validator from their code and replace it with the proper HTML. (Which is totally doable.) Not sure where you get "migrate to React" from.
And it's only for you
s who use auto-completion. Go back and reflect on how much portion of the users actually use that function.Umm, it's enabled by default on pretty much all browsers these days, so... 100% of people who order stuff online, give or take an epsilon or two?
-
Reinventing parts of HTML badly is so commonplace it barely qualifies as a blip in the "WTF Bites" thread nowadays. But it's good to see it put into numbers!
Edit: this is kind of a weird case. Angular chops the number to two digits which is exactly what you would expect it to do. And it's also what I'd have expected the HTML attribute to do.
The reason the browser does it differently if you do it via HTML attribute is because it knows that (year + limiting to two digits = use the last two digits instead of the first two). So the "magic" happens before it even inputs the number.
It's a perfect example of how semantics can allow extra functionality.
Of course the whole thing could have been avoided if they accepted both "23" and "2023" as valid years.
-
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
You're missing the point. Angular 1.x was released in 2010.
I thought about this too, but wasn't sure when Chipotle's website was created, and didn't want to make fool out of myself by getting the timeline wrong. But saying that built-in validation is absolute PITA to get working right in anything more advanced than beginner's tutorial, is a rather safe bet regardless of current year or technologies involved.
Typing
angular.versionin Chipotle's website says{"full":"1.6.6","major":1,"minor":6,"dot":6,"codeName":"interdimensional-cable"}, so an educated guess would be around 2016-17.Anyways, the form validation API is PITA to use not just because of that Safari bug (you know the
s who uses Safari will complain about them and then you're demanded to not use standard stuff to "make it work") but because of how counter-intuitive it is to use it: it marks the inputelement with state:validor:invalidwith no regards to the action of the form submission at all. If you want to display further, more detailed error message than "please fill out this field"? Then you have to jump through lots of hoops and in the end the only benefit you get is "it might be more general than using something else for this!". So naturally it doesn't gain lots of traction.
-
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
Yes. More than I'd like to.
Then perhaps shut the fuck up? This isn't the first time you're babbling about something you don't understand, like back in the OOP is TRWTF thread. If you don't understand about something why not
instead of propagating more WTF?@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
As much as I'd love for that to be true--and trust me, I definitely would--it's just not. Angular remains in wide, active use today in a lot of different places.
Your point?
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
Or to fix the Angular validator. Or to remove the angular validator from their code and replace it with the proper HTML. (Which is totally doable.) Not sure where you get "migrate to React" from.
"Totally doable" according to what? An WTDWTF user like you? Just because you're using a weird feature only available on Chrome that not that much user even uses at all and an older app breaks due to it, you're now requesting big changes to the most critical part of the business app. Are you doing the testing? Are you responsible for any bugs due to the change?
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
Umm, it's enabled by default on pretty much all browsers these days, so... 100% of people who order stuff online, give or take an epsilon or two?
You're also load of bullshit here since autofill API is full of WTF:
- It very eagerly overfits and prompts you to put your real name (or even your address) in innocent fields
- It only works for a very specific combination of input form elements
And see the "Save credit card" button in the screenshots? It's more like 100% of people who order stuff online will save their card info instead and just use it every time. Nobody's inputting credit card info every time they place an order at the same site. That'd be
, just like you.
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ Be that as it may, it's not 2012 anymore. The Angular code is doing it incorrectly, it's presumably been doing it incorrectly since 2010, and here we are in 2019 with it still incorrect and in all that time no one has fixed it and Chipotle has also not switched off of it to the HTML version that does it correctly.
Do you actually understand any of the front-end development stuff at all? I said "
is Angular" because basically nobody develops front-end apps with it anymore (not to mention that nobody likes the draconian nature of Angular), and that's like since 2014-15. To request this change you're basically telling them to migrate to React, which is much more hassle than its worth.I don't understand what you're saying here at all. They can fix this without leaving Angular, and they can migrate to anything else (did you miss the part where this form processes $17 million dollars a week? They could write their own damn browser if they needed to).
Also, no, most people here don't "understand any of the front-end development stuff at all", because most people here are not front-end devs.
And it's only for you
s who use auto-completion. Go back and reflect on how much portion of the users actually use that function.Probably a reasonable fraction? All browsers seem to ask if you want to save your details when you complete a form, it pretty much only takes two clicks.
-
@anonymous234 said in Chipotle using Angular to reinvent standard HTML badly:
did you miss the part where this form processes $17 million dollars a week?
Isn't the logical response of trying to touch a form that processes $17M a week "wait this is critical, I should probably be extra careful and not change stuff unnecessarily"?
What I don't understand is somehow the massive amount of money involved (that's coming from a BS estimate btw, he had to do that to make his findings look important) is being leveraged to make the conclusion of "so we should change it, and we should do it now!". That's the recipe of a disaster in production that cost more loss than its worth.
-
Angular is
.It's stupidly simple to overload onkeypress/onpaste/onblur to block characters, to say nothing of onsubmit validation backed up by server-side enforcement of anything that slipped past the deaf, dumb, and blind goalie that is JavaScript.
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
Nobody's inputting credit card info every time they place an order at the same site. That'd be
, just like you.Nobody blinded the cyclops...
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
Yes. More than I'd like to.
Then perhaps shut the fuck up? This isn't the first time you're babbling about something you don't understand, like back in the OOP is TRWTF thread. If you don't understand about something why not
instead of propagating more WTF? I say yes, I do understand frontend web dev "more than I'd like to"... and you read that as "I don't understand frontend web dev" 
-grade reading comprehension FTW!@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
As much as I'd love for that to be true--and trust me, I definitely would--it's just not. Angular remains in wide, active use today in a lot of different places.
Your point?
The point is that you claimed nobody is using Angular anymore, and that's simply not true.
"Totally doable" according to what? An WTDWTF user like you?
Someone who has used Angular and knows that you can put HTML attributes into your Angular template code without any problems.
Just because you're using a weird feature only available on Chrome
Is this a Earth-73 thing or something?
-
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
You're missing the point. Angular 1.x was released in 2010.
I thought about this too, but wasn't sure when Chipotle's website was created, and didn't want to make fool out of myself by getting the timeline wrong. But saying that built-in validation is absolute PITA to get working right in anything more advanced than beginner's tutorial, is a rather safe bet regardless of current year or technologies involved.
The article says this version of the website launched in the quarter ending in April 2019.
Edit: Whether this code was written as part of the "relaunched website" isn't clear, though.
Still, if you're going to relaunch a website, it's a reasonable expectation for the website to have been partly or totally rewritten.
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
"Totally doable" according to what? An WTDWTF user like you?
Yes? Seems pretty doable to me. It's just removing the Angular validation in that particular field and replacing it with an HTML attribute. Yes, and test the whole thing afterwards.
Again, you're getting outraged by people saying that Chipotle could have fixed a minor problem in their website. Not even that they should.
-
@anonymous234 said in Chipotle using Angular to reinvent standard HTML badly:
It's just removing the Angular validation in that particular field and replacing it with an HTML attribute.
I already mentioned the
around the Constraint Validation API. Using standards is not as painless and frictionless than you might think. 
-
@anonymous234 said in Chipotle using Angular to reinvent standard HTML badly:
Of course the whole thing could have been avoided if they accepted both "23" and "2023" as valid years.
That would be way too simple, wouldn't it?
-
@Zenith said in Chipotle using Angular to reinvent standard HTML badly:
AngularJS is
FTFEveryone.
Angular is good. AngularJS sucks.
-
@_P_ Are you drunk?!
Serious question.
-
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
I say yes, I do understand frontend web dev "more than I'd like to"... and you read that as "I don't understand frontend web dev"
To be fair, that interpretation is not necessarily inaccurate. I also understand frontend web more than I'd like to. Purely because I'd like to not understand it at all.
-
@_P_ said in Chipotle using Angular to reinvent standard HTML badly:
@anonymous234 said in Chipotle using Angular to reinvent standard HTML badly:
It's just removing the Angular validation in that particular field and replacing it with an HTML attribute.
I already mentioned the
around the Constraint Validation API. Using standards is not as painless and frictionless than you might think. Having actually used it.. it's actually pretty painless. It's nowhere near as terrible as you seem to be making it.
-
@Gąska said in Chipotle using Angular to reinvent standard HTML badly:
@_P_ I don't have much experience with webdev, but if browser textboxes are anything like desktop frameworks textboxes, I don't blame them for going 100% custom and not just ignoring but outright disabling any and all of the standard validation methods.
They're not like crappy native controls. They're crappy in their own ways, but the defaults are all sane and what you'd expect from using the web.
-
@_P_ A "commonly requested" "feature": if there's a post that's just a one-box, treat the date of the one-box as the date of the secret zeroth post. That way you can see how old things are.
-
-
@error said in Chipotle using Angular to reinvent standard HTML badly:
@TwelveBaud said in Chipotle using Angular to reinvent standard HTML badly:
secret zeroth post
You know, the "x days later" normally shows up between posts to indicate small or big lapses of time. Here it prints it above the first post, thus seeming to imply that there was a previous post (but there wasn't). It's nothing like Discourse's inline "whisper" posts.
It's just used to indicate how far in the past the one-boxed article was written so that people including me don't have to complain that it's an "x year old" article, so it's a forum "feature".
-
@JBert said in Chipotle using Angular to reinvent standard HTML badly:
It's just used to indicate how far in the past the one-boxed article was written so that people including me don't have to complain that it's an "x year old" article, so it's a forum "feature".
that's a weird forum feature..... i though it was caused by a thread split or.... i think the local term is a Jeffing?
-
@Vixen No, it's meant as a highly visible indication of necromancy.
-
@Mason_Wheeler No, this is Patrick
-
@JBert Hm, sounds actually pretty good. A bit confusing that it uses the same graphical assets as the necromancy one, though (before reading your and @TwelveBaud 's messages I thought this was a split thread).
-
@Medinoc you'd think you could put the onebox above the necromancy warning system, so it all compositionally made sense.
<thing>
<later>
<hey guys look at thing>
-
@AyGeePlus said in Chipotle using Angular to reinvent standard HTML badly:
@Medinoc you'd think you could put the onebox above the necromancy warning system, so it all compositionally made sense.
Or just put a message "this link is X decades old".
Is this standard NodeBB or custom patch?
-
DNRTFA and just skimmed over the comments.
BUT since we're on
: does that mean I in a foreseeable future I might not be required to faff around with Telerik|Kendo's numericTextbox (currency..) POSTing 1,23 instead of 1.23 (do not get me started on the thousands-separator) depending on <browser-language>|some vodoo from kendo itself including different behaviour between de-de and de-at where there should be no difference at at (at least concerning currency) and so on and instead we can rely on some "defaults"?Lame's experience:
-) everyone tries to re-implement the wheel starting with the basics ("let's start with simple things like DATE|DATETIME|CURRENCY")
-) eventually gives up on them (e.g. ayup, is broken and we don't give a shite) and plods on with <another thingy>
-) if they survive long enough <another thingy> works surpisingly well and gets a good (as in "hooray, at last!") response from users.Summary: now one's truly fscked:
X provides A,B,C but F is shite
Y's F is great but: A unusable, B,C might get accepted
Z does A,B,C and F but seems to be deadAm I alone with this feeling or is it just 'cos I am
?gah
-
-
@Mason_Wheeler said in Chipotle using Angular to reinvent standard HTML badly:
I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. My parents are retired. They continue to try to pay for meals. I don’t want them…
This type of a thing is a particular instance of an astoundingly common type of problem. I have been driven elsewhere by website problems of businesses on more occasions than I can count.
-
@Vixen said in Chipotle using Angular to reinvent standard HTML badly:
@JBert said in Chipotle using Angular to reinvent standard HTML badly:
It's just used to indicate how far in the past the one-boxed article was written so that people including me don't have to complain that it's an "x year old" article, so it's a forum "feature".
that's a weird forum feature..... i though it was caused by a thread split or.... i think the local term is a Jeffing?
It was created because of this topic:
https://what.thedailywtf.com/topic/25214/apple-uses-cray-x-mp-and-unix-to-design-your-next-macintosh
-
@Mason_Wheeler Nifty. I suspect that Jimmy John's could be doing something similar. I autofilled my CC details on Friday and was declined. I checked my account, everything was fine, typed in my card details and it went through.
I wasn't nearly as motivated as this guy to dig and find out what happened. I just wanted my food.
-
@Polygeekery said in Chipotle using Angular to reinvent standard HTML badly:
Jimmy John's
Freaky fast... if you can actually place an order!
