#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

#статья дня

Что я знаю о скролле? Я устраиваю кулачные бои.

Всего неделю назад я устраивал кулачные бои
и радовался жизни, и вдруг...

Что я знаю о скролле? Вроде бы его в браузеры привозят, так?

Если хотите знать о скролле больше — вышла очумительная статья автора, скрывающегося за псевдонимом Mayank (простите, я чот реального имени не нашёл): https://blog.mayank.co/better-scrolling-through-modern-css

1. Стилизация скроллбаров
2. Подводные камни на разных ОС
3. Предотвращение сдвига при рендере
4. Нужно чтобы контент при скролле не наезжал на фиксированную шапку? И такое есть! Обзор новых фич CSS.

Замечательная статья с кучей примеров.

#css #scroll

#ссылка дня

Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

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

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y

#статья дня

:has заезжает в Chrome 105!

Я пытался выкатить серию постов про этот селектор, но с одной только Safari это всё было довольно скучно.

И вот, наконец, Chrome!

По этому поводу в блоге разработчиков выложили целую статью на тему с подробными примерами: https://developer.chrome.com/blog/has-m105/

Естественно, открывать надо или в Safari, или в Chrome Canary 🙄

Но это стоит того :)

#has

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

Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.

Можно купить старый мак, можно завести виртуальную машину, обмазавшись ютубом и tonymacx86.

А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX

Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.

Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)

#docker #macos