#фишка дня

Правило position: sticky в своё время было одной из самых желанных в CSS вещей, ведь что может быть более декларативно чем “закрепи элемент вот тут когда я доскроллил вот сюда”?

А вот много лет приходилось писать JS для этой цели. Sticky даже становился частью фреймворков.

Но что делать, если элемент, который вам нужно закрепить, хочется видеть даже тогда, когда родитель выехал за пределы области видимости? Как правило, стики уезжает вместе с ним.

Ответ прост! Поставить «прилипчивый» элемент последним, а родителю задать sticky на высоту контента перед ним. Не элементу!

Вуаля: https://codepen.io/alinaki/pen/rNdYajy

Дым и зеркала :)

#css #sticky

#фишка дня

Для тех, кому был не очень нагляден пример из поста выше, вот новый — от одного из самых активных подписчиков:

https://codepen.io/serg-by/pen/MWVOeBg

Прикрепляем хлебные крошки наверху.

P. S. Господа сомневающиеся, сделайте это на вашем любимом position:fixed и предоставьте :)

#заметка дня

Только что релизнули обновление продукта, которое шло больше 8 месяцев. Чисто технически это примерно на полгода больше, чем стоило бы.

Поддерживать и чинить баги в легаси-коде — очень сложно. Но знаете что сложнее? Писать новое поверх или рядом.

Легаси код — он работает. Он выверен годами. В нём если и есть баги — они точно не про бизнес-логику и скорее всего зависят от внешних условий или порядка операций.

А новый код — он в лучшем случае бездна. Ему ещё только предстоит доказать свою работоспособность. Да и гарантий, что вы перенесли всю бизнес-логику как надо, нет.

Так что же надо делать?

Тесты, господа. Тесты — они гораздо больше помогают в рефакторинге, чем можно подумать.

И покрывать тестами нужно в первую очередь именно старый код, если уж так охота вообще начать это делать (или потребовались новые фишки).

Протестированный легаси-код перестаёт быть чёрным ящиком. Можно начинать заменять его части или всё целиком на новые, можно пилить новые фичи и костыли не боясь всё неожиданно сломать.

Возвращаясь к нашему релизу — в какой-то момент мы стали одновременно с написанием новых фишек чинить поведение основной ветки и утонули в синхронизации.

Поэтому задачи такого плана надо локализовать как можно точнее. И не распыляться.

Ну а если ваш легаси «чёрный ящик» как-то влияет на своё окружение — вы жёстко попали :)

#legacy #tests

#til дня

Реально, самый короткий TIL (Today I Learn) на свете.

Итак, хоть буква μ (мю) и означает звук m, µs (микросекунды) обозначаются в ASCII как us, потому что ms уже занято миллисекундами.

Или потому что u похожа на μ. Надо уточнить 😅

Вот так вот, котаны.

#codepen дня

Звание воскресного кодпена дня забирает… пустой кодпен. С его прекрасными цитатами.

Это максимально неожиданное предложение, но вы попробуйте и поверстайте на float. Назад возвращаться будет очень хорошо :)

Вообще, цитаты на CodePen появились достаточно давно и иногда бывает действительно забавно.

#заметка дня

Самая нервная вещь на свете — это отпуск.

Точнее, подготовка к нему.

Раньше я в отпуске раз в день на час-полтора открывал ноутбук, разгребал потоки задач, правил что-то мелкое ну и дальше по своим делам. Правда, не обходилось без форс-мажоров. Даже увольнял человека как-то раз…

Но это в любом случае так себе стыкуется с семьёй. Всем от тебя всегда что-то надо, да и отдыха не получается.

Но если не открывать ноутбук в отпуске, это ж сколько нервов надо иметь, чтобы не интересоваться прогрессом проектов и состоянием релизов… Не знаю как вам, а мне так жуткий стресс.

Выход? Выход есть. Удалять Slack с телефона и ноутбука, запрещать уведомления календарю и готовиться к отпуску полноценно.

Выпустить релизы, дописать задачи команде, заполнить вики-справочники, почистить туду-листы.

Вот я вчера вечером, уже будучи не дома, все это делал, заодно часы списал — отпуск же с сегодняшнего дня 🤫

Так вот. Хорошая подготовка — залог спокойствия.

А захочется покодить — есть у меня задачка, необходимость которой продактам очень сложно объяснить. Просто упражнение для мозга.

Да и архитектуру можно на листочке порисовать.

#vacation

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#игра дня

Моя любимая рубрика. Сегодня со вкусом ЭЛТ-мониторов и запахом пыли с кулеров.

Симулятор тимлида! Прям как симулятор хакера в старые добрые :)

Постарайся не выгореть и успеть к дедлайну: https://teamlead.wrike.tech/

Я проиграл.

#game #oldie

#фишка дня

Вышел Chrome 104! Что это значит?

Ну, можно почитать в релиз-нотах, конечно (как правильно перевести-то?), но есть там одна совсем забавная вещь. И она на КДПВ.

Скоро не нужно будет следить за порядком трансформаций в анимациях! Очень и очень классно: https://drafts.csswg.org/css-transforms-2/#individual-transforms

Найду PostCSS-плагин для более полной поддержки, закину позже.

#css #transform

#фишка дня

Продолжение.

Я не нашёл postcss-плагина, но, оказывается, все современные браузеры и так это поддерживают. Так что если кому прям очень надо — можно и написать :)

А вот сразу и статья на web.dev об этом: https://web.dev/css-individual-transform-properties/

Там, кстати, тоже в качестве самой главной причины ввода разделения называется анимация.

#новость дня

И без того довольно мерзкая (мое личное мнение, основанное на доходящей информации) компания GitLab решила уничтожить на своей платформе все пет-проекты, конфиги и прочий редко обновляемый опенсорс.

Теперь на бесплатных аккаунтах будут удаляться те проекты, в которые не было коммитов за последние 12 месяцев: https://www.theregister.com/2022/08/04/gitlab_data_retention_policy/

Возможно, как корпоративное решение они все ещё хороши, но проекты свои придётся дублировать в другом месте.

Если они у вас имеются, конечно :)

#тред дня

Всё уже украдено сказано до нас!

Те, кто подписан давно, в курсе, что я люблю сохранять в канал интересные треды из твиттера. Во-первых, они могут быть удалены, а во-вторых — ну не все пользуются твиттером и любят его формат.

Сегодняшняя тема — ошибки джунов при поиске работы. Тред от Александра Белоусова, автора русского клона Wordle.

Сюда я сохраняю ссылки на Twitter и Thread Reader, а также выжимку из самого треда, для истории. Поехали.

1. Из резюме джуна непонятно, насколько ему\ей интересно программирование
2. В портфолио только учебные проекты.
3. В портфолио много проектов, но все они примитивные.
4. Проекты из портфолио нельзя посмотреть онлайн.
5. Нет примеров вашей работы с чужим кодом.
6. Не выделять важное в описании проекта на гитхабе.
7. Не указывать информацию о предыдущих местах работы
8. Не писать сопроводительное
9. Отправлять отклики когда максимально готов.

Обязательно пройдите и прочитайте тред в любом из удобных вам форматов. Если желаете, давайте в комментариях обсудим.

Ну и удачи, котаны.

#job #junior #thread

#ссылка дня 18+

Бля, Я случайно закоммитил что-то в мастер, хотя это должно быть в новой ветке!

Знакомо? Тогда тебе сюда: https://ohshitgit.com/ru

Методичка по истерике на множестве языков.

Нужен вариант с чуть меньшим количеством истерики и возрастным ограничением для детей? Окей, тоже имеется: https://dangitgit.com/ru

Не истерите, котаны :)

#git

#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html

#такое дня

Вы смотрите исходные коды npm-пакетов перед использованием? Нет? А почему?

Вот функция отображения курса валют тупо гуглит ответ и парсит страницу. По магическому классу.

Вот: https://www.npmjs.com/package/currency-converter-lt

А ещё в репозитории имеется PR для кеширования, чтобы не попасть на отлуп по числу запросов…

О мир, ты… сами продолжите фразу.

#заметка дня

Разработка продукта с Google AppsScript в основе означает, что вместо нормального API у вас будет вызов функций через объект google.script.run.

Я завернул это в Promise, но вот проблема: хочется же разрабатывать локально с комфортом, накидать JSON с тестовыми данными от сервера, замокать глобальные переменные и стор (приложение гибридное). Конечно, удобнее всего просто эти данные импортировать.

Но очень не хотелось бы, чтобы замоканные данные попали в итоговую сборку. Значит, надо модули эти на лету заменять.

Вторая похожая проблема — это A/B-тесты: одним пользователям показываем одно, другим — другое. А собирать хотим из одних исходников.

И вот эту проблему решает модуль webpack с простым названием NormalModuleReplacementPlugin.

Документация модуля максимально проста, но я бы хотел обратить внимание вот на такой момент: не стоит привязываться в названиях таких модулей к среде выполнения (development/production). Вы можете очень легко случайно заменить вообще все загружаемые модули, где есть слово development, например.

Также обратите внимание на путь до модуля. В моём приложении одни и те же компоненты могли импортироваться из разных его частей и собираться отдельно, что делало почти невозможным указывание от корня. Эту проблему придётся решать отдельно на уровне разрешения путей.

В итоге, я остановился на таком подключении и пока доволен:


new webpack.NormalModuleReplacementPlugin(
/(window|mocks)\.dev/,
function (resource) {
resource.request = resource.request.replace(
/dev/,
'production'
);
}
),


Подменяю глобальный стор и моки на их пустые альтернативы и всё прекрасно работает.

Быстрой сборки вам! Кстати, об этом: хочу достичь того же на Parcel 2 или Vite. Знаете, как? Делитесь!

#webpack #build #module

#инструмент дня

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.

Да, огромное число людей пользуется веб-почтой, но не менее большое — использует различные клиенты, от мобильных до корпоративных. Да и веб-почта зачастую урезает возможности в вёрстке.

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature

#codepen дня

Что-то захотелось мне вам на ночь глядя дать нашпигованной няшноты.

Итак, собственно, милая (это определение автора, не надо на меня так смотреть!) солнечная система:

Demo: https://codepen.io/manz/pen/rNpeEoz
Repo: https://github.com/ManzDev/twitch-solar-system/
Demo GitHub: https://manzdev.github.io/twitch-solar-system/
Twitch Making-of: https://www.twitch.tv/videos/1430488082
Twitter: https://twitter.com/Manz

Что же в ней крутого?

Ну, это демо — на веб-компонентах. Их там семь штук плюс одно изображение (звёздное небо).

Для обучения и понимания, как работают веб-компоненты — залетает сходу.

#css #webcomponents #js