Как побороть сдвиг сайта из-за появление скрола

Недавно увидел потрясающий CSS хак как компенсировать сдвиг сайта, когда у вас появляется скролл на странице. Вся верстка будто прыгает, появлется так называемый CLS – content layout shift. Нехорошо. Глаз раздражает и приводит к мискликам (смотри комментарии к посту).

А хак до жути простой:

padding-left: calc(100vw - 100%); // 15px 

100vw – ширина всей страницы с учетом скролбара
100% – ширина страницы без учета скролбара

Вычитаем и получаем заветные 15px, когда скролл есть и 0px, когда его нет. А дальше добавляем куда вам нужно – будь это padding, margin, top, left или еще чего. Просто и гениально.

А пост пишу, потому что удалось сразу проверить в проде как оно работает. Весь дифф до и после компенсации видно на видео.

Не забывайте про мелочи (а тем более про CLS) и тогда сайтом будет действительно приятно пользоваться.

@dlents

Привет!

Вчера был мой последний рабочий день в компании 😢
В Артезио проработал почти 7 лет, а на проекте Партнёрского кабинета почти 6. Есть повод немного порефлексировать (интересно, скорее всего, не будет, но зафиксировать нужно).

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

В Артезио я попал на проект Партнёрского кабинета Альфа-Банка, который нужно было писать с нуля. Для меня это был интересный опыт, т к никогда еще я не был на начальных этапах проектов. Прикольно ощущать, что клиенты начинают пользоваться абсолютно новым продуктом, и ты приложил руку к тому, с чем они взаимодействуют. За время проекта у нас были ежегодные аттестации и сборы фидбека, на которых мне прилетали нормальные оценки (что сначала было странно для меня). Так я почувствовал немного больше уверенности в себе.

Здесь, конечно, скрывалась одна из проблем - я начал клепать код без критического взгляда на него. Не то чтобы я не думал над оптимизацией функций, но вот гибкости и чистоты не хватало. Был некий флоу по разработке фич в основе которого была react-redux архитектура. Есть компоненты, они вызывают экшены, в которых выполняются запросы к мидлу, результат кладется в стор и все работает. Бизнес логика размазана по всему приложению…

Вопросы архитектуры меня волновали и тогда, но ответов на них особо не находил (про выделение бизнес логики, clean и feature-sliced я узнал года 3-4 назад). Да и думать честно говоря было некогда - нужно было быстро наращивать функционал приложения. Работали мы без особого планирования и спринтов, просто брали приоритетные задачи в разработку и старались сделать быстро. Но, замечу, без овертаймов!

Здесь крылась вторая проблема - нет времени на тесты. При оценке задач я всегда ориентировался только на этап разработки (+ багфикс) и забывал про тесты. Точнее я все думал, что надо когда нибудь попросить времени на них, но времени не было. Только потом я понял/узнал что продать бизнесу тесты невозможно. Их нужно изначально закладывать в оценку.

Третья проблема близка ко второй - отсутствие документации. По тестам можно понять как должен работать тот или иной процесс. Но можно вести документацию в той же конфлюенс. Мы этого не делали. На тот момент, как и что должно работать знал наш ПО + тестировщик, ну и разрабы, которые имплементили фичи. В какой то момент ПО ушел и частенько у нас начали сыпаться вопросы "А это всегда так работало или это баг?", ответить на которые мы могли только покопавшись в коде.

В какой-то момент обороты по реализации фич поутихли и проблемы кодовой базы уже не списать на то, что тебя торопили. По мере возможности я старался привести очевидные WTF части к нормальному виду. Особенно после того, как подумал, что если буду уходить с проекта, передавать его в таком виде оч стыдно. Это прям стало реальным мотиватором к тому, чтобы писать лучше. Да и вообще пришло осознание (хотя и поздно), что если ты один фронт, то этот репозиторий чисто твой проект и ты за все в ответе. За то, что у проекта нет нормального Read.me, за то что там до сих пор 4 версия react-router, древний redux без хуков и 4 вебпак.

▫️Многое удалось поправить, а то что не удалось - вроде работает и жалоб нет (надеюсь, кек)
▫️Начал вести документацию по разработке на конфлюенс.
▫️Попробовал подход чистой архитектуры для фронтенда (понял что на самом деле тяжело и долго и не всегда нужно), решил что выделение моделей, функций бизнес логики, прикладного слоя и адаптеров в принципе достаточно.
▫️Перестал забивать на линтер

А вообще, на проекте была классная отзывчивая команда и хорошо отлаженные процессы. За все время не овертаймили ни разу. Компетенции внутри команды хватало, чтобы решать почти все проблемы проекта. В банке за это время уже появились свои стандарты разработки по фронту, которые помогают не свернуть на скользкую дорожку "сделать побыстрее и в прод".

Короче, классный опыт. Что-то из него вынес. Посмотрим, что будет дальше 😅

Autodesk Fusion 360 for personal use

Сохраню ссылку на бесплатную версию Fusion 360 для личного использования. При поиске на сайте эту версию что-то особо не предлагают, а из гугла - доступна по первой ссылке. Работает, правда, только при регистрации через vpn.

https://www.autodesk.com/products/fusion-360/personal

Привет!

Давно слышал, что на айфонах с 13 версии появился лидар, с помощью которого можно сканить 3D объекты. Находил инфу, что точность у него 0.3 мм, так что многообещающе. Все хотел попробовать.

Появилась возможность поиграть с ним, и в результате немного разочарован. Чтобы получить нормальную модельку, видимо, нужно нормально поплясать (либо просто руки попрямее)

Снимал на scaniverse.

Кстати, если у кого нормально получалось, расскажите че как)

Всем привет.

На днях столкнулся с задачей, что при отправке формы с типом multipart/form-data нужно было добавить отдельные заголовки для каждого файла из формы. Задача немного нестандартная и как средствами клиентского JS ее решить не сразу понятно.
В rtk-query и axios такой конфигурации не нашел, как и в клиентском FormData. В интернете гуглится мало инфы и часто встречается решение с использованием пакета form-data (но он для node).

Глядя в Network, видно, что браузер сам добавляет Content-Disposition и Content-Type. В спецификации же к http написано, что можно добавлять отдельные заголовки для полей.

В итоге выход один - генерить руками тело запроса и преобразовывать его в Blob.
Генерим заголовки как текст, добавляем 2 пустые сроки, преобразуем в blob и добавляем в массив. Затем преобразуем файл в blob и добавляем в массив. И так со всеми файлами. Не забываем разделить поля при помощь boundery типа ----WebKitFormBoundary{random_string}

Из всех блобов делаем один общий

new Blob(blobs, {
    type: `multipart/form-data; boundary=${boundary}`,
  });

И отправляем нахуй
Спасибо чатгпт за алгоритм (я бы охерел это руками писать).

Chrome кстати говорит, что это пустая FormData, но бекенд успешно сохраняет файлы из запроса.

Подкинули воркераунд еще https://huecker.io/

Когда готовишься к собеседованию и приготовил блокнот и ручку. Ну и запасную ручку, ну и ещё парочку.

Ваш вариант подписи жду в комментах)

Откопал такой древний ПК у которого USB только на плате расширения. В принципе как на современных макбуках. Просто переходник с 5din на USB нужен.

Когда поводил во рту iphone 15 (нет).
Вообще оценил какая кайфовая детализация у ортодонтических сканеров. Ценник у них, думаю, соответствующий.

eto ya трачу 3 часа на то, что можно купить за 300 рублей.

eto ya перехожу на новый уровень и экономлю до 800 рублей (сомнительно, но окей)

Всем привет! Ищу знатоков питона чтобы решить головоломку (которую я не смог решить с чатгпт)

Есть 2 модуля: alarm_config (отвечает за чтение конфига из файла) и alarm_manager (получает настройки из alarm_config и заведует алармами). Хочу при обновлении настроек в файле, обновлять их и менеджере. НО! Когда насильно вызывают реинициализацию менеджера, новые настройки вижу, а при проверке аларма (который происходит в бесконечном цикле основного модуля) — нет, там старые значения.

#alarm_config.py
class AlarmConfig:
    def __init__(self, file_name=os.path.join(os.path.dirname(__file__), os.pardir, 'alarms.cfg')):
        self._conf = self._load_alarms(file_name)

    def subsсribe(self, cb):
        self.cb = cb

    @property
    def alarms(self):
        alarms = list(self._conf.items('alarms'))
        ........
        return alarms_list

    def update:
        self.cb() #вызываю реинициализацию менеджера

alarmConfig = AlarmConfig()

#alarm_manager.py

class AlarmManager:
    def __init__(self):
        self.alarms = alarm_config.alarmConfig.alarms
        alarm_config.alarmConfig.subsсribe(self.reinit)
        self.isAlarm = False
    
    def reinit(self):
        self.alarms = alarm_config.alarmConfig.alarms
        # вижу новые значения   

    .......
    
    def checkAlarms(self, prop, data, callback):
      self.alarms = alarm_config.alarmConfig.alarms
      # вижу старые значения все равно


alarmManager = AlarmManager()

# main.py
while True:
            try: 
                alarmManager.checkAlarms(item, data, alarm_callback)

Я сам не местный, в питоне не особо шарю(
Предполагаю, что тут какое то ПИТОНОВСКОЕ замыкание (если такие есть). В общем, буду рад любой подсказке 😊

Привет.

Чуть чуть погундел о том, что я не умею нормально обновлять сертификаты letsencypt и делаю все через жопу)

Может кому полезно будет.

Ну чё, ребят, расскажите, чё используете чтоб Ютуб на смарт тв работал?

Кто нибудь знает, можно ли на роутере сделать VPN с openVPN или openConnect?

Варианты с просмотром VKвидео не предлагать 😄

Команда телеги умеет в юмор, с учётом последних новостей про Пашу)

Я: год примеряюсь к тому чтобы купить регулируемый по высоте стол, думаю надо оно мне или нет, спрашиваю отзывы у коллег, смотрю варианты на озоне/авито, читаю отзывы, наконец покупаю.
Тем временем комплектация стола 🥲

eto ya оправдываю аватарку канала и начинаю день с перепайки вздутых конденсаторов на мониторе view sonic (который жесть как геморно разбирается).
А с чего у вас начинается неделя?)