Итак, 26 часов присутствия бага, расценённого CTO как даунтайм.
Проблема не в том, что я допустил опечатку в коде и тесты не покрывали этот конкретный кейс.
Проблема в том, что система логов не среагировала на события должным образом, а это значит, логов недостаточно.
Следите за своими логами, пацаны. Не полагайтесь только на тесты.
Проблема не в том, что я допустил опечатку в коде и тесты не покрывали этот конкретный кейс.
Проблема в том, что система логов не среагировала на события должным образом, а это значит, логов недостаточно.
Следите за своими логами, пацаны. Не полагайтесь только на тесты.
Большинство CSS-правил я узнал из автоподстановки моих редакторов.
widows вместо width? mso-row-margin-left вместо left? marquee-play-count вместо margin? fit-content для width? Чего? Это шутка такая? Что ты от меня хочешь, тварь?
widows вместо width? mso-row-margin-left вместо left? marquee-play-count вместо margin? fit-content для width? Чего? Это шутка такая? Что ты от меня хочешь, тварь?
Обновить докер в час ночи в субботу, зачем-то работая над важной фичей, было очень умной идеей.
Отгадайте загадку:
Зелёный, красный, жёлтый и голубой тестируют на продакшене. Кто это?
Зелёный, красный, жёлтый и голубой тестируют на продакшене. Кто это?
Google Stackdriver Logging начинает переходить на новый интерфейс. Вообще Google очень долго переводит свои инструменты на свой же дизайн, но это лишь означает, что Material с нами надолго. Но речь не об этом.
В общем, прошлый интерфейс позволял мне фильтровать логи просто введя строку текста, а более сложные запросы строились довольно дебиловатым конструктором.
Теперь же они убрали простую фильтрацию, а конструктор стал гораздо менее дебиловатым, но всё ещё сложным. Я сначала воспринял в штыки.
Но сегодня коллега потратил всё утро на то, чтобы разобраться и помог мне. В общем, мне так зашло, что обратно возвращаться не хочу. Мощный язык запросов с простыми операторами, интуитивное построение сравнений, очень удобно обмениваться фильтрами.
В общем, не бойтесь сложных инструментов. С ними жизнь проще.
В общем, прошлый интерфейс позволял мне фильтровать логи просто введя строку текста, а более сложные запросы строились довольно дебиловатым конструктором.
Теперь же они убрали простую фильтрацию, а конструктор стал гораздо менее дебиловатым, но всё ещё сложным. Я сначала воспринял в штыки.
Но сегодня коллега потратил всё утро на то, чтобы разобраться и помог мне. В общем, мне так зашло, что обратно возвращаться не хочу. Мощный язык запросов с простыми операторами, интуитивное построение сравнений, очень удобно обмениваться фильтрами.
В общем, не бойтесь сложных инструментов. С ними жизнь проще.
Шла вторая неделя карантина.
Начали общаться с дизайнером через правки виджетов в Figma.
Начали общаться с дизайнером через правки виджетов в Figma.
Угадайте, кто за две недели до конца испытательного срока снова роняет продакшен?
По итогу пишем тесты под TestRail. Тестировать это в автоматическом режиме пока, к сожалению, невозможно.
По итогу пишем тесты под TestRail. Тестировать это в автоматическом режиме пока, к сожалению, невозможно.
Наш студент приходящий решил бросить универ и работать на полную ставку.
И вроде бы ничего, но он приходит, куртку рядом бросает на пол, жуёт свой воротник, громко хрустит леденцами и сёрбает чай.
..
Боже храни удалёнку, но в офис же возвращаться придётся
И вроде бы ничего, но он приходит, куртку рядом бросает на пол, жуёт свой воротник, громко хрустит леденцами и сёрбает чай.
..
Боже храни удалёнку, но в офис же возвращаться придётся
Сегодня я узнал два новых слова: суперэллипс (ну ок, это я и раньше знал) и квадруг.
Ага, квадруг. Squircle. Т. е. фигура между квадратом и кругом, но не просто квадрат со скруглёнными углами. Кроме шуток: https://en.wikipedia.org/wiki/Squircle
Так вот, иконки приложений на iOS — квадруги. Сквирклы, если хотите. Хотя очень многие путают их с обычным сопряжением прямой с окружностью (ага, с border-radius).
В общем, от слов к статье: https://medium.com/@nikolskayaolia/an-easy-way-to-implement-smooth-shapes-such-as-superellipse-and-squircle-into-a-user-interface-a5ba4e1139ed
Ага, квадруг. Squircle. Т. е. фигура между квадратом и кругом, но не просто квадрат со скруглёнными углами. Кроме шуток: https://en.wikipedia.org/wiki/Squircle
Так вот, иконки приложений на iOS — квадруги. Сквирклы, если хотите. Хотя очень многие путают их с обычным сопряжением прямой с окружностью (ага, с border-radius).
В общем, от слов к статье: https://medium.com/@nikolskayaolia/an-easy-way-to-implement-smooth-shapes-such-as-superellipse-and-squircle-into-a-user-interface-a5ba4e1139ed
Wikipedia
Squircle
intermediate shape between a square and a circle, similar to a rounded square but without any straight line segments
Примерно каждый день у людей всплывают вопросы вида: “А у input есть псевдоэлементы? А как стилизовать плейсхолдер? А как поменять стили стандартного видеоплеера?”
Ответ на эти вопросы — теневое дерево документа, Shadow DOM.
Что лучше всего умеет браузер? Правильно, оперировать блоками (даже не текстом, но об этом потом). Так зачем придумывать что-то новое, если можно сымитировать нужное поведение старыми добрыми div-ами, а саму реализацию скрыть от конечного пользователя? Это, конечно, очень грубое определение теневого дерева документа, но весьма точно отражающее суть.
Теперь перейдём к делу. В CSS-чате заметили, что Safari для элементов формы с плейсхолдером показывает в инспекторе два вложенных в input (!) div-а. Один это собственно плейсхолдер, а второй — contenteditable, т. е. непосредственно ввод данных. И если щёлкнуть на каждый, можно вполне себе получить нужные селекторы (см. тред: https://twitter.com/zavsievich/status/1250338154835410946?s=21).
Тем временем не все знают как такого же достичь в других браузерах. На самом деле всё просто.
Для Chrome: открываем инспектор, в верхнем правом углу меню (три точки), в нём — Settings -> Elements -> Show user agent shadow DOM.
Для Firefox: идём в about:config и включаем флаг devtools.inspector.showUserAgentShadowRoots
И всё, получаем ровно тот же эффект, теперь стилизация видеоплеера или элементов форм (позволяющих это сделать) не будет проблемой, а статьи перестанут казаться магией.
Шлём спасибо в @css_ru и @nedofront.
Ответ на эти вопросы — теневое дерево документа, Shadow DOM.
Что лучше всего умеет браузер? Правильно, оперировать блоками (даже не текстом, но об этом потом). Так зачем придумывать что-то новое, если можно сымитировать нужное поведение старыми добрыми div-ами, а саму реализацию скрыть от конечного пользователя? Это, конечно, очень грубое определение теневого дерева документа, но весьма точно отражающее суть.
Теперь перейдём к делу. В CSS-чате заметили, что Safari для элементов формы с плейсхолдером показывает в инспекторе два вложенных в input (!) div-а. Один это собственно плейсхолдер, а второй — contenteditable, т. е. непосредственно ввод данных. И если щёлкнуть на каждый, можно вполне себе получить нужные селекторы (см. тред: https://twitter.com/zavsievich/status/1250338154835410946?s=21).
Тем временем не все знают как такого же достичь в других браузерах. На самом деле всё просто.
Для Chrome: открываем инспектор, в верхнем правом углу меню (три точки), в нём — Settings -> Elements -> Show user agent shadow DOM.
Для Firefox: идём в about:config и включаем флаг devtools.inspector.showUserAgentShadowRoots
И всё, получаем ровно тот же эффект, теперь стилизация видеоплеера или элементов форм (позволяющих это сделать) не будет проблемой, а статьи перестанут казаться магией.
Шлём спасибо в @css_ru и @nedofront.
Тем временем я прошёл испытательный срок. Полгода это вам не шутки, трижды поваленный продакшен — тем более.
Принимаю поздравления.
Принимаю поздравления.
#статья дня
#css #flex #facebook
Ahmad Shadeed выложил статью в которой разобрал CSS обновлённого Facebook: https://ishadeed.com/article/new-facebook-css/, есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/496958/
Конечно, некоторая часть выложенного это, скорее, хаки, если даже не издевательство над здравым смыслом. Хорошо видно, что работают разные команды. Впрочем, хорошие дизайн-решения тоже есть.
Но одинг момент конкретно так меня покоробил. Это укладка flexbox-сеток.
Я не знаю по какой причине они это сделали, но они решили классическую проблему space-between на недостаточном числе элементов… добавлением пустых элементов. То есть, фактически, добиванием сетки до кратного числа блоков чтобы избежать широких промежутков.
На самом же деле достаточно было либо блока, либо псевдо-элемента со следующими правилами:
.wrapper::after {
content: ‘’;
flex-grow: 1;
}
Грубо говоря, установить распорку.
Думаю, знать простые решения тоже необходимо. Как и уметь считать 🙂
#css #flex #facebook
Ahmad Shadeed выложил статью в которой разобрал CSS обновлённого Facebook: https://ishadeed.com/article/new-facebook-css/, есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/496958/
Конечно, некоторая часть выложенного это, скорее, хаки, если даже не издевательство над здравым смыслом. Хорошо видно, что работают разные команды. Впрочем, хорошие дизайн-решения тоже есть.
Но одинг момент конкретно так меня покоробил. Это укладка flexbox-сеток.
Я не знаю по какой причине они это сделали, но они решили классическую проблему space-between на недостаточном числе элементов… добавлением пустых элементов. То есть, фактически, добиванием сетки до кратного числа блоков чтобы избежать широких промежутков.
На самом же деле достаточно было либо блока, либо псевдо-элемента со следующими правилами:
.wrapper::after {
content: ‘’;
flex-grow: 1;
}
Грубо говоря, установить распорку.
Думаю, знать простые решения тоже необходимо. Как и уметь считать 🙂
Ishadeed
CSS Findings From The New Facebook Design
#видео дня
#css #html #spec #validation
Вадим Макеев недавно представил новый доклад: “HTML: the good parts” и буквально отобрал у меня половину будущих тем для описания. Но, так или иначе, формат видео заходит не всем, а в CSS-чате опять всплыла одна из типичнейших проблем начинающих верстальщиков под кодовым названием p>ul. Поэтому, самое время положить это видео и сюда, for the future good. Да, долго. Но стоит каждой минуты.
https://www.youtube.com/watch?v=A4tglcel7Ac
#css #html #spec #validation
Вадим Макеев недавно представил новый доклад: “HTML: the good parts” и буквально отобрал у меня половину будущих тем для описания. Но, так или иначе, формат видео заходит не всем, а в CSS-чате опять всплыла одна из типичнейших проблем начинающих верстальщиков под кодовым названием p>ul. Поэтому, самое время положить это видео и сюда, for the future good. Да, долго. Но стоит каждой минуты.
https://www.youtube.com/watch?v=A4tglcel7Ac
YouTube
003. HTML: The Good Parts - Вадим Макеев
#font #bug
Недавно ко мне постучался косматый геолог и глядя на Chrome 81 в macOS X он усмехнулся мне.
Он рассказал, что то font-weight перестал работать на заголовках и заказчик очень недоволен, но, например, на моей машине в Chrome 80 это не повторилось.
Причина же в следующем: перед выпуском Chrome 81 обнаружился баг (https://bugs.chromium.org/p/chromium/issues/detail?id=1057654), а команда Chrome посчитала его не блокирующим выпуск.
Суть же бага в том, что свойство font-weight перестало применяться к шрифтам
Так или иначе, проблему скоро решат, а вам пока стоит удалить эти шрифты из указания семейства в стилях.
Недавно ко мне постучался косматый геолог и глядя на Chrome 81 в macOS X он усмехнулся мне.
Он рассказал, что то font-weight перестал работать на заголовках и заказчик очень недоволен, но, например, на моей машине в Chrome 80 это не повторилось.
Причина же в следующем: перед выпуском Chrome 81 обнаружился баг (https://bugs.chromium.org/p/chromium/issues/detail?id=1057654), а команда Chrome посчитала его не блокирующим выпуск.
Суть же бага в том, что свойство font-weight перестало применяться к шрифтам
system-ui и BlinkMacSystemFont кеглем больше 16px. Такой себе незначительный косяк, портящий буквально все заголовки.Так или иначе, проблему скоро решат, а вам пока стоит удалить эти шрифты из указания семейства в стилях.
Несколько месяцев назад ехал в поезде “Ласточка” и подключился к РЖД Wi-Fi. У них был простая, но милая анимация загрузки страниц.
Спустя некоторое время вспомнил о ней и решил повторить, по-моему, вышло неплохо. Не так часто можно повторить весь школьный курс тригонометрии в одном лишь загрузчике.
https://codepen.io/alinaki/pen/GbxrwO
Спустя некоторое время вспомнил о ней и решил повторить, по-моему, вышло неплохо. Не так часто можно повторить весь школьный курс тригонометрии в одном лишь загрузчике.
https://codepen.io/alinaki/pen/GbxrwO
#инструмент дня
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
Пока вы спали, в #IE11 на основе проприетарного свойства runtimeStyle научились практически полноценно полифиллить пользовательские свойства:
https://twitter.com/jon_neal/status/1263071983811641345
А самое главное, что Джонатан Нил — заметный участник PostCSS-сообщества (Jonathan Neal, @jon_neal в Twitter) и, возможно, это всё будет реализовано в связке с PostCSS.
Пока же лучшее, что мы имеем, это :
https://github.com/nuxodin/ie11CustomProperties
Тоже весьма хорошее решение.
https://twitter.com/jon_neal/status/1263071983811641345
А самое главное, что Джонатан Нил — заметный участник PostCSS-сообщества (Jonathan Neal, @jon_neal в Twitter) и, возможно, это всё будет реализовано в связке с PostCSS.
Пока же лучшее, что мы имеем, это :
https://github.com/nuxodin/ie11CustomProperties
Тоже весьма хорошее решение.
Twitter
Jonathan Neal
For CSS & browser nerds — this is a real screenshot of IE11 using Custom Properties. Notice how there are no extra class names or style attributes, and how these styles are actually coming from a file. Now imagine what is possible in modern browsers with…