There are many dangerous professions in the world.<\/p>\n\n\n\n
Firefighter. Deep-sea diver. Bull rider. Professional cricket umpire.<\/p>\n\n\n\n
And then there is the front-end web developer.<\/p>\n\n\n\n
People assume we sit comfortably at a desk, drinking artisanal coffee while gently arranging rectangles on a screen.<\/p>\n\n\n\n
This is propaganda.<\/p>\n\n\n\n
The truth is that front-end development is a high-risk occupation involving unpredictable buttons, hostile CSS, emotionally unstable browsers, and the occasional JavaScript error that appears to have been personally sent by Satan.<\/p>\n\n\n\n
I know this because I have been bruised by buttons.<\/p>\n\n\n\n
Not metaphorically.<\/p>\n\n\n\n
A button.<\/p>\n\n\n\n
A small, innocent-looking rectangle.<\/p>\n\n\n\n
It had rounded corners.<\/p>\n\n\n\n
It was blue.<\/p>\n\n\n\n
It said Submit<\/strong>.<\/p>\n\n\n\n And it ruined my Tuesday.<\/p>\n\n\n\n The trouble began when the designer sent me a Figma file.<\/p>\n\n\n\n \u201cShould be straightforward,\u201d they said.<\/p>\n\n\n\n Whenever someone in software says \u201cshould be straightforward,\u201d prepare for structural damage.<\/p>\n\n\n\n I opened the design.<\/p>\n\n\n\n There it was.<\/p>\n\n\n\n A button.<\/p>\n\n\n\n Width: 142 pixels.<\/p>\n\n\n\n Height: 44 pixels.<\/p>\n\n\n\n Border radius: 8 pixels.<\/p>\n\n\n\n Font weight: 600.<\/p>\n\n\n\n Padding: 12px 20px.<\/p>\n\n\n\n I thought, I can do this.<\/em><\/p>\n\n\n\n This was my first mistake.<\/p>\n\n\n\n I wrote the CSS.<\/p>\n\n\n\n The button looked perfect.<\/p>\n\n\n\n Then I clicked it.<\/p>\n\n\n\n Nothing happened.<\/p>\n\n\n\n I clicked it again.<\/p>\n\n\n\n Still nothing.<\/p>\n\n\n\n I clicked it with increasing emotional intensity, as though the button might respond to disappointment.<\/p>\n\n\n\n Nothing.<\/p>\n\n\n\n Turns out the click handler was attached to a parent element that was being covered by an invisible div.<\/p>\n\n\n\n The invisible div had no business being there.<\/p>\n\n\n\n Nobody knew why it existed.<\/p>\n\n\n\n Nobody dared delete it.<\/p>\n\n\n\n It had been in the codebase since 2019.<\/p>\n\n\n\n A button is never merely a button.<\/p>\n\n\n\n A button has states<\/strong>.<\/p>\n\n\n\n There is:<\/p>\n\n\n\n The designer sends one button.<\/p>\n\n\n\n The developer builds nine.<\/p>\n\n\n\n The product manager asks why the button looks different on mobile.<\/p>\n\n\n\n The developer quietly opens a window and stares outside.<\/p>\n\n\n\n Hover is one of the greatest illusions in computing.<\/p>\n\n\n\n The desktop user hovers over the button.<\/p>\n\n\n\n The button changes color.<\/p>\n\n\n\n Wonderful.<\/p>\n\n\n\n Then someone tests the site on a phone.<\/p>\n\n\n\n \u201cWhy doesn’t the button turn darker when I hover?\u201d<\/p>\n\n\n\n Because, Brenda, there is no hover on your thumb.<\/strong><\/p>\n\n\n\n This is apparently controversial.<\/p>\n\n\n\n Now the developer has to explain that touchscreens do not have a tiny invisible mouse living beneath the glass.<\/p>\n\n\n\n This meeting lasts 47 minutes.<\/p>\n\n\n\n Someone suggests adding a hover animation anyway.<\/p>\n\n\n\n The developer’s soul leaves their body.<\/p>\n\n\n\n Eventually, someone says:<\/p>\n\n\n\n \u201cCan we just make the button 10 pixels wider?\u201d<\/p>\n\n\n\n Sure.<\/p>\n\n\n\n Ten pixels.<\/p>\n\n\n\n No problem.<\/p>\n\n\n\n You change: to: And suddenly the navigation wraps.<\/p>\n\n\n\n The footer moves down.<\/p>\n\n\n\n The card becomes taller.<\/p>\n\n\n\n The modal is now 17 pixels too wide.<\/p>\n\n\n\n The mobile breakpoint activates.<\/p>\n\n\n\n The hamburger menu develops a personality.<\/p>\n\n\n\n You undo the change.<\/p>\n\n\n\n Everything returns to normal.<\/p>\n\n\n\n This is called CSS<\/strong>.<\/p>\n\n\n\n Nobody understands it.<\/p>\n\n\n\n We merely negotiate with it.<\/p>\n\n\n\n One afternoon, I was asked to vertically center the text inside a button.<\/p>\n\n\n\n Simple.<\/p>\n\n\n\n I tried The button got taller.<\/p>\n\n\n\n I tried The text moved approximately three pixels.<\/p>\n\n\n\n I tried Nothing.<\/p>\n\n\n\n I tried The button immediately became perfect.<\/p>\n\n\n\n I stared at the screen.<\/p>\n\n\n\n The screen stared back.<\/p>\n\n\n\n I had discovered the ancient front-end secret:<\/p>\n\n\n\n If you don’t know what you’re doing, use Flexbox.<\/p>\n<\/blockquote>\n\n\n\n It is the duct tape of the web.<\/p>\n\n\n\n Then comes accessibility.<\/p>\n\n\n\n \u201cMake sure the button has a visible focus state.\u201d<\/p>\n\n\n\n Absolutely.<\/p>\n\n\n\n I add one.<\/p>\n\n\n\n The designer sees it.<\/p>\n\n\n\n \u201cWhat is that ugly blue outline?\u201d<\/p>\n\n\n\n \u201cThat is keyboard focus.\u201d<\/p>\n\n\n\n \u201cCan we remove it?\u201d<\/p>\n\n\n\n \u201cNo.\u201d<\/p>\n\n\n\n \u201cCan we make it invisible?\u201d<\/p>\n\n\n\n \u201cThat would defeat the entire purpose.\u201d<\/p>\n\n\n\n There is silence.<\/p>\n\n\n\n The designer looks at me.<\/p>\n\n\n\n I look at the button.<\/p>\n\n\n\n The button looks at both of us.<\/p>\n\n\n\n For once, we agree on something.<\/p>\n\n\n\n The button has chosen violence.<\/p>\n\n\n\n Eventually, everything works.<\/p>\n\n\n\n Chrome: perfect.<\/p>\n\n\n\n Firefox: perfect.<\/p>\n\n\n\n Safari: mostly perfect.<\/p>\n\n\n\n Mobile Safari: the button has moved approximately 600 miles south.<\/p>\n\n\n\n Android Chrome: acceptable.<\/p>\n\n\n\n Old corporate laptop running a browser last updated during the Obama administration: catastrophic.<\/p>\n\n\n\n Someone reports:<\/p>\n\n\n\n \u201cButton broken.\u201d<\/p>\n<\/blockquote>\n\n\n\n I ask:<\/p>\n\n\n\n \u201cWhat browser?\u201d<\/p>\n\n\n\n They reply:<\/p>\n\n\n\n \u201cInternet.\u201d<\/p>\n\n\n\n I close my laptop.<\/p>\n\n\n\n The final test passes.<\/p>\n\n\n\n The button works.<\/p>\n\n\n\n The deployment succeeds.<\/p>\n\n\n\n The website goes live.<\/p>\n\n\n\n I lean back in my chair.<\/p>\n\n\n\n For the first time in eight hours, I feel peace.<\/p>\n\n\n\n Then Slack explodes.<\/p>\n\n\n\n URGENT: BUTTON IS BROKEN IN PRODUCTION.<\/strong><\/p>\n\n\n\n I click the link.<\/p>\n\n\n\n The button is fine.<\/p>\n\n\n\n I refresh.<\/p>\n\n\n\n Fine.<\/p>\n\n\n\n Incognito.<\/p>\n\n\n\n Fine.<\/p>\n\n\n\n Different browser.<\/p>\n\n\n\n Fine.<\/p>\n\n\n\n I ask the person to refresh.<\/p>\n\n\n\n They do.<\/p>\n\n\n\n \u201cStill broken.\u201d<\/p>\n\n\n\n I ask for a screenshot.<\/p>\n\n\n\n They send one.<\/p>\n\n\n\n The button is fine.<\/p>\n\n\n\n I zoom in.<\/p>\n\n\n\n They are clicking the label next to the button.<\/p>\n\n\n\n Not the button.<\/p>\n\n\n\n I explain this gently.<\/p>\n\n\n\n They respond:<\/p>\n\n\n\n \u201cOh.\u201d<\/p>\n<\/blockquote>\n\n\n\n This is why front-end developers age like antique furniture.<\/p>\n\n\n\n After years of front-end development, I have learned an important lesson.<\/p>\n\n\n\n The enemy is not JavaScript.<\/p>\n\n\n\n It is not CSS.<\/p>\n\n\n\n It is not browsers.<\/p>\n\n\n\n It is not even the designer.<\/p>\n\n\n\n The enemy is the humble expectation that something should be easy<\/strong>.<\/p>\n\n\n\n \u201cIt’s just a button.\u201d<\/p>\n\n\n\n No.<\/p>\n\n\n\n It is never just a button.<\/p>\n\n\n\n It is a 14-layer archaeological dig through HTML, CSS, JavaScript, accessibility, responsive design, product requirements, design systems, browser compatibility, analytics, APIs, state management, and one mysterious So if you see a front-end developer staring blankly at their monitor tomorrow, be kind.<\/p>\n\n\n\n Offer them coffee.<\/p>\n\n\n\n Do not ask whether they are almost finished.<\/p>\n\n\n\n And, above all, do not point at a button and say:<\/p>\n\n\n\n \u201cCan we make that slightly bigger?\u201d<\/strong><\/p>\n\n\n\n Because somewhere, deep inside that developer’s nervous system, an old CSS breakpoint is waking up.<\/p>\n\n\n\n And it is looking for revenge.<\/p>\n","protected":false},"excerpt":{"rendered":" There are many dangerous professions in the world. Firefighter. Deep-sea diver. Bull rider. Professional cricket umpire. And then there is the front-end web developer. People assume we sit comfortably at a desk, drinking artisanal coffee while gently arranging rectangles on a screen. This is propaganda. The truth is that front-end development is a high-risk occupation… Read More »Bruised by buttons<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":2,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/posts\/37\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/twobitranch.io\/index.php\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The Button Looked Fine<\/h2>\n\n\n\n
The Button Has States<\/h2>\n\n\n\n
\n
Then Comes the Hover State<\/h2>\n\n\n\n
CSS Enters the Room<\/h2>\n\n\n\n
width: 142px;<\/code><\/p>\n\n\n\nwidth: 152px;<\/code><\/p>\n\n\n\nThe Padding Incident<\/h2>\n\n\n\n
padding<\/code>.<\/p>\n\n\n\nline-height<\/code>.<\/p>\n\n\n\nalign-items: center<\/code>.<\/p>\n\n\n\ndisplay: flex<\/code>.<\/p>\n\n\n\n\n
Accessibility Strikes Back<\/h2>\n\n\n\n
The Button Works on My Machine<\/h2>\n\n\n\n
\n
Production<\/h2>\n\n\n\n
\n
The Real Enemy<\/h2>\n\n\n\n
<div><\/code> that nobody is allowed to remove.<\/p>\n\n\n\n