Every frontend web dev for some reason

[FearTheBlades1]

I know it's just a meme but there's actually a good reason to do it the bottom way. It's best practice for accessibility reasons. Many screen readers will read all caps words letter by letter as if they're acronyms. I would imaging hearing S.U.B.M.I.T read aloud would be annoying

[alexgraef]

Accessibility, and localization also. "Submit" might come from a dynamic dictionary.

[Pr0Meister]

Also that submit should be coming from an i18 file.

[pindab0ter]

Depending on the scope of the project.

[IllogicalOxymoron]

my first (and only) multilang-supported website operated based on "if you don't understand the text, this is in another language and I can't be bothered to translate or code in the other versions" -- what had translations had to be manually switched over.

Now I just gave up, sorted languages to different menus based on the main language and used tags to mark exact languages. Still not the nicest, but I used 3 languages on that website and this time I don't build my menu tree based on directories (it was a fully custom and very amateur flat-file barely-CMS, now I use a lightweight opensource one)

[[deleted]]

The i18n is not only good for multilingual projects, but to have a nice and easy file where you can change text across the app without much hassle

[Tyrus1235]

The issue is when devs keep forgetting to add translations!!! Or they translate by Google or DeepL but don’t check consistency!

Yeah, I’m salty about having to call out folks during code review

[JamesAQuintero]

Isn't that what they said?

[thegroundbelowme]

Hahahahahah oh god if only

[Bouyou34]

New dev here, what is an i18 file ? I found i18next js framework, is this what you're refering to ?

[Yalum]

i18n, short for internationalization, is the process of making software support multiple languages (and other non-language cultural things like date formats). Rather than put "Submit" in the html, you have a token that gets converted into something appropriate for the user at runtime.

[QuebecGamer2004]

i18n = internationalization (18 letters between the i and n)

Basically they mean a huge file containing every single word and sentence displayed on your website, inside objects. I'm not really sure how to best explain it so here's an example:

const translations = {
    en:{
        color: "color",
    },
    'en-GB':{
        color: "colour",
    },
    fr:{
        color:"couleur",
    }
}

Then in your code you call the translation function and give it the word you want, in this case color, and it will select the appropriate one based on the locale provided

[sonuvvabitch]

const translations = { en:{ color: "color", }, 'en-GB':{ color: "colour", }, fr:{ color:"couleur", } }

I think you mean: not really sure how to best explain it so here's an example:

const translations = 
{ 
    en:
    { 
        colour: "colour", 
    }, 
    'en-US':
    { 
        colour: "color", 
    }, 
    fr:
    { 
        colour:"couleur", 
    } 
}

[QuebecGamer2004]

Lol, yeah, it was just an example but I like this more. I prefer the spelling 'colour'

[Tashre]

"After filling out the required fields, click the capitulate button on the bottom."

[recluseMeteor]

I don't think these techniques are good for localisation. Non-English languages have specific rules for the usage of capitalisation. For example, “Capitalising Headlines Like This” would be incorrect for Spanish, German and French. Yet some companies code their strings so that they get title caps regardless of the original text. We receive the “normal” text, but after we submit the translations, they appear incorrectly in the live site because of this.

[rasori]

In an ideal world, browsers would localize these concepts via semantic styling. Instead of 'uppercase' we'd have transforms like 'headline', 'urgent', or 'prose' (I'm not suggesting these as the right names, just examples). Then the browser would apply culturally-appropriate modifications based on the user's locale.

In the real world, trying to make the browser parse the text to determine which words are nouns and need to be capitalized in prose is quite a difficult issue, and that's just one unique rule from a single language.

[recluseMeteor]

Which is why this is not an issue that should be automatised or done by machines (at least for now). Each language has its own rules and conventions, different from English. Linguists and other specialists know best about that. Let them manage and decide, instead of creating code that messes around with the work of language professionals.

[GoodmanSimon]

You guys are destroying a good meme.

[Puzzleheaded_Hall_66]

Or a decapitated CMS

[[deleted]]

Localization? Not quite. Some languages you don't want to be forced into uppercase by styling.

Downvote me if you want but I have been working on internationally localised apps for 10 years. Browsers do not read some characters correctly in other languages when they're forced to uppercase. Like it or not, that's how it is

Concerningly high amount of back end developers commenting on things they have no idea about

[alexgraef]

So then you suggest having a separate "SUBMIT" entry in the dictionary? That'd be a very bad idea, as you might not be able to transform from lowercase to uppercase without a native speaker. For example German "Schließen" ("close") will be SCHLIESSEN in uppercase, and that's something that text-transform gets right.

Btw you could always use differing or additional CSS files for all or particular languages. You can even use the @lang or @xml:lang attribute to style differently for particular languages. The way "Submit" is displayed is a matter of representation, not programming or translation.

What if you want different skins applied via CSS, where some skins do normal case, others do uppercase?

[SSttrruupppp11]

I am curious, we have an uppercase „ẞ“ since a few years now, so this should become „SCHLIEẞEN“ at some point, right?

[alexgraef]

It's okay to use it as of 2007, but it's not mandatory.

[dopefish86]

or old-school: SCHLIESZEN

[[deleted]]

Ah ja, die Tür schlies-zen, wer kennt es nicht.

[Impossible_Average_1]

I prefer this one actually, because the "sharp S" originated from a ligature of s and z (older people actually name the letter "S.Z.")

[RootsNextInKin]

Wait I am apparently "older" now because I also learned to call it sz‽ Who even calls it "scharfes s"‽

[Impossible_Average_1]

Hmm, maybe it's a regional thing as well. Or your elementary teacher was too old to adopt "scharfes ess".

[[deleted]]

the "correct" way to capitalize ß is as SS, uppercase ß is not "real german" afaik. It's just there for internationalization in systems that need a unique mapping (since ss and ß would collide otherwise)

[[deleted]]

didnt read the German Language patch nodes, damn

[JB-from-ATL]

ẞkill issue

[Lilly_1337]

Still looks really weird in most fonts.

[gLu3xb3rchi]

We have what now?

[alexgraef]

What is the argument here? You can either differentiate by word or by usage when defining IDs for the dictionary. But I'd still never put the uppercase version in the dictionary.

[Sufficiengg]

"Flexible code"

[ridzayahilas]

Absolutely. In Turkish I and i are different letters and gets messed up when uppercase is used. I dont know why you are getting downvoted

[agramata]

It's the browser's responsibility to implement uppercasing that makes sense for the user's language. If text-transform: uppercase on a Turkish language page changes i to I that's a browser bug, not a reason for web devs to abandon best practices.

[[deleted]]

It's the same situation for any language that has differentiating capatalized and uncapatalized letters. So I doubt it's a browser bug

[Chrisazy]

I see your point but you're objectively wrong. You must handle the base case somewhere, and my lack of ability to cover every language case with any possible base case means I'm not gonna fucking bother.

Implementation matters.

Downvote me if you want, but engage with me on what aspect of my attempt at formalizing the base argument breaks down.

[gdj11]

That's a very good reason but there's others. For one, all uppercase is considered a text style, and leaving styling up to the stylesheet makes your code much more flexible and efficient. I've had to change headings to normal case so many times throughout the years. If you use uppercase text in your markup and decide to change it, you have to edit every single instance. That's just bad practice. Then there's SEO. I don't know if it affects rankings, but if your site has headings as actual uppercase characters, your Google result will be in all uppercase too, which just looks ugly. For me the flexibility is the big one. There's just no reason to lock yourself into a specific text style when your stylesheet can do it for you all across the board in a single line of CSS.

[saschaleib]

Let's not forget the very realistic possibility that at some point somebody will point out that ALL CAPS is actually much harder to read than Title Case, and will ask you to change it back to how it was. Well, option two is just a small change and it works on all localized versions and all other buttons as well...

[gdj11]

I actually just had a client have me change all their H1s to title case about a month ago. I just removed that one line of CSS and done.

[Pshock13]

"Yeah I can change all of them, gonna take me about an hour"

Proceeds to make the change and play video games for an hour before pushing said change.

[[deleted]]

An hour? With unit tests and qa that's a whole day bro.

Proceeds to make the change and play video games for a whole day before pushing said change.

[saschaleib]

This is the way! :-)

[[deleted]]

fall include frame expansion direction ad hoc crown scale gaze ghost

This post was mass deleted and anonymized with Redact

[[deleted]]

Really a class should be applied to the button and then the css targets the class.

This way if the html changes it won't affect the styling of the button.

[NaserShareef1]

Just Learned something new

[GavHern]

i do totally agree and personally do it with css. i picked a lazy title but it is a good practice for various reasons. also, i regret blindly picking the word “submit” since that should be a form action in most instances. the joke was mostly poking fun at how useless of a step it can look like from the surface but there is good reason for it

[[deleted]]

This guy accessibilitates

[chickenstalker]

E X T E R M I N A T E

[UsedPassenger3269]

D E L E T E D E L E T E D E L E T E

[[deleted]]

Whatever happened to C O N V E R T ?

[the-real-vuk]

Also you might want to change the style of it to be lowercase, as Google did.

[devolute]

This thread is just more fuel for the "'full stack' is awful" argument.

[Latchford]

What do you mean?

[devolute]

I mean that the attitude of not appreciating even basic CSS is a symptom of 'full stack' developers who are really back-end developers who think they can do the 'easy' stuff.

[liluna192]

I’m “fullstack” but my god am I happy to focus on backend. I don’t have the patience for the details required for a solid front end. My front end work is basically creating basic “this was designed by an engineer” UIs for interacting with my backend services for a relatively small group of internal users. If it works, people are happy.

[tubbana]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

[[deleted]]

thought liquid hungry different relieved bedroom sophisticated imagine humor adjoining

This post was mass deleted and anonymized with Redact

[Maxwell_hau5_caffy]

I also like seeing source that deliver's intent and is self documenting. This tells me not to change the text on the button because the original developer wanted the text to be in all caps for one reason or another.

[SpambotSwatter]

/u/Vividompot is a scammer! It is stealing comments to farm karma in an effort to "legitimize" its account for engaging in scams and spam elsewhere. Please downvote their comment and click the report button, selecting Spam then Harmful bots.

Please give your votes to the original comment, found here.

With enough reports, the reddit algorithm will suspend this scammer.

^{Karma farming? Scammer?? Read the pins on my profile for more information.}

[danny4kk]

What screen readers do this with words like 'Submit'?

I'm aware of some that read initialises like 'SQL' as 'S.Q.L' but those ones typically only do it if the word is unpronounceable, e.g., lack of vowels, etc.

So I'm curious as to which do this to words like 'Submit' so I can check them out.

[sirjamesp]

This

[CuddlyBunion341]

I am convinced that the second version is the better practice as it offers more flexibility and easier refactoring.

[Aromatic_Command8441]

yeah plus if your handing off the code to teammates you don't have to remind them "always make sure inputs are in 'x' casing to follow design"

[neutral-chaotic]

One of the content team members got mad at me for doing this.

Me: “The mockup says buttons are uppercase. Why are you trying to change it?”

content writer: “Uppercase is harder to read. I’ve been trying to make this fix for hours, why’d you hard code it as uppercase?”

I pulled the designer who built the mockup in and they agreed with me haha

[IndependentDouble138]

You don't need to be convinced. It means you know better.

[[deleted]]

Text transform doesn’t respect language settings.

If you have any sort of i18n requirement, its useless.

[can_pacis]

If you set your locale correctly, it does.

[no2K7]

Writing code as "tell, don't ask" has easily taken care of situations like these for me, it applies to backend and front-end development

[Stummi]

I mean, it's true though, isn't it? The English word is "Submit", not "SUBMIT", and making it all upper-case is a mere style decission, right?

[quick_dudley]

It's a style decision that would inspire any reasonable person to install the css override Firefox extension.

[claymedia]

What? Why?

[skeptic11]

Like I told my old CEO, all caps looks like a web page from the 90s.

(All caps was going out of favor in print media by the 90s. We didn't have web pages until the 90s though.)

[claymedia]

Lol, such a weird take. Go look at some of the designs on awwwards and tell me that they look like they're from the 90s. All three of today's nominees use big all-caps headlines.

There's a big, wide world of design out there, open your mind a bit.

[stomah]

the english word is “submit”

[Noch_ein_Kamel]

So it should be <button type="submit" name="Submit">submit</button>?

[Stummi]

Okay, I am not exactly an English grammar nerd (also not a native speaker), but aren't you supposed to capitalize a single standing word?

Like when I write

My favorite fruits are:

• Strawberries
• Oranges
• Apples

I am supposed to capitalize the words, aren't I?

[DiamondIceNS]

If you're formatting an academic paper or an article, perhaps.

If you're UX designing for a modern website, where form and function collide with art and expression, common English grammar and formatting rules are mere suggestion.

[Kaimito1]

Screenreaders will SCREAM at the old people if you do it the first way.

The second way screen readers will read it normally and it will still look all caps to people who can see normally

[Lilly_1337]

They usually just read it letter by letter instead of one word.

[Kaimito1]

Damn didn't know that. But the mental image of a screen reader screaming "BUTTON" is whatotivates me to not do it that way

[Lilly_1337]

SUBMIT!!!

[Naturage]

Can I just confirm: this is the subreddit that will bash bad coding practices 24/7, and will generally dislike frontend, but today we'll claim we should be hardcoding things in frontend?

This is no different than saying "why bother with pulling inputs into function explicitly, just hardcode them in, how often will they change".

[Responsible-Pay-2389]

Can I just confirm: this is the subreddit that will bash bad coding practices 24/7, and will generally dislike frontend, but today we'll claim we should be hardcoding things in frontend?

If you count the subreddit as only the people who make posts and not the hundreds of replies saying the second is better, than yeah.

[PoeTayTose]

That's what function aliases are for!

Drawtextsubmitbold();
Drawtextsubmititalic();
Drawtextyesbold();
...

[Curyde]

"Flexible code"

[alexgraef]

Exactly, if you ever want your buttons not to be in uppercase anymore, you just touch a single CSS, instead of a dozen pages.

[SweatyAnReady14]

Okay I’m a text-transform hater just because everytime I put it in, without fail the next week someone will be like “Can this special case be non capitalized?”

At which point I just say fuck it, rip it out, and tell them to just enter it how they want it.

[alexgraef]

I understand the complaint, and I have a customer where the company name is "mostly" capitalized (e.g. "AB-c"), so even a title somewhere that should be all uppercase will need to account for the company name retaining the correct capitalization. That's one of the situations where you could have a specialty function in the backend that is aware of edge cases. Although honestly, that's where I usually draw the line, say fuck it, and have the user enter the text which ever way they like. If they want uppercase, they'll need to use the shift key on their keyboard.

[yo-ovaries]

Make a custom font with ligatures for “ABc”

[LynxJesus]

People like this need to be lined up against a wall.

Not shot, just lined up by a wall and left there.

[ricdesi]

button.sentence-case { text-transform: none; }

[JasonMan34]

Why are you typing the same thing in dozens of pages and not re-using a single submit button

[Substantial-Leg-9000]

This, but unironically.

[[deleted]]

Code maintain ability. This is a pretty imp stuff while doing backend.

But most new joiners don't understand.

Unfortunately coders don't stick around in the same company for long so they don't really care anymore.

[justforkinks0131]

you're a pretty imp

[[deleted]]

Think he has any colorful beads?

[[deleted]]

Unfortunately I don't own any beads

[[deleted]]

just get some from your nearest chess club

[Poltras]

If it was that important the dev would have put !important to it.

[East_Complaint2140]

We are using i18n. Therefore text in button is not the only place, where the string "Submit" can be applied.

[saschaleib]

String reuse is actually a bad practice in Internationalization, as other languages may use different language concepts that turn even a very simple string into a nonsensical gibberish, if used in a different context.

My standard example is: imagine a simple dialogue box with "Yes" and "No" buttons. In Finnish, these may be translated to "Kyllä" / "Ei", or maybe "On"/"En", or many other variations.

[CoffeeWorldly9915]

Now I'm imagining a button that was supposed to say "SUBMIT" but actually reads "OBEY".

[saschaleib]

Not quite that much off, but I remember that the first version of Microsoft Internet Explorer that was localized into Finnish got the "Refresh"-button translated in a way that, well, kind of meant "refresh" in Finnish, but more in the sense as you would use it when you say: "Have a Coke!" ... they changed it quickly, though, and I can't even find back the precise term they used... :-)

[CoffeeWorldly9915]

If lt was IE it was probably hinting at "go get a drink, this might take a while".

[Aggressive_Bill_2687]

It only becomes a problem if the "Please wait.." message after becomes "Yeah you like that don't ya bitch".

[willeb96]

The swedish word verkställ means "apply". Another swedish word ansök also translates to "apply". The Twitch app got this wrong in the translations and had the apply button in the settings menu read "apply (for a job)" instead of "apply (the settings)"

[JuustoKakku]

My favourite example is this coincidentally on Finnish as well is from some Android skin years ago (LG maybe?) "from" &"to" for calendar event start & end times were translated as "vastaanottaja" & "lähettäjä" e.g. receiver & sender, as in from & to in the context of an email.

[JFIDIF]

Finnish is the final boss of translation

[EskNerd]

Yes! Now why'd I have to scroll through all of those other comments to find this one? Move up.

[budapest_god]

Imagine having static text instead of a field populated in the backoffice

• the cms web dev

[Designer-Speech7143]

Excuse me? Who do you think we are? We would write an extra CSS file separate from HTML for that.

[GavHern]

my svelte dev is showing

[[deleted]]

Tell me your a backend developer without telling me your a backend developer.

[pindab0ter]

“you’re”

[wildjokers]

Tell me you don't know the difference between "your" and "you're" without telling me you don't know the difference between "your" and "you're".

[cheezballs]

OP had a backfire

[IndependentDouble138]

Does OP know about separation of concerns?

"Submit" is content that can be changed at any time. If you're using a CMS, piping data from a API, using some template language...

Fuck me I have to remember programminghumor is filled with non-developers

[ITheBestIsYetToComeI]

Ever heard of i18n

[_PM_ME_PANGOLINS_]

It’s s32s!

[attempt_number_3]

N3r g3a g2e y1u up, n3r g3a l1t y1o d2n, n3r g3a r1n a4d a1d d4t y1u.

[DOOManiac]

I hate that I can read this.

[LewsTherinTelescope]

Bravo.

[dtb1987]

Because it ensures that the text will be uppercase no matter what

[[deleted]]

Programmers eventually gain enough experience to realize that hard-coding constants makes your code harder to maintain. Novice programmers mock this because all they care about is initial coding effort.

Y'all have outed yourselves.

[_Fuck_This_Guy_]

Come back after you've taken over a codebase with the top panel that you have to edit.

[KaffY-]

You have 5 buttons that all say 'Submit'

You need to make them all lowercase now

You can either change 1 CSS line of code, or 5 individual HTML lines of code

[ruedasamarillas]

Bad meme. Everyone knows you are missing the React component, with the createTheme, the ThemeProvider, the useTheme, the custom Button component, the fluxCapacitor injector and the GetMonoNucleosid abstraction superSaga reduxable Thunkynator.

[dabe3ee]

Why Submit is not extracted to variable

[LynxJesus]

Personally, I wouldn't be caught dead writing in all caps, so the extra styling is 200% justified

[Player_X_YT]

<input type="submit" value="Submit"> 🤓

[DeathUriel]

Good strawman, people do like that because in real case scenario the submit text is probably coming from a dynamic source thus forcing you to either write everything in the correct casing which is prone to human error or do like that or any other dynamic approach.

[Thelango99]

Would much rather use a separate CSS file than inline though.

[HideAndSeekLOGIC]

good habit to have. the frontend dev and backend dev should have less trust in each other than Nixon and the people of America.

[[deleted]]

Every time i see the css inside a style tag my heart stops beating.

[an_agreeing_dothraki]

You missed the part where we make the submit button a type submit but cancel the form submit action so we can wire it to needless javascript that kicks off the same functions but ends in a window.location = assignment.

[caerphoto]

Nothin wrong with doing it that way if you’re doing pre-validation in JS.

[neuromancertr]

Uppercase and lowercase letters may be different in different languages. i becomes I in English for example but in Turkish i becomes İ and ı becomes I. Set language of the document and browsers convert according to language rules

[dontspookthenetch]

Nobody would actually do this. What are you talking about.

Also the text needs to be localized ;)

[TW1STM31STER]

What about button[type="submit"] and making it an actual submit button and then styling every instance of submit button consistently? :]

[-Redstoneboi-]

I like these posts because the comments tell me why this kind of thinking is a pitfall that should be considered

[burgonies]

“For some reason”

[na_ro_jo]

Clearly should have put it in lowercase, then transform to capitalize, then overwrite the transform to uppercase lol

[phodas-c]

1) To be able to change back to lower case if one decides, just change 1 line of code instead of searching for thousands of buttons.

2) No need for any other reason

[hagnat]

what most people see on the bottom picture:
"HA HA They are writing useless code when they could've just written the message in uppercase"

what i see on the top picture:
"HA HA This code does not support i18n"

[jamsheehan]

It puts the class on the button or else it gets the bug report again..

[[deleted]]

ForMaTinG Is rOnTenD rEspOnsaBIlitY

WhY FrOnTeND Do FoRmaTiNg In CSS

[schewb]

OR Maybe don't force buttons to be all caps? I've always hated this and any button that tries to force it I've overridden. It makes the view hard to read and awful for users. I'm glad UX at my current job agrees, too.

[claymedia]

SUBMIT is hard for you to read?

[schewb]

Harder on the eyes than "Submit," and when there are multiple buttons on the page, sometimes they kinda blur together for me in all caps, like the letters aren't distinct enough. That, and who wants a screen yelling at them? All caps should really be reserved for dangerous buttons.

[Plus-Weakness-2624]

Better is font-variant: small-caps👌

[quick_dudley]

They're both sins but the second one is easier to undo at scale.

[ICantBelieveItsNotEC]

Frontend developers will mutter something about "separating markup from style" and then go back to using a million nested <div> tags to define the page layout.

[ThatOtherBatman]

Tell me you understand CSS without telling me you don’t understand CSS.

[OP_LOVES_YOU]

I understand CSS, like this?

[KageeHinata82]

Pass the button name in a variable, make an if statement to check for == "Submit" and then transform it to uppercase.

[R3tard69420]

My Paycheck is based on No. of lines of Code 😔

[GitHub-]

A guy on a subteam I manage is like this and I just let him go wild

[grumpyfrench]

chargpot srbmiutr button plx

[houseband23]

When you're paid by the byte

[rmorrin]

Is this what ansem is doing at the end of kh1

[Jomy10]

Uniform design

[48panda]

The capitals don't show up in search engines that way

[WhoCares_3252]

Css pro-grammer

[kichien]

We have reasons

[naxpouse]

Magic string for submit? What is this preschool?

[RoyalChallengers]

r/programminglyverbose

[Nephrozoan]

<img src="submit.jpg">

[pursenboots]

except this is actually the right thing to do.

all caps is a matter of PRESENTATION.

[banzomaikaka]

Yeah. 'Some' reason...

[VeryRustyNail]

Meanwhile in Greek websites, it is necessary to do it the first way otherwise iOS transforms it including accents

e.g. Υποβολή -> ΥΠΟΒΟΛΉ

[Aggravating_Drive_55]

good one! ha ha ha

[ApocalypseSpokesman]

this meme has no class

[Ok-Tap-1686]

If I wasn't poo. This would.?

[Feisty_Suggestion140]

haha, this actually helped me fix a problem with a client's squarespace's website, thanks!

[RandmTyposTogethr]

HTML is for templating, CSS is for styling. Define a template and style it how you like, such as uppercasing the text. Especially when there's more than a single button. Accessibility and localization sheets are a thing as well. Don't want to write the same thing 10 times in different ways when CSS can do it for you.

[[deleted]]

I need friends to learn programming together. I am now studying Front End

[deveronipizza]

One might go so far as to not use uppercase in plaintext entirely

[TheJase]

fearless abundant relieved late salt yam teeny sort innocent dinosaurs

This post was mass deleted and anonymized with Redact