#новость дня

И без того довольно мерзкая (мое личное мнение, основанное на доходящей информации) компания 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

#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox

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

Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.

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

И такой есть!

https://patternico.com/

Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.

В общем, имеет право на жизнь.

#pattern #background #generator

#заметка дня

Не давече чем вчера ко мне прибежал начальник нашего энтерпрайза с мольбой о помощи. «Все пропало», — говорит, — «Значения текстовых полей в форме настроек дублировались, это починили, но теперь не все данные сохраняются. Выручай!».

А все потому что коллега перед тем, как в отпуск уйти, сделал рефакторинг ключей (key) в выводе массивов в React. И почти всё протестировал.

Казалось бы, ключи. Но даже вроде бы опытные разработчики ошибаются и делают key недостаточно уникальными, что может привести, и приводит, к последствиям, описанным выше.

Форму я, конечно, починил, косяк был буквально в паре строк. Но придётся коллеге по возвращению скинуть тред небезызвестного Дэна Абрамова: https://mobile.twitter.com/dan_abramov/status/1415279090446204929?s=20

Буквально на пальцах и кружках 🔴🔵🟡 описано, в чем же вообще проблема и зачем React’у так нужны ключи в выводе массивов.

Есть хорошая статья на хабре на эту тему, а также перевод данного треда на русский на гитхабе (картинки сохранены 😉).

#react #key

#фишка дня

Чота меня подзадолбало писать try-catch на каждый async-await вызов.

С “cырыми“ промисами как-то… чище на уровне синтаксиса: then-catch и всё.

Но вот тут пригодились тестовые задания на собеседованиях. У одного инженера я увидел подход, что на иллюстрации. Очень похоже на то, как возвращаются ошибки в Go.

В общем, я почитал об использовании такого подхода и остался доволен.

P. S. конечно, есть и другие примеры: https://gist.github.com/fnky/0a6cd5f39a7ad0ace79a7a4f5c999691

#js #async #await #promise #error #typescript

#такое дня

О господи, он ещё выпускается! Я думал, давно уже полностью в цифру ушли. Вот так встреча.

P. S. Не купил, конечно.
P. P. S. Это журнал о Линуксе и СПО. Мало ли.

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

#git #remote