Будни разработчика

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

#video дня Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были. И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions. Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo Документация: https://developer.chrome.com/docs/web-platform/view-transitions Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary) Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего. #css #view #transition

#баг дня Один браузер для всех это же так прекрасно, не правда ли? И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики Google Chrome отказываются решать годами. Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451 TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах. К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂 Зачем это было сделано? Ну им нужно было продвигать свои фичи для логина, управления паролями, адресной книги. Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete. Дискуссия ещё и перегибает палку там и очень часто. Потрясающее чтение, рекомендую. #chrome #google #evil

Хочешь начать свой путь в хакатонах?! Хакатоны.рус запускает ЛЕТС ХАК — первый в России образовательный интенсив и хакатон для начинающих хакатонщиков! Регистрация и подробная информация: https://www.хакатоны.рус/letshack Интесив рассчитан на раскрытие тем об устройстве хакатонов, о том как правильно подходить к решениям задач, организовывать работу, а также, секретам успеха на подобных соревнованиях. ЛЕТС ХАК пройдет в два этапа: Теоретическую часть — образовательный интенсив — серия онлайн уроков от IT-специалистов, организаторов хакатонов, участников и победителей, которые расскажут о всех тонкостях участия и рецептах успеха в IT-соревнованиях Практическая часть — продуктовый хакатон — вы сможете отточить полученные знания и побороться за призовой фонд. Формат мероприятия: онлайн. Что дает участие? Слушатели образовательного интенсива получат знания об устройстве всех видов IT-соревнованиях. Также, участники, прошедшие курс получат сертификаты. Участники хакатона получат денежные призы и обратную связь от экспертов. Таймлайн: 18-23 мая — образовательный интенсив. Подробная информация: https://www.хакатоны.рус/letshackintensive 24-27 мая — продуктовый хакатон. Подробная информация: https://www.хакатоны.рус/letshackhack Узнай как побеждать на хакатонах, знакомься, объединяйся в команды и получи опыт участия в хакатоне! Успей зарегистрироваться до 23 мая 2024 года: https://www.хакатоны.рус/letshack Проект реализуется при поддержке Росмолодежь.Гранты #хакатон #hackathon #хакатонырус #hackathonsrus #Росмолодежь #РосмолодежьГранты

#игра дня Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах? Вы по адресу! Интерактивное руководство: https://bezier.method.ac/ Я, правда, так ничего и не понял. Ничего не получилось. 🙁 #vector #bezier #tool #learn #бородач

#фишка дня Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль. Типа такого: https://codepen.io/alinaki/pen/abXpvyQ Да, пример очень простой, но даже это на SVG бывает проблемно санимировать. Хотя, казалось бы, для этого и предназначено. А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько. Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты. Второй, интереснее, от Джея: указать следующие правила в CSS:

transform-box: fill-box;
transform-origin: 50% 50%;

Правило transform-box исправит положение координатной сетки, от которой мы уже сменим дефолтную точку отсчёта для преобразований — transform-origin. По-умолчанию, кстати, transform-box установлен как view-box. То есть, в нашем примере, заполняет лишь 24 пикселя по каждой стороне 🤡 А вот и, собственно, пример: https://codepen.io/alinaki/pen/YzBNyEz Не бойтесь анимировать SVG, котаны. Просто не полагайтесь на дефолт. #css #transition #svg #бородач

#молния дня Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler Исходники: https://github.com/facebook/react/tree/main/compiler

Информационные технологии развиваются стремительно, ускоряя темп жизни и внося кардинальные изменения. 📎 Как не отстать от меняющегося мира? 📎 Как быть в курсе новинок? 📎 Как предугадать будущее технологий? Вам поможет канал IT news 🎯 Только актуальная и правдивая информация 🎯 Непрерывное обновление ленты новостей 🎯 Полезные ссылки на информативные источники Подписывайтесь!

#инструмент дня А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования? Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде. Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks Естественно, все эти хуки умеют определять, запущены они в SSR или нет. Куча демок в наличии. К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: https://t.me/htmlshit/2347 #react #hooks

Привет! Если ты амбициозный frontend developer, который неравнодушен к анимациям и эстетическому дизайну, умеешь в React — эта вакансия для тебя! Нам нужен специалист, который будет работать над интересными креативными проектами, расти и развиваться, помогать всей команде добиваться новых выдающихся результатов! Присылай резюме и примеры работ (желательно сайты с анимациями) на почту [email protected] и получи возможность попасть к нам в команду! Предполагаемый и обсуждаемый разбег по з/п: 80-90К. Полный текст вакансии тут: http://chipsa.ru/career/frontend