• Какие проблем решает DI во фреймворках типа Vue?

    @shimarulin
    Software Engineer
    Ну может просто Inverify будет излишним во Vue3?

    Суть инверсии управления (Inversion Of Control, IoC) заключается в том, что класс передает контроль (читай: ответственность) за создание зависимых экземпляров, которые нужны классу, контейнеру, который вместо этого предоставит им эти экземпляры. Одной из реализаций инверсии управления в применении к управлению зависимостями является внедрение зависимостей (Dependency Injection, DI). Inverify реализует инверсию управления и, из того, что я видел и трогал, изредка использовался с Vue2 через Class API (который реализуется сторонними библиотеками). Там использование подобного подхода оправдано тем, что с инкапсуляцией частей логики, шарингом кода и менеджментом состояний все непросто, так как нехватает адекватных механизмов для этого. Эти проблемы в свое время привели к старту разработки принципиально нового фреймворка под названием... Vue3) В процессе рассматривали Class API и Composition API, Composition API победил и вошел в релиз, а Option API достался нам по историческим причинам (ну нельзя так просто взять и заявить, что половину опыта разработчикам стоит выкинуть в мусорное ведро).

    Итак, у нас есть Vue3 и Composition API. Без классов. Только setup-функция и useЧтоТоТам кусочки логики. Что мы имеем с этого? Мы можем вынести определенную часть логики в use-функцию. Внутри use-функции может происходить что угодно - мы импортируем только результат в виде ref-ов и функций (назовем их actions-функции). То есть use-функция отвечает за создание зависимых экземпляров, которые нужны компоненту, то есть выполняет функцию DI. Также use-функция может использовать другие use-функции. Все это значительно расширяет возможности декомпозиции, повторного использования кода, и уменьшает зацепление, для чего Inverify и предназначается. Пожалуй, единственный кейс, который мне с ходу удалось придумать для использования Inverify с Vue3 - это когда мы знаем, что будем использовать нашу логику в различных приложениях и средах с различными библиотеками рендеринга (Vue3, React, и т.п.). Но для каждого приложения в отдельности это будет дороже, поэтому стоит дважды подумать, стоит ли игра свеч и нет ли более простых путей.

    Что касается стейт-менеджмента, то Composition API тут тоже самодостаточен, когда приложение небольшое и рендерится на клиенте. Достаточно использовать замыкание и глобальный стейт готов. Pinia помогает с SSR и отображением состояния в дев-тулзах, библиотека удобна для более крупных проектов. При написании сторов внутри все пишется точно так же, как если бы использовался голый Composition API, да и в приложении используется практически так же (за исключением использования нескольких встроенных методов). Поэтому простенькое MVP-приложение очень просто перевести со сторов на use-функциях на использование Pinia. Vuex сейчас смысла особого использовать не вижу, теряется удобство и консистентность использования.

    В разговоре о DI нельзя также не упомянуть https://vuejs.org/guide/components/provide-inject.html. Его можно использовать при разработке декларативных библиотек компонентов, но это такая штука, которая может неочевидно выстрелить в ногу, использовать следует с осторожностью.

    Итого, на мой взгляд, использование Inverify с Vue3 избыточно и усложняет написание кода. Грамотное использование Composition API, Pinia (при необходимости), декларирование интерфейсов (если используется TS) и соблюдение принципа инверсии зависимостей решает все эти проблемы.
    Ответ написан
    Комментировать
  • Можно-ли искать стажировку или что-то типа того в 15 лет? Если да, то где?

    @shimarulin
    Software Engineer
    Если смотреть с точки зрения ТК РФ, то, делая скидку на то, что понятие стажировки как способа получения опыта и знаний отсутствует в законодательстве, на стажировку можно попасть двумя способами: по трудовому договору (т.е. официально это работа) и по ученическому договору (это почти как работа по контракту). В обоих случаях работодателю надо вступать в трудовые отношения, выплачивать деньги стажеру, платить налоги и взносы. В случае с несовершеннолетними на работодателя падают дополнительные ограничения и ответственность. Кроме того, стажера должен кто-то курировать, а это время ценного сотрудника, которому тоже надо платить. Итого: работодатель получает много головной боли, которая не факт, что окупится. Многие откажут не раздумывая, они по своему правы и не надо их винить. Но теоретически - могут и взять.

    В 15 лет человек может многое. Может обладать необходимыми в работе знаниями и навыками. Может найти работу за 200км от дома. Может переехать в другой город почти без денег. Может работать днем, а вечером учиться. По крайней мере, так у меня было. Вот ты спрашиваешь "а можно"? А кто в итоге решает, можно или нельзя? Только ты, никто больше. Спроси лучше себя: "нужно ли мне это сейчас?" Мне было нужно. Если тебе тоже нужно, если не пугают трудности, то кто же тебя остановит?)

    Выше написали про свои Open Source проекты - лишним не будет, считай, что нарабатываешь портфолио. Если это будет что-то, пусть простое, но не банальное - этим можно заинтересовать потенциальных будущих работодателей.
    Можно попробовать поучаствовать в разных хакатонах или просочиться на какой-нибудь митап. Это и опыт, и новые впечатления, и новые знакомые, у которых можно чему-нибудь поучиться в дальнейшем. Не исключено, что это может помочь в поиске места работы. Можно разбирать чужие проекты на гитхабе, находить в них ошибки (а может даже и править их), общаться с разработчиками. Конечно это не такой опыт, как если постоянно работать в какой-то компании, но это хороший и ценный опыт, которого у других может не быть. Да и компании все разные, "постажировался" в одной компании, а в другой этот опыт может быть не совсем релевантен. Хотя наличие глубоких системных знаний будет полезно в любом случае.
    Ответ написан
    1 комментарий
  • В чём преимущества и недостатки установок через apt и snap?

    @shimarulin
    Software Engineer
    snap - как написали выше, контейнер со всеми потрохами внутри. Весит много, запускается долго. Возможно, сейчас ситуация лучше, но в свое время 10-12 секунд для запуска калькулятора!!! (обычного, гномовского калькулятора) на SSD меня как-то напрягали. Удивительно было, что в Ubuntu некоторые snap-пакеты устанавливались по-дефолту, и от них приходилось избавляться, удаляя snap и устанавливая тот же калькулятор через "нативный" apt. Калькулятор, кстати, запускается моментально. Но если надо установить ПО новее, чем в репозиториях (с которыми работает пакетный менеджер, тот же apt), есть еще пара способов. Это AppImage (да, еще один контейнер, который несколько раз переименовывался и имеет долгую историю) - эдакие portable-версии приложений, по сути и установкой нельзя считать, и Flatpak (который был вдохновлен AppImage) - очень изолированный контейнер, вплоть до того, что системную тему не может использовать (это решается установкой такой же темы из Flathub-а), зато может разделять библиотеки окружения между несколькими пакетами. Использую оба, просто потому, что для некоторых приложений есть только AppImage, ну или оно есть на Flathub. В отличие от Snappy, нареканий к ним у меня нет, работают во всех дистрибутивах, которые я использовал (в ArchLinux по-моему его вообще нет, но могу ошибаться)
    Ответ написан
    Комментировать
  • Как дать права root на все файлы в docker?

    @shimarulin
    Software Engineer
    Каталог "./src" не создается, а пробрасывается в "/var/www", непонятно только, зачем тут рут и где задавать права? В контейнере? На хосте? Предположу, что надо редактировать исходники на хосте при запущенном контейнере, тогда в контейнере надо задать юзера с таким же uid, что и на хосте (обычно 1000, см. выхлоп "echo $UID" в консоли). Можно задать через docker-compose.yml ну и юзеров конечно можно создавать и задавать в Dockerfile
    Ответ написан
    Комментировать
  • Ребята как можно устроиться frontend разработчиком будучи сеошником?

    @shimarulin
    Software Engineer
    Подытожу: всем плевать, что там в трудовой и какая у кого биография. Главное - горячку не пороть, какое-то время пережить с мыслью сменить профиль работы. Что это даст? Больше знаний и опыта, если развиваться не прекращать - проще устроиться на нормальную вакансию. Время прикинуть, каковы будут потери в деньгах. Ну и конечно, за это время можно потерять интерес, и это уже не будет таким разочарованием, как если "перейти Рубикон" и бросить все, что есть сейчас.
    Ответ написан
    Комментировать
  • Кто готов взять на стажировку с нуля по фронтенду?

    @shimarulin
    Software Engineer
    Как правильно коллега заметил, если ты не готов платить, то платить придется твоему наставнику своим временем. Твоя работа это не окупит, пока тебя нельзя будет "использовать в продакшене". А теперь, внимание, вопрос: кому это надо?

    Если нужен ментор, то найми. Ну или там на курсы можно пойти, платно конечно.

    Нет практической задачи - придумай. Напиши код. Еще придумай и еще напиши. Находи лучших и подражай. И пиши код. Когда кода будет достаточно - приходи, подумаем. Вот ты сейчас пришел такой: "Возьмите!" А с чего вдруг? Где пруфы, Билли? Где хотя бы репозиторий на гитхабе? Примеры работ? Где?

    Удача любит подготовленных.
    Ответ написан
    Комментировать
  • Где найти работу новичку?

    @shimarulin
    Software Engineer
    Изучать JS глубоко и всерьез надо, как и другие языки и технологии. Когда встречаешь вакансию на джуна с "JS + React/Angular + PHP + Django + Mysql и многое другое" - просто закрывай вкладку, они сами не знают, чего хотят)

    То, что найти работу без опыта нельзя - это не совсем так. Сложно, но можно. На что у себя в компании смотрим, когда приходят кандидаты во фронтенд: концептуальное знание языка и программирования в целом (своими словами, ну забыл какое-то определение - и фиг с ним, главное, чтобы хотя бы на пальцах рассказал), навыки работы c HTML/CSS/JS и особенно - навыки командной работы, знание Git на достаточном для повседневных задач уровне. Где взять навыки командной работы, если у тебя нет команды? Нужно самому стать командой) Вести пэт-проекты так, как будто на проекте кроме тебя еще два десятка человек, выполнять разные роли. Следить за тем, что и как коммитишь в репозиторий. Если пользовался каким-нибудь трекером - это плюс. Если работал хотя бы с одним фреймворком - тоже плюс. Если можешь показать пэт-проекты, где ты что-то действительно сделал, пусть небольшое, но решающее какую-то задачу - еще один плюс. Бывает, что эти плюсы перебивают опыт работы 5+ лет (хотя там вообще тяжелый случай был))) Потому что опыт - дело наживное, но далеко не каждый обладает способностью обучаться достаточно быстро и непрерывно, набирать это самый опыт и использовать.

    Сейчас для многих компаний непростой период, не самое удачное время для поиска работы. Но можно пока прокачивать свои скилы, делать CV, что-то там выкладывать на гитхаб. Попробовать поиграть в "команду" с самим собой. Откликаться на вакансии, пытаться пройти собес. Вот как о тебе узнать, если ты себя не показываешь? Не "открыл hh... и закрыл", а целенаправленно и методично занимаешься поиском. Если откажут в 9 местах - это ок, бывает. В 10-ом могут и взять.

    Первое время лучше работать в офисе, будет проще во многом. С опытом можно задуматься об удаленке или фрилансе. Но это у кого как, каждому свое. Не принимай чужие советы (например мои))) на веру, проверяй, эксперементируй, добивайся.
    Ответ написан
  • Что использовать module.exports или export default?

    @shimarulin
    Software Engineer
    Обе конструкции - правильные. Просто разный формат модулей.

    В двух словах, requre()/module.exports - это старый добрый CommonJS Module, который поддерживается в любой версии Node.js. В Node.js 13.2.0 завезли поддержку ES Modules (которые import-export) в экспериментальном режиме, можете почитать об этом статью на медиуме и конечно же оф. док.

    Таким образом, с ES Modules нужно озаботиться совместимостью с предыдущими версиями Node.js, с новыми, Babel заюзать, например, для транспайлинга в CommonJS. Если просто для обучения на Node.js 13.2.0 и выше можно поменять расширение файла с .js на .mjs и это будет работать. Если не готовы с этим разбираться сейчас - ничего страшного, можно использовать CommonJS и не волноваться. Насчет настройки VSCode не скажу, не пользуюсь.
    Ответ написан
    Комментировать
  • Как заверстать такой прогресс бар?

    @shimarulin
    Software Engineer
    Если не слишком топить за идиоматичность решения, то можно сделать и так:

    <style>
      .progress {
        position: relative;
        width: 400px;
        height: 20px;
        border-radius: 10px;
        background: #d8d8d8;
      }
    
      .progress-bar {
        position: relative;
        height: 100%;
        overflow: hidden;
        background: #0dac12;
        border-radius: 10px;
      }
    
      .progress-bar__inner {
        position: absolute;
        width: 200px;
        height: 100%;
        background: #f76844;
        border-right: 2px solid #d8d8d8;
      }
    </style>
    
    <div class="progress">
          <!-- Ширина .progress-bar зависит от процента выполнения -->
          <div class="progress-bar" style="width: 247px;">
            <!-- 1/2 ширины .progress -->
            <div class="progress-bar__inner" style="width: 200px;"></div>
          </div>
        </div>


    Еще возможен вариант с применением градиента, как выше заметили.

    .progress-bar {
      background: rgb(247,104,68);
      background: linear-gradient(90deg, rgba(247,104,68,1) 0%, rgba(247,104,68,1) 200px, rgba(255,255,255,1) 200px, rgba(255,255,255,1) 201px, rgba(13,172,18,1) 201px, rgba(13,172,18,1) 100%);
    }


    А можно еще и SVG-шку сверстать.
    Ответ написан
    Комментировать