Час, коли я запустив «маленьке виправлення» і випадково відключив інтернет (або так подумав мій бос)

текст перекладу
Офіс пахне залежалою кавою та жалем. Я за 10 хвилин від того, щоб завершити роботу на вихідні, коли мій менеджер пише мені в Slack DMs: “Привіт, ти можеш… виправити ось цю одну маленьку проблему з переповненням CSS перед тим, як підеш?”

Знамениті. Останні. Слова.

Брехня “Це ж просто CSS”, яку ми всі собі розповідаємо

Ти знаєш цей сценарій. Ти вже 1,200 разів казав собі “Це ж просто CSS!” і 1,199 разів ти помилявся.

Цей раз не був винятком.

Помилка? Кнопка на нашій лендінговій сторінці робила те саме, що й завжди — чіплялася за край екрана на мобільному, наче боялася серйозних стосунків. “П’ять хвилин,” думаю я. “Трошки підправлю flexbox, запушу на продакшн і все.”

Спойлер: Flexbox — це самосвідоме істота, яке має особисту неприязнь до людства.

Ланцюг сорому

Ось як це сталося:

1. Я додав overflow-x: hidden до контейнера.
2. Перевірив локально. Все виглядало нормально.
3. Запустив на продакшн.
4. Закрив ноутбук з впевненістю героя Marvel після сцени після титрів.

І тут мій телефон вибухає повідомленнями.

Повідомлення в Slack у хронологічному порядку:

• “Еее… домашня сторінка… лежить на боці?”
• “Нас хакнули??”
• “МОЙ ЕКРАН, ЯК КАРТИНА ПІКАССО.”
• “ДЗВОНИТЕ В CTO. НІ, ЗАЗВОНИТЕ В НАЦІОНАЛЬНУ ГВАРДІЮ.”

Виявилося, що це невинне overflow-x: hidden спричинило CSS-апокаліпсис. Увесь наш макет на мобільному повернувся на 90 градусів. Користувачі почали постити скріншоти: “Це мистецтво?” і “Як тепер прокручувати?”

Я побіг назад до робочого столу, моя гідність відставала, як здутий кулька.

Дебагінг, поки світ горить

Колись пробував виправляти баг, коли твоя команда із запалом дивиться на твій екран через Zoom? Це як робити операцію на серці з ножем для масла. І це ще й перед живою аудиторією.

CTO: “Коли буде готово?”
Я, в поту: “Еее… оптимізую… viewport… синергії?”

Нарешті, після 47 комітів, викликаних панікою, я знайшов проблему: один відсутній viewport мета-тег у React компоненті. CSS буквально нахилив Землю на її осі.

Я запушив виправлення. Команда полегшено зітхнула. Хтось замовив піцу.

Наслідки (або мій новий заголовок на LinkedIn)

• CEO назвав це “чудовим уроком стійкості” (тобто “Більше ніколи”).
• Маркетинг перетворив збій на мем в Twitter: “Наш додаток такий інноваційний, що ламає 4-ту вимірність!”
• Мій стіл тепер прикрашає рамка зі скріншотом перевернутої домашньої сторінки. Підпис: “Досконалість — це перебільшення.”

Але справжній шок? Той overflow-x: hidden взагалі не був потрібен. Я його видалив. Кнопка виправилася сама.

Чому ця історія не про CSS

Ось у чому справа: ми всі розгортали "швидке виправлення", яке перетворилося на цифровий смітник. Можливо, у тебе був нескінченний цикл, що зламав сервер. Або друкарська помилка, яка перетворила твою сторінку логіну в 🍕 емодзі фестиваль.

Технології — це не про бездоганність. Це про:

1. Сміятися, коли твій код йде врозріз з планом.
2. Вчитися, що CTRL + Z — це найближче, що є до подорожей у часі.
3. Пам’ятати, що кожен має свою історію про "перевернуту домашню сторінку" — вони просто не настільки сміливі, щоб визнати це.

Тож наступного разу, коли твій бос скаже “Це ж просто CSS”, усміхнись, кивни й тихо онови своє резюме.

Мораль історії?
Єдине, що більш непередбачуване за код, — це твоя здатність переконати людей, що це не твоя вина.

Перекладено з: The Time I Deployed a ‘Small Fix’ and Accidentally Unplugged the Internet (Or So My Boss Thought)